[Layout foundations] Stack component prototype

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>;
+};

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;
+}

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>;
+}

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