Problem/Motivation

The menu.pcss.css file has several elements named without following a BEM structure and without a clear strategy behind.

Proposed resolution

I've come up with this class naming strategy, similar to the one proposed by @finnsky in the parent issue, to divide the big menu.pcss.css into separated files so it's easier later on divide it into components.

CommentFileSizeAuthor
#3 toolbar-menu-2.png42.63 KBckrina
toolbar-menu.png87.88 KBckrina

Issue fork navigation-3391533

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

ckrina created an issue. See original summary.

finnsky’s picture

finnsky commented

Some notes:

- .toolbar-menu__wrapper cannot be outside of .toolbar-menu. same as .toolbar-menu__heading in terms of valid BEM tree

- From design https://www.figma.com/file/fn52micITi1fCNtU0fWcPC/Prototype?type=design&... i see that should be yet another entity between. I suggested approach it was https://storied-pixie-3d54e7.netlify.app/?path=/story/toolbar-block--basic which has title and any content inside.

ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Issue summary: View changes
StatusFileSize
new toolbar-menu-2.png42.63 KB

Updating new menu classes after a discussion with @finnsky.

finnsky opened merge request !77

ckrina opened merge request !80

  • ckrina committed df0667fa on 1.x 
    Issue #3391533: Refactor menu.pcss.css file into components
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Active » Fixed

Thanks @finnsky for the suggestions! Let's move to follow-up things I might have missed because this is big enough already.

  • I've divided menu.pcss.css and icons.pcss.css into toolbar-block.pcss.css, toolbar-menu.pcss and toolbar-link.pcss.css.
  • I've added documentation to the CSS to make it easier to understand.
  • I've refactored classes to be BEM compliant for each component and converted a few of them into utilities,
  • I've cleanup unused code.
  • I've fixed a few small spacing that was clearly wrong, but left pixel-perfect styling for when we have the final designs.
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Assigned: ckrina » Unassigned

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.