+ );
+};
diff --git a/src/components/TabStepper/index.ts b/src/components/TabStepper/index.ts
new file mode 100644
index 000000000..d8d7a2e7a
--- /dev/null
+++ b/src/components/TabStepper/index.ts
@@ -0,0 +1,3 @@
+export { default } from './TabStepper';
+export * from './components';
+export * from './types';
diff --git a/src/components/TabStepper/types.ts b/src/components/TabStepper/types.ts
new file mode 100644
index 000000000..f75edf3fa
--- /dev/null
+++ b/src/components/TabStepper/types.ts
@@ -0,0 +1,35 @@
+import type { CSSObject } from '@emotion/react';
+import type { AriaAttributes } from 'react';
+
+import type { TabsProps } from '../Tabs';
+
+import type { TestProps } from '~/utils/types';
+
+export type TabStepItem = {
+ /** A unique id for the tab step item */
+ id: string;
+ /** The title of the step */
+ title?: string;
+ /** The subtitle of the step */
+ subtitle?: string;
+ /** The status of the step */
+ status?: 'pending' | 'done' | 'warning';
+};
+
+export type StepperProps = {
+ /** The items (steps) */
+ items: TabStepItem[];
+ children?: any;
+} & Pick &
+ TestProps;
+
+export type TabStepProps = {
+ children?: any;
+} & TabStepItem &
+ TestProps;
+
+export type TabStepListProps = {
+ /** Style overrides for TabSteps */
+ sx?: CSSObject;
+ children: any;
+} & AriaAttributes;
diff --git a/src/components/TabStepper/utils/TabStepperStoryComponents.tsx b/src/components/TabStepper/utils/TabStepperStoryComponents.tsx
new file mode 100644
index 000000000..e215ccd1d
--- /dev/null
+++ b/src/components/TabStepper/utils/TabStepperStoryComponents.tsx
@@ -0,0 +1,4 @@
+import type { TabStepItem } from '../types';
+
+/** This is just a dummy component to be used in Storybook for showing the TabItem type on props */
+export const TabStepItemStory: React.FC = () => null;
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
index ce2fee268..766ce2450 100644
--- a/src/components/Tabs/Tabs.stories.tsx
+++ b/src/components/Tabs/Tabs.stories.tsx
@@ -50,7 +50,7 @@ export const TabsWithContent = {
items={getItems(false)}
>
{Object.keys(content).map((friend) => (
-
+
{content[friend]}
))}
@@ -81,7 +81,7 @@ export const TabsOrientation = {
items={getItems(false)}
>
{Object.keys(content).map((friend) => (
-
+
{content[friend]}
))}
@@ -109,7 +109,7 @@ export const TabsWithCounter = {
items={getItems(true)}
>
{Object.keys(content).map((friend) => (
-
+
{content[friend]}
))}
@@ -140,7 +140,7 @@ export const Playground = {
items={getItems(hasCounter)}
>
{Object.keys(content).map((friend) => (
-
+
{content[friend]}
))}
diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
index 1803c288a..981200e30 100644
--- a/src/components/Tabs/Tabs.tsx
+++ b/src/components/Tabs/Tabs.tsx
@@ -29,7 +29,7 @@ const Tabs = React.forwardRef((props, ref) => {
const isActive = id === selectedKey;
return (
-
+ {label}
{Boolean(counter) && (
//
-
+
Tab 1
-
+
Tab 2
-
+
Tab 3
//
diff --git a/src/components/Tabs/components/Tab/Tab.tsx b/src/components/Tabs/components/Tab/Tab.tsx
index abd3ff432..2b8763131 100644
--- a/src/components/Tabs/components/Tab/Tab.tsx
+++ b/src/components/Tabs/components/Tab/Tab.tsx
@@ -5,10 +5,10 @@ import { containerStyles } from './Tab.style';
import type { TabProps } from '../../types';
const Tab = React.forwardRef((props, ref) => {
- const { children, tabId, ...rest } = props;
+ const { children, ...rest } = props;
return (
-
+
{children}
);
diff --git a/src/components/Tabs/components/TabList/TabList.mdx b/src/components/Tabs/components/TabList/TabList.mdx
index d4e45444f..21130bc1c 100644
--- a/src/components/Tabs/components/TabList/TabList.mdx
+++ b/src/components/Tabs/components/TabList/TabList.mdx
@@ -46,13 +46,13 @@ Use the TabList to add aria-label and style overrides.
// onSelectionChange={setSelectedKey}
// >
- //
+ //
// Tab 1
//
- //
+ //
// Tab 2
//
- //
+ //
// Tab 3
//
diff --git a/src/components/Tabs/components/TabPanel/TabPanel.mdx b/src/components/Tabs/components/TabPanel/TabPanel.mdx
index 9d7d22c6c..ccb919736 100644
--- a/src/components/Tabs/components/TabPanel/TabPanel.mdx
+++ b/src/components/Tabs/components/TabPanel/TabPanel.mdx
@@ -24,7 +24,7 @@ TabPanel component is used to conditionally render the content that corresponds
Use TabPanels as children of (monolith) Tabs or under Tab components in a composition to toggle content when selecting tabs.
-The tabId should be the same as in the Tab component that the TabPanel corresponds to
+The id should be the same as in the Tab component that the TabPanel corresponds to
```js
const [selectedKey, setSelectedKey] = React.useState('tab_1');
@@ -36,18 +36,18 @@ Use TabPanels as children of (monolith) Tabs or under Tab components in a compos
// onSelectionChange={setSelectedKey}
// >
//
- //
+ //
// Tab 1
//
- //
+ //
// Tab 2
//
- //
+ //
// Tab 3
//
- This is Tab 1 content
- This is Tab 2 content
- This is Tab 3 content
+ This is Tab 1 content
+ This is Tab 2 content
+ This is Tab 3 content
//
//
diff --git a/src/components/Tabs/components/TabPanel/TabPanel.tsx b/src/components/Tabs/components/TabPanel/TabPanel.tsx
index 690b6672c..21d9ad7ec 100644
--- a/src/components/Tabs/components/TabPanel/TabPanel.tsx
+++ b/src/components/Tabs/components/TabPanel/TabPanel.tsx
@@ -4,10 +4,10 @@ import { TabPanel as ReactAriaTabPanel } from 'react-aria-components';
import type { TabPanelProps } from '../../types';
const TabPanel = React.forwardRef((props, ref) => {
- const { children, tabId, ...rest } = props;
+ const { children, ...rest } = props;
return (
-
+
{children}
);
diff --git a/src/components/Tabs/components/TabsContainer/TabsContainer.mdx b/src/components/Tabs/components/TabsContainer/TabsContainer.mdx
index f53c4e2c5..af3b1811f 100644
--- a/src/components/Tabs/components/TabsContainer/TabsContainer.mdx
+++ b/src/components/Tabs/components/TabsContainer/TabsContainer.mdx
@@ -14,7 +14,7 @@ import TabsContainer from './TabsContainer';
## Overview
-TabsContainer is the root component of the Tabs. It contains the orientation and selection states.
+TabsContainer is the root component of the Tabs and TabStepper. It contains the orientation and selection states.
## Props
@@ -24,10 +24,12 @@ TabsContainer is the root component of the Tabs. It contains the orientation and
Use a state for the selectedKey and pass the state as props to TabsContainer
+### Tabs
+
Check also [TabsList](../?path=/docs/updated-components-tabs-components-tablist--overview) and
[Tab](../?path=/docs/updated-components-tabs-components-tab--overview) as they are needed for the
- implementation.
+ implementation of Tabs
```js
@@ -40,16 +42,48 @@ Use a state for the selectedKey and pass the state as props to TabsContainer
onSelectionChange={setSelectedKey}
>
//
- //
+ //
// Tab 1
//
- //
+ //
// Tab 2
//
- //
+ //
// Tab 3
//
//
```
+
+### TabStepper
+
+
+ Check also [TabStepList](../?path=/docs/updated-components-tabs-components-tabsteplist--overview)
+ and [TabStep](../?path=/docs/updated-components-tabs-components-tabstep--overview) as they are
+ needed for the implementation of TabStepper
+
+
+```js
+ const [selectedKey, setSelectedKey] = React.useState('step_1');
+
+ return (
+
+ //
+ //
+ // Tab 1
+ //
+ //
+ // Tab 2
+ //
+ //
+ // Tab 3
+ //
+ //
+
+
+```
diff --git a/src/components/Tabs/components/TabsContainer/TabsContainer.style.ts b/src/components/Tabs/components/TabsContainer/TabsContainer.style.ts
index 88e640678..487b58d90 100644
--- a/src/components/Tabs/components/TabsContainer/TabsContainer.style.ts
+++ b/src/components/Tabs/components/TabsContainer/TabsContainer.style.ts
@@ -3,7 +3,9 @@ import { css } from '@emotion/react';
import type { TabOrientation } from '../../types';
export const tabsContainerStyles = (orientation: TabOrientation) => css`
- width: fit-content;
display: flex;
flex-direction: ${orientation === 'horizontal' ? 'column' : 'row'};
+
+ ${orientation === 'horizontal' && `width: fit-content;`}
+ ${orientation === 'vertical' && `height: fit-content;`}
`;
diff --git a/src/components/Tabs/types.ts b/src/components/Tabs/types.ts
index 32713329e..39cd75940 100644
--- a/src/components/Tabs/types.ts
+++ b/src/components/Tabs/types.ts
@@ -9,7 +9,7 @@ export type { Orientation as TabOrientation } from 'react-aria';
export type { Key as TabKey } from 'react-aria-components';
export type TabItem = {
- /** A unique if for the tab item */
+ /** A unique id for the tab item */
id: string;
/** The label of the tab */
label: string;
@@ -32,7 +32,7 @@ export type TabsProps = {
export type TabsContainerProps = {
/** The orientation of the Tab */
- orientation: TabOrientation;
+ orientation?: TabOrientation;
/** The id of the selected tab */
selectedKey: TabKey;
/** Callback to change the selected tab */
@@ -42,7 +42,7 @@ export type TabsContainerProps = {
export type TabProps = {
/** The id of the tab; it's also used as an indicator of the tab when using selection state */
- tabId?: string;
+ id: string;
children: any;
};
@@ -54,7 +54,7 @@ export type TabListProps = {
export type TabPanelProps = {
/** The id of the tab the content corresponds to */
- tabId: string;
+ id: string;
/** The content of the tab panel */
children: any;
};
diff --git a/src/index.ts b/src/index.ts
index 26f1c42c1..36ff9c062 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -103,6 +103,8 @@ export { default as Tag } from './components/Tag';
export * from './components/Tag';
export { default as Tabs } from './components/Tabs';
export * from './components/Tabs';
+export { default as TabStepper } from './components/TabStepper';
+export * from './components/TabStepper';
export { default as TextField } from './components/TextField';
export * from './components/TextField';
export { default as Search } from './components/Search';