Skip to content

Commit ba086af

Browse files
laurkimlaurkim
committed
[Bleed] Refactor props to use logical property names (#7779)
### WHY are these changes introduced? Resolves #7772. Updates `Bleed` to use logical properties. Style guide has been updated to reflect new prop names. [Storybook](https://5d559397bae39100201eedc1-jximmitnfv.chromatic.com/?path=/story/all-components-bleed--with-specific-direction). ### WHAT is this pull request doing? Updates `Bleed` to use logical properties: - `vertical` -> `marginBlock` - `horizontal` -> `marginInline` - `top` -> `marginBlockStart` - `bottom` -> `marginBlockEnd` - `left` -> `marginInlineStart` - `right` -> `marginInlineEnd` The logic to get the negative margins when `horizontal` or `vertical` was passed in was flipped and causing issues so I've also fixed that. ### How to 🎩 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [ ] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [ ] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [ ] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent cb24dbb commit ba086af

File tree

10 files changed

+525
-490
lines changed

10 files changed

+525
-490
lines changed

‎.changeset/two-fishes-join.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/polaris': patch
3+
'polaris.shopify.com': patch
4+
---
5+
6+
Updated `Bleed` props to use logical properties, fixed reversed logic for horizontal/vertical bleed, and updated style guide

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

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

33
.Bleed {
4-
/* stylelint-disable declaration-block-no-redundant-longhand-properties */
5-
margin-bottom: calc(-1 * var(--pc-bleed-margin-bottom));
6-
margin-left: calc(-1 * var(--pc-bleed-margin-left));
7-
margin-right: calc(-1 * var(--pc-bleed-margin-right));
8-
margin-top: calc(-1 * var(--pc-bleed-margin-top));
9-
/* stylelint-enable declaration-block-no-redundant-longhand-properties */
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));
108
}

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

Lines changed: 49 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import type {ComponentMeta} from '@storybook/react';
3-
import {AlphaCard, Bleed, Box, Text} from '@shopify/polaris';
3+
import {AlphaCard, Bleed, Box, Stack, Text} from '@shopify/polaris';
44

