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.

CommentFileSizeAuthor
#10 interdiff-9.10.txt2.51 KBmherchel
#10 3259929-10.patch14.16 KBmherchel
#9 diff_6-9.txt366 byteskostyashupenko
#9 3259929-9.patch14.12 KBkostyashupenko
#6 interdiff-4-6.txt1.08 KBmherchel
#6 3259929-6.patch14.1 KBmherchel
#5 Screen Shot 2022-05-31 at 8.58.58 AM.png130.65 KBandy-blum
#5 Screen Shot 2022-05-31 at 8.58.51 AM.png164.32 KBandy-blum
#4 3259929-4-reroll.patch14.09 KBmherchel
#3 3259929-3.patch13.82 KBmherchel
#2 3259929.patch14.53 KBmherchel

Comments

mherchel created an issue. See original summary.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Active » Needs review
StatusFileSize
new 3259929.patch14.53 KB
mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3259929-3.patch13.82 KB

Fixing some ordering and nesting.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3259929-4-reroll.patch14.09 KB

Re-roll of #3

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs review » Needs work
StatusFileSize
new Screen Shot 2022-05-31 at 8.58.51 AM.png164.32 KB
new Screen Shot 2022-05-31 at 8.58.58 AM.png130.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

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review
StatusFileSize
new 3259929-6.patch14.1 KB
new interdiff-4-6.txt1.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

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs review » Reviewed & tested by the community

lgtm

quietone’s picture

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

Patch no longer applies.

kostyashupenko’s picture

kostyashupenko
Primary language English
Location Omsk
commented
Status: Needs work » Needs review
Issue tags: -Needs reroll
StatusFileSize
new 3259929-9.patch14.12 KB
new diff_6-9.txt366 bytes

Here it is :)

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
StatusFileSize
new 3259929-10.patch14.16 KB
new interdiff-9.10.txt2.51 KB

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

Uploading new patch.

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs review » Reviewed & tested by the community

Changes from interdiff 9-10 look good. RTBC

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented

Opened followup #3302052: Olivero footer can obscure bottom of dropbutton dropdown

  • 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

lauriii
he/him
Primary language Finnish
Location Finland
commented
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.