[Layout foundations ] Rename Tiles

.changeset/good-mugs-share.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': patch
+'polaris.shopify.com': patch
+---
+
+Rename `Tiles` component

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

@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-.Tile {
+.Tiles {
   --pc-tile-xs: 6;
   --pc-tile-sm: var(--pc-tile-xs);
   --pc-tile-md: var(--pc-tile-sm);

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Box, Tile, Text} from '@shopify/polaris';
+import {Tiles, Text} from '@shopify/polaris';
 
 export default {
-  component: Tile,
-} as ComponentMeta<typeof Tile>;
+  component: Tiles,
+} as ComponentMeta<typeof Tiles>;
 
 const styles = {
   background: 'var(--p-surface)',
@@ -26,17 +26,17 @@ const children = Array.from(Array(4)).map((ele, index) => (
 
 export function Default() {
   return (
-    <Tile columns={{xs: 2}} gap={{xs: '2'}}>
+    <Tiles columns={{xs: 2}} gap={{xs: '2'}}>
       {children}
-    </Tile>
+    </Tiles>
   );
 }
 
 export function LargeSpacing() {
   return (
-    <Tile columns={{xs: 2}} gap={{xs: '10'}}>
+    <Tiles columns={{xs: 2}} gap={{xs: '10'}}>
       {children}
-    </Tile>
+    </Tiles>
   );
 }
 
@@ -53,8 +53,8 @@ export function ManyColumns() {
   ));
 
   return (
-    <Tile columns={{xs: 5}} gap={{xs: '2'}}>
+    <Tiles columns={{xs: 5}} gap={{xs: '2'}}>
       {children}
-    </Tile>
+    </Tiles>
   );
 }

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

@@ -4,7 +4,7 @@ import type {
   SpacingSpaceScale,
 } from '@shopify/polaris-tokens';
 
-import styles from './Tile.scss';
+import styles from './Tiles.scss';
 
 type Columns = {
   [Breakpoint in BreakpointsAlias]?: number | string;
@@ -14,7 +14,7 @@ type Gap = {
   [Breakpoint in BreakpointsAlias]?: SpacingSpaceScale;
 };
 
-export interface TileProps {
+export interface TilesProps {
   /** Elements to display inside tile */
   children: React.ReactNode;
   /** Adjust spacing between elements */
@@ -23,7 +23,7 @@ export interface TileProps {
   columns?: Columns;
 }
 
-export const Tile = ({children, gap, columns}: TileProps) => {
+export const Tiles = ({children, gap, columns}: TilesProps) => {
   const style = {
     '--pc-tile-gap-xs': gap?.xs ? `var(--p-space-${gap?.xs})` : undefined,
     '--pc-tile-gap-sm': gap?.sm ? `var(--p-space-${gap?.sm})` : undefined,
@@ -38,7 +38,7 @@ export const Tile = ({children, gap, columns}: TileProps) => {
   } as React.CSSProperties;
 
   return (
-    <div className={styles.Tile} style={style}>
+    <div className={styles.Tiles} style={style}>
       {children}
     </div>
   );

polaris-react/src/components/Tiles/index.ts

@@ -0,0 +1 @@
+export * from './Tiles';

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

@@ -1,26 +1,26 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
-import {Tile} from '../Tile';
+import {Tiles} from '../Tiles';
 
 const Children = () => <p>This is a tile</p>;
 
-describe('<Tile />', () => {
+describe('<Tiles />', () => {
   it('renders children', () => {
     const tile = mountWithApp(
-      <Tile columns={{xs: 2, sm: 2, md: 2, lg: 2, xl: 2}} gap={{xs: '2'}}>
+      <Tiles columns={{xs: 2, sm: 2, md: 2, lg: 2, xl: 2}} gap={{xs: '2'}}>
         <Children />
-      </Tile>,
+      </Tiles>,
     );
 
     expect(tile).toContainReactComponent(Children);
   });
 
   it('uses custom properties when passed in', () => {
     const tile = mountWithApp(
-      <Tile columns={{xs: 2, lg: 2}} gap={{xs: '2'}}>
+      <Tiles columns={{xs: 2, lg: 2}} gap={{xs: '2'}}>
         <Children />
-      </Tile>,
+      </Tiles>,
     );
 
     expect(tile).toContainReactComponent('div', {

polaris-react/src/index.ts

@@ -375,8 +375,8 @@ export type {TextStyleProps} from './components/TextStyle';
 export {Thumbnail} from './components/Thumbnail';
 export type {ThumbnailProps} from './components/Thumbnail';
 
-export {Tile} from './components/Tile';
-export type {TileProps} from './components/Tile';
+export {Tiles} from './components/Tiles';
+export type {TilesProps} from './components/Tiles';
 
 export {Toast} from './components/Toast';
 export type {ToastProps} from './components/Toast';

polaris.shopify.com/content/components/tile/index.md

@@ -1,5 +1,5 @@
 ---
-title: Tile
+title: Tiles
 description: Create complex layouts based on [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/grid).
 category: Structure
 keywords:
@@ -8,8 +8,8 @@ status:
   value: Alpha
   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: tile-with-spacing.tsx
+  - fileName: tiles-with-spacing.tsx
     title: With spacing
-  - fileName: tile-with-columns.tsx
+  - fileName: tiles-with-columns.tsx
     title: With columns
 ---

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Tile, Text} from '@shopify/polaris';
+import {Tiles, Text} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -21,14 +21,14 @@ const children = Array.from(Array(8)).map((ele, index) => (
   </div>
 ));
 
-function TileWithColumnsExample() {
+function TilesWithColumnsExample() {
   return (
     <div style={{width: '500px'}}>
-      <Tile columns={{xs: 4}} gap={{xs: '2'}}>
+      <Tiles columns={{xs: 4}} gap={{xs: '2'}}>
         {children}
-      </Tile>
+      </Tiles>
     </div>
   );
 }
 
-export default withPolarisExample(TileWithColumnsExample);
+export default withPolarisExample(TilesWithColumnsExample);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import {Tile, Text} from '@shopify/polaris';
+import {Tiles, Text} from '@shopify/polaris';
 
 import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
@@ -21,14 +21,14 @@ const children = Array.from(Array(2)).map((ele, index) => (
   </div>
 ));
 
-function TileWithSpacingExample() {
+function TilesWithSpacingExample() {
   return (
     <div style={{width: '500px'}}>
-      <Tile columns={{xs: 1}} gap={{xs: '5'}}>
+      <Tiles columns={{xs: 1}} gap={{xs: '5'}}>
         {children}
-      </Tile>
+      </Tiles>
     </div>
   );
 }
 
-export default withPolarisExample(TileWithSpacingExample);
+export default withPolarisExample(TilesWithSpacingExample);