Skip to content

Commit e53f790

Browse files
kyledurandkyledurand
authored
[Box] Use logical properties and use single custom property where possible (#7534)
This change reduces markup for the following properties: ```tsx <Box padding="1" borderRadius="1" border="dark">Hello</Box> ``` Markup before: ![image](https://screenshot.click/26-58-8rp3k-j7qcf.png) Markup after: ![image](https://screenshot.click/26-59-bnp2z-shekc.png) Make sure to 🎩 with nested elements <details> <summary>Box playground</summary> ```jsx import React from 'react'; import {AlphaStack, Page, Box, BoxProps} from '../src'; const props = {background: 'surface-attention' as BoxProps['background']}; export function Playground() { return ( <Page title="Playground"> <Box padding="2"> <AlphaStack> <Box padding="3" {...props}> padding </Box> <Box paddingInlineStart="3" {...props}> paddingInlineStart </Box> <Box paddingInlineEnd="3" {...props}> paddingInlineEnd </Box> <Box paddingBlockStart="3" {...props}> paddingBlockStart </Box> <Box paddingBlockEnd="3" {...props}> paddingBlockEnd </Box> <hr style={{width: '100%'}} /> <Box border="dark" {...props}> border </Box> <Box borderInlineStart="dark" {...props}> borderInlineStart </Box> <Box borderInlineEnd="dark" {...props}> borderInlineEnd </Box> <Box borderBlockStart="dark" {...props}> borderBlockStart </Box> <Box borderBlockEnd="dark" {...props}> borderBlockEnd </Box> <hr style={{width: '100%'}} /> <Box borderRadius="4" {...props}> borderRadius </Box> <Box borderRadiusStartStart="4" {...props}> borderRadiusStartStart </Box> <Box borderRadiusStartEnd="4" {...props}> borderRadiusStartEnd </Box> <Box borderRadiusEndStart="4" {...props}> borderRadiusEndStart </Box> <Box borderRadiusEndEnd="4" {...props}> borderRadiusEndEnd </Box> </AlphaStack> </Box> </Page> ); } ``` </details>
1 parent af47862 commit e53f790

File tree

11 files changed

+1804
-1756
lines changed

11 files changed

+1804
-1756
lines changed

‎.changeset/beige-trainers-marry.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': patch
3+
---
4+
5+
Update box to use logical properties, condense single value into single custom property

‎polaris-react/src/components/AlphaCard/tests/AlphaCard.test.tsx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,10 +39,7 @@ describe('AlphaCard', () => {
3939

4040
expect(alphaCard).toContainReactComponent('div', {
4141
style: expect.objectContaining({
42-
'--pc-box-border-radius-bottom-left': 'var(--p-border-radius-2)',
43-
'--pc-box-border-radius-bottom-right': 'var(--p-border-radius-2)',
44-
'--pc-box-border-radius-top-left': 'var(--p-border-radius-2)',
45-
'--pc-box-border-radius-top-right': 'var(--p-border-radius-2)',
42+
'--pc-box-border-radius': 'var(--p-border-radius-2)',
4643
}),
4744
});
4845
});

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

Lines changed: 43 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,64 @@
1-
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
21
.Box {
32
--pc-box-shadow: initial;
43
--pc-box-background: initial;
5-
--pc-box-border-radius-bottom-left: initial;
6-
--pc-box-border-radius-bottom-right: initial;
7-
--pc-box-border-radius-top-left: initial;
8-
--pc-box-border-radius-top-right: initial;
9-
--pc-box-border-bottom: initial;
10-
--pc-box-border-left: initial;
11-
--pc-box-border-right: initial;
12-
--pc-box-border-top: initial;
4+
--pc-box-border-radius: initial;
5+
--pc-box-border-radius-end-start: initial;
6+
--pc-box-border-radius-end-end: initial;
7+
--pc-box-border-radius-start-start: initial;
8+
--pc-box-border-radius-start-end: initial;
9+
--pc-box-border: initial;
10+
--pc-box-border-block-end: initial;
11+
--pc-box-border-inline-start: initial;
12+
--pc-box-border-inline-end: initial;
13+
--pc-box-border-block-start: initial;
1314
--pc-box-color: initial;
1415
--pc-box-min-height: initial;
1516
--pc-box-min-width: initial;
1617
--pc-box-max-width: initial;
1718
--pc-box-overflow-x: initial;
1819
--pc-box-overflow-y: initial;
19-
--pc-box-padding-bottom: initial;
20-
--pc-box-padding-left: initial;
21-
--pc-box-padding-right: initial;
22-
--pc-box-padding-top: initial;
20+
--pc-box-padding: initial;
21+
--pc-box-padding-block-end: initial;
22+
--pc-box-padding-inline-start: initial;
23+
--pc-box-padding-inline-end: initial;
24+
--pc-box-padding-block-start: initial;
2325
--pc-box-width: initial;
2426
background-color: var(--pc-box-background);
2527
box-shadow: var(--pc-box-shadow);
26-
border-bottom-left-radius: var(--pc-box-border-radius-bottom-left);
27-
border-bottom-right-radius: var(--pc-box-border-radius-bottom-right);
28-
border-top-left-radius: var(--pc-box-border-radius-top-left);
29-
border-top-right-radius: var(--pc-box-border-radius-top-right);
30-
border-bottom: var(--pc-box-border-bottom);
31-
border-left: var(--pc-box-border-left);
32-
border-right: var(--pc-box-border-right);
33-
border-top: var(--pc-box-border-top);
28+
border-radius: var(--pc-box-border-radius);
29+
border-end-start-radius: var(
30+
--pc-box-border-radius-end-start,
31+
var(--pc-box-border-radius)
32+
);
33+
border-end-end-radius: var(
34+
--pc-box-border-radius-end-end,
35+
var(--pc-box-border-radius)
36+
);
37+
border-start-start-radius: var(
38+
--pc-box-border-radius-start-start,
39+
var(--pc-box-border-radius)
40+
);
41+
border-start-end-radius: var(
42+
--pc-box-border-radius-start-end,
43+
var(--pc-box-border-radius)
44+
);
45+
border-block-end: var(--pc-box-border-bottom, var(--pc-box-border));
46+
border-inline-start: var(--pc-box-border-inline-start, var(--pc-box-border));
47+
border-inline-end: var(--pc-box-border-inline-end, var(--pc-box-border));
48+
border-block-start: var(--pc-box-border-block-start, var(--pc-box-border));
3449
color: var(--pc-box-color);
3550
min-height: var(--pc-box-min-height);
3651
min-width: var(--pc-box-min-width);
3752
max-width: var(--pc-box-max-width);
3853
overflow-x: var(--pc-box-overflow-x);
3954
overflow-y: var(--pc-box-overflow-y);
40-
padding-bottom: var(--pc-box-padding-bottom);
41-
padding-left: var(--pc-box-padding-left);
42-
padding-right: var(--pc-box-padding-right);
43-
padding-top: var(--pc-box-padding-top);
55+
padding-block-end: var(--pc-box-padding-block-end, var(--pc-box-padding));
56+
padding-inline-start: var(
57+
--pc-box-padding-inline-start,
58+
var(--pc-box-padding)
59+
);
60+
padding-inline-end: var(--pc-box-padding-inline-end, var(--pc-box-padding));
61+
padding-block-start: var(--pc-box-padding-block-start, var(--pc-box-padding));
4462
width: var(--pc-box-width);
45-
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
4663
-webkit-overflow-scrolling: touch;
4764
}

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

Lines changed: 95 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -103,10 +103,10 @@ export type BorderTokenAlias =
103103
| 'transparent';
104104

105105
interface Border {
106-
bottom: BorderTokenAlias;
107-
left: BorderTokenAlias;
108-
right: BorderTokenAlias;
109-
top: BorderTokenAlias;
106+
blockStart: BorderTokenAlias;
107+
blockEnd: BorderTokenAlias;
108+
inlineStart: BorderTokenAlias;
109+
inlineEnd: BorderTokenAlias;
110110
}
111111

112112
export type BorderRadiusTokenScale =
@@ -122,17 +122,17 @@ export type BorderRadiusTokenScale =
122122
| 'half';
123123

124124
interface BorderRadius {
125-
bottomLeft: BorderRadiusTokenScale;
126-
bottomRight: BorderRadiusTokenScale;
127-
topLeft: BorderRadiusTokenScale;
128-
topRight: BorderRadiusTokenScale;
125+
startStart: BorderRadiusTokenScale;
126+
startEnd: BorderRadiusTokenScale;
127+
endStart: BorderRadiusTokenScale;
128+
endEnd: BorderRadiusTokenScale;
129129
}
130130

131131
interface Spacing {
132-
bottom: SpacingSpaceScale;
133-
left: SpacingSpaceScale;
134-
right: SpacingSpaceScale;
135-
top: SpacingSpaceScale;
132+
blockStart: SpacingSpaceScale;
133+
blockEnd: SpacingSpaceScale;
134+
inlineStart: SpacingSpaceScale;
135+
inlineEnd: SpacingSpaceScale;
136136
}
137137

138138
export interface BoxProps extends PropsWithChildren {
@@ -142,24 +142,24 @@ export interface BoxProps extends PropsWithChildren {
142142
background?: BackgroundColorTokenScale;
143143
/** Border style */
144144
border?: BorderTokenAlias;
145-
/** Bottom border style */
146-
borderBottom?: BorderTokenAlias;
147-
/** Left border style */
148-
borderLeft?: BorderTokenAlias;
149-
/** Right border style */
150-
borderRight?: BorderTokenAlias;
151-
/** Top border style */
152-
borderTop?: BorderTokenAlias;
145+
/** Vertical end border style */
146+
borderBlockEnd?: BorderTokenAlias;
147+
/** Horizontal start border style */
148+
borderInlineStart?: BorderTokenAlias;
149+
/** Horizontal end border style */
150+
borderInlineEnd?: BorderTokenAlias;
151+
/** Vertical start border style */
152+
borderBlockStart?: BorderTokenAlias;
153153
/** Border radius */
154154
borderRadius?: BorderRadiusTokenScale;
155-
/** Bottom left border radius */
156-
borderRadiusBottomLeft?: BorderRadiusTokenScale;
157-
/** Bottom right border radius */
158-
borderRadiusBottomRight?: BorderRadiusTokenScale;
159-
/** Top left border radius */
160-
borderRadiusTopLeft?: BorderRadiusTokenScale;
161-
/** Top right border radius */
162-
borderRadiusTopRight?: BorderRadiusTokenScale;
155+
/** Vertical end horizontal start border radius */
156+
borderRadiusEndStart?: BorderRadiusTokenScale;
157+
/** Vertical end horizontal end border radius */
158+
borderRadiusEndEnd?: BorderRadiusTokenScale;
159+
/** Vertical start horizontal start border radius */
160+
borderRadiusStartStart?: BorderRadiusTokenScale;
161+
/** Verital start horizontal end border radius */
162+
borderRadiusStartEnd?: BorderRadiusTokenScale;
163163
/** Color of children */
164164
color?: ColorTokenScale;
165165
/** HTML id attribute */
@@ -176,14 +176,14 @@ export interface BoxProps extends PropsWithChildren {
176176
overflowY?: Overflow;
177177
/** Spacing around children */
178178
padding?: SpacingSpaceScale;
179-
/** Bottom spacing around children */
180-
paddingBottom?: SpacingSpaceScale;
181-
/** Left spacing around children */
182-
paddingLeft?: SpacingSpaceScale;
183-
/** Right spacing around children */
184-
paddingRight?: SpacingSpaceScale;
185-
/** Top spacing around children */
186-
paddingTop?: SpacingSpaceScale;
179+
/** Vertical start spacing around children */
180+
paddingBlockStart?: SpacingSpaceScale;
181+
/** Vertical end spacing around children */
182+
paddingBlockEnd?: SpacingSpaceScale;
183+
/** Horizontal start spacing around children */
184+
paddingInlineStart?: SpacingSpaceScale;
185+
/** Horizontal end spacing around children */
186+
paddingInlineEnd?: SpacingSpaceScale;
187187
/** Shadow */
188188
shadow?: DepthShadowAlias;
189189
/** Set width of container */
@@ -196,15 +196,15 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
196196
as = 'div',
197197
background,
198198
border,
199-
borderBottom,
200-
borderLeft,
201-
borderRight,
202-
borderTop,
199+
borderBlockEnd,
200+
borderInlineStart,
201+
borderInlineEnd,
202+
borderBlockStart,
203203
borderRadius,
204-
borderRadiusBottomLeft,
205-
borderRadiusBottomRight,
206-
borderRadiusTopLeft,
207-
borderRadiusTopRight,
204+
borderRadiusEndStart,
205+
borderRadiusEndEnd,
206+
borderRadiusStartStart,
207+
borderRadiusStartEnd,
208208
children,
209209
color,
210210
id,
@@ -214,86 +214,87 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
214214
overflowX,
215215
overflowY,
216216
padding,
217-
paddingBottom,
218-
paddingLeft,
219-
paddingRight,
220-
paddingTop,
217+
paddingBlockStart,
218+
paddingBlockEnd,
219+
paddingInlineStart,
220+
paddingInlineEnd,
221221
shadow,
222222
width,
223223
},
224224
ref,
225225
) => {
226226
const borders = {
227-
bottom: borderBottom ? borderBottom : border,
228-
left: borderLeft ? borderLeft : border,
229-
right: borderRight ? borderRight : border,
230-
top: borderTop ? borderTop : border,
227+
blockEnd: borderBlockEnd,
228+
inlineStart: borderInlineStart,
229+
inlineEnd: borderInlineEnd,
230+
blockStart: borderBlockStart,
231231
} as Border;
232232

233233
const borderRadiuses = {
234-
bottomLeft: borderRadiusBottomLeft
235-
? borderRadiusBottomLeft
236-
: borderRadius,
237-
bottomRight: borderRadiusBottomRight
238-
? borderRadiusBottomRight
239-
: borderRadius,
240-
topLeft: borderRadiusTopLeft ? borderRadiusTopLeft : borderRadius,
241-
topRight: borderRadiusTopRight ? borderRadiusTopRight : borderRadius,
234+
endStart: borderRadiusEndStart,
235+
endEnd: borderRadiusEndEnd,
236+
startStart: borderRadiusStartStart,
237+
startEnd: borderRadiusStartEnd,
242238
} as BorderRadius;
243239

244240
const paddings = {
245-
bottom: paddingBottom ? paddingBottom : padding,
246-
left: paddingLeft ? paddingLeft : padding,
247-
right: paddingRight ? paddingRight : padding,
248-
top: paddingTop ? paddingTop : padding,
241+
blockEnd: paddingBlockEnd,
242+
inlineStart: paddingInlineStart,
243+
inlineEnd: paddingInlineEnd,
244+
blockStart: paddingBlockStart,
249245
} as Spacing;
250246

251247
const style = {
252248
'--pc-box-color': color ? `var(--p-${color})` : undefined,
253249
'--pc-box-background': background ? `var(--p-${background})` : undefined,
254-
'--pc-box-border-bottom': borders.bottom
255-
? `var(--p-border-${borders.bottom})`
250+
'--pc-box-border': border ? `var(--p-border-${border})` : undefined,
251+
'--pc-box-border-bottom': borders.blockEnd
252+
? `var(--p-border-${borders.blockEnd})`
256253
: undefined,
257-
'--pc-box-border-left': borders.left
258-
? `var(--p-border-${borders.left})`
254+
'--pc-box-border-inline-start': borders.inlineStart
255+
? `var(--p-border-${borders.inlineStart})`
259256
: undefined,
260-
'--pc-box-border-right': borders.right
261-
? `var(--p-border-${borders.right})`
257+
'--pc-box-border-inline-end': borders.inlineEnd
258+
? `var(--p-border-${borders.inlineEnd})`
262259
: undefined,
263-
'--pc-box-border-top': borders.top
264-
? `var(--p-border-${borders.top})`
260+
'--pc-box-border-block-start': borders.blockStart
261+
? `var(--p-border-${borders.blockStart})`
265262
: undefined,
266-
'--pc-box-border-radius-bottom-left': borderRadiuses.bottomLeft
267-
? `var(--p-border-radius-${borderRadiuses.bottomLeft})`
263+
'--pc-box-border-radius': borderRadius
264+
? `var(--p-border-radius-${borderRadius})`
268265
: undefined,
269-
'--pc-box-border-radius-bottom-right': borderRadiuses.bottomRight
270-
? `var(--p-border-radius-${borderRadiuses.bottomRight})`
266+
'--pc-box-border-radius-end-start': borderRadiuses.endStart
267+
? `var(--p-border-radius-${borderRadiuses.endStart})`
271268
: undefined,
272-
'--pc-box-border-radius-top-left': borderRadiuses.topLeft
273-
? `var(--p-border-radius-${borderRadiuses.topLeft})`
269+
'--pc-box-border-radius-end-end': borderRadiuses.endEnd
270+
? `var(--p-border-radius-${borderRadiuses.endEnd})`
274271
: undefined,
275-
'--pc-box-border-radius-top-right': borderRadiuses.topRight
276-
? `var(--p-border-radius-${borderRadiuses.topRight})`
272+
'--pc-box-border-radius-start-start': borderRadiuses.startStart
273+
? `var(--p-border-radius-${borderRadiuses.startStart})`
277274
: undefined,
278-
'--pc-box-min-height': minHeight ?? undefined,
279-
'--pc-box-min-width': minWidth ?? undefined,
280-
'--pc-box-max-width': maxWidth ?? undefined,
281-
'--pc-box-overflow-x': overflowX ?? undefined,
282-
'--pc-box-overflow-y': overflowY ?? undefined,
283-
'--pc-box-padding-bottom': paddings.bottom
284-
? `var(--p-space-${paddings.bottom})`
275+
'--pc-box-border-radius-start-end': borderRadiuses.startEnd
276+
? `var(--p-border-radius-${borderRadiuses.startEnd})`
285277
: undefined,
286-
'--pc-box-padding-left': paddings.left
287-
? `var(--p-space-${paddings.left})`
278+
'--pc-box-min-height': minHeight,
279+
'--pc-box-min-width': minWidth,
280+
'--pc-box-max-width': maxWidth,
281+
'--pc-box-overflow-x': overflowX,
282+
'--pc-box-overflow-y': overflowY,
283+
'--pc-box-padding': padding ? `var(--p-space-${padding})` : undefined,
284+
'--pc-box-padding-block-end': paddings.blockEnd
285+
? `var(--p-space-${paddings.blockEnd})`
288286
: undefined,
289-
'--pc-box-padding-right': paddings.right
290-
? `var(--p-space-${paddings.right})`
287+
'--pc-box-padding-inline-start': paddings.inlineStart
288+
? `var(--p-space-${paddings.inlineStart})`
291289
: undefined,
292-
'--pc-box-padding-top': paddings.top
293-
? `var(--p-space-${paddings.top})`
290+
'--pc-box-padding-inline-end': paddings.inlineEnd
291+
? `var(--p-space-${paddings.inlineEnd})`
292+
: undefined,
293+
'--pc-box-padding-block-start': paddings.blockStart
294+
? `var(--p-space-${paddings.blockStart})`
294295
: undefined,
295296
'--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined,
296-
'--pc-box-width': width ?? undefined,
297+
'--pc-box-width': width,
297298
} as React.CSSProperties;
298299

299300
const className = classNames(styles.Box);

0 commit comments

Comments
 (0)