55
export default {
66
component: Bleed,
@@ -16,25 +16,27 @@ const styles = {
1616
export function Default() {
1717
return (
1818
<AlphaCard>
19-
<Text as="p" variant="bodySm">
20-
Section 01
21-
</Text>
19+
<Box paddingBlockEnd="5">
20+
<Text as="p" variant="bodySm">
21+
Section 01
22+
</Text>
23+
</Box>
2224
<Bleed>
23-
<Box paddingBlockStart="2" paddingBlockEnd="2">
24-
<Box borderBlockStart="base" />
25-
</Box>
25+
<Box borderBlockStart="base" />
2626
</Bleed>
27-
<Text as="p" variant="bodySm">
28-
Section 02
29-
</Text>
27+
<Box paddingBlockStart="5">
28+
<Text as="p" variant="bodySm">
29+
Section 02
30+
</Text>
31+
</Box>
3032
</AlphaCard>
3133
);
3234
}
3335

3436
export function WithVerticalDirection() {
3537
return (
3638
<Box background="surface" padding="4">
37-
<Bleed vertical="6">
39+
<Bleed marginBlock="6">
3840
<div style={styles} />
3941
</Bleed>
4042
</Box>
@@ -44,7 +46,7 @@ export function WithVerticalDirection() {
4446
export function WithHorizontalDirection() {
4547
return (
4648
<Box background="surface" padding="4">
47-
<Bleed horizontal="6">
49+
<Bleed marginInline="6">
4850
<div style={styles} />
4951
</Bleed>
5052
</Box>
@@ -53,18 +55,47 @@ export function WithHorizontalDirection() {
5355

5456
export function WithSpecificDirection() {
5557
return (
56-
<Box background="surface" padding="4">
57-
<Bleed top="6">
58-
<div style={styles} />
59-
</Bleed>
60-
</Box>
58+
<Stack vertical>
59+
<Text variant="bodyMd" as="p">
60+
Top
61+
</Text>
62+
<Box background="surface" padding="4">
63+
<Bleed marginInline="4" marginBlockStart="6">
64+
<div style={styles} />
65+
</Bleed>
66+
</Box>
67+
<Text variant="bodyMd" as="p">
68+
Bottom
69+
</Text>
70+
<Box background="surface" padding="4">
71+
<Bleed marginInline="4" marginBlockEnd="6">
72+
<div style={styles} />
73+
</Bleed>
74+
</Box>
75+
<Text variant="bodyMd" as="p">
76+
Left
77+
</Text>
78+
<Box background="surface" padding="4">
79+
<Bleed marginInline="0" marginInlineStart="6">
80+
<div style={styles} />
81+
</Bleed>
82+
</Box>
83+
<Text variant="bodyMd" as="p">
84+
Right
85+
</Text>
86+
<Box background="surface" padding="4">
87+
<Bleed marginInline="0" marginInlineEnd="6">
88+
<div style={styles} />
89+
</Bleed>
90+
</Box>
91+
</Stack>
6192
);
6293
}
6394

6495
export function WithAllDirection() {
6596
return (
6697
<Box background="surface" padding="4">
67-
<Bleed horizontal="6" vertical="6">
98+
<Bleed marginInline="6" marginBlock="6">
6899
<div style={styles} />
69100
</Bleed>
70101
</Box>

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

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -10,67 +10,67 @@ export interface BleedProps {
1010
/** Negative horizontal space around children
1111
* @default '5'
1212
*/
13-
horizontal?: SpacingSpaceScale;
13+
marginInline?: SpacingSpaceScale;
1414
/** Negative vertical space around children */
15-
vertical?: SpacingSpaceScale;
15+
marginBlock?: SpacingSpaceScale;
1616
/** Negative top space around children */
17-
top?: SpacingSpaceScale;
17+
marginBlockStart?: SpacingSpaceScale;
1818
/** Negative bottom space around children */
19-
bottom?: SpacingSpaceScale;
19+
marginBlockEnd?: SpacingSpaceScale;
2020
/** Negative left space around children */
21-
left?: SpacingSpaceScale;
21+
marginInlineStart?: SpacingSpaceScale;
2222
/** Negative right space around children */
23-
right?: SpacingSpaceScale;
23+
marginInlineEnd?: SpacingSpaceScale;
2424
}
2525

2626
export const Bleed = ({
27-
horizontal = '5',
28-
vertical,
29-
top,
30-
bottom,
31-
left,
32-
right,
27+
marginInline = '5',
28+
marginBlock,
29+
marginBlockStart,
30+
marginBlockEnd,
31+
marginInlineStart,
32+
marginInlineEnd,
3333
children,
3434
}: BleedProps) => {
3535
const getNegativeMargins = (direction: string) => {
36-
const xAxis = ['left', 'right'];
37-
const yAxis = ['top', 'bottom'];
36+
const xAxis = ['marginInlineStart', 'marginInlineEnd'];
37+
const yAxis = ['marginBlockStart', 'marginBlockEnd'];
3838

3939
const directionValues: {[key: string]: string | undefined} = {
40-
top,
41-
bottom,
42-
left,
43-
right,
44-
horizontal,
45-
vertical,
40+
marginBlockStart,
41+
marginBlockEnd,
42+
marginInlineStart,
43+
marginInlineEnd,
44+
marginInline,
45+
marginBlock,
4646
};
4747

4848
if (directionValues[direction]) {
4949
return directionValues[direction];
50-
} else if (!yAxis.includes(direction) && horizontal) {
51-
return directionValues.horizontal;
52-
} else if (!xAxis.includes(direction) && vertical) {
53-
return directionValues.vertical;
50+
} else if (xAxis.includes(direction) && marginInline) {
51+
return directionValues.marginInline;
52+
} else if (yAxis.includes(direction) && marginBlock) {
53+
return directionValues.marginBlock;
5454
}
5555
};
5656

57-
const negativeTop = getNegativeMargins('top');
58-
const negativeLeft = getNegativeMargins('left');
59-
const negativeRight = getNegativeMargins('right');
60-
const negativeBottom = getNegativeMargins('bottom');
57+
const negativeMarginBlockStart = getNegativeMargins('marginBlockStart');
58+
const negativeMarginBlockEnd = getNegativeMargins('marginBlockEnd');
59+
const negativeMarginInlineStart = getNegativeMargins('marginInlineStart');
60+
const negativeMarginInlineEnd = getNegativeMargins('marginInlineEnd');
6161

6262
const style = {
63-
'--pc-bleed-margin-bottom': negativeBottom
64-
? `var(--p-space-${negativeBottom})`
63+
'--pc-bleed-margin-block-start': negativeMarginBlockStart
64+
? `var(--p-space-${negativeMarginBlockStart})`
6565
: undefined,
66-
'--pc-bleed-margin-left': negativeLeft
67-
? `var(--p-space-${negativeLeft})`
66+
'--pc-bleed-margin-block-end': negativeMarginBlockEnd
67+
? `var(--p-space-${negativeMarginBlockEnd})`
6868
: undefined,
69-
'--pc-bleed-margin-right': negativeRight
70-
? `var(--p-space-${negativeRight})`
69+
'--pc-bleed-margin-inline-start': negativeMarginInlineStart
70+
? `var(--p-space-${negativeMarginInlineStart})`
7171
: undefined,
72-
'--pc-bleed-margin-top': negativeTop
73-
? `var(--p-space-${negativeTop})`
72+
'--pc-bleed-margin-inline-end': negativeMarginInlineEnd
73+
? `var(--p-space-${negativeMarginInlineEnd})`
7474
: undefined,
7575
} as React.CSSProperties;
7676

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

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

2626
expect(bleed).toContainReactComponent('div', {
2727
style: {
28-
'--pc-bleed-margin-left': 'var(--p-space-5)',
29-
'--pc-bleed-margin-right': 'var(--p-space-5)',
28+
'--pc-bleed-margin-inline-start': 'var(--p-space-5)',
29+
'--pc-bleed-margin-inline-end': 'var(--p-space-5)',
3030
} as React.CSSProperties,
3131
});
3232
});
3333

3434
it('only renders the custom property that matches the property passed in', () => {
3535
const bleed = mountWithApp(
36-
<Bleed left="2">
36+
<Bleed marginInlineStart="2">
3737
<Children />
3838
</Bleed>,
3939
);
4040

4141
expect(bleed).toContainReactComponent('div', {
4242
style: {
43-
'--pc-bleed-margin-left': 'var(--p-space-2)',
44-
'--pc-bleed-margin-right': 'var(--p-space-5)',
43+
'--pc-bleed-margin-inline-start': 'var(--p-space-2)',
44+
'--pc-bleed-margin-inline-end': 'var(--p-space-5)',
4545
} as React.CSSProperties,
4646
});
4747
});
4848

4949
it('renders custom properties combined with any overrides if they are passed in', () => {
5050
const bleed = mountWithApp(
51-
<Bleed vertical="1" left="2" horizontal="3">
51+
<Bleed marginBlock="1" marginInlineStart="2" marginInline="3">
5252
<Children />
5353
</Bleed>,
5454
);
5555

5656
expect(bleed).toContainReactComponent('div', {
5757
style: {
58-
'--pc-bleed-margin-bottom': 'var(--p-space-1)',
59-
'--pc-bleed-margin-left': 'var(--p-space-2)',
60-
'--pc-bleed-margin-right': 'var(--p-space-3)',
61-
'--pc-bleed-margin-top': 'var(--p-space-1)',
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)',
6262
} as React.CSSProperties,
6363
});
6464
});

‎polaris.shopify.com/pages/examples/bleed-all-directions.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
66
function BleedAllDirectionsExample() {
77
return (
88
<Box background="surface" border="base" padding="5">
9-
<Bleed vertical="5">
9+
<Bleed marginBlock="5">
1010
<Placeholder label="All directions" />
1111
</Bleed>
1212
</Box>

‎polaris.shopify.com/pages/examples/bleed-horizontal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
66
function BleedHorizontalExample() {
77
return (
88
<Box background="surface" border="base" padding="4">
9-
<Bleed horizontal="4">
9+
<Bleed marginInline="4">
1010
<Placeholder label="Horizontal" />
1111
</Bleed>
1212
</Box>

‎polaris.shopify.com/pages/examples/bleed-specific-direction.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,22 @@ function BleedSpecificDirectionExample() {
77
return (
88
<AlphaStack gap="6" fullWidth>
99
<Box background="surface" border="base" padding="5">
10-
<Bleed top="5">
10+
<Bleed marginBlockStart="5">
1111
<Placeholder label="Top" />
1212
</Bleed>
1313
</Box>
1414
<Box background="surface" border="base" padding="5">
15-
<Bleed bottom="5">
15+
<Bleed marginBlockEnd="5">
1616
<Placeholder label="Bottom" />
1717
</Bleed>
1818
</Box>
1919
<Box background="surface" border="base" padding="5">
20-
<Bleed left="5" right="0">
20+
<Bleed marginInlineStart="5" marginInlineEnd="0">
2121
<Placeholder label="Left" />
2222
</Bleed>
2323
</Box>
2424
<Box background="surface" border="base" padding="5">
25-
<Bleed right="5" left="0">
25+
<Bleed marginInlineEnd="5" marginInlineStart="0">
2626
<Placeholder label="Right" />
2727
</Bleed>
2828
</Box>

‎polaris.shopify.com/pages/examples/bleed-vertical.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
66
function BleedVerticalExample() {
77
return (
88
<Box background="surface" border="base" padding="4">
9-
<Bleed horizontal="0" vertical="4">
9+
<Bleed marginInline="0" marginBlock="4">
1010
<Placeholder label="Vertical" />
1111
</Bleed>
1212
</Box>

0 commit comments

Comments
 (0)