diff --git a/change/@fluentui-react-avatar-7a2b7723-c2ad-4bfb-b903-28b059b54fd6.json b/change/@fluentui-react-avatar-7a2b7723-c2ad-4bfb-b903-28b059b54fd6.json new file mode 100644 index 0000000000000..9805ab39fe80a --- /dev/null +++ b/change/@fluentui-react-avatar-7a2b7723-c2ad-4bfb-b903-28b059b54fd6.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "docs: Adding AvatarGroup stories.", + "packageName": "@fluentui/react-avatar", + "email": "esteban.230@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts index d550d40ccc5e0..56804738b1552 100644 --- a/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts +++ b/packages/react-components/react-avatar/src/components/AvatarGroup/useAvatarGroupStyles.ts @@ -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, diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupColor.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupColor.stories.tsx new file mode 100644 index 0000000000000..b85672cc38a0f --- /dev/null +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupColor.stories.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import { AvatarGroup } from '../../AvatarGroup'; +import { AvatarGroupItem } from '../../AvatarGroupItem'; + +export const Color = () => { + return ( + + + + + + + + + + + + ); +}; + +Color.parameters = { + docs: { + description: { + story: 'An AvatarGroup allows AvatarGroupItems to override the default color.', + }, + }, +}; diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx new file mode 100644 index 0000000000000..714992d00f1fe --- /dev/null +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupIndicator.stories.tsx @@ -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 ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +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.`, + }, + }, +}; diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupLayout.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupLayout.stories.tsx index efd2002c8c2e4..f12462eefd376 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupLayout.stories.tsx +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupLayout.stories.tsx @@ -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 ( - <> -
- - - - - - - - - - - -
-
- - - - - - - - - - - -
-
- - - - - - - - - - - -
- +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
); }; + +Layout.parameters = { + docs: { + description: { + story: `An AvatarGroup supports support three layouts: spread, stack, and pie. The default is spread.`, + }, + }, +}; diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupMaxAvatars.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupMaxAvatars.stories.tsx new file mode 100644 index 0000000000000..9cba7b246cc59 --- /dev/null +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupMaxAvatars.stories.tsx @@ -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 ( +
+ + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +MaxAvatars.parameters = { + docs: { + description: { + story: `An AvatarGroup supports a custom number of AvatarGroupItems to render before overflowing. + The default is 5.`, + }, + }, +}; diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx new file mode 100644 index 0000000000000..5ab0430e45ac4 --- /dev/null +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizePie.stories.tsx @@ -0,0 +1,183 @@ +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 SizePie = () => { + const styles = useStyles(); + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +SizePie.parameters = { + docs: { + description: { + story: 'An AvatarGroup with `pie` layout supports a range of sizes from 16 to 128. The default is 32.', + }, + }, +}; diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx new file mode 100644 index 0000000000000..bb0f2c820f27b --- /dev/null +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeSpread.stories.tsx @@ -0,0 +1,183 @@ +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 SizeSpread = () => { + const styles = useStyles(); + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +SizeSpread.parameters = { + docs: { + description: { + story: 'An AvatarGroup with `spread` layout supports a range of sizes from 16 to 128. The default is 32.', + }, + }, +}; diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx new file mode 100644 index 0000000000000..6a4d8cc9713e2 --- /dev/null +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/AvatarGroupSizeStack.stories.tsx @@ -0,0 +1,183 @@ +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 SizeStack = () => { + const styles = useStyles(); + + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +}; + +SizeStack.parameters = { + docs: { + description: { + story: 'An AvatarGroup with `stack` layout supports a range of sizes from 16 to 128. The default is 32.', + }, + }, +}; diff --git a/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.beta.tsx b/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.beta.tsx index 790503579e70a..2f62c9313b3c4 100644 --- a/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.beta.tsx +++ b/packages/react-components/react-avatar/src/stories/AvatarGroup/index.stories.beta.tsx @@ -5,6 +5,12 @@ import bestPracticesMd from './AvatarGroupBestPractices.md'; export { Default } from './AvatarGroupDefault.stories'; export { Layout } from './AvatarGroupLayout.stories'; +export { SizeSpread } from './AvatarGroupSizeSpread.stories'; +export { SizeStack } from './AvatarGroupSizeStack.stories'; +export { SizePie } from './AvatarGroupSizePie.stories'; +export { MaxAvatars } from './AvatarGroupMaxAvatars.stories'; +export { Indicator } from './AvatarGroupIndicator.stories'; +export { Color } from './AvatarGroupColor.stories'; export default { title: 'Preview Components/AvatarGroup',