Skip to content

Updating Button stories for Icon only testing #3494

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
LFDanLu merged 9 commits into from
Sep 12, 2022
Merged

Updating Button stories for Icon only testing #3494

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
4c1ff24
Updating Button stories for Icon only testing
LFDanLu Sep 8, 2022
ee36285
fixing lint
LFDanLu Sep 8, 2022
b2c38fa
addressing review
LFDanLu Sep 9, 2022
8b8030f
adding aria-label to icon only
LFDanLu Sep 12, 2022
6b1185a
Merge branch 'main' into button_stories
LFDanLu Sep 12, 2022
f2bef88
adding tooltip to icon only storeis
LFDanLu Sep 12, 2022
2adcd7a
adding disabled button
LFDanLu Sep 12, 2022
0b0548a
Merge branch 'main' into button_stories
LFDanLu Sep 12, 2022
e9b4a94
Merge branch 'main' into button_stories
LFDanLu Sep 12, 2022
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
199 changes: 121 additions & 78 deletions packages/@react-spectrum/button/stories/Button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,86 +14,59 @@ import {action} from '@storybook/addon-actions';
import Bell from '@spectrum-icons/workflow/Bell';
import {Button} from '../';
import {Flex} from '@react-spectrum/layout';
import {mergeProps} from '@react-aria/utils';
import React, {ElementType} from 'react';
import {SpectrumButtonProps} from '@react-types/button';
import {storiesOf} from '@storybook/react';
import {Text} from '@react-spectrum/text';
import {Tooltip, TooltipTrigger} from '@react-spectrum/tooltip';

const parameters = {
args: {
variant: 'cta'
},
argTypes: {
variant: {
control: {
type: 'radio',
options: ['cta', 'primary', 'secondary', 'negative', 'overBackground']
}
}
}
};

let actions = {
onPress: action('press'),
onPressStart: action('pressstart'),
onPressEnd: action('pressend')
};


storiesOf('Button', module)
.addParameters({providerSwitcher: {status: 'positive'}})
.addParameters({providerSwitcher: {status: 'positive'}, ...parameters})
.add(
'variant: cta',
() => render({variant: 'cta'})
'default',
(args) => render(args)
)
.add(
'with icon',
() => (
<Flex gap="size-200">
<Button
onPress={action('press')}
onPressStart={action('pressstart')}
onPressEnd={action('pressend')}
variant="primary">
<Bell />
<Text>Default</Text>
</Button>
<Button
onPress={action('press')}
onPressStart={action('pressstart')}
onPressEnd={action('pressend')}
isDisabled
variant="primary">
<Text>Disabled</Text>
<Bell />
</Button>
<Button
onPress={action('press')}
onPressStart={action('pressstart')}
onPressEnd={action('pressend')}
isQuiet
variant="primary">
<Bell />
<Text>Quiet</Text>
</Button>
</Flex>
)
(args) => renderIconText(args)
)
.add('icon only', () => (
<Button variant="cta">
<Bell />
</Button>
))
.add(
'variant: overBackground',
() => (
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
{render({variant: 'overBackground'})}
</div>
)
)
.add(
'variant: primary',
() => render({variant: 'primary'})
)
.add(
'variant: secondary',
() => render({variant: 'secondary'})
)
.add(
'variant: negative',
() => render({variant: 'negative'})
'icon only',
(args) => renderIconOnly(args)
)
.add(
'element: a',
() => render({elementType: 'a', variant: 'primary'})
(args) => render({elementType: 'a', ...args})
)
.add(
'element: a, href: \'//example.com\', target: \'_self\'',
() => render({elementType: 'a', href: '//example.com', target: '_self', variant: 'primary'})
(args) => render({elementType: 'a', href: '//example.com', target: '_self', ...args})
)
.add(
'element: a, rel: \'noopener noreferrer\'',
() => render({elementType: 'a', href: '//example.com', rel: 'noopener noreferrer', variant: 'primary'})
(args) => render({elementType: 'a', href: '//example.com', rel: 'noopener noreferrer', ...args})
)
.add(
'user-select:none on press test',
Expand All @@ -106,35 +79,105 @@ storiesOf('Button', module)
);

function render<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'primary'}) {
return (
let buttonProps = mergeProps(props, actions);

let buttons = (
<Flex gap="size-200">
<Button
onPress={action('press')}
onPressStart={action('pressstart')}
onPressEnd={action('pressend')}
{...props}>
<Button {...buttonProps}>
Default
</Button>
<Button
onPress={action('press')}
onPressStart={action('pressstart')}
onPressEnd={action('pressend')}
isDisabled
{...props}>
<Button {...buttonProps} isDisabled>
Disabled
</Button>
{props.variant !== 'cta' && (
<Button
onPress={action('press')}
onPressStart={action('pressstart')}
onPressEnd={action('pressend')}
isQuiet
{...props}>
Quiet
<Button {...buttonProps} isQuiet>
Quiet
</Button>
)}
</Flex>
);

if (props.variant === 'overBackground') {
return (
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
{buttons}
</div>
);
}

return buttons;
}

function renderIconText<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'primary'}) {
let buttonProps = mergeProps(props, actions);

let buttons = (
<Flex gap="size-200">
<Button {...buttonProps}>
Copy link
Copy Markdown
Member

@devongovett devongovett Sep 9, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add an aria-label here? I see an error in the accessibility tab:

image

<Bell />
<Text>Default</Text>
</Button>
<Button {...buttonProps} isDisabled>
<Bell />
<Text>Disabled</Text>
</Button>
{props.variant !== 'cta' && (
<Button {...buttonProps} isQuiet>
<Bell />
<Text>Quiet</Text>
</Button>
)}
</Flex>
);

if (props.variant === 'overBackground') {
return (
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
{buttons}
</div>
);
}

return buttons;
}

function renderIconOnly<T extends ElementType = 'button'>(props: SpectrumButtonProps<T> = {variant: 'primary'}) {
let buttonProps = mergeProps(props, actions);

let buttons = (
<Flex gap="size-200">
<TooltipTrigger offset={2}>
<Button {...buttonProps} aria-label="Notifications">
<Bell />
</Button>
<Tooltip>Notifications</Tooltip>
</TooltipTrigger>
<TooltipTrigger offset={2}>
<Button {...buttonProps} aria-label="Notifications (disabled)" isDisabled>
<Bell />
</Button>
<Tooltip>Notifications</Tooltip>
</TooltipTrigger>
{props.variant !== 'cta' && (
<TooltipTrigger offset={2}>
<Button {...buttonProps} isQuiet aria-label="Notifications (quiet)">
<Bell />
</Button>
<Tooltip>Notifications</Tooltip>
</TooltipTrigger>
)}
</Flex>
);

if (props.variant === 'overBackground') {
return (
<div style={{backgroundColor: 'rgb(15, 121, 125)', color: 'rgb(15, 121, 125)', padding: '15px 20px', display: 'inline-block'}}>
{buttons}
</div>
);
}

return buttons;
}

function Example() {
Expand Down