Skip to content

Commit 924e9e5

Browse files
chazdeansarahilllaurkim
authored
[Layout foundations] Update Columns component docs and guidance (#7527)
<!-- ☝️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 #6906 <!-- link to issue if one exists --> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Updates the `Columns` component docs and guidance <details> <summary>Columns style guide</summary> <img src="https://user-images.githubusercontent.com/59836805/197840350-12ceba53-4906-498a-9bdb-d0ff327cd145.gif" alt="Columns 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 Co-authored-by: Sara Hill <sara.hill@shopify.com> Co-authored-by: Lo Kim <lo.kim@shopify.com>
1 parent 6e4534c commit 924e9e5

File tree

7 files changed

+222
-49
lines changed

7 files changed

+222
-49
lines changed

‎.changeset/rich-cooks-attend.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+
Update `Columns` component docs

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

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Columns
3-
description: Use to lay out a vertical row of components with equal spacing between and wrapping onto multiple lines.
3+
description: Displays content horizontally in one or more columns with equal spacing between.
44
category: Structure
55
keywords:
66
- layout
@@ -10,8 +10,23 @@ status:
1010
examples:
1111
- fileName: columns-default.tsx
1212
title: Default
13+
description: >-
14+
By default, there are 6 columns with 16px spacing between them.
1315
- fileName: columns-with-varying-spacing.tsx
14-
title: With varying spacing
15-
- fileName: columns-with-free-and-fixed-widths.tsx
16-
title: With free and fixed widths
16+
title: Spacing
17+
description: >-
18+
Use the spacing prop to set the amount of space between columns.
19+
- fileName: columns-with-fixed-widths.tsx
20+
title: Column width
21+
description: >-
22+
Individual column width can be adjusted.
23+
- fileName: columns-with-set-number.tsx
24+
title: Number of columns
25+
description: >-
26+
Use the columns prop to set the number and width of columns across breakpoints.
1727
---
28+
29+
## Related components
30+
31+
- For more control over padding and widths, [use the Box](https://polaris.shopify.com/components/box) component
32+
- To lay out a set of smaller components horizontally, [use the Inline](https://polaris.shopify.com/components/inline) component

‎polaris.shopify.com/pages/examples/columns-default.tsx‎

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

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

66
function ColumnsExample() {
77
return (
8-
<div style={{width: '100%'}}>
9-
<Columns columns={{xs: 1, sm: 2, md: 3, lg: 6}} spacing={{xs: '2'}}>
10-
<div style={{background: 'var(--p-surface-success)'}}>Column one</div>
11-
<div style={{background: 'var(--p-surface-success)'}}>Column two</div>
12-
<div style={{background: 'var(--p-surface-success)'}}>Column three</div>
13-
<div style={{background: 'var(--p-surface-success)'}}>Column four</div>
14-
<div style={{background: 'var(--p-surface-success)'}}>Column five</div>
15-
<div style={{background: 'var(--p-surface-success)'}}>Column six</div>
16-
</Columns>
17-
</div>
8+
<Columns>
9+
<Placeholder height="320px" label="01" />
10+
<Placeholder height="320px" label="02" />
11+
<Placeholder height="320px" label="03" />
12+
<Placeholder height="320px" label="04" />
13+
<Placeholder height="320px" label="05" />
14+
<Placeholder height="320px" label="06" />
15+
</Columns>
1816
);
1917
}
2018

19+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
20+
return (
21+
<div
22+
style={{
23+
display: 'inherit',
24+
background: '#7B47F1',
25+
height: height ?? undefined,
26+
width: width ?? undefined,
27+
}}
28+
>
29+
<Inline align="center" alignY="center">
30+
<div
31+
style={{
32+
color: '#FFFFFF',
33+
width: width ?? undefined,
34+
}}
35+
>
36+
<Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
37+
{label}
38+
</Text>
39+
</div>
40+
</Inline>
41+
</div>
42+
);
43+
};
44+
2145
export default withPolarisExample(ColumnsExample);

‎polaris.shopify.com/pages/examples/columns-with-fixed-widths.tsx‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import React from 'react';
2+
import {Columns, Text, Inline} from '@shopify/polaris';
3+
4+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
5+
6+
function ColumnsWithFreeAndFixedWidthsExample() {
7+
return (
8+
<Columns columns={{xs: '2.5fr 1fr 1fr 1fr 1fr 1fr'}}>
9+
<Placeholder height="320px" label="01" />
10+
<Placeholder height="320px" label="02" />
11+
<Placeholder height="320px" label="03" />
12+
<Placeholder height="320px" label="04" />
13+
<Placeholder height="320px" label="05" />
14+
<Placeholder height="320px" label="06" />
15+
</Columns>
16+
);
17+
}
18+
19+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
20+
return (
21+
<div
22+
style={{
23+
display: 'inherit',
24+
background: '#7B47F1',
25+
height: height ?? undefined,
26+
width: width ?? undefined,
27+
}}
28+
>
29+
<Inline align="center" alignY="center">
30+
<div
31+
style={{
32+
color: '#FFFFFF',
33+
width: width ?? undefined,
34+
}}
35+
>
36+
<Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
37+
{label}
38+
</Text>
39+
</div>
40+
</Inline>
41+
</div>
42+
);
43+
};
44+
45+
export default withPolarisExample(ColumnsWithFreeAndFixedWidthsExample);

‎polaris.shopify.com/pages/examples/columns-with-free-and-fixed-widths.tsx‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎polaris.shopify.com/pages/examples/columns-with-set-number.tsx‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import React from 'react';
2+
import {Columns, Text, Inline} from '@shopify/polaris';
3+
4+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
5+
6+
function ColumnsWithSetNumberExample() {
7+
return (
8+
<SpacingBackground>
9+
<Columns
10+
columns={{
11+
xs: '3fr 3fr',
12+
md: '4fr 2fr',
13+
}}
14+
spacing={{
15+
xs: '4',
16+
md: '2',
17+
}}
18+
>
19+
<Placeholder height="320px" label="01" />
20+
<Placeholder height="320px" label="02" />
21+
</Columns>
22+
</SpacingBackground>
23+
);
24+
}
25+
26+
const SpacingBackground = ({children, width = '100%'}) => {
27+
return (
28+
<div
29+
style={{
30+
background:
31+
'repeating-linear-gradient(-45deg, #7B47F1, #7B47F1 1px, #E8D1FA 1px, #E8D1FA 7px)',
32+
width: width ?? undefined,
33+
height: 'auto',
34+
}}
35+
>
36+
{children}
37+
</div>
38+
);
39+
};
40+
41+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
42+
return (
43+
<div
44+
style={{
45+
display: 'inherit',
46+
background: '#7B47F1',
47+
height: height ?? undefined,
48+
width: width ?? undefined,
49+
}}
50+
>
51+
<Inline align="center" alignY="center">
52+
<div
53+
style={{
54+
color: '#FFFFFF',
55+
width: width ?? undefined,
56+
}}
57+
>
58+
<Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
59+
{label}
60+
</Text>
61+
</div>
62+
</Inline>
63+
</div>
64+
);
65+
};
66+
67+
export default withPolarisExample(ColumnsWithSetNumberExample);

