diff options
Diffstat (limited to 'core/modules/navigation')
25 files changed, 179 insertions, 64 deletions
diff --git a/core/modules/navigation/components/badge/badge.component.yml b/core/modules/navigation/components/badge/badge.component.yml index a7bb04f963eb..a7940d1efa54 100644 --- a/core/modules/navigation/components/badge/badge.component.yml +++ b/core/modules/navigation/components/badge/badge.component.yml @@ -21,6 +21,9 @@ props: enum: - info - success + meta:enum: + info: Information + success: Success slots: label: type: string diff --git a/core/modules/navigation/components/title/title.component.yml b/core/modules/navigation/components/title/title.component.yml index 696960d455f5..1001c42c109f 100644 --- a/core/modules/navigation/components/title/title.component.yml +++ b/core/modules/navigation/components/title/title.component.yml @@ -23,6 +23,9 @@ props: enum: - ellipsis - xs + meta:enum: + ellipsis: Ellipsis + xs: 'Extra-small' extra_classes: type: array title: Extra classes. @@ -43,6 +46,15 @@ props: - h5 - h6 - span + meta:enum: + h1: Heading 1 + h2: Heading 2 + h3: Heading 3 + h4: Heading 4 + h5: Heading 5 + h6: Heading 6 + span: Inline + x-translation-context: HTML tag # Provide a default value default: h2 icon: diff --git a/core/modules/navigation/components/toolbar-button/toolbar-button.component.yml b/core/modules/navigation/components/toolbar-button/toolbar-button.component.yml index 87e29a14bf44..130cca22e1cb 100644 --- a/core/modules/navigation/components/toolbar-button/toolbar-button.component.yml +++ b/core/modules/navigation/components/toolbar-button/toolbar-button.component.yml @@ -37,6 +37,17 @@ props: - primary - small-offset - weight--400 + meta:enum: + collapsible: Collapsible + dark: Dark + expand--down: Expands down + expand--side: Expands to the side + large: Large + non-interactive: Non-Interactive + primary: Primary + small-offset: Small offset + weight--400: Weight 400 + x-translation-context: Toolbar button modifiers extra_classes: type: array title: Extra classes. @@ -53,6 +64,11 @@ props: - a - button - span + meta:enum: + a: Link + button: Button + span: Inline + x-translation-context: HTML tag # Provide a default value default: button icon: diff --git a/core/modules/navigation/components/toolbar-button/toolbar-button.css b/core/modules/navigation/components/toolbar-button/toolbar-button.css index 3af3cbfdd39d..85bfb00883cf 100644 --- a/core/modules/navigation/components/toolbar-button/toolbar-button.css +++ b/core/modules/navigation/components/toolbar-button/toolbar-button.css @@ -36,7 +36,7 @@ text-align: start; -webkit-text-decoration: none; text-decoration: none; - word-break: break-word; + overflow-wrap: break-word; color: var(--toolbar-button-color); border: 0; border-radius: var(--admin-toolbar-space-8); diff --git a/core/modules/navigation/components/toolbar-button/toolbar-button.pcss.css b/core/modules/navigation/components/toolbar-button/toolbar-button.pcss.css index 9b40b8fcb460..0e1d5f3bdd57 100644 --- a/core/modules/navigation/components/toolbar-button/toolbar-button.pcss.css +++ b/core/modules/navigation/components/toolbar-button/toolbar-button.pcss.css @@ -33,7 +33,7 @@ cursor: pointer; text-align: start; text-decoration: none; - word-break: break-word; + overflow-wrap: break-word; color: var(--toolbar-button-color); border: 0; border-radius: var(--admin-toolbar-space-8); diff --git a/core/modules/navigation/css/base/variables.css b/core/modules/navigation/css/base/variables.css index 91063f3f09d9..c56c7322b6f4 100644 --- a/core/modules/navigation/css/base/variables.css +++ b/core/modules/navigation/css/base/variables.css @@ -74,14 +74,14 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main /* White. */ --admin-toolbar-color-white: var(--drupal-admin-color-white, #fff); /* Expanded background color. */ - --admin-toolbar-color-expanded: rgba(231, 234, 243, 0.5); /* --admin-toolbar-color-gray-050 */ + --admin-toolbar-color-expanded: rgb(231, 234, 243, 0.5); /* --admin-toolbar-color-gray-050 */ /* Fonts. */ --admin-toolbar-font-family: inter, sans-serif; /* Shadows. */ - --admin-toolbar-color-shadow-0: rgba(0, 0, 0, 0); - --admin-toolbar-color-shadow-6: rgba(0, 0, 0, 0.06); - --admin-toolbar-color-shadow-8: rgba(0, 0, 0, 0.08); - --admin-toolbar-color-shadow-15: rgba(0, 0, 0, 0.15); + --admin-toolbar-color-shadow-0: rgb(0, 0, 0, 0); + --admin-toolbar-color-shadow-6: rgb(0, 0, 0, 0.06); + --admin-toolbar-color-shadow-8: rgb(0, 0, 0, 0.08); + --admin-toolbar-color-shadow-15: rgb(0, 0, 0, 0.15); /** * Spaces. diff --git a/core/modules/navigation/css/base/variables.pcss.css b/core/modules/navigation/css/base/variables.pcss.css index ae9655a7ad0e..844e0ba048a7 100644 --- a/core/modules/navigation/css/base/variables.pcss.css +++ b/core/modules/navigation/css/base/variables.pcss.css @@ -71,14 +71,14 @@ We need it root to calculate the size of the displace in .dialog-off-canvas-main /* White. */ --admin-toolbar-color-white: var(--drupal-admin-color-white, #fff); /* Expanded background color. */ - --admin-toolbar-color-expanded: rgba(231, 234, 243, 0.5); /* --admin-toolbar-color-gray-050 */ + --admin-toolbar-color-expanded: rgb(231, 234, 243, 0.5); /* --admin-toolbar-color-gray-050 */ /* Fonts. */ --admin-toolbar-font-family: inter, sans-serif; /* Shadows. */ - --admin-toolbar-color-shadow-0: rgba(0, 0, 0, 0); - --admin-toolbar-color-shadow-6: rgba(0, 0, 0, 0.06); - --admin-toolbar-color-shadow-8: rgba(0, 0, 0, 0.08); - --admin-toolbar-color-shadow-15: rgba(0, 0, 0, 0.15); + --admin-toolbar-color-shadow-0: rgb(0, 0, 0, 0); + --admin-toolbar-color-shadow-6: rgb(0, 0, 0, 0.06); + --admin-toolbar-color-shadow-8: rgb(0, 0, 0, 0.08); + --admin-toolbar-color-shadow-15: rgb(0, 0, 0, 0.15); /** * Spaces. diff --git a/core/modules/navigation/css/components/admin-toolbar.css b/core/modules/navigation/css/components/admin-toolbar.css index 25fd9ca1cc02..8e8636d8a855 100644 --- a/core/modules/navigation/css/components/admin-toolbar.css +++ b/core/modules/navigation/css/components/admin-toolbar.css @@ -94,7 +94,7 @@ body { .admin-toolbar { block-size: calc(100vh - var(--drupal-displace-offset-top, 0px)); transform: none; - inset-block-start: var(--drupal-displace-offset-top, 0); + inset-block-start: 0; } } @media only screen and (max-height: 18.75rem) { @@ -333,7 +333,7 @@ body { display: none; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.14); + background-color: rgb(0, 0, 0, 0.14); } :where([data-admin-toolbar="expanded"]) .admin-toolbar-overlay { display: block; diff --git a/core/modules/navigation/css/components/admin-toolbar.pcss.css b/core/modules/navigation/css/components/admin-toolbar.pcss.css index 0b13b08252e1..55ffd803e693 100644 --- a/core/modules/navigation/css/components/admin-toolbar.pcss.css +++ b/core/modules/navigation/css/components/admin-toolbar.pcss.css @@ -95,7 +95,7 @@ body { @media (--admin-toolbar-desktop) { block-size: calc(100vh - var(--drupal-displace-offset-top, 0px)); transform: none; - inset-block-start: var(--drupal-displace-offset-top, 0); + inset-block-start: 0; } @media only screen and (max-height: 300px) { @@ -354,7 +354,7 @@ body { display: none; width: 100vw; height: 100vh; - background-color: rgba(0, 0, 0, 0.14); + background-color: rgb(0, 0, 0, 0.14); :where([data-admin-toolbar="expanded"]) & { display: block; diff --git a/core/modules/navigation/css/components/toolbar-dropdown.css b/core/modules/navigation/css/components/toolbar-dropdown.css index f21bf044137a..eca3b63b27e4 100644 --- a/core/modules/navigation/css/components/toolbar-dropdown.css +++ b/core/modules/navigation/css/components/toolbar-dropdown.css @@ -50,7 +50,7 @@ padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16); border-radius: var(--admin-toolbar-space-12); background: white; - box-shadow: 0 14px 30px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 14px 30px 0 rgb(0, 0, 0, 0.1); } [data-drupal-dropdown][aria-expanded="true"] + .toolbar-dropdown__menu { display: block; diff --git a/core/modules/navigation/css/components/toolbar-dropdown.pcss.css b/core/modules/navigation/css/components/toolbar-dropdown.pcss.css index 6c462a08ba86..91cd88d0a5fc 100644 --- a/core/modules/navigation/css/components/toolbar-dropdown.pcss.css +++ b/core/modules/navigation/css/components/toolbar-dropdown.pcss.css @@ -49,7 +49,7 @@ padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16); border-radius: var(--admin-toolbar-space-12); background: white; - box-shadow: 0 14px 30px 0 rgba(0, 0, 0, 0.1); + box-shadow: 0 14px 30px 0 rgb(0, 0, 0, 0.1); } [data-drupal-dropdown][aria-expanded="true"] + .toolbar-dropdown__menu { diff --git a/core/modules/navigation/css/components/toolbar-menu.css b/core/modules/navigation/css/components/toolbar-menu.css index 33e2af3bcb9a..9b411c7cba75 100644 --- a/core/modules/navigation/css/components/toolbar-menu.css +++ b/core/modules/navigation/css/components/toolbar-menu.css @@ -51,7 +51,7 @@ -webkit-text-decoration: none; text-decoration: none; letter-spacing: var(--admin-toolbar-letter-spacing-0-06); - word-break: break-word; + overflow-wrap: break-word; color: var(--admin-toolbar-color-gray-800); border: none; background-color: transparent; @@ -133,5 +133,5 @@ rotate: -90deg; } [dir="rtl"] :is([aria-expanded="true"] .toolbar-menu__chevron) { - rotate: 0; + rotate: none; } diff --git a/core/modules/navigation/css/components/toolbar-menu.pcss.css b/core/modules/navigation/css/components/toolbar-menu.pcss.css index 7f2c98950cc1..60fc599d7122 100644 --- a/core/modules/navigation/css/components/toolbar-menu.pcss.css +++ b/core/modules/navigation/css/components/toolbar-menu.pcss.css @@ -55,7 +55,7 @@ text-align: start; text-decoration: none; letter-spacing: var(--admin-toolbar-letter-spacing-0-06); - word-break: break-word; + overflow-wrap: break-word; color: var(--admin-toolbar-color-gray-800); border: none; background-color: transparent; @@ -150,7 +150,7 @@ rotate: -90deg; [dir="rtl"] & { - rotate: 0; + rotate: none; } } } diff --git a/core/modules/navigation/css/components/toolbar-message.css b/core/modules/navigation/css/components/toolbar-message.css index 11b50e9459be..8a852a0fc703 100644 --- a/core/modules/navigation/css/components/toolbar-message.css +++ b/core/modules/navigation/css/components/toolbar-message.css @@ -15,7 +15,7 @@ text-align: start; -webkit-text-decoration: none; text-decoration: none; - word-break: break-word; + overflow-wrap: break-word; color: var(--admin-toolbar-color-gray-800); border: 0; border-radius: var(--admin-toolbar-space-8); diff --git a/core/modules/navigation/css/components/toolbar-message.pcss.css b/core/modules/navigation/css/components/toolbar-message.pcss.css index 9689014aab43..9e0f401fb4a5 100644 --- a/core/modules/navigation/css/components/toolbar-message.pcss.css +++ b/core/modules/navigation/css/components/toolbar-message.pcss.css @@ -7,7 +7,7 @@ cursor: pointer; text-align: start; text-decoration: none; - word-break: break-word; + overflow-wrap: break-word; color: var(--admin-toolbar-color-gray-800); border: 0; border-radius: var(--admin-toolbar-space-8); diff --git a/core/modules/navigation/css/components/toolbar-popover.css b/core/modules/navigation/css/components/toolbar-popover.css index 76f587a325e6..532e873d96e6 100644 --- a/core/modules/navigation/css/components/toolbar-popover.css +++ b/core/modules/navigation/css/components/toolbar-popover.css @@ -48,9 +48,9 @@ padding-block-start: var(--admin-toolbar-space-16); transform: translateX(0); box-shadow: - 0 0 72px rgba(0, 0, 0, 0.2), - 0 0 8px rgba(0, 0, 0, 0.04), - 0 0 40px rgba(0, 0, 0, 0.06); + 0 0 72px rgb(0, 0, 0, 0.2), + 0 0 8px rgb(0, 0, 0, 0.04), + 0 0 40px rgb(0, 0, 0, 0.06); inline-size: var(--admin-toolbar-popover-width); inset-block-start: var(--drupal-displace-offset-top, 0); inset-inline-start: 1px; diff --git a/core/modules/navigation/css/components/toolbar-popover.pcss.css b/core/modules/navigation/css/components/toolbar-popover.pcss.css index 6a8b2a019c24..a12ebe955edb 100644 --- a/core/modules/navigation/css/components/toolbar-popover.pcss.css +++ b/core/modules/navigation/css/components/toolbar-popover.pcss.css @@ -47,9 +47,9 @@ padding-block-start: var(--admin-toolbar-space-16); transform: translateX(0); box-shadow: - 0 0 72px rgba(0, 0, 0, 0.2), - 0 0 8px rgba(0, 0, 0, 0.04), - 0 0 40px rgba(0, 0, 0, 0.06); + 0 0 72px rgb(0, 0, 0, 0.2), + 0 0 8px rgb(0, 0, 0, 0.04), + 0 0 40px rgb(0, 0, 0, 0.06); inline-size: var(--admin-toolbar-popover-width); inset-block-start: var(--drupal-displace-offset-top, 0); inset-inline-start: 1px; diff --git a/core/modules/navigation/css/components/top-bar.css b/core/modules/navigation/css/components/top-bar.css index 65a489cd78b7..134b0a506c75 100644 --- a/core/modules/navigation/css/components/top-bar.css +++ b/core/modules/navigation/css/components/top-bar.css @@ -22,7 +22,7 @@ .top-bar { block-size: var(--admin-toolbar-top-bar-height); position: fixed; - inset-block-start: var(--drupal-displace-offset-top, 0); + inset-block-start: 0; inset-inline-start: 0; width: 100vw; padding-block: var(--admin-toolbar-space-12); diff --git a/core/modules/navigation/css/components/top-bar.pcss.css b/core/modules/navigation/css/components/top-bar.pcss.css index b55604dfa569..0a34a4b17dae 100644 --- a/core/modules/navigation/css/components/top-bar.pcss.css +++ b/core/modules/navigation/css/components/top-bar.pcss.css @@ -18,7 +18,7 @@ @media (--admin-toolbar-desktop) { block-size: var(--admin-toolbar-top-bar-height); position: fixed; - inset-block-start: var(--drupal-displace-offset-top, 0); + inset-block-start: 0; inset-inline-start: 0; width: 100vw; padding-block: var(--admin-toolbar-space-12); diff --git a/core/modules/navigation/js/admin-toolbar-wrapper.js b/core/modules/navigation/js/admin-toolbar-wrapper.js index c9e2ecb9cae9..6c32da0b6f6c 100644 --- a/core/modules/navigation/js/admin-toolbar-wrapper.js +++ b/core/modules/navigation/js/admin-toolbar-wrapper.js @@ -81,31 +81,35 @@ Drupal.displace(true); }); - - /** - * Initialize Drupal.displace() - * - * We add the displace attribute to a separate full width element because we - * don't want this element to have transitions. Note that this element and the - * navbar share the same exact width. - */ - const initDisplace = () => { - const displaceElement = doc - .querySelector('.admin-toolbar') - ?.querySelector('.admin-toolbar__displace-placeholder'); - const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left'; - displaceElement?.setAttribute(`data-offset-${edge}`, ''); - Drupal.displace(true); - }; - - initDisplace(); } + /** + * Initialize Drupal.displace() + * + * We add the displace attribute to a separate full width element because we + * don't want this element to have transitions. Note that this element and the + * navbar share the same exact width. + * + * @param {HTMLElement} el - The admin toolbar wrapper. + */ + const initDisplace = (el) => { + const displaceElement = el.querySelector( + '.admin-toolbar__displace-placeholder', + ); + const edge = document.documentElement.dir === 'rtl' ? 'right' : 'left'; + displaceElement?.setAttribute(`data-offset-${edge}`, ''); + Drupal.displace(true); + }; + // Any triggers on page. Inside or outside sidebar. // For now button in sidebar + mobile header and background. Drupal.behaviors.navigationProcessToolbarTriggers = { attach: (context) => { + once('navigation-displace', '.admin-toolbar', context).forEach( + initDisplace, + ); + const triggers = once( 'admin-toolbar-trigger', '[aria-controls="admin-toolbar"]', diff --git a/core/modules/navigation/src/Hook/NavigationHooks.php b/core/modules/navigation/src/Hook/NavigationHooks.php index ed4eb8283668..540a2659af53 100644 --- a/core/modules/navigation/src/Hook/NavigationHooks.php +++ b/core/modules/navigation/src/Hook/NavigationHooks.php @@ -62,7 +62,7 @@ class NavigationHooks { $output = ''; $output .= '<h3>' . $this->t('About') . '</h3>'; $output .= '<p>' . $this->t('The Navigation module provides a left-aligned, collapsible, vertical sidebar navigation.') . '</p>'; - $output .= '<p>' . $this->t('For more information, see the <a href=":docs">online documentation for the Navigation module</a>.', [':docs' => 'https://www.drupal.org/project/navigation']) . '</p>'; + $output .= '<p>' . $this->t('For more information, see the <a href=":docs">online documentation for the Navigation module</a>.', [':docs' => 'https://www.drupal.org/docs/develop/core-modules-and-themes/core-modules/navigation-module']) . '</p>'; return $output; } $configuration_route = 'layout_builder.navigation.'; diff --git a/core/modules/navigation/src/WorkspacesLazyBuilder.php b/core/modules/navigation/src/WorkspacesLazyBuilder.php index 3134fa4745ed..146f7d83dc9b 100644 --- a/core/modules/navigation/src/WorkspacesLazyBuilder.php +++ b/core/modules/navigation/src/WorkspacesLazyBuilder.php @@ -59,6 +59,9 @@ final class WorkspacesLazyBuilder { 'title' => $active_workspace ? $active_workspace->label() : $this->t('Live'), 'url' => $url, 'class' => 'workspaces', + 'icon' => [ + 'icon_id' => 'workspaces', + ], ], ], '#attached' => [ diff --git a/core/modules/navigation/templates/top-bar.html.twig b/core/modules/navigation/templates/top-bar.html.twig index 6efdeed523f9..319f97f67478 100644 --- a/core/modules/navigation/templates/top-bar.html.twig +++ b/core/modules/navigation/templates/top-bar.html.twig @@ -13,17 +13,19 @@ */ #} {% set attributes = create_attribute() %} -<aside {{ attributes.addClass('top-bar').setAttribute('data-drupal-admin-styles', '').setAttribute('aria-labelledby', 'top-bar__title') }}> - <h3 id="top-bar__title" class="visually-hidden">{{ 'Administrative top bar'|t }}</h3> - <div class="top-bar__content"> - <div class="top-bar__tools"> - {{- tools -}} +{% if tools or context|render or actions|render %} + <aside {{ attributes.addClass('top-bar').setAttribute('data-drupal-admin-styles', '').setAttribute('aria-labelledby', 'top-bar__title').setAttribute('data-offset-top', true) }}> + <h3 id="top-bar__title" class="visually-hidden">{{ 'Administrative top bar'|t }}</h3> + <div class="top-bar__content"> + <div class="top-bar__tools"> + {{- tools -}} + </div> + <div class="top-bar__context"> + {{- context -}} + </div> + <div class="top-bar__actions"> + {{- actions -}} + </div> </div> - <div class="top-bar__context"> - {{- context -}} - </div> - <div class="top-bar__actions"> - {{- actions -}} - </div> - </div> -</aside> + </aside> +{% endif %} diff --git a/core/modules/navigation/tests/src/Functional/NavigationWorkspacesUiTest.php b/core/modules/navigation/tests/src/Functional/NavigationWorkspacesUiTest.php new file mode 100644 index 000000000000..48de404b65ae --- /dev/null +++ b/core/modules/navigation/tests/src/Functional/NavigationWorkspacesUiTest.php @@ -0,0 +1,49 @@ +<?php + +declare(strict_types=1); + +namespace Drupal\Tests\navigation\Functional; + +use Drupal\Tests\BrowserTestBase; + +/** + * Tests for \Drupal\navigation\WorkspacesLazyBuilder. + * + * @group navigation + */ +class NavigationWorkspacesUiTest extends BrowserTestBase { + + /** + * {@inheritdoc} + */ + protected static $modules = ['navigation', 'workspaces_ui']; + + /** + * {@inheritdoc} + */ + protected $defaultTheme = 'stark'; + + /** + * {@inheritdoc} + */ + protected function setUp(): void { + parent::setUp(); + + $admin_user = $this->drupalCreateUser([ + 'access navigation', + 'administer workspaces', + ]); + $this->drupalLogin($admin_user); + } + + /** + * Tests the Workspaces button in the navigation bar. + */ + public function testWorkspacesNavigationButton(): void { + $this->drupalGet('<front>'); + $this->assertSession()->statusCodeEquals(200); + $this->assertSession()->elementAttributeContains('css', 'a.toolbar-button--icon--workspaces svg', 'width', '20'); + $this->assertSession()->elementAttributeContains('css', 'a.toolbar-button--icon--workspaces svg', 'class', 'toolbar-button__icon'); + } + +} diff --git a/core/modules/navigation/tests/src/Nightwatch/Tests/navigationDisplaceTest.js b/core/modules/navigation/tests/src/Nightwatch/Tests/navigationDisplaceTest.js new file mode 100644 index 000000000000..ce9acfacc514 --- /dev/null +++ b/core/modules/navigation/tests/src/Nightwatch/Tests/navigationDisplaceTest.js @@ -0,0 +1,26 @@ +/** + * Verify that Drupal.displace() attribute is properly added by JavaScript. + */ +module.exports = { + '@tags': ['core', 'navigation'], + browser(browser) { + browser + .drupalInstall() + .drupalInstallModule('navigation', true) + .drupalInstallModule('big_pipe') + .setWindowSize(1220, 800); + }, + after(browser) { + browser.drupalUninstall(); + }, + + 'Verify displace attribute': (browser) => { + browser.drupalLoginAsAdmin(() => { + browser + .drupalRelativeURL('/admin/') + .waitForElementPresent( + '.admin-toolbar__displace-placeholder[data-offset-left]', + ); + }); + }, +}; |