[Layout foundations] Update Tiles component docs and guidance

.changeset/gorgeous-chefs-turn.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': patch
+---
+
+Updated `Tiles` component guidance and examples

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 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

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) => (
-  <div key={index} style={styles}>
-    <Text as="h2" variant="headingMd">
-      Sales
-    </Text>
-    <Text as="p" variant="bodyMd">
-      View a summary of your online store’s sales.
-    </Text>
-  </div>
-));
-
 function TilesWithColumnsExample() {
   return (
-    <div style={{width: '100%'}}>
-      <Tiles columns={{xs: 4}} gap={{xs: '2'}}>
-        {children}
-      </Tiles>
-    </div>
+    <Tiles columns={{xs: 3}} gap={{xs: '4'}}>
+      <Placeholder label="01" />
+      <Placeholder label="02" />
+      <Placeholder label="03" />
+      <Placeholder label="04" />
+      <Placeholder label="05" />
+      <Placeholder label="06" />
+      <Placeholder label="07" />
+    </Tiles>
   );
 }
 
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        background: '#7B47F1',
+        padding: 'var(--p-space-2)',
+        height: height,
+        width: width,
+      }}
+    >
+      <div
+        style={{
+          color: '#FFFFFF',
+        }}
+      >
+        <Text as="h2" variant="bodyMd" fontWeight="medium">
+          {label}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
 export default withPolarisExample(TilesWithColumnsExample);

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) => (
-  <div key={index} style={styles}>
-    <Text as="h2" variant="headingMd">
-      Sales
-    </Text>
-    <Text as="p" variant="bodyMd">
-      View a summary of your online store’s sales.
-    </Text>
-  </div>
-));
-
 function TilesWithSpacingExample() {
   return (
-    <div style={{width: '100%'}}>
-      <Tiles columns={{xs: 1}} gap={{xs: '5'}}>
-        {children}
-      </Tiles>
-    </div>
+    <Tiles columns={{xs: 3}} gap={{xs: '4'}}>
+      <Placeholder label="01" />
+      <Placeholder label="02" />
+      <Placeholder label="03" />
+      <Placeholder label="04" />
+      <Placeholder label="05" />
+      <Placeholder label="06" />
+    </Tiles>
   );
 }
 
+const Placeholder = ({label = '', height = 'auto', width = 'auto'}) => {
+  return (
+    <div
+      style={{
+        background: '#7B47F1',
+        padding: 'var(--p-space-2)',
+        height: height,
+        width: width,
+      }}
+    >
+      <div
+        style={{
+          color: '#FFFFFF',
+        }}
+      >
+        <Text as="h2" variant="bodyMd" fontWeight="medium">
+          {label}
+        </Text>
+      </div>
+    </div>
+  );
+};
+
 export default withPolarisExample(TilesWithSpacingExample);