diff --git a/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx b/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx index e8b97cb78520..2b8fb49dc55d 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.stories.tsx @@ -1,11 +1,20 @@ +import { TabsView } from 'storybook/internal/components'; + +import type { Meta, StoryObj } from '@storybook/react-vite'; + +import { ArgsTable } from './ArgsTable'; import { Compact, Normal, Sections } from './ArgsTable.stories'; import { TabbedArgsTable } from './TabbedArgsTable'; -export default { +const meta = { component: TabbedArgsTable, -}; + tags: ['autodocs'], + subcomponents: { TabbedArgsTable: TabbedArgsTable, ArgsTable, TabsView }, +} satisfies Meta; + +export default meta; -export const Tabs = { +export const Tabs: StoryObj = { args: { tabs: { Normal: Normal.args, @@ -15,7 +24,7 @@ export const Tabs = { }, }; -export const TabsInAddonPanel = { +export const TabsInAddonPanel: StoryObj = { args: { tabs: { Normal: Normal.args, @@ -26,8 +35,25 @@ export const TabsInAddonPanel = { }, }; -export const Empty = { +export const Empty: StoryObj = { args: { tabs: {}, }, }; + +export const WithContentAround: StoryObj = { + args: { + tabs: { + Normal: Normal.args, + Compact: Compact.args, + Sections: Sections.args, + }, + }, + render: (args) => ( + <> +

This is some content above the TabbedArgsTable.

+ +

This is some content below the TabbedArgsTable.

+ + ), +}; diff --git a/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx b/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx index dc0f6c6945e2..3fdc43484256 100644 --- a/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx +++ b/code/addons/docs/src/blocks/components/ArgsTable/TabbedArgsTable.tsx @@ -3,6 +3,8 @@ import React from 'react'; import { TabsView } from 'storybook/internal/components'; +import { styled } from 'storybook/theming'; + import type { ArgsTableProps } from './ArgsTable'; import { ArgsTable } from './ArgsTable'; @@ -12,6 +14,10 @@ export type TabbedArgsTableProps = DistributiveOmit & { tabs: Record; }; +const StyledTabsView = styled(TabsView)({ + height: 'fit-content', +}); + export const TabbedArgsTable: FC = ({ tabs, ...props }) => { const entries = Object.entries(tabs); @@ -34,5 +40,5 @@ export const TabbedArgsTable: FC = ({ tabs, ...props }) => }, })); - return ; + return ; };