feat: Spaced avatar group style

src/components/Avatar/Avatar.types.ts

@@ -172,6 +172,11 @@ interface MaxAvatarProps extends BaseAvatarProps {
 interface AvatarListProps
   extends Omit<ListProps<ReactNode>, 'footer' | 'header' | 'layout'> {}
 
+export enum AvatarGroupVariant {
+  Overlapped = 'overlapped',
+  Spaced = 'spaced',
+}
+
 export interface AvatarGroupProps extends OcBaseProps<HTMLDivElement> {
   /**
    * Avatar group List props.
@@ -186,6 +191,11 @@ export interface AvatarGroupProps extends OcBaseProps<HTMLDivElement> {
    * @default '18px'
    */
   fontSize?: string;
+  /**
+   * Avatar grouping variant
+   * @default AvatarGroupVariant.Overlapped
+   */
+  groupVariant?: AvatarGroupVariant;
   /**
    * Avatar group max props.
    */

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<typeof AvatarGroup> = (args) => (
 
 export const Basic = Basic_Story.bind({});
 
+export const Basic_Spaced = Basic_Story.bind({});
+
 const List_Story: ComponentStory<typeof AvatarGroup> = (args) => (
   <AvatarGroup
     {...args}
@@ -165,6 +167,8 @@ const List_Story: ComponentStory<typeof AvatarGroup> = (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,
+};

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<AvatarGroupProps> = React.forwardRef(
       avatarListProps,
       children,
       classNames,
+      groupVariant = AvatarGroupVariant.Overlapped,
       maxProps,
       size,
       style,
@@ -31,6 +32,7 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.forwardRef(
 
     const avatarGroupClassNames: string = mergeClasses([
       styles.avatarGroup,
+      { [styles.spaced]: groupVariant === AvatarGroupVariant.Spaced },
       { [styles.avatarGroupRtl]: htmlDir === 'rtl' },
       classNames,
     ]);

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);
   }

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;
+      }
+    }
   }
 }

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,