From 21f54af4752079ede6ec2166f691bfb880a48f8b Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 26 Aug 2022 10:30:08 -0400
Subject: [PATCH 01/13] Add AlphaStack component

---
 .../src/components/AlphaStack/AlphaStack.tsx  |  40 +++++++
 .../src/components/AlphaStack/Stack.scss      | 103 ++++++++++++++++++
 .../AlphaStack/components/Item/Item.tsx       |  20 ++++
 .../AlphaStack/components/Item/index.ts       |   1 +
 .../components/AlphaStack/components/index.ts |   1 +
 .../src/components/AlphaStack/index.ts        |   1 +
 polaris-react/src/index.ts                    |   3 +
 7 files changed, 169 insertions(+)
 create mode 100644 polaris-react/src/components/AlphaStack/AlphaStack.tsx
 create mode 100644 polaris-react/src/components/AlphaStack/Stack.scss
 create mode 100644 polaris-react/src/components/AlphaStack/components/Item/Item.tsx
 create mode 100644 polaris-react/src/components/AlphaStack/components/Item/index.ts
 create mode 100644 polaris-react/src/components/AlphaStack/components/index.ts
 create mode 100644 polaris-react/src/components/AlphaStack/index.ts

diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
new file mode 100644
index 00000000000..e7455242f5f
--- /dev/null
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import type {spacing} from '@shopify/polaris-tokens';
+
+import {classNames, variationName} from '../../utilities/css';
+import {elementChildren, wrapWithComponent} from '../../utilities/components';
+
+import styles from './Stack.scss';
+import {Item} from './components';
+
+type SpacingTokenGroup = typeof spacing;
+type SpacingTokenName = keyof SpacingTokenGroup;
+
+// TODO: Bring this logic into tokens
+type Spacing = SpacingTokenName extends `space-${infer Scale}` ? Scale : never;
+
+type Alignment = 'left' | 'right' | 'center';
+
+export interface AlphaStackProps {
+  /** Elements to display inside stack */
+  children?: React.ReactNode;
+  /** Adjust spacing between elements */
+  spacing?: Spacing;
+  /** Adjust vertical alignment of elements */
+  alignment?: Alignment;
+}
+
+export const AlphaStack = ({children, spacing, alignment}: AlphaStackProps) => {
+  const className = classNames(
+    styles.Stack,
+    spacing && styles[variationName('spacing', spacing)],
+    alignment && styles[variationName('alignment', alignment)],
+  );
+
+  const itemMarkup = elementChildren(children).map((child, index) => {
+    const props = {key: index};
+    return wrapWithComponent(child, Item, props);
+  });
+
+  return <div className={className}>{itemMarkup}</div>;
+};
diff --git a/polaris-react/src/components/AlphaStack/Stack.scss b/polaris-react/src/components/AlphaStack/Stack.scss
new file mode 100644
index 00000000000..1835c6b527e
--- /dev/null
+++ b/polaris-react/src/components/AlphaStack/Stack.scss
@@ -0,0 +1,103 @@
+.Stack {
+  --pc-stack-spacing: var(--p-space-4);
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin-top: calc(-1 * var(--pc-stack-spacing));
+  margin-left: calc(-1 * var(--pc-stack-spacing));
+
+  > .Item {
+    margin-top: var(--pc-stack-spacing);
+    margin-left: var(--pc-stack-spacing);
+    max-width: 100%;
+  }
+}
+
+.spacing0 {
+  --pc-stack-spacing: var(--p-space-0);
+}
+
+.spacing025 {
+  --pc-stack-spacing: var(--p-space-025);
+}
+
+.spacing05 {
+  --pc-stack-spacing: var(--p-space-05);
+}
+
+.spacin1 {
+  --pc-stack-spacing: var(--p-space1);
+}
+
+.spacing2 {
+  --pc-stack-spacing: var(--p-space-2);
+}
+
+.spacing3 {
+  --pc-stack-spacing: var(--p-space-3);
+}
+
+.spacing4 {
+  --pc-stack-spacing: var(--p-space-4);
+}
+
+.spacing5 {
+  --pc-stack-spacing: var(--p-space-5);
+}
+
+.spacing6 {
+  --pc-stack-spacing: var(--p-space-6);
+}
+
+.spacing8 {
+  --pc-stack-spacing: var(--p-space-8);
+}
+
+.spacing10 {
+  --pc-stack-spacing: var(--p-space-10);
+}
+
+.spacing12 {
+  --pc-stack-spacing: var(--p-space-12);
+}
+
+.spacing16 {
+  --pc-stack-spacing: var(--p-space-16);
+}
+
+.spacing20 {
+  --pc-stack-spacing: var(--p-space-20);
+}
+
+.spacing24 {
+  --pc-stack-spacing: var(--p-space-24);
+}
+
+.spacing28 {
+  --pc-stack-spacing: var(--p-space-28);
+}
+
+.spacing32 {
+  --pc-stack-spacing: var(--p-space-32);
+}
+
+.alignmentLeft {
+  align-items: flex-start;
+}
+
+.alignmentRight {
+  align-items: flex-end;
+}
+
+.alignmentCenter {
+  align-items: center;
+}
+
+.Item {
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.Item-fill {
+  flex: 1 1 auto;
+}
diff --git a/polaris-react/src/components/AlphaStack/components/Item/Item.tsx b/polaris-react/src/components/AlphaStack/components/Item/Item.tsx
new file mode 100644
index 00000000000..404ba97c457
--- /dev/null
+++ b/polaris-react/src/components/AlphaStack/components/Item/Item.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {classNames} from '../../../../utilities/css';
+import styles from '../../Stack.scss';
+
+export interface ItemProps {
+  /** Elements to display inside item */
+  children?: React.ReactNode;
+  /** Fill the remaining horizontal space in the stack with the item  */
+  fill?: boolean;
+  /**
+   * @default false
+   */
+}
+
+export function Item({children, fill}: ItemProps) {
+  const className = classNames(styles.Item, fill && styles['Item-fill']);
+
+  return <div className={className}>{children}</div>;
+}
diff --git a/polaris-react/src/components/AlphaStack/components/Item/index.ts b/polaris-react/src/components/AlphaStack/components/Item/index.ts
new file mode 100644
index 00000000000..c924835a042
--- /dev/null
+++ b/polaris-react/src/components/AlphaStack/components/Item/index.ts
@@ -0,0 +1 @@
+export * from './Item';
diff --git a/polaris-react/src/components/AlphaStack/components/index.ts b/polaris-react/src/components/AlphaStack/components/index.ts
new file mode 100644
index 00000000000..c924835a042
--- /dev/null
+++ b/polaris-react/src/components/AlphaStack/components/index.ts
@@ -0,0 +1 @@
+export * from './Item';
diff --git a/polaris-react/src/components/AlphaStack/index.ts b/polaris-react/src/components/AlphaStack/index.ts
new file mode 100644
index 00000000000..832515641aa
--- /dev/null
+++ b/polaris-react/src/components/AlphaStack/index.ts
@@ -0,0 +1 @@
+export * from './AlphaStack';
diff --git a/polaris-react/src/index.ts b/polaris-react/src/index.ts
index ff69562764e..271a91a732a 100644
--- a/polaris-react/src/index.ts
+++ b/polaris-react/src/index.ts
@@ -46,6 +46,9 @@ export type {
 export {ActionMenu} from './components/ActionMenu';
 export type {ActionMenuProps} from './components/ActionMenu';
 
+export {AlphaStack} from './components/AlphaStack';
+export type {AlphaStackProps} from './components/AlphaStack';
+
 export {Autocomplete} from './components/Autocomplete';
 export type {AutocompleteProps} from './components/Autocomplete';
 

From d5b50cc4983795c90f59281cd1d51daba4304dd5 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 26 Aug 2022 13:22:38 -0400
Subject: [PATCH 02/13] Update AlphaStack

---
 .../src/components/AlphaStack/AlphaStack.tsx       |  8 ++++----
 polaris-react/src/components/AlphaStack/Stack.scss | 14 +++++---------
 .../components/AlphaStack/components/Item/Item.tsx |  6 ++----
 3 files changed, 11 insertions(+), 17 deletions(-)

diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
index e7455242f5f..0dfdba93361 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
@@ -13,7 +13,7 @@ type SpacingTokenName = keyof SpacingTokenGroup;
 // TODO: Bring this logic into tokens
 type Spacing = SpacingTokenName extends `space-${infer Scale}` ? Scale : never;
 
-type Alignment = 'left' | 'right' | 'center';
+type Align = 'start' | 'end' | 'center';
 
 export interface AlphaStackProps {
   /** Elements to display inside stack */
@@ -21,14 +21,14 @@ export interface AlphaStackProps {
   /** Adjust spacing between elements */
   spacing?: Spacing;
   /** Adjust vertical alignment of elements */
-  alignment?: Alignment;
+  align?: Align;
 }
 
-export const AlphaStack = ({children, spacing, alignment}: AlphaStackProps) => {
+export const AlphaStack = ({children, spacing, align}: AlphaStackProps) => {
   const className = classNames(
     styles.Stack,
     spacing && styles[variationName('spacing', spacing)],
-    alignment && styles[variationName('alignment', alignment)],
+    align && styles[variationName('align', align)],
   );
 
   const itemMarkup = elementChildren(children).map((child, index) => {
diff --git a/polaris-react/src/components/AlphaStack/Stack.scss b/polaris-react/src/components/AlphaStack/Stack.scss
index 1835c6b527e..1679c9e61b0 100644
--- a/polaris-react/src/components/AlphaStack/Stack.scss
+++ b/polaris-react/src/components/AlphaStack/Stack.scss
@@ -2,7 +2,7 @@
   --pc-stack-spacing: var(--p-space-4);
   display: flex;
   flex-direction: column;
-  align-items: stretch;
+  align-items: start;
   margin-top: calc(-1 * var(--pc-stack-spacing));
   margin-left: calc(-1 * var(--pc-stack-spacing));
 
@@ -25,7 +25,7 @@
   --pc-stack-spacing: var(--p-space-05);
 }
 
-.spacin1 {
+.spacing1 {
   --pc-stack-spacing: var(--p-space1);
 }
 
@@ -81,15 +81,15 @@
   --pc-stack-spacing: var(--p-space-32);
 }
 
-.alignmentLeft {
+.alignStart {
   align-items: flex-start;
 }
 
-.alignmentRight {
+.alignEnd {
   align-items: flex-end;
 }
 
-.alignmentCenter {
+.alignCenter {
   align-items: center;
 }
 
@@ -97,7 +97,3 @@
   flex: 0 0 auto;
   min-width: 0;
 }
-
-.Item-fill {
-  flex: 1 1 auto;
-}
diff --git a/polaris-react/src/components/AlphaStack/components/Item/Item.tsx b/polaris-react/src/components/AlphaStack/components/Item/Item.tsx
index 404ba97c457..f5b30ca2203 100644
--- a/polaris-react/src/components/AlphaStack/components/Item/Item.tsx
+++ b/polaris-react/src/components/AlphaStack/components/Item/Item.tsx
@@ -6,15 +6,13 @@ import styles from '../../Stack.scss';
 export interface ItemProps {
   /** Elements to display inside item */
   children?: React.ReactNode;
-  /** Fill the remaining horizontal space in the stack with the item  */
-  fill?: boolean;
   /**
    * @default false
    */
 }
 
-export function Item({children, fill}: ItemProps) {
-  const className = classNames(styles.Item, fill && styles['Item-fill']);
+export function Item({children}: ItemProps) {
+  const className = classNames(styles.Item);
 
   return <div className={className}>{children}</div>;
 }

From 9602707d04d97113ec5c3901692b6648eb54ebf7 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Mon, 29 Aug 2022 13:57:33 -0400
Subject: [PATCH 03/13] add changeset

---
 .changeset/poor-kiwis-travel.md                        | 5 +++++
 polaris-react/src/components/AlphaStack/AlphaStack.tsx | 2 ++
 2 files changed, 7 insertions(+)
 create mode 100644 .changeset/poor-kiwis-travel.md

diff --git a/.changeset/poor-kiwis-travel.md b/.changeset/poor-kiwis-travel.md
new file mode 100644
index 00000000000..713cd12905f
--- /dev/null
+++ b/.changeset/poor-kiwis-travel.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Add `AlphaStack` component
diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
index 0dfdba93361..0e50de39cf2 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
@@ -38,3 +38,5 @@ export const AlphaStack = ({children, spacing, align}: AlphaStackProps) => {
 
   return <div className={className}>{itemMarkup}</div>;
 };
+
+AlphaStack.Item = Item;

From af58578df1bc447cb4069a65dc349d1af7e95b78 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Tue, 30 Aug 2022 09:12:44 -0400
Subject: [PATCH 04/13] Fix token name

---
 polaris-react/src/components/AlphaStack/Stack.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/polaris-react/src/components/AlphaStack/Stack.scss b/polaris-react/src/components/AlphaStack/Stack.scss
index 1679c9e61b0..f36e84ae4a1 100644
--- a/polaris-react/src/components/AlphaStack/Stack.scss
+++ b/polaris-react/src/components/AlphaStack/Stack.scss
@@ -26,7 +26,7 @@
 }
 
 .spacing1 {
-  --pc-stack-spacing: var(--p-space1);
+  --pc-stack-spacing: var(--p-space-1);
 }
 
 .spacing2 {

From c295e9a73955b58e428f5bfa22aa767ebd6e191f Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Tue, 30 Aug 2022 16:20:36 -0400
Subject: [PATCH 05/13] Remove `Item` component

---
 .../AlphaStack/components/Item/Item.tsx        | 18 ------------------
 .../AlphaStack/components/Item/index.ts        |  1 -
 .../components/AlphaStack/components/index.ts  |  1 -
 3 files changed, 20 deletions(-)
 delete mode 100644 polaris-react/src/components/AlphaStack/components/Item/Item.tsx
 delete mode 100644 polaris-react/src/components/AlphaStack/components/Item/index.ts
 delete mode 100644 polaris-react/src/components/AlphaStack/components/index.ts

diff --git a/polaris-react/src/components/AlphaStack/components/Item/Item.tsx b/polaris-react/src/components/AlphaStack/components/Item/Item.tsx
deleted file mode 100644
index f5b30ca2203..00000000000
--- a/polaris-react/src/components/AlphaStack/components/Item/Item.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-
-import {classNames} from '../../../../utilities/css';
-import styles from '../../Stack.scss';
-
-export interface ItemProps {
-  /** Elements to display inside item */
-  children?: React.ReactNode;
-  /**
-   * @default false
-   */
-}
-
-export function Item({children}: ItemProps) {
-  const className = classNames(styles.Item);
-
-  return <div className={className}>{children}</div>;
-}
diff --git a/polaris-react/src/components/AlphaStack/components/Item/index.ts b/polaris-react/src/components/AlphaStack/components/Item/index.ts
deleted file mode 100644
index c924835a042..00000000000
--- a/polaris-react/src/components/AlphaStack/components/Item/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Item';
diff --git a/polaris-react/src/components/AlphaStack/components/index.ts b/polaris-react/src/components/AlphaStack/components/index.ts
deleted file mode 100644
index c924835a042..00000000000
--- a/polaris-react/src/components/AlphaStack/components/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Item';

From a1adabe13f082eac0341c85981576e1f5e382591 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Tue, 30 Aug 2022 16:21:38 -0400
Subject: [PATCH 06/13] Refactor `AlphaStack`

---
 .../src/components/AlphaStack/AlphaStack.tsx  | 21 +++++++++++--------
 1 file changed, 12 insertions(+), 9 deletions(-)

diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
index 0e50de39cf2..de0f2de7ed1 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
@@ -2,10 +2,9 @@ import React from 'react';
 import type {spacing} from '@shopify/polaris-tokens';
 
 import {classNames, variationName} from '../../utilities/css';
-import {elementChildren, wrapWithComponent} from '../../utilities/components';
+import {elementChildren} from '../../utilities/components';
 
 import styles from './Stack.scss';
-import {Item} from './components';
 
 type SpacingTokenGroup = typeof spacing;
 type SpacingTokenName = keyof SpacingTokenGroup;
@@ -27,16 +26,20 @@ export interface AlphaStackProps {
 export const AlphaStack = ({children, spacing, align}: AlphaStackProps) => {
   const className = classNames(
     styles.Stack,
-    spacing && styles[variationName('spacing', spacing)],
     align && styles[variationName('align', align)],
   );
 
-  const itemMarkup = elementChildren(children).map((child, index) => {
-    const props = {key: index};
-    return wrapWithComponent(child, Item, props);
+  const style = {
+    '--pc-stack-spacing': spacing ? `var(--p-space-${spacing})` : '',
+  } as React.CSSProperties;
+
+  const stackItems = elementChildren(children).map((child, index) => {
+    return <div key={index}>{child}</div>;
   });
 
-  return <div className={className}>{itemMarkup}</div>;
+  return (
+    <div className={className} style={style}>
+      {stackItems}
+    </div>
+  );
 };
-
-AlphaStack.Item = Item;

From 83e1e29c57e84ba548968f935fea51837754ef32 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Tue, 30 Aug 2022 16:23:00 -0400
Subject: [PATCH 07/13] Update Stack.scss

---
 .../src/components/AlphaStack/Stack.scss      | 82 +------------------
 1 file changed, 1 insertion(+), 81 deletions(-)

diff --git a/polaris-react/src/components/AlphaStack/Stack.scss b/polaris-react/src/components/AlphaStack/Stack.scss
index f36e84ae4a1..cfd4a1e2ced 100644
--- a/polaris-react/src/components/AlphaStack/Stack.scss
+++ b/polaris-react/src/components/AlphaStack/Stack.scss
@@ -3,82 +3,7 @@
   display: flex;
   flex-direction: column;
   align-items: start;
-  margin-top: calc(-1 * var(--pc-stack-spacing));
-  margin-left: calc(-1 * var(--pc-stack-spacing));
-
-  > .Item {
-    margin-top: var(--pc-stack-spacing);
-    margin-left: var(--pc-stack-spacing);
-    max-width: 100%;
-  }
-}
-
-.spacing0 {
-  --pc-stack-spacing: var(--p-space-0);
-}
-
-.spacing025 {
-  --pc-stack-spacing: var(--p-space-025);
-}
-
-.spacing05 {
-  --pc-stack-spacing: var(--p-space-05);
-}
-
-.spacing1 {
-  --pc-stack-spacing: var(--p-space-1);
-}
-
-.spacing2 {
-  --pc-stack-spacing: var(--p-space-2);
-}
-
-.spacing3 {
-  --pc-stack-spacing: var(--p-space-3);
-}
-
-.spacing4 {
-  --pc-stack-spacing: var(--p-space-4);
-}
-
-.spacing5 {
-  --pc-stack-spacing: var(--p-space-5);
-}
-
-.spacing6 {
-  --pc-stack-spacing: var(--p-space-6);
-}
-
-.spacing8 {
-  --pc-stack-spacing: var(--p-space-8);
-}
-
-.spacing10 {
-  --pc-stack-spacing: var(--p-space-10);
-}
-
-.spacing12 {
-  --pc-stack-spacing: var(--p-space-12);
-}
-
-.spacing16 {
-  --pc-stack-spacing: var(--p-space-16);
-}
-
-.spacing20 {
-  --pc-stack-spacing: var(--p-space-20);
-}
-
-.spacing24 {
-  --pc-stack-spacing: var(--p-space-24);
-}
-
-.spacing28 {
-  --pc-stack-spacing: var(--p-space-28);
-}
-
-.spacing32 {
-  --pc-stack-spacing: var(--p-space-32);
+  gap: var(--pc-stack-spacing);
 }
 
 .alignStart {
@@ -92,8 +17,3 @@
 .alignCenter {
   align-items: center;
 }
-
-.Item {
-  flex: 0 0 auto;
-  min-width: 0;
-}

From 4a0331fe00f2f2f9c5cb1281c1bfa0a8a3dcd072 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Tue, 30 Aug 2022 19:12:40 -0400
Subject: [PATCH 08/13] Remove `stackItems` & add default alignment

---
 .../src/components/AlphaStack/AlphaStack.tsx  | 23 ++++++++-----------
 .../src/components/AlphaStack/Stack.scss      |  7 +-----
 2 files changed, 11 insertions(+), 19 deletions(-)

diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
index de0f2de7ed1..eecc78640a1 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import type {spacing} from '@shopify/polaris-tokens';
 
-import {classNames, variationName} from '../../utilities/css';
-import {elementChildren} from '../../utilities/components';
+import {classNames} from '../../utilities/css';
 
 import styles from './Stack.scss';
 
@@ -23,23 +22,21 @@ export interface AlphaStackProps {
   align?: Align;
 }
 
-export const AlphaStack = ({children, spacing, align}: AlphaStackProps) => {
-  const className = classNames(
-    styles.Stack,
-    align && styles[variationName('align', align)],
-  );
+export const AlphaStack = ({
+  children,
+  spacing,
+  align = 'start',
+}: AlphaStackProps) => {
+  const className = classNames(styles.Stack);
 
   const style = {
-    '--pc-stack-spacing': spacing ? `var(--p-space-${spacing})` : '',
+    ...(spacing ? {'--pc-stack-spacing': `var(--p-space-${spacing})`} : {}),
+    'align-items': align ? `${align}` : '',
   } as React.CSSProperties;
 
-  const stackItems = elementChildren(children).map((child, index) => {
-    return <div key={index}>{child}</div>;
-  });
-
   return (
     <div className={className} style={style}>
-      {stackItems}
+      {children}
     </div>
   );
 };
diff --git a/polaris-react/src/components/AlphaStack/Stack.scss b/polaris-react/src/components/AlphaStack/Stack.scss
index cfd4a1e2ced..8c58b392213 100644
--- a/polaris-react/src/components/AlphaStack/Stack.scss
+++ b/polaris-react/src/components/AlphaStack/Stack.scss
@@ -2,16 +2,11 @@
   --pc-stack-spacing: var(--p-space-4);
   display: flex;
   flex-direction: column;
-  align-items: start;
   gap: var(--pc-stack-spacing);
 }
 
-.alignStart {
-  align-items: flex-start;
-}
-
 .alignEnd {
-  align-items: flex-end;
+  align-items: end;
 }
 
 .alignCenter {

From 07c89c3b407466debefc45631357a5ec7a1adb4d Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Wed, 31 Aug 2022 11:32:19 -0400
Subject: [PATCH 09/13] Update .changeset/poor-kiwis-travel.md

Co-authored-by: Lo Kim <lo.kim@shopify.com>
---
 .changeset/poor-kiwis-travel.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.changeset/poor-kiwis-travel.md b/.changeset/poor-kiwis-travel.md
index 713cd12905f..69a0f495e00 100644
--- a/.changeset/poor-kiwis-travel.md
+++ b/.changeset/poor-kiwis-travel.md
@@ -1,5 +1,5 @@
 ---
-'@shopify/polaris': patch
+'@shopify/polaris': minor
 ---
 
-Add `AlphaStack` component
+Added `AlphaStack` component

From 8afd07feb3a06e3f70afd4148300b9cbdc4b3715 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 2 Sep 2022 11:12:26 -0400
Subject: [PATCH 10/13] Update AlphaStack styling

---
 polaris-react/src/components/AlphaStack/AlphaStack.tsx | 2 +-
 polaris-react/src/components/AlphaStack/Stack.scss     | 9 +--------
 2 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
index eecc78640a1..5f03f29bc27 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
@@ -30,8 +30,8 @@ export const AlphaStack = ({
   const className = classNames(styles.Stack);
 
   const style = {
+    '--pc-align': align,
     ...(spacing ? {'--pc-stack-spacing': `var(--p-space-${spacing})`} : {}),
-    'align-items': align ? `${align}` : '',
   } as React.CSSProperties;
 
   return (
diff --git a/polaris-react/src/components/AlphaStack/Stack.scss b/polaris-react/src/components/AlphaStack/Stack.scss
index 8c58b392213..35b0caacd2d 100644
--- a/polaris-react/src/components/AlphaStack/Stack.scss
+++ b/polaris-react/src/components/AlphaStack/Stack.scss
@@ -2,13 +2,6 @@
   --pc-stack-spacing: var(--p-space-4);
   display: flex;
   flex-direction: column;
+  align-items: var(--pc-align);
   gap: var(--pc-stack-spacing);
 }
-
-.alignEnd {
-  align-items: end;
-}
-
-.alignCenter {
-  align-items: center;
-}

From c6d938440e939d53cb3f899cb9551ab77b4650a3 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 2 Sep 2022 11:12:42 -0400
Subject: [PATCH 11/13] Create AlphaStack.stories.tsx

---
 .../AlphaStack/AlphaStack.stories.tsx         | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx

diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
new file mode 100644
index 00000000000..8758d651d8a
--- /dev/null
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import type {ComponentMeta} from '@storybook/react';
+import {Badge, AlphaStack} from '@shopify/polaris';
+
+export default {
+  component: AlphaStack,
+} as ComponentMeta<typeof AlphaStack>;
+
+export function Default() {
+  return (
+    <AlphaStack>
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}
+
+export function Spacing() {
+  return (
+    <AlphaStack spacing="8">
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}
+
+export function AlignCenter() {
+  return (
+    <AlphaStack align="center">
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}
+
+export function AlignEnd() {
+  return (
+    <AlphaStack align="end">
+      <Badge>Paid</Badge>
+      <Badge>Processing</Badge>
+      <Badge>Fulfilled</Badge>
+      <Badge>Completed</Badge>
+    </AlphaStack>
+  );
+}

From 048c0f17df4227cc3768f95dc386be24c6c37dd0 Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 2 Sep 2022 11:12:47 -0400
Subject: [PATCH 12/13] Create AlphaStack.test.tsx

---
 .../AlphaStack/tests/AlphaStack.test.tsx           | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx

diff --git a/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx b/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx
new file mode 100644
index 00000000000..a90c9dc8592
--- /dev/null
+++ b/polaris-react/src/components/AlphaStack/tests/AlphaStack.test.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import {mountWithApp} from 'tests/utilities';
+
+import {AlphaStack} from '../AlphaStack';
+
+describe('<AlphaStack />', () => {
+  const renderChildren = () => [0, 1].map((i) => <div key={i}>Child {i}</div>);
+
+  it('renders its children', () => {
+    const stack = mountWithApp(<AlphaStack>{renderChildren()}</AlphaStack>);
+
+    expect(stack).toContainReactComponentTimes('div', 3);
+  });
+});

From eb89d903b03520589ab03af6cb12210c535e89aa Mon Sep 17 00:00:00 2001
From: Chaz Dean <59836805+chazdean@users.noreply.github.com>
Date: Fri, 2 Sep 2022 12:04:30 -0400
Subject: [PATCH 13/13] Update custom style properties

---
 polaris-react/src/components/AlphaStack/AlphaStack.tsx | 4 ++--
 polaris-react/src/components/AlphaStack/Stack.scss     | 3 +--
 2 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/polaris-react/src/components/AlphaStack/AlphaStack.tsx b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
index 5f03f29bc27..7d354a07ae1 100644
--- a/polaris-react/src/components/AlphaStack/AlphaStack.tsx
+++ b/polaris-react/src/components/AlphaStack/AlphaStack.tsx
@@ -24,13 +24,13 @@ export interface AlphaStackProps {
 
 export const AlphaStack = ({
   children,
-  spacing,
+  spacing = '4',
   align = 'start',
 }: AlphaStackProps) => {
   const className = classNames(styles.Stack);
 
   const style = {
-    '--pc-align': align,
+    '--pc-stack-align': align,
     ...(spacing ? {'--pc-stack-spacing': `var(--p-space-${spacing})`} : {}),
   } as React.CSSProperties;
 
diff --git a/polaris-react/src/components/AlphaStack/Stack.scss b/polaris-react/src/components/AlphaStack/Stack.scss
index 35b0caacd2d..9860659b2c7 100644
--- a/polaris-react/src/components/AlphaStack/Stack.scss
+++ b/polaris-react/src/components/AlphaStack/Stack.scss
@@ -1,7 +1,6 @@
 .Stack {
-  --pc-stack-spacing: var(--p-space-4);
   display: flex;
   flex-direction: column;
-  align-items: var(--pc-align);
+  align-items: var(--pc-stack-align);
   gap: var(--pc-stack-spacing);
 }