From f082a518dba2efa70d52132cedaf6f2f81a7bee0 Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Fri, 28 Oct 2022 14:20:33 -0400 Subject: [PATCH 1/3] Update `Tiles` docs --- .changeset/gorgeous-chefs-turn.md | 5 ++ .../content/components/tiles.md | 16 +++++- .../pages/examples/tiles-with-columns.tsx | 55 +++++++++++-------- .../pages/examples/tiles-with-spacing.tsx | 54 ++++++++++-------- 4 files changed, 81 insertions(+), 49 deletions(-) create mode 100644 .changeset/gorgeous-chefs-turn.md diff --git a/.changeset/gorgeous-chefs-turn.md b/.changeset/gorgeous-chefs-turn.md new file mode 100644 index 00000000000..f124d7ed1d1 --- /dev/null +++ b/.changeset/gorgeous-chefs-turn.md @@ -0,0 +1,5 @@ +--- +'polaris.shopify.com': patch +--- + +Updated `Tiles` component docs diff --git a/polaris.shopify.com/content/components/tiles.md b/polaris.shopify.com/content/components/tiles.md index 4e2fd61dfa4..c28f6b74113 100644 --- a/polaris.shopify.com/content/components/tiles.md +++ b/polaris.shopify.com/content/components/tiles.md @@ -1,6 +1,6 @@ --- title: Tiles -description: Create complex layouts based on [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid). +description: Displays a tiled grid of equal-sized elements with equal spacing between them. category: Structure keywords: - layout @@ -9,7 +9,17 @@ status: 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. examples: - fileName: tiles-with-spacing.tsx - title: With spacing + title: Spacing + description: >- + Use the spacing prop to set the amount of space between tiles. - fileName: tiles-with-columns.tsx - title: With columns + title: Columns + description: >- + Use the columns prop to set the number of tiles per row. Tiles will wrap onto multiple rows when needed. --- + +## Related components + +- For more control over widths, spacing, and alignment, [use the columns](https://polaris.shopify.com/components/columns) component +- To lay out a set of smaller components horizontally, [use the Inline](https://polaris.shopify.com/components/inline) component +- To lay out a set of smaller components vertically, [use the Alpha stack](https://polaris.shopify.com/components/alphastack) component diff --git a/polaris.shopify.com/pages/examples/tiles-with-columns.tsx b/polaris.shopify.com/pages/examples/tiles-with-columns.tsx index 71a1c36c915..c73e3e32c31 100644 --- a/polaris.shopify.com/pages/examples/tiles-with-columns.tsx +++ b/polaris.shopify.com/pages/examples/tiles-with-columns.tsx @@ -3,32 +3,41 @@ import {Tiles, Text} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -const styles = { - background: 'var(--p-surface)', - border: 'var(--p-border-base)', - borderRadius: 'var(--p-border-radius-2)', - padding: 'var(--p-space-4)', -}; - -const children = Array.from(Array(8)).map((ele, index) => ( -
- - Sales - - - View a summary of your online store’s sales. - -
-)); - function TilesWithColumnsExample() { return ( -
- - {children} - -
+ + + + + + + + + ); } +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+
+ + {label} + +
+
+ ); +}; + export default withPolarisExample(TilesWithColumnsExample); diff --git a/polaris.shopify.com/pages/examples/tiles-with-spacing.tsx b/polaris.shopify.com/pages/examples/tiles-with-spacing.tsx index e7df495acec..9ca2e6c8f7d 100644 --- a/polaris.shopify.com/pages/examples/tiles-with-spacing.tsx +++ b/polaris.shopify.com/pages/examples/tiles-with-spacing.tsx @@ -3,32 +3,40 @@ import {Tiles, Text} from '@shopify/polaris'; import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; -const styles = { - background: 'var(--p-surface)', - border: 'var(--p-border-base)', - borderRadius: 'var(--p-border-radius-2)', - padding: 'var(--p-space-4)', -}; - -const children = Array.from(Array(2)).map((ele, index) => ( -
- - Sales - - - View a summary of your online store’s sales. - -
-)); - function TilesWithSpacingExample() { return ( -
- - {children} - -
+ + + + + + + + ); } +const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { + return ( +
+
+ + {label} + +
+
+ ); +}; + export default withPolarisExample(TilesWithSpacingExample); From 593d26a4802df2e127f7ca1abc4a7923e6c361bd Mon Sep 17 00:00:00 2001 From: Chaz Dean <59836805+chazdean@users.noreply.github.com> Date: Fri, 4 Nov 2022 09:36:11 -0400 Subject: [PATCH 2/3] Remove `nullish` from `Placeholder` component --- .changeset/gorgeous-chefs-turn.md | 2 +- polaris.shopify.com/content/components/tiles.md | 2 +- polaris.shopify.com/pages/examples/tiles-with-columns.tsx | 4 ++-- polaris.shopify.com/pages/examples/tiles-with-spacing.tsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.changeset/gorgeous-chefs-turn.md b/.changeset/gorgeous-chefs-turn.md index f124d7ed1d1..9c3df630238 100644 --- a/.changeset/gorgeous-chefs-turn.md +++ b/.changeset/gorgeous-chefs-turn.md @@ -2,4 +2,4 @@ 'polaris.shopify.com': patch --- -Updated `Tiles` component docs +Updated `Tiles` component guidance and examples diff --git a/polaris.shopify.com/content/components/tiles.md b/polaris.shopify.com/content/components/tiles.md index c28f6b74113..da3948414e6 100644 --- a/polaris.shopify.com/content/components/tiles.md +++ b/polaris.shopify.com/content/components/tiles.md @@ -20,6 +20,6 @@ examples: ## Related components -- For more control over widths, spacing, and alignment, [use the columns](https://polaris.shopify.com/components/columns) component +- For more control over widths, spacing, and alignment, [use the Columns](https://polaris.shopify.com/components/columns) component - To lay out a set of smaller components horizontally, [use the Inline](https://polaris.shopify.com/components/inline) component - To lay out a set of smaller components vertically, [use the Alpha stack](https://polaris.shopify.com/components/alphastack) component diff --git a/polaris.shopify.com/pages/examples/tiles-with-columns.tsx b/polaris.shopify.com/pages/examples/tiles-with-columns.tsx index c73e3e32c31..6e3d4ce049a 100644 --- a/polaris.shopify.com/pages/examples/tiles-with-columns.tsx +++ b/polaris.shopify.com/pages/examples/tiles-with-columns.tsx @@ -23,8 +23,8 @@ const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => { style={{ background: '#7B47F1', padding: 'var(--p-space-2)', - height: height ?? undefined, - width: width ?? undefined, + height: height, + width: width, }} >
{ style={{ background: '#7B47F1', padding: 'var(--p-space-2)', - height: height ?? undefined, - width: width ?? undefined, + height: height, + width: width, }} >
Date: Mon, 7 Nov 2022 14:08:22 +0100 Subject: [PATCH 3/3] Update polaris.shopify.com/content/components/tiles.md Co-authored-by: Sara Hill --- polaris.shopify.com/content/components/tiles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/polaris.shopify.com/content/components/tiles.md b/polaris.shopify.com/content/components/tiles.md index da3948414e6..b77a0e29cf0 100644 --- a/polaris.shopify.com/content/components/tiles.md +++ b/polaris.shopify.com/content/components/tiles.md @@ -20,6 +20,6 @@ examples: ## Related components -- For more control over widths, spacing, and alignment, [use the Columns](https://polaris.shopify.com/components/columns) component +- For more control over widths, spacing, and alignment, [use the Columns component](https://polaris.shopify.com/components/columns) - To lay out a set of smaller components horizontally, [use the Inline](https://polaris.shopify.com/components/inline) component - To lay out a set of smaller components vertically, [use the Alpha stack](https://polaris.shopify.com/components/alphastack) component