diff --git a/src/components/Avatar/Avatar.types.ts b/src/components/Avatar/Avatar.types.ts index dba1e84df..0a076d331 100644 --- a/src/components/Avatar/Avatar.types.ts +++ b/src/components/Avatar/Avatar.types.ts @@ -172,6 +172,11 @@ interface MaxAvatarProps extends BaseAvatarProps { interface AvatarListProps extends Omit, 'footer' | 'header' | 'layout'> {} +export enum AvatarGroupVariant { + Overlapped = 'overlapped', + Spaced = 'spaced', +} + export interface AvatarGroupProps extends OcBaseProps { /** * Avatar group List props. @@ -186,6 +191,11 @@ export interface AvatarGroupProps extends OcBaseProps { * @default '18px' */ fontSize?: string; + /** + * Avatar grouping variant + * @default AvatarGroupVariant.Overlapped + */ + groupVariant?: AvatarGroupVariant; /** * Avatar group max props. */ diff --git a/src/components/Avatar/AvatarGroup.stories.tsx b/src/components/Avatar/AvatarGroup.stories.tsx index 4b3ed220b..9b4608744 100644 --- a/src/components/Avatar/AvatarGroup.stories.tsx +++ b/src/components/Avatar/AvatarGroup.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Avatar, AvatarGroup } from '.'; +import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { Avatar, AvatarGroup, AvatarGroupVariant } from '.'; import { Tooltip, TooltipSize, TooltipTheme } from '../Tooltip'; export default { @@ -131,6 +131,8 @@ const Basic_Story: ComponentStory = (args) => ( export const Basic = Basic_Story.bind({}); +export const Basic_Spaced = Basic_Story.bind({}); + const List_Story: ComponentStory = (args) => ( = (args) => ( export const List_Group = List_Story.bind({}); +export const List_Group_Spaced = List_Story.bind({}); + const avatarGroupArgs: Object = { classNames: 'my-avatar-group-class', 'data-test-id': 'my-avatar-group-test-id', @@ -179,6 +183,16 @@ Basic.args = { ...avatarGroupArgs, }; +Basic_Spaced.args = { + ...avatarGroupArgs, + groupVariant: AvatarGroupVariant.Spaced, +}; + List_Group.args = { ...avatarGroupArgs, }; + +List_Group_Spaced.args = { + ...avatarGroupArgs, + groupVariant: AvatarGroupVariant.Spaced, +}; diff --git a/src/components/Avatar/AvatarGroup.tsx b/src/components/Avatar/AvatarGroup.tsx index 99b99dfee..9ced310e9 100644 --- a/src/components/Avatar/AvatarGroup.tsx +++ b/src/components/Avatar/AvatarGroup.tsx @@ -1,5 +1,5 @@ import React, { Ref } from 'react'; -import { Avatar, AvatarGroupProps } from '.'; +import { Avatar, AvatarGroupProps, AvatarGroupVariant } from '.'; import { List } from '../List'; import { Tooltip } from '../Tooltip'; import { useCanvasDirection } from '../../hooks/useCanvasDirection'; @@ -18,6 +18,7 @@ export const AvatarGroup: React.FC = React.forwardRef( avatarListProps, children, classNames, + groupVariant = AvatarGroupVariant.Overlapped, maxProps, size, style, @@ -31,6 +32,7 @@ export const AvatarGroup: React.FC = React.forwardRef( const avatarGroupClassNames: string = mergeClasses([ styles.avatarGroup, + { [styles.spaced]: groupVariant === AvatarGroupVariant.Spaced }, { [styles.avatarGroupRtl]: htmlDir === 'rtl' }, classNames, ]); diff --git a/src/components/Avatar/Styles/group.scss b/src/components/Avatar/Styles/group.scss index 2ad8cce56..a9e357611 100644 --- a/src/components/Avatar/Styles/group.scss +++ b/src/components/Avatar/Styles/group.scss @@ -5,6 +5,12 @@ margin-left: -$space-xs; } + &.spaced { + :not(:first-child):not(.avatar-group-tooltip) { + margin-left: -$space-xxxs; + } + } + .avatar { border: $space-xxxs solid var(--background-color); } diff --git a/src/components/Avatar/Styles/rtl.scss b/src/components/Avatar/Styles/rtl.scss index 8fa5b66bd..c3e59a453 100644 --- a/src/components/Avatar/Styles/rtl.scss +++ b/src/components/Avatar/Styles/rtl.scss @@ -4,5 +4,12 @@ margin-right: -$space-xs; margin-left: 0; } + + &.spaced { + :not(:first-child):not(.avatar-group-spaced-tooltip) { + margin-right: -$space-xxxs; + margin-left: 0; + } + } } } diff --git a/src/octuple.ts b/src/octuple.ts index e2054553e..4b87f6425 100644 --- a/src/octuple.ts +++ b/src/octuple.ts @@ -4,7 +4,13 @@ import { AccordionSize, } from './components/Accordion'; -import { AVATAR_THEME_SET, Avatar, AvatarGroup } from './components/Avatar'; +import { + AVATAR_THEME_SET, + Avatar, + AvatarGroup, + AvatarGroupVariant, + StatusItemsPosition, +} from './components/Avatar'; import { Badge } from './components/Badge'; @@ -204,6 +210,7 @@ export { AVATAR_THEME_SET, Avatar, AvatarGroup, + AvatarGroupVariant, Badge, ButtonIconAlign, ButtonShape, @@ -316,6 +323,7 @@ export { Stack, Stat, StatThemeName, + StatusItemsPosition, StatValidationStatus, Step, StepSize,