Skip to content

chore: adding width picker to tab collapse story for mobile testing #7460

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

Closed
ktabors wants to merge 2 commits into from
Closed

chore: adding width picker to tab collapse story for mobile testing #7460

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
36bf318
chore: adding width picker to tab collapse story for mobile testing
ktabors Dec 4, 2024
b19049b
Update packages/@react-spectrum/s2/stories/Tabs.stories.tsx
snowystinger Dec 4, 2024
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
79 changes: 62 additions & 17 deletions packages/@react-spectrum/s2/stories/Tabs.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,13 @@
*/

import Bell from '../s2wf-icons/S2_Icon_Bell_20_N.svg';
import {Collection, Text} from '@react-spectrum/s2';
import {Collection, Content, ContextualHelp, Picker, PickerItem, Text} from '@react-spectrum/s2';
import Edit from '../s2wf-icons/S2_Icon_Edit_20_N.svg';
import Heart from '../s2wf-icons/S2_Icon_Heart_20_N.svg';
import type {Meta} from '@storybook/react';
import {style} from '../style' with { type: 'macro' };
import {Tab, TabList, TabPanel, Tabs} from '../src/Tabs';
import {useState} from 'react';

const meta: Meta<typeof Tabs> = {
component: Tabs,
Expand Down Expand Up @@ -109,20 +110,64 @@ let items: Item[] = [
{id: 2, title: 'Keyboard settings', description: 'Customize the layout and function of your keyboard.'},
{id: 3, title: 'Gamepad settings', description: 'Configure the buttons and triggers on your gamepad.'}
];
let widthItems = [
{id: '1', label: '150px'},
{id: '2', label: '400px'},
{id: '3', label: '700px'}
];
const dynamicStyle = style({
width: {
default: 700,
containerWidth: {
1: 150,
2: 400,
3: 700
}
},
height: 256,
resize: 'horizontal',
overflow: 'hidden',
padding: 8,
display: 'flex',
flexDirection: 'column',
gap: 8
});

export const Dynamic = (args: any) => (
<div className={style({width: 700, height: 256, resize: 'horizontal', overflow: 'hidden', padding: 8})}>
<Tabs {...args} styles={style({width: 'full'})} disabledKeys={new Set([2])}>
<TabList aria-label="History of Ancient Rome" items={items}>
{item => <Tab>{item.title}</Tab>}
</TabList>
<Collection items={items}>
{item => (
<TabPanel>
{item.description}
</TabPanel>
)}
</Collection>
</Tabs>
</div>
);
export const Dynamic = (args: any) => {
let [containerWidth, setContainerWidth] = useState('3');

return (
<div
className={dynamicStyle({containerWidth})}>
<Picker
styles={style({width: 150})}
label="Container width for mobile"
contextualHelp={
<ContextualHelp>
<Content>
<Text>
Select a width for the container to simulate a mobile device. If you manualy resize the container, the width will not be update by this.
</Text>
</Content>
</ContextualHelp>
}
selectedKey={containerWidth}
onSelectionChange={(key) => setContainerWidth(key as string)}
items={widthItems}>
{item => <PickerItem id={item.id} textValue={item.label}>{item.label}</PickerItem>}
</Picker>
<Tabs {...args} styles={style({width: 'full'})} disabledKeys={new Set([2])}>
<TabList aria-label="History of Ancient Rome" items={items}>
{item => <Tab>{item.title}</Tab>}
</TabList>
<Collection items={items}>
{item => (
<TabPanel>
{item.description}
</TabPanel>
)}
</Collection>
</Tabs>
</div>
);
};