Skip to content

Commit b4ed1d4

Browse files
snowystingerLFDanLu
snowystinger
and
LFDanLu
authored
fix: chromatic s2 stories (#7476)
Co-authored-by: Daniel Lu <[email protected]>
1 parent 369e1e7 commit b4ed1d4

30 files changed

+997
-872
lines changed

‎packages/@react-spectrum/s2/chromatic/ColorWheel.stories.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,9 @@ const meta: Meta<typeof ColorWheel> = {
2323

2424
export default meta;
2525

26-
export const Example = (args: any) => <ColorWheel {...args} onChange={undefined} />;
27-
28-
Example.args = {
29-
defaultValue: 'hsl(30, 100%, 50%)'
26+
export const Example = {
27+
render: (args: any) => <ColorWheel {...args} onChange={undefined} />,
28+
args: {
29+
defaultValue: 'hsl(30, 100%, 50%)'
30+
}
3031
};

‎packages/@react-spectrum/s2/chromatic/Combobox.stories.tsx

Lines changed: 34 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -26,44 +26,46 @@ const meta: Meta<typeof ComboBox<any>> = {
2626

2727
export default meta;
2828

29-
export const Static = Example as StoryObj;
29+
export const Static = {
30+
...Example,
31+
play: async ({canvasElement}) => {
32+
await userEvent.tab();
33+
await userEvent.keyboard('{ArrowDown}');
34+
let body = canvasElement.ownerDocument.body;
35+
await within(body).findByRole('listbox');
36+
}
37+
} as StoryObj;
3038

31-
Static.play = async ({canvasElement}) => {
32-
await userEvent.tab();
33-
await userEvent.keyboard('{ArrowDown}');
34-
let body = canvasElement.ownerDocument.body;
35-
await within(body).findByRole('listbox');
39+
export const WithSections = {
40+
...Sections,
41+
name: 'Sections',
42+
play: async (context) => await Static.play!(context)
3643
};
3744

38-
export const WithSections = {...Sections, name: 'Sections'};
39-
40-
WithSections.play = async (context) => {
41-
await Static.play!(context);
42-
};
43-
44-
export const WithDynamic = {...Dynamic, name: 'Dynamic', args: {...Dynamic.args, selectedKey: 'chocolate'}};
45-
46-
WithDynamic.play = async (context) => {
47-
await Static.play!(context);
45+
export const WithDynamic = {
46+
...Dynamic,
47+
name: 'Dynamic',
48+
args: {...Dynamic.args, selectedKey: 'chocolate'},
49+
play: async (context) => await Static.play!(context)
4850
};
4951

50-
export const Icons = {...WithIcons, name: 'With Icons'};
51-
52-
Icons.play = async (context) => {
53-
await Static.play!(context);
52+
export const Icons = {
53+
...WithIcons,
54+
name: 'With Icons',
55+
play: async (context) => await Static.play!(context)
5456
};
5557

56-
export const ContextualHelp = {...ContextualHelpExample};
57-
58-
ContextualHelp.play = async ({canvasElement}) => {
59-
await userEvent.tab();
60-
await userEvent.keyboard('{Enter}');
61-
let body = canvasElement.ownerDocument.body;
62-
await within(body).findByRole('dialog');
58+
export const ContextualHelp = {
59+
...ContextualHelpExample,
60+
play: async ({canvasElement}) => {
61+
await userEvent.tab();
62+
await userEvent.keyboard('{Enter}');
63+
let body = canvasElement.ownerDocument.body;
64+
await within(body).findByRole('dialog');
65+
}
6366
};
6467

65-
export const WithCustomWidth = CustomWidth as StoryObj;
66-
67-
WithCustomWidth.play = async (context) => {
68-
await Static.play!(context);
69-
};
68+
export const WithCustomWidth = {
69+
...CustomWidth,
70+
play: async (context) => await Static.play!(context)
71+
} as StoryObj;

‎packages/@react-spectrum/s2/chromatic/ContextualHelp.stories.tsx

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,12 @@ const meta: Meta<typeof ContextualHelp> = {
2626

2727
export default meta;
2828

29-
export const Default = Example;
30-
31-
Default.play = async ({canvasElement}) => {
32-
await userEvent.tab();
33-
await userEvent.keyboard('{Enter}');
34-
let body = canvasElement.ownerDocument.body;
35-
await within(body).findByRole('dialog');
29+
export const Default = {
30+
...Example,
31+
play: async ({canvasElement}) => {
32+
await userEvent.tab();
33+
await userEvent.keyboard('{Enter}');
34+
let body = canvasElement.ownerDocument.body;
35+
await within(body).findByRole('dialog');
36+
}
3637
};

‎packages/@react-spectrum/s2/chromatic/Dialog.stories.tsx

Lines changed: 19 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -26,24 +26,23 @@ const meta: Meta<typeof Dialog> = {
2626

2727
export default meta;
2828

29-
export const Default = Example as StoryObj;
30-
29+
export const Default = {
30+
...Example,
3131
// TODO: maybe render dialogs with different args instead (showHero/showHeader, etc)
32-
Default.play = async ({canvasElement}) => {
33-
await userEvent.tab();
34-
await userEvent.keyboard('{Enter}');
35-
let body = canvasElement.ownerDocument.body;
36-
await within(body).findByRole('dialog');
37-
};
38-
39-
export const WithDialogTrigger = DialogTriggerExample as StoryObj;
40-
41-
WithDialogTrigger.play = async (context) => {
42-
await Default.play!(context);
43-
};
44-
45-
export const DialogContainer = DialogContainerExample as StoryObj;
46-
47-
DialogContainer.play = async (context) => {
48-
await Default.play!(context);
49-
};
32+
play: async ({canvasElement}) => {
33+
await userEvent.tab();
34+
await userEvent.keyboard('{Enter}');
35+
let body = canvasElement.ownerDocument.body;
36+
await within(body).findByRole('dialog');
37+
}
38+
} as StoryObj;
39+
40+
export const WithDialogTrigger = {
41+
...DialogTriggerExample,
42+
play: async (context) => await Default.play!(context)
43+
} as StoryObj;
44+
45+
export const DialogContainer = {
46+
...DialogContainerExample,
47+
play: async (context) => await Default.play!(context)
48+
} as StoryObj;

‎packages/@react-spectrum/s2/chromatic/Disclosure.stories.tsx

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -58,13 +58,11 @@ export const WithLongTitle: Story = {
5858
</Disclosure>
5959
</div>
6060
);
61-
}
62-
};
63-
64-
65-
WithLongTitle.parameters = {
66-
docs: {
67-
disable: true
61+
},
62+
parameters: {
63+
docs: {
64+
disable: true
65+
}
6866
}
6967
};
7068

‎packages/@react-spectrum/s2/chromatic/DropZone.stories.tsx

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ const meta: Meta<typeof DropZone> = {
2929

3030
export default meta;
3131

32-
export const Example = (args: any) => {
32+
const ExampleRender = (args: any) => {
3333
let [isFilled, setIsFilled] = useState(false);
3434

3535
return (
@@ -54,7 +54,11 @@ export const Example = (args: any) => {
5454
);
5555
};
5656

57-
export const ExampleWithFileTrigger = (args: any) => {
57+
export const Example = {
58+
render: (args: any) => <ExampleRender {...args} />
59+
};
60+
61+
const ExampleWithFileTriggerRender = (args: any) => {
5862
let [isFilled, setIsFilled] = useState(false);
5963

6064
return (
@@ -85,7 +89,11 @@ export const ExampleWithFileTrigger = (args: any) => {
8589
);
8690
};
8791

88-
export const LongBanner = (args: any) => {
92+
export const ExampleWithFileTrigger = {
93+
render: (args: any) => <ExampleWithFileTriggerRender {...args} />
94+
};
95+
96+
const LongBannerRender = (args: any) => {
8997
let [isFilled, setIsFilled] = useState(false);
9098

9199
return (
@@ -111,29 +119,8 @@ export const LongBanner = (args: any) => {
111119
);
112120
};
113121

114-
export const Gradient = (args: any) => {
115-
let [isFilled, setIsFilled] = useState(false);
116-
117-
return (
118-
<>
119-
<Draggable />
120-
<DropZone
121-
{...args}
122-
className={style({width: 320, height: 280})}
123-
isFilled={isFilled}
124-
onDrop={() => setIsFilled(true)}>
125-
<IllustratedMessage>
126-
<CloudUpload />
127-
<Heading>
128-
Drag and drop your file
129-
</Heading>
130-
<Content>
131-
Or, select a file from your computer
132-
</Content>
133-
</IllustratedMessage>
134-
</DropZone>
135-
</>
136-
);
122+
export const LongBanner = {
123+
render: (args: any) => <LongBannerRender {...args} />
137124
};
138125

139126
function Draggable() {
@@ -170,3 +157,32 @@ function Draggable() {
170157
</FocusRing>
171158
);
172159
}
160+
161+
const GradientExample = (args: any) => {
162+
let [isFilled, setIsFilled] = useState(false);
163+
164+
return (
165+
<>
166+
<Draggable />
167+
<DropZone
168+
{...args}
169+
className={style({width: 320, height: 280})}
170+
isFilled={isFilled}
171+
onDrop={() => setIsFilled(true)}>
172+
<IllustratedMessage>
173+
<CloudUpload />
174+
<Heading>
175+
Drag and drop your file
176+
</Heading>
177+
<Content>
178+
Or, select a file from your computer
179+
</Content>
180+
</IllustratedMessage>
181+
</DropZone>
182+
</>
183+
);
184+
};
185+
186+
export const Gradient = {
187+
render: (args: any) => <GradientExample {...args} />
188+
};

0 commit comments

Comments
 (0)