Skip to content

Commit 9ad4bf0

Browse files
chazdeanchazdean
committed
Update Tiles docs
1 parent 4c5ccc8 commit 9ad4bf0

File tree

4 files changed

+81
-49
lines changed

4 files changed

+81
-49
lines changed

‎.changeset/gorgeous-chefs-turn.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 `Tiles` component docs

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Tiles
3-
description: Create complex layouts based on [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid).
3+
description: Displays a tiled grid of equal-sized elements with equal spacing between them.
44
category: Structure
55
keywords:
66
- layout
@@ -9,7 +9,17 @@ status:
99
message: This component is in development. There could be breaking changes made to it in a non-major release of Polaris. Please use with caution.
1010
examples:
1111
- fileName: tiles-with-spacing.tsx
12-
title: With spacing
12+
title: Spacing
13+
description: >-
14+
Use the spacing prop to set the amount of space between tiles.
1315
- fileName: tiles-with-columns.tsx
14-
title: With columns
16+
title: Columns
17+
description: >-
18+
Use the columns prop to set the number of tiles per row. Tiles will wrap onto multiple rows when needed.
1519
---
20+
21+
## Related components
22+
23+
- For more control over widths, spacing, and alignment, [use the columns](https://polaris.shopify.com/components/columns) component
24+
- To lay out a set of smaller components horizontally, [use the Inline](https://polaris.shopify.com/components/inline) component
25+
- To lay out a set of smaller components vertically, [use the Alpha stack](https://polaris.shopify.com/components/alphastack) component

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

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,41 @@ import {Tiles, Text} from '@shopify/polaris';
33

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

6-
const styles = {
7-
background: 'var(--p-surface)',
8-
border: 'var(--p-border-base)',
9-
borderRadius: 'var(--p-border-radius-2)',
10-
padding: 'var(--p-space-4)',
11-
};
12-
13-
const children = Array.from(Array(8)).map((ele, index) => (
14-
<div key={index} style={styles}>
15-
<Text as="h2" variant="headingMd">
16-
Sales
17-
</Text>
18-
<Text as="p" variant="bodyMd">
19-
View a summary of your online store’s sales.
20-
</Text>
21-
</div>
22-
));
23-
246
function TilesWithColumnsExample() {
257
return (
26-
<div style={{width: '100%'}}>
27-
<Tiles columns={{xs: 4}} gap={{xs: '2'}}>
28-
{children}
29-
</Tiles>
30-
</div>
8+
<Tiles columns={{xs: 3}} gap={{xs: '4'}}>
9+
<Placeholder label="01" />
10+
<Placeholder label="02" />
11+
<Placeholder label="03" />
12+
<Placeholder label="04" />
13+
<Placeholder label="05" />
14+
<Placeholder label="06" />
15+
<Placeholder label="07" />
16+
</Tiles>
3117
);
3218
}
3319

20+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
21+
return (
22+
<div
23+
style={{
24+
background: '#7B47F1',
25+
padding: 'var(--p-space-2)',
26+
height: height ?? undefined,
27+
width: width ?? undefined,
28+
}}
29+
>
30+
<div
31+
style={{
32+
color: '#FFFFFF',
33+
}}
34+
>
35+
<Text as="h2" variant="bodyMd" fontWeight="medium">
36+
{label}
37+
</Text>
38+
</div>
39+
</div>
40+
);
41+
};
42+
3443
export default withPolarisExample(TilesWithColumnsExample);

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

Lines changed: 31 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,32 +3,40 @@ import {Tiles, Text} from '@shopify/polaris';
33

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

6-
const styles = {
7-
background: 'var(--p-surface)',
8-
border: 'var(--p-border-base)',
9-
borderRadius: 'var(--p-border-radius-2)',
10-
padding: 'var(--p-space-4)',
11-
};
12-
13-
const children = Array.from(Array(2)).map((ele, index) => (
14-
<div key={index} style={styles}>
15-
<Text as="h2" variant="headingMd">
16-
Sales
17-
</Text>
18-
<Text as="p" variant="bodyMd">
19-
View a summary of your online store’s sales.
20-
</Text>
21-
</div>
22-
));
23-
246
function TilesWithSpacingExample() {
257
return (
26-
<div style={{width: '100%'}}>
27-
<Tiles columns={{xs: 1}} gap={{xs: '5'}}>
28-
{children}
29-
</Tiles>
30-
</div>
8+
<Tiles columns={{xs: 3}} gap={{xs: '4'}}>
9+
<Placeholder label="01" />
10+
<Placeholder label="02" />
11+
<Placeholder label="03" />
12+
<Placeholder label="04" />
13+
<Placeholder label="05" />
14+
<Placeholder label="06" />
15+
</Tiles>
3116
);
3217
}
3318

19+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
20+
return (
21+
<div
22+
style={{
23+
background: '#7B47F1',
24+
padding: 'var(--p-space-2)',
25+
height: height ?? undefined,
26+
width: width ?? undefined,
27+
}}
28+
>
29+
<div
30+
style={{
31+
color: '#FFFFFF',
32+
}}
33+
>
34+
<Text as="h2" variant="bodyMd" fontWeight="medium">
35+
{label}
36+
</Text>
37+
</div>
38+
</div>
39+
);
40+
};
41+
3442
export default withPolarisExample(TilesWithSpacingExample);

0 commit comments

Comments
 (0)