[Layout foundations] Add breakpoint configuration to Tile component (#7286)

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

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

### WHAT is this pull request doing?

Adds ability for `Tile` to use breakpoints

<details>
      <summary>Tile breakpoints example</summary>
<img
src="https://user-images.githubusercontent.com/59836805/192546149-89e03625-0d1f-433b-a756-b277df415c85.gif"
alt="Description of what the gif shows">
    </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 -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';

import {Page, Tile, Text} from '../src';

const styles = {
  background: 'var(--p-surface)',
  border: 'var(--p-border-base)',
  borderRadius: 'var(--p-border-radius-2)',
  padding: 'var(--p-space-4)',
};

export function Playground() {
  const children = Array.from(Array(10)).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>
  ));

  return (
    <Page title="Playground">
      <Tile columns={{xs: 2, sm: 3, md: 4, lg: 5, xl: 6}} gap={{xs: '2'}}>
        {children}
      </Tile>
    </Page>
  );
}
```

</details>

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

Author: chazdean

polaris-react/src/components/Tile/Tile.scss

@@ -1,7 +1,37 @@
 @import '../../styles/common';
 
 .Tile {
+  --pc-tile-xs: 6;
+  --pc-tile-sm: var(--pc-tile-xs);
+  --pc-tile-md: var(--pc-tile-sm);
+  --pc-tile-lg: var(--pc-tile-md);
+  --pc-tile-xl: var(--pc-tile-lg);
+  --pc-tile-gap-xs: var(--p-space-4);
+  --pc-tile-gap-sm: var(--pc-tile-gap-xs);
+  --pc-tile-gap-md: var(--pc-tile-gap-sm);
+  --pc-tile-gap-lg: var(--pc-tile-gap-md);
+  --pc-tile-gap-xl: var(--pc-tile-gap-lg);
   display: grid;
-  grid-template-columns: var(--pc-tile-column-number);
-  gap: var(--pc-tile-spacing);
+  gap: var(--pc-tile-gap-xs);
+  grid-template-columns: var(--pc-tile-xs);
+
+  @media #{$p-breakpoints-sm-up} {
+    gap: var(--pc-tile-gap-sm);
+    grid-template-columns: var(--pc-tile-sm);
+  }
+
+  @media #{$p-breakpoints-md-up} {
+    gap: var(--pc-tile-gap-md);
+    grid-template-columns: var(--pc-tile-md);
+  }
+
+  @media #{$p-breakpoints-lg-up} {
+    gap: var(--pc-tile-gap-lg);
+    grid-template-columns: var(--pc-tile-lg);
+  }
+
+  @media #{$p-breakpoints-xl-up} {
+    gap: var(--pc-tile-gap-xl);
+    grid-template-columns: var(--pc-tile-xl);
+  }
 }

polaris-react/src/components/Tile/Tile.stories.tsx

@@ -26,15 +26,15 @@ const children = Array.from(Array(4)).map((ele, index) => (
 
 export function Default() {
   return (
-    <Tile spacing="1" columns="2">
+    <Tile columns={{xs: 2}} gap={{xs: '2'}}>
       {children}
     </Tile>
   );
 }
 
 export function LargeSpacing() {
   return (
-    <Tile spacing="10" columns="2">
+    <Tile columns={{xs: 2}} gap={{xs: '10'}}>
       {children}
     </Tile>
   );
@@ -53,7 +53,7 @@ export function ManyColumns() {
   ));
 
   return (
-    <Tile spacing="3" columns="5">
+    <Tile columns={{xs: 5}} gap={{xs: '2'}}>
       {children}
     </Tile>
   );

polaris-react/src/components/Tile/Tile.tsx

@@ -1,40 +1,40 @@
 import React from 'react';
-import type {spacing} from '@shopify/polaris-tokens';
+import type {
+  BreakpointsAlias,
+  SpacingSpaceScale,
+} from '@shopify/polaris-tokens';
 
 import styles from './Tile.scss';
 
-type SpacingTokenName = keyof typeof spacing;
-
-// TODO: Bring this logic into tokens
-type Spacing = SpacingTokenName extends `space-${infer Scale}` ? Scale : never;
-
-type Columns =
-  | '1'
-  | '2'
-  | '3'
-  | '4'
-  | '5'
-  | '6'
-  | '7'
-  | '8'
-  | '9'
-  | '10'
-  | '11'
-  | '12';
+type Columns = {
+  [Breakpoint in BreakpointsAlias]?: number | string;
+};
+
+type Gap = {
+  [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
+};
 
 export interface TileProps {
   /** Elements to display inside tile */
   children: React.ReactNode;
   /** Adjust spacing between elements */
-  spacing: Spacing;
+  gap?: Gap;
   /** Adjust number of columns */
-  columns: Columns;
+  columns?: Columns;
 }
 
-export const Tile = ({children, spacing, columns}: TileProps) => {
+export const Tile = ({children, gap, columns}: TileProps) => {
   const style = {
-    '--pc-tile-column-number': `repeat(${columns}, 1fr)`,
-    '--pc-tile-spacing': `var(--p-space-${spacing})`,
+    '--pc-tile-gap-xs': gap?.xs ? `var(--p-space-${gap?.xs})` : undefined,
+    '--pc-tile-gap-sm': gap?.sm ? `var(--p-space-${gap?.sm})` : undefined,
+    '--pc-tile-gap-md': gap?.md ? `var(--p-space-${gap?.md})` : undefined,
+    '--pc-tile-gap-lg': gap?.lg ? `var(--p-space-${gap?.lg})` : undefined,
+    '--pc-tile-gap-xl': gap?.xl ? `var(--p-space-${gap?.xl})` : undefined,
+    '--pc-tile-xs': formatColumns(columns?.xs),
+    '--pc-tile-sm': formatColumns(columns?.sm),
+    '--pc-tile-md': formatColumns(columns?.md),
+    '--pc-tile-lg': formatColumns(columns?.lg),
+    '--pc-tile-xl': formatColumns(columns?.xl),
   } as React.CSSProperties;
 
   return (
@@ -43,3 +43,9 @@ export const Tile = ({children, spacing, columns}: TileProps) => {
     </div>
   );
 };
+
+function formatColumns(columns?: number | string) {
+  if (!columns) return undefined;
+
+  return typeof columns === 'number' ? `repeat(${columns}, 1fr)` : columns;
+}

polaris-react/src/components/Tile/tests/Tile.test.tsx

@@ -8,7 +8,7 @@ const Children = () => <p>This is a tile</p>;
 describe('<Tile />', () => {
   it('renders children', () => {
     const tile = mountWithApp(
-      <Tile spacing="1" columns="1">
+      <Tile columns={{xs: 2, sm: 2, md: 2, lg: 2, xl: 2}} gap={{xs: '2'}}>
         <Children />
       </Tile>,
     );
@@ -18,15 +18,16 @@ describe('<Tile />', () => {
 
   it('uses custom properties when passed in', () => {
     const tile = mountWithApp(
-      <Tile spacing="1" columns="2">
+      <Tile columns={{xs: 2, lg: 2}} gap={{xs: '2'}}>
         <Children />
       </Tile>,
     );
 
     expect(tile).toContainReactComponent('div', {
       style: {
-        '--pc-tile-column-number': 'repeat(2, 1fr)',
-        '--pc-tile-spacing': 'var(--p-space-1)',
+        '--pc-tile-xs': 'repeat(2, 1fr)',
+        '--pc-tile-lg': 'repeat(2, 1fr)',
+        '--pc-tile-gap-xs': 'var(--p-space-2)',
       } as React.CSSProperties,
     });
   });

polaris.shopify.com/pages/examples/tile-with-columns.tsx

@@ -24,7 +24,7 @@ const children = Array.from(Array(8)).map((ele, index) => (
 function TileWithColumnsExample() {
   return (
     <div style={{width: '500px'}}>
-      <Tile columns="4" spacing="2">
+      <Tile columns={{xs: 4}} gap={{xs: '2'}}>
         {children}
       </Tile>
     </div>

polaris.shopify.com/pages/examples/tile-with-spacing.tsx

@@ -24,7 +24,7 @@ const children = Array.from(Array(2)).map((ele, index) => (
 function TileWithSpacingExample() {
   return (
     <div style={{width: '500px'}}>
-      <Tile columns="1" spacing="5">
+      <Tile columns={{xs: 1}} gap={{xs: '5'}}>
         {children}
       </Tile>
     </div>