Similar to #3257583: Olivero: Refactor tabs CSS to make use of modern CSS.

Because Drupal 10 does not support IE11, we can make better use of CSS variables and holistically refactor components to make them more understandable, extendable, and resilient.

This issue brings better componentization, extendability, and organization to Olivero's dropbutton component.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

mherchel created an issue. See original summary.

mherchel’s picture

Status: Active » Needs review
FileSize
14.53 KB
mherchel’s picture

FileSize
13.82 KB

Fixing some ordering and nesting.

mherchel’s picture

FileSize
14.09 KB

Re-roll of #3

andy-blum’s picture

Status: Needs review » Needs work
FileSize
164.32 KB
130.65 KB
.dropbutton-widget {
  width: max-content;
}

This causes a dropbutton with (unrealistically) long text to overflow the page causing horizontal scroll. We probably would prefer having the display of the button break over multiple lines but all be visible.


.dropbutton-toggle button {
  &:before {
    @nest dropbutton-wrapper.open & {
      transform: translateY(25%) rotate(225deg);
    }
  }
}

we need the . on the nested dropbutton-wrapper class

mherchel’s picture

Status: Needs work » Needs review
FileSize
14.1 KB
1.08 KB

This causes a dropbutton with (unrealistically) long text to overflow the page causing horizontal scroll.

This is out of scope for this issue, as it's pre-existing. We could easily set a max-width, but this causes even more issues with dropbuttons overlapping other dropbuttons. This leads down a whole difficult road (I went down this with Claro a bit). The proper solution is the split-button component.

I fixed the selector issue (great catch!).

Updated patch and interdiff attached.

andy-blum’s picture

Status: Needs review » Reviewed & tested by the community

lgtm

quietone’s picture

Status: Reviewed & tested by the community » Needs work
Issue tags: +Needs reroll

Patch no longer applies.

kostyashupenko’s picture

Status: Needs work » Needs review
Issue tags: -Needs reroll
FileSize
14.12 KB
366 bytes

Here it is :)

mherchel’s picture

@kostyashupenko I don't see the changes in that patch.

Uploading new patch.

andy-blum’s picture

Status: Needs review » Reviewed & tested by the community

Changes from interdiff 9-10 look good. RTBC

mherchel’s picture

  • lauriii committed 4b9c19c on 10.1.x
    Issue #3259929 by mherchel, andy-blum: Olivero: Refactor dropbutton CSS...

  • lauriii committed aae3a43 on 10.0.x
    Issue #3259929 by mherchel, andy-blum: Olivero: Refactor dropbutton CSS...
lauriii’s picture

Status: Reviewed & tested by the community » Fixed

Committed 4b9c19c and pushed to 10.1.x and cherry-picked to 10.0.x. Thanks!

Status: Fixed » Closed (fixed)

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