Skip to content

Commit bdc62eb

Browse files
kyledurandlaurkim
kyledurand
and
laurkim
authored
Fix responsive props, remove fallback (#7904)
Fixes nested Boxes spacing issues in Safari and Chromatic 🎩 changes on the layout beta branch [here](#7903) I think there are still improvements that can be made here but this is a good first step if it safely unblocks us Co-authored-by: Lo Kim <lo.kim@shopify.com>
1 parent 19092ae commit bdc62eb

File tree

5 files changed

+68
-91
lines changed

5 files changed

+68
-91
lines changed

‎.changeset/chilled-mugs-fetch.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+
Fixed a bug where responsive props would inherit values on Box

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

Lines changed: 4 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -9,31 +9,18 @@
99
}
1010

1111
.Box {
12-
@include responsive-props('box', 'padding', 'padding');
12+
@include responsive-props('box', 'padding-block-end', 'padding-block-end');
1313
@include responsive-props(
1414
'box',
15-
'padding-block-end',
16-
'padding-block-end',
17-
'padding'
18-
);
19-
@include responsive-props(
20-
'box',
21-
'padding-block-start',
2215
'padding-block-start',
23-
'padding'
16+
'padding-block-start'
2417
);
2518
@include responsive-props(
2619
'box',
2720
'padding-inline-start',
28-
'padding-inline-start',
29-
'padding'
30-
);
31-
@include responsive-props(
32-
'box',
33-
'padding-inline-end',
34-
'padding-inline-end',
35-
'padding'
21+
'padding-inline-start'
3622
);
23+
@include responsive-props('box', 'padding-inline-end', 'padding-inline-end');
3724

3825
// stylelint-disable -- Polaris component custom properties
3926
--pc-box-shadow: initial;
@@ -54,11 +41,6 @@
5441
--pc-box-max-width: initial;
5542
--pc-box-overflow-x: initial;
5643
--pc-box-overflow-y: initial;
57-
--pc-box-padding: initial;
58-
--pc-box-padding-block-end: initial;
59-
--pc-box-padding-inline-start: initial;
60-
--pc-box-padding-inline-end: initial;
61-
--pc-box-padding-block-start: initial;
6244
--pc-box-width: initial;
6345
--pc-box-border-width: var(--p-border-width-1);
6446
--pc-box-inset-block-start: initial;

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -277,30 +277,29 @@ export const Box = forwardRef<HTMLElement, BoxProps>(
277277
'--pc-box-max-width': maxWidth,
278278
'--pc-box-overflow-x': overflowX,
279279
'--pc-box-overflow-y': overflowY,
280-
...getResponsiveProps('box', 'padding', 'space', padding),
281280
...getResponsiveProps(
282281
'box',
283282
'padding-block-end',
284283
'space',
285-
paddingBlockEnd,
284+
paddingBlockEnd || padding,
286285
),
287286
...getResponsiveProps(
288287
'box',
289288
'padding-block-start',
290289
'space',
291-
paddingBlockStart,
290+
paddingBlockStart || padding,
292291
),
293292
...getResponsiveProps(
294293
'box',
295294
'padding-inline-start',
296295
'space',
297-
paddingInlineStart,
296+
paddingInlineStart || padding,
298297
),
299298
...getResponsiveProps(
300299
'box',
301300
'padding-inline-end',
302301
'space',
303-
paddingInlineEnd,
302+
paddingInlineEnd || padding,
304303
),
305304
'--pc-box-shadow': shadow ? `var(--p-shadow-${shadow})` : undefined,
306305
'--pc-box-width': width,

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

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,9 @@ describe('Box', () => {
9393

9494
expect(box).toContainReactComponent('div', {
9595
style: {
96-
'--pc-box-padding-xs': 'var(--p-space-1)',
96+
'--pc-box-padding-block-end-xs': 'var(--p-space-1)',
97+
'--pc-box-padding-block-start-xs': 'var(--p-space-1)',
98+
'--pc-box-padding-inline-end-xs': 'var(--p-space-1)',
9799
'--pc-box-padding-inline-start-xs': 'var(--p-space-2)',
98100
} as React.CSSProperties,
99101
});
@@ -106,8 +108,14 @@ describe('Box', () => {
106108

107109
expect(box).toContainReactComponent('div', {
108110
style: expect.objectContaining({
109-
'--pc-box-padding-md': 'var(--p-space-8)',
110-
'--pc-box-padding-xs': 'var(--p-space-2)',
111+
'--pc-box-padding-block-end-md': 'var(--p-space-8)',
112+
'--pc-box-padding-block-end-xs': 'var(--p-space-2)',
113+
'--pc-box-padding-block-start-md': 'var(--p-space-8)',
114+
'--pc-box-padding-block-start-xs': 'var(--p-space-2)',
115+
'--pc-box-padding-inline-end-md': 'var(--p-space-8)',
116+
'--pc-box-padding-inline-end-xs': 'var(--p-space-2)',
117+
'--pc-box-padding-inline-start-md': 'var(--p-space-8)',
118+
'--pc-box-padding-inline-start-xs': 'var(--p-space-2)',
111119
}) as React.CSSProperties,
112120
});
113121
});

‎polaris-react/src/styles/shared/_responsive-props.scss‎

Lines changed: 44 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,57 @@
1-
@mixin responsive-props(
2-
$componentName,
3-
$componentProp,
4-
$declarationProp,
5-
$shorthandFallback: null
6-
) {
1+
@mixin responsive-props($componentName, $componentProp, $declarationProp) {
72
// stylelint-disable -- Polaris component custom properties
83
--pc-#{$componentName}-#{$componentProp}-xs: initial;
9-
--pc-#{$componentName}-#{$componentProp}-sm: var(
10-
--pc-#{$componentName}-#{$componentProp}-xs
11-
);
12-
--pc-#{$componentName}-#{$componentProp}-md: var(
13-
--pc-#{$componentName}-#{$componentProp}-sm
14-
);
15-
--pc-#{$componentName}-#{$componentProp}-lg: var(
16-
--pc-#{$componentName}-#{$componentProp}-md
17-
);
18-
--pc-#{$componentName}-#{$componentProp}-xl: var(
19-
--pc-#{$componentName}-#{$componentProp}-lg
20-
);
21-
@if $shorthandFallback {
4+
--pc-#{$componentName}-#{$componentProp}-sm: initial;
5+
--pc-#{$componentName}-#{$componentProp}-md: initial;
6+
--pc-#{$componentName}-#{$componentProp}-lg: initial;
7+
--pc-#{$componentName}-#{$componentProp}-xl: initial;
8+
9+
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xs);
10+
11+
@media #{$p-breakpoints-sm-up} {
2212
#{$declarationProp}: var(
23-
--pc-#{$componentName}-#{$componentProp}-xs,
24-
var(--pc-#{$componentName}-#{$shorthandFallback}-xs)
13+
--pc-#{$componentName}-#{$componentProp}-sm,
14+
var(--pc-#{$componentName}-#{$componentProp}-xs)
2515
);
16+
}
2617

27-
@media #{$p-breakpoints-sm-up} {
28-
#{$declarationProp}: var(
18+
@media #{$p-breakpoints-md-up} {
19+
#{$declarationProp}: var(
20+
--pc-#{$componentName}-#{$componentProp}-md,
21+
var(
2922
--pc-#{$componentName}-#{$componentProp}-sm,
30-
var(--pc-#{$componentName}-#{$shorthandFallback}-sm)
31-
);
32-
}
23+
var(--pc-#{$componentName}-#{$componentProp}-xs)
24+
)
25+
);
26+
}
3327

34-
@media #{$p-breakpoints-md-up} {
35-
#{$declarationProp}: var(
28+
@media #{$p-breakpoints-lg-up} {
29+
#{$declarationProp}: var(
30+
--pc-#{$componentName}-#{$componentProp}-lg,
31+
var(
3632
--pc-#{$componentName}-#{$componentProp}-md,
37-
var(--pc-#{$componentName}-#{$shorthandFallback}-md)
38-
);
39-
}
33+
var(
34+
--pc-#{$componentName}-#{$componentProp}-sm,
35+
var(--pc-#{$componentName}-#{$componentProp}-xs)
36+
)
37+
)
38+
);
39+
}
4040

