diff --git a/.changeset/two-zoos-teach.md b/.changeset/two-zoos-teach.md new file mode 100644 index 0000000000..e699f9583d --- /dev/null +++ b/.changeset/two-zoos-teach.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed the Tabs active indicator not hiding when no tab matches the current route. + +**Affected components:** Tabs diff --git a/packages/ui/src/components/Tabs/Tabs.module.css b/packages/ui/src/components/Tabs/Tabs.module.css index e07bef699f..55de719127 100644 --- a/packages/ui/src/components/Tabs/Tabs.module.css +++ b/packages/ui/src/components/Tabs/Tabs.module.css @@ -26,6 +26,7 @@ --active-tab-width: 0px; --active-tab-height: 0px; --active-transition-duration: 0s; + --active-tab-opacity: 0; --hovered-tab-left: 0px; --hovered-tab-right: 0px; @@ -76,7 +77,7 @@ border-radius: 4px; transition: left var(--active-transition-duration) ease-out, opacity 0.15s ease-out, width var(--active-transition-duration) ease-out; - opacity: 1; + opacity: var(--active-tab-opacity); } .bui-TabHovered { diff --git a/packages/ui/src/components/Tabs/TabsIndicators.tsx b/packages/ui/src/components/Tabs/TabsIndicators.tsx index 82826ac640..aef792310e 100644 --- a/packages/ui/src/components/Tabs/TabsIndicators.tsx +++ b/packages/ui/src/components/Tabs/TabsIndicators.tsx @@ -37,7 +37,7 @@ export const TabsIndicators = (props: TabsIndicatorsProps) => { const tabsRect = tabsRef.current.getBoundingClientRect(); // Set active tab variables - if (state?.selectedKey) { + if (state?.selectedKey != null && state.selectedKey !== '') { const activeTab = tabRefs.current.get(state.selectedKey.toString()); if (activeTab) { @@ -98,7 +98,11 @@ export const TabsIndicators = (props: TabsIndicatorsProps) => { '--active-tab-height', `${activeRect.height}px`, ); + tabsRef.current.style.setProperty('--active-tab-opacity', '1'); } + } else { + tabsRef.current.style.setProperty('--active-tab-opacity', '0'); + prevSelectedKey.current = null; } // Set hovered tab variables