From 65ad2cd33802538d6b3e38cf4d54c38c146cf3cd Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Thu, 27 Oct 2022 14:23:28 -0400 Subject: [PATCH 1/8] Update `Inline` docs --- .../content/components/inline.md | 25 +++- .../pages/examples/inline-default.tsx | 32 +++-- .../pages/examples/inline-with-align-y.tsx | 112 ++++++++--------- .../pages/examples/inline-with-align.tsx | 117 +++++++++++------- .../examples/inline-with-non-wrapping.tsx | 31 +++++ .../pages/examples/inline-with-spacing.tsx | 55 ++++++++ 6 files changed, 248 insertions(+), 124 deletions(-) create mode 100644 polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx create mode 100644 polaris.shopify.com/pages/examples/inline-with-spacing.tsx diff --git a/polaris.shopify.com/content/components/inline.md b/polaris.shopify.com/content/components/inline.md index 2dec172971d..324aaad8c3b 100644 --- a/polaris.shopify.com/content/components/inline.md +++ b/polaris.shopify.com/content/components/inline.md @@ -1,6 +1,6 @@ --- title: Inline -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. +description: Use to lay out a horizontal row of components with equal spacing between and wrapping onto multiple lines. category: Structure keywords: - layout @@ -10,12 +10,27 @@ status: examples: - fileName: inline-default.tsx title: Default - - fileName: inline-with-align.tsx - title: Horizontal alignment description: >- - Horizontal alignment for children can be set with the align property. + By default, Inline is left aligned, and wraps based on the width of Content block or Page. The default spacing in between is 16px and Inline children are horizontally centered. + - fileName: inline-with-non-wrapping.tsx + title: Non-wrapping + description: >- + Use to create Inline where the children will not wrap to new rows on small screens. + - fileName: inline-with-spacing.tsx + title: Spacing + description: >- + Use to control spacing of items in inline in standard increments. - fileName: inline-with-align-y.tsx title: Vertical alignment description: >- - Vertical alignment for children can be set with the alignY property. + Use to vertically align Inline. + - fileName: inline-with-align.tsx + title: Horizontal alignment + description: >- + Use to horizontally align Inline. --- + +## Related components + +- 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) +- To display elements vertically, [use AlphaStack](https://polaris.shopify.com/components/alphastack) diff --git a/polaris.shopify.com/pages/examples/inline-default.tsx b/polaris.shopify.com/pages/examples/inline-default.tsx index 77bca261d03..9576164edb5 100644 --- a/polaris.shopify.com/pages/examples/inline-default.tsx +++ b/polaris.shopify.com/pages/examples/inline-default.tsx @@ -1,21 +1,31 @@ import React from 'react'; -import {Badge, Inline, Text} from '@shopify/polaris'; +import {Inline} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineExample() { return ( -
- - - Inline - - One - Two - Three - -
+ + + + + + + + ); } +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+ ); +}; + export default withPolarisExample(InlineExample); diff --git a/polaris.shopify.com/pages/examples/inline-with-align-y.tsx b/polaris.shopify.com/pages/examples/inline-with-align-y.tsx index dde090d9729..e6966f8874f 100644 --- a/polaris.shopify.com/pages/examples/inline-with-align-y.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-align-y.tsx @@ -1,76 +1,64 @@ import React from 'react'; -import {AlphaStack, Badge, Box, Inline, Text} from '@shopify/polaris'; +import {AlphaStack, Inline, Text, Page} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function InlineWithAlignYExample() { +function InlineWithVerticalAlignmentExample() { return ( -
- - - with alignY top - - - - - Inline - - One - Two - Three + + + + + + + + + - -
- - - with alignY center - - - - - Inline - - One - Two - Three + + + + + + + - - -
- - - - with alignY bottom - - - - - Inline - - One - Two - Three + + + + + + + + + ); +} -
- - - - with alignY baseline - - - - - Inline +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+ +
+ + {label} - One - Two - Three - - +
+
); -} +}; -export default withPolarisExample(InlineWithAlignYExample); +export default withPolarisExample(InlineWithVerticalAlignmentExample); diff --git a/polaris.shopify.com/pages/examples/inline-with-align.tsx b/polaris.shopify.com/pages/examples/inline-with-align.tsx index 091b2caaa02..edebb341be6 100644 --- a/polaris.shopify.com/pages/examples/inline-with-align.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-align.tsx @@ -1,57 +1,82 @@ import React from 'react'; -import {AlphaStack, Badge, Inline, Text} from '@shopify/polaris'; +import {Inline, Text, AlphaStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineWithAlignExample() { return ( -
- - - with align start - - - - - Inline - - One - Two - Three - - -
- - - with align center - - - - - Inline - - One - Two - Three - - -
- - - with align end - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} - - - Inline - - One - Two - Three - - +const Placeholder = ({ + label = '', + height = 'auto', + width = 'auto', + padding = '6px 0px', + header = false, +}) => { + return ( +
+ +
+ {header ? ( + + {label} + + ) : ( + + {label} + + )} +
+
); -} +}; export default withPolarisExample(InlineWithAlignExample); diff --git a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx b/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx new file mode 100644 index 00000000000..7787bbb9764 --- /dev/null +++ b/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import {Inline} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function InlineWithNonWrappingExample() { + return ( + + + + + + + + + ); +} + +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+ ); +}; + +export default withPolarisExample(InlineWithNonWrappingExample); diff --git a/polaris.shopify.com/pages/examples/inline-with-spacing.tsx b/polaris.shopify.com/pages/examples/inline-with-spacing.tsx new file mode 100644 index 00000000000..9e86f42ea5c --- /dev/null +++ b/polaris.shopify.com/pages/examples/inline-with-spacing.tsx @@ -0,0 +1,55 @@ +import React from 'react'; +import {Inline, AlphaStack} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function InlineWithSpacingExample() { + return ( + + + + + + + + + + + + + + + + + ); +} + +const SpacingBackground = ({children, width}) => { + return ( +
+ {children} +
+ ); +}; + +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+ ); +}; + +export default withPolarisExample(InlineWithSpacingExample); From c26eec23199119c927a9a53b58620c6e13aac0f3 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Fri, 28 Oct 2022 08:54:47 -0400 Subject: [PATCH 2/8] Update `Inline` example spacing --- .../pages/examples/inline-default.tsx | 2 +- .../pages/examples/inline-with-align-y.tsx | 2 +- .../pages/examples/inline-with-align.tsx | 2 +- .../pages/examples/inline-with-spacing.tsx | 24 ++++++++++--------- 4 files changed, 16 insertions(+), 14 deletions(-) diff --git a/polaris.shopify.com/pages/examples/inline-default.tsx b/polaris.shopify.com/pages/examples/inline-default.tsx index 9576164edb5..b29b65696b5 100644 --- a/polaris.shopify.com/pages/examples/inline-default.tsx +++ b/polaris.shopify.com/pages/examples/inline-default.tsx @@ -16,7 +16,7 @@ function InlineExample() { ); } -const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { +const Placeholder = ({height = 'auto', width = 'auto'}) => { return (
- + diff --git a/polaris.shopify.com/pages/examples/inline-with-align.tsx b/polaris.shopify.com/pages/examples/inline-with-align.tsx index edebb341be6..7c11e96fd58 100644 --- a/polaris.shopify.com/pages/examples/inline-with-align.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-align.tsx @@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineWithAlignExample() { return ( - + diff --git a/polaris.shopify.com/pages/examples/inline-with-spacing.tsx b/polaris.shopify.com/pages/examples/inline-with-spacing.tsx index 9e86f42ea5c..0c131e91793 100644 --- a/polaris.shopify.com/pages/examples/inline-with-spacing.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-spacing.tsx @@ -5,15 +5,17 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineWithSpacingExample() { return ( - - - - - - - - - + + + + + + + + + + + @@ -28,11 +30,11 @@ const SpacingBackground = ({children, width}) => { return (
{children} @@ -40,7 +42,7 @@ const SpacingBackground = ({children, width}) => { ); }; -const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { +const Placeholder = ({height = 'auto', width = 'auto'}) => { return (
Date: Fri, 28 Oct 2022 08:55:37 -0400 Subject: [PATCH 3/8] Update `Inline` default `spacing` and `wrap` values --- polaris-react/src/components/Inline/Inline.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/polaris-react/src/components/Inline/Inline.tsx b/polaris-react/src/components/Inline/Inline.tsx index 9afc139403f..d930358cd25 100644 --- a/polaris-react/src/components/Inline/Inline.tsx +++ b/polaris-react/src/components/Inline/Inline.tsx @@ -29,10 +29,10 @@ export interface InlineProps { export const Inline = function Inline({ children, - spacing = '1', + spacing = '4', align, alignY, - wrap, + wrap = true, }: InlineProps) { const style = { '--pc-inline-align': align, From 7c34e5902471e41e6f64811bef226823df6f4b69 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Fri, 28 Oct 2022 09:05:09 -0400 Subject: [PATCH 4/8] Add changeset --- .changeset/tender-rockets-wonder.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/tender-rockets-wonder.md diff --git a/.changeset/tender-rockets-wonder.md b/.changeset/tender-rockets-wonder.md new file mode 100644 index 00000000000..792534d49db --- /dev/null +++ b/.changeset/tender-rockets-wonder.md @@ -0,0 +1,6 @@ +--- +'@shopify/polaris': patch +'polaris.shopify.com': patch +--- + +Updated `Inline` component docs and default prop values From 86e6dae5c6d39f79278d431018e24a5e1ac2a49d Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Fri, 28 Oct 2022 09:50:11 -0400 Subject: [PATCH 5/8] Fix `Inline` example `wrap` --- polaris.shopify.com/pages/examples/inline-default.tsx | 2 +- .../pages/examples/inline-with-align-y.tsx | 6 +++--- polaris.shopify.com/pages/examples/inline-with-align.tsx | 8 ++++---- .../pages/examples/inline-with-non-wrapping.tsx | 4 ++-- .../pages/examples/inline-with-spacing.tsx | 4 ++-- 5 files changed, 12 insertions(+), 12 deletions(-) diff --git a/polaris.shopify.com/pages/examples/inline-default.tsx b/polaris.shopify.com/pages/examples/inline-default.tsx index b29b65696b5..87127ecd847 100644 --- a/polaris.shopify.com/pages/examples/inline-default.tsx +++ b/polaris.shopify.com/pages/examples/inline-default.tsx @@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineExample() { return ( - + diff --git a/polaris.shopify.com/pages/examples/inline-with-align-y.tsx b/polaris.shopify.com/pages/examples/inline-with-align-y.tsx index 6154ce97ec5..9bfed5282da 100644 --- a/polaris.shopify.com/pages/examples/inline-with-align-y.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-align-y.tsx @@ -7,7 +7,7 @@ function InlineWithVerticalAlignmentExample() { return ( - + @@ -15,7 +15,7 @@ function InlineWithVerticalAlignmentExample() { - + @@ -23,7 +23,7 @@ function InlineWithVerticalAlignmentExample() { - + diff --git a/polaris.shopify.com/pages/examples/inline-with-align.tsx b/polaris.shopify.com/pages/examples/inline-with-align.tsx index 7c11e96fd58..40cf49d16ff 100644 --- a/polaris.shopify.com/pages/examples/inline-with-align.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-align.tsx @@ -6,7 +6,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineWithAlignExample() { return ( - + @@ -14,7 +14,7 @@ function InlineWithAlignExample() { - + @@ -22,7 +22,7 @@ function InlineWithAlignExample() { - + @@ -30,7 +30,7 @@ function InlineWithAlignExample() { - + diff --git a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx b/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx index 7787bbb9764..4b0aed5f719 100644 --- a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx @@ -5,7 +5,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function InlineWithNonWrappingExample() { return ( - + @@ -16,7 +16,7 @@ function InlineWithNonWrappingExample() { ); } -const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { +const Placeholder = ({height = 'auto', width = 'auto'}) => { return (
- + @@ -17,7 +17,7 @@ function InlineWithSpacingExample() { - + From a053a7a57da31e9f3f6a3b103b27b7cc2749199d Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Mon, 31 Oct 2022 13:16:40 +0100 Subject: [PATCH 6/8] Update polaris.shopify.com/content/components/inline.md Co-authored-by: Sara Hill --- polaris.shopify.com/content/components/inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/inline.md b/polaris.shopify.com/content/components/inline.md index 324aaad8c3b..f309ea7c4d1 100644 --- a/polaris.shopify.com/content/components/inline.md +++ b/polaris.shopify.com/content/components/inline.md @@ -1,6 +1,6 @@ --- title: Inline -description: Use to lay out a horizontal row of components with equal spacing between and wrapping onto multiple lines. +description: Use to arrange items in a horizontal row with equal spacing around them. Items wrap onto multiple lines when needed. category: Structure keywords: - layout From a83ea0163610f17aa5f6618b8f6d6cd31f360036 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Mon, 31 Oct 2022 08:45:09 -0400 Subject: [PATCH 7/8] Swap `vertical` & `horizontal` examples --- polaris.shopify.com/content/components/inline.md | 4 ++-- polaris.shopify.com/pages/examples/inline-default.tsx | 4 ++-- ...lign-y.tsx => inline-with-horizontal-alignment.tsx} | 8 ++++---- .../pages/examples/inline-with-non-wrapping.tsx | 4 ++-- .../pages/examples/inline-with-spacing.tsx | 4 ++-- ...th-align.tsx => inline-with-vertical-alignment.tsx} | 10 +++++----- 6 files changed, 17 insertions(+), 17 deletions(-) rename polaris.shopify.com/pages/examples/{inline-with-align-y.tsx => inline-with-horizontal-alignment.tsx} (90%) rename polaris.shopify.com/pages/examples/{inline-with-align.tsx => inline-with-vertical-alignment.tsx} (92%) diff --git a/polaris.shopify.com/content/components/inline.md b/polaris.shopify.com/content/components/inline.md index f309ea7c4d1..76ea74dcefd 100644 --- a/polaris.shopify.com/content/components/inline.md +++ b/polaris.shopify.com/content/components/inline.md @@ -20,11 +20,11 @@ examples: title: Spacing description: >- Use to control spacing of items in inline in standard increments. - - fileName: inline-with-align-y.tsx + - fileName: inline-with-vertical-alignment.tsx title: Vertical alignment description: >- Use to vertically align Inline. - - fileName: inline-with-align.tsx + - fileName: inline-with-horizontal-alignment.tsx title: Horizontal alignment description: >- Use to horizontally align Inline. diff --git a/polaris.shopify.com/pages/examples/inline-default.tsx b/polaris.shopify.com/pages/examples/inline-default.tsx index 87127ecd847..c97cc0b1416 100644 --- a/polaris.shopify.com/pages/examples/inline-default.tsx +++ b/polaris.shopify.com/pages/examples/inline-default.tsx @@ -21,8 +21,8 @@ const Placeholder = ({height = 'auto', width = 'auto'}) => {
); diff --git a/polaris.shopify.com/pages/examples/inline-with-align-y.tsx b/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx similarity index 90% rename from polaris.shopify.com/pages/examples/inline-with-align-y.tsx rename to polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx index 9bfed5282da..1384659d0ed 100644 --- a/polaris.shopify.com/pages/examples/inline-with-align-y.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx @@ -3,7 +3,7 @@ import {AlphaStack, Inline, Text, Page} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function InlineWithVerticalAlignmentExample() { +function InlineWithHorizontalAlignmentExample() { return ( @@ -42,8 +42,8 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { style={{ padding: '6px 0', background: '#7B47F1', - height: height ?? undefined, - width: width ?? undefined, + height: height, + width: width, }} > @@ -61,4 +61,4 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { ); }; -export default withPolarisExample(InlineWithVerticalAlignmentExample); +export default withPolarisExample(InlineWithHorizontalAlignmentExample); diff --git a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx b/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx index 4b0aed5f719..074e7485e8e 100644 --- a/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-non-wrapping.tsx @@ -21,8 +21,8 @@ const Placeholder = ({height = 'auto', width = 'auto'}) => {
); diff --git a/polaris.shopify.com/pages/examples/inline-with-spacing.tsx b/polaris.shopify.com/pages/examples/inline-with-spacing.tsx index 20518e964b4..8b556d2483b 100644 --- a/polaris.shopify.com/pages/examples/inline-with-spacing.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-spacing.tsx @@ -47,8 +47,8 @@ const Placeholder = ({height = 'auto', width = 'auto'}) => {
); diff --git a/polaris.shopify.com/pages/examples/inline-with-align.tsx b/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx similarity index 92% rename from polaris.shopify.com/pages/examples/inline-with-align.tsx rename to polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx index 40cf49d16ff..f32cf3b865f 100644 --- a/polaris.shopify.com/pages/examples/inline-with-align.tsx +++ b/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx @@ -3,7 +3,7 @@ import {Inline, Text, AlphaStack} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -function InlineWithAlignExample() { +function InlineWithVerticalAlignmentExample() { return ( @@ -52,10 +52,10 @@ const Placeholder = ({ return (
@@ -79,4 +79,4 @@ const Placeholder = ({ ); }; -export default withPolarisExample(InlineWithAlignExample); +export default withPolarisExample(InlineWithVerticalAlignmentExample); From 65093ba6f872ce29bcf760c3837d4784ce23ffc6 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Mon, 31 Oct 2022 13:47:53 +0100 Subject: [PATCH 8/8] Update polaris.shopify.com/content/components/inline.md Co-authored-by: Sara Hill --- polaris.shopify.com/content/components/inline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/inline.md b/polaris.shopify.com/content/components/inline.md index 76ea74dcefd..6f6b5fb7848 100644 --- a/polaris.shopify.com/content/components/inline.md +++ b/polaris.shopify.com/content/components/inline.md @@ -11,7 +11,7 @@ examples: - fileName: inline-default.tsx title: Default description: >- - By default, Inline is left aligned, and wraps based on the width of Content block or Page. The default spacing in between is 16px and Inline children are horizontally centered. + Items are vertically centered with 16px of space around them. They’ll wrap onto multiple lines when needed. - fileName: inline-with-non-wrapping.tsx title: Non-wrapping description: >-