Skip to content

Commit f3a65b2

Browse files
jesstelfordjesstelford
committed
Support responsive syntax for all of <Box>'s style props.
1 parent f548035 commit f3a65b2

File tree

5 files changed

+207
-260
lines changed

5 files changed

+207
-260
lines changed

‎.changeset/cuddly-ants-reflect.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@shopify/polaris': minor
3+
---
4+
5+
Support responsive syntax for all of <Box>'s style props.

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

Lines changed: 32 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -8,110 +8,41 @@
88
padding-inline-start: 0;
99
}
1010

11+
/* prettier-ignore */
1112
.Box {
13+
@include responsive-props('box', 'background', 'background-color');
14+
@include responsive-props('box', 'border-block-end-width', 'border-block-end-width', ('xs': 0));
15+
@include responsive-props('box', 'border-block-start-width', 'border-block-start-width', ('xs': 0));
16+
@include responsive-props('box', 'border-color', 'border-color');
17+
@include responsive-props('box', 'border-end-end-radius', 'border-end-end-radius');
18+
@include responsive-props('box', 'border-end-start-radius', 'border-end-start-radius');
19+
@include responsive-props('box', 'border-inline-end-width', 'border-inline-end-width', ('xs': 0));
20+
@include responsive-props('box', 'border-inline-start-width', 'border-inline-start-width', ('xs': 0));
21+
@include responsive-props('box', 'border-start-end-radius', 'border-start-end-radius');
22+
@include responsive-props('box', 'border-start-start-radius', 'border-start-start-radius');
23+
@include responsive-props('box', 'border-style', 'border-style');
24+
@include responsive-props('box', 'color', 'color');
25+
@include responsive-props('box', 'inset-block-end', 'inset-block-end');
26+
@include responsive-props('box', 'inset-block-start', 'inset-block-start');
27+
@include responsive-props('box', 'inset-inline-end', 'inset-inline-end');
28+
@include responsive-props('box', 'inset-inline-start', 'inset-inline-start');
29+
@include responsive-props('box', 'max-width', 'max-width');
30+
@include responsive-props('box', 'min-height', 'min-height');
31+
@include responsive-props('box', 'min-width', 'min-width');
32+
@include responsive-props('box', 'outline-color', 'outline-color');
33+
@include responsive-props('box', 'outline-style', 'outline-style');
34+
@include responsive-props('box', 'outline-width', 'outline-width');
35+
@include responsive-props('box', 'overflow-x', 'overflow-x');
36+
@include responsive-props('box', 'overflow-y', 'overflow-y');
1237
@include responsive-props('box', 'padding-block-end', 'padding-block-end');
13-
@include responsive-props(
14-
'box',
15-
'padding-block-start',
16-
'padding-block-start'
17-
);
18-
@include responsive-props(
19-
'box',
20-
'padding-inline-start',
21-
'padding-inline-start'
22-
);
38+
@include responsive-props('box', 'padding-block-start', 'padding-block-start');
2339
@include responsive-props('box', 'padding-inline-end', 'padding-inline-end');
24-
25-
// stylelint-disable -- Polaris component custom properties
26-
--pc-box-shadow: initial;
27-
--pc-box-background: initial;
28-
--pc-box-border-radius: initial;
29-
--pc-box-border-end-start-radius: var(--pc-box-border-radius);
30-
--pc-box-border-end-end-radius: var(--pc-box-border-radius);
31-
--pc-box-border-start-start-radius: var(--pc-box-border-radius);
32-
--pc-box-border-start-end-radius: var(--pc-box-border-radius);
33-
--pc-box-color: initial;
34-
--pc-box-min-height: initial;
35-
--pc-box-min-width: initial;
36-
--pc-box-max-width: initial;
37-
--pc-box-outline-color: initial;
38-
--pc-box-outline-style: initial;
39-
--pc-box-outline-width: initial;
40-
--pc-box-overflow-x: initial;
41-
--pc-box-overflow-y: initial;
42-
--pc-box-width: initial;
43-
--pc-box-border-style: initial;
44-
--pc-box-border-color: initial;
45-
--pc-box-border-width: 0;
46-
--pc-box-border-block-start-width: var(--pc-box-border-width);
47-
--pc-box-border-block-end-width: var(--pc-box-border-width);
48-
--pc-box-border-inline-start-width: var(--pc-box-border-width);
49-
--pc-box-border-inline-end-width: var(--pc-box-border-width);
50-
--pc-box-inset-block-start: initial;
51-
--pc-box-inset-block-end: initial;
52-
--pc-box-inset-inline-start: initial;
53-
--pc-box-inset-inline-end: initial;
54-
// stylelint-enable
55-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
56-
inset-block-start: var(--pc-box-inset-block-start);
57-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
58-
inset-block-end: var(--pc-box-inset-block-end);
59-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
60-
inset-inline-start: var(--pc-box-inset-inline-start);
61-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
62-
inset-inline-end: var(--pc-box-inset-inline-end);
63-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
64-
background-color: var(--pc-box-background);
65-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
66-
box-shadow: var(--pc-box-shadow);
67-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
68-
border-end-start-radius: var(--pc-box-border-end-start-radius);
69-
// stylelint-enable
70-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
71-
border-end-end-radius: var(--pc-box-border-end-end-radius);
72-
// stylelint-enable
73-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
74-
border-start-start-radius: var(--pc-box-border-start-start-radius);
75-
// stylelint-enable
76-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
77-
border-start-end-radius: var(--pc-box-border-start-end-radius);
78-
// stylelint-enable
79-
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
80-
border-color: var(--pc-box-border-color);
81-
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
82-
border-style: var(--pc-box-border-style);
83-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
84-
border-block-start-width: var(--pc-box-border-block-start-width);
85-
// stylelint-enable
86-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
87-
border-block-end-width: var(--pc-box-border-block-end-width);
88-
// stylelint-enable
89-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
90-
border-inline-start-width: var(--pc-box-border-inline-start-width);
91-
// stylelint-enable
92-
// stylelint-disable -- generated by polaris-migrator DO NOT COPY
93-
border-inline-end-width: var(--pc-box-border-inline-end-width);
94-
// stylelint-enable
95-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
96-
color: var(--pc-box-color);
97-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
98-
min-height: var(--pc-box-min-height);
99-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
100-
min-width: var(--pc-box-min-width);
101-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
102-
max-width: var(--pc-box-max-width);
103-
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
104-
outline-color: var(--pc-box-outline-color);
105-
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
106-
outline-style: var(--pc-box-outline-style);
107-
// stylelint-disable-next-line -- component custom property that maps to Polaris tokens
108-
outline-width: var(--pc-box-outline-width);
109-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
110-
overflow-x: var(--pc-box-overflow-x);
111-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
112-
overflow-y: var(--pc-box-overflow-y);
113-
// stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
114-
width: var(--pc-box-width);
40+
@include responsive-props('box', 'padding-inline-start', 'padding-inline-start');
41+
@include responsive-props('box', 'shadow', 'box-shadow');
42+
@include responsive-props('box', 'width', 'width');
43+
@include responsive-props('box', 'position', 'position');
44+
@include responsive-props('box', 'z-index', 'z-index');
45+
@include responsive-props('box', 'opacity', 'opacity');
11546
-webkit-overflow-scrolling: touch;
11647
}
11748

0 commit comments

Comments
 (0)