Issue #3458215 by finnsky, m4olivei, ckrina, pooja_sharma, nod_,...

Issue #3458215 by finnsky, m4olivei, ckrina, pooja_sharma, nod_, meeni_dhobale, gauravvvv, pdureau, smustgrave, e0ipso: Migrate Toolbar button to SDC

(cherry picked from commit 390f8755)

core/modules/navigation/navigation.libraries.yml

@@ -12,7 +12,6 @@ internal.navigation:
     theme:
       css/base/fonts.css: {}
       css/base/variables.css: {}
-      css/components/toolbar-button.css: {}
       css/components/admin-toolbar.css: {}
       css/components/top-bar.css: {}
       css/components/admin-toolbar-control-bar.css: {}
@@ -27,6 +26,7 @@ internal.navigation:
     - navigation/internal.dropdown
     - navigation/internal.tooltip
     - navigation/internal.popover
+    - navigation/internal.safe-triangle
 
 admin-reset-styles:
   css:
@@ -82,3 +82,15 @@ navigation.layoutBuilder:
   css:
     base:
       css/base/layout-builder.css: {}
+
+internal.safe-triangle:
+  # Internal library. Do not depend on it outside core nor add core usage
+  # beyond the Navigation module.
+  js:
+    js/safe-triangle.js: {}
+  css:
+    base:
+      css/components/safe-triangle.css: {}
+  dependencies:
+    - core/drupal
+    - core/once

core/modules/navigation/templates/big-pipe-interface-preview--navigation-shortcut-lazy-builder-lazyLinks--Shortcuts.html.twig

@@ -6,9 +6,16 @@
  */
 #}
 
-{% include '@navigation/toolbar-button.html.twig' with {
+{% include 'navigation:toolbar-button' with {
   attributes: create_attribute(),
-  extra_classes: 'invisible toolbar-button--icon--shortcuts toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
+  modifiers: [
+    'expand--side',
+    'collapsible',
+  ],
+  extra_classes: [
+    'invisible',
+    'toolbar-popover__control',
+  ],
   icon: 'shortcuts',
   text: 'Shortcuts'|t,
 } only %}

core/modules/navigation/templates/menu-region--footer.html.twig

@@ -28,33 +28,56 @@
   <ul class="toolbar-block__list">
     {% if help %}
       <li class="toolbar-block__list-item">
-        {% include '@navigation/toolbar-button.html.twig' with {
+        {% include 'navigation:toolbar-button' with {
           attributes: create_attribute({ 'href': path('help.main'), 'data-drupal-tooltip': 'Help'|t, 'data-drupal-tooltip-class': 'admin-toolbar__tooltip' }),
           icon: 'help',
           html_tag: 'a',
           text: 'Help'|t,
-          extra_classes: 'toolbar-button--collapsible',
+          modifiers: ['collapsible'],
         } only %}
       </li>
     {% endif %}
     <li id="admin-toolbar-user-menu" class="toolbar-block__list-item toolbar-block__list-item--user toolbar-popover" data-toolbar-popover>
-      {% include '@navigation/toolbar-button.html.twig' with {
-        action: true,
-        attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar-user-menu', 'data-toolbar-popover-control': true}),
+      {% include 'navigation:toolbar-button' with {
+        action: 'Extend'|t,
+        attributes: create_attribute({
+          'aria-expanded': 'false',
+          'aria-controls': 'admin-toolbar-user-menu',
+          'data-toolbar-popover-control': true,
+          'data-has-safe-triangle': true,
+        }),
         icon:  menu_name|clean_class,
         text: title,
-        extra_classes: 'toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
-        has_safe_triangle: TRUE,
+        modifiers: [
+          'expand--side',
+          'collapsible',
+        ],
+        extra_classes: [
+          'toolbar-popover__control',
+        ],
       } only %}
       <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper>
-        <span class="toolbar-popover__header toolbar-button toolbar-button--large toolbar-button--dark toolbar-button--non-interactive">{{ title }}</span>
+        {% include 'navigation:toolbar-button' with {
+          attributes: create_attribute(),
+          modifiers: [
+            'large',
+            'dark',
+            'non-interactive',
+          ],
+          extra_classes: [
+            'toolbar-popover__header',
+          ],
+          html_tag: 'span',
+          text: title,
+        } only %}
         <ul class="toolbar-menu toolbar-popover__menu">
           {% for item in items %}
             <li class="toolbar-menu__item toolbar-menu__item--level-1">
-              <a
-                href="{{ item.url }}"
-                class="toolbar-button"
-              >{{ item.title }}</a>
+              {% include 'navigation:toolbar-button' with {
+                attributes: create_attribute({ 'href': item.url|render }),
+                html_tag: 'a',
+                text: item.title,
+              } only %}
             </li>
           {% endfor %}
         </ul>

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

@@ -29,29 +29,65 @@
     {% if menu_level == 0 %}
       {% if item.below is empty %}
         <li id="{{ item_id }}" class="toolbar-block__list-item">
-          {% include '@navigation/toolbar-button.html.twig' with {
+          {% include 'navigation:toolbar-button' with {
             attributes: item_link_attributes.setAttribute('href', item.url|render|default(null)).setAttribute('data-drupal-tooltip', item.title).setAttribute('data-drupal-tooltip-class', 'admin-toolbar__tooltip'),
             icon: item.class|clean_class,
             html_tag: item_link_tag,
             text: item.title,
-            extra_classes: 'toolbar-button--collapsible ' ~ (item_link_tag == 'span' ? 'toolbar-button--non-interactive'),
+            modifiers: [
+              'collapsible',
+              item_link_tag == 'span' ? 'non-interactive' : null
+            ]|filter(v => v is not null),
           } only %}
         </li>
       {% else %}
         <li id="{{ item_id }}" class="toolbar-block__list-item toolbar-popover" data-toolbar-popover>
-          {% include '@navigation/toolbar-button.html.twig' with {
-            action: true,
-            attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': item_id, 'data-toolbar-popover-control': true}),
+          {% include 'navigation:toolbar-button' with {
+            action: 'Extend'|t,
+            attributes: create_attribute({
+              'aria-expanded': 'false',
+              'aria-controls': item_id,
+              'data-toolbar-popover-control': true,
+              'data-has-safe-triangle': true,
+            }),
             icon: item.class|clean_class,
             text: item.title,
-            extra_classes: 'toolbar-button--expand--side toolbar-button--collapsible toolbar-popover__control',
-            has_safe_triangle: TRUE,
+            modifiers: [
+              'expand--side',
+              'collapsible',
+            ],
+            extra_classes: [
+              'toolbar-popover__control',
+            ],
           } only %}
           <div class="toolbar-popover__wrapper" data-toolbar-popover-wrapper inert>
             {% if item.url %}
-              {{ link(item.title, item.url, item_link_attributes.addClass(['toolbar-popover__header', 'toolbar-button', 'toolbar-button--large', 'toolbar-button--dark'])) }}
+              {% include 'navigation:toolbar-button' with {
+                attributes: item_link_attributes.setAttribute('href', item.url|render),
+                html_tag: item_link_tag,
+                text: item.title,
+                modifiers: [
+                  'large',
+                  'dark',
+                ],
+                extra_classes: [
+                  'toolbar-popover__header',
+                ],
+              } only %}
             {% else %}
-              <span class="toolbar-popover__header toolbar-button toolbar-button--large toolbar-button--dark toolbar-button--non-interactive">{{ item.title }}</span>
+              {% include 'navigation:toolbar-button' with {
+                attributes: create_attribute(),
+                modifiers: [
+                  'large',
+                  'dark',
+                  'non-interactive',
+                ],
+                extra_classes: [
+                  'toolbar-popover__header',
+                ],
+                html_tag: 'span',
+                text: item.title,
+              } only %}
             {% endif %}
             <ul class="toolbar-menu toolbar-popover__menu">
               {{ menus.menu_items(item.below, attributes, 1) }}
@@ -63,22 +99,23 @@
     {% elseif menu_level == 1 %}
       <li class="toolbar-menu__item toolbar-menu__item--level-{{ menu_level }}">
         {% if item.below is empty  %}
-          {% include '@navigation/toolbar-button.html.twig' with {
+          {% include 'navigation:toolbar-button' with {
             attributes: item_link_attributes.setAttribute('href', item.url|render|default(null)),
             text: item.title,
             html_tag: item_link_tag,
-            extra_classes: item_link_tag == 'span' ? 'toolbar-button--non-interactive',
+            extra_classes: [
+              item_link_tag == 'span' ? 'toolbar-button--non-interactive'
+            ],
           } only %}
         {% else %}
-          <button
-            class="toolbar-button toolbar-button--expand--down"
-            data-toolbar-menu-trigger="{{ menu_level }}"
-            aria-expanded="false"
-            data-index-text="{{ item.title|first|lower }}"
-          >
-            <span class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
-            <span class="toolbar-menu__link-title">{{ item.title }}</span>
-          </button>
+          {% include 'navigation:toolbar-button' with {
+            attributes: create_attribute({
+              'aria-expanded': 'false',
+              'data-toolbar-menu-trigger': menu_level,
+            }),
+            text: item.title,
+            modifiers: ['expand--down'],
+          } only %}
           <ul class="toolbar-menu toolbar-menu--level-{{ menu_level + 1 }}" inert>
             {{ menus.menu_items(item.below, attributes, menu_level + 1) }}
           </ul>
@@ -101,7 +138,7 @@
             aria-expanded="false"
             data-index-text="{{ item.title|first|lower }}"
           >
-            <span class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
+            <span data-toolbar-action class="toolbar-menu__link-action visually-hidden">{{ 'Extend'|t }}</span>
             <span class="toolbar-menu__link-title">{{ item.title }}</span>
           </button>
           <ul class="toolbar-menu toolbar-menu--level-{{ menu_level + 1 }}" inert>

core/modules/navigation/templates/toolbar-button.html.twig

-{# Extra classes variable added to be sure that modifiers will
-appear after main classes #}
-{%
-  set classes = [
-    'toolbar-button',
-    icon ? 'toolbar-button--icon--' ~ icon : '',
-    extra_classes,
-  ]
-%}
-<{{html_tag|default('button')}}
-  {{ attributes.addClass(classes) }}
-  data-index-text="{{ text|first|lower }}"
-  data-icon-text="{{- text|render|trim|slice(0, 2)|join('') -}}"
->
-  {% if avatar %}
-    <span class="toolbar-button__avatar">{{~ avatar ~}}</span>
-  {% endif %}
-  {% if action %}
-    <span data-toolbar-action class="visually-hidden">{{ 'Extend'|t }}</span>
-  {% endif %}
-  {% block content %}
-    {% if text %}
-      <span class="toolbar-button__label {{ label_classes }}" data-text>{{~ text ~}}</span>
-    {% endif %}
-  {% endblock %}
-
-  {# Element that improves sub-menu UX by implementing the Safe Triangle strategy.
-More info at https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles #}
-  {% if has_safe_triangle %}
-    <div data-toolbar-popover-safe-triangle></div>
-  {% endif %}
-
-</{{html_tag|default('button')}}>

core/modules/navigation/templates/top-bar-local-tasks.html.twig

@@ -8,7 +8,7 @@
  */
 #}
 {% set dropdown_id = 'admin-local-tasks'|clean_unique_id %}
-{% include '@navigation/toolbar-button.html.twig' with {
+{% include 'navigation:toolbar-button' with {
   attributes: create_attribute(
     {
       'aria-expanded': 'false',
@@ -17,7 +17,11 @@
     }
   ),
   text: 'More actions'|t,
-  extra_classes: 'toolbar-button--expand--down toolbar-button--weight--400 toolbar-button--tertiary--expanded toolbar-button--actions',
+  modifiers: [
+    'expand--down',
+    'weight--400',
+    'small-offset',
+  ],
 } only %}
 <div class="toolbar-dropdown__menu" id={{ dropdown_id }}>
   <ul class="toolbar-dropdown__list">