Skip to content

Commit a9051d6

Browse files
chazdeansarahill
chazdean
and
sarahill
authored
[Layout foundations] Update Inline component docs and guidance (#7563)
<!-- ☝️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 #6905 <!-- link to issue if one exists --> <!-- Context about the problem that’s being addressed. --> ### WHAT is this pull request doing? Updates the `Inline` component docs and guidance <details> <summary>Inline style guide</summary> <img src="https://user-images.githubusercontent.com/59836805/198636012-393b4798-2d0a-4e60-b0a7-4b529b38d022.gif" alt="Inline 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>
1 parent 9931ce0 commit a9051d6

File tree

10 files changed

+284
-152
lines changed

10 files changed

+284
-152
lines changed

‎.changeset/tender-rockets-wonder.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 `Inline` component docs and default prop values

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,10 @@ export interface InlineProps {
2929

3030
export const Inline = function Inline({
3131
children,
32-
spacing = '1',
32+
spacing = '4',
3333
align,
3434
alignY,
35-
wrap,
35+
wrap = true,
3636
}: InlineProps) {
3737
const style = {
3838
'--pc-inline-align': align,

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

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
---
22
title: Inline
3-
description: Use to lay out a horizontal row of components with equal spacing between and wrapping onto multiple lines. Options provide control of the wrapping, spacing, and relative size of the items in the inline.
3+
description: Use to arrange items in a horizontal row with equal spacing around them. Items wrap onto multiple lines when needed.
44
category: Structure
55
keywords:
66
- layout
@@ -10,12 +10,27 @@ status:
1010
examples:
1111
- fileName: inline-default.tsx
1212
title: Default
13-
- fileName: inline-with-align.tsx
14-
title: Horizontal alignment
1513
description: >-
16-
Horizontal alignment for children can be set with the align property.
17-
- fileName: inline-with-align-y.tsx
14+
Items are vertically centered with 16px of space around them. They’ll wrap onto multiple lines when needed.
15+
- fileName: inline-with-non-wrapping.tsx
16+
title: Non-wrapping
17+
description: >-
18+
Use to create Inline where the children will not wrap to new rows on small screens.
19+
- fileName: inline-with-spacing.tsx
20+
title: Spacing
21+
description: >-
22+
Use to control spacing of items in inline in standard increments.
23+
- fileName: inline-with-vertical-alignment.tsx
1824
title: Vertical alignment
1925
description: >-
20-
Vertical alignment for children can be set with the alignY property.
26+
Use to vertically align Inline.
27+
- fileName: inline-with-horizontal-alignment.tsx
28+
title: Horizontal alignment
29+
description: >-
30+
Use to horizontally align Inline.
2131
---
32+
33+
## Related components
34+
35+
- To create the large-scale structure of pages, [use the Columns](https://polaris.shopify.com/components/columns) and [Tile component](https://polaris.shopify.com/components/tile)
36+
- To display elements vertically, [use AlphaStack](https://polaris.shopify.com/components/alphastack)

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

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

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

66
function InlineExample() {
77
return (
8-
<div style={{width: '100%'}}>
9-
<Inline>
10-
<Text variant="heading4xl" as="h2">
11-
Inline
12-
</Text>
13-
<Badge>One</Badge>
14-
<Badge>Two</Badge>
15-
<Badge>Three</Badge>
16-
</Inline>
17-
</div>
8+
<Inline>
9+
<Placeholder width="106px" height="36px" />
10+
<Placeholder width="106px" height="20px" />
11+
<Placeholder width="106px" height="20px" />
12+
<Placeholder width="106px" height="20px" />
13+
<Placeholder width="106px" height="20px" />
14+
<Placeholder width="106px" height="20px" />
15+
</Inline>
1816
);
1917
}
2018

19+
const Placeholder = ({height = 'auto', width = 'auto'}) => {
20+
return (
21+
<div
22+
style={{
23+
background: '#7B47F1',
24+
height: height,
25+
width: width,
26+
}}
27+
/>
28+
);
29+
};
30+
2131
export default withPolarisExample(InlineExample);

‎polaris.shopify.com/pages/examples/inline-with-align-y.tsx‎

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

‎polaris.shopify.com/pages/examples/inline-with-align.tsx‎

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

‎polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
import React from 'react';
2+
import {AlphaStack, Inline, Text, Page} from '@shopify/polaris';
3+
4+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
5+
6+
function InlineWithHorizontalAlignmentExample() {
7+
return (
8+
<Page narrowWidth>
9+
<AlphaStack spacing="16">
10+
<Inline align="start">
11+
<Placeholder width="106px" label="Start" />
12+
<Placeholder width="106px" height="20px" />
13+
<Placeholder width="106px" height="20px" />
14+
<Placeholder width="106px" height="20px" />
15+
<Placeholder width="106px" height="20px" />
16+
<Placeholder width="106px" height="20px" />
17+
</Inline>
18+
<Inline align="center">
19+
<Placeholder width="106px" label="Center" />
20+
<Placeholder width="106px" height="20px" />
21+
<Placeholder width="106px" height="20px" />
22+
<Placeholder width="106px" height="20px" />
23+
<Placeholder width="106px" height="20px" />
24+
<Placeholder width="106px" height="20px" />
25+
</Inline>
26+
<Inline align="end">
27+
<Placeholder width="106px" label="End" />
28+
<Placeholder width="106px" height="20px" />
29+
<Placeholder width="106px" height="20px" />
30+
<Placeholder width="106px" height="20px" />
31+
<Placeholder width="106px" height="20px" />
32+
<Placeholder width="106px" height="20px" />
33+
</Inline>
34+
</AlphaStack>
35+
</Page>
36+
);
37+
}
38+
39+
const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
40+
return (
41+
<div
42+
style={{
43+
padding: '6px 0',
44+
background: '#7B47F1',
45+
height: height,
46+
width: width,
47+
}}
48+
>
49+
<Inline align="center" alignY="center">
50+
<div
51+
style={{
52+
color: '#FFFFFF',
53+
}}
54+
>
55+
<Text as="h2" variant="bodyMd" fontWeight="medium">
56+
{label}
57+
</Text>
58+
</div>
59+
</Inline>
60+
</div>
61+
);
62+
};
63+
64+
export default withPolarisExample(InlineWithHorizontalAlignmentExample);

‎polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react';
2+
import {Inline} from '@shopify/polaris';
3+
4+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
5+
6+
function InlineWithNonWrappingExample() {
7+
return (
8+
<Inline wrap={false}>
9+
<Placeholder width="106px" height="36px" />
10+
<Placeholder width="106px" height="20px" />
11+
<Placeholder width="106px" height="20px" />
12+
<Placeholder width="106px" height="20px" />
13+
<Placeholder width="106px" height="20px" />
14+
<Placeholder width="106px" height="20px" />
15+
</Inline>
16+
);
17+
}
18+
19+
const Placeholder = ({height = 'auto', width = 'auto'}) => {
20+
return (
21+
<div
22+
style={{
23+
background: '#7B47F1',
24+
height: height,
25+
width: width,
26+
}}
27+
/>
28+
);
29+
};
30+
31+
export default withPolarisExample(InlineWithNonWrappingExample);

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

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import {Inline, AlphaStack} from '@shopify/polaris';
3+
4+
import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
5+
6+
function InlineWithSpacingExample() {
7+
return (
8+
<AlphaStack spacing="8">
9+
<Inline alignY="center">
10+
<SpacingBackground width="436px">
11+
<Inline wrap={false}>
12+
<Placeholder width="106px" height="36px" />
13+
<Placeholder width="106px" height="20px" />
14+
<Placeholder width="106px" height="20px" />
15+
<Placeholder width="106px" height="20px" />
16+
</Inline>
17+
</SpacingBackground>
18+
</Inline>
19+
<SpacingBackground width="212px">
20+
<Inline wrap={false}>
21+
<Placeholder width="106px" height="20px" />
22+
<Placeholder width="106px" height="20px" />
23+
</Inline>
24+
</SpacingBackground>
25+
</AlphaStack>
26+
);
27+
}
28+
29+
const SpacingBackground = ({children, width}) => {
30+
return (
31+
<div
32+
style={{
33+
display: 'flex',
34+
background:
35+
'repeating-linear-gradient(-45deg, #7B47F1, #7B47F1 1px, #E8D1FA 1px, #E8D1FA 7px)',
36+
width: width ?? '100%',
37+
height: '20px',
38+
}}
39+
>
40+
{children}
41+
</div>
42+
);
43+
};
44+
45+
const Placeholder = ({height = 'auto', width = 'auto'}) => {
46+
return (
47+
<div
48+
style={{
49+
background: '#7B47F1',
50+
height: height,
51+
width: width,
52+
}}
53+
/>
54+
);
55+
};
56+
57+
export default withPolarisExample(InlineWithSpacingExample);

0 commit comments

Comments
 (0)