diff --git a/libs/core-components/src/components/auto-layout/auto-layout-alignment.stories.tsx b/libs/core-components/src/components/auto-layout/auto-layout-alignment.stories.tsx index c0339a2..a82b1bb 100644 --- a/libs/core-components/src/components/auto-layout/auto-layout-alignment.stories.tsx +++ b/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 = { component: RadiusAutoLayout, diff --git a/libs/core-components/src/components/auto-layout/auto-layout-height-and-width.stories.tsx b/libs/core-components/src/components/auto-layout/auto-layout-height-and-width.stories.tsx index 6b7c8ad..4013d81 100644 --- a/libs/core-components/src/components/auto-layout/auto-layout-height-and-width.stories.tsx +++ b/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 diff --git a/libs/core-components/src/components/auto-layout/auto-layout-wrap.mdx b/libs/core-components/src/components/auto-layout/auto-layout-wrap.mdx new file mode 100644 index 0000000..f004bbb --- /dev/null +++ b/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'; + + + +# 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 + + + +### Auto Layout Wrap Vertical + + + +### Auto Layout No Wrap + + diff --git a/libs/core-components/src/components/auto-layout/auto-layout-wrap.stories.tsx b/libs/core-components/src/components/auto-layout/auto-layout-wrap.stories.tsx new file mode 100644 index 0000000..94539f0 --- /dev/null +++ b/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 = { + component: RadiusAutoLayout, + title: 'Auto Layout / Wrap', + parameters: { + badges: [BADGE.BETA], + }, +}; + +export default meta; +type Story = StoryObj; + +export const AutoLayoutWrapHorizontal: Story = { + render: () => ( + + {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => { + return ( + + ); + })} + + ), +}; + +export const AutoLayoutWrapVertical: Story = { + render: () => ( + + {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => { + return ( + + ); + })} + + ), +}; + +export const NoWrap: Story = { + render: () => ( + + {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => { + return ( + + ); + })} + + ), +}; diff --git a/libs/core-components/src/components/auto-layout/auto-layout.stories.tsx b/libs/core-components/src/components/auto-layout/auto-layout.stories.tsx index 08ec0c8..b96483f 100644 --- a/libs/core-components/src/components/auto-layout/auto-layout.stories.tsx +++ b/libs/core-components/src/components/auto-layout/auto-layout.stories.tsx @@ -36,8 +36,13 @@ const meta: Meta = { 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 = { 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], diff --git a/libs/core-components/src/components/auto-layout/auto-layout.styles.ts b/libs/core-components/src/components/auto-layout/auto-layout.styles.ts index a6fac76..3ee9787 100644 --- a/libs/core-components/src/components/auto-layout/auto-layout.styles.ts +++ b/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)}; diff --git a/libs/core-components/src/components/auto-layout/auto-layout.tsx b/libs/core-components/src/components/auto-layout/auto-layout.tsx index 526e3a7..402b912 100644 --- a/libs/core-components/src/components/auto-layout/auto-layout.tsx +++ b/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, diff --git a/libs/core-components/src/components/auto-layout/auto-layout.types.ts b/libs/core-components/src/components/auto-layout/auto-layout.types.ts index d343eb8..59729ab 100644 --- a/libs/core-components/src/components/auto-layout/auto-layout.types.ts +++ b/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 */ diff --git a/tsconfig.base.json b/tsconfig.base.json index fad2bfc..041fd3a 100644 --- a/tsconfig.base.json +++ b/tsconfig.base.json @@ -1,6 +1,7 @@ { "compileOnSave": false, "compilerOptions": { + "jsx": "react", "rootDir": ".", "sourceMap": true, "declaration": false,