Skip to content

Commit 4c5ccc8

Browse files
chazdeanchazdean
authored
[Layout foundations] Update Bleed component docs and guidance (#7571)
<!-- ☝️How to write a good PR title: - Prefix it with [ComponentName] (if applicable), for example: [Button] - Start with a verb, for example: Add, Delete, Improve, Fix… - Give as much context as necessary and as little as possible - Prefix it with [WIP] while it’s a work in progress --> ### WHY are these changes introduced? Fixes #6909 <!-- link to issue if one exists --> Link to [Figma](https://www.figma.com/file/5oEi1wm73KhGLN0VS02oYm/Layout-components?node-id=2192%3A30724) <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Updates the `Bleed` component docs and guidance <details> <summary>Bleed style guide</summary> <img src="https://user-images.githubusercontent.com/59836805/198717440-c6f494cd-a603-4e8b-b918-61883e5a9d1a.gif" alt="Bleed styleguide" width="600"> </details> <!-- Summary of the changes committed. Before / after screenshots are appreciated for UI changes. Make sure to include alt text that describes the screenshot. If you include an animated gif showing your change, wrapping it in a details tag is recommended. Gifs usually autoplay, which can cause accessibility issues for people reviewing your PR: <details> <summary>Summary of your gif(s)</summary> <img src="..." alt="Description of what the gif shows"> </details> --> <!-- ℹ️ Delete the following for small / trivial changes --> ### 🎩 checklist - [ ] 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 - [ ] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide
1 parent cf7badb commit 4c5ccc8

File tree

6 files changed

+143
-108
lines changed

6 files changed

+143
-108
lines changed

‎.changeset/wild-seas-notice.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'polaris.shopify.com': patch
3+
---
4+
5+
Updated `Bleed` component guidance and examples

‎polaris.shopify.com/content/components/bleed.md‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Bleed
3-
description: Used to create a container that applies negative margins to allow content to extend into the surrounding layout.
3+
description: Applies negative margin to allow content to bleed out into the surrounding layout.
44
category: Structure
55
keywords:
66
- layout
@@ -11,17 +11,21 @@ examples:
1111
- fileName: bleed-vertical.tsx
1212
title: Vertical
1313
description: >-
14-
Use to set bleed vertically.
14+
Content will bleed vertically into the surrounding layout using the vertical prop.
1515
- fileName: bleed-horizontal.tsx
1616
title: Horizontal
1717
description: >-
18-
Use to set bleed horizontally.
18+
Content will bleed horizontally into the surrounding layout using the horizontal prop.
1919
- fileName: bleed-specific-direction.tsx
2020
title: Specific direction
2121
description: >-
22-
Use to set bleed in a specific direction
22+
Content will bleed into the surrounding layout in a specific direction using the top, bottom, left, or right prop.
2323
- fileName: bleed-all-directions.tsx
2424
title: All directions
2525
description: >-
26-
Use to set bleed in all directions
26+
Content will bleed into the surrounding layout in all directions using the spacing prop.
2727
---
28+
29+
## Bleed values
30+
31+
Content should never go beyond the edges of the parent container. Choose a bleed value that works within the containing layout.

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

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
11
import React from 'react';
2-
import {Bleed, Box, Text} from '@shopify/polaris';
2+
import {Bleed, Box, Text, Inline} from '@shopify/polaris';
33

44
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
55

6-
const styles = {
7-
background: 'var(--p-background-selected)',
8-
borderRadius: 'var(--p-border-radius-05)',
9-
border: '1px solid var(--p-surface-dark)',
10-
padding: 'var(--p-space-4)',
11-
height: 'var(--p-space-12)',
12-
opacity: 0.7,
13-
};
14-
156
function BleedAllDirectionsExample() {
167
return (
17-
<div style={{width: '100%'}}>
18-
<Box background="surface" border="base" padding="4">
19-
<Bleed spacing="6">
20-
<div style={styles}>
21-
<Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
22-
All directions
23-
</Text>
24-
</div>
25-
</Bleed>
26-
</Box>
27-
</div>
8+
<Box background="surface" border="base" padding="4">
9+
<Bleed spacing="4">
10+
<Placeholder label="All directions" />
11+
</Bleed>
12+
</Box>
2813
);
2914
}
3015

16+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
17+
return (
18+
<div
19+
style={{
20+
background: '#7B47F1',
21+
padding: '14px var(--p-space-2)',
22+
height: height,
23+
width: width,
24+
}}
25+
>
26+
<Inline align="center">
27+
<div
28+
style={{
29+
color: '#FFFFFF',
30+
}}
31+
>
32+
<Text as="h2" variant="bodyMd" fontWeight="regular">
33+
{label}
34+
</Text>
35+
</div>
36+
</Inline>
37+
</div>
38+
);
39+
};
40+
3141
export default withPolarisExample(BleedAllDirectionsExample);

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

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
11
import React from 'react';
2-
import {Bleed, Box, Text} from '@shopify/polaris';
2+
import {Bleed, Box, Text, Inline} from '@shopify/polaris';
33

44
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
55

6-
const styles = {
7-
background: 'var(--p-background-selected)',
8-
borderRadius: 'var(--p-border-radius-05)',
9-
border: '1px solid var(--p-surface-dark)',
10-
padding: 'var(--p-space-4)',
11-
height: 'var(--p-space-12)',
12-
opacity: 0.7,
13-
};
14-
156
function BleedHorizontalExample() {
167
return (
17-
<div style={{width: '100%'}}>
18-
<Box background="surface" border="base" padding="4">
19-
<Bleed horizontal="6">
20-
<div style={styles}>
21-
<Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
22-
horizontal
23-
</Text>
24-
</div>
25-
</Bleed>
26-
</Box>
27-
</div>
8+
<Box background="surface" border="base" padding="4">
9+
<Bleed horizontal="4">
10+
<Placeholder label="Horizontal" />
11+
</Bleed>
12+
</Box>
2813
);
2914
}
3015

