fix(TabIndicator): avoid bg flash when long tab text #5665
Conversation
🦋 Changeset detectedLatest commit: 512e660 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui-storybook/XPFZH8qoEJLU94DBhFoCVJEg7Fx9 |
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 512e660:
|
packages/tabs/src/use-tabs.ts
Outdated
| @@ -449,7 +444,7 @@ export function useTabIndicator(): React.CSSProperties { | |||
|
|
|||
| return { | |||
| position: "absolute", | |||
| transitionProperty: "left, right, top, bottom", | |||
| transitionProperty: "left, right, top, bottom, width", | |||
There was a problem hiding this comment.
I guess height should be included here as well, in the case of vertical tabs. Right?
There was a problem hiding this comment.
Makes sense. I've included height now as well.
Closes (#5664)
📝 Description
Add "width" to the list of transitionProperties of the TabIndicator to prevent the background from overlapping adjacent tabs. This issue occurs when one tab's width is larger than the other tabs.
⛳️ Current behavior (updates)
The transition behavior when the selected tab changes.
🚀 New behavior
Including "width" as a transition property of the TabIndicator prevents any overlapping when the selected tab changes (assuming the tabs differ in width so the issue shows itself)
💣 Is this a breaking change (Yes/No):
No
📝 Additional Information
Example of the issue:
https://codesandbox.io/s/pedantic-dawn-ds3hfu?file=/src/index.tsx
I did not include a test since the nature of the issue is more visual/timing related -- it seemed hard to create a test to capture that.