[List, DescriptionList] Change spacing to gap (#10270)

Closes #10269
Shopify · Aug 30, 2023 · b9bcaef · b9bcaef
1 parent abeef7a
commit b9bcaef
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 12 deletions.
diff --git a/.changeset/fast-suits-jog.md b/.changeset/fast-suits-jog.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Changed `spacing` prop to `gap` on `List` and `DescriptionList`
diff --git a/documentation/guides/migrating-from-v11-to-v12.md b/documentation/guides/migrating-from-v11-to-v12.md
@@ -105,3 +105,11 @@ Polaris v12.0.0 ([full release notes](https://github.com/Shopify/polaris/release
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Modal" --from="large" --to="size" --newValue="large"`
 
 `npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="Modal" --from="fullScreen" --to="size" --newValue="fullScreen"`
+
+**List**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="List" --from="spacing" --to="gap"`
+
+**DescriptionList**
+
+`npx @shopify/polaris-migrator react-rename-component-prop <path> --componentName="DescriptionList" --from="spacing" --to="gap"`
diff --git a/polaris-react/src/components/DescriptionList/DescriptionList.stories.tsx b/polaris-react/src/components/DescriptionList/DescriptionList.stories.tsx
@@ -33,7 +33,7 @@ export function Default() {
 export function Tight() {
   return (
     <DescriptionList
-      spacing="tight"
+      gap="tight"
       items={[
         {
           term: 'Logistics',

diff --git a/polaris-react/src/components/DescriptionList/DescriptionList.tsx b/polaris-react/src/components/DescriptionList/DescriptionList.tsx
@@ -16,13 +16,10 @@ export interface DescriptionListProps {
   /** Collection of items for list */
   items: Item[];
   /** Determines the spacing between list items */
-  spacing?: 'tight' | 'loose';
+  gap?: 'tight' | 'loose';
 }
 
-export function DescriptionList({
-  items,
-  spacing = 'loose',
-}: DescriptionListProps) {
+export function DescriptionList({items, gap = 'loose'}: DescriptionListProps) {
   // There's no good key to give React so using the index is a last resport.
   // we can't use the term/description value as it may be a react component
   // which can't be stringified
@@ -43,7 +40,7 @@ export function DescriptionList({
 
   const className = classNames(
     styles.DescriptionList,
-    spacing === 'tight' && styles.spacingTight,
+    gap === 'tight' && styles.spacingTight,
   );
 
   return <dl className={className}>{terms}</dl>;

diff --git a/polaris-react/src/components/List/List.stories.tsx b/polaris-react/src/components/List/List.stories.tsx
@@ -28,7 +28,7 @@ export function Numbered() {
 
 export function ExtraTight() {
   return (
-    <List spacing="extraTight">
+    <List gap="extraTight">
       <List.Item>Yellow shirt</List.Item>
       <List.Item>Red shirt</List.Item>
       <List.Item>Green shirt</List.Item>

diff --git a/polaris-react/src/components/List/List.tsx b/polaris-react/src/components/List/List.tsx
@@ -14,7 +14,7 @@ export interface ListProps {
    * Determines the space between list items
    * @default 'loose'
    */
-  spacing?: Spacing;
+  gap?: Spacing;
   /**
    * Type of list to display
    * @default 'bullet'
@@ -26,10 +26,10 @@ export interface ListProps {
 
 export const List: React.FunctionComponent<ListProps> & {
   Item: typeof Item;
-} = function List({children, spacing = 'loose', type = 'bullet'}: ListProps) {
+} = function List({children, gap = 'loose', type = 'bullet'}: ListProps) {
   const className = classNames(
     styles.List,
-    spacing && styles[variationName('spacing', spacing)],
+    gap && styles[variationName('spacing', gap)],
     type && styles[variationName('type', type)],
   );
 

diff --git a/polaris.shopify.com/pages/examples/list-extra-tight.tsx b/polaris.shopify.com/pages/examples/list-extra-tight.tsx
@@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 
 function ListExtraTightExample() {
   return (
-    <List spacing="extraTight">
+    <List gap="extraTight">
       <List.Item>Yellow shirt</List.Item>
       <List.Item>Red shirt</List.Item>
       <List.Item>Green shirt</List.Item>