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 will serve as a moderately complex first try in doing so. The overall appearance and functionality of the tabs will not change, however, the code will be understandable, extendable, future-proof, and resilient.

CommentFileSizeAuthor
#7 Screen Shot 2022-01-17 at 8.37.06 AM.png40.11 KBandy-blum
#7 Screen Shot 2022-01-17 at 8.36.56 AM.png28.5 KBandy-blum
#7 Screen Shot 2022-01-17 at 8.36.37 AM.png40.32 KBandy-blum
#6 3257583-6.patch18.99 KBmherchel
#2 3257583.patch18.89 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 3257583.patch18.89 KB

Patch attached.

This new patch makes use of new @nest nesting rules, :is() pseudo-selector, but most importantly abstracts out various design decisions to CSS custom properties, which are attached to the parent <ul class="tabs"> element.

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs review » Needs work

Test is failing (no clue why)

[0;31m✖[0m Timed out while waiting for element <.tabs__tab:not(.is-active)> to be visible for 5000 milliseconds. - expected [0;32m"visible"[0m but got: [0;31m"not visible"[0m [0;90m(5117ms)[0m
[0;90m    at Object.Verify mobile tab display and click functionality (/var/www/html/core/tests/Drupal/Nightwatch/Tests/Olivero/oliveroPrimaryTabsTest.js:44:8)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:97:5)[0m 


[0;31mFAILED:[0m [0;31m1[0m assertions failed and  [0;32m5[0m passed (5.567s)
mherchel’s picture

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

Pretty sure this is failing because core is using version 87 of Chromedriver, which does not support the :is() pseudo-selector. See https://caniuse.com/css-matches-pseudo

mherchel’s picture

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

Opened up followup #3258114: Upgrade Chromedriver

mherchel’s picture

mherchel
he/him
Primary language English
Location Gainesville, FL, US
commented
Status: Needs work » Needs review
StatusFileSize
new 3257583-6.patch18.99 KB

Attached is a version of the patch that does not use :is().

andy-blum’s picture

andy-blum
he/him/his
Primary language English
Location Ohio, USA
commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Screen Shot 2022-01-17 at 8.36.37 AM.png40.32 KB
new Screen Shot 2022-01-17 at 8.36.56 AM.png28.5 KB
new Screen Shot 2022-01-17 at 8.37.06 AM.png40.11 KB

Patch applies nicely and the tabs appear unchanged.

  • ckrina committed 173b407 on 10.0.x 
    Issue #3257583 by mherchel, andy-blum: Olivero: Refactor tabs CSS to...
ckrina’s picture

ckrina
she/her
Primary language Catalan
Location Barcelona
commented
Status: Reviewed & tested by the community » Fixed

Committed 173b407 and pushed to 10.0.x. Thanks!

Status: Fixed » Closed (fixed)

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