BOOST-291: Add wrap to auto-layout.

libs/core-components/src/components/auto-layout/auto-layout-alignment.stories.tsx

@@ -3,7 +3,6 @@ import { Meta } from '@storybook/react';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import { RadiusAutoLayout } from './auto-layout';
 import { Stories, Title, Description } from '@storybook/addon-docs';
-import { version } from '@rangle/radius-foundations';
 
 const meta: Meta<typeof RadiusAutoLayout> = {
   component: RadiusAutoLayout,

libs/core-components/src/components/auto-layout/auto-layout-height-and-width.stories.tsx

@@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react';
 import { BADGE } from '@geometricpanda/storybook-addon-badges';
 import { RadiusAutoLayout } from './auto-layout';
 import { AutoLayoutExtendedProps } from './auto-layout.types';
-import { version } from '@rangle/radius-foundations';
 
 /**
  * RadiusAutoLayout duplicates the behaviour of Figma Auto Layout's

libs/core-components/src/components/auto-layout/auto-layout-wrap.mdx

@@ -0,0 +1,26 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+import * as WrapStories from './auto-layout-wrap.stories';
+
+<Meta of={WrapStories} />
+
+# Auto Layout / Wrap
+
+RadiusAutoLayout duplicates the behaviour of Figma Auto Layout's wrap properties.
+
+## Resources
+
+[How Figma Layout Flow Works](https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties#direction)
+
+[RadiusAutoLayout Figma Specs](https://www.figma.com/file/ODAUZaQxH8oH2GI0A9MAVb/Radius-Booster---Auto-Layout?type=design&node-id=1312-1170&t=Fh2ap7gIybG92aBU-0)
+
+### Auto Layout Wrap Horizontal
+
+<Canvas of={WrapStories.AutoLayoutWrapHorizontal} />
+
+### Auto Layout Wrap Vertical
+
+<Canvas of={WrapStories.AutoLayoutWrapVertical} />
+
+### Auto Layout No Wrap
+
+<Canvas of={WrapStories.NoWrap} />

libs/core-components/src/components/auto-layout/auto-layout-wrap.stories.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { BADGE } from '@geometricpanda/storybook-addon-badges';
+import { RadiusAutoLayout } from './auto-layout';
+
+const meta: Meta<typeof RadiusAutoLayout> = {
+  component: RadiusAutoLayout,
+  title: 'Auto Layout / Wrap',
+  parameters: {
+    badges: [BADGE.BETA],
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof RadiusAutoLayout>;
+
+export const AutoLayoutWrapHorizontal: Story = {
+  render: () => (
+    <RadiusAutoLayout
+      wrap="wrap"
+      isParent
+      as="div"
+      alignment="center"
+      direction="horizontal"
+      space={{ css: '10px' }}
+      stroke={{ css: '#A6A6A6' }}
+      strokeWidth={{ css: `1px` }}
+      height={150}
+      width={300}
+    >
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => {
+        return (
+          <RadiusAutoLayout
+            key={index}
+            width={40}
+            height={40}
+            fill={{ css: '#F7856E' }}
+            style={{ zIndex: 1 }}
+          />
+        );
+      })}
+    </RadiusAutoLayout>
+  ),
+};
+
+export const AutoLayoutWrapVertical: Story = {
+  render: () => (
+    <RadiusAutoLayout
+      wrap="wrap"
+      isParent
+      as="div"
+      alignment="center"
+      direction="vertical"
+      space={{ css: '10px' }}
+      stroke={{ css: '#A6A6A6' }}
+      strokeWidth={{ css: `1px` }}
+      width={300}
+      height={150}
+    >
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => {
+        return (
+          <RadiusAutoLayout
+            key={index}
+            width={40}
+            height={40}
+            fill={{ css: '#F7856E' }}
+            style={{ zIndex: 1 }}
+          />
+        );
+      })}
+    </RadiusAutoLayout>
+  ),
+};
+
+export const NoWrap: Story = {
+  render: () => (
+    <RadiusAutoLayout
+      wrap="nowrap"
+      isParent
+      as="div"
+      alignment="center"
+      direction="horizontal"
+      space={{ css: '10px' }}
+      stroke={{ css: '#A6A6A6' }}
+      strokeWidth={{ css: `1px` }}
+      height={150}
+      width={300}
+    >
+      {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => {
+        return (
+          <RadiusAutoLayout
+            key={index}
+            width={40}
+            height={40}
+            fill={{ css: '#F7856E' }}
+            style={{ zIndex: 1 }}
+          />
+        );
+      })}
+    </RadiusAutoLayout>
+  ),
+};

libs/core-components/src/components/auto-layout/auto-layout.stories.tsx

@@ -36,8 +36,13 @@ const meta: Meta<typeof RadiusAutoLayout> = {
       options: ['', ...flattenObject(radiusTokens.core.spacing)],
     },
     direction: {
+      control: 'select',
       options: ['horizontal', 'vertical'],
     },
+    wrap: {
+      control: 'select',
+      options: ['nowrap', 'wrap', 'wrap-reverse'],
+    },
     fill: {
       options: [
         '',
@@ -78,9 +83,11 @@ const meta: Meta<typeof RadiusAutoLayout> = {
       options: ['', ...flattenObject(radiusTokens.core.shadow)],
     },
     layerBlur: {
+      control: 'select',
       options: [0, 1, 2, 3],
     },
     backgroundBlur: {
+      control: 'select',
       options: [0, 1, 2, 3],
     },
     // TODO: add grid tokens when ready
@@ -152,6 +159,7 @@ export const AutoLayout: Story = {
     space: 'auto',
     padding: radiusTokens.core.spacing[24],
     direction: 'horizontal',
+    wrap: 'nowrap',
     fill: radiusTokens.core.color.neutral[50],
     stroke: radiusTokens.core.color.neutral[600],
     strokeWidth: radiusTokens.core.borderWidth[1],

libs/core-components/src/components/auto-layout/auto-layout.styles.ts

@@ -1,9 +1,5 @@
 import { CSSExpression } from '@rangle/radius-foundations';
-import {
-  renderCSSProp,
-  css,
-  RequireAndPick,
-} from '@rangle/radius-shared';
+import { renderCSSProp, css, RequireAndPick } from '@rangle/radius-shared';
 
 import {
   mapAlignments,
@@ -79,6 +75,7 @@ const FIGMA_DEFAULT_SPACING = '10px';
 export type StyleProps = Pick<
   AutoLayoutExtendedProps,
   | 'direction'
+  | 'wrap'
   | 'space'
   | 'padding'
   | 'opacity'
@@ -145,6 +142,7 @@ const gridStyles = `
 // Should we add type for using em or rem? or vw or vh? What should be our suggested unit?
 export const useStyles = ({
   direction, //flex-direction
+  wrap, //flex-wrap
   space, // is either auto or number or zero
   clippedContent, //overflow:hidden
   alignment, //align-items
@@ -183,6 +181,11 @@ export const useStyles = ({
       ? 'row'
       : renderCSSProp(direction)};
     margin: 0;
+    flex-wrap: ${wrap === 'wrap'
+      ? 'wrap'
+      : wrap === 'wrap-reverse'
+      ? 'wrap-reverse'
+      : 'nowrap'};
     box-sizing: ${mapStrokeAlign[strokeAlign || 'inside']};
     align-items: ${mapAlignments[alignment]};
     width: ${getSize(width)};

libs/core-components/src/components/auto-layout/auto-layout.tsx

@@ -37,6 +37,7 @@ export const RadiusAutoLayout = forwardRef(
       isParent = false,
       absolutePosition = false,
       direction,
+      wrap = 'nowrap',
       space,
       clippedContent = false,
       alignment = 'top',
@@ -71,6 +72,7 @@ export const RadiusAutoLayout = forwardRef(
     const Component = as || 'div';
     const styles = useStyles({
       direction,
+      wrap,
       space,
       clippedContent,
       alignment,

libs/core-components/src/components/auto-layout/auto-layout.types.ts

@@ -1,7 +1,4 @@
-import {
-  CSSProp,
-  RadiusTokenSubjects,
-} from '@rangle/radius-foundations';
+import { CSSProp, RadiusTokenSubjects } from '@rangle/radius-foundations';
 import { PolymorphicComponentPropWithRef } from '@rangle/radius-shared';
 
 export const mapAlignments = {
@@ -73,6 +70,8 @@ export type AutoLayoutExtendedProps = {
   absolutePosition?: boolean;
   /** The direction of the layout, uses flex row or column */
   direction?: CSSProp<'direction'> | 'horizontal' | 'vertical';
+  /** Whether the component should be wrapped.  The default is nowrap. */
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
   /** The space between the children, can be number (gap) or auto (justify-content: space-between;) */
   space?: CSSProp<'spacing'> | 'auto'; // auto = justify-content: space-between;
   /** Whether the content should be clipped or not, uses overflow: hidden */

tsconfig.base.json

@@ -1,6 +1,7 @@
 {
   "compileOnSave": false,
   "compilerOptions": {
+    "jsx": "react",
     "rootDir": ".",
     "sourceMap": true,
     "declaration": false,