Skip to content

Commit 1652413

Browse files
laurkimkyledurand
laurkim
and
kyledurand
committed
[Layout foundations] Refactor Box without polymorphic dep (#7062)
Co-authored-by: Kyle Durand <[email protected]>
1 parent 4e17711 commit 1652413

File tree

3 files changed

+102
-97
lines changed

3 files changed

+102
-97
lines changed

‎polaris-react/src/components/Box/Box.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.Box {
22
display: block;
33
background-color: var(--pc-box-background, initial);
4+
box-shadow: var(--pc-box-shadow, initial);
45
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
56
border-bottom-left-radius: var(--pc-box-border-radius-bottom-left, initial);
67
border-bottom-right-radius: var(--pc-box-border-radius-bottom-right, initial);
@@ -19,5 +20,4 @@
1920
padding-right: var(--pc-box-padding-right, initial);
2021
padding-top: var(--pc-box-padding-top, initial);
2122
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
22-
box-shadow: var(--pc-box-shadow, initial);
2323
}

‎polaris-react/src/components/Box/Box.tsx‎

Lines changed: 101 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import React, {ReactNode, forwardRef} from 'react';
2-
import type * as Polymorphic from '@radix-ui/react-polymorphic';
1+
import React, {createElement, forwardRef, ReactNode} from 'react';
32
import type {colors, depth, shape, spacing} from '@shopify/polaris-tokens';
43

54
import {classNames} from '../../utilities/css';
@@ -53,10 +52,10 @@ type BorderRadiusTokenScale = Extract<
5352
: never;
5453

5554
interface BorderRadius {
56-
bottomLeft: BorderRadiusTokenScale | '';
57-
bottomRight: BorderRadiusTokenScale | '';
58-
topLeft: BorderRadiusTokenScale | '';
59-
topRight: BorderRadiusTokenScale | '';
55+
bottomLeft: BorderRadiusTokenScale;
56+
bottomRight: BorderRadiusTokenScale;
57+
topLeft: BorderRadiusTokenScale;
58+
topRight: BorderRadiusTokenScale;
6059
}
6160

6261
type SpacingTokenGroup = typeof spacing;
@@ -68,13 +67,14 @@ type SpacingTokenScale = SpacingTokenName extends `space-${infer Scale}`
6867
: never;
6968

7069
interface Spacing {
71-
bottom: SpacingTokenScale | '';
72-
left: SpacingTokenScale | '';
73-
right: SpacingTokenScale | '';
74-
top: SpacingTokenScale | '';
70+
bottom: SpacingTokenScale;
71+
left: SpacingTokenScale;
72+
right: SpacingTokenScale;
73+
top: SpacingTokenScale;
7574
}
7675

77-
interface BoxBaseProps {
76+
export interface BoxProps {
77+
as?: 'div' | 'span';
7878
/** Background color of the Box */
7979
background?: BackgroundColorTokenScale;
8080
/** Border styling of the Box */
@@ -123,36 +123,32 @@ interface BoxBaseProps {
123123
shadow?: DepthTokenScale;
124124
}
125125

126-
type PolymorphicBox = Polymorphic.ForwardRefComponent<'div', BoxBaseProps>;
127-
128-
export type BoxProps = Polymorphic.OwnProps<PolymorphicBox>;
129-
130-
export const Box = forwardRef(
126+
export const Box = forwardRef<HTMLElement, BoxProps>(
131127
(
132128
{
133-
as: Component = 'div',
129+
as = 'div',
134130
background,
135-
border = '',
136-
borderBottom = '',
137-
borderLeft = '',
138-
borderRight = '',
139-
borderTop = '',
140-
borderRadius = '',
141-
borderRadiusBottomLeft = '',
142-
borderRadiusBottomRight = '',
143-
borderRadiusTopLeft = '',
144-
borderRadiusTopRight = '',
131+
border,
132+
borderBottom,
133+
borderLeft,
134+
borderRight,
135+
borderTop,
136+
borderRadius,
137+
borderRadiusBottomLeft,
138+
borderRadiusBottomRight,
139+
borderRadiusTopLeft,
140+
borderRadiusTopRight,
145141
children,
146-
margin = '',
147-
marginBottom = '',
148-
marginLeft = '',
149-
marginRight = '',
150-
marginTop = '',
151-
padding = '',
152-
paddingBottom = '',
153-
paddingLeft = '',
154-
paddingRight = '',
155-
paddingTop = '',
142+
margin,
143+
marginBottom,
144+
marginLeft,
145+
marginRight,
146+
marginTop,
147+
padding,
148+
paddingBottom,
149+
paddingLeft,
150+
paddingRight,
151+
paddingTop,
156152
shadow,
157153
},
158154
ref,
@@ -190,64 +186,78 @@ export const Box = forwardRef(
190186
} as Spacing;
191187

192188
const style = {
193-
'--pc-box-background': background ? `var(--p-${background})` : '',
194-
'--pc-box-margin-bottom': margins.bottom
195-
? `var(--p-space-${margins.bottom})`
196-
: '',
197-
'--pc-box-margin-left': margins.left
198-
? `var(--p-space-${margins.left})`
199-
: '',
200-
'--pc-box-margin-right': margins.right
201-
? `var(--p-space-${margins.right})`
202-
: '',
203-
'--pc-box-margin-top': margins.top ? `var(--p-space-${margins.top})` : '',
204-
'--pc-box-padding-bottom': paddings.bottom
205-
? `var(--p-space-${paddings.bottom})`
206-
: '',
207-
'--pc-box-padding-left': paddings.left
208-
? `var(--p-space-${paddings.left})`
209-
: '',
210-
'--pc-box-padding-right': paddings.right
211-
? `var(--p-space-${paddings.right})`
212-
: '',
213-
'--pc-box-padding-top': paddings.top
214-
? `var(--p-space-${paddings.top})`
215-
: '',
216-
'--pc-box-border-bottom': borders.bottom
217-
? `var(--p-border-${borders.bottom})`
218-
: '',
219-
'--pc-box-border-left': borders.left
220-
? `var(--p-border-${borders.left})`
221-
: '',
222-
'--pc-box-border-right': borders.right
223-
? `var(--p-border-${borders.right})`
224-
: '',
225-
'--pc-box-border-top': borders.top
226-
? `var(--p-border-${borders.top})`
227-
: '',
228-
'--pc-box-border-radius-bottom-left': borderRadiuses.bottomLeft
229-
? `var(--p-border-radius-${borderRadiuses.bottomLeft})`
230-
: '',
231-
'--pc-box-border-radius-bottom-right': borderRadiuses.bottomRight
232-
? `var(--p-border-radius-${borderRadiuses.bottomRight})`
233-
: '',
234-
'--pc-box-border-radius-top-left': borderRadiuses.topLeft
235-
? `var(--p-border-radius-${borderRadiuses.topLeft})`
236-
: '',
237-
'--pc-box-border-radius-top-right': borderRadiuses.topRight
238-
? `var(--p-border-radius-${borderRadiuses.topRight})`
239-
: '',
240-
'--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : '',
189+
...(background ? {'--pc-box-background': `var(--p-${background})`} : {}),
190+
...(borders.bottom
191+
? {'--pc-box-border-bottom': `var(--p-border-${borders.bottom})`}
192+
: {}),
193+
...(borders.left
194+
? {'--pc-box-border-left': `var(--p-border-${borders.left})`}
195+
: {}),
196+
...(borders.right
197+
? {'--pc-box-border-right': `var(--p-border-${borders.right})`}
198+
: {}),
199+
...(borders.top
200+
? {'--pc-box-border-top': `var(--p-border-${borders.top})`}
201+
: {}),
202+
...(borderRadiuses.bottomLeft
203+
? {
204+
'--pc-box-border-radius-bottom-left': `var(--p-border-radius-${borderRadiuses.bottomLeft})`,
205+
}
206+
: {}),
207+
...(borderRadiuses.bottomRight
208+
? {
209+
'--pc-box-border-radius-bottom-right': `var(--p-border-radius-${borderRadiuses.bottomRight})`,
210+
}
211+
: {}),
212+
...(borderRadiuses.topLeft
213+
? {
214+
'--pc-box-border-radius-top-left': `var(--p-border-radius-${borderRadiuses.topLeft})`,
215+
}
216+
: {}),
217+
...(borderRadiuses.topRight
218+
? {
219+
'--pc-box-border-radius-top-right': `var(--p-border-radius-${borderRadiuses.topRight})`,
220+
}
221+
: {}),
222+
...(margins.bottom
223+
? {'--pc-box-margin-bottom': `var(--p-space-${margins.bottom})`}
224+
: {}),
225+
...(margins.left
226+
? {'--pc-box-margin-left': `var(--p-space-${margins.left})`}
227+
: {}),
228+
...(margins.right
229+
? {'--pc-box-margin-right': `var(--p-space-${margins.right})`}
230+
: {}),
231+
...(margins.top
232+
? {'--pc-box-margin-top': `var(--p-space-${margins.top})`}
233+
: {}),
234+
...(paddings.bottom
235+
? {'--pc-box-padding-bottom': `var(--p-space-${paddings.bottom})`}
236+
: {}),
237+
...(paddings.left
238+
? {'--pc-box-padding-left': `var(--p-space-${paddings.left})`}
239+
: {}),
240+
...(paddings.right
241+
? {'--pc-box-padding-right': `var(--p-space-${paddings.right})`}
242+
: {}),
243+
...(paddings.top
244+
? {'--pc-box-padding-top': `var(--p-space-${paddings.top})`}
245+
: {}),
246+
...(shadow ? {'--pc-box-shadow': `var(--p-shadow-${shadow})`} : {}),
241247
} as React.CSSProperties;
242248

243-
const className = classNames(styles.root);
249+
const className = classNames(styles.Box);
244250

245-
return (
246-
<Component ref={ref} className={className} style={style}>
247-
{children}
248-
</Component>
251+
return createElement(
252+
as,
253+
{
254+
className,
255+
style,
256+
ref,
257+
},
258+
children,
249259
);
250260
},
251-
) as PolymorphicBox;
261+
);
252262

253263
Box.displayName = 'Box';

‎yarn.lock‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2402,11 +2402,6 @@
24022402
resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
24032403
integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
24042404

2405-
"@radix-ui/react-polymorphic@^0.0.14":
2406-
version "0.0.14"
2407-
resolved "https://registry.yarnpkg.com/@radix-ui/react-polymorphic/-/react-polymorphic-0.0.14.tgz#fc6cefee6686db8c5a7ff14c8c1b9b5abdee325b"
2408-
integrity sha512-9nsMZEDU3LeIUeHJrpkkhZVxu/9Fc7P2g2I3WR+uA9mTbNC3hGaabi0dV6wg0CfHb+m4nSs1pejbE/5no3MJTA==
2409-
24102405
"@rollup/plugin-babel@^5.3.1":
24112406
version "5.3.1"
24122407
resolved "https://registry.yarnpkg.com/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz#04bc0608f4aa4b2e4b1aebf284344d0f68fda283"

0 commit comments

Comments
 (0)