fix(TabIndicator): avoid bg flash when long tab text

chakra-ui · Feb 28, 2022 · 63c2bc0 · 63c2bc0
1 parent e4a990d
commit 63c2bc0
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/.changeset/brave-emus-mate.md b/.changeset/brave-emus-mate.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/tabs": patch
+---
+
+Include width in TabIndicator transition properties
diff --git a/packages/tabs/src/use-tabs.ts b/packages/tabs/src/use-tabs.ts
@@ -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,
@@ -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,

diff --git a/packages/tabs/stories/tabs.stories.tsx b/packages/tabs/stories/tabs.stories.tsx
@@ -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>