[Layout foundations] Stack component prototype

.changeset/poor-kiwis-travel.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Add `AlphaStack` component

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import type {spacing} from '@shopify/polaris-tokens';
+
+import {classNames, variationName} from '../../utilities/css';
+import {elementChildren} from '../../utilities/components';
+
+import styles from './Stack.scss';
+
+type SpacingTokenGroup = typeof spacing;
+type SpacingTokenName = keyof SpacingTokenGroup;
+
+// TODO: Bring this logic into tokens
+type Spacing = SpacingTokenName extends `space-${infer Scale}` ? Scale : never;
+
+type Align = 'start' | 'end' | 'center';
+
+export interface AlphaStackProps {
+  /** Elements to display inside stack */
+  children?: React.ReactNode;
+  /** Adjust spacing between elements */
+  spacing?: Spacing;
+  /** Adjust vertical alignment of elements */
+  align?: Align;
+}
+
+export const AlphaStack = ({children, spacing, align}: AlphaStackProps) => {
+  const className = classNames(
+    styles.Stack,
+    align && styles[variationName('align', align)],
+  );
+
+  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} style={style}>
+      {stackItems}
+    </div>
+  );
+};

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

@@ -0,0 +1,19 @@
+.Stack {
+  --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;
+}
+
+.alignCenter {
+  align-items: center;
+}

polaris-react/src/components/AlphaStack/index.ts

@@ -0,0 +1 @@
+export * from './AlphaStack';

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';