AvatarStack: document variant and shape props in docs and Storybook (#7769)

Author: liuliu-dev

packages/react/src/AvatarStack/AvatarStack.docs.json

@@ -52,6 +52,18 @@
       "defaultValue": "false",
       "description": "Do not spread the avatars on hover"
     },
+    {
+      "name": "variant",
+      "type": "'cascade' | 'stack'",
+      "defaultValue": "'cascade'",
+      "description": "The style of overlapping avatars. 'cascade' increases the overlap for 3rd+ avatars, while 'stack' uses a uniform overlap."
+    },
+    {
+      "name": "shape",
+      "type": "'circle' | 'square'",
+      "defaultValue": "'circle'",
+      "description": "The shape of the avatars."
+    },
     {
       "name": "size",
       "type": "number | { narrow?: number; regular?: number; wide?: number; }",

packages/react/src/AvatarStack/AvatarStack.stories.tsx

@@ -26,7 +26,13 @@ export const Default = () => (
 )
 
 export const Playground: StoryFn<Args> = args => (
-  <AvatarStack size={parseSizeFromArgs(args)} alignRight={args.alignRight} disableExpand={args.disableExpand}>
+  <AvatarStack
+    size={parseSizeFromArgs(args)}
+    alignRight={args.alignRight}
+    disableExpand={args.disableExpand}
+    variant={args.variant}
+    shape={args.shape}
+  >
     <Avatar alt="Primer logo" src="https://avatars.githubusercontent.com/primer" />
     <Avatar alt="GitHub logo" src="https://avatars.githubusercontent.com/github" />
     <Avatar alt="Atom logo" src="https://avatars.githubusercontent.com/atom" />