Skip to content

Commit 5fa7c85

Browse files
kyledurandkyledurand
committed
Update box to use logical properties
1 parent f6568c3 commit 5fa7c85

File tree

4 files changed

+126
-119
lines changed

4 files changed

+126
-119
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/Box/Box.scss‎

Lines changed: 27 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,48 @@
22
.Box {
33
--pc-box-shadow: initial;
44
--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;
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-block-end: initial;
10+
--pc-box-border-inline-start: initial;
11+
--pc-box-border-inline-end: initial;
12+
--pc-box-border-block-start: initial;
1313
--pc-box-color: initial;
1414
--pc-box-min-height: initial;
1515
--pc-box-min-width: initial;
1616
--pc-box-max-width: initial;
1717
--pc-box-overflow-x: initial;
1818
--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;
19+
--pc-box-padding-block-end: initial;
20+
--pc-box-padding-inline-start: initial;
21+
--pc-box-padding-inline-end: initial;
22+
--pc-box-padding-block-start: initial;
2323
--pc-box-width: initial;
2424
background-color: var(--pc-box-background);
2525
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);
26+
border: var(--pc-box-border);
27+
border-radius: var(--pc-box-border-radius);
28+
border-end-start-radius: var(--pc-box-border-radius-end-start);
29+
border-end-end-radius: var(--pc-box-border-radius-end-end);
30+
border-start-start-radius: var(--pc-box-border-radius-start-start);
31+
border-start-end-radius: var(--pc-box-border-radius-start-end);
32+
border-block-end: var(--pc-box-border-bottom);
33+
border-inline-start: var(--pc-box-border-inline-start);
34+
border-inline-end: var(--pc-box-border-inline-end);
35+
border-block-start: var(--pc-box-border-block-start);
3436
color: var(--pc-box-color);
3537
min-height: var(--pc-box-min-height);
3638
min-width: var(--pc-box-min-width);
3739
max-width: var(--pc-box-max-width);
3840
overflow-x: var(--pc-box-overflow-x);
3941
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);
42+
padding: var(--pc-box-padding);
43+
padding-block-end: var(--pc-box-padding-block-end);
44+
padding-inline-start: var(--pc-box-padding-inline-start);
45+
padding-inline-end: var(--pc-box-padding-inline-end);
46+
padding-block-start: var(--pc-box-padding-block-start);
4447
width: var(--pc-box-width);
4548
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
4649
-webkit-overflow-scrolling: touch;

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

Lines changed: 89 additions & 88 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,83 +214,84 @@ 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})` : 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})`
274+
: undefined,
275+
'--pc-box-border-radius-start-end': borderRadiuses.startEnd
276+
? `var(--p-border-radius-${borderRadiuses.startEnd})`
277277
: undefined,
278278
'--pc-box-min-height': minHeight ?? undefined,
279279
'--pc-box-min-width': minWidth ?? undefined,
280280
'--pc-box-max-width': maxWidth ?? undefined,
281281
'--pc-box-overflow-x': overflowX ?? undefined,
282282
'--pc-box-overflow-y': overflowY ?? undefined,
283-
'--pc-box-padding-bottom': paddings.bottom
284-
? `var(--p-space-${paddings.bottom})`
283+
'--pc-box-padding': padding ? `var(--p-space-${padding})` : undefined,
284+
'--pc-box-padding-block-end': paddings.blockEnd
285+
? `var(--p-space-${paddings.blockEnd})`
285286
: undefined,
286-
'--pc-box-padding-left': paddings.left
287-
? `var(--p-space-${paddings.left})`
287+
'--pc-box-padding-inline-start': paddings.inlineStart
288+
? `var(--p-space-${paddings.inlineStart})`
288289
: undefined,
289-
'--pc-box-padding-right': paddings.right
290-
? `var(--p-space-${paddings.right})`
290+
'--pc-box-padding-inline-end': paddings.inlineEnd
291+
? `var(--p-space-${paddings.inlineEnd})`
291292
: undefined,
292-
'--pc-box-padding-top': paddings.top
293-
? `var(--p-space-${paddings.top})`
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,
296297
'--pc-box-width': width ?? undefined,

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -75,28 +75,26 @@ describe('Box', () => {
7575
});
7676

7777
it('only renders the custom property that matches the property passed in', () => {
78-
const box = mountWithApp(<Box paddingLeft="2">{children}</Box>);
78+
const box = mountWithApp(<Box paddingInlineStart="2">{children}</Box>);
7979

8080
expect(box).toContainReactComponent('div', {
8181
style: {
82-
'--pc-box-padding-left': 'var(--p-space-2)',
82+
'--pc-box-padding-inline-start': 'var(--p-space-2)',
8383
} as React.CSSProperties,
8484
});
8585
});
8686

8787
it('renders custom properties combined with any overrides if they are passed in', () => {
8888
const box = mountWithApp(
89-
<Box padding="1" paddingLeft="2">
89+
<Box padding="1" paddingInlineStart="2">
9090
{children}
9191
</Box>,
9292
);
9393

9494
expect(box).toContainReactComponent('div', {
9595
style: {
96-
'--pc-box-padding-bottom': 'var(--p-space-1)',
97-
'--pc-box-padding-left': 'var(--p-space-2)',
98-
'--pc-box-padding-right': 'var(--p-space-1)',
99-
'--pc-box-padding-top': 'var(--p-space-1)',
96+
'--pc-box-padding': 'var(--p-space-1)',
97+
'--pc-box-padding-inline-start': 'var(--p-space-2)',
10098
} as React.CSSProperties,
10199
});
102100
});

0 commit comments

Comments
 (0)