Skip to content

Commit bf523d0

Browse files
avelinelaurkim
aveline
authored and
laurkim
committed
Updated Bleed to accept responsive spacing (#7794)
### WHY are these changes introduced? Resolves #7792 and unblocks #7354 ### WHAT is this pull request doing? - Add support for responsive spacing values to be passed in to `Bleed` - Created the responsive custom properties manually instead of using the mixin because the mixin doesn't currently support applying the negative values with `calc()`. Not sure it's a use case we will run into enough to warrant adding the complexity to the mixin to support this. However if that is something we find ourselves needing to do repeatedly then worth revisiting the mixin.
1 parent 1994cfc commit bf523d0

File tree

6 files changed

+724
-616
lines changed

6 files changed

+724
-616
lines changed

‎.changeset/moody-dolls-kneel.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris': minor
3+
'polaris.shopify.com': patch
4+
---
5+
6+
Added support for responsive spacing on `Bleed`

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

Lines changed: 52 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,56 @@
11
@import '../../styles/common';
22

33
.Bleed {
4-
margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start));
5-
margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end));
6-
margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start));
7-
margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end));
4+
--pc-bleed-margin-block-start-xs: initial;
5+
--pc-bleed-margin-block-start-sm: var(--pc-bleed-margin-block-start-xs);
6+
--pc-bleed-margin-block-start-md: var(--pc-bleed-margin-block-start-sm);
7+
--pc-bleed-margin-block-start-lg: var(--pc-bleed-margin-block-start-md);
8+
--pc-bleed-margin-block-start-xl: var(--pc-bleed-margin-block-start-lg);
9+
--pc-bleed-margin-block-end-xs: initial;
10+
--pc-bleed-margin-block-end-sm: var(--pc-bleed-margin-block-end-xs);
11+
--pc-bleed-margin-block-end-md: var(--pc-bleed-margin-block-end-sm);
12+
--pc-bleed-margin-block-end-lg: var(--pc-bleed-margin-block-end-md);
13+
--pc-bleed-margin-block-end-xl: var(--pc-bleed-margin-block-end-lg);
14+
--pc-bleed-margin-inline-start-xs: initial;
15+
--pc-bleed-margin-inline-start-sm: var(--pc-bleed-margin-inline-start-xs);
16+
--pc-bleed-margin-inline-start-md: var(--pc-bleed-margin-inline-start-sm);
17+
--pc-bleed-margin-inline-start-lg: var(--pc-bleed-margin-inline-start-md);
18+
--pc-bleed-margin-inline-start-xl: var(--pc-bleed-margin-inline-start-lg);
19+
--pc-bleed-margin-inline-end-xs: initial;
20+
--pc-bleed-margin-inline-end-sm: var(--pc-bleed-margin-inline-end-xs);
21+
--pc-bleed-margin-inline-end-md: var(--pc-bleed-margin-inline-end-sm);
22+
--pc-bleed-margin-inline-end-lg: var(--pc-bleed-margin-inline-end-md);
23+
--pc-bleed-margin-inline-end-xl: var(--pc-bleed-margin-inline-end-lg);
24+
margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-xs));
25+
margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-xs));
26+
margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-xs));
27+
margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-xs));
28+
29+
@media #{$p-breakpoints-sm-up} {
30+
margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-sm));
31+
margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-sm));
32+
margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-sm));
33+
margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-sm));
34+
}
35+
36+
@media #{$p-breakpoints-md-up} {
37+
margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-md));
38+
margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-md));
39+
margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-md));
40+
margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-md));
41+
}
42+
43+
@media #{$p-breakpoints-lg-up} {
44+
margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-lg));
45+
margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-lg));
46+
margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-lg));
47+
margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-lg));
48+
}
49+
50+
@media #{$p-breakpoints-xl-up} {
51+
margin-block-start: calc(-1 * var(--pc-bleed-margin-block-start-xl));
52+
margin-block-end: calc(-1 * var(--pc-bleed-margin-block-end-xl));
53+
margin-inline-start: calc(-1 * var(--pc-bleed-margin-inline-start-xl));
54+
margin-inline-end: calc(-1 * var(--pc-bleed-margin-inline-end-xl));
55+
}
856
}

