Split Navigation Button Component.

Created on 11 October 2023, about 1 year ago
Updated 30 October 2023, about 1 year ago

We currently treat the first level button and subsequent buttons as one component. To do this, we added many cascades to the ะกSS and seriously complicated the script logic.

Toolbar Button and Toolbar Menu Link:

1. Different in terms of BEM. Button can exist without menu.
2. Different in terms of CSS. Spacings, fonts, focus etc. All different.
3. They have different JS functional. One common thing only which takes 5 lines of code. So can be duplicated.

In fact, the first level button is an independent element. And not related to the menu in any way. This will greatly simplify the styles (remove cascades). And of course simplify the scripts.

More details https://www.drupal.org/project/navigation/issues/3386927#comment-15280734 ๐Ÿ“Œ Refactor CSS Needs work

Also in this MR I added several necessary improvements.

1. Used currentColor for icons. This made it possible to set the color of states from one place

2. Reduced global focus specificity from
:where(.admin-toolbar) *:focus {

3. toolbar-link--sidebar-toggle --> admin-toolbar__toggle styles for control visibility. This is more correct from a BEM point of view.

4. used aria-expanded and aria-controls to display the visibility and state of button icons.

5. Removed ::before from definition of --icon variable. Less code - less problems :)

At the moment everything looks as it was. But the readability, maintainability and flexibility of the code has undoubtedly increased.

Please review!

โœจ Feature request
Status

Fixed

Version

1.0

Component

Code

Created by

๐Ÿ‡ท๐Ÿ‡ธSerbia finnsky

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024