‎polaris.shopify.com/pages/examples/columns-with-varying-spacing.tsx‎

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

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

66
function ColumnsWithVaryingGapExample() {
77
return (
8-
<div style={{width: '100%'}}>
9-
<Columns
10-
columns={{xs: 3}}
11-
spacing={{xs: '025', sm: '05', md: '1', lg: '2', xl: '4'}}
12-
>
13-
<div style={{background: 'var(--p-surface-success)'}}>Column one</div>
14-
<div style={{background: 'var(--p-surface-success)'}}>Column two</div>
15-
<div style={{background: 'var(--p-surface-success)'}}>Column three</div>
8+
<SpacingBackground>
9+
<Columns spacing={{xs: '2'}}>
10+
<Placeholder height="320px" label="01" />
11+
<Placeholder height="320px" label="02" />
12+
<Placeholder height="320px" label="03" />
13+
<Placeholder height="320px" label="04" />
14+
<Placeholder height="320px" label="05" />
15+
<Placeholder height="320px" label="06" />
1616
</Columns>
17-
</div>
17+
</SpacingBackground>
1818
);
1919
}
2020

21+
const SpacingBackground = ({children, width = '100%'}) => {
22+
return (
23+
<div
24+
style={{
25+
background:
26+
'repeating-linear-gradient(-45deg, #7B47F1, #7B47F1 1px, #E8D1FA 1px, #E8D1FA 7px)',
27+
width: width ?? undefined,
28+
height: 'auto',
29+
}}
30+
>
31+
{children}
32+
</div>
33+
);
34+
};
35+
36+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
37+
return (
38+
<div
39+
style={{
40+
display: 'inherit',
41+
background: '#7B47F1',
42+
height: height ?? undefined,
43+
width: width ?? undefined,
44+
}}
45+
>
46+
<Inline align="center" alignY="center">
47+
<div
48+
style={{
49+
color: '#FFFFFF',
50+
width: width ?? undefined,
51+
}}
52+
>
53+
<Text as="h2" variant="bodyMd" fontWeight="medium" alignment="center">
54+
{label}
55+
</Text>
56+
</div>
57+
</Inline>
58+
</div>
59+
);
60+
};
61+
2162
export default withPolarisExample(ColumnsWithVaryingGapExample);

0 commit comments

Comments
 (0)