16+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
17+
return (
18+
<div
19+
style={{
20+
background: '#7B47F1',
21+
padding: '14px var(--p-space-2)',
22+
height: height,
23+
width: width,
24+
}}
25+
>
26+
<Inline align="center">
27+
<div
28+
style={{
29+
color: '#FFFFFF',
30+
}}
31+
>
32+
<Text as="h2" variant="bodyMd" fontWeight="regular">
33+
{label}
34+
</Text>
35+
</div>
36+
</Inline>
37+
</div>
38+
);
39+
};
40+
3141
export default withPolarisExample(BleedHorizontalExample);

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

Lines changed: 36 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,62 +1,58 @@
11
import React from 'react';
2-
import {Bleed, Box, Text} from '@shopify/polaris';
2+
import {AlphaStack, Bleed, Box, Text, Inline} from '@shopify/polaris';
33

44
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
55

6-
const styles = {
7-
background: 'var(--p-background-selected)',
8-
borderRadius: 'var(--p-border-radius-05)',
9-
border: '1px solid var(--p-surface-dark)',
10-
padding: 'var(--p-space-4)',
11-
height: 'var(--p-space-12)',
12-
opacity: 0.7,
13-
};
14-
156
function BleedSpecificDirectionExample() {
167
return (
17-
<div style={{width: '100%'}}>
8+
<AlphaStack spacing="6" fullWidth>
189
<Box background="surface" border="base" padding="4">
19-
<Bleed top="6">
20-
<div style={styles}>
21-
<Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
22-
top
23-
</Text>
24-
</div>
10+
<Bleed top="4">
11+
<Placeholder label="Top" />
2512
</Bleed>
2613
</Box>
27-
<br />
2814
<Box background="surface" border="base" padding="4">
29-
<Bleed right="6">
30-
<div style={styles}>
31-
<Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
32-
right
33-
</Text>
34-
</div>
15+
<Bleed bottom="4">
16+
<Placeholder label="Bottom" />
3517
</Bleed>
3618
</Box>
37-
<br />
3819
<Box background="surface" border="base" padding="4">
39-
<Bleed left="6">
40-
<div style={styles}>
41-
<Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
42-
left
43-
</Text>
44-
</div>
20+
<Bleed left="4">
21+
<Placeholder label="Left" />
4522
</Bleed>
4623
</Box>
47-
<br />
4824
<Box background="surface" border="base" padding="4">
49-
<Bleed bottom="6">
50-
<div style={styles}>
51-
<Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
52-
bottom
53-
</Text>
54-
</div>
25+
<Bleed right="4">
26+
<Placeholder label="Right" />
5527
</Bleed>
5628
</Box>
57-
<br />
58-
</div>
29+
</AlphaStack>
5930
);
6031
}
6132

33+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
34+
return (
35+
<div
36+
style={{
37+
background: '#7B47F1',
38+
padding: '14px var(--p-space-2)',
39+
height: height,
40+
width: width,
41+
}}
42+
>
43+
<Inline align="center">
44+
<div
45+
style={{
46+
color: '#FFFFFF',
47+
}}
48+
>
49+
<Text as="h2" variant="bodyMd" fontWeight="regular">
50+
{label}
51+
</Text>
52+
</div>
53+
</Inline>
54+
</div>
55+
);
56+
};
57+
6258
export default withPolarisExample(BleedSpecificDirectionExample);

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

Lines changed: 31 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,41 @@
11
import React from 'react';
2-
import {Bleed, Box, Text} from '@shopify/polaris';
2+
import {Bleed, Box, Text, Inline} from '@shopify/polaris';
33

44
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
55

6-
const styles = {
7-
background: 'var(--p-background-selected)',
8-
borderRadius: 'var(--p-border-radius-05)',
9-
border: '1px solid var(--p-surface-dark)',
10-
padding: 'var(--p-space-4)',
11-
height: 'var(--p-space-12)',
12-
opacity: 0.7,
13-
};
14-
156
function BleedVerticalExample() {
167
return (
17-
<div style={{width: '100%'}}>
18-
<Box background="surface" border="base" padding="4">
19-
<Bleed vertical="6">
20-
<div style={styles}>
21-
<Text variant="bodySm" as="h3" alignment="center" fontWeight="bold">
22-
vertical
23-
</Text>
24-
</div>
25-
</Bleed>
26-
</Box>
27-
</div>
8+
<Box background="surface" border="base" padding="4">
9+
<Bleed vertical="4">
10+
<Placeholder label="Vertical" />
11+
</Bleed>
12+
</Box>
2813
);
2914
}
3015

16+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
17+
return (
18+
<div
19+
style={{
20+
background: '#7B47F1',
21+
padding: '14px var(--p-space-2)',
22+
height: height,
23+
width: width,
24+
}}
25+
>
26+
<Inline align="center">
27+
<div
28+
style={{
29+
color: '#FFFFFF',
30+
}}
31+
>
32+
<Text as="h2" variant="bodyMd" fontWeight="regular">
33+
{label}
34+
</Text>
35+
</div>
36+
</Inline>
37+
</div>
38+
);
39+
};
40+
3141
export default withPolarisExample(BleedVerticalExample);

0 commit comments

Comments
 (0)