Issue #3100083 by finnsky, Zsuffa Dávid, ankithashetty, _utsavsharma,...

Issue #3100083 by finnsky, Zsuffa Dávid, ankithashetty, _utsavsharma, gauravvvv, smustgrave, zrpnr, markconroy: Add js message theme override to match Umami message markup

(cherry picked from commit 0e07179f)

core/profiles/demo_umami/tests/src/FunctionalJavascript/AssetAggregationAcrossPagesTest.php

@@ -27,7 +27,7 @@ public function testFrontAndRecipesPages(): void {
     $this->assertSame(4, $performance_data->getStylesheetCount());
     $this->assertLessThan(80000, $performance_data->getStylesheetBytes());
     $this->assertSame(1, $performance_data->getScriptCount());
-    $this->assertLessThan(7500, $performance_data->getScriptBytes());
+    $this->assertLessThan(12000, $performance_data->getScriptBytes());
   }
 
   /**

core/profiles/demo_umami/tests/src/FunctionalJavascript/OpenTelemetryFrontPagePerformanceTest.php

@@ -75,9 +75,9 @@ protected function testFrontPageHotCache(): void {
     $this->assertSame(1, $performance_data->getCacheTagIsValidCount());
     $this->assertSame(0, $performance_data->getCacheTagInvalidationCount());
     $this->assertSame(1, $performance_data->getScriptCount());
-    $this->assertLessThan(7500, $performance_data->getScriptBytes());
+    $this->assertLessThan(12000, $performance_data->getScriptBytes());
     $this->assertSame(2, $performance_data->getStylesheetCount());
-    $this->assertLessThan(40400, $performance_data->getStylesheetBytes());
+    $this->assertLessThan(42000, $performance_data->getStylesheetBytes());
   }
 
   /**

core/profiles/demo_umami/themes/umami/css/components/layout_builder/layout-builder.css

@@ -3,13 +3,12 @@
  * This file is used to style the layout builder.
  */
 
-.layout-builder__message--defaults .messages,
-.layout-builder__message--overrides .messages {
+.layout-builder__message .messages {
   background-image: none;
 }
 .layout-builder__message--defaults .messages__content {
-  background-image: url("../../../../../../../misc/icons/73b355/globe.svg");
+  --umami-message-icon: url("../../../../../../../misc/icons/73b355/globe.svg");
 }
 .layout-builder__message--overrides .messages__content {
-  background-image: url("../../../../../../../misc/icons/73b355/location.svg");
+  --umami-message-icon: url("../../../../../../../misc/icons/73b355/location.svg");
 }

core/profiles/demo_umami/themes/umami/css/components/messages/messages.css

@@ -4,49 +4,39 @@
  */
 
 .messages {
-  margin-bottom: 1em;
   padding: 20px;
   word-wrap: break-word;
   color: inherit;
   overflow-wrap: break-word;
 }
-[dir="rtl"] .messages {
-  text-align: right;
-  background-position: right 10px top 17px;
-}
-.messages + .messages {
-  margin-top: 1.538em;
-}
 .messages__content {
-  padding-left: 24px; /* LTR */
-  background: no-repeat 0 center; /* LTR */
+  padding-inline-start: 24px;
+  background-image: var(--umami-message-icon);
+  background-repeat: no-repeat;
+  background-position-x: left;
+  background-position-y: center;
 }
 [dir="rtl"] .messages__content {
-  padding-right: 24px;
-  padding-left: 0;
-  background-position: right;
+  background-position-x: right;
 }
 .messages--status {
+  --umami-message-icon: url(/core/misc/icons/73b355/check.svg);
+
   border: 1px solid #cbdebc;
   background-color: #e6eee0;
 }
-.messages--status .messages__content {
-  background-image: url(/core/misc/icons/73b355/check.svg);
-}
 .messages--warning {
+  --umami-message-icon: url(/core/misc/icons/e29700/warning.svg);
+
   border: 1px solid #fae2a4;
   background-color: #fcf1d4;
 }
-.messages--warning .messages__content {
-  background-image: url(/core/misc/icons/e29700/warning.svg);
-}
 .messages--error {
+  --umami-message-icon: url(/core/misc/icons/e32700/error.svg);
+
   border: 1px solid #f8c8d5;
   background-color: #f9e6eb;
 }
-.messages--error .messages__content {
-  background-image: url(/core/misc/icons/e32700/error.svg);
-}
 .messages--error .error {
   color: inherit;
 }
@@ -61,3 +51,7 @@
 .messages__item + .messages__item {
   margin-top: 0.769em;
 }
+.messages__wrapper {
+  display: grid;
+  gap: 1.538em;
+}

core/profiles/demo_umami/themes/umami/js/components/messages/messages.js

@@ -34,7 +34,7 @@
     messageWrapper.setAttribute('data-drupal-message-type', type);
 
     messageWrapper.innerHTML = `
-    <div class="messages__content container">
+    <div class="messages__content">
       <h2 class="visually-hidden">
         ${messagesTypes[type]}
       </h2>

core/profiles/demo_umami/themes/umami/templates/components/messages/status-messages.html.twig

@@ -20,19 +20,21 @@
  */
 #}
 <div data-drupal-messages>
-{% block messages %}
-{% for type, messages in message_list %}
-  {%
-    set classes = [
-      'messages',
-      'messages--' ~ type,
-    ]
-  %}
-  <div role="contentinfo" aria-label="{{ status_headings[type] }}"{{ attributes.addClass(classes)|without('role', 'aria-label') }}>
-    <div class="messages__content container">
-      {% if type == 'error' %}
-        <div role="alert">
-      {% endif %}
+  <div class="messages__wrapper container">
+  {% block messages %}
+  {% for type, messages in message_list %}
+    {%
+      set classes = [
+        'messages',
+        'messages--' ~ type,
+      ]
+    %}
+    <div
+      aria-label="{{ status_headings[type] }}"
+      {{ attributes.addClass(classes)|without('aria-label') }}
+      role={{ type == 'error' or type == 'warning' ? 'alert' : 'status' }}
+    >
+      <div class="messages__content">
         {% if status_headings[type] %}
           <h2 class="visually-hidden">{{ status_headings[type] }}</h2>
         {% endif %}
@@ -45,13 +47,11 @@
         {% else %}
           <span class="messages__item">{{ messages|first }}</span>
         {% endif %}
-      {% if type == 'error' %}
-        </div>
-      {% endif %}
+      </div>
     </div>
+    {# Remove type specific classes. #}
+    {% set attributes = attributes.removeClass(classes) %}
+  {% endfor %}
+  {% endblock messages %}
   </div>
-  {# Remove type specific classes. #}
-  {% set attributes = attributes.removeClass(classes) %}
-{% endfor %}
-{% endblock messages %}
 </div>

core/profiles/demo_umami/themes/umami/umami.info.yml

@@ -6,6 +6,7 @@ version: VERSION
 libraries:
   - umami/classy.base
   - core/normalize
+  - core/drupal.message
   - umami/global
 
 libraries-override: