diff --git a/.changeset/brave-emus-mate.md b/.changeset/brave-emus-mate.md new file mode 100644 index 00000000000..c02de3cb321 --- /dev/null +++ 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 index e6c734ad7d8..9a460438b74 100644 --- a/packages/tabs/src/use-tabs.ts +++ b/packages/tabs/src/use-tabs.ts @@ -277,13 +277,8 @@ export interface UseTabProps export function useTab
(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
index 0928627ab31..08a97e64b88 100644
--- a/packages/tabs/stories/tabs.stories.tsx
+++ b/packages/tabs/stories/tabs.stories.tsx
@@ -95,6 +95,26 @@ export const withIndicator = () => (
)
+export const withIndicatorAndLongTabText = () => (
+ <>
+