Add fullWidth prop for AlphaStack (#7309)

Co-authored-by: Lo Kim <[email protected]>

Author: aveline

.changeset/stale-penguins-love.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': patch
+---
+
+Added `fullWidth` prop to `AlphaStack` and updated styleguide docs

polaris-react/src/components/AlphaStack/AlphaStack.scss

@@ -8,3 +8,9 @@
     max-width: 100%;
   }
 }
+
+.fullWidth {
+  > * {
+    width: 100%;
+  }
+}

polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx

@@ -49,3 +49,14 @@ export function AlignEnd() {
     </AlphaStack>
   );
 }
+
+export function FullWidthChildren() {
+  return (
+    <AlphaStack fullWidth>
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}

polaris-react/src/components/AlphaStack/AlphaStack.tsx

@@ -10,18 +10,24 @@ type Align = 'start' | 'end' | 'center';
 export interface AlphaStackProps {
   /** Elements to display inside stack */
   children?: React.ReactNode;
-  /** Adjust spacing between elements */
-  spacing?: SpacingSpaceScale;
   /** Adjust vertical alignment of elements */
   align?: Align;
+  /** Toggle elements to be full width */
+  fullWidth?: boolean;
+  /** Adjust spacing between elements */
+  spacing?: SpacingSpaceScale;
 }
 
 export const AlphaStack = ({
   children,
-  spacing = '4',
   align = 'start',
+  fullWidth,
+  spacing = '4',
 }: AlphaStackProps) => {
-  const className = classNames(styles.AlphaStack);
+  const className = classNames(
+    styles.AlphaStack,
+    fullWidth && styles.fullWidth,
+  );
 
   const style = {
     '--pc-stack-align': align ? `${align}` : '',

polaris.shopify.com/content/components/alpha-stack/index.md

@@ -18,4 +18,8 @@ examples:
     title: Vertical spacing
     description: >-
       Vertical spacing for children can be set with the spacing property. Spacing options are provided using our spacing tokens.
+  - fileName: alpha-stack-with-full-width-children.tsx
+    title: Full width children
+    description: >-
+      Set children to full width
 ---

polaris.shopify.com/pages/examples/alpha-stack-with-full-width-children.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import {AlphaStack, Badge, Text} from '@shopify/polaris';
+
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function AlphaStackWithFullWidthChildrenExample() {
+  return (
+    <div style={{width: '500px'}}>
+      <AlphaStack fullWidth>
+        <Text variant="heading4xl" as="h2">
+          AlphaStack
+        </Text>
+        <Badge>One</Badge>
+        <Badge>Two</Badge>
+        <Badge>Three</Badge>
+      </AlphaStack>
+    </div>
+  );
+}
+
+export default withPolarisExample(AlphaStackWithFullWidthChildrenExample);