Skip to content

Commit

Permalink
Adding proper icon to Button vr stories.
Browse files Browse the repository at this point in the history
  • Loading branch information
KHMakoto committed Sep 12, 2022
1 parent 41bbb00 commit c031146
Showing 1 changed file with 49 additions and 37 deletions.
86 changes: 49 additions & 37 deletions apps/vr-tests-react-components/src/stories/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,11 @@ import { storiesOf } from '@storybook/react';
import * as React from 'react';
import Screener from 'screener-storybook/src/screener';
import { Button, CompoundButton, ToggleButton, MenuButton } from '@fluentui/react-button';
import { bundleIcon, CalendarMonthFilled, CalendarMonthRegular } from '@fluentui/react-icons';
import { makeStyles } from '@griffel/react';

const CalendarMonth = bundleIcon(CalendarMonthFilled, CalendarMonthRegular);

const steps = new Screener.Steps()
.snapshot('default', { cropTo: '.testWrapper' })
.hover('#button-id')
Expand Down Expand Up @@ -125,43 +128,43 @@ storiesOf('Button Converged', module)
{ includeHighContrast: true, includeDarkMode: true },
)
.addStory('Size small', () => (
<Button id={buttonId} icon="X" size="small">
<Button id={buttonId} icon={<CalendarMonth />} size="small">
Hello, world
</Button>
))
.addStory('Size large', () => (
<Button id={buttonId} icon="X" size="large">
<Button id={buttonId} icon={<CalendarMonth />} size="large">
Hello, world
</Button>
))
.addStory('Size small - with long text wrapping', () => {
const styles = useStyles();
return (
<Button id={buttonId} className={styles.longText} icon="X" size="small">
<Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
Long text wraps after it hits the max width of the component
</Button>
);
})
.addStory('Size medium - with long text wrapping', () => {
const styles = useStyles();
return (
<Button id={buttonId} className={styles.longText} icon="X" size="medium">
<Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
Long text wraps after it hits the max width of the component
</Button>
);
})
.addStory('Size large - with long text wrapping', () => {
const styles = useStyles();
return (
<Button id={buttonId} className={styles.longText} icon="X" size="large">
<Button id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
Long text wraps after it hits the max width of the component
</Button>
);
})
.addStory(
'With icon before content',
() => (
<Button id={buttonId} icon="X">
<Button id={buttonId} icon={<CalendarMonth />}>
Hello, world
</Button>
),
Expand All @@ -172,14 +175,14 @@ storiesOf('Button Converged', module)
.addStory(
'With icon after content',
() => (
<Button id={buttonId} icon="X" iconPosition="after">
<Button id={buttonId} icon={<CalendarMonth />} iconPosition="after">
Hello, world
</Button>
),
{ includeRtl: true },
)
.addStory('Icon only', () => <Button id={buttonId} icon="X" />)
.addStory('Circular and icon only', () => <Button id={buttonId} shape="circular" icon="X" />, {
.addStory('Icon only', () => <Button id={buttonId} icon={<CalendarMonth />} />)
.addStory('Circular and icon only', () => <Button id={buttonId} shape="circular" icon={<CalendarMonth />} />, {
includeRtl: true,
});

Expand Down Expand Up @@ -210,7 +213,7 @@ storiesOf('CompoundButton Converged', module)
.addStory(
'With icon before content',
() => (
<CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X">
<CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />}>
Hello, world
</CompoundButton>
),
Expand All @@ -219,7 +222,12 @@ storiesOf('CompoundButton Converged', module)
.addStory(
'With icon after content',
() => (
<CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" iconPosition="after">
<CompoundButton
id={buttonId}
secondaryContent="This is some secondary text"
icon={<CalendarMonth />}
iconPosition="after"
>
Hello, world
</CompoundButton>
),
Expand Down Expand Up @@ -279,12 +287,12 @@ storiesOf('CompoundButton Converged', module)
</CompoundButton>
))
.addStory('Size small', () => (
<CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" size="small">
<CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />} size="small">
Hello, world
</CompoundButton>
))
.addStory('Size large', () => (
<CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon="X" size="large">
<CompoundButton id={buttonId} secondaryContent="This is some secondary text" icon={<CalendarMonth />} size="large">
Hello, world
</CompoundButton>
))
Expand All @@ -295,7 +303,7 @@ storiesOf('CompoundButton Converged', module)
id={buttonId}
className={styles.longText}
secondaryContent="This is some secondary text"
icon="X"
icon={<CalendarMonth />}
size="small"
>
Long text wraps after it hits the max width of the component
Expand All @@ -309,7 +317,7 @@ storiesOf('CompoundButton Converged', module)
id={buttonId}
className={styles.longText}
secondaryContent="This is some secondary text"
icon="X"
icon={<CalendarMonth />}
size="medium"
>
Long text wraps after it hits the max width of the component
Expand All @@ -323,17 +331,21 @@ storiesOf('CompoundButton Converged', module)
id={buttonId}
className={styles.longText}
secondaryContent="This is some secondary text"
icon="X"
icon={<CalendarMonth />}
size="large"
>
Long text wraps after it hits the max width of the component
</CompoundButton>
);
})
.addStory('Icon only', () => <CompoundButton id={buttonId} icon="X" />)
.addStory('Circular and icon only', () => <CompoundButton id={buttonId} shape="circular" icon="X" />, {
includeRtl: true,
});
.addStory('Icon only', () => <CompoundButton id={buttonId} icon={<CalendarMonth />} />)
.addStory(
'Circular and icon only',
() => <CompoundButton id={buttonId} shape="circular" icon={<CalendarMonth />} />,
{
includeRtl: true,
},
);

