Skip to content

Commit 2f864fb

Browse files
LFDanLuLFDanLu
authored
Updating Button stories for Icon only testing (#3494)
* Updating Button stories for Icon only testing * fixing lint * addressing review * adding aria-label to icon only * adding tooltip to icon only storeis * adding disabled button
1 parent 2a2665f commit 2f864fb

File tree

1 file changed

+121
-78
lines changed

1 file changed

+121
-78
lines changed

‎packages/@react-spectrum/button/stories/Button.stories.tsx

Lines changed: 121 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -14,86 +14,59 @@ import {action} from '@storybook/addon-actions';
1414
import Bell from '@spectrum-icons/workflow/Bell';
1515
import {Button} from '../';
1616
import {Flex} from '@react-spectrum/layout';
17+
import {mergeProps} from '@react-aria/utils';
1718
import React, {ElementType} from 'react';
1819
import {SpectrumButtonProps} from '@react-types/button';
1920
import {storiesOf} from '@storybook/react';
2021
import {Text} from '@react-spectrum/text';
22+
import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';
23+
24+
const parameters = {
25+
args: {
26+
variant: 'cta'
27+
},
28+
argTypes: {
29+
variant: {
30+
control: {
31+
type: 'radio',
32+
options: ['cta', 'primary', 'secondary', 'negative', 'overBackground']
33+
}
34+
}
35+
}
36+
};
37+
38+
let actions = {
39+
onPress: action('press'),
40+
onPressStart: action('pressstart'),
41+
onPressEnd: action('pressend')
42+
};
43+
2144

2245
storiesOf('Button', module)
23-
.addParameters({providerSwitcher: {status: 'positive'}})
46+
.addParameters({providerSwitcher: {status: 'positive'}, ...parameters})
2447
.add(
25-
'variant: cta',
26-
() => render({variant: 'cta'})
48+
'default',
49+
(args) => render(args)
2750
)
2851
.add(
2952
'with icon',
30-
() => (
31-
<Flex gap="size-200">
32-
<Button
33-
onPress={action('press')}
34-
onPressStart={action('pressstart')}
35-
onPressEnd={action('pressend')}
36-
variant="primary">
37-
<Bell />
38-
<Text>Default</Text>
39-
</Button>
40-
<Button
41-
onPress={action('press')}
42-
onPressStart={action('pressstart')}
43-
onPressEnd={action('pressend')}
44-
isDisabled
45-
variant="primary">
46-
<Text>Disabled</Text>
47-
<Bell />
48-
</Button>
49-
<Button
50-
onPress={action('press')}
51-
onPressStart={action('pressstart')}
52-
onPressEnd={action('pressend')}
53-
isQuiet
54-
variant="primary">
55-
<Bell />
56-
<Text>Quiet</Text>
57-
</Button>
58-
</Flex>
59-
)
53+
(args) => renderIconText(args)
6054
)
61-
.add('icon only', () => (
62-
<Button variant="cta">
63-
<Bell />
64-
</Button>
65-
))
6655
.add(
67-
'variant: overBackground',
68-
() => (
69-
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
70-
{render({variant: 'overBackground'})}
71-
</div>
72-
)
73-
)
74-
.add(
75-
'variant: primary',
76-
() => render({variant: 'primary'})
77-
)
78-
.add(
79-
'variant: secondary',
80-
() => render({variant: 'secondary'})
81-
)
82-
.add(
83-
'variant: negative',
84-
() => render({variant: 'negative'})
56+
'icon only',
57+
(args) => renderIconOnly(args)
8558
)
8659
.add(
8760
'element: a',
88-
() => render({elementType: 'a', variant: 'primary'})
61+
(args) => render({elementType: 'a', ...args})
8962
)
9063
.add(
9164
'element: a, href: \'//example.com\', target: \'_self\'',
92-
() => render({elementType: 'a', href: '//example.com', target: '_self', variant: 'primary'})
65+
(args) => render({elementType: 'a', href: '//example.com', target: '_self', ...args})
9366
)
9467
.add(
9568
'element: a, rel: \'noopener noreferrer\'',
96-
() => render({elementType: 'a', href: '//example.com', rel: 'noopener noreferrer', variant: 'primary'})
69+
(args) => render({elementType: 'a', href: '//example.com', rel: 'noopener noreferrer', ...args})
9770
)
9871
.add(
9972
'user-select:none on press test',
@@ -106,35 +79,105 @@ storiesOf('Button', module)
10679
);
10780

10881
function render<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'primary'}) {
109-
return (
82+
let buttonProps = mergeProps(props, actions);
83+
84+
let buttons = (
11085
<Flex gap="size-200">
111-
<Button
112-
onPress={action('press')}
113-
onPressStart={action('pressstart')}
114-
onPressEnd={action('pressend')}
115-
{...props}>
86+
<Button {...buttonProps}>
11687
Default
11788
</Button>
118-
<Button
119-
onPress={action('press')}
120-
onPressStart={action('pressstart')}
121-
onPressEnd={action('pressend')}
122-
isDisabled
123-
{...props}>
89+
<Button {...buttonProps} isDisabled>
12490
Disabled
12591
</Button>
12692
{props.variant !== 'cta' && (
127-
<Button
128-
onPress={action('press')}
129-
onPressStart={action('pressstart')}
130-
onPressEnd={action('pressend')}
131-
isQuiet
132-
{...props}>
133-
Quiet
93+
<Button {...buttonProps} isQuiet>
94+
Quiet
95+
</Button>
96+
)}
97+
</Flex>
98+
);
99+
100+
if (props.variant === 'overBackground') {
101+
return (
102+
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
103+
{buttons}
104+
</div>
105+
);
106+
}
107+
108+
return buttons;
109+
}
110+
111+
function renderIconText<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'primary'}) {
112+
let buttonProps = mergeProps(props, actions);
113+
114+
let buttons = (
115+
<Flex gap="size-200">
116+
<Button {...buttonProps}>
117+
<Bell />
118+
<Text>Default</Text>
134119
</Button>
120+
<Button {...buttonProps} isDisabled>
121+
<Bell />
122+
<Text>Disabled</Text>
123+
</Button>
124+
{props.variant !== 'cta' && (
125+
<Button {...buttonProps} isQuiet>
126+
<Bell />
127+
<Text>Quiet</Text>
128+
</Button>
129+
)}
130+
</Flex>
131+
);
132+
133+
if (props.variant === 'overBackground') {
134+
return (
135+
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
136+
{buttons}
137+
</div>
138+
);
139+
}
140+
141+
return buttons;
142+
}
143+
144+
function renderIconOnly<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'primary'}) {
145+
let buttonProps = mergeProps(props, actions);
146+
147+
let buttons = (
148+
<Flex gap="size-200">
149+
<TooltipTrigger offset={2}>
150+
<Button {...buttonProps} aria-label="Notifications">
151+
<Bell />
152+
</Button>
153+
<Tooltip>Notifications</Tooltip>
154+
</TooltipTrigger>
155+
<TooltipTrigger offset={2}>
156+
<Button {...buttonProps} aria-label="Notifications (disabled)" isDisabled>
157+
<Bell />
158+
</Button>
159+
<Tooltip>Notifications</Tooltip>
160+
</TooltipTrigger>
161+
{props.variant !== 'cta' && (
162+
<TooltipTrigger offset={2}>
163+
<Button {...buttonProps} isQuiet aria-label="Notifications (quiet)">
164+
<Bell />
165+
</Button>
166+
<Tooltip>Notifications</Tooltip>
167+
</TooltipTrigger>
135168
)}
136169
</Flex>
137170
);
171+
172+
if (props.variant === 'overBackground') {
173+
return (
174+
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
175+
{buttons}
176+
</div>
177+
);
178+
}
179+
180+
return buttons;
138181
}
139182

140183
function Example() {

0 commit comments

Comments
 (0)