[Layout foundations] Update Tiles component docs and guidance (#7569)

<!--
  ☝️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 #6907 <!-- link to issue if one exists -->

⚠️ Follow up issue #7626 created to change naming of `gap` prop to
`spacing` to align with
[Figma](https://www.figma.com/file/5oEi1wm73KhGLN0VS02oYm/Layout-components?node-id=2778%3A34927)
file and other layout primitives

<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Updates the `Tiles` component docs and guidance

<details>
      <summary>Tiles style guide</summary>
<img
src="https://user-images.githubusercontent.com/59836805/198707723-c0c78534-ffee-42b5-ad6f-c809a56f85f1.gif"
alt="Tiles 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 <[email protected]>

Author: chazdean

.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);