From daf0c96841143db92c402604678073ae559b3154 Mon Sep 17 00:00:00 2001
From: nandini584 <nandini.arora.che22@itbhu.ac.in>
Date: Sun, 10 Dec 2023 13:07:34 +0530
Subject: [PATCH] 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
---
 CHANGELOG.txt                                             | 1 +
 client/scss/components/_dialog.scss                       | 8 +++++++-
 docs/releases/6.0.md                                      | 1 +
 .../templates/wagtailadmin/shared/dialog/dialog.html      | 2 +-
 wagtail/admin/tests/pages/test_edit_page.py               | 6 +++---
 5 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index ea5bf83971..a6afcd3a6f 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -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)
diff --git a/client/scss/components/_dialog.scss b/client/scss/components/_dialog.scss
index 64583de4e5..50fff5020b 100644
--- a/client/scss/components/_dialog.scss
+++ b/client/scss/components/_dialog.scss
@@ -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');
diff --git a/docs/releases/6.0.md b/docs/releases/6.0.md
index 4b004d7b38..8e46785a54 100644
--- a/docs/releases/6.0.md
+++ b/docs/releases/6.0.md
@@ -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
diff --git a/wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html b/wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html
index 4e35f0462e..53dc13f910 100644
--- a/wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html
+++ b/wagtail/admin/templates/wagtailadmin/shared/dialog/dialog.html
@@ -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 %}
diff --git a/wagtail/admin/tests/pages/test_edit_page.py b/wagtail/admin/tests/pages/test_edit_page.py
index 44df6ddb70..f93979986a 100644
--- a/wagtail/admin/tests/pages/test_edit_page.py
+++ b/wagtail/admin/tests/pages/test_edit_page.py
@@ -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,