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/components/toolbar-button/toolbar-button.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: Toolbar button
+
+# 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:
+    action:
+      type: string
+      title: Action
+      description: Hidden button action text.
+    modifiers:
+      type: array
+      title: Modifier classes.
+      description:
+        Button modifiers.
+        https://en.bem.info/methodology/css/#modifiers
+      items:
+        type: string
+        enum:
+          - collapsible
+          - dark
+          - expand--down
+          - expand--side
+          - large
+          - non-interactive
+          - small-offset
+          - weight--400
+    extra_classes:
+      type: array
+      title: Extra classes.
+      description:
+        External modifiers added from the placement context.
+        https://en.bem.info/methodology/css/#mixes
+      items:
+        type: string
+    html_tag:
+      type: string
+      title: HTML tag
+      # Limit the available options by using enums.
+      enum:
+        - a
+        - button
+        - span
+      # Provide a default value
+      default: button
+    icon:
+      title: Icon
+      type: string
+    text:
+      title: Text
+      description: Text of button.
+      type: string
+slots:
+  content:
+    title: Content
+    description: Content of button.

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

@@ -4,26 +4,18 @@
  * Toolbar button styles.
  */
 
-@import "../base/media-queries.pcss.css";
+@import "../../css/base/media-queries.pcss.css";
 
 :root {
   --toolbar-button-outline-offset: 0;
 }
 
-/* In top bar mobile we need small outline offset. */
-:where(.top-bar) {
-  --toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
-
-  @media (--admin-toolbar-desktop) {
-    --toolbar-button-outline-offset: 0px;
-  }
-}
-
 .toolbar-button {
   z-index: 1;
   align-items: center;
   padding-inline: var(--admin-toolbar-space-16);
-  padding-block: calc(0.75 * var(--admin-toolbar-rem));
+  padding-block: var(--admin-toolbar-space-10);
+  min-height: var(--admin-toolbar-space-40);
   cursor: pointer;
   text-align: start;
   text-decoration: none;
@@ -55,11 +47,6 @@
     color: var(--admin-toolbar-color-blue-700);
     outline: 2px solid var(--admin-toolbar-color-focus);
     outline-offset: var(--toolbar-button-outline-offset);
-    background-color: transparent;
-  }
-
-  &:hover:focus {
-    background-color: var(--admin-toolbar-color-gray-050);
   }
 
   &.current {
@@ -68,15 +55,16 @@
   }
 }
 
+/* Dark color modifier for submenus title */
+.toolbar-button--dark {
+  color: var(--admin-toolbar-color-gray-990);
+}
+
 .toolbar-button--large {
   padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
   font-size: var(--admin-toolbar-font-size-info-lg);
   line-height: var(--admin-toolbar-line-height-info-lg);
 }
-/* Dark color modifier for submenus title */
-.toolbar-button--dark {
-  color: var(--admin-toolbar-color-gray-990);
-}
 
 .toolbar-button--non-interactive {
   &:hover,
@@ -90,9 +78,13 @@
   }
 }
 
+.toolbar-button--small-offset {
+  --toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
+}
+
 /* Class starts with `toolbar-button--icon`  */
 [class*="toolbar-button--icon"] {
-  padding-inline: calc(0.75 * var(--admin-toolbar-rem));
+  padding-inline: var(--admin-toolbar-space-10);
 
   &::before {
     display: flex;
@@ -133,26 +125,6 @@
   }
 }
 
-.toolbar-button--primary {
-  color: white;
-  background-color: var(--admin-toolbar-color-blue-450);
-
-  &:hover,
-  &:focus {
-    color: white;
-    background-color: var(--admin-toolbar-color-blue-650);
-  }
-}
-
-.toolbar-button--secondary--expanded[aria-expanded="true"] {
-  color: white;
-  background-color: var(--admin-toolbar-color-gray-900);
-}
-
-.toolbar-button--tertiary--expanded[aria-expanded="true"] {
-  background-color: var(--admin-toolbar-color-gray-050);
-}
-
 .toolbar-button--weight--400 {
   font-variation-settings: "wght" 400;
 }
