Tabs: unify vertical tabs styles #65387
Conversation
|
Size Change: +4 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
|
@WordPress/gutenberg-design for now I've only removed style overrides. Here's the inserter > patterns Before (with overrides):
After (without overrides):
The main differences I spot in the previous style overrides vs default
For reference, here's the preferences dialog tabs, which already don't have any style overrides:
These are the only two instances of Tabs at the moment in Gutenberg. Ideally, we'd find styles that work in both cases. If necessary, we can consider introducing some sort of variant, but let's try to keep that at a minimum and find something that we feel good about regarding future usage of the component, to prevent more style overrides in the future. Please leave some feedback, happy to implement any ideas so we can test them! |
DaniGuardiola
added
[Type] Enhancement
|
+100 to removing the overrides. That said, I think the appearance in the Editor is the direction we want to go in. So would it make sense to update the component first, then remove the overrides after? That way there should be minimal visual disruption. One detail we need to consider is that the color change (gray or blue) is of inadequate contrast to meet requirements, so we need another way to communicate which tab is active. We could address this while updating the component. A good place to start could be making the active tab font weight slightly heavier. What do you think? |
Well, the thing is we only have two instances of vertical tabs, so what you're proposing doesn't make much sense purely in terms of the sequence of steps hehe. If, instead of removing overrides, I update the base component, then the preferences tabs will be affected, so either way there'd be visual disruption. Here's how I think this PR should evolve:
I hope that makes sense to you? Regarding your suggestion that the styles of the inserter tabs are closer to what we want, that makes sense to me. I'll tweak the base component, so both instances will look closer to it. In parallel, I will also apply your suggestion about the active tab styles. Then, we can take it from there. Sound good? :) |
|
@DaniGuardiola In my experience we don't tend to update multiple things in a single PR like you're suggesting, hence my idea to update the component first. That said, it does make sense to me in this context, providing other folks in the @WordPress/gutenberg-components team agree. |
…mprove/unify-vertical-tabs-styles
Currently, the weight for tabs is 500. In the inserter, it was overridden to 400. What if we:
This is how that looks like in inserter and preferences: font-weight.mp4I also tried making the active tab have the theme accent color (blue in this case) like the inserter style overrides did. For reference, this is the same color that tabs have when hovered. Here's how it looks like: active-color.mp4I quite like this with the light gray indicator. However, it might still not be enough for colorblind or low-vision people. Here, I tried making the active tab have a weight of 600 (on top of all previous changes): Kapture.2024-09-19.at.05.55.38.mp4And here's with 700: Kapture.2024-09-19.at.05.57.31.mp4I personally feel much more comfortable shipping this with the increased font weights. Thoughts? |
|
By the way, the font weight and text color changes also affect horizontal tabs, as you can see in the videos. That said, we could always special-case it to vertical tabs if we don't want that to happen. Maybe worth doing it in both for consistency though, it communicates more clearly that both (vertical and horizontal) are the same component rather than different ones. |
|
I reckon we should only apply the weight change to vertical tabs, if possible. Horizontal tabs are fine by virtue of the 'active' shape having enough contrast. In #64340 (comment) we're leaning towards Here's a visual for the different states, hopefully this communicates things better than words :D 
|
You can see this in my previous comment, it's the first example. Qs:
For now, I'm gonna assume that the answer is yes to points 1 and 2 and push those changes in this PR. FYI, there's a problem that #64371 fixes that makes the indicator not show up in the inserter, in case you wanted to try it locally. I'm performing a quick hack to get these screenshots and videos for now, but you won't be able to test it locally for now. Hopefully we'll be able to merge that soon though. Let me know if you want me to record or capture something in the meantime. |
|
I applied all changes, including the 400/500 weight change, and here's how that looks like currently. 500 (semibold) still seems too low for me, especially with the light blue indicator which looks even dimmer than the previous gray one to me. Kapture.2024-09-20.at.02.23.19.mp4 |
|
You may be right about the weight, but the more we increase it the more legibility in certain languages decreases. I think we should proceed with We can gather feedback and open a dedicated issue for this detail. There are other options to explore like adding a shape to the active tab: 
It's not something that needs to block the other enhancements here, and needs broader visibility to determine the best direction. |
|
One small detail; the radius on the active tab should be |
|
@jameskoster various thoughts:
|
|
@DaniGuardiola sorry, the border treatment wasn't a proposal; just an example of something we could try instead of changing the font weight. It's best to explore this in detail in a dedicated issue.
How bad are we talking? The majority of UI components have rounded corners, it should be a shame to introduce an inconsistency here. |
Sure, though I'm a bit worried that we'll make tabs worse if we merge this PR with a design that's considered "incomplete". The goal of this PR was to iterate on a unified design in the first place. I'm happy to split into multiple ones, but let's be careful not to make it worse before making it better.
Not that much. We just can't take advantage of Would you mind responding to the rest of the items in my last comment? I want to keep the PR moving forward :D |
I don't think so because we're objectively improving compared with trunk in terms of a11y.
Agree with you that this is okay for now.
Ideally the vertical tabs are 40px tall. This aligns with the general size convention we have for interactive elements (24/32/40). |
I find the light blue background harder to see than the previous gray one. This only affects the preferences tabs FWIW. That said, no strong feelings on my side, as long as we don't forget to improve a11y in a follow-up.
Cool!
Okay, right now they are 48px tall. I'll change this to 40px. For reference, this is the original size of the patterns/media tabs, ergo after this PR merges, the size change will only be noticeable on the preferences tabs. |
|
Flaky tests detected in 07069c8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11183992724
|
|
I'm not seeing any issues in testing. I think I did see the flashing focus ring Marco mentioned but not now (since ece5efc). |
|
@stokesman yes, the flashing has indeed been fixed 👍 FYI, #65878 should be backported before this one to avoid nasty conflicts :) |
| background-color: ${ COLORS.theme.gray[ 100 ] }; | ||
| } | ||
| &[data-select-on-move='true']:has( | ||
| :is( :focus-visible, [data-focus-visible] ) |
There was a problem hiding this comment.
This is probably fixed by ariakit/ariakit#4094 which is included in @ariakit/react 0.4.11.
We should follow-up to update ariakit-related dependencies, and consequently we should be able to remove :focus-visible 🤞
|
Hey folks, this is labeled as an enhancement, but it fixes a regression in 6.7. Therefore, it's unclear to me if this should be included in 6.7 itself. Thoughts? |
I thought the regression was introduced in #64371, which I thought was not part of 6.7 either — that's why this is marked only to be backported to Gutenberg RC. But if the fix is needed in 6.7, we should definitely backport it (together with #65837 and any dependant PR) |
You are correct, I just confirmed. I'll remove #65837 from the 6.7 board. Pardon the false alarm. |
…mprove/unify-vertical-tabs-styles
|
Thanks for all the work on this one @DaniGuardiola 🥳 |
|
I just cherry-picked this PR to the release/19.4 branch to get it included in the next release: 9586226 |
* Remove inserter pattern overrides * Make font weights 400 (inactive) and 500 (active) * Apply styles only when vertical. * Make vertical indicator theme accent color at 4% opacity. * Make height 48px. * Add radius. * Also use hover styles in focus-visible. * Fix indicator not visible in inserter > patterns/media. * Adjust padding. * Tweak focus ring. * Wrap long labels. * Add chevron and fix a few minor details. * Fix merge issues. * Fix focus indicator (gets cropped with the new overflow auto setting) * Fix unwanted chevron. * Fix unwanted nested scrollbar in inserter > patterns/media vertical tabs. * Switch to transform for performance. * Adjust border-radius based on scaling factor. Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: jeryj <[email protected]> * Apply feedback. * Add changelog entry. * Switch to `padding-inline`. * Remove unnecessary styles. * Fix horizontal tabs height. * Remove more unnecessary styles (padding). * Make horizontal padding specific to inline. * Make flex/whitespace styles more explicit. * Make scroll margin specific to vertical tabs. * The "inline" in inline-flex is unnecessary and confusing, removed it. * Remove unnecessary position: relative * Make resets more explicit * Remove unnecessary text-align. * Improve comment * Remove unnecessary margin-left * Clean up TabList styles. * Adjust text-align. * Clean up selector * Fix focus indicator * Clean up position: relative. * Fix typo. * Add position: relative back. * Improve focus indicator when selectOnMove is enabled. * Add fade in effect to chevron when selectOnMove is enabled. * Use [data-focus-visible] consistently. * Styles clean up. * Add comment for clarity. * Move scroll-margin to the right place. * Use CSS variable for accuracy. * Fix overflow. * Skip failing test for Safari :( * Fix flashing issue. * Transition chevron only on selected and not on hover or focus-visible. * Improve chevron opacity transition with suggested value. * fix changelog
cbravobernal
removed
the
Backport to Gutenberg RC
| @@ -175,23 +195,69 @@ export const Tab = styled( Ariakit.Tab )` | |||
| opacity: 0; | |||
|
|
|||
| @media not ( prefers-reduced-motion ) { | |||
| transition: opacity 0.1s linear; | |||
| transition: opacity 0.15s 0.15s linear; | |||
There was a problem hiding this comment.
Just to be sure, is this intentional? This means the duration is 0.15s and the delay is 0.15s. The Button component has a duration of 0.1s and no delay, which feels a bit unnatural to me:
c7ee84a7135d24ae6cdbc2b1e0360687.mp4
There was a problem hiding this comment.
It is: #65387 (comment)
I believe the idea is to show the chevron only after the "indicator" has animated to the new selected tab
There was a problem hiding this comment.
I saw the comment, but isn't that animation only expected for vertical tabs?
Additionally, I don't know if it's related to this PR, but I can see that the pattern categories in the block sidebar don't seem to animate properly - they don't have a background color when focused:
b98ac34f83e2a4b460f9aff15ddc6803.mp4
There was a problem hiding this comment.
Thank you for reporting - I expect @DaniGuardiola to take a look at this when he's back (I don't think he's online today)
There was a problem hiding this comment.
but isn't that animation only expected for vertical tabs?
This seem like a good point. The delay (and maybe the whole transition) should only be needed for data-select-on-move='true' conditions, I think.
There was a problem hiding this comment.
On my phone, and on sick leave, but just wanted to say that as far as I remember, this transition was only applied to the Chevron in vertical tabs, and only when select on move is enabled and when using the arrow keys. If that's not the case, something got messed up, and that'd be surprising to me.
There was a problem hiding this comment.
See #65387 (comment) 😅
Will fix soon. Silly me!
| [data-select-on-move='true'] | ||
| [role='tab']:is( [aria-selected='true'], ) | ||
| & { | ||
| transition: opacity 0.3s ease-in; |
There was a problem hiding this comment.
@t-hamano oof, I accidentally replaced the wrong transition, this is where it should have been replaced.
* Remove inserter pattern overrides * Make font weights 400 (inactive) and 500 (active) * Apply styles only when vertical. * Make vertical indicator theme accent color at 4% opacity. * Make height 48px. * Add radius. * Also use hover styles in focus-visible. * Fix indicator not visible in inserter > patterns/media. * Adjust padding. * Tweak focus ring. * Wrap long labels. * Add chevron and fix a few minor details. * Fix merge issues. * Fix focus indicator (gets cropped with the new overflow auto setting) * Fix unwanted chevron. * Fix unwanted nested scrollbar in inserter > patterns/media vertical tabs. * Switch to transform for performance. * Adjust border-radius based on scaling factor. Co-authored-by: DaniGuardiola <[email protected]> Co-authored-by: ciampo <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: jasmussen <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: jeryj <[email protected]> * Apply feedback. * Add changelog entry. * Switch to `padding-inline`. * Remove unnecessary styles. * Fix horizontal tabs height. * Remove more unnecessary styles (padding). * Make horizontal padding specific to inline. * Make flex/whitespace styles more explicit. * Make scroll margin specific to vertical tabs. * The "inline" in inline-flex is unnecessary and confusing, removed it. * Remove unnecessary position: relative * Make resets more explicit * Remove unnecessary text-align. * Improve comment * Remove unnecessary margin-left * Clean up TabList styles. * Adjust text-align. * Clean up selector * Fix focus indicator * Clean up position: relative. * Fix typo. * Add position: relative back. * Improve focus indicator when selectOnMove is enabled. * Add fade in effect to chevron when selectOnMove is enabled. * Use [data-focus-visible] consistently. * Styles clean up. * Add comment for clarity. * Move scroll-margin to the right place. * Use CSS variable for accuracy. * Fix overflow. * Skip failing test for Safari :( * Fix flashing issue. * Transition chevron only on selected and not on hover or focus-visible. * Improve chevron opacity transition with suggested value. * fix changelog
Fixes #65837 (as a side effect)
Fixes #65863
Fixes #65865
What?
Unifies the styles of vertical tabs across Gutenberg.
Why?
See #64307
How?
By removing style overrides and tweaking the
Tabscomponent to adapt to all needs.Follow-ups
UseAlready done!transformTabs: unify vertical tabs styles #65387 (comment)Testing Instructions
Try the inserter patterns/media vertical tabs.
Screenshots or screencast
d802-bb68-4bc8-a720-907961e44555.mp4