Refactor tabs
Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
This commit is contained in:
Charles de Dreuille
@@ -0,0 +1,5 @@
|
||||
---
|
||||
'@backstage/canon': minor
|
||||
---
|
||||
|
||||
**Breaking changes** The Tabs components has been updates to use React Aria under the hood and to work with react-router-dom directly.
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -183,18 +183,6 @@
|
||||
font-weight: var(--bui-font-weight-regular);
|
||||
}
|
||||
|
||||
.bui-TabsIndicator {
|
||||
background-color: var(--bui-bg-underline);
|
||||
}
|
||||
|
||||
.bui-TabsTab[data-selected] {
|
||||
background: radial-gradient(
|
||||
ellipse at bottom,
|
||||
rgba(209, 110, 203, 0.25) 0%,
|
||||
transparent 95%
|
||||
);
|
||||
}
|
||||
|
||||
.bui-HeaderToolbar {
|
||||
padding-top: var(--bui-space-2);
|
||||
padding-inline: var(--bui-space-2);
|
||||
@@ -208,10 +196,7 @@
|
||||
|
||||
.bui-HeaderTabsWrapper {
|
||||
margin-top: var(--bui-space-2);
|
||||
padding-inline: var(--bui-space-2);
|
||||
}
|
||||
|
||||
.bui-HeaderTabs {
|
||||
margin-inline: var(--bui-space-2);
|
||||
border-radius: var(--bui-radius-3);
|
||||
padding-inline: var(--bui-space-1);
|
||||
border: none;
|
||||
@@ -245,7 +230,7 @@
|
||||
border: 1px solid var(--bui-border);
|
||||
}
|
||||
|
||||
.bui-HeaderTabs {
|
||||
.bui-HeaderTabsWrapper {
|
||||
border: 1px solid var(--bui-border);
|
||||
}
|
||||
}
|
||||
@@ -265,7 +250,6 @@
|
||||
--bui-bg-danger: #3b1219;
|
||||
--bui-bg-warning: #302008;
|
||||
--bui-bg-success: #132d21;
|
||||
--bui-bg-underline: #d16ecb;
|
||||
|
||||
--bui-fg-primary: var(--bui-white);
|
||||
--bui-fg-secondary: var(--bui-gray-7);
|
||||
|
||||
+51
-128
@@ -9696,79 +9696,9 @@
|
||||
|
||||
.bui-HeaderTabsWrapper {
|
||||
margin-bottom: var(--bui-space-4);
|
||||
}
|
||||
|
||||
.bui-HeaderTabs {
|
||||
background-color: var(--bui-bg-surface-1);
|
||||
padding-inline: var(--bui-space-3);
|
||||
border-bottom: 1px solid var(--bui-border);
|
||||
--active-tab-left: 0px;
|
||||
--active-tab-right: 0px;
|
||||
--active-tab-top: 0px;
|
||||
--active-tab-bottom: 0px;
|
||||
--active-tab-width: 0px;
|
||||
--active-tab-height: 0px;
|
||||
--active-transition-duration: 0s;
|
||||
--hovered-tab-left: 0px;
|
||||
--hovered-tab-right: 0px;
|
||||
--hovered-tab-top: 0px;
|
||||
--hovered-tab-bottom: 0px;
|
||||
--hovered-tab-width: 0px;
|
||||
--hovered-tab-height: 0px;
|
||||
--hovered-tab-opacity: 0;
|
||||
--hovered-transition-duration: 0s;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bui-HeaderTabList {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bui-HeaderTab {
|
||||
font-size: var(--bui-font-size-3);
|
||||
color: var(--bui-fg-secondary);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
height: 36px;
|
||||
padding-inline: var(--bui-space-2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
&[data-selected="true"] {
|
||||
color: var(--bui-fg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.bui-HeaderTabActive {
|
||||
content: "";
|
||||
left: calc(var(--active-tab-left) + var(--bui-space-2));
|
||||
width: calc(var(--active-tab-width) - var(--bui-space-4));
|
||||
background-color: var(--bui-fg-primary);
|
||||
height: 1px;
|
||||
transition: left var(--active-transition-duration) ease-out, opacity .15s ease-out;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
.bui-HeaderTabHovered {
|
||||
content: "";
|
||||
left: var(--hovered-tab-left);
|
||||
top: calc(var(--hovered-tab-top) + 4px);
|
||||
width: var(--hovered-tab-width);
|
||||
height: calc(var(--hovered-tab-height) - 8px);
|
||||
background-color: var(--bui-gray-2);
|
||||
opacity: var(--hovered-tab-opacity);
|
||||
transition: left var(--hovered-transition-duration) ease-out, top var(--hovered-transition-duration) ease-out, width var(--hovered-transition-duration) ease-out, height var(--hovered-transition-duration) ease-out, opacity .15s ease-out;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
background-color: var(--bui-bg-surface-1);
|
||||
}
|
||||
|
||||
.bui-Heading {
|
||||
@@ -10223,81 +10153,74 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bui-TabsRoot {
|
||||
border: 1px solid var(--color-gray-200);
|
||||
border-radius: .375rem;
|
||||
}
|
||||
|
||||
.bui-TabsList {
|
||||
z-index: 0;
|
||||
.bui-Tabs {
|
||||
--active-tab-left: 0px;
|
||||
--active-tab-right: 0px;
|
||||
--active-tab-top: 0px;
|
||||
--active-tab-bottom: 0px;
|
||||
--active-tab-width: 0px;
|
||||
--active-tab-height: 0px;
|
||||
--active-transition-duration: 0s;
|
||||
--hovered-tab-left: 0px;
|
||||
--hovered-tab-right: 0px;
|
||||
--hovered-tab-top: 0px;
|
||||
--hovered-tab-bottom: 0px;
|
||||
--hovered-tab-width: 0px;
|
||||
--hovered-tab-height: 0px;
|
||||
--hovered-tab-opacity: 0;
|
||||
--hovered-transition-duration: 0s;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bui-TabsTab {
|
||||
appearance: none;
|
||||
.bui-TabList {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.bui-Tab {
|
||||
font-size: var(--bui-font-size-3);
|
||||
color: var(--bui-fg-secondary);
|
||||
user-select: none;
|
||||
padding-inline: var(--bui-space-3);
|
||||
height: 2rem;
|
||||
font-family: inherit;
|
||||
font-size: .875rem;
|
||||
font-weight: 500;
|
||||
line-height: 1.25rem;
|
||||
font-size: var(--bui-font-size-2);
|
||||
cursor: pointer;
|
||||
background: none;
|
||||
border: 0;
|
||||
outline: 0;
|
||||
z-index: 2;
|
||||
height: 36px;
|
||||
padding-inline: var(--bui-space-2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
padding-block: 0;
|
||||
transition: color .2s ease-in-out;
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
&[data-selected] {
|
||||
&[data-selected="true"] {
|
||||
color: var(--bui-fg-primary);
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: var(--bui-fg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
position: relative;
|
||||
|
||||
&:before {
|
||||
content: "";
|
||||
outline: 1px solid var(--bui-ring);
|
||||
outline-offset: -1px;
|
||||
border-radius: .25rem;
|
||||
position: absolute;
|
||||
inset: .25rem 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bui-TabsIndicator {
|
||||
z-index: -1;
|
||||
translate: var(--active-tab-left) -50%;
|
||||
width: var(--active-tab-width);
|
||||
background-color: var(--bui-bg-solid);
|
||||
.bui-TabActive {
|
||||
content: "";
|
||||
left: calc(var(--active-tab-left) + var(--bui-space-2));
|
||||
width: calc(var(--active-tab-width) - var(--bui-space-4));
|
||||
background-color: var(--bui-fg-primary);
|
||||
height: 1px;
|
||||
transition-property: translate, width;
|
||||
transition-duration: .2s;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition: left var(--active-transition-duration) ease-out, opacity .15s ease-out;
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
bottom: -1px;
|
||||
}
|
||||
|
||||
.bui-TabsPanel {
|
||||
&[hidden] {
|
||||
display: none;
|
||||
}
|
||||
.bui-TabHovered {
|
||||
content: "";
|
||||
left: var(--hovered-tab-left);
|
||||
top: calc(var(--hovered-tab-top) + 4px);
|
||||
width: var(--hovered-tab-width);
|
||||
height: calc(var(--hovered-tab-height) - 8px);
|
||||
background-color: var(--bui-gray-2);
|
||||
opacity: var(--hovered-tab-opacity);
|
||||
transition: left var(--hovered-transition-duration) ease-out, top var(--hovered-transition-duration) ease-out, width var(--hovered-transition-duration) ease-out, height var(--hovered-transition-duration) ease-out, opacity .15s ease-out;
|
||||
border-radius: 4px;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bui-Text {
|
||||
|
||||
@@ -28,7 +28,10 @@ import { ScrollArea as ScrollArea_2 } from '@base-ui-components/react/scroll-are
|
||||
import type { SearchFieldProps as SearchFieldProps_2 } from 'react-aria-components';
|
||||
import type { SwitchProps as SwitchProps_2 } from 'react-aria-components';
|
||||
import { Table as Table_2 } from '@tanstack/react-table';
|
||||
import { Tabs as Tabs_2 } from '@base-ui-components/react/tabs';
|
||||
import type { TabListProps as TabListProps_2 } from 'react-aria-components';
|
||||
import type { TabPanelProps as TabPanelProps_2 } from 'react-aria-components';
|
||||
import type { TabProps as TabProps_2 } from 'react-aria-components';
|
||||
import type { TabsProps as TabsProps_2 } from 'react-aria-components';
|
||||
import { TdHTMLAttributes } from 'react';
|
||||
import type { TextFieldProps as TextFieldProps_2 } from 'react-aria-components';
|
||||
import { ThHTMLAttributes } from 'react';
|
||||
@@ -373,6 +376,27 @@ export const componentDefinitions: {
|
||||
readonly item: 'bui-GridItem';
|
||||
};
|
||||
};
|
||||
readonly Header: {
|
||||
readonly classNames: {
|
||||
readonly toolbar: 'bui-HeaderToolbar';
|
||||
readonly toolbarWrapper: 'bui-HeaderToolbarWrapper';
|
||||
readonly toolbarContent: 'bui-HeaderToolbarContent';
|
||||
readonly toolbarControls: 'bui-HeaderToolbarControls';
|
||||
readonly toolbarIcon: 'bui-HeaderToolbarIcon';
|
||||
readonly toolbarName: 'bui-HeaderToolbarName';
|
||||
readonly breadcrumbs: 'bui-HeaderBreadcrumbs';
|
||||
readonly breadcrumb: 'bui-HeaderBreadcrumb';
|
||||
readonly breadcrumbLink: 'bui-HeaderBreadcrumbLink';
|
||||
readonly breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator';
|
||||
readonly tabs: 'bui-HeaderTabs';
|
||||
readonly tabsWrapper: 'bui-HeaderTabsWrapper';
|
||||
readonly tabList: 'bui-HeaderTabList';
|
||||
readonly tab: 'bui-HeaderTab';
|
||||
readonly tabActive: 'bui-HeaderTabActive';
|
||||
readonly tabHovered: 'bui-HeaderTabHovered';
|
||||
readonly subNav: 'bui-HeaderSubNav';
|
||||
};
|
||||
};
|
||||
readonly Heading: {
|
||||
readonly classNames: {
|
||||
readonly root: 'bui-Heading';
|
||||
@@ -487,11 +511,13 @@ export const componentDefinitions: {
|
||||
};
|
||||
readonly Tabs: {
|
||||
readonly classNames: {
|
||||
readonly root: 'bui-TabsRoot';
|
||||
readonly list: 'bui-TabsList';
|
||||
readonly indicator: 'bui-TabsIndicator';
|
||||
readonly tab: 'bui-TabsTab';
|
||||
readonly panel: 'bui-TabsPanel';
|
||||
readonly tabs: 'bui-Tabs';
|
||||
readonly tabList: 'bui-TabList';
|
||||
readonly tabListWrapper: 'bui-TabListWrapper';
|
||||
readonly tab: 'bui-Tab';
|
||||
readonly tabActive: 'bui-TabActive';
|
||||
readonly tabHovered: 'bui-TabHovered';
|
||||
readonly panel: 'bui-TabPanel';
|
||||
};
|
||||
};
|
||||
readonly Text: {
|
||||
@@ -523,26 +549,6 @@ export const componentDefinitions: {
|
||||
readonly disabled: readonly [true, false];
|
||||
};
|
||||
};
|
||||
readonly Header: {
|
||||
readonly classNames: {
|
||||
readonly toolbar: 'bui-HeaderToolbar';
|
||||
readonly toolbarWrapper: 'bui-HeaderToolbarWrapper';
|
||||
readonly toolbarContent: 'bui-HeaderToolbarContent';
|
||||
readonly toolbarControls: 'bui-HeaderToolbarControls';
|
||||
readonly toolbarIcon: 'bui-HeaderToolbarIcon';
|
||||
readonly toolbarName: 'bui-HeaderToolbarName';
|
||||
readonly breadcrumbs: 'bui-HeaderBreadcrumbs';
|
||||
readonly breadcrumb: 'bui-HeaderBreadcrumb';
|
||||
readonly breadcrumbLink: 'bui-HeaderBreadcrumbLink';
|
||||
readonly breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator';
|
||||
readonly tabs: 'bui-HeaderTabs';
|
||||
readonly tabList: 'bui-HeaderTabList';
|
||||
readonly tab: 'bui-HeaderTab';
|
||||
readonly tabActive: 'bui-HeaderTabActive';
|
||||
readonly tabHovered: 'bui-HeaderTabHovered';
|
||||
readonly subNav: 'bui-HeaderSubNav';
|
||||
};
|
||||
};
|
||||
readonly Tooltip: {
|
||||
readonly classNames: {
|
||||
readonly tooltip: 'bui-Tooltip';
|
||||
@@ -1000,6 +1006,8 @@ export interface HeaderPageTab {
|
||||
// (undocumented)
|
||||
href?: string;
|
||||
// (undocumented)
|
||||
id: string;
|
||||
// (undocumented)
|
||||
label: string;
|
||||
}
|
||||
|
||||
@@ -1024,6 +1032,8 @@ export interface HeaderTab {
|
||||
// (undocumented)
|
||||
href?: string;
|
||||
// (undocumented)
|
||||
id: string;
|
||||
// (undocumented)
|
||||
label: string;
|
||||
}
|
||||
|
||||
@@ -1591,6 +1601,9 @@ export interface SwitchProps extends SwitchProps_2 {
|
||||
label?: string;
|
||||
}
|
||||
|
||||
// @public
|
||||
export const Tab: (props: TabProps) => JSX_2.Element;
|
||||
|
||||
// @public
|
||||
export const Table: {
|
||||
Root: ForwardRefExoticComponent<
|
||||
@@ -1663,31 +1676,31 @@ export interface TableCellTextProps
|
||||
title: string;
|
||||
}
|
||||
|
||||
// @public (undocumented)
|
||||
export const Tabs: {
|
||||
Root: ForwardRefExoticComponent<
|
||||
TabsRootWithoutOrientation & RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
List: ForwardRefExoticComponent<
|
||||
Omit<Tabs_2.List.Props & RefAttributes<HTMLDivElement>, 'ref'> &
|
||||
RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
Tab: ForwardRefExoticComponent<
|
||||
Omit<Tabs_2.Tab.Props & RefAttributes<Element>, 'ref'> &
|
||||
RefAttributes<Element>
|
||||
>;
|
||||
Panel: ForwardRefExoticComponent<
|
||||
Omit<Tabs_2.Panel.Props & RefAttributes<HTMLDivElement>, 'ref'> &
|
||||
RefAttributes<HTMLDivElement>
|
||||
>;
|
||||
};
|
||||
// @public
|
||||
export const TabList: (props: TabListProps) => JSX_2.Element;
|
||||
|
||||
// @public (undocumented)
|
||||
export interface TabsRootWithoutOrientation
|
||||
extends Omit<
|
||||
React.ComponentPropsWithoutRef<typeof Tabs_2.Root>,
|
||||
'orientation'
|
||||
> {}
|
||||
// @public
|
||||
export interface TabListProps extends Omit<TabListProps_2<object>, 'items'> {}
|
||||
|
||||
// @public
|
||||
export const TabPanel: (props: TabPanelProps) => JSX_2.Element;
|
||||
|
||||
// @public
|
||||
export interface TabPanelProps extends TabPanelProps_2 {}
|
||||
|
||||
// @public
|
||||
export interface TabProps extends TabProps_2 {
|
||||
// (undocumented)
|
||||
onHover?: (key: string | null) => void;
|
||||
// (undocumented)
|
||||
onRegister?: (key: string, element: HTMLDivElement | null) => void;
|
||||
}
|
||||
|
||||
// @public
|
||||
export const Tabs: (props: TabsProps) => JSX_2.Element | null;
|
||||
|
||||
// @public
|
||||
export interface TabsProps extends TabsProps_2 {}
|
||||
|
||||
// @public (undocumented)
|
||||
const Text_2: {
|
||||
|
||||
@@ -119,84 +119,7 @@
|
||||
|
||||
.bui-HeaderTabsWrapper {
|
||||
margin-bottom: var(--bui-space-4);
|
||||
}
|
||||
|
||||
.bui-HeaderTabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
background-color: var(--bui-bg-surface-1);
|
||||
position: relative;
|
||||
padding-inline: var(--bui-space-3);
|
||||
border-bottom: 1px solid var(--bui-border);
|
||||
|
||||
/* Initialize CSS variables */
|
||||
--active-tab-left: 0px;
|
||||
--active-tab-right: 0px;
|
||||
--active-tab-top: 0px;
|
||||
--active-tab-bottom: 0px;
|
||||
--active-tab-width: 0px;
|
||||
--active-tab-height: 0px;
|
||||
--active-transition-duration: 0s;
|
||||
|
||||
--hovered-tab-left: 0px;
|
||||
--hovered-tab-right: 0px;
|
||||
--hovered-tab-top: 0px;
|
||||
--hovered-tab-bottom: 0px;
|
||||
--hovered-tab-width: 0px;
|
||||
--hovered-tab-height: 0px;
|
||||
--hovered-tab-opacity: 0;
|
||||
--hovered-transition-duration: 0s;
|
||||
}
|
||||
|
||||
.bui-HeaderTabList {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.bui-HeaderTab {
|
||||
font-size: var(--bui-font-size-3);
|
||||
color: var(--bui-fg-secondary);
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-inline: var(--bui-space-2);
|
||||
|
||||
&[data-selected='true'] {
|
||||
color: var(--bui-fg-primary);
|
||||
}
|
||||
}
|
||||
|
||||
.bui-HeaderTabActive {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: calc(var(--active-tab-left) + var(--bui-space-2));
|
||||
bottom: -1px;
|
||||
width: calc(var(--active-tab-width) - var(--bui-space-4));
|
||||
height: 1px;
|
||||
background-color: var(--bui-fg-primary);
|
||||
border-radius: 4px;
|
||||
transition: left var(--active-transition-duration) ease-out,
|
||||
opacity 0.15s ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.bui-HeaderTabHovered {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: var(--hovered-tab-left);
|
||||
top: calc(var(--hovered-tab-top) + 4px);
|
||||
width: var(--hovered-tab-width);
|
||||
height: calc(var(--hovered-tab-height) - 8px);
|
||||
background-color: var(--bui-gray-2);
|
||||
border-radius: 4px;
|
||||
opacity: var(--hovered-tab-opacity);
|
||||
transition: left var(--hovered-transition-duration) ease-out,
|
||||
top var(--hovered-transition-duration) ease-out,
|
||||
width var(--hovered-transition-duration) ease-out,
|
||||
height var(--hovered-transition-duration) ease-out, opacity 0.15s ease-out;
|
||||
background-color: var(--bui-bg-surface-1);
|
||||
}
|
||||
|
||||
@@ -48,15 +48,17 @@ export const Header = (props: HeaderProps) => {
|
||||
customActions={customActions}
|
||||
hasTabs={hasTabs}
|
||||
/>
|
||||
<div className={classNames.tabsWrapper}>
|
||||
<Tabs>
|
||||
{tabs?.map(tab => (
|
||||
<Tab key={tab.id} id={tab.id} href={tab.href}>
|
||||
{tab.label}
|
||||
</Tab>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
{tabs && (
|
||||
<div className={classNames.tabsWrapper}>
|
||||
<Tabs>
|
||||
{tabs?.map(tab => (
|
||||
<Tab key={tab.id} id={tab.id} href={tab.href}>
|
||||
{tab.label}
|
||||
</Tab>
|
||||
))}
|
||||
</Tabs>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -17,10 +17,18 @@
|
||||
import type { Meta, StoryObj, StoryFn } from '@storybook/react';
|
||||
import { HeaderPage } from './HeaderPage';
|
||||
import { HeaderPageOption, HeaderPageTab } from './types';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
|
||||
const meta = {
|
||||
title: 'Components/HeaderPage',
|
||||
component: HeaderPage,
|
||||
decorators: [
|
||||
(Story: StoryFn) => (
|
||||
<MemoryRouter>
|
||||
<Story />
|
||||
</MemoryRouter>
|
||||
),
|
||||
],
|
||||
} satisfies Meta<typeof HeaderPage>;
|
||||
|
||||
export default meta;
|
||||
@@ -28,18 +36,23 @@ type Story = StoryObj<typeof meta>;
|
||||
|
||||
const tabs: HeaderPageTab[] = [
|
||||
{
|
||||
id: 'overview',
|
||||
label: 'Overview',
|
||||
},
|
||||
{
|
||||
id: 'checks',
|
||||
label: 'Checks',
|
||||
},
|
||||
{
|
||||
id: 'tracks',
|
||||
label: 'Tracks',
|
||||
},
|
||||
{
|
||||
id: 'campaigns',
|
||||
label: 'Campaigns',
|
||||
},
|
||||
{
|
||||
id: 'integrations',
|
||||
label: 'Integrations',
|
||||
},
|
||||
];
|
||||
|
||||
@@ -21,7 +21,7 @@ import { Flex } from '../Flex';
|
||||
import { Menu } from '../Menu';
|
||||
import { ButtonIcon } from '../ButtonIcon';
|
||||
import { RiMore2Line } from '@remixicon/react';
|
||||
import { Tabs } from '../Tabs';
|
||||
import { Tabs, Tab } from '../Tabs';
|
||||
|
||||
/**
|
||||
* A component that renders a header page.
|
||||
@@ -29,7 +29,7 @@ import { Tabs } from '../Tabs';
|
||||
* @public
|
||||
*/
|
||||
export const HeaderPage = (props: HeaderPageProps) => {
|
||||
const { title, description, options } = props;
|
||||
const { title, description, options, tabs } = props;
|
||||
|
||||
return (
|
||||
<Flex pl="4" pr="2" direction="column" gap="4">
|
||||
@@ -69,13 +69,15 @@ export const HeaderPage = (props: HeaderPageProps) => {
|
||||
)}
|
||||
</div>
|
||||
</Flex>
|
||||
<Tabs.Root>
|
||||
<Tabs.List>
|
||||
<Tabs.Tab>Tab 1</Tabs.Tab>
|
||||
<Tabs.Tab>Tab 2</Tabs.Tab>
|
||||
<Tabs.Tab>Tab 3 With long title</Tabs.Tab>
|
||||
</Tabs.List>
|
||||
</Tabs.Root>
|
||||
{tabs && (
|
||||
<Tabs>
|
||||
{tabs.map(tab => (
|
||||
<Tab key={tab.id} id={tab.id} href={tab.href}>
|
||||
{tab.label}
|
||||
</Tab>
|
||||
))}
|
||||
</Tabs>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -32,6 +32,7 @@ export interface HeaderPageProps {
|
||||
* @public
|
||||
*/
|
||||
export interface HeaderPageTab {
|
||||
id: string;
|
||||
label: string;
|
||||
href?: string;
|
||||
}
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
*/
|
||||
|
||||
import type { Meta, StoryFn, StoryObj } from '@storybook/react';
|
||||
import { Tabs, Tab } from './Tabs';
|
||||
import { Tabs, TabList, Tab, TabPanel } from './Tabs';
|
||||
import { MemoryRouter } from 'react-router-dom';
|
||||
import { Box } from '../Box';
|
||||
import { Text } from '../Text';
|
||||
@@ -41,9 +41,36 @@ export const Default: Story = {
|
||||
decorators: [withRouter],
|
||||
render: () => (
|
||||
<Tabs>
|
||||
<Tab id="tab1">Tab 1</Tab>
|
||||
<Tab id="tab2">Tab 2</Tab>
|
||||
<Tab id="tab3">Tab 3 With long title</Tab>
|
||||
<TabList>
|
||||
<Tab id="tab1">Tab 1</Tab>
|
||||
<Tab id="tab2">Tab 2</Tab>
|
||||
<Tab id="tab3">Tab 3 With long title</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
),
|
||||
};
|
||||
|
||||
export const WithTabPanels: Story = {
|
||||
args: {
|
||||
children: '',
|
||||
},
|
||||
decorators: [withRouter],
|
||||
render: () => (
|
||||
<Tabs>
|
||||
<TabList>
|
||||
<Tab id="tab1">Settings</Tab>
|
||||
<Tab id="tab2">Profile</Tab>
|
||||
<Tab id="tab3">Preferences</Tab>
|
||||
</TabList>
|
||||
<TabPanel id="tab1">
|
||||
<Text>Settings panel content goes here</Text>
|
||||
</TabPanel>
|
||||
<TabPanel id="tab2">
|
||||
<Text>Profile panel content goes here</Text>
|
||||
</TabPanel>
|
||||
<TabPanel id="tab3">
|
||||
<Text>Preferences panel content goes here</Text>
|
||||
</TabPanel>
|
||||
</Tabs>
|
||||
),
|
||||
};
|
||||
@@ -55,15 +82,17 @@ export const WithMockedURLTab2: Story = {
|
||||
render: () => (
|
||||
<MemoryRouter initialEntries={['/tab2']}>
|
||||
<Tabs>
|
||||
<Tab id="tab1" href="/tab1">
|
||||
Tab 1
|
||||
</Tab>
|
||||
<Tab id="tab2" href="/tab2">
|
||||
Tab 2
|
||||
</Tab>
|
||||
<Tab id="tab3" href="/tab3">
|
||||
Tab 3 With long title
|
||||
</Tab>
|
||||
<TabList>
|
||||
<Tab id="tab1" href="/tab1">
|
||||
Tab 1
|
||||
</Tab>
|
||||
<Tab id="tab2" href="/tab2">
|
||||
Tab 2
|
||||
</Tab>
|
||||
<Tab id="tab3" href="/tab3">
|
||||
Tab 3 With long title
|
||||
</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
<Box mt="6" pl="2">
|
||||
<Text>
|
||||
@@ -85,15 +114,17 @@ export const WithMockedURLTab3: Story = {
|
||||
render: () => (
|
||||
<MemoryRouter initialEntries={['/tab3']}>
|
||||
<Tabs>
|
||||
<Tab id="tab1" href="/tab1">
|
||||
Tab 1
|
||||
</Tab>
|
||||
<Tab id="tab2" href="/tab2">
|
||||
Tab 2
|
||||
</Tab>
|
||||
<Tab id="tab3" href="/tab3">
|
||||
Tab 3 With long title
|
||||
</Tab>
|
||||
<TabList>
|
||||
<Tab id="tab1" href="/tab1">
|
||||
Tab 1
|
||||
</Tab>
|
||||
<Tab id="tab2" href="/tab2">
|
||||
Tab 2
|
||||
</Tab>
|
||||
<Tab id="tab3" href="/tab3">
|
||||
Tab 3 With long title
|
||||
</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
<Box mt="6" pl="2">
|
||||
<Text>
|
||||
@@ -115,15 +146,17 @@ export const WithMockedURLNoMatch: Story = {
|
||||
render: () => (
|
||||
<MemoryRouter initialEntries={['/some-other-page']}>
|
||||
<Tabs>
|
||||
<Tab id="tab1" href="/tab1">
|
||||
Tab 1
|
||||
</Tab>
|
||||
<Tab id="tab2" href="/tab2">
|
||||
Tab 2
|
||||
</Tab>
|
||||
<Tab id="tab3" href="/tab3">
|
||||
Tab 3 With long title
|
||||
</Tab>
|
||||
<TabList>
|
||||
<Tab id="tab1" href="/tab1">
|
||||
Tab 1
|
||||
</Tab>
|
||||
<Tab id="tab2" href="/tab2">
|
||||
Tab 2
|
||||
</Tab>
|
||||
<Tab id="tab3" href="/tab3">
|
||||
Tab 3 With long title
|
||||
</Tab>
|
||||
</TabList>
|
||||
</Tabs>
|
||||
<Box mt="6" pl="2">
|
||||
<Text>
|
||||
|
||||
@@ -1,9 +1,4 @@
|
||||
.bui-Tabs {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
/* Initialize CSS variables */
|
||||
--active-tab-left: 0px;
|
||||
--active-tab-right: 0px;
|
||||
@@ -28,8 +23,14 @@
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.bui-TabListWrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bui-Tab {
|
||||
font-size: var(--bui-font-size-3);
|
||||
font-family: var(--bui-font-regular);
|
||||
font-weight: var(--bui-font-weight-regular);
|
||||
color: var(--bui-fg-secondary);
|
||||
height: 36px;
|
||||
display: flex;
|
||||
@@ -55,7 +56,7 @@
|
||||
background-color: var(--bui-fg-primary);
|
||||
border-radius: 4px;
|
||||
transition: left var(--active-transition-duration) ease-out,
|
||||
opacity 0.15s ease-out;
|
||||
opacity 0.15s ease-out, width var(--active-transition-duration) ease-out;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -74,3 +75,8 @@
|
||||
width var(--hovered-transition-duration) ease-out,
|
||||
height var(--hovered-transition-duration) ease-out, opacity 0.15s ease-out;
|
||||
}
|
||||
|
||||
.bui-TabPanel {
|
||||
padding-inline: var(--bui-space-2);
|
||||
padding-top: var(--bui-space-4);
|
||||
}
|
||||
|
||||
@@ -21,39 +21,52 @@ import {
|
||||
cloneElement,
|
||||
isValidElement,
|
||||
ReactNode,
|
||||
createContext,
|
||||
useContext,
|
||||
} from 'react';
|
||||
import type { TabsProps, TabProps } from './types';
|
||||
import type {
|
||||
TabsProps,
|
||||
TabListProps,
|
||||
TabProps,
|
||||
TabPanelProps,
|
||||
TabsContextValue,
|
||||
} from './types';
|
||||
import { useLocation, useNavigate, useHref } from 'react-router-dom';
|
||||
import { HeaderTabsIndicators } from './HeaderTabsIndicators';
|
||||
import { TabsIndicators } from './TabsIndicators';
|
||||
import {
|
||||
Tabs as AriaTabs,
|
||||
TabList as AriaTabList,
|
||||
Tab as AriaTab,
|
||||
TabPanel as AriaTabPanel,
|
||||
RouterProvider,
|
||||
} from 'react-aria-components';
|
||||
|
||||
import { useStyles } from '../../hooks/useStyles';
|
||||
|
||||
const TabsContext = createContext<TabsContextValue | undefined>(undefined);
|
||||
|
||||
const useTabsContext = () => {
|
||||
const context = useContext(TabsContext);
|
||||
if (!context) {
|
||||
throw new Error('Tab components must be used within a Tabs component');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
|
||||
/**
|
||||
* A component that renders a list of tabs.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export const Tabs = (props: TabsProps) => {
|
||||
const { children } = props;
|
||||
const { children, ...rest } = props;
|
||||
const { classNames } = useStyles('Tabs');
|
||||
const tabsRef = useRef<HTMLDivElement>(null);
|
||||
const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());
|
||||
const [hoveredKey, setHoveredKey] = useState<string | null>(null);
|
||||
const prevHoveredKey = useRef<string | null>(null);
|
||||
const location = useLocation();
|
||||
let navigate = useNavigate();
|
||||
|
||||
// If selectedKey is not provided, try to determine it from the current route
|
||||
const computedSelectedKey = (() => {
|
||||
const childrenArray = Children.toArray(children as ReactNode);
|
||||
for (const child of childrenArray) {
|
||||
if (isValidElement(child) && child.props.href === location.pathname) {
|
||||
return child.props.id;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
})();
|
||||
const location = useLocation();
|
||||
|
||||
const setTabRef = (key: string, element: HTMLDivElement | null) => {
|
||||
if (element) {
|
||||
@@ -63,6 +76,70 @@ export const Tabs = (props: TabsProps) => {
|
||||
}
|
||||
};
|
||||
|
||||
// If selectedKey is not provided, try to determine it from the current route
|
||||
const computedSelectedKey = (() => {
|
||||
const childrenArray = Children.toArray(children as ReactNode);
|
||||
for (const child of childrenArray) {
|
||||
if (isValidElement(child) && child.type === TabList) {
|
||||
const tabListChildren = Children.toArray(child.props.children);
|
||||
for (const tabChild of tabListChildren) {
|
||||
if (
|
||||
isValidElement(tabChild) &&
|
||||
tabChild.props.href === location.pathname
|
||||
) {
|
||||
return tabChild.props.id;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
})();
|
||||
|
||||
if (!children) return null;
|
||||
|
||||
const contextValue: TabsContextValue = {
|
||||
tabsRef,
|
||||
tabRefs,
|
||||
hoveredKey,
|
||||
prevHoveredKey,
|
||||
setHoveredKey,
|
||||
setTabRef,
|
||||
};
|
||||
|
||||
return (
|
||||
<TabsContext.Provider value={contextValue}>
|
||||
<RouterProvider navigate={navigate} useHref={useHref}>
|
||||
<AriaTabs
|
||||
className={classNames.tabs}
|
||||
keyboardActivation="manual"
|
||||
selectedKey={computedSelectedKey}
|
||||
ref={tabsRef}
|
||||
{...rest}
|
||||
>
|
||||
{children as ReactNode}
|
||||
</AriaTabs>
|
||||
</RouterProvider>
|
||||
</TabsContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* A component that renders a list of tabs.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export const TabList = (props: TabListProps) => {
|
||||
const { children, ...rest } = props;
|
||||
const { classNames } = useStyles('Tabs');
|
||||
const {
|
||||
setHoveredKey,
|
||||
setTabRef,
|
||||
tabRefs,
|
||||
tabsRef,
|
||||
hoveredKey,
|
||||
prevHoveredKey,
|
||||
} = useTabsContext();
|
||||
|
||||
const handleHover = (key: string | null) => {
|
||||
setHoveredKey(key);
|
||||
};
|
||||
@@ -78,32 +155,32 @@ export const Tabs = (props: TabsProps) => {
|
||||
return child;
|
||||
});
|
||||
|
||||
if (!children) return null;
|
||||
|
||||
return (
|
||||
<RouterProvider navigate={navigate} useHref={useHref}>
|
||||
<AriaTabs
|
||||
className={classNames.tabs}
|
||||
ref={tabsRef}
|
||||
keyboardActivation="manual"
|
||||
selectedKey={computedSelectedKey}
|
||||
<div className={classNames.tabListWrapper}>
|
||||
<AriaTabList
|
||||
className={classNames.tabList}
|
||||
aria-label="Toolbar tabs"
|
||||
{...rest}
|
||||
>
|
||||
<AriaTabList className={classNames.tabList} aria-label="Toolbar tabs">
|
||||
{enhancedChildren}
|
||||
</AriaTabList>
|
||||
<HeaderTabsIndicators
|
||||
tabRefs={tabRefs}
|
||||
tabsRef={tabsRef}
|
||||
hoveredKey={hoveredKey}
|
||||
prevHoveredKey={prevHoveredKey}
|
||||
/>
|
||||
</AriaTabs>
|
||||
</RouterProvider>
|
||||
{enhancedChildren}
|
||||
</AriaTabList>
|
||||
<TabsIndicators
|
||||
tabRefs={tabRefs}
|
||||
tabsRef={tabsRef}
|
||||
hoveredKey={hoveredKey}
|
||||
prevHoveredKey={prevHoveredKey}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* A component that renders a tab.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export const Tab = (props: TabProps) => {
|
||||
const { href, children, id, onHover, onRegister } = props;
|
||||
const { href, children, id, onHover, onRegister, ...rest } = props;
|
||||
const { classNames } = useStyles('Tabs');
|
||||
|
||||
return (
|
||||
@@ -114,8 +191,25 @@ export const Tab = (props: TabProps) => {
|
||||
onHoverStart={() => onHover?.(id as string)}
|
||||
onHoverEnd={() => onHover?.(null)}
|
||||
href={href}
|
||||
{...rest}
|
||||
>
|
||||
{children}
|
||||
</AriaTab>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* A component that renders the content of a tab.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export const TabPanel = (props: TabPanelProps) => {
|
||||
const { children, ...rest } = props;
|
||||
const { classNames } = useStyles('Tabs');
|
||||
|
||||
return (
|
||||
<AriaTabPanel className={classNames.panel} {...rest}>
|
||||
{children}
|
||||
</AriaTabPanel>
|
||||
);
|
||||
};
|
||||
|
||||
+2
-2
@@ -24,9 +24,9 @@ import type { TabsIndicatorsProps } from './types';
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
export const HeaderTabsIndicators = (props: TabsIndicatorsProps) => {
|
||||
export const TabsIndicators = (props: TabsIndicatorsProps) => {
|
||||
const { tabRefs, tabsRef, hoveredKey, prevHoveredKey } = props;
|
||||
const { classNames } = useStyles('Header');
|
||||
const { classNames } = useStyles('Tabs');
|
||||
const state = useContext(TabListStateContext);
|
||||
const prevSelectedKey = useRef<string | null>(null);
|
||||
|
||||
@@ -14,5 +14,5 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export { Tabs, Tab } from './Tabs';
|
||||
export type { TabsProps, TabProps } from './types';
|
||||
export { Tabs, TabList, Tab, TabPanel } from './Tabs';
|
||||
export type { TabsProps, TabListProps, TabProps, TabPanelProps } from './types';
|
||||
|
||||
@@ -17,6 +17,8 @@
|
||||
import type {
|
||||
TabProps as AriaTabProps,
|
||||
TabsProps as AriaTabsProps,
|
||||
TabListProps as AriaTabListProps,
|
||||
TabPanelProps as AriaTabPanelProps,
|
||||
} from 'react-aria-components';
|
||||
import { MutableRefObject } from 'react';
|
||||
|
||||
@@ -27,6 +29,26 @@ import { MutableRefObject } from 'react';
|
||||
*/
|
||||
export interface TabsProps extends AriaTabsProps {}
|
||||
|
||||
/**
|
||||
* Props for the TabList component.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export interface TabListProps extends Omit<AriaTabListProps<object>, 'items'> {}
|
||||
|
||||
/** Context for sharing refs between Tabs and TabList
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
export interface TabsContextValue {
|
||||
tabsRef: React.RefObject<HTMLDivElement>;
|
||||
tabRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
|
||||
hoveredKey: string | null;
|
||||
prevHoveredKey: React.MutableRefObject<string | null>;
|
||||
setHoveredKey: (key: string | null) => void;
|
||||
setTabRef: (key: string, element: HTMLDivElement | null) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Props for the Tab component.
|
||||
*
|
||||
@@ -37,6 +59,13 @@ export interface TabProps extends AriaTabProps {
|
||||
onRegister?: (key: string, element: HTMLDivElement | null) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Props for the TabPanel component.
|
||||
*
|
||||
* @public
|
||||
*/
|
||||
export interface TabPanelProps extends AriaTabPanelProps {}
|
||||
|
||||
/**
|
||||
* Props for the TabsIndicators component.
|
||||
*
|
||||
@@ -48,3 +77,17 @@ export interface TabsIndicatorsProps {
|
||||
hoveredKey: string | null;
|
||||
prevHoveredKey: MutableRefObject<string | null>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Context value for sharing refs and state between Tabs and TabList components.
|
||||
*
|
||||
* @internal
|
||||
*/
|
||||
export interface TabsContextValue {
|
||||
tabsRef: React.RefObject<HTMLDivElement>;
|
||||
tabRefs: React.MutableRefObject<Map<string, HTMLDivElement>>;
|
||||
hoveredKey: string | null;
|
||||
prevHoveredKey: React.MutableRefObject<string | null>;
|
||||
setHoveredKey: (key: string | null) => void;
|
||||
setTabRef: (key: string, element: HTMLDivElement | null) => void;
|
||||
}
|
||||
|
||||
@@ -241,6 +241,7 @@ export const componentDefinitions = {
|
||||
classNames: {
|
||||
tabs: 'bui-Tabs',
|
||||
tabList: 'bui-TabList',
|
||||
tabListWrapper: 'bui-TabListWrapper',
|
||||
tab: 'bui-Tab',
|
||||
tabActive: 'bui-TabActive',
|
||||
tabHovered: 'bui-TabHovered',
|
||||
|
||||
Reference in New Issue
Block a user