From b98b2dfa66fed1d3f7bd61880a44991544bd3f03 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Wed, 15 Apr 2026 13:31:18 +0200 Subject: [PATCH 1/2] feat(react-headless-components-preview): add TabList and Tab headless components - Add headless TabList and Tab components (using react-tabs base hooks) - Export TabBaseProps, TabBaseState, TabListBaseProps, TabListBaseState from react-tabs - Add focusgroup polyfill for keyboard navigation support - Add changefile for both @fluentui/react-tabs and @fluentui/react-headless-components-preview Co-Authored-By: Claude Sonnet 4.6 --- ...-dd443784-a42b-4755-961c-0fb3e7583bb4.json | 7 +++ ...-3504d094-24c6-4586-b3f3-56ffc4509a08.json | 7 +++ .../react-headless-components-preview.api.md | 56 +++++++++++++++++++ .../library/package.json | 5 ++ .../library/src/TabList.ts | 10 ++++ .../src/components/TabList/Tab/Tab.tsx | 18 ++++++ .../src/components/TabList/Tab/Tab.types.ts | 13 +++++ .../src/components/TabList/Tab/index.ts | 4 ++ .../src/components/TabList/Tab/renderTab.tsx | 6 ++ .../src/components/TabList/Tab/useTab.ts | 23 ++++++++ .../src/components/TabList/TabList.test.tsx | 46 +++++++++++++++ .../src/components/TabList/TabList.tsx | 20 +++++++ .../src/components/TabList/TabList.types.ts | 34 +++++++++++ .../library/src/components/TabList/index.ts | 7 +++ .../src/components/TabList/renderTabList.tsx | 6 ++ .../src/components/TabList/useTabList.ts | 21 +++++++ .../TabList/useTabListContextValues.ts | 9 +++ .../library/src/index.ts | 3 + .../stories/.storybook/preview.js | 4 ++ .../src/TabList/TabListDefault.stories.tsx | 33 +++++++++++ .../stories/src/TabList/TabListDescription.md | 3 + .../stories/src/TabList/index.stories.tsx | 17 ++++++ .../react-tabs/library/etc/react-tabs.api.md | 6 ++ .../react-tabs/library/src/index.ts | 2 +- 24 files changed, 359 insertions(+), 1 deletion(-) create mode 100644 change/@fluentui-react-headless-components-preview-dd443784-a42b-4755-961c-0fb3e7583bb4.json create mode 100644 change/@fluentui-react-tabs-3504d094-24c6-4586-b3f3-56ffc4509a08.json create mode 100644 packages/react-components/react-headless-components-preview/library/src/TabList.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/renderTab.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/useTab.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.test.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.types.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/index.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/renderTabList.tsx create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabList.ts create mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabListContextValues.ts create mode 100644 packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDefault.stories.tsx create mode 100644 packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDescription.md create mode 100644 packages/react-components/react-headless-components-preview/stories/src/TabList/index.stories.tsx diff --git a/change/@fluentui-react-headless-components-preview-dd443784-a42b-4755-961c-0fb3e7583bb4.json b/change/@fluentui-react-headless-components-preview-dd443784-a42b-4755-961c-0fb3e7583bb4.json new file mode 100644 index 0000000000000..254556eb9c587 --- /dev/null +++ b/change/@fluentui-react-headless-components-preview-dd443784-a42b-4755-961c-0fb3e7583bb4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: add TabList and Tab headless components", + "packageName": "@fluentui/react-headless-components-preview", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-tabs-3504d094-24c6-4586-b3f3-56ffc4509a08.json b/change/@fluentui-react-tabs-3504d094-24c6-4586-b3f3-56ffc4509a08.json new file mode 100644 index 0000000000000..2bf568673c9d8 --- /dev/null +++ b/change/@fluentui-react-tabs-3504d094-24c6-4586-b3f3-56ffc4509a08.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "fix: export base hook types", + "packageName": "@fluentui/react-tabs", + "email": "dmytrokirpa@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md b/packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md index b20d9b2f1f00a..5b4b64256e6b5 100644 --- a/packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md +++ b/packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md @@ -27,6 +27,14 @@ import { ContextSelector } from '@fluentui/react-context-selector'; import type { DividerBaseProps } from '@fluentui/react-divider'; import { DividerBaseState } from '@fluentui/react-divider'; import type { DividerSlots as DividerSlots_2 } from '@fluentui/react-divider'; +import type { TabBaseProps } from '@fluentui/react-tabs'; +import { TabBaseState } from '@fluentui/react-tabs'; +import type { TabListBaseProps } from '@fluentui/react-tabs'; +import { TabListBaseState } from '@fluentui/react-tabs'; +import { TabListContextValues } from '@fluentui/react-tabs'; +import type { TabListSlots as TabListSlots_2 } from '@fluentui/react-tabs'; +import { TabSlots } from '@fluentui/react-tabs'; +import { TabValue } from '@fluentui/react-tabs'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { JSXElement } from '@fluentui/react-utilities'; import type * as React_2 from 'react'; @@ -109,6 +117,12 @@ export type DividerState = DividerBaseState; // @public export const renderAccordion: (state: AccordionBaseState, contextValues: AccordionContextValues_2) => JSXElement; +// @public +export const renderTab: (state: TabBaseState) => JSXElement; + +// @public +export const renderTabList: (state: TabListBaseState, contextValues: TabListContextValues) => JSXElement; + // @public export const renderAccordionHeader: (state: AccordionHeaderBaseState, contextValues: AccordionHeaderContextValues) => JSXElement; @@ -148,6 +162,48 @@ export const useButton: (props: ButtonProps, ref: React_2.Ref) => DividerState; +// @public +export const Tab: ForwardRefComponent; + +// @public +export const TabList: ForwardRefComponent; + +// @public +export type TabListProps = TabListBaseProps; + +// @public +export type TabListSlots = TabListSlots_2; + +// @public +export type TabListState = TabListBaseState & { + root: { + focusgroup?: string; + 'data-orientation'?: 'vertical' | 'horizontal'; + }; +}; + +// @public (undocumented) +export type TabProps = TabBaseProps; + +export { TabSlots } + +// @public (undocumented) +export type TabState = TabBaseState & { + root: { + focusgroupstart?: string; + 'data-icon-only'?: string; + 'data-selected'?: string; + }; +}; + +export { TabValue } + +// @public +export const useTab: (props: TabProps, ref: React_2.Ref) => TabState; + +// @public +export const useTabList: (props: TabListProps, ref: React_2.Ref) => TabListState; + // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-headless-components-preview/library/package.json b/packages/react-components/react-headless-components-preview/library/package.json index 5de707fdcb733..fa2eeea21d960 100644 --- a/packages/react-components/react-headless-components-preview/library/package.json +++ b/packages/react-components/react-headless-components-preview/library/package.json @@ -24,10 +24,15 @@ "@fluentui/react-divider": "^9.7.0", "@fluentui/react-jsx-runtime": "^9.4.1", "@fluentui/react-shared-contexts": "^9.26.2", + "@fluentui/react-tabs": "^9.11.2", "@fluentui/react-utilities": "^9.26.2", "@swc/helpers": "^0.5.1" }, + "devDependencies": { + "@microsoft/focusgroup-polyfill": "^1.2.1" + }, "peerDependencies": { + "@microsoft/focusgroup-polyfill": "^1.2.1", "@types/react": ">=16.14.0 <20.0.0", "@types/react-dom": ">=16.9.0 <20.0.0", "react": ">=16.14.0 <20.0.0", diff --git a/packages/react-components/react-headless-components-preview/library/src/TabList.ts b/packages/react-components/react-headless-components-preview/library/src/TabList.ts new file mode 100644 index 0000000000000..e8339b88f812b --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/TabList.ts @@ -0,0 +1,10 @@ +export { Tab, renderTab, useTab, TabList, renderTabList, useTabList } from './components/TabList/index'; +export type { + TabSlots, + TabValue, + TabProps, + TabState, + TabListSlots, + TabListProps, + TabListState, +} from './components/TabList/index'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.tsx new file mode 100644 index 0000000000000..fa044bbfff0b2 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.tsx @@ -0,0 +1,18 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TabProps } from './Tab.types'; +import { useTab } from './useTab'; +import { renderTab } from './renderTab'; + +/** + * A tab component for organizing content. + */ +export const Tab: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTab(props, ref); + + return renderTab(state); +}); + +Tab.displayName = 'Tab'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.types.ts new file mode 100644 index 0000000000000..72b41ffc51e2a --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.types.ts @@ -0,0 +1,13 @@ +export type { TabSlots, TabValue } from '@fluentui/react-tabs'; + +import type { TabBaseProps, TabBaseState } from '@fluentui/react-tabs'; + +export type TabProps = TabBaseProps; + +export type TabState = TabBaseState & { + root: { + focusgroupstart?: string; + 'data-icon-only'?: string; + 'data-selected'?: string; + }; +}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/index.ts new file mode 100644 index 0000000000000..08ead275c3335 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/index.ts @@ -0,0 +1,4 @@ +export type { TabSlots, TabValue, TabProps, TabState } from './Tab.types'; +export { Tab } from './Tab'; +export { renderTab } from './renderTab'; +export { useTab } from './useTab'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/renderTab.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/renderTab.tsx new file mode 100644 index 0000000000000..68322a8d4542e --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/renderTab.tsx @@ -0,0 +1,6 @@ +import { renderTab_unstable } from '@fluentui/react-tabs'; + +/** + * Renders the final JSX of the Tab component, given the state. + */ +export const renderTab = renderTab_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/useTab.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/useTab.ts new file mode 100644 index 0000000000000..0b19cb6433db3 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/useTab.ts @@ -0,0 +1,23 @@ +'use client'; + +import type * as React from 'react'; +import { useTabBase_unstable } from '@fluentui/react-tabs'; + +import type { TabProps, TabState } from './Tab.types'; +import { stringifyDataAttribute } from '../../../utils'; + +/** + * Returns the state for a Tab component, given its props and ref. + * The returned state can be modified with hooks before being passed to `renderTab`. + */ +export const useTab = (props: TabProps, ref: React.Ref): TabState => { + 'use no memo'; + + const state: TabState = useTabBase_unstable(props, ref); + + state.root.focusgroupstart = stringifyDataAttribute(state.selected); + state.root['data-icon-only'] = stringifyDataAttribute(state.iconOnly); + state.root['data-selected'] = stringifyDataAttribute(state.selected); + + return state; +}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.test.tsx new file mode 100644 index 0000000000000..dadc54e7f2fbc --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.test.tsx @@ -0,0 +1,46 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { isConformant } from '../../testing/isConformant'; +import { TabList } from './TabList'; +import { Tab } from './Tab'; + +describe('TabList', () => { + isConformant({ + Component: TabList, + displayName: 'TabList', + }); + + it('renders a default state', () => { + const { getByRole, getAllByRole } = render( + + Tab 1 + Tab 2 + Tab 3 + , + ); + const tablist = getByRole('tablist'); + + expect(tablist).toBeInTheDocument(); + expect(tablist).toHaveAttribute('data-orientation', 'horizontal'); + expect(tablist).toHaveAttribute('focusgroup', 'tablist inline wrap no-memory'); + + const tabs = getAllByRole('tab'); + + expect(tabs).toHaveLength(3); + expect(tabs[0]).toHaveAttribute('data-selected'); + }); + + it('renders with vertical orientation', () => { + const { getByRole } = render( + + Tab 1 + Tab 2 + Tab 3 + , + ); + const tablist = getByRole('tablist'); + + expect(tablist).toHaveAttribute('data-orientation', 'vertical'); + expect(tablist).toHaveAttribute('focusgroup', 'tablist block wrap no-memory'); + }); +}); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.tsx new file mode 100644 index 0000000000000..d5fbd91a6b810 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.tsx @@ -0,0 +1,20 @@ +'use client'; + +import * as React from 'react'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; +import type { TabListProps } from './TabList.types'; +import { useTabList } from './useTabList'; +import { useTabListContextValues } from './useTabListContextValues'; +import { renderTabList } from './renderTabList'; + +/** + * A tab list component for organizing content. + */ +export const TabList: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTabList(props, ref); + const contextValues = useTabListContextValues(state); + + return renderTabList(state, contextValues); +}); + +TabList.displayName = 'TabList'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.types.ts new file mode 100644 index 0000000000000..d02dcc4c429ad --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.types.ts @@ -0,0 +1,34 @@ +import type { + TabListSlots as TabListBaseSlots, + TabListBaseProps, + TabListBaseState, + TabListContextValues as TabListContextValuesBase, +} from '@fluentui/react-tabs'; + +/** + * TabList component slots + */ +export type TabListSlots = TabListBaseSlots; + +/** + * TabList component props + */ +export type TabListProps = TabListBaseProps; + +/** + * TabList component state + */ +export type TabListState = TabListBaseState & { + root: { + focusgroup?: string; + /** + * Data attribute set to reflect the orientation of the tab list. Value is 'vertical' or 'horizontal'. + */ + 'data-orientation'?: 'vertical' | 'horizontal'; + }; +}; + +/** + * TabList component context values + */ +export type TabListContextValues = TabListContextValuesBase; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/index.ts new file mode 100644 index 0000000000000..6b35fd5593fd0 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/index.ts @@ -0,0 +1,7 @@ +export type { TabProps, TabValue, TabSlots, TabState } from './Tab'; +export { Tab, renderTab, useTab } from './Tab'; + +export { TabList } from './TabList'; +export { renderTabList } from './renderTabList'; +export { useTabList } from './useTabList'; +export type { TabListSlots, TabListProps, TabListState } from './TabList.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/renderTabList.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/renderTabList.tsx new file mode 100644 index 0000000000000..9d601f590a86d --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/renderTabList.tsx @@ -0,0 +1,6 @@ +import { renderTabList_unstable } from '@fluentui/react-tabs'; + +/** + * Renders the final JSX of the TabList component, given the state. + */ +export const renderTabList = renderTabList_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabList.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabList.ts new file mode 100644 index 0000000000000..73faa95eaebd7 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabList.ts @@ -0,0 +1,21 @@ +'use client'; + +import type * as React from 'react'; +import { useTabListBase_unstable } from '@fluentui/react-tabs'; + +import type { TabListProps, TabListState } from './TabList.types'; + +/** + * Returns the state for a TabList component, given its props and ref. + * The returned state can be modified with hooks before being passed to `renderTabList`. + */ +export const useTabList = (props: TabListProps, ref: React.Ref): TabListState => { + 'use no memo'; + + const state: TabListState = useTabListBase_unstable(props, ref); + + state.root.focusgroup = state.vertical ? 'tablist block wrap no-memory' : 'tablist inline wrap no-memory'; + state.root['data-orientation'] = state.vertical ? 'vertical' : 'horizontal'; + + return state; +}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabListContextValues.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabListContextValues.ts new file mode 100644 index 0000000000000..f896b23be18a8 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabListContextValues.ts @@ -0,0 +1,9 @@ +'use client'; + +import { useTabListContextValues_unstable } from '@fluentui/react-tabs'; + +import type { TabListContextValues, TabListState } from './TabList.types'; + +export const useTabListContextValues = useTabListContextValues_unstable as ( + state: TabListState, +) => TabListContextValues; diff --git a/packages/react-components/react-headless-components-preview/library/src/index.ts b/packages/react-components/react-headless-components-preview/library/src/index.ts index 86d0be8436361..897caa5b43a6c 100644 --- a/packages/react-components/react-headless-components-preview/library/src/index.ts +++ b/packages/react-components/react-headless-components-preview/library/src/index.ts @@ -35,3 +35,6 @@ export type { ButtonSlots, ButtonProps, ButtonState } from './Button'; export { Divider, renderDivider, useDivider } from './Divider'; export type { DividerSlots, DividerProps, DividerState } from './Divider'; + +export { Tab, renderTab, useTab, TabList, renderTabList, useTabList } from './TabList'; +export type { TabSlots, TabValue, TabProps, TabState, TabListSlots, TabListProps, TabListState } from './TabList'; diff --git a/packages/react-components/react-headless-components-preview/stories/.storybook/preview.js b/packages/react-components/react-headless-components-preview/stories/.storybook/preview.js index 98274ed0b8095..c9e29de4bb968 100644 --- a/packages/react-components/react-headless-components-preview/stories/.storybook/preview.js +++ b/packages/react-components/react-headless-components-preview/stories/.storybook/preview.js @@ -1,5 +1,9 @@ +import { polyfillBodyAndObserve } from '@microsoft/focusgroup-polyfill/shadowless'; + import * as rootPreview from '../../../../../.storybook/preview'; +polyfillBodyAndObserve(); + /** @type {typeof rootPreview.decorators} */ export const decorators = [...rootPreview.decorators]; diff --git a/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDefault.stories.tsx new file mode 100644 index 0000000000000..b5b44129f4cf6 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDefault.stories.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; +import { TabList, Tab } from '@fluentui/react-headless-components-preview'; + +const tabs = [ + { value: 'account', label: 'Account', content: 'Manage your account settings and preferences.' }, + { value: 'security', label: 'Security', content: 'Update your password and configure two-factor authentication.' }, + { value: 'notifications', label: 'Notifications', content: 'Choose what you are notified about and how.' }, +]; + +export const Default = (): React.ReactNode => { + const [selected, setSelected] = React.useState('account'); + + return ( +
+ setSelected(data.value as string)} + className="flex border-b border-gray-200" + > + {tabs.map(tab => ( + + {tab.label} + + ))} + +
{tabs.find(t => t.value === selected)?.content}
+
+ ); +}; diff --git a/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDescription.md b/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDescription.md new file mode 100644 index 0000000000000..3a8fbe0bc354b --- /dev/null +++ b/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDescription.md @@ -0,0 +1,3 @@ +A tab list organizes related content into navigable sections, showing one panel at a time. + +Use `TabList` when you have two or more distinct views of the same subject — such as Overview, Settings, and Activity — and users need to switch between them. Keep tab labels short and use nouns rather than verbs. Avoid using tabs to replace multi-step workflows; use a stepper or wizard pattern instead. diff --git a/packages/react-components/react-headless-components-preview/stories/src/TabList/index.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TabList/index.stories.tsx new file mode 100644 index 0000000000000..3a9b7aafc57f3 --- /dev/null +++ b/packages/react-components/react-headless-components-preview/stories/src/TabList/index.stories.tsx @@ -0,0 +1,17 @@ +import { TabList } from '@fluentui/react-headless-components-preview'; + +import descriptionMd from './TabListDescription.md'; + +export { Default } from './TabListDefault.stories'; + +export default { + title: 'Headless Components/TabList', + component: TabList, + parameters: { + docs: { + description: { + component: descriptionMd, + }, + }, + }, +}; diff --git a/packages/react-components/react-tabs/library/etc/react-tabs.api.md b/packages/react-components/react-tabs/library/etc/react-tabs.api.md index 7cec0cad86090..16a4e4b9d5836 100644 --- a/packages/react-components/react-tabs/library/etc/react-tabs.api.md +++ b/packages/react-components/react-tabs/library/etc/react-tabs.api.md @@ -40,6 +40,12 @@ export type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) // @public export const Tab: ForwardRefComponent; +// @public (undocumented) +export type TabBaseProps = Omit; + +// @public (undocumented) +export type TabBaseState = Omit; + // @public (undocumented) export const tabClassNames: SlotClassNames; diff --git a/packages/react-components/react-tabs/library/src/index.ts b/packages/react-components/react-tabs/library/src/index.ts index d4491beb81e15..3eba8787ef956 100644 --- a/packages/react-components/react-tabs/library/src/index.ts +++ b/packages/react-components/react-tabs/library/src/index.ts @@ -1,4 +1,4 @@ -export type { TabProps, TabSlots, TabState, TabValue } from './Tab'; +export type { TabProps, TabSlots, TabState, TabValue, TabBaseProps, TabBaseState } from './Tab'; export { renderTab_unstable, Tab, From a94d3379fdc9c3cc535357ce86a9be7837a5bcb7 Mon Sep 17 00:00:00 2001 From: Dmytro Kirpa Date: Wed, 15 Apr 2026 13:37:58 +0200 Subject: [PATCH 2/2] chore: keep only react-tabs package changes in this PR MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove headless-components-preview TabList/Tab changes — those belong in #35988. Co-Authored-By: Claude Sonnet 4.6 --- ...-dd443784-a42b-4755-961c-0fb3e7583bb4.json | 7 --- .../react-headless-components-preview.api.md | 56 ------------------- .../library/package.json | 5 -- .../library/src/TabList.ts | 10 ---- .../src/components/TabList/Tab/Tab.tsx | 18 ------ .../src/components/TabList/Tab/Tab.types.ts | 13 ----- .../src/components/TabList/Tab/index.ts | 4 -- .../src/components/TabList/Tab/renderTab.tsx | 6 -- .../src/components/TabList/Tab/useTab.ts | 23 -------- .../src/components/TabList/TabList.test.tsx | 46 --------------- .../src/components/TabList/TabList.tsx | 20 ------- .../src/components/TabList/TabList.types.ts | 34 ----------- .../library/src/components/TabList/index.ts | 7 --- .../src/components/TabList/renderTabList.tsx | 6 -- .../src/components/TabList/useTabList.ts | 21 ------- .../TabList/useTabListContextValues.ts | 9 --- .../library/src/index.ts | 3 - .../stories/.storybook/preview.js | 4 -- .../src/TabList/TabListDefault.stories.tsx | 33 ----------- .../stories/src/TabList/TabListDescription.md | 3 - .../stories/src/TabList/index.stories.tsx | 17 ------ 21 files changed, 345 deletions(-) delete mode 100644 change/@fluentui-react-headless-components-preview-dd443784-a42b-4755-961c-0fb3e7583bb4.json delete mode 100644 packages/react-components/react-headless-components-preview/library/src/TabList.ts delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.tsx delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.types.ts delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/index.ts delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/renderTab.tsx delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/useTab.ts delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.test.tsx delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.tsx delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.types.ts delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/index.ts delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/renderTabList.tsx delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabList.ts delete mode 100644 packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabListContextValues.ts delete mode 100644 packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDefault.stories.tsx delete mode 100644 packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDescription.md delete mode 100644 packages/react-components/react-headless-components-preview/stories/src/TabList/index.stories.tsx diff --git a/change/@fluentui-react-headless-components-preview-dd443784-a42b-4755-961c-0fb3e7583bb4.json b/change/@fluentui-react-headless-components-preview-dd443784-a42b-4755-961c-0fb3e7583bb4.json deleted file mode 100644 index 254556eb9c587..0000000000000 --- a/change/@fluentui-react-headless-components-preview-dd443784-a42b-4755-961c-0fb3e7583bb4.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "patch", - "comment": "feat: add TabList and Tab headless components", - "packageName": "@fluentui/react-headless-components-preview", - "email": "dmytrokirpa@microsoft.com", - "dependentChangeType": "patch" -} diff --git a/packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md b/packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md index 5b4b64256e6b5..b20d9b2f1f00a 100644 --- a/packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md +++ b/packages/react-components/react-headless-components-preview/library/etc/react-headless-components-preview.api.md @@ -27,14 +27,6 @@ import { ContextSelector } from '@fluentui/react-context-selector'; import type { DividerBaseProps } from '@fluentui/react-divider'; import { DividerBaseState } from '@fluentui/react-divider'; import type { DividerSlots as DividerSlots_2 } from '@fluentui/react-divider'; -import type { TabBaseProps } from '@fluentui/react-tabs'; -import { TabBaseState } from '@fluentui/react-tabs'; -import type { TabListBaseProps } from '@fluentui/react-tabs'; -import { TabListBaseState } from '@fluentui/react-tabs'; -import { TabListContextValues } from '@fluentui/react-tabs'; -import type { TabListSlots as TabListSlots_2 } from '@fluentui/react-tabs'; -import { TabSlots } from '@fluentui/react-tabs'; -import { TabValue } from '@fluentui/react-tabs'; import type { ForwardRefComponent } from '@fluentui/react-utilities'; import { JSXElement } from '@fluentui/react-utilities'; import type * as React_2 from 'react'; @@ -117,12 +109,6 @@ export type DividerState = DividerBaseState; // @public export const renderAccordion: (state: AccordionBaseState, contextValues: AccordionContextValues_2) => JSXElement; -// @public -export const renderTab: (state: TabBaseState) => JSXElement; - -// @public -export const renderTabList: (state: TabListBaseState, contextValues: TabListContextValues) => JSXElement; - // @public export const renderAccordionHeader: (state: AccordionHeaderBaseState, contextValues: AccordionHeaderContextValues) => JSXElement; @@ -162,48 +148,6 @@ export const useButton: (props: ButtonProps, ref: React_2.Ref) => DividerState; -// @public -export const Tab: ForwardRefComponent; - -// @public -export const TabList: ForwardRefComponent; - -// @public -export type TabListProps = TabListBaseProps; - -// @public -export type TabListSlots = TabListSlots_2; - -// @public -export type TabListState = TabListBaseState & { - root: { - focusgroup?: string; - 'data-orientation'?: 'vertical' | 'horizontal'; - }; -}; - -// @public (undocumented) -export type TabProps = TabBaseProps; - -export { TabSlots } - -// @public (undocumented) -export type TabState = TabBaseState & { - root: { - focusgroupstart?: string; - 'data-icon-only'?: string; - 'data-selected'?: string; - }; -}; - -export { TabValue } - -// @public -export const useTab: (props: TabProps, ref: React_2.Ref) => TabState; - -// @public -export const useTabList: (props: TabListProps, ref: React_2.Ref) => TabListState; - // (No @packageDocumentation comment for this package) ``` diff --git a/packages/react-components/react-headless-components-preview/library/package.json b/packages/react-components/react-headless-components-preview/library/package.json index fa2eeea21d960..5de707fdcb733 100644 --- a/packages/react-components/react-headless-components-preview/library/package.json +++ b/packages/react-components/react-headless-components-preview/library/package.json @@ -24,15 +24,10 @@ "@fluentui/react-divider": "^9.7.0", "@fluentui/react-jsx-runtime": "^9.4.1", "@fluentui/react-shared-contexts": "^9.26.2", - "@fluentui/react-tabs": "^9.11.2", "@fluentui/react-utilities": "^9.26.2", "@swc/helpers": "^0.5.1" }, - "devDependencies": { - "@microsoft/focusgroup-polyfill": "^1.2.1" - }, "peerDependencies": { - "@microsoft/focusgroup-polyfill": "^1.2.1", "@types/react": ">=16.14.0 <20.0.0", "@types/react-dom": ">=16.9.0 <20.0.0", "react": ">=16.14.0 <20.0.0", diff --git a/packages/react-components/react-headless-components-preview/library/src/TabList.ts b/packages/react-components/react-headless-components-preview/library/src/TabList.ts deleted file mode 100644 index e8339b88f812b..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/TabList.ts +++ /dev/null @@ -1,10 +0,0 @@ -export { Tab, renderTab, useTab, TabList, renderTabList, useTabList } from './components/TabList/index'; -export type { - TabSlots, - TabValue, - TabProps, - TabState, - TabListSlots, - TabListProps, - TabListState, -} from './components/TabList/index'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.tsx deleted file mode 100644 index fa044bbfff0b2..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.tsx +++ /dev/null @@ -1,18 +0,0 @@ -'use client'; - -import * as React from 'react'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { TabProps } from './Tab.types'; -import { useTab } from './useTab'; -import { renderTab } from './renderTab'; - -/** - * A tab component for organizing content. - */ -export const Tab: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useTab(props, ref); - - return renderTab(state); -}); - -Tab.displayName = 'Tab'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.types.ts deleted file mode 100644 index 72b41ffc51e2a..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/Tab.types.ts +++ /dev/null @@ -1,13 +0,0 @@ -export type { TabSlots, TabValue } from '@fluentui/react-tabs'; - -import type { TabBaseProps, TabBaseState } from '@fluentui/react-tabs'; - -export type TabProps = TabBaseProps; - -export type TabState = TabBaseState & { - root: { - focusgroupstart?: string; - 'data-icon-only'?: string; - 'data-selected'?: string; - }; -}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/index.ts deleted file mode 100644 index 08ead275c3335..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/index.ts +++ /dev/null @@ -1,4 +0,0 @@ -export type { TabSlots, TabValue, TabProps, TabState } from './Tab.types'; -export { Tab } from './Tab'; -export { renderTab } from './renderTab'; -export { useTab } from './useTab'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/renderTab.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/renderTab.tsx deleted file mode 100644 index 68322a8d4542e..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/renderTab.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { renderTab_unstable } from '@fluentui/react-tabs'; - -/** - * Renders the final JSX of the Tab component, given the state. - */ -export const renderTab = renderTab_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/useTab.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/useTab.ts deleted file mode 100644 index 0b19cb6433db3..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/Tab/useTab.ts +++ /dev/null @@ -1,23 +0,0 @@ -'use client'; - -import type * as React from 'react'; -import { useTabBase_unstable } from '@fluentui/react-tabs'; - -import type { TabProps, TabState } from './Tab.types'; -import { stringifyDataAttribute } from '../../../utils'; - -/** - * Returns the state for a Tab component, given its props and ref. - * The returned state can be modified with hooks before being passed to `renderTab`. - */ -export const useTab = (props: TabProps, ref: React.Ref): TabState => { - 'use no memo'; - - const state: TabState = useTabBase_unstable(props, ref); - - state.root.focusgroupstart = stringifyDataAttribute(state.selected); - state.root['data-icon-only'] = stringifyDataAttribute(state.iconOnly); - state.root['data-selected'] = stringifyDataAttribute(state.selected); - - return state; -}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.test.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.test.tsx deleted file mode 100644 index dadc54e7f2fbc..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.test.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import { render } from '@testing-library/react'; -import { isConformant } from '../../testing/isConformant'; -import { TabList } from './TabList'; -import { Tab } from './Tab'; - -describe('TabList', () => { - isConformant({ - Component: TabList, - displayName: 'TabList', - }); - - it('renders a default state', () => { - const { getByRole, getAllByRole } = render( - - Tab 1 - Tab 2 - Tab 3 - , - ); - const tablist = getByRole('tablist'); - - expect(tablist).toBeInTheDocument(); - expect(tablist).toHaveAttribute('data-orientation', 'horizontal'); - expect(tablist).toHaveAttribute('focusgroup', 'tablist inline wrap no-memory'); - - const tabs = getAllByRole('tab'); - - expect(tabs).toHaveLength(3); - expect(tabs[0]).toHaveAttribute('data-selected'); - }); - - it('renders with vertical orientation', () => { - const { getByRole } = render( - - Tab 1 - Tab 2 - Tab 3 - , - ); - const tablist = getByRole('tablist'); - - expect(tablist).toHaveAttribute('data-orientation', 'vertical'); - expect(tablist).toHaveAttribute('focusgroup', 'tablist block wrap no-memory'); - }); -}); diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.tsx deleted file mode 100644 index d5fbd91a6b810..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.tsx +++ /dev/null @@ -1,20 +0,0 @@ -'use client'; - -import * as React from 'react'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; -import type { TabListProps } from './TabList.types'; -import { useTabList } from './useTabList'; -import { useTabListContextValues } from './useTabListContextValues'; -import { renderTabList } from './renderTabList'; - -/** - * A tab list component for organizing content. - */ -export const TabList: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useTabList(props, ref); - const contextValues = useTabListContextValues(state); - - return renderTabList(state, contextValues); -}); - -TabList.displayName = 'TabList'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.types.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.types.ts deleted file mode 100644 index d02dcc4c429ad..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/TabList.types.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { - TabListSlots as TabListBaseSlots, - TabListBaseProps, - TabListBaseState, - TabListContextValues as TabListContextValuesBase, -} from '@fluentui/react-tabs'; - -/** - * TabList component slots - */ -export type TabListSlots = TabListBaseSlots; - -/** - * TabList component props - */ -export type TabListProps = TabListBaseProps; - -/** - * TabList component state - */ -export type TabListState = TabListBaseState & { - root: { - focusgroup?: string; - /** - * Data attribute set to reflect the orientation of the tab list. Value is 'vertical' or 'horizontal'. - */ - 'data-orientation'?: 'vertical' | 'horizontal'; - }; -}; - -/** - * TabList component context values - */ -export type TabListContextValues = TabListContextValuesBase; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/index.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/index.ts deleted file mode 100644 index 6b35fd5593fd0..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -export type { TabProps, TabValue, TabSlots, TabState } from './Tab'; -export { Tab, renderTab, useTab } from './Tab'; - -export { TabList } from './TabList'; -export { renderTabList } from './renderTabList'; -export { useTabList } from './useTabList'; -export type { TabListSlots, TabListProps, TabListState } from './TabList.types'; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/renderTabList.tsx b/packages/react-components/react-headless-components-preview/library/src/components/TabList/renderTabList.tsx deleted file mode 100644 index 9d601f590a86d..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/renderTabList.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { renderTabList_unstable } from '@fluentui/react-tabs'; - -/** - * Renders the final JSX of the TabList component, given the state. - */ -export const renderTabList = renderTabList_unstable; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabList.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabList.ts deleted file mode 100644 index 73faa95eaebd7..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabList.ts +++ /dev/null @@ -1,21 +0,0 @@ -'use client'; - -import type * as React from 'react'; -import { useTabListBase_unstable } from '@fluentui/react-tabs'; - -import type { TabListProps, TabListState } from './TabList.types'; - -/** - * Returns the state for a TabList component, given its props and ref. - * The returned state can be modified with hooks before being passed to `renderTabList`. - */ -export const useTabList = (props: TabListProps, ref: React.Ref): TabListState => { - 'use no memo'; - - const state: TabListState = useTabListBase_unstable(props, ref); - - state.root.focusgroup = state.vertical ? 'tablist block wrap no-memory' : 'tablist inline wrap no-memory'; - state.root['data-orientation'] = state.vertical ? 'vertical' : 'horizontal'; - - return state; -}; diff --git a/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabListContextValues.ts b/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabListContextValues.ts deleted file mode 100644 index f896b23be18a8..0000000000000 --- a/packages/react-components/react-headless-components-preview/library/src/components/TabList/useTabListContextValues.ts +++ /dev/null @@ -1,9 +0,0 @@ -'use client'; - -import { useTabListContextValues_unstable } from '@fluentui/react-tabs'; - -import type { TabListContextValues, TabListState } from './TabList.types'; - -export const useTabListContextValues = useTabListContextValues_unstable as ( - state: TabListState, -) => TabListContextValues; diff --git a/packages/react-components/react-headless-components-preview/library/src/index.ts b/packages/react-components/react-headless-components-preview/library/src/index.ts index 897caa5b43a6c..86d0be8436361 100644 --- a/packages/react-components/react-headless-components-preview/library/src/index.ts +++ b/packages/react-components/react-headless-components-preview/library/src/index.ts @@ -35,6 +35,3 @@ export type { ButtonSlots, ButtonProps, ButtonState } from './Button'; export { Divider, renderDivider, useDivider } from './Divider'; export type { DividerSlots, DividerProps, DividerState } from './Divider'; - -export { Tab, renderTab, useTab, TabList, renderTabList, useTabList } from './TabList'; -export type { TabSlots, TabValue, TabProps, TabState, TabListSlots, TabListProps, TabListState } from './TabList'; diff --git a/packages/react-components/react-headless-components-preview/stories/.storybook/preview.js b/packages/react-components/react-headless-components-preview/stories/.storybook/preview.js index c9e29de4bb968..98274ed0b8095 100644 --- a/packages/react-components/react-headless-components-preview/stories/.storybook/preview.js +++ b/packages/react-components/react-headless-components-preview/stories/.storybook/preview.js @@ -1,9 +1,5 @@ -import { polyfillBodyAndObserve } from '@microsoft/focusgroup-polyfill/shadowless'; - import * as rootPreview from '../../../../../.storybook/preview'; -polyfillBodyAndObserve(); - /** @type {typeof rootPreview.decorators} */ export const decorators = [...rootPreview.decorators]; diff --git a/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDefault.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDefault.stories.tsx deleted file mode 100644 index b5b44129f4cf6..0000000000000 --- a/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDefault.stories.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import { TabList, Tab } from '@fluentui/react-headless-components-preview'; - -const tabs = [ - { value: 'account', label: 'Account', content: 'Manage your account settings and preferences.' }, - { value: 'security', label: 'Security', content: 'Update your password and configure two-factor authentication.' }, - { value: 'notifications', label: 'Notifications', content: 'Choose what you are notified about and how.' }, -]; - -export const Default = (): React.ReactNode => { - const [selected, setSelected] = React.useState('account'); - - return ( -
- setSelected(data.value as string)} - className="flex border-b border-gray-200" - > - {tabs.map(tab => ( - - {tab.label} - - ))} - -
{tabs.find(t => t.value === selected)?.content}
-
- ); -}; diff --git a/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDescription.md b/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDescription.md deleted file mode 100644 index 3a8fbe0bc354b..0000000000000 --- a/packages/react-components/react-headless-components-preview/stories/src/TabList/TabListDescription.md +++ /dev/null @@ -1,3 +0,0 @@ -A tab list organizes related content into navigable sections, showing one panel at a time. - -Use `TabList` when you have two or more distinct views of the same subject — such as Overview, Settings, and Activity — and users need to switch between them. Keep tab labels short and use nouns rather than verbs. Avoid using tabs to replace multi-step workflows; use a stepper or wizard pattern instead. diff --git a/packages/react-components/react-headless-components-preview/stories/src/TabList/index.stories.tsx b/packages/react-components/react-headless-components-preview/stories/src/TabList/index.stories.tsx deleted file mode 100644 index 3a9b7aafc57f3..0000000000000 --- a/packages/react-components/react-headless-components-preview/stories/src/TabList/index.stories.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { TabList } from '@fluentui/react-headless-components-preview'; - -import descriptionMd from './TabListDescription.md'; - -export { Default } from './TabListDefault.stories'; - -export default { - title: 'Headless Components/TabList', - component: TabList, - parameters: { - docs: { - description: { - component: descriptionMd, - }, - }, - }, -};