Skip to content

docs(react-avatar): Adding more AvatarGroup stories #23493

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
sopranopillow merged 5 commits into from
Jun 11, 2022
Merged

docs(react-avatar): Adding more AvatarGroup stories #23493

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
cb156f4
docs: Adding AvatarGroup stories.
sopranopillow Jun 10, 2022
e3f689d
change fileS
sopranopillow Jun 10, 2022
1c98d88
fixing typo
sopranopillow Jun 10, 2022
6708c7f
adding requested changes
sopranopillow Jun 10, 2022
3bc2a26
Update packages/react-components/react-avatar/src/stories/AvatarGroup…
sopranopillow Jun 10, 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
7 changes: 7 additions & 0 deletions change/@fluentui-react-avatar-7a2b7723-c2ad-4bfb-b903-28b059b54fd6.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "docs: Adding AvatarGroup stories.",
"packageName": "@fluentui/react-avatar",
"email": "[email protected]",
"dependentChangeType": "patch"
}
1 change: 1 addition & 0 deletions packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,7 @@ export const useAvatarGroupStyles_unstable = (state: AvatarGroupState): AvatarGr
sizeStyles[size],
overflowButtonStyles.base,
overflowButtonStyles.focusIndicator,
...overflowButtonClasses,
layout !== 'pie' && overflowButtonStyles.states,
layout === 'pie' && overflowButtonStyles.pie,
groupChildClassName,
Expand Down
27 changes: 27 additions & 0 deletions packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupColor.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import * as React from 'react';
import { AvatarGroup } from '../../AvatarGroup';
import { AvatarGroupItem } from '../../AvatarGroupItem';

export const Color = () => {
return (
<AvatarGroup>
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
<AvatarGroupItem color="blue" name="Cameron Evans" />
<AvatarGroupItem color="forest" name="Elvia Atkins" />
<AvatarGroupItem color="red" name="Katri Athokas" />
</AvatarGroup>
);
};

Color.parameters = {
docs: {
description: {
story: 'An AvatarGroup allows AvatarGroupItems to override the default color.',
},
},
};
52 changes: 52 additions & 0 deletions ...es/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import * as React from 'react';
import { AvatarGroup } from '../../AvatarGroup';
import { AvatarGroupItem } from '../../AvatarGroupItem';
import { makeStyles } from '@griffel/react';

const useStyles = makeStyles({
root: {
display: 'grid',
flexDirection: 'column',
rowGap: '10px',
},
});

export const Indicator = () => {
const styles = useStyles();

return (
<div className={styles.root}>
<AvatarGroup overflowIndicator="count">
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
<AvatarGroup overflowIndicator="icon">
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
</div>
);
};

Indicator.parameters = {
docs: {
description: {
story: `An AvatarGroup supports an icon and a count overflow indicator.
When size is less than 24, then icon will be used by default.`,
},
},
};
95 changes: 54 additions & 41 deletions packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupLayout.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,49 +1,62 @@
import * as React from 'react';
import { AvatarGroup } from '../../AvatarGroup';
import { AvatarGroupItem } from '../../AvatarGroupItem';
import { makeStyles } from '@griffel/react';

const useStyles = makeStyles({
root: {
display: 'grid',
flexDirection: 'column',
rowGap: '10px',
},
});

export const Layout = () => {
const styles = useStyles();

return (
<>
<div>
<AvatarGroup layout="spread">
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
</div>
<div>
<AvatarGroup layout="stack">
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
</div>
<div>
<AvatarGroup layout="pie">
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
</div>
</>
<div className={styles.root}>
<AvatarGroup layout="spread">
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
<AvatarGroup layout="stack">
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
<AvatarGroup layout="pie">
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
</div>
);
};

Layout.parameters = {
docs: {
description: {
story: `An AvatarGroup supports support three layouts: spread, stack, and pie. The default is spread.`,
},
},
};
52 changes: 52 additions & 0 deletions ...s/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupMaxAvatars.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import * as React from 'react';
import { AvatarGroup } from '../../AvatarGroup';
import { AvatarGroupItem } from '../../AvatarGroupItem';
import { makeStyles } from '@griffel/react';

const useStyles = makeStyles({
root: {
display: 'grid',
flexDirection: 'column',
rowGap: '10px',
},
});

export const MaxAvatars = () => {
const styles = useStyles();

return (
<div className={styles.root}>
<AvatarGroup maxAvatars={8}>
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
<AvatarGroup maxAvatars={3}>
<AvatarGroupItem name="Katri Athokas" />
<AvatarGroupItem name="Elvia Atkins" />
<AvatarGroupItem name="Cameron Evans" />
<AvatarGroupItem name="Wanda Howard" />
<AvatarGroupItem name="Mona Kane" />
<AvatarGroupItem name="Allan Munger" />
<AvatarGroupItem name="Daisy Phillips" />
<AvatarGroupItem name="Robert Tolbert" />
<AvatarGroupItem name="Kevin Sturgis" />
</AvatarGroup>
</div>
);
};

MaxAvatars.parameters = {
docs: {
description: {
story: `An AvatarGroup supports a custom number of AvatarGroupItems to render before overflowing.
The default is 5.`,
},
},
};
Loading