Rename Columns to HorizontalGrid (#8937)

### WHY are these changes introduced?

With the UI consolidation effort happening we are aligning component
names and properties across repositories. This is a first step to align
component names.

### WHAT is this pull request doing?

**⚠️ Breaking change** to rename `Columns` to `HorizontalGrid`

---------

Co-authored-by: Lo Kim <[email protected]>
Co-authored-by: Chloe Rice <[email protected]>

Author: 3 people

.changeset/loud-clouds-kiss.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Renamed `Columns` to `HorizontalGrid`

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

@@ -1,6 +1,6 @@
 @import '../../styles/common';
 
-.Columns {
+.HorizontalGrid {
   @include responsive-props('columns', 'gap', 'gap');
   @include responsive-props(
     'columns',

polaris-react/src/components/Columns/Columns.scss renamed to polaris-react/src/components/HorizontalGrid/HorizontalGrid.scss

@@ -1,31 +1,31 @@
 import React from 'react';
 import type {ComponentMeta} from '@storybook/react';
-import {Button, Columns, Page} from '@shopify/polaris';
+import {Button, HorizontalGrid, Page} from '@shopify/polaris';
 import {ChevronLeftMinor, ChevronRightMinor} from '@shopify/polaris-icons';
 
 export default {
-  component: Columns,
-} as ComponentMeta<typeof Columns>;
+  component: HorizontalGrid,
+} as ComponentMeta<typeof HorizontalGrid>;
 
 export function Default() {
   return (
     <Page fullWidth>
-      <Columns>
+      <HorizontalGrid>
         <div style={{background: 'aquamarine'}}>one</div>
         <div style={{background: 'aquamarine'}}>two</div>
         <div style={{background: 'aquamarine'}}>three</div>
         <div style={{background: 'aquamarine'}}>four</div>
         <div style={{background: 'aquamarine'}}>five</div>
         <div style={{background: 'aquamarine'}}>six</div>
-      </Columns>
+      </HorizontalGrid>
     </Page>
   );
 }
 
-export function WithTemplateColumns() {
+export function WithTemplateHorizontalGrid() {
   return (
     <Page fullWidth>
-      <Columns
+      <HorizontalGrid
         columns={{
           xs: '1.5fr 0.5fr',
           sm: '2fr 1fr',
@@ -39,15 +39,15 @@ export function WithTemplateColumns() {
         <div style={{background: 'aquamarine'}}>Column four</div>
         <div style={{background: 'aquamarine'}}>Column five</div>
         <div style={{background: 'aquamarine'}}>Column six</div>
-      </Columns>
+      </HorizontalGrid>
     </Page>
   );
 }
 
 export function WithMixedPropTypes() {
   return (
     <Page fullWidth>
-      <Columns
+      <HorizontalGrid
         columns={{xs: 2, sm: '2fr 1fr', md: '2fr 1fr 1fr', lg: 6}}
         gap={{xs: '2'}}
       >
@@ -57,73 +57,73 @@ export function WithMixedPropTypes() {
         <div style={{background: 'aquamarine'}}>four</div>
         <div style={{background: 'aquamarine'}}>five</div>
         <div style={{background: 'aquamarine'}}>six</div>
-      </Columns>
+      </HorizontalGrid>
     </Page>
   );
 }
 
 export function WithGap() {
   return (
     <Page fullWidth>
-      <Columns columns={{xs: 3}} gap="5">
+      <HorizontalGrid columns={{xs: 3}} gap="5">
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>Column two</div>
         <div style={{background: 'aquamarine'}}>Column three</div>
-      </Columns>
+      </HorizontalGrid>
     </Page>
   );
 }
 
 export function WithResponsiveGap() {
   return (
     <Page fullWidth>
-      <Columns
+      <HorizontalGrid
         columns={{xs: 3}}
         gap={{xs: '025', sm: '4', md: '6', lg: '8', xl: '10'}}
       >
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>Column two</div>
         <div style={{background: 'aquamarine'}}>Column three</div>
-      </Columns>
+      </HorizontalGrid>
     </Page>
   );
 }
 
 export function WithFreeAndFixedWidths() {
   return (
     <Page fullWidth>
-      <Columns columns={{xs: '1fr auto auto'}} gap={{xs: '05'}}>
+      <HorizontalGrid columns={{xs: '1fr auto auto'}} gap={{xs: '05'}}>
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>
           <Button icon={ChevronLeftMinor} accessibilityLabel="Previous" />
         </div>
         <div style={{background: 'aquamarine'}}>
           <Button icon={ChevronRightMinor} accessibilityLabel="Next" />
         </div>
-      </Columns>
+      </HorizontalGrid>
     </Page>
   );
 }
 
-export function WithResponsiveColumns() {
+export function WithResponsiveHorizontalGrid() {
   return (
     <Page fullWidth>
-      <Columns columns={{xs: 1, sm: 3}} gap="4">
+      <HorizontalGrid columns={{xs: 1, sm: 3}} gap="4">
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>Column two</div>
         <div style={{background: 'aquamarine'}}>Column three</div>
-      </Columns>
+      </HorizontalGrid>
     </Page>
   );
 }
 
 export function WithResponsiveColumnAlisases() {
   return (
     <Page fullWidth>
-      <Columns columns={['oneThird', 'twoThirds']} gap="4">
+      <HorizontalGrid columns={['oneThird', 'twoThirds']} gap="4">
         <div style={{background: 'aquamarine'}}>Column one</div>
         <div style={{background: 'aquamarine'}}>Column two</div>
-      </Columns>
+      </HorizontalGrid>
     </Page>
   );
 }

polaris-react/src/components/Columns/Columns.stories.tsx renamed to polaris-react/src/components/HorizontalGrid/HorizontalGrid.stories.tsx

@@ -8,15 +8,15 @@ import {
 } from '../../utilities/css';
 import type {ResponsiveValue, ResponsiveProp} from '../../utilities/css';
 
-import styles from './Columns.scss';
+import styles from './HorizontalGrid.scss';
 
 type ColumnsAlias = 'oneThird' | 'oneHalf' | 'twoThirds';
 type ColumnsType = number | string | ColumnsAlias[];
 type Columns = ResponsiveProp<ColumnsType>;
 type Gap = ResponsiveProp<SpacingSpaceScale>;
-type ColumnsAlignItems = 'start' | 'end' | 'center';
+type HorizontalGridAlignItems = 'start' | 'end' | 'center';
 
-export interface ColumnsProps extends React.AriaAttributes {
+export interface HorizontalGridProps extends React.AriaAttributes {
   children?: React.ReactNode;
   /** The number of columns to display. Accepts either a single value or an object of values for different screen sizes.
    * @example
@@ -34,38 +34,48 @@ export interface ColumnsProps extends React.AriaAttributes {
    * @example
    * alignItems='start'
    */
-  alignItems?: ColumnsAlignItems;
+  alignItems?: HorizontalGridAlignItems;
 }
 
-export function Columns({children, columns, gap, alignItems}: ColumnsProps) {
+export function HorizontalGrid({
+  children,
+  columns,
+  gap,
+  alignItems,
+}: HorizontalGridProps) {
   const style = {
     ...getResponsiveValue(
       'columns',
       'grid-template-columns',
-      formatColumns(columns),
+      formatHorizontalGrid(columns),
     ),
     ...getResponsiveProps('columns', 'gap', 'space', gap),
     '--pc-columns-align-items': alignItems,
   } as React.CSSProperties;
 
   return (
-    <div className={styles.Columns} style={sanitizeCustomProperties(style)}>
+    <div
+      className={styles.HorizontalGrid}
+      style={sanitizeCustomProperties(style)}
+    >
       {children}
     </div>
   );
 }
 
-function formatColumns(columns?: Columns): ResponsiveValue {
+function formatHorizontalGrid(columns?: Columns): ResponsiveValue {
   if (
     typeof columns === 'object' &&
     columns !== null &&
     !Array.isArray(columns)
   ) {
     return Object.fromEntries(
-      Object.entries(columns).map(([breakpointAlias, breakpointColumns]) => [
-        breakpointAlias,
-        getColumnValue(breakpointColumns),
-      ]),
+      Object.entries(columns).map(
+        ([breakpointAlias, breakpointHorizontalGrid]) => [
+          breakpointAlias,
+          getColumnValue(breakpointHorizontalGrid),
+        ],
+      ),
     );
   }
 

polaris-react/src/components/Columns/Columns.tsx renamed to polaris-react/src/components/HorizontalGrid/HorizontalGrid.tsx

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

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

@@ -1,12 +1,12 @@
 import React from 'react';
 import {mountWithApp} from 'tests/utilities';
 
-import {Columns} from '..';
+import {HorizontalGrid} from '..';
 
-describe('Columns', () => {
+describe('HorizontalGrid', () => {
   it('only renders custom properties that match the properties passed in', () => {
     const columns = mountWithApp(
-      <Columns gap={{md: '1'}} alignItems="start" />,
+      <HorizontalGrid gap={{md: '1'}} alignItems="start" />,
     );
 
     expect(columns).toContainReactComponent('div', {
@@ -19,7 +19,7 @@ describe('Columns', () => {
 
   it('formats string columns', () => {
     const columns = mountWithApp(
-      <Columns columns={{xs: '1fr 1fr', lg: '1.5fr 0.5fr'}} />,
+      <HorizontalGrid columns={{xs: '1fr 1fr', lg: '1.5fr 0.5fr'}} />,
     );
 
     expect(columns).toContainReactComponent('div', {
@@ -31,7 +31,7 @@ describe('Columns', () => {
   });
 
   it('formats number columns', () => {
-    const columns = mountWithApp(<Columns columns={{xs: 1, md: 4}} />);
+    const columns = mountWithApp(<HorizontalGrid columns={{xs: 1, md: 4}} />);
 
     expect(columns).toContainReactComponent('div', {
       style: {
@@ -43,7 +43,7 @@ describe('Columns', () => {
 
   it('formats alias columns', () => {
     const columns = mountWithApp(
-      <Columns
+      <HorizontalGrid
         columns={{xs: ['oneHalf', 'oneHalf'], md: ['oneThird', 'twoThirds']}}
       />,
     );

polaris-react/src/components/Columns/tests/Columns.test.tsx renamed to polaris-react/src/components/HorizontalGrid/tests/HorizontalGrid.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import {Box} from '../../../Box';
 import {CloseButton} from '../CloseButton';
-import {Columns} from '../../../Columns';
+import {HorizontalGrid} from '../../../HorizontalGrid';
 import {HorizontalStack} from '../../../HorizontalStack';
 import {Text} from '../../../Text';
 
@@ -41,7 +41,7 @@ export function Header({
       paddingInlineEnd="5"
       borderBlockEnd="divider"
     >
-      <Columns columns={{xs: '1fr auto'}} gap="4">
+      <HorizontalGrid columns={{xs: '1fr auto'}} gap="4">
         <HorizontalStack gap="4" blockAlign="center">
           <Text id={id} as="h2" variant="headingLg" breakWord>
             {children}
@@ -52,7 +52,7 @@ export function Header({
           titleHidden={titleHidden}
           onClick={onClose}
         />
-      </Columns>
+      </HorizontalGrid>
     </Box>
   );
 }

polaris-react/src/components/Modal/components/Header/Header.tsx

@@ -8,7 +8,7 @@ import {Bleed} from '../Bleed';
 import {Button, buttonsFrom} from '../Button';
 import {ButtonGroup} from '../ButtonGroup';
 import {Checkbox} from '../Checkbox';
-import {Columns} from '../Columns';
+import {HorizontalGrid} from '../HorizontalGrid';
 import {HorizontalStack} from '../HorizontalStack';
 import type {HorizontalStackProps} from '../HorizontalStack';
 import {Popover} from '../Popover';
@@ -290,8 +290,8 @@ class BaseResourceItem extends Component<CombinedProps, State> {
         paddingInlineEnd={{xs: '4', sm: '5'}}
         zIndex="var(--pc-resource-item-content-stacking-order)"
       >
-        <Columns columns={{xs: '1fr auto'}}>
-          <Columns
+        <HorizontalGrid columns={{xs: '1fr auto'}}>
+          <HorizontalGrid
             columns={{xs: media || selectable ? 'auto 1fr' : '1fr'}}
             gap="5"
           >
@@ -309,10 +309,10 @@ class BaseResourceItem extends Component<CombinedProps, State> {
                 {children}
               </Box>
             </HorizontalStack>
-          </Columns>
+          </HorizontalGrid>
           {actionsMarkup}
           {disclosureMarkup}
-        </Columns>
+        </HorizontalGrid>
       </Box>
     );
 

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

@@ -127,8 +127,8 @@ export type {CollapsibleProps} from './components/Collapsible';
 export {ColorPicker} from './components/ColorPicker';
 export type {ColorPickerProps} from './components/ColorPicker';
 
-export {Columns} from './components/Columns';
-export type {ColumnsProps} from './components/Columns';
+export {HorizontalGrid} from './components/HorizontalGrid';
+export type {HorizontalGridProps} from './components/HorizontalGrid';
 
 export {Combobox} from './components/Combobox';
 export type {ComboboxProps} from './components/Combobox';