0
0
mirror of https://github.com/wagtail/wagtail.git synced 2024-11-25 05:02:57 +01:00

Fix close button visibility in new dialog non-message variant

- Add w-dialog root classname to support overall styling of the dialog if a message is provided
- Fix up layout of dynamic classes to avoid additional spaces
- Fixes #11306
This commit is contained in:
nandini584 2023-12-10 13:07:34 +05:30 committed by LB (Ben Johnston)
parent fe1a306285
commit daf0c96841
5 changed files with 13 additions and 5 deletions

View File

@ -60,6 +60,7 @@ Changelog
* Fix: Prevent a ValueError with `FormSubmissionsPanel` on Django 5.0 when creating a new form page (Matt Westcott)
* Fix: Avoid duplicate entries in "Recent edits" panel when copying pages (Matt Westcott)
* Fix: Prevent TitleFieldPanel from raising an error when the slug field is missing or read-only (Rohit Sharma)
* Fix: Ensure that the close button on the new dialog designs is visible in the non-message variant (Nandini Arora)
* Docs: Document, for contributors, the use of translate string literals passed as arguments to tags and filters using `_()` within templates (Chiemezuo Akujobi)
* Docs: Document all features for the Documents app in one location (Neeraj Yetheendran)
* Docs: Add section to testing docs about creating pages and working with page content (Mariana Bedran Lesche)

View File

@ -1,4 +1,6 @@
.w-dialog {
--w-dialog-close-icon-color: theme('colors.icon-primary');
position: fixed;
display: flex;
inset-inline-start: 0;
@ -57,7 +59,7 @@
&__close-icon {
width: theme('spacing.4');
height: theme('spacing.4');
color: theme('colors.grey.600');
color: var(--w-dialog-close-icon-color, #{theme('colors.icon-primary')});
}
&__content {
@ -134,6 +136,10 @@
}
}
&--message {
--w-dialog-close-icon-color: theme('colors.grey.600');
}
&__message-icon {
width: theme('spacing.5');
height: theme('spacing.5');

View File

@ -88,6 +88,7 @@ Thank you to Thibaud Colas and Badr Fourane for their work on this feature.
* Add ability to [customise a page's copy form](custom_page_copy_form) including an auto-incrementing slug example (Neeraj Yetheendran)
* Avoid duplicate entries in "Recent edits" panel when copying pages (Matt Westcott)
* Prevent TitleFieldPanel from raising an error when the slug field is missing or read-only (Rohit Sharma)
* Ensure that the close button on the new dialog designs is visible in the non-message variant (Nandini Arora)
### Documentation

View File

@ -6,7 +6,7 @@
<div id="{{ id }}"
aria-labelledby="title-{{ id }}"
aria-hidden="true"
class="w-dialog {% if theme %}w-dialog--{{ theme }}{% endif %} {% if classname %} {{ classname }}{% endif %}"
class="w-dialog{% if theme %} w-dialog--{{ theme }}{% endif %}{% if message_heading and message_icon_name %} w-dialog--message{% endif %}{% if classname %} {{ classname }}{% endif %}"
data-controller="w-dialog"
data-action="w-dialog:hide->w-dialog#hide w-dialog:show->w-dialog#show"
{% if theme %}data-w-dialog-theme-value="{{ theme }}"{% endif %}

View File

@ -469,7 +469,7 @@ class TestPageEdit(WagtailTestUtils, TestCase):
allow_extra_attrs=True,
)
self.assertTagInHTML(
'<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
'<div id="schedule-publishing-dialog" class="w-dialog w-dialog--message publishing" data-controller="w-dialog">',
html,
count=1,
allow_extra_attrs=True,
@ -561,7 +561,7 @@ class TestPageEdit(WagtailTestUtils, TestCase):
allow_extra_attrs=True,
)
self.assertTagInHTML(
'<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
'<div id="schedule-publishing-dialog" class="w-dialog w-dialog--message publishing" data-controller="w-dialog">',
html,
count=1,
allow_extra_attrs=True,
@ -1279,7 +1279,7 @@ class TestPageEdit(WagtailTestUtils, TestCase):
allow_extra_attrs=True,
)
self.assertTagInHTML(
'<div id="schedule-publishing-dialog" class="w-dialog publishing" data-controller="w-dialog">',
'<div id="schedule-publishing-dialog" class="w-dialog w-dialog--message publishing" data-controller="w-dialog">',
html,
count=1,
allow_extra_attrs=True,