Skip to content

Improve Tabs indicator animation and related utils #64926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
DaniGuardiola merged 19 commits into from
Sep 11, 2024
Merged

Improve Tabs indicator animation and related utils #64926

Changes from 1 commit
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
f5a833a
Refactor utils and switch Tabs indicator animation to `transform`.
DaniGuardiola Aug 30, 2024
42080a4
docs tweak
DaniGuardiola Aug 30, 2024
7377fc0
Update packages/components/src/tabs/styles.ts
DaniGuardiola Aug 30, 2024
405c258
Add RTL support.
DaniGuardiola Sep 2, 2024
4726e53
Addressed @ciampo's comments.
DaniGuardiola Sep 2, 2024
6835665
Correct for antialiasing rounding.
DaniGuardiola Sep 2, 2024
1e444af
Make antialiasing adjustment optional.
DaniGuardiola Sep 2, 2024
7861921
Use larger base value and revert antialiasing adjustment code.
DaniGuardiola Sep 2, 2024
55dd870
DRY RTL
DaniGuardiola Sep 2, 2024
d03622b
Remove RTL story (redundant since Storybook has a dynamic setting to …
DaniGuardiola Sep 2, 2024
c347fad
Fix bug.
DaniGuardiola Sep 2, 2024
59797e4
Fix bug (for real this time).
DaniGuardiola Sep 2, 2024
f82b413
Add changelog entry.
DaniGuardiola Sep 2, 2024
4db2b35
De-cleverfy code.
DaniGuardiola Sep 2, 2024
e36a506
Sync useResizeObserver with #64943 and make useTrackElementOffsetRect…
DaniGuardiola Sep 8, 2024
b57955b
Merge branch 'trunk' of https://github.com/WordPress/gutenberg into i…
DaniGuardiola Sep 10, 2024
bc62400
Deduplicate utility and clean up.
DaniGuardiola Sep 10, 2024
3f6a381
DRY antialiasing factor.
DaniGuardiola Sep 11, 2024
522d816
Changelogs.
DaniGuardiola Sep 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Fix bug.
  • Loading branch information
@DaniGuardiola
DaniGuardiola committed Sep 2, 2024
commit c347fadff4ba935c91ec4e620a17e9fb32008400
13 changes: 7 additions & 6 deletions packages/components/src/tabs/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,24 +34,25 @@ export const TabListWrapper = styled.div`
position: absolute;
pointer-events: none;

// Windows high contrast mode.
outline: 2px solid transparent;
outline-offset: -1px;
}
&:not( [aria-orientation='vertical'] ) {
--direction-factor: 1;
--indicator-start: var( --indicator-left );
&:dir( rtl ) {
--direction-factor: -1;
--indicator-start: var( --indicator-right );
}
transform-origin: calc( ( 1 - var( --direction-factor ) ) * 50% ) 0%;
Copy link
Contributor

@ciampo ciampo Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This may be tricky to understand for a developer with fresh eyes — should we add a comment explaining that, based on the writing direction, the x-axis transform origin may be either 0% or 100% ?

Copy link
Member Author

@DaniGuardiola DaniGuardiola Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point. Honestly I think I'm just gonna use another variable (something like direction-x-origin) and explicitly write the value. Readable > smart.

Copy link
Member Author

@DaniGuardiola DaniGuardiola Sep 2, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I did it, let me know what you think.


// Windows high contrast mode.
outline: 2px solid transparent;
outline-offset: -1px;
}
&:not( [aria-orientation='vertical'] ) {
&::after {
bottom: 0;
height: 0;
/* Using a large value to avoid antialiasing rounding issues
when scaling in the transform, see: https://stackoverflow.com/a/52159123 */
width: 100px;
transform-origin: calc( ( 1 - var( --direction-factor ) ) * 50% ) 0%;
transform: translateX(
calc(
var( --indicator-start ) * var( --direction-factor ) *
Expand Down