‎polaris-react/src/components/Bleed/Bleed.stories.tsx‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function Default() {
3535

3636
export function WithVerticalDirection() {
3737
return (
38-
<Box background="surface" padding="4">
38+
<Box background="surface" padding="4" border="base">
3939
<Bleed marginBlock="6">
4040
<div style={styles} />
4141
</Bleed>
@@ -45,7 +45,7 @@ export function WithVerticalDirection() {
4545

4646
export function WithHorizontalDirection() {
4747
return (
48-
<Box background="surface" padding="4">
48+
<Box background="surface" padding="4" border="base">
4949
<Bleed marginInline="6">
5050
<div style={styles} />
5151
</Bleed>
@@ -57,33 +57,33 @@ export function WithSpecificDirection() {
5757
return (
5858
<Stack vertical>
5959
<Text variant="bodyMd" as="p">
60-
Top
60+
Block Start
6161
</Text>
62-
<Box background="surface" padding="4">
62+
<Box background="surface" padding="4" border="base">
6363
<Bleed marginInline="4" marginBlockStart="6">
6464
<div style={styles} />
6565
</Bleed>
6666
</Box>
6767
<Text variant="bodyMd" as="p">
68-
Bottom
68+
Block End
6969
</Text>
70-
<Box background="surface" padding="4">
70+
<Box background="surface" padding="4" border="base">
7171
<Bleed marginInline="4" marginBlockEnd="6">
7272
<div style={styles} />
7373
</Bleed>
7474
</Box>
7575
<Text variant="bodyMd" as="p">
76-
Left
76+
Inline Start
7777
</Text>
78-
<Box background="surface" padding="4">
78+
<Box background="surface" padding="4" border="base">
7979
<Bleed marginInline="0" marginInlineStart="6">
8080
<div style={styles} />
8181
</Bleed>
8282
</Box>
8383
<Text variant="bodyMd" as="p">
84-
Right
84+
Inline End
8585
</Text>
86-
<Box background="surface" padding="4">
86+
<Box background="surface" padding="4" border="base">
8787
<Bleed marginInline="0" marginInlineEnd="6">
8888
<div style={styles} />
8989
</Bleed>
@@ -94,10 +94,24 @@ export function WithSpecificDirection() {
9494

9595
export function WithAllDirection() {
9696
return (
97-
<Box background="surface" padding="4">
97+
<Box background="surface" padding="4" border="base">
9898
<Bleed marginInline="6" marginBlock="6">
9999
<div style={styles} />
100100
</Bleed>
101101
</Box>
102102
);
103103
}
104+
105+
export function WithResponsiveHorizontalDirection() {
106+
return (
107+
<Box
108+
background="surface"
109+
padding={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}
110+
border="base"
111+
>
112+
<Bleed marginInline={{xs: '1', sm: '2', md: '3', lg: '4', xl: '5'}}>
113+
<div style={styles} />
114+
</Bleed>
115+
</Box>
116+
);
117+
}

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

Lines changed: 38 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,32 @@
11
import React from 'react';
22
import type {SpacingSpaceScale} from '@shopify/polaris-tokens';
33

4-
import {sanitizeCustomProperties} from '../../utilities/css';
4+
import {
5+
getResponsiveProps,
6+
sanitizeCustomProperties,
7+
} from '../../utilities/css';
8+
import type {ResponsiveProp} from '../../utilities/css';
59

610
import styles from './Bleed.scss';
711

12+
type Spacing = ResponsiveProp<SpacingSpaceScale>;
13+
814
export interface BleedProps {
915
children?: React.ReactNode;
1016
/** Negative horizontal space around children
1117
* @default '5'
1218
*/
13-
marginInline?: SpacingSpaceScale;
19+
marginInline?: Spacing;
1420
/** Negative vertical space around children */
15-
marginBlock?: SpacingSpaceScale;
21+
marginBlock?: Spacing;
1622
/** Negative top space around children */
17-
marginBlockStart?: SpacingSpaceScale;
23+
marginBlockStart?: Spacing;
1824
/** Negative bottom space around children */
19-
marginBlockEnd?: SpacingSpaceScale;
25+
marginBlockEnd?: Spacing;
2026
/** Negative left space around children */
21-
marginInlineStart?: SpacingSpaceScale;
27+
marginInlineStart?: Spacing;
2228
/** Negative right space around children */
23-
marginInlineEnd?: SpacingSpaceScale;
29+
marginInlineEnd?: Spacing;
2430
}
2531

2632
export const Bleed = ({
@@ -36,7 +42,7 @@ export const Bleed = ({
3642
const xAxis = ['marginInlineStart', 'marginInlineEnd'];
3743
const yAxis = ['marginBlockStart', 'marginBlockEnd'];
3844

39-
const directionValues: {[key: string]: string | undefined} = {
45+
const directionValues: {[key: string]: Spacing | undefined} = {
4046
marginBlockStart,
4147
marginBlockEnd,
4248
marginInlineStart,
@@ -60,18 +66,30 @@ export const Bleed = ({
6066
const negativeMarginInlineEnd = getNegativeMargins('marginInlineEnd');
6167

6268
const style = {
63-
'--pc-bleed-margin-block-start': negativeMarginBlockStart
64-
? `var(--p-space-${negativeMarginBlockStart})`
65-
: undefined,
66-
'--pc-bleed-margin-block-end': negativeMarginBlockEnd
67-
? `var(--p-space-${negativeMarginBlockEnd})`
68-
: undefined,
69-
'--pc-bleed-margin-inline-start': negativeMarginInlineStart
70-
? `var(--p-space-${negativeMarginInlineStart})`
71-
: undefined,
72-
'--pc-bleed-margin-inline-end': negativeMarginInlineEnd
73-
? `var(--p-space-${negativeMarginInlineEnd})`
74-
: undefined,
69+
...getResponsiveProps(
70+
'bleed',
71+
'margin-block-start',
72+
'space',
73+
negativeMarginBlockStart,
74+
),
75+
...getResponsiveProps(
76+
'bleed',
77+
'margin-block-end',
78+
'space',
79+
negativeMarginBlockEnd,
80+
),
81+
...getResponsiveProps(
82+
'bleed',
83+
'margin-inline-start',
84+
'space',
85+
negativeMarginInlineStart,
86+
),
87+
...getResponsiveProps(
88+
'bleed',
89+
'margin-inline-end',
90+
'space',
91+
negativeMarginInlineEnd,
92+
),
7593
} as React.CSSProperties;
7694

7795
return (

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

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ describe('<Bleed />', () => {
2525

2626
expect(bleed).toContainReactComponent('div', {
2727
style: {
28-
'--pc-bleed-margin-inline-start': 'var(--p-space-5)',
29-
'--pc-bleed-margin-inline-end': 'var(--p-space-5)',
28+
'--pc-bleed-margin-inline-start-xs': 'var(--p-space-5)',
29+
'--pc-bleed-margin-inline-end-xs': 'var(--p-space-5)',
3030
} as React.CSSProperties,
3131
});
3232
});
@@ -40,8 +40,8 @@ describe('<Bleed />', () => {
4040

4141
expect(bleed).toContainReactComponent('div', {
4242
style: {
43-
'--pc-bleed-margin-inline-start': 'var(--p-space-2)',
44-
'--pc-bleed-margin-inline-end': 'var(--p-space-5)',
43+
'--pc-bleed-margin-inline-start-xs': 'var(--p-space-2)',
44+
'--pc-bleed-margin-inline-end-xs': 'var(--p-space-5)',
4545
} as React.CSSProperties,
4646
});
4747
});
@@ -55,11 +55,26 @@ describe('<Bleed />', () => {
5555

5656
expect(bleed).toContainReactComponent('div', {
5757
style: {
58-
'--pc-bleed-margin-block-start': 'var(--p-space-1)',
59-
'--pc-bleed-margin-block-end': 'var(--p-space-1)',
60-
'--pc-bleed-margin-inline-start': 'var(--p-space-2)',
61-
'--pc-bleed-margin-inline-end': 'var(--p-space-3)',
58+
'--pc-bleed-margin-block-start-xs': 'var(--p-space-1)',
59+
'--pc-bleed-margin-block-end-xs': 'var(--p-space-1)',
60+
'--pc-bleed-margin-inline-start-xs': 'var(--p-space-2)',
61+
'--pc-bleed-margin-inline-end-xs': 'var(--p-space-3)',
6262
} as React.CSSProperties,
6363
});
6464
});
65+
66+
it('renders margin based on breakpoints', () => {
67+
const bleed = mountWithApp(
68+
<Bleed marginInlineStart={{xs: '2', md: '8'}}>
69+
<Children />
70+
</Bleed>,
71+
);
72+
73+
expect(bleed).toContainReactComponent('div', {
74+
style: expect.objectContaining({
75+
'--pc-bleed-margin-inline-start-xs': 'var(--p-space-2)',
76+
'--pc-bleed-margin-inline-start-md': 'var(--p-space-8)',
77+
}) as React.CSSProperties,
78+
});
79+
});
6580
});

0 commit comments

Comments
 (0)