[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,42 @@
+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 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,
+    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);
+  });
+
+  return <div className={className}>{itemMarkup}</div>;
+};
+
+AlphaStack.Item = Item;

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

@@ -0,0 +1,99 @@
+.Stack {
+  --pc-stack-spacing: var(--p-space-4);
+  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);
+}
+
+.alignStart {
+  align-items: flex-start;
+}
+
+.alignEnd {
+  align-items: flex-end;
+}
+
+.alignCenter {
+  align-items: center;
+}
+
+.Item {
+  flex: 0 0 auto;
+  min-width: 0;
+}

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

@@ -0,0 +1,18 @@
+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>;
+}

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

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

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

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

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