[Layout foundations] Add breakpoint configuration to Tile component

[chazdean]

WHY are these changes introduced?

Fixes #7285

WHAT is this pull request doing?

Adds ability for Tile to use breakpoints

Tile breakpoints example

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

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

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide

[chazdean]

/snapit

[github-actions]

🫰✨ Thanks @chazdean! Your snapshots have been published to npm.

Test the snapshots by updating your package.json with the newly published versions:

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

yarn add @shopify/[email protected]

[github-actions]

size-limit report 📦

Path	Size
polaris-react-cjs	204.85 KB (+0.07% 🔺)
polaris-react-esm	131.29 KB (+0.1% 🔺)
polaris-react-esnext	186.6 KB (+0.13% 🔺)
polaris-react-css	41.48 KB (+0.26% 🔺)

[laurkim]

💯