Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## main #5010 +/- ##
==========================================
- Coverage 97.67% 97.66% -0.01%
==========================================
Files 960 960
Lines 31382 31410 +28
Branches 11605 11614 +9
==========================================
+ Hits 30651 30678 +27
+ Misses 724 686 -38
- Partials 7 46 +39 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
GitHub Actions
Failure
| onBlur={onBlur} | ||
| > | ||
| {isOneTheme && ( | ||
| <span className={styles['tabs-active-indicator']} ref={activeIndicatorRef} aria-hidden="true" /> |
There was a problem hiding this comment.
Can we use the existing tab indicator? Or remove the old one and make it look like before in visual refresh, so we don't have to have 2 tab indicators?
There was a problem hiding this comment.
what is existing tab indicator? if you mean ::after on each tab header, we need to keep it when its not one-theme
There was a problem hiding this comment.
Should we keep it? Or should we use this new span for both VR and One Theme?
| } | ||
|
|
||
| .tabs-active-indicator { | ||
| @include theming.expressive-motion-only { |
There was a problem hiding this comment.
Let's try to only add actual animation properties inside of this mixin. The rest should be outside and shared between visual refresh and one theme.
2 participants
Behavior
A single indicator travels from the origin tab to the destination, morphing width to fit the target label along the way. Duration is distance-scaled: short hops are snappy, longer jumps take slightly more time. Light weight + high frequency = fast and responsive with personality.
Description
Today the component renders the underline as a separate ::after on each tab header, sitting at opacity: 0, and selection cross-fades opacity between the old and new one. Those underlines are pinned one-per-tab, so none of them can travel, and the native motion can only ever be a cross-fade.
We replace the per-tab underline cross-fade with a single shared indicator that slides and morphs width between tabs, scoped to expressive-motion themes (One Theme). Other themes are unchanged.
Related links, issue #, if available: n/a
How has this been tested?
Unit test
Manual test
Review checklist
The following items are to be evaluated by the author(s) and the reviewer(s).
Correctness
CONTRIBUTING.md.CONTRIBUTING.md.Security
checkSafeUrlfunction.Testing
By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.