[List] Add spacing property

.changeset/weak-insects-jump.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added support for `spacing` prop to List component allowing for a more compact list

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

@@ -15,13 +15,17 @@
 }
 
 .Item {
-  margin-bottom: var(--p-space-2);
-
-  &:last-child {
-    margin-bottom: 0;
-  }
-
   .List:first-child {
     margin-top: var(--p-space-2);
   }
 }
+
+.spacingLoose {
+  .Item {
+    margin-bottom: var(--p-space-2);
+  }
+}
+
+.Item:last-child {
+  margin-bottom: 0;
+}

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

@@ -25,3 +25,13 @@ export function Numbered() {
     </List>
   );
 }
+
+export function ExtraTight() {
+  return (
+    <List spacing="extraTight">
+      <List.Item>Yellow shirt</List.Item>
+      <List.Item>Red shirt</List.Item>
+      <List.Item>Green shirt</List.Item>
+    </List>
+  );
+}

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

@@ -7,7 +7,14 @@ import styles from './List.scss';
 
 type Type = 'bullet' | 'number';
 
+type Spacing = 'extraTight' | 'loose';
+
 export interface ListProps {
+  /**
+   * Determines the space between list items
+   * @default 'loose'
+   */
+  spacing?: Spacing;
   /**
    * Type of list to display
    * @default 'bullet'
@@ -19,9 +26,10 @@ export interface ListProps {
 
 export const List: React.FunctionComponent<ListProps> & {
   Item: typeof Item;
-} = function List({children, type = 'bullet'}: ListProps) {
+} = function List({children, spacing = 'loose', type = 'bullet'}: ListProps) {
   const className = classNames(
     styles.List,
+    spacing && styles[variationName('spacing', spacing)],
     type && styles[variationName('type', type)],
   );
 

polaris.shopify.com/content/components/list.md

@@ -16,6 +16,9 @@ examples:
   - fileName: list-numbered.tsx
     title: Numbered
     description: Use for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.
+  - fileName: list-extra-tight.tsx
+    title: Extra Tight
+    description: Use when there is limited space for a text-only list of related items when an inherent order, priority, or sequence needs to be communicated.
 ---
 
 ## Best practices

polaris.shopify.com/pages/examples/list-extra-tight.tsx

@@ -0,0 +1,15 @@
+import {List} from '@shopify/polaris';
+import React from 'react';
+import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
+
+function ListExtraTightExample() {
+  return (
+    <List spacing="extraTight">
+      <List.Item>Yellow shirt</List.Item>
+      <List.Item>Red shirt</List.Item>
+      <List.Item>Green shirt</List.Item>
+    </List>
+  );
+}
+
+export default withPolarisExample(ListExtraTightExample);