Skip to content

Commit 121531b

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 87775bd commit 121531b

File tree

5 files changed

+243
-1
lines changed

5 files changed

+243
-1
lines changed

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

Lines changed: 227 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,227 @@
1+
import React from 'react';
2+
import { Meta, StoryObj } from '@storybook/react';
3+
import { radiusTokens, version } from '@rangle/radius-foundations';
4+
5+
import { BADGE } from '@geometricpanda/storybook-addon-badges';
6+
import { RadiusAutoLayout } from './auto-layout';
7+
import { flattenObject } from '@rangle/radius-shared';
8+
import { AutoLayoutExtendedProps } from './auto-layout.types';
9+
10+
const [major, minor, patch] = version ? version.split('.') : ['0', '0', '0'];
11+
12+
const meta: Meta<typeof RadiusAutoLayout> = {
13+
component: RadiusAutoLayout,
14+
title: 'Auto Layout / Wrap',
15+
parameters: {
16+
// Version is rendered by this plugin https://github.com/silversonicaxel/storybook-addon-versioning
17+
version: {
18+
major,
19+
minor,
20+
patch,
21+
},
22+
badges: [BADGE.BETA],
23+
24+
// More on Storybook parameters at: https://storybook.js.org/docs/react/writing-stories/parameters#component-parameters
25+
},
26+
argTypes: {
27+
as: {
28+
control: 'text',
29+
description: 'The HTML element or component to render',
30+
table: { defaultValue: { summary: 'div' } },
31+
},
32+
width: {
33+
options: ['629px', '200px', '50%', 'fill-parent', 'hug-contents'],
34+
},
35+
height: {
36+
options: ['150px', '50%', 'fill-parent', 'hug-contents'],
37+
},
38+
space: {
39+
options: ['auto', ...flattenObject(radiusTokens.core.spacing)],
40+
table: { defaultValue: { summary: '10px' } },
41+
},
42+
padding: {
43+
options: ['', ...flattenObject(radiusTokens.core.spacing)],
44+
},
45+
direction: {
46+
options: ['horizontal', 'vertical'],
47+
},
48+
fill: {
49+
options: [
50+
'',
51+
...flattenObject(radiusTokens.core.color),
52+
...flattenObject(radiusTokens.semantic.color),
53+
...flattenObject(radiusTokens.semanticTheme.color),
54+
...flattenObject(radiusTokens.component.color),
55+
],
56+
},
57+
stroke: {
58+
options: [
59+
'',
60+
...flattenObject(radiusTokens.core.color),
61+
...flattenObject(radiusTokens.semantic.color),
62+
...flattenObject(radiusTokens.semanticTheme.color),
63+
...flattenObject(radiusTokens.component.color),
64+
],
65+
},
66+
strokeWidth: {
67+
options: ['', ...flattenObject(radiusTokens.core.borderWidth)],
68+
},
69+
opacity: {
70+
options: ['', ...flattenObject(radiusTokens.core.opacity)],
71+
},
72+
x: {
73+
control: 'text',
74+
},
75+
y: {
76+
control: 'text',
77+
},
78+
cornerRadius: {
79+
options: ['', ...flattenObject(radiusTokens.core.borderRadius)],
80+
},
81+
dropShadow: {
82+
options: ['', ...flattenObject(radiusTokens.core.shadow)],
83+
},
84+
innerShadow: {
85+
options: ['', ...flattenObject(radiusTokens.core.shadow)],
86+
},
87+
layerBlur: {
88+
options: [0, 1, 2, 3],
89+
},
90+
backgroundBlur: {
91+
options: [0, 1, 2, 3],
92+
},
93+
// TODO: add grid tokens when ready
94+
ref: { table: { disable: true } },
95+
},
96+
decorators: [
97+
(Story) => (
98+
<div
99+
style={{
100+
display: 'flex',
101+
}}
102+
>
103+
<Story />
104+
</div>
105+
),
106+
],
107+
};
108+
109+
export default meta;
110+
type Story = StoryObj<typeof RadiusAutoLayout>;
111+
112+
export const AutoLayoutWrap: Story = {
113+
parameters: {
114+
controls: {
115+
// exclude grid controls until we've aligned on the direction we want to go with it
116+
exclude: [
117+
'grid',
118+
'gridColSpan',
119+
'gridColStart',
120+
'gridColEnd',
121+
'gridRowSpan',
122+
'gridRowStart',
123+
'gridRowEnd',
124+
],
125+
},
126+
},
127+
// @ts-expect-error - bug with `args` type inference due to polymorphism
128+
render: (args: AutoLayoutExtendedProps) => (
129+
<RadiusAutoLayout
130+
height={args.direction === 'vertical' ? 388 : undefined}
131+
width="fill-parent"
132+
>
133+
<RadiusAutoLayout alignment="center" isParent {...args}>
134+
<RadiusAutoLayout
135+
width={args.direction === 'horizontal' ? 40 : 'fill-parent'}
136+
height={args.direction === 'horizontal' ? 242 : 40}
137+
fill={{ css: '#F7856E' }}
138+
style={{ zIndex: 1 }}
139+
/>
140+
<RadiusAutoLayout
141+
width={args.direction === 'horizontal' ? 40 : 'fill-parent'}
142+
height={args.direction === 'horizontal' ? 242 : 40}
143+
fill={{ css: '#F7856E' }}
144+
style={{ zIndex: 1 }}
145+
/>
146+
<RadiusAutoLayout
147+
width={args.direction === 'horizontal' ? 40 : 'fill-parent'}
148+
height={args.direction === 'horizontal' ? 242 : 40}
149+
fill={{ css: '#F7856E' }}
150+
style={{ zIndex: 1 }}
151+
/>
152+
</RadiusAutoLayout>
153+
</RadiusAutoLayout>
154+
),
155+
args: {
156+
as: 'div',
157+
width: '629px',
158+
height: 'fill-parent',
159+
space: 'auto',
160+
padding: radiusTokens.core.spacing[24],
161+
direction: 'horizontal',
162+
fill: radiusTokens.core.color.neutral[50],
163+
stroke: radiusTokens.core.color.neutral[600],
164+
strokeWidth: radiusTokens.core.borderWidth[1],
165+
strokeAlign: 'inside',
166+
cornerRadius: radiusTokens.core.borderRadius.none,
167+
clippedContent: false,
168+
alignment: 'top',
169+
isParent: false,
170+
absolutePosition: false,
171+
horizontalConstraint: 'left',
172+
verticalConstraint: 'top',
173+
},
174+
};
175+
176+
/**
177+
* The `padding` property controls the padding of the Auto Layout component.
178+
* `padding` can be a single value or a list of values. If a list of values is
179+
* provided, the values are applied in the following order: top, right, bottom,
180+
* left.
181+
*
182+
* [How Figma Padding works](https://help.figma.com/hc/en-us/articles/360040451373-Explore-auto-layout-properties#padding)
183+
*/
184+
export const NoWrap: Story = {
185+
parameters: {
186+
controls: {
187+
// only show controls relevant to this story
188+
include: ['padding'],
189+
},
190+
},
191+
argTypes: {
192+
padding: {
193+
options: {
194+
'0px': '0px',
195+
'10px': { css: '10px' },
196+
'48px 24px': { css: '48px 24px' },
197+
'10px 20px 30px 40px': { css: '10px 20px 30px 40px' },
198+
},
199+
},
200+
},
201+
render: (args) => (
202+
<RadiusAutoLayout
203+
stroke={{ css: '#006C95' }}
204+
strokeWidth={{ css: `2px` }}
205+
padding={{ css: '48px 24px' }}
206+
style={{
207+
borderStyle: 'dashed',
208+
}}
209+
{...args}
210+
>
211+
<RadiusAutoLayout
212+
width={585}
213+
space="auto"
214+
stroke={{ css: '#006C95' }}
215+
strokeWidth={{ css: `2px` }}
216+
style={{
217+
borderStyle: 'dashed',
218+
}}
219+
>
220+
<RadiusAutoLayout width={40} height={242} fill={{ css: '#F7856E' }} />
221+
<RadiusAutoLayout width={40} height={242} fill={{ css: '#F7856E' }} />
222+
<RadiusAutoLayout width={40} height={242} fill={{ css: '#F7856E' }} />
223+
</RadiusAutoLayout>
224+
</RadiusAutoLayout>
225+
),
226+
};
227+

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

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,13 @@ const meta: Meta<typeof RadiusAutoLayout> = {
4444
options: ['', ...flattenObject(radiusTokens.core.spacing)],
4545
},
4646
direction: {
47+
control: 'select',
4748
options: ['horizontal', 'vertical'],
4849
},
50+
wrap: {
51+
control: 'select',
52+
options: ['nowrap', 'wrap', 'wrap-reverse'],
53+
},
4954
fill: {
5055
options: [
5156
'',
@@ -86,9 +91,11 @@ const meta: Meta<typeof RadiusAutoLayout> = {
8691
options: ['', ...flattenObject(radiusTokens.core.shadow)],
8792
},
8893
layerBlur: {
94+
control: 'select',
8995
options: [0, 1, 2, 3],
9096
},
9197
backgroundBlur: {
98+
control: 'select',
9299
options: [0, 1, 2, 3],
93100
},
94101
// TODO: add grid tokens when ready
@@ -160,6 +167,7 @@ export const AutoLayout: Story = {
160167
space: 'auto',
161168
padding: radiusTokens.core.spacing[24],
162169
direction: 'horizontal',
170+
wrap: 'nowrap',
163171
fill: radiusTokens.core.color.neutral[50],
164172
stroke: radiusTokens.core.color.neutral[600],
165173
strokeWidth: radiusTokens.core.borderWidth[1],
@@ -171,7 +179,7 @@ export const AutoLayout: Story = {
171179
absolutePosition: false,
172180
horizontalConstraint: 'left',
173181
verticalConstraint: 'top',
174-
},
182+
}
175183
};
176184

177185
/**

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,7 @@ const FIGMA_DEFAULT_SPACING = '10px';
7979
export type StyleProps = Pick<
8080
AutoLayoutExtendedProps,
8181
| 'direction'
82+
| 'wrap'
8283
| 'space'
8384
| 'padding'
8485
| 'opacity'
@@ -145,6 +146,7 @@ const gridStyles = `
145146
// Should we add type for using em or rem? or vw or vh? What should be our suggested unit?
146147
export const useStyles = ({
147148
direction, //flex-direction
149+
wrap, //flex-wrap
148150
space, // is either auto or number or zero
149151
clippedContent, //overflow:hidden
150152
alignment, //align-items
@@ -183,6 +185,7 @@ export const useStyles = ({
183185
? 'row'
184186
: renderCSSProp(direction)};
185187
margin: 0;
188+
flex-wrap: ${wrap === 'wrap' ? 'wrap' : (wrap === 'wrap-reverse' ? 'wrap-reverse' : '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: AutoLayoutComponent = 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: AutoLayoutComponent = 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: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,8 @@ export type AutoLayoutExtendedProps = {
7373
absolutePosition?: boolean;
7474
/** The direction of the layout, uses flex row or column */
7575
direction?: CSSProp<'direction'> | 'horizontal' | 'vertical';
76+
/** Whether the component should be wrapped. The default is nowrap. */
77+
wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
7678
/** The space between the children, can be number (gap) or auto (justify-content: space-between;) */
7779
space?: CSSProp<'spacing'> | 'auto'; // auto = justify-content: space-between;
7880
/** Whether the content should be clipped or not, uses overflow: hidden */

0 commit comments

Comments
 (0)