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 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, diff --git a/polaris.shopify.com/content/components/inline.md b/polaris.shopify.com/content/components/inline.md index 2dec172971d..6f6b5fb7848 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 arrange items in a horizontal row with equal spacing around them. Items wrap onto multiple lines when needed. 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. - - fileName: inline-with-align-y.tsx + 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: >- + 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-vertical-alignment.tsx title: Vertical alignment description: >- - Vertical alignment for children can be set with the alignY property. + Use to vertically align Inline. + - fileName: inline-with-horizontal-alignment.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..c97cc0b1416 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 = ({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 deleted file mode 100644 index dde090d9729..00000000000 --- a/polaris.shopify.com/pages/examples/inline-with-align-y.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import {AlphaStack, Badge, Box, Inline, Text} from '@shopify/polaris'; - -import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; - -function InlineWithAlignYExample() { - 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 - - One - Two - Three - - -
- ); -} - -export default withPolarisExample(InlineWithAlignYExample); diff --git a/polaris.shopify.com/pages/examples/inline-with-align.tsx b/polaris.shopify.com/pages/examples/inline-with-align.tsx deleted file mode 100644 index 091b2caaa02..00000000000 --- a/polaris.shopify.com/pages/examples/inline-with-align.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import React from 'react'; -import {AlphaStack, Badge, Inline, Text} 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 - - -
- ); -} - -export default withPolarisExample(InlineWithAlignExample); diff --git a/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx b/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx new file mode 100644 index 00000000000..1384659d0ed --- /dev/null +++ b/polaris.shopify.com/pages/examples/inline-with-horizontal-alignment.tsx @@ -0,0 +1,64 @@ +import React from 'react'; +import {AlphaStack, Inline, Text, Page} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function InlineWithHorizontalAlignmentExample() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+ +
+ + {label} + +
+ +
+ ); +}; + +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 new file mode 100644 index 00000000000..074e7485e8e --- /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 = ({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..8b556d2483b --- /dev/null +++ b/polaris.shopify.com/pages/examples/inline-with-spacing.tsx @@ -0,0 +1,57 @@ +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 = ({height = 'auto', width = 'auto'}) => { + return ( +
+ ); +}; + +export default withPolarisExample(InlineWithSpacingExample); diff --git a/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx b/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx new file mode 100644 index 00000000000..f32cf3b865f --- /dev/null +++ b/polaris.shopify.com/pages/examples/inline-with-vertical-alignment.tsx @@ -0,0 +1,82 @@ +import React from 'react'; +import {Inline, Text, AlphaStack} from '@shopify/polaris'; + +import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; + +function InlineWithVerticalAlignmentExample() { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + +const Placeholder = ({ + label = '', + height = 'auto', + width = 'auto', + padding = '6px 0px', + header = false, +}) => { + return ( +
+ +
+ {header ? ( + + {label} + + ) : ( + + {label} + + )} +
+ +
+ ); +}; + +export default withPolarisExample(InlineWithVerticalAlignmentExample);