Skip to content

Enhance TabsField: dark bg, SAIL spacing, full-width separator, align, nav-only #153

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
pglevy merged 4 commits into from
Jul 20, 2026
Merged

Enhance TabsField: dark bg, SAIL spacing, full-width separator, align, nav-only #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2fd8b22
Enhance TabsField: dark bg support, SAIL spacing, full-width separato…
pglevy Jul 17, 2026
7eb25c1
Fix vertical fullWidthSeparator and add contentsPadding control
pglevy Jul 17, 2026
8128ce3
Revert "Fix vertical fullWidthSeparator and add contentsPadding control"
pglevy Jul 17, 2026
6f26b9a
Fix fullWidthSeparator for vertical orientation
pglevy Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
227 changes: 190 additions & 37 deletions src/components/Tabs/Tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,13 @@ const meta = {
argTypes: {
variant: { control: 'select', options: ['UNDERLINE', 'PILL'] },
size: { control: 'select', options: ['SMALL', 'STANDARD', 'MEDIUM', 'LARGE'] },
density: { control: 'select', options: ['STANDARD', 'DENSE'] },
color: { control: 'text' },
orientation: { control: 'select', options: ['HORIZONTAL', 'VERTICAL'] },
align: { control: 'select', options: ['START', 'CENTER', 'END'] },
activationMode: { control: 'select', options: ['AUTOMATIC', 'MANUAL'] },
navigationOnly: { control: 'boolean' },
fullWidthSeparator: { control: 'boolean' },
},
} satisfies Meta<typeof TabsField>

Expand Down Expand Up @@ -193,49 +197,211 @@ export const VerticalOrientation: Story = {
},
}

