Messages SDC - #3502993

core/modules/navigation/components/message/message.component.yml

+# This is so your IDE knows about the syntax for fixes and autocomplete.
+$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
+
+# The human readable name.
+name: Message
+
+# Status can be: "experimental", "stable", "deprecated", "obsolete".
+status: experimental
+
+# Schema for the props. We support www.json-schema.org. Learn more about the
+# syntax there.
+props:
+  # Props are always an object with keys. Each key is a variable in your
+  # component template.
+  type: object
+
+  properties:
+    type:
+      type: string
+      default: status
+      enum:
+        - error
+        - status
+        - warning
+    url:
+      type: string
+      title: Message URL
+      format: iri-reference
+slots:
+  content:
+    type: string
+    description: Message content.

core/modules/navigation/css/components/toolbar-message.css → core/modules/navigation/components/message/message.css

@@ -11,7 +11,6 @@
   z-index: 1;
   display: flex;
   align-items: start;
-  cursor: pointer;
   text-align: start;
   -webkit-text-decoration: none;
   text-decoration: none;
@@ -28,6 +27,10 @@
   gap: calc(0.5 * var(--admin-toolbar-rem));
 }
 
+.toolbar-message[href] {
+  cursor: pointer;
+}
+
 .toolbar-message__icon {
   flex-shrink: 0;
   inline-size: var(--admin-toolbar-space-20);

core/modules/navigation/css/components/toolbar-message.pcss.css → core/modules/navigation/components/message/message.pcss.css

@@ -4,7 +4,6 @@
   z-index: 1;
   display: flex;
   align-items: start;
-  cursor: pointer;
   text-align: start;
   text-decoration: none;
   word-break: break-word;
@@ -20,6 +19,10 @@
   gap: calc(0.5 * var(--admin-toolbar-rem));
 }
 
+.toolbar-message[href] {
+  cursor: pointer;
+}
+
 .toolbar-message__icon {
   flex-shrink: 0;
   inline-size: var(--admin-toolbar-space-20);

core/modules/navigation/templates/navigation--message.html.twig → core/modules/navigation/components/message/message.twig

-{#
-/**
- * @file
- * Default theme implementation to display a single message in the navigation toolbar.
- *
- * Available variables:
- * - content: The message to display.
- *
- * @ingroup themeable
- */
-#}
 {%
   set classes = [
     'toolbar-message',

core/modules/navigation/navigation.libraries.yml

@@ -38,15 +38,6 @@ internal.navigation-workspaces:
   dependencies:
     - navigation/internal.navigation
 
-internal.navigation-messages:
-  # Internal library. Do not depend on it outside core nor add core usage
-  # beyond the Navigation module.
-  css:
-    theme:
-      css/components/toolbar-message.css: { }
-  dependencies:
-    - navigation/internal.navigation
-
 admin-reset-styles:
   css:
     base:

core/modules/navigation/src/Hook/NavigationHooks.php

@@ -133,14 +133,6 @@ public function theme($existing, $type, $theme, $path) : array {
         'message_list' => NULL,
       ],
     ];
-    $items['navigation__message'] = [
-      'variables' => [
-        'attributes' => [],
-        'url' => NULL,
-        'content' => NULL,
-        'type' => 'status',
-      ],
-    ];
     return $items;
   }
 

core/modules/navigation/templates/navigation--messages.html.twig

@@ -9,7 +9,6 @@
  * @ingroup themeable
  */
 #}
-{{ attach_library('navigation/internal.navigation-messages') }}
 <div class="toolbar-block__list">
   {% for message in message_list %}
     {{ message }}

core/profiles/demo_umami/src/Hook/DemoUmamiHooks.php

@@ -179,12 +179,15 @@ public function navigationContentTop(): array {
       '#theme' => 'navigation__messages',
       '#message_list' => [
         [
-          '#theme' => 'navigation__message',
-          '#content' => [
-            '#markup' => $this->t('This site is intended for demonstration purposes.'),
+          '#type' => 'component',
+          '#component' => 'navigation:message',
+          '#props' => [
+            'type' => 'warning',
+            'url' => $url,
+          ],
+          '#slots' => [
+            'content' => (string) $this->t('This site is intended for demonstration purposes.'),
           ],
-          '#url' => $url,
-          '#type' => 'warning',
         ],
       ],
     ];