Tabs: unify vertical tabs styles #65387
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -9,18 +9,15 @@ import * as Ariakit from '@ariakit/react'; | |
| */ | ||
| import { COLORS, CONFIG } from '../utils'; | ||
| import { space } from '../utils/space'; | ||
| import Icon from '../icon'; | ||
|
|
||
| export const TabListWrapper = styled.div` | ||
| display: flex; | ||
| align-items: stretch; | ||
| overflow-x: auto; | ||
|
|
||
| &[aria-orientation='vertical'] { | ||
| flex-direction: column; | ||
| } | ||
|
|
||
| :where( [aria-orientation='horizontal'] ) { | ||
|
|
@@ -40,11 +37,12 @@ export const TabListWrapper = styled.div` | |
|
|
||
| @media not ( prefers-reduced-motion ) { | ||
| &[data-indicator-animated]::before { | ||
| transition-property: transform, border-radius, border-block; | ||
| transition-duration: 0.2s; | ||
| transition-timing-function: ease-out; | ||
| } | ||
| } | ||
| position: relative; | ||
| &::before { | ||
| content: ''; | ||
| position: absolute; | ||
|
|
@@ -59,7 +57,7 @@ export const TabListWrapper = styled.div` | |
| /* Using a large value to avoid antialiasing rounding issues | ||
| when scaling in the transform, see: https://stackoverflow.com/a/52159123 */ | ||
| --antialiasing-factor: 100; | ||
| &[aria-orientation='horizontal'] { | ||
| --fade-width: 4rem; | ||
| --fade-gradient-base: transparent 0%, black var( --fade-width ); | ||
| --fade-gradient-composed: var( --fade-gradient-base ), black 60%, | ||
|
|
@@ -104,65 +102,87 @@ export const TabListWrapper = styled.div` | |
| ${ COLORS.theme.accent }; | ||
| } | ||
| } | ||
| &[aria-orientation='vertical'] { | ||
| &::before { | ||
| /* Adjusting the border radius to match the scaling in the y axis. */ | ||
| border-radius: ${ CONFIG.radiusSmall } / | ||
| calc( | ||
| ${ CONFIG.radiusSmall } / | ||
| ( | ||
| var( --selected-height, 0 ) / | ||
| var( --antialiasing-factor ) | ||
| ) | ||
| ); | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: calc( var( --antialiasing-factor ) * 1px ); | ||
| transform: translateY( calc( var( --selected-top, 0 ) * 1px ) ) | ||
| scaleY( | ||
| calc( | ||
| var( --selected-height, 0 ) / | ||
| var( --antialiasing-factor ) | ||
| ) | ||
| ); | ||
| background-color: color-mix( | ||
| in srgb, | ||
| ${ COLORS.theme.accent }, | ||
| transparent 96% | ||
| ); | ||
| } | ||
| &[data-select-on-move='true']:has( | ||
| :is( :focus-visible, [data-focus-visible] ) | ||
| )::before { | ||
| box-sizing: border-box; | ||
| border: var( --wp-admin-border-width-focus ) solid | ||
| ${ COLORS.theme.accent }; | ||
| /* Adjusting the border width to match the scaling in the y axis. */ | ||
| border-block-width: calc( | ||
| var( --wp-admin-border-width-focus, 1px ) / | ||
| ( | ||
| var( --selected-height, 0 ) / | ||
| var( --antialiasing-factor ) | ||
| ) | ||
| ); | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| export const Tab = styled( Ariakit.Tab )` | ||
| & { | ||
| /* Resets */ | ||
| border-radius: 0; | ||
| background: transparent; | ||
| border: none; | ||
| box-shadow: none; | ||
|
|
||
| flex: 1 0 auto; | ||
| white-space: nowrap; | ||
| display: flex; | ||
| align-items: center; | ||
| cursor: pointer; | ||
| line-height: 1.2; // Characters in some languages (e.g. Japanese) may have a native higher line-height. | ||
| font-weight: 400; | ||
| color: ${ COLORS.theme.foreground }; | ||
|
|
||
| &[aria-disabled='true'] { | ||
| cursor: default; | ||
| color: ${ COLORS.ui.textDisabled }; | ||
| } | ||
|
|
||
| &:not( [aria-disabled='true'] ):is( :hover, [data-focus-visible] ) { | ||
| color: ${ COLORS.theme.accent }; | ||
| } | ||
|
|
||
| &:focus:not( :disabled ) { | ||
| box-shadow: none; | ||
| outline: none; | ||
| } | ||
|
|
||
| // Focus indicator. | ||
| position: relative; | ||
| &::after { | ||
| position: absolute; | ||
| pointer-events: none; | ||
|
|
||
| // Draw the indicator. | ||
|
|
@@ -175,23 +195,69 @@ export const Tab = styled( Ariakit.Tab )` | |
| opacity: 0; | ||
|
|
||
| @media not ( prefers-reduced-motion ) { | ||
| 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 c7ee84a7135d24ae6cdbc2b1e0360687.mp4There 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.mp4There 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.
This seem like a good point. The delay (and maybe the whole transition) should only be needed for 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-focus-visible]::after { | ||
| opacity: 1; | ||
| } | ||
| } | ||
|
|
||
| [aria-orientation='horizontal'] & { | ||
| padding-inline: ${ space( 4 ) }; | ||
| height: ${ space( 12 ) }; | ||
| text-align: center; | ||
| scroll-margin: 24px; | ||
|
|
||
| &::after { | ||
| content: ''; | ||
| inset: ${ space( 3 ) }; | ||
| } | ||
| } | ||
|
|
||
| [aria-orientation='vertical'] & { | ||
| padding: ${ space( 2 ) } ${ space( 3 ) }; | ||
| min-height: ${ space( 10 ) }; | ||
| text-align: start; | ||
|
|
||
| &[aria-selected='true'] { | ||
| color: ${ COLORS.theme.accent }; | ||
| fill: currentColor; | ||
| } | ||
| } | ||
| [aria-orientation='vertical'][data-select-on-move='false'] &::after { | ||
| content: ''; | ||
| inset: var( --wp-admin-border-width-focus ); | ||
| } | ||
| `; | ||
|
|
||
| export const TabChildren = styled.span` | ||
| flex-grow: 1; | ||
| `; | ||
|
|
||
| export const TabChevron = styled( Icon )` | ||
| flex-shrink: 0; | ||
| margin-inline-end: ${ space( -1 ) }; | ||
| [aria-orientation='horizontal'] & { | ||
| display: none; | ||
| } | ||
| opacity: 0; | ||
| [role='tab']:is( [aria-selected='true'], [data-focus-visible], :hover ) & { | ||
| opacity: 1; | ||
| } | ||
| // The chevron is transitioned into existence when selectOnMove is enabled, | ||
| // because otherwise it looks jarring, as it shows up outside of the focus | ||
| // indicator that's being animated at the same time. | ||
| @media not ( prefers-reduced-motion ) { | ||
| [data-select-on-move='true'] | ||
| [role='tab']:is( [aria-selected='true'], ) | ||
| & { | ||
| transition: opacity 0.3s ease-in; | ||
stokesman marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. @t-hamano oof, I accidentally replaced the wrong transition, this is where it should have been replaced. |
||
| } | ||
| } | ||
| &:dir( rtl ) { | ||
| rotate: 180deg; | ||
| } | ||
| `; | ||
|
|
||
|
|
@@ -201,7 +267,7 @@ export const TabPanel = styled( Ariakit.TabPanel )` | |
| outline: none; | ||
| } | ||
|
|
||
| &[data-focus-visible] { | ||
| box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) | ||
| ${ COLORS.theme.accent }; | ||
| // Windows high contrast mode. | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is probably fixed by ariakit/ariakit#4094 which is included in
@ariakit/react0.4.11.We should follow-up to update ariakit-related dependencies, and consequently we should be able to remove
:focus-visible🤞