export const SizeSmall: Story = {
export const NavigationOnly: Story = {
name: 'Navigation Only (No Content Panels)',
args: {
tabs: [
{ value: 'tab1', label: 'Tab 1', content: <p>Small tab content</p> },
{ value: 'tab2', label: 'Tab 2', content: <p>Small tab content</p> },
],
tabs: simpleTabs,
defaultValue: 'tab1',
size: 'SMALL',
},
render: () => {
const [activeTab, setActiveTab] = useState('dashboard')

const navTabs: TabItem[] = [
{ value: 'dashboard', label: 'Dashboard' },
{ value: 'reports', label: 'Reports' },
{ value: 'settings', label: 'Settings' },
{ value: 'help', label: 'Help' },
]

return (
<div style={{ width: 480 }}>
<TabsField
tabs={navTabs}
value={activeTab}
onValueChange={setActiveTab}
navigationOnly
size="STANDARD"
color="ACCENT"
/>
<div className="mt-4 p-4 border border-gray-200 rounded-md">
<p className="text-base text-gray-700">
Active route: <strong>{activeTab}</strong>
</p>
<p className="text-sm text-gray-500 mt-1">
Content is rendered externally — no content panels in the tab component.
</p>
</div>
</div>
)
},
}

export const SizeLarge: Story = {
export const NavigationOnlyVertical: Story = {
name: 'Navigation Only — Vertical Sidebar',
args: {
tabs: [
{ value: 'tab1', label: 'Tab 1', content: <p>Large tab content</p> },
{ value: 'tab2', label: 'Tab 2', content: <p>Large tab content</p> },
],
tabs: simpleTabs,
defaultValue: 'tab1',
},
render: () => {
const [activeTab, setActiveTab] = useState('inbox')

const navTabs: TabItem[] = [
{ value: 'inbox', label: 'Inbox' },
{ value: 'drafts', label: 'Drafts' },
{ value: 'sent', label: 'Sent' },
{ value: 'archive', label: 'Archive' },
{ value: 'trash', label: 'Trash' },
]

return (
<div className="flex gap-4" style={{ width: 480 }}>
<TabsField
tabs={navTabs}
value={activeTab}
onValueChange={setActiveTab}
navigationOnly
orientation="VERTICAL"
align="START"
size="STANDARD"
color="ACCENT"
/>
<div className="flex-1 p-4 border border-gray-200 rounded-md">
<p className="text-base text-gray-700">
Viewing: <strong>{activeTab}</strong>
</p>
</div>
</div>
)
},
}

export const DensityComparison: Story = {
name: 'Density — STANDARD vs DENSE',
args: {
tabs: simpleTabs,
defaultValue: 'tab1',
},
render: () => {
const tabs: TabItem[] = [
{ value: 'one', label: 'First Tab', content: <p className="text-base text-gray-700">Content for first tab.</p> },
{ value: 'two', label: 'Second Tab', content: <p className="text-base text-gray-700">Content for second tab.</p> },
{ value: 'three', label: 'Third Tab', content: <p className="text-base text-gray-700">Content for third tab.</p> },
]

return (
<div className="space-y-8" style={{ width: 480 }}>
<div>
<p className="text-xs text-gray-500 mb-2 uppercase tracking-wide">Density: STANDARD (default)</p>
<TabsField tabs={tabs} defaultValue="one" density="STANDARD" />
</div>
<div>
<p className="text-xs text-gray-500 mb-2 uppercase tracking-wide">Density: DENSE</p>
<TabsField tabs={tabs} defaultValue="one" density="DENSE" />
</div>
</div>
)
},
}

export const FullWidthSeparator: Story = {
name: 'Full-Width Separator',
args: {
tabs: simpleTabs,
defaultValue: 'tab1',
},
render: () => {
const tabs: TabItem[] = [
{ value: 'overview', label: 'Overview', content: <p className="text-base text-gray-700">Overview content here.</p> },
{ value: 'details', label: 'Details', content: <p className="text-base text-gray-700">Details content here.</p> },
{ value: 'history', label: 'History', content: <p className="text-base text-gray-700">History content here.</p> },
]

return (
<div className="border border-gray-200 rounded-md p-6" style={{ width: 600 }}>
<HeadingField text="Record Detail" size="MEDIUM" marginBelow="STANDARD" />
<TabsField
tabs={tabs}
defaultValue="overview"
fullWidthSeparator
size="STANDARD"
color="ACCENT"
/>
</div>
)
},
}

export const LightBackground: Story = {
name: 'Light Background (Non-White)',
args: {
tabs: simpleTabs,
defaultValue: 'tab1',
},
render: () => {
const tabs: TabItem[] = [
{ value: 'overview', label: 'Overview', content: <p className="text-gray-700">Overview content on light bg.</p> },
{ value: 'details', label: 'Details', content: <p className="text-gray-700">Details content on light bg.</p> },
{ value: 'history', label: 'History', content: <p className="text-gray-700">History content on light bg.</p> },
]

return (
<div className="bg-gray-100 text-gray-800 p-6 rounded-md" style={{ width: 480 }}>
<TabsField
tabs={tabs}
defaultValue="overview"
size="STANDARD"
color="ACCENT"
/>
</div>
)
},
}

export const DarkBackground: Story = {
name: 'Dark Background (Auto Separator)',
args: {
tabs: simpleTabs,
defaultValue: 'tab1',
size: 'LARGE',
},
render: () => {
const tabs: TabItem[] = [
{ value: 'overview', label: 'Overview', content: <p className="text-gray-200">Overview content on dark.</p> },
{ value: 'details', label: 'Details', content: <p className="text-gray-200">Details content on dark.</p> },
{ value: 'history', label: 'History', content: <p className="text-gray-200">History content on dark.</p> },
]

return (
<div className="bg-gray-900 text-white p-6 rounded-md" style={{ width: 480 }}>
<TabsField
tabs={tabs}
defaultValue="overview"
size="STANDARD"
color="ACCENT"
/>
</div>
)
},
}

export const ColorPositive: Story = {
export const SizeSmall: Story = {
args: {
tabs: [
{ value: 'success', label: 'Success', content: <p className="text-base text-gray-700">Success content with positive color scheme.</p> },
{ value: 'warning', label: 'Warning', content: <p className="text-base text-gray-700">Warning content with negative color scheme.</p> },
{ value: 'info', label: 'Info', content: <p className="text-base text-gray-700">Info content with secondary color scheme.</p> },
{ value: 'tab1', label: 'Tab 1', content: <p>Small tab content</p> },
{ value: 'tab2', label: 'Tab 2', content: <p>Small tab content</p> },
],
defaultValue: 'success',
color: 'POSITIVE',
defaultValue: 'tab1',
size: 'SMALL',
},
}

export const ColorNegative: Story = {
export const SizeLarge: Story = {
args: {
tabs: [
{ value: 'success', label: 'Success', content: <p className="text-base text-gray-700">Success content with positive color scheme.</p> },
{ value: 'warning', label: 'Warning', content: <p className="text-base text-gray-700">Warning content with negative color scheme.</p> },
{ value: 'info', label: 'Info', content: <p className="text-base text-gray-700">Info content with secondary color scheme.</p> },
{ value: 'tab1', label: 'Tab 1', content: <p>Large tab content</p> },
{ value: 'tab2', label: 'Tab 2', content: <p>Large tab content</p> },
],
defaultValue: 'warning',
color: 'NEGATIVE',
defaultValue: 'tab1',
size: 'LARGE',
},
}

Expand All @@ -251,19 +417,6 @@ export const ColorCustomHex: Story = {
},
}

export const ManualActivation: Story = {
args: {
tabs: [
{ value: 'manual1', label: 'Manual 1', content: <p>Manual activation tab 1</p> },
{ value: 'manual2', label: 'Manual 2', content: <p>Manual activation tab 2</p> },
{ value: 'manual3', label: 'Manual 3', content: <p>Manual activation tab 3</p> },
],
defaultValue: 'manual1',
activationMode: 'MANUAL',
},
}


export const Pill: Story = {
args: {
tabs: [
Expand Down
Loading
Loading