Skip to content

Commit 34748dc

Browse files
avelineaveline
committed
Merge branch 'main' into layout-components-beta
2 parents c59a01c + a9e018e commit 34748dc

File tree

9 files changed

+826
-616
lines changed

9 files changed

+826
-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`

‎.changeset/tender-kings-approve.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+
Updated badge spacing to right align with secondary action icons

‎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
});

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -159,12 +159,17 @@ $disabled-fade: 0.6;
159159
margin-left: var(--p-space-2);
160160
display: inline-flex;
161161
margin-top: var(--p-space-2);
162+
margin-right: var(--p-space-2);
162163

163164
@media #{$p-breakpoints-md-up} {
164165
margin-top: var(--p-space-1);
165166
}
166167
}
167168

169+
.ListItem-hasAction .Badge {
170+
margin-right: 0;
171+
}
172+
168173
.Icon {
169174
@include nav-item-icon-attributes;
170175
}

0 commit comments

Comments
 (0)