@@ -175,9 +147,9 @@
     mask-size: var(--admin-toolbar-space-16);
     mask-repeat: no-repeat;
     mask-position: center center;
-    mask-image: url(../../assets/icons/chevron.svg);
+    mask-image: url(./assets/chevron.svg);
 
-    [dir="rtl"] & {
+    :where([dir="rtl"]) & {
       transform: rotate(180deg);
     }
 
@@ -187,8 +159,7 @@
   }
 }
 
-.toolbar-button--expand--down,
-[dir="rtl"] .toolbar-button--expand--down {
+.toolbar-button--expand--down {
   &::after {
     transform: rotate(90deg);
 
@@ -209,108 +180,101 @@
   }
 }
 
-.toolbar-button--arrow-first {
-  &::after {
-    order: -1;
+.toolbar-button--icon--announcements-feed-announcement {
+  --icon: url(./assets/announcement.svg);
+  &::before {
+    transform: scaleX(-1);
+  }
+
+  [dir="rtl"] & {
+    &::before {
+      transform: scaleX(1);
+    }
   }
 }
 
 .toolbar-button--icon--back {
-  --icon: url(../../assets/icons/arrow-left.svg);
+  --icon: url(./assets/arrow-left.svg);
 }
 
 .toolbar-button--icon--burger {
-  --icon: url(../../assets/icons/burger.svg);
+  --icon: url(./assets/burger.svg);
 }
 
 .toolbar-button--icon--cross {
-  --icon: url(../../assets/icons/cross.svg);
-}
-
-.toolbar-button--icon--system-themes-page {
-  --icon: url(../../assets/icons/appearance.svg);
+  --icon: url(./assets/cross.svg);
 }
 
-.toolbar-button--icon--navigation-blocks {
-  --icon: url(../../assets/icons/blocks.svg);
+.toolbar-button--icon--entity-user-collection {
+  --icon: url(./assets/people.svg);
 }
 
-.toolbar-button--icon--shortcuts {
-  --icon: url(../../assets/icons/shortcuts.svg);
+.toolbar-button--icon--help {
+  --icon: url(./assets/help.svg);
 }
 
-.toolbar-button--icon--system-admin-config {
-  --icon: url(../../assets/icons/config.svg);
+.toolbar-button--icon--navigation-blocks {
+  --icon: url(./assets/blocks.svg);
 }
 
 .toolbar-button--icon--navigation-content {
-  --icon: url(../../assets/icons/content.svg);
+  --icon: url(./assets/content.svg);
 }
 
 .toolbar-button--icon--navigation-create {
-  --icon: url(../../assets/icons/create.svg);
-}
-
-.toolbar-button--icon--system-modules-list {
-  --icon: url(../../assets/icons/extend.svg);
+  --icon: url(./assets/create.svg);
 }
 
 .toolbar-button--icon--navigation-files {
-  --icon: url(../../assets/icons/files.svg);
-}
-
-.toolbar-button--icon--help {
-  --icon: url(../../assets/icons/help.svg);
+  --icon: url(./assets/files.svg);
 }
 
 .toolbar-button--icon--navigation-media {
-  --icon: url(../../assets/icons/media.svg);
+  --icon: url(./assets/media.svg);
 }
 
 .toolbar-button--icon--pencil {
-  --icon: url(../../assets/icons/pencil.svg);
+  --icon: url(./assets/pencil.svg);
 }
 
 .toolbar-button--icon--preview {
-  --icon: url(../../assets/icons/eye.svg);
+  --icon: url(./assets/eye.svg);
 }
 
-.toolbar-button--icon--entity-user-collection {
-  --icon: url(../../assets/icons/people.svg);
+.toolbar-button--icon--shortcuts {
+  --icon: url(./assets/shortcuts.svg);
+}
+
+.toolbar-button--icon--system-admin-config {
+  --icon: url(./assets/config.svg);
 }
 
 .toolbar-button--icon--system-admin-reports {
-  --icon: url(../../assets/icons/reports.svg);
+  --icon: url(./assets/reports.svg);
 }
 
 .toolbar-button--icon--system-admin-structure {
-  --icon: url(../../assets/icons/structure.svg);
+  --icon: url(./assets/structure.svg);
 }
 
-.toolbar-button--icon--user {
-  --icon: url(../../assets/icons/user.svg);
+.toolbar-button--icon--system-modules-list {
+  --icon: url(./assets/extend.svg);
 }
 
-.toolbar-button--icon--announcements-feed-announcement {
-  --icon: url(../../assets/icons/announcement.svg);
-  &::before {
-    transform: scaleX(-1);
-  }
+.toolbar-button--icon--system-themes-page {
+  --icon: url(./assets/appearance.svg);
+}
 
-  [dir="rtl"] & {
-    &::before {
-      transform: scaleX(1);
-    }
-  }
+.toolbar-button--icon--user {
+  --icon: url(./assets/user.svg);
 }
 
-html:not([data-admin-toolbar="expanded"]) {
-  .toolbar-button--collapsible::after {
+.toolbar-button--collapsible {
+  &::after {
     display: none;
   }
 
-  /* Visually-hidden labels when collapsed. */
-  .toolbar-button--collapsible .toolbar-button__label {
+  & .toolbar-button__label {
     position: absolute;
     overflow: hidden;
     clip: rect(0 0 0 0);
@@ -320,9 +284,26 @@ html:not([data-admin-toolbar="expanded"]) {
     clip-path: inset(50%);
     opacity: 0;
   }
-}
 
-/* Hides button's label while transitioning. */
-html[data-admin-toolbar-animating][data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__label {
-  display: none;
+  [data-admin-toolbar="expanded"] & {
+    &::after {
+      display: block;
+    }
+
+    & .toolbar-button__label {
+      position: relative;
+      clip: revert;
+      width: auto;
+      height: auto;
+      white-space: wrap;
+      clip-path: none;
+      opacity: 1;
+    }
+  }
+
+  [data-admin-toolbar-animating] & {
+    & .toolbar-button__label {
+      display: none;
+    }
+  }
 }

core/modules/navigation/components/toolbar-button/toolbar-button.twig

+{# Extra classes variable added to be sure that modifiers will
+appear after main classes #}
+{%
+  set classes = [
+    'toolbar-button',
+    icon ? 'toolbar-button--icon--' ~ icon : '',
+  ]
+%}
+
+{% if modifiers is iterable %}
+  {% set classes = classes|merge(modifiers|map(modifier => "toolbar-button--#{modifier}")) %}
+{% endif %}
+
+{% if extra_classes is iterable %}
+  {% set classes = classes|merge(extra_classes) %}
+{% endif %}
+
+{% if text and text|length > 1 %}
+  {# We take the first two letters of the button text to use as a fallback when
+  the toolbar button does not have a pre-assigned icon. #}
+  {% set icon_text = text|slice(0, 2)|join('') %}
+  {% set attributes = attributes.setAttribute('data-index-text', text|first|lower).setAttribute('data-icon-text', icon_text) %}
+{% endif %}
+
+<{{ html_tag|default('button') }} {{ attributes.addClass(classes) }}>
+  {% if action %}
+    <span data-toolbar-action class="visually-hidden">{{ action }}</span>
+  {% endif %}
+  {% block content %}
+    {% if text %}
+      <span class="toolbar-button__label" data-toolbar-text>{{~ text ~}}</span>
+    {% endif %}
+  {% endblock %}
+
+</{{ html_tag|default('button') }}>

core/modules/navigation/css/base/variables.css

@@ -88,6 +88,7 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
    */
   --admin-toolbar-space-4: var(--drupal-admin-space-4, calc(0.25 * var(--admin-toolbar-rem))); /* 0.25 * 16px = 4px */
   --admin-toolbar-space-8: var(--drupal-admin-space-8, calc(0.5 * var(--admin-toolbar-rem))); /* 0.5 * 16px = 8px */
+  --admin-toolbar-space-10: var(--drupal-admin-space-10, calc(0.625 * var(--admin-toolbar-rem))); /* 0.625 * 16px = 10px */
   --admin-toolbar-space-12: var(--drupal-admin-space-12, calc(0.75 * var(--admin-toolbar-rem))); /* 0.75 * 16px = 12px */
   --admin-toolbar-space-16: var(--drupal-admin-space-16, var(--admin-toolbar-rem)); /* 16px = 16px */
   --admin-toolbar-space-20: var(--drupal-admin-space-20, calc(1.25 * var(--admin-toolbar-rem))); /* 1.25 * 16px = 20px */

core/modules/navigation/css/base/variables.pcss.css

@@ -85,6 +85,7 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main
    */
   --admin-toolbar-space-4: var(--drupal-admin-space-4, calc(0.25 * var(--admin-toolbar-rem))); /* 0.25 * 16px = 4px */
   --admin-toolbar-space-8: var(--drupal-admin-space-8, calc(0.5 * var(--admin-toolbar-rem))); /* 0.5 * 16px = 8px */
+  --admin-toolbar-space-10: var(--drupal-admin-space-10, calc(0.625 * var(--admin-toolbar-rem))); /* 0.625 * 16px = 10px */
   --admin-toolbar-space-12: var(--drupal-admin-space-12, calc(0.75 * var(--admin-toolbar-rem))); /* 0.75 * 16px = 12px */
   --admin-toolbar-space-16: var(--drupal-admin-space-16, var(--admin-toolbar-rem)); /* 16px = 16px */
   --admin-toolbar-space-20: var(--drupal-admin-space-20, calc(1.25 * var(--admin-toolbar-rem))); /* 1.25 * 16px = 20px */

core/modules/navigation/css/components/safe-triangle.css

+/*
+ * DO NOT EDIT THIS FILE.
+ * See the following change record for more information,
+ * https://www.drupal.org/node/3084859
+ * @preserve
+ */
+
+[data-has-safe-triangle] {
+  --safe-triangle-cursor-y: 6.25rem;
+  --safe-triangle-cursor-x: 6.25rem;
+  --safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
+  --safe-triangle-submenu-start-y: 5vh;
+  --safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
+  /* TODO: Replace with calculated value of popover content height. */
+  --safe-triangle-submenu-end-y: 66vh;
+}
+
+[data-has-safe-triangle]:hover [data-safe-triangle] {
+  display: block;
+}
+
+[data-safe-triangle] {
+  position: fixed;
+  display: none;
+  content: "";
+  inset: 0;
+  clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
+}

core/modules/navigation/css/components/safe-triangle.pcss.css

+[data-has-safe-triangle] {
+  --safe-triangle-cursor-y: 100px;
+  --safe-triangle-cursor-x: 100px;
+  --safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
+  --safe-triangle-submenu-start-y: 5vh;
+  --safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
+  /* TODO: Replace with calculated value of popover content height. */
+  --safe-triangle-submenu-end-y: 66vh;
+
+  &:hover {
+    [data-safe-triangle] {
+      display: block;
+    }
+  }
+}
+
+[data-safe-triangle] {
+  position: fixed;
+  display: none;
+  content: "";
+  inset: 0;
+  clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
+}

core/modules/navigation/css/components/toolbar-popover.css

@@ -5,14 +5,6 @@
  * @preserve
  */
 .toolbar-popover {
-  --safe-triangle-cursor-y: 6.25rem;
-  --safe-triangle-cursor-x: 6.25rem;
-  --safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
-  --safe-triangle-submenu-start-y: 5vh;
-  --safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
-  /* TODO: Replace with calculated value of popover content height. */
-  --safe-triangle-submenu-end-y: 66vh;
-
   border-radius: var(--admin-toolbar-space-8);
 }
 .toolbar-popover--expanded {
@@ -21,9 +13,6 @@
 .toolbar-popover__control {
   inline-size: 100%;
 }
-.toolbar-popover__control:hover [data-toolbar-popover-safe-triangle] {
-  display: block;
-}
 [data-toolbar-popover-wrapper] {
   position: fixed;
   z-index: var(--admin-toolbar-z-index-popover);
@@ -66,13 +55,6 @@
     inset-inline-start: 1px;
   }
 }
-[data-toolbar-popover-safe-triangle] {
-  position: fixed;
-  display: none;
-  content: "";
-  inset: 0;
-  clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
-}
 [data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
   transform: translateX(0);
   opacity: 1;

core/modules/navigation/css/components/toolbar-popover.pcss.css

 @import "../base/media-queries.pcss.css";
 
 .toolbar-popover {
-  --safe-triangle-cursor-y: 100px;
-  --safe-triangle-cursor-x: 100px;
-  --safe-triangle-submenu-start-x: var(--admin-toolbar-sidebar-width);
-  --safe-triangle-submenu-start-y: 5vh;
-  --safe-triangle-submenu-end-x: var(--admin-toolbar-sidebar-width);
-  /* TODO: Replace with calculated value of popover content height. */
-  --safe-triangle-submenu-end-y: 66vh;
-
   border-radius: var(--admin-toolbar-space-8);
 }
 
@@ -18,12 +10,6 @@
 
 .toolbar-popover__control {
   inline-size: 100%;
-
-  &:hover {
-    [data-toolbar-popover-safe-triangle] {
-      display: block;
-    }
-  }
 }
 
 [data-toolbar-popover-wrapper] {
@@ -69,14 +55,6 @@
   }
 }
 
-[data-toolbar-popover-safe-triangle] {
-  position: fixed;
-  display: none;
-  content: "";
-  inset: 0;
-  clip-path: polygon(var(--safe-triangle-cursor-x, 0) var(--safe-triangle-cursor-y, 0), var(--safe-triangle-submenu-start-x, 0) var(--safe-triangle-submenu-start-y, 0), var(--safe-triangle-submenu-end-x, 0) max(var(--safe-triangle-submenu-end-y, 0), var(--safe-triangle-cursor-y, 0), 66vh));
-}
-
 [data-toolbar-popover-control][aria-expanded="true"] + [data-toolbar-popover-wrapper] {
   transform: translateX(0);
   opacity: 1;

core/modules/navigation/js/admin-toolbar-wrapper.js

@@ -134,7 +134,9 @@
         const toggleTriggers = (toState) => {
           triggers.forEach((trigger) => {
             trigger.setAttribute('aria-expanded', toState);
-            const text = trigger.querySelector('[data-text]');
+            const text =
+              trigger.querySelector('[data-toolbar-text]') ||
+              trigger.querySelector('[data-toolbar-action]');
             if (text) {
               text.textContent = toState
                 ? Drupal.t('Collapse sidebar')

core/modules/navigation/js/safe-triangle.js

+/**
+ * @file
+ *
+ * Element that improves sub-menu UX by implementing the Safe Triangle strategy.
+ * @see https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles
+ */
+
+((Drupal, once) => {
+  /**
+   * Update CSS variables values for positioning the safe triangle element.
+   *
+   * @param {CSSStyleDeclaration} style
+   *   Style property of the parent button.
+   * @param {number} clientX
+   *   Horizontal position relative to the element.
+   * @param {number} clientY
+   *   Vertical position relative to the element.
+   */
+  function handleMouseMove({ currentTarget: { style }, clientX, clientY }) {
+    style.setProperty('--safe-triangle-cursor-x', `${clientX}px`);
+    style.setProperty('--safe-triangle-cursor-y', `${clientY}px`);
+  }
+
+  /**
+   * Attaches the safe triangle behavior to all required triggers.
+   *
+   * @type {Drupal~behavior}
+   *
+   * @prop {Drupal~behaviorAttach} attach
+   *   Attaches the safe triangle behavior.
+   * @prop {Drupal~behaviorDetach} detach
+   *   Removes the safe triangle element.
+   */
+  Drupal.behaviors.safeTriangleInit = {
+    attach: (context) => {
+      once('safe-triangle', '[data-has-safe-triangle]', context).forEach(
+        (button) => {
+          button.insertAdjacentHTML(
+            'beforeend',
+            '<div data-safe-triangle></div>',
+          );
+          button.addEventListener('mousemove', handleMouseMove);
+        },
+      );
+    },
+    detach: (context, settings, trigger) => {
+      if (trigger === 'unload') {
+        once
+          .remove('safe-triangle', '[data-has-safe-triangle]', context)
+          .forEach((button) => {
+            button.querySelector('[data-safe-triangle]')?.remove();
+            button.removeEventListener('mousemove', handleMouseMove);
+          });
+      }
+    },
+  };
+})(Drupal, once);

core/modules/navigation/js/toolbar-menu.js

@@ -43,7 +43,7 @@
            *
            * @type {HTMLElement}
            */
-          const text = button.querySelector('.toolbar-menu__link-action');
+          const text = button.querySelector('[data-toolbar-action]');
 
           /**
            * Toggles the button's aria-expanded attribute and updates its text.

core/modules/navigation/js/toolbar-popover.js

@@ -30,17 +30,6 @@ const POPOVER_NO_CLICK_DELAY = 500;
 
         if (!button || !tooltip) return;
 
-        const handleMouseMove = (event) => {
-          button.style.setProperty(
-            '--safe-triangle-cursor-x',
-            `${event.clientX}px`,
-          );
-          button.style.setProperty(
-            '--safe-triangle-cursor-y',
-            `${event.clientY}px`,
-          );
-        };
-
         const expandPopover = () => {
           popover.classList.add('toolbar-popover--expanded');
           button.dataset.drupalNoClick = 'true';
@@ -112,8 +101,6 @@ const POPOVER_NO_CLICK_DELAY = 500;
           });
         };
 
-        button.addEventListener('mousemove', handleMouseMove);
-
         button.addEventListener('mouseover', () => {
           // This is not needed because no hover on mobile.
           // @todo test is after.

core/modules/navigation/layouts/navigation.html.twig

@@ -20,11 +20,14 @@
 
 <div {{ control_bar_attributes.addClass('admin-toolbar-control-bar').setAttribute('data-drupal-admin-styles', '').setAttribute('data-offset-top', '') }}>
   <div class="admin-toolbar-control-bar__content">
-    {% include '@navigation/toolbar-button.html.twig' with {
+    {% include 'navigation:toolbar-button' with {
       attributes: create_attribute({'aria-expanded': 'false', 'aria-controls': 'admin-toolbar', 'type': 'button'}),
       icon: 'burger',
       text: 'Expand sidebar'|t,
-      extra_classes: 'admin-toolbar-control-bar__burger',
+      modifiers: ['small-offset'],
+      extra_classes: [
+        'admin-toolbar-control-bar__burger',
+      ],
     } only %}
   </div>
 </div>
@@ -53,18 +56,17 @@
             {% endif %}
           </a>
         {% endif %}
-        {% include '@navigation/toolbar-button.html.twig' with {
+        {% include 'navigation:toolbar-button' with {
           attributes: create_attribute({ 'data-toolbar-back-control': true, 'tabindex': '-1' }),
-          extra_classes: 'admin-toolbar__back-button',
+          extra_classes: ['admin-toolbar__back-button'],
           icon: 'back',
           text: 'Back'|t,
         } only %}
-        {% include '@navigation/toolbar-button.html.twig' with {
-           attributes: create_attribute({ 'aria-controls': 'admin-toolbar', 'tabindex': '-1', 'type': 'button' }),
-          extra_classes: 'admin-toolbar__close-button',
+        {% include 'navigation:toolbar-button' with {
+          action: 'Collapse sidebar'|t,
+          attributes: create_attribute({ 'aria-controls': 'admin-toolbar', 'tabindex': '-1', 'type': 'button' }),
+          extra_classes: ['admin-toolbar__close-button'],
           icon: 'cross',
-          label_classes: 'visually-hidden',
-          text: 'Collapse sidebar'|t,
         } only %}
       </div>
 
@@ -76,7 +78,7 @@
       <h3 id="{{ title_menu_footer }}" class="visually-hidden">{{ 'Administrative toolbar footer'|t }}</h3>
       {{ content.footer }}
       <button aria-controls="admin-toolbar" class="admin-toolbar__expand-button" type="button">
-        <span class="visually-hidden" data-text>{{ 'Collapse sidebar'|t }}</span>
+        <span class="visually-hidden" data-toolbar-text>{{ 'Collapse sidebar'|t }}</span>
       </button>
     </nav>
   </div>