Skip to content

Commit 47583bc

Browse files
brenzybrenzy
committed
BOOST-291: Add wrap to auto-layout. Work in progress: needs proper stories added to the auto layout wrap stories file.
1 parent 777301b commit 47583bc

9 files changed

+151
-11
lines changed

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { Meta } from '@storybook/react';
33
import { BADGE } from '@geometricpanda/storybook-addon-badges';
44
import { RadiusAutoLayout } from './auto-layout';
55
import { Stories, Title, Description } from '@storybook/addon-docs';
6-
import { version } from '@rangle/radius-foundations';
76

87
const meta: Meta<typeof RadiusAutoLayout> = {
98
component: RadiusAutoLayout,

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@ import { Meta, StoryObj } from '@storybook/react';
44
import { BADGE } from '@geometricpanda/storybook-addon-badges';
55
import { RadiusAutoLayout } from './auto-layout';
66
import { AutoLayoutExtendedProps } from './auto-layout.types';
7-
import { version } from '@rangle/radius-foundations';
87

98
/**
109
* RadiusAutoLayout duplicates the behaviour of Figma Auto Layout's

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { Controls, Canvas, Meta } from '@storybook/blocks';
2+
import * as WrapStories from './auto-layout-wrap.stories';
3+
4+
<Meta of={WrapStories} />
5+
6+
# Auto Layout / Wrap
7+
8+
RadiusAutoLayout duplicates the behaviour of Figma Auto Layout's wrap properties.
9+
10+
## Resources
11+
12+
[How Figma Layout Flow Works](https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties#direction)
13+
14+
[RadiusAutoLayout Figma Specs](https://www.figma.com/file/ODAUZaQxH8oH2GI0A9MAVb/Radius-Booster---Auto-Layout?type=design&node-id=1312-1170&t=Fh2ap7gIybG92aBU-0)
15+
16+
### Auto Layout Wrap Horizontal
17+
18+
<Canvas of={WrapStories.AutoLayoutWrapHorizontal} />
19+
20+
### Auto Layout Wrap Vertical
21+
22+
<Canvas of={WrapStories.AutoLayoutWrapVertical} />
23+
24+
### Auto Layout No Wrap
25+
26+
<Canvas of={WrapStories.NoWrap} />

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

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import React from 'react';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
4+
import { BADGE } from '@geometricpanda/storybook-addon-badges';
5+
import { RadiusAutoLayout } from './auto-layout';
6+
7+
const meta: Meta<typeof RadiusAutoLayout> = {
8+
component: RadiusAutoLayout,
9+
title: 'Auto Layout / Wrap',
10+
parameters: {
11+
badges: [BADGE.BETA],
12+
},
13+
};
14+
15+
export default meta;
16+
type Story = StoryObj<typeof RadiusAutoLayout>;
17+
18+
export const AutoLayoutWrapHorizontal: Story = {
19+
render: () => (
20+
<RadiusAutoLayout
21+
wrap="wrap"
22+
isParent
23+
as="div"
24+
alignment="center"
25+
direction="horizontal"
26+
space={{ css: '10px' }}
27+
stroke={{ css: '#A6A6A6' }}
28+
strokeWidth={{ css: `1px` }}
29+
height={150}
30+
width={300}
31+
>
32+
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => {
33+
return (
34+
<RadiusAutoLayout
35+
key={index}
36+
width={40}
37+
height={40}
38+
fill={{ css: '#F7856E' }}
39+
style={{ zIndex: 1 }}
40+
/>
41+
);
42+
})}
43+
</RadiusAutoLayout>
44+
),
45+
};
46+
47+
export const AutoLayoutWrapVertical: Story = {
48+
render: () => (
49+
<RadiusAutoLayout
50+
wrap="wrap"
51+
isParent
52+
as="div"
53+
alignment="center"
54+
direction="vertical"
55+
space={{ css: '10px' }}
56+
stroke={{ css: '#A6A6A6' }}
57+
strokeWidth={{ css: `1px` }}
58+
width={300}
59+
height={150}
60+
>
61+
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => {
62+
return (
63+
<RadiusAutoLayout
64+
key={index}
65+
width={40}
66+
height={40}
67+
fill={{ css: '#F7856E' }}
68+
style={{ zIndex: 1 }}
69+
/>
70+
);
71+
})}
72+
</RadiusAutoLayout>
73+
),
74+
};
75+
76+
export const NoWrap: Story = {
77+
render: () => (
78+
<RadiusAutoLayout
79+
wrap="nowrap"
80+
isParent
81+
as="div"
82+
alignment="center"
83+
direction="horizontal"
84+
space={{ css: '10px' }}
85+
stroke={{ css: '#A6A6A6' }}
86+
strokeWidth={{ css: `1px` }}
87+
height={150}
88+
width={300}
89+
>
90+
{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((index) => {
91+
return (
92+
<RadiusAutoLayout
93+
key={index}
94+
width={40}
95+
height={40}
96+
fill={{ css: '#F7856E' }}
97+
style={{ zIndex: 1 }}
98+
/>
99+
);
100+
})}
101+
</RadiusAutoLayout>
102+
),
103+
};

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,13 @@ const meta: Meta<typeof RadiusAutoLayout> = {
3636
options: ['', ...flattenObject(radiusTokens.core.spacing)],
3737
},
3838
direction: {
39+
control: 'select',
3940
options: ['horizontal', 'vertical'],
4041
},
42+
wrap: {
43+
control: 'select',
44+
options: ['nowrap', 'wrap', 'wrap-reverse'],
45+
},
4146
fill: {
4247
options: [
4348
'',
@@ -78,9 +83,11 @@ const meta: Meta<typeof RadiusAutoLayout> = {
7883
options: ['', ...flattenObject(radiusTokens.core.shadow)],
7984
},
8085
layerBlur: {
86+
control: 'select',
8187
options: [0, 1, 2, 3],
8288
},
8389
backgroundBlur: {
90+
control: 'select',
8491
options: [0, 1, 2, 3],
8592
},
8693
// TODO: add grid tokens when ready
@@ -152,6 +159,7 @@ export const AutoLayout: Story = {
152159
space: 'auto',
153160
padding: radiusTokens.core.spacing[24],
154161
direction: 'horizontal',
162+
wrap: 'nowrap',
155163
fill: radiusTokens.core.color.neutral[50],
156164
stroke: radiusTokens.core.color.neutral[600],
157165
strokeWidth: radiusTokens.core.borderWidth[1],

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
import { CSSExpression } from '@rangle/radius-foundations';
2-
import {
3-
renderCSSProp,
4-
css,
5-
RequireAndPick,
6-
} from '@rangle/radius-shared';
2+
import { renderCSSProp, css, RequireAndPick } from '@rangle/radius-shared';
73

84
import {
95
mapAlignments,
@@ -79,6 +75,7 @@ const FIGMA_DEFAULT_SPACING = '10px';
7975
export type StyleProps = Pick<
8076
AutoLayoutExtendedProps,
8177
| 'direction'
78+
| 'wrap'
8279
| 'space'
8380
| 'padding'
8481
| 'opacity'
@@ -145,6 +142,7 @@ const gridStyles = `
145142
// Should we add type for using em or rem? or vw or vh? What should be our suggested unit?
146143
export const useStyles = ({
147144
direction, //flex-direction
145+
wrap, //flex-wrap
148146
space, // is either auto or number or zero
149147
clippedContent, //overflow:hidden
150148
alignment, //align-items
@@ -183,6 +181,11 @@ export const useStyles = ({
183181
? 'row'
184182
: renderCSSProp(direction)};
185183
margin: 0;
184+
flex-wrap: ${wrap === 'wrap'
185+
? 'wrap'
186+
: wrap === 'wrap-reverse'
187+
? 'wrap-reverse'
188+
: 'nowrap'};
186189
box-sizing: ${mapStrokeAlign[strokeAlign || 'inside']};
187190
align-items: ${mapAlignments[alignment]};
188191
width: ${getSize(width)};

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const RadiusAutoLayout = forwardRef(
3737
isParent = false,
3838
absolutePosition = false,
3939
direction,
40+
wrap = 'nowrap',
4041
space,
4142
clippedContent = false,
4243
alignment = 'top',
@@ -71,6 +72,7 @@ export const RadiusAutoLayout = forwardRef(
7172
const Component = as || 'div';
7273
const styles = useStyles({
7374
direction,
75+
wrap,
7476
space,
7577
clippedContent,
7678
alignment,

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

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
import {
2-
CSSProp,
3-
RadiusTokenSubjects,
4-
} from '@rangle/radius-foundations';
1+
import { CSSProp, RadiusTokenSubjects } from '@rangle/radius-foundations';
52
import { PolymorphicComponentPropWithRef } from '@rangle/radius-shared';
63

74
export const mapAlignments = {
@@ -73,6 +70,8 @@ export type AutoLayoutExtendedProps = {
7370
absolutePosition?: boolean;
7471
/** The direction of the layout, uses flex row or column */
7572
direction?: CSSProp<'direction'> | 'horizontal' | 'vertical';
73+
/** Whether the component should be wrapped. The default is nowrap. */
74+
wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
7675
/** The space between the children, can be number (gap) or auto (justify-content: space-between;) */
7776
space?: CSSProp<'spacing'> | 'auto'; // auto = justify-content: space-between;
7877
/** Whether the content should be clipped or not, uses overflow: hidden */

‎tsconfig.base.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"compileOnSave": false,
33
"compilerOptions": {
4+
"jsx": "react",
45
"rootDir": ".",
56
"sourceMap": true,
67
"declaration": false,

0 commit comments

Comments
 (0)