41-
@media #{$p-breakpoints-lg-up} {
42-
#{$declarationProp}: var(
41+
@media #{$p-breakpoints-xl-up} {
42+
#{$declarationProp}: var(
43+
--pc-#{$componentName}-#{$componentProp}-xl,
44+
var(
4345
--pc-#{$componentName}-#{$componentProp}-lg,
44-
var(--pc-#{$componentName}-#{$shorthandFallback}-lg)
45-
);
46-
}
47-
48-
@media #{$p-breakpoints-xl-up} {
49-
#{$declarationProp}: var(
50-
--pc-#{$componentName}-#{$componentProp}-xl,
51-
var(--pc-#{$componentName}-#{$shorthandFallback}-xl)
52-
);
53-
}
54-
} @else {
55-
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xs);
56-
57-
@media #{$p-breakpoints-sm-up} {
58-
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-sm);
59-
}
60-
61-
@media #{$p-breakpoints-md-up} {
62-
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-md);
63-
}
64-
65-
@media #{$p-breakpoints-lg-up} {
66-
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-lg);
67-
}
68-
69-
@media #{$p-breakpoints-xl-up} {
70-
#{$declarationProp}: var(--pc-#{$componentName}-#{$componentProp}-xl);
71-
}
46+
var(
47+
--pc-#{$componentName}-#{$componentProp}-md,
48+
var(
49+
--pc-#{$componentName}-#{$componentProp}-sm,
50+
var(--pc-#{$componentName}-#{$componentProp}-xs)
51+
)
52+
)
53+
)
54+
);
7255
}
7356
// stylelint-enable
7457
}

0 commit comments

Comments
 (0)