storiesOf('ToggleButton Converged', module)
.addDecorator(story => <Screener steps={steps}>{story()}</Screener>)
Expand Down Expand Up @@ -395,51 +407,51 @@ storiesOf('ToggleButton Converged', module)
</ToggleButton>
))
.addStory('Size small', () => (
<ToggleButton id={buttonId} icon="X" size="small">
<ToggleButton id={buttonId} icon={<CalendarMonth />} size="small">
Hello, world
</ToggleButton>
))
.addStory('Size large', () => (
<ToggleButton id={buttonId} icon="X" size="large">
<ToggleButton id={buttonId} icon={<CalendarMonth />} size="large">
Hello, world
</ToggleButton>
))
.addStory('Size small - with long text wrapping', () => {
const styles = useStyles();
return (
<ToggleButton id={buttonId} className={styles.longText} icon="X" size="small">
<ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
Long text wraps after it hits the max width of the component
</ToggleButton>
);
})
.addStory('Size medium - with long text wrapping', () => {
const styles = useStyles();
return (
<ToggleButton id={buttonId} className={styles.longText} icon="X" size="medium">
<ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
Long text wraps after it hits the max width of the component
</ToggleButton>
);
})
.addStory('Size large - with long text wrapping', () => {
const styles = useStyles();
return (
<ToggleButton id={buttonId} className={styles.longText} icon="X" size="large">
<ToggleButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
Long text wraps after it hits the max width of the component
</ToggleButton>
);
})
.addStory('With icon before content', () => (
<ToggleButton id={buttonId} icon="X">
<ToggleButton id={buttonId} icon={<CalendarMonth />}>
Hello, world
</ToggleButton>
))
.addStory('With icon after content', () => (
<ToggleButton id={buttonId} icon="X" iconPosition="after">
<ToggleButton id={buttonId} icon={<CalendarMonth />} iconPosition="after">
Hello, world
</ToggleButton>
))
.addStory('Icon only', () => <ToggleButton id={buttonId} icon="X" />)
.addStory('Circular and icon only', () => <ToggleButton id={buttonId} shape="circular" icon="X" />)
.addStory('Icon only', () => <ToggleButton id={buttonId} icon={<CalendarMonth />} />)
.addStory('Circular and icon only', () => <ToggleButton id={buttonId} shape="circular" icon={<CalendarMonth />} />)
.addStory('Checked', () => (
<ToggleButton id={buttonId} checked>
Hello, world
Expand Down Expand Up @@ -515,43 +527,43 @@ storiesOf('MenuButton Converged', module)
</MenuButton>
))
.addStory('Size small', () => (
<MenuButton id={buttonId} icon="X" size="small">
<MenuButton id={buttonId} icon={<CalendarMonth />} size="small">
Hello, world
</MenuButton>
))
.addStory('Size large', () => (
<MenuButton id={buttonId} icon="X" size="large">
<MenuButton id={buttonId} icon={<CalendarMonth />} size="large">
Hello, world
</MenuButton>
))
.addStory('Size small - with long text wrapping', () => {
const styles = useStyles();
return (
<MenuButton id={buttonId} className={styles.longText} icon="X" size="small">
<MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="small">
Long text wraps after it hits the max width of the component
</MenuButton>
);
})
.addStory('Size medium - with long text wrapping', () => {
const styles = useStyles();
return (
<MenuButton id={buttonId} className={styles.longText} icon="X" size="medium">
<MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="medium">
Long text wraps after it hits the max width of the component
</MenuButton>
);
})
.addStory('Size large - with long text wrapping', () => {
const styles = useStyles();
return (
<MenuButton id={buttonId} className={styles.longText} icon="X" size="large">
<MenuButton id={buttonId} className={styles.longText} icon={<CalendarMonth />} size="large">
Long text wraps after it hits the max width of the component
</MenuButton>
);
})
.addStory('With icon', () => (
<MenuButton id={buttonId} icon="X">
<MenuButton id={buttonId} icon={<CalendarMonth />}>
Hello, world
</MenuButton>
))
.addStory('Icon only', () => <MenuButton id={buttonId} icon="X" />)
.addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon="X" />);
.addStory('Icon only', () => <MenuButton id={buttonId} icon={<CalendarMonth />} />)
.addStory('Circular and icon only', () => <MenuButton id={buttonId} shape="circular" icon={<CalendarMonth />} />);

0 comments on commit c031146

Please sign in to comment.