[List] Add spacing property

Author: acidio

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

@@ -15,8 +15,6 @@
 }
 
 .Item {
-  margin-bottom: var(--p-space-2);
-
   &:last-child {
     margin-bottom: 0;
   }
@@ -25,3 +23,9 @@
     margin-top: var(--p-space-2);
   }
 }
+
+.spacingLoose {
+  .Item {
+    margin-bottom: var(--p-space-2);
+  }
+}

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>First item</List.Item>
+      <List.Item>Second item</List.Item>
+      <List.Item>Third Item</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)],
   );