Skip to content

Commit

Permalink
fix(TabIndicator): avoid bg flash when long tab text
Browse files Browse the repository at this point in the history
  • Loading branch information
josulliv101 committed Feb 28, 2022
1 parent e4a990d commit 63c2bc0
Show file tree
Hide file tree
Showing 3 changed files with 28 additions and 8 deletions.
5 changes: 5 additions & 0 deletions .changeset/brave-emus-mate.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@chakra-ui/tabs": patch
---

Include width in TabIndicator transition properties
11 changes: 3 additions & 8 deletions packages/tabs/src/use-tabs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -277,13 +277,8 @@ export interface UseTabProps
export function useTab<P extends UseTabProps>(props: P) {
const { isDisabled, isFocusable, ...htmlProps } = props

const {
setSelectedIndex,
isManual,
id,
setFocusedIndex,
selectedIndex,
} = useTabsContext()
const { setSelectedIndex, isManual, id, setFocusedIndex, selectedIndex } =
useTabsContext()

const { index, register } = useTabsDescendant({
disabled: isDisabled && !isFocusable,
Expand Down Expand Up @@ -449,7 +444,7 @@ export function useTabIndicator(): React.CSSProperties {

return {
position: "absolute",
transitionProperty: "left, right, top, bottom",
transitionProperty: "left, right, top, bottom, width",
transitionDuration: hasMeasured ? "200ms" : "0ms",
transitionTimingFunction: "cubic-bezier(0, 0, 0.2, 1)",
...rect,
Expand Down
20 changes: 20 additions & 0 deletions packages/tabs/stories/tabs.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,26 @@ export const withIndicator = () => (
</Tabs>
)

export const withIndicatorAndLongTabText = () => (
<>
<Tabs variant="unstyled" isManual>
<TabList>
<Tab>Tab with long text</Tab>
<Tab>Billings</Tab>
<Tab>Preferences</Tab>
<Tab>Shut Down</Tab>
</TabList>
<TabIndicator mt="-36px" zIndex={-1} height="34px" bg="green.200" />
<TabPanels>
<TabPanel>Tab with long text</TabPanel>
<TabPanel>Billings</TabPanel>
<TabPanel>Preferences</TabPanel>
<TabPanel>Shut Down</TabPanel>
</TabPanels>
</Tabs>
</>
)

export const withVerticalTabs = () => (
<Tabs orientation="vertical">
<TabList>
Expand Down

0 comments on commit 63c2bc0

Please sign in to comment.