[Layout foundations] Stack component prototype

.changeset/poor-kiwis-travel.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added `AlphaStack` component

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

@@ -0,0 +1,42 @@
+import React from 'react';
+import type {spacing} from '@shopify/polaris-tokens';
+
+import {classNames} from '../../utilities/css';
+
+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 = 'start',
+}: AlphaStackProps) => {
+  const className = classNames(styles.Stack);
+
+  const style = {
+    ...(spacing ? {'--pc-stack-spacing': `var(--p-space-${spacing})`} : {}),
+    'align-items': align ? `${align}` : '',
+  } as React.CSSProperties;
+
+  return (
+    <div className={className} style={style}>
+      {children}
+    </div>
+  );
+};

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

@@ -0,0 +1,14 @@
+.Stack {
+  --pc-stack-spacing: var(--p-space-4);
+  display: flex;
+  flex-direction: column;
+  gap: var(--pc-stack-spacing);
+}
+
+.alignEnd {
+  align-items: 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';