[List] Add spacing property (#7939)

<!--
  ☝️How to write a good PR title:
- Prefix it with [ComponentName] (if applicable), for example: [Button]
  - Start with a verb, for example: Add, Delete, Improve, Fix…
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

### WHY are these changes introduced?

This PR is a follow up of[compact
list](https://shopify.slack.com/archives/C4Y8N30KD/p1670936155108179)
[the conversation about having a
more](https://shopify.slack.com/archives/C4Y8N30KD/p1671128757572269?thread_ts=1670952079.108219&cid=C4Y8N30KD)
for places in admin where we have limited space and where the page can
get really long because of the amount of items on it.


<details>
      <summary>Current example</summary>


![current](https://user-images.githubusercontent.com/551895/208129966-d3dd26e2-d694-4c03-93d1-fbd527ec32fa.png)

</details>

<details>
      <summary>Intended example</summary>


![intended](https://user-images.githubusercontent.com/551895/208129994-6efb0f36-4f38-469d-bbbb-5e25e6229a56.png)

</details>


<!--
  Context about the problem that’s being addressed.
-->

### WHAT is this pull request doing?

Adding a `spacing` property to the `List` component allowing us to have
a more compact version of the list.

The `spacing` options are `extraTight | loose`, the last been the
default one so it doesn't break current usage.

| Before | After |
| - | - |
|
![image](https://user-images.githubusercontent.com/551895/208134389-a6a621aa-fd05-449f-9c4a-65b1eb06d421.png)
|
![image](https://user-images.githubusercontent.com/551895/208134833-f401c315-87b0-4665-8bfd-bbeb1d02baae.png)
|

<!--
  Summary of the changes committed.

Before / after screenshots are appreciated for UI changes. Make sure to
include alt text that describes the screenshot.

If you include an animated gif showing your change, wrapping it in a
details tag is recommended. Gifs usually autoplay, which can cause
accessibility issues for people reviewing your PR:

    <details>
      <summary>Summary of your gif(s)</summary>
      <img src="..." alt="Description of what the gif shows">
    </details>
-->

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

<!--
  Give as much information as needed to experiment with the component
  in the playground.
-->

<details>
<summary>Copy-paste this code in
<code>playground/Playground.tsx</code>:</summary>

```jsx
import React from 'react';

import {List, Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      <List spacing="extraTight">
        <List.Item>Yellow shirt</List.Item>
        <List.Item>Red shirt</List.Item>
        <List.Item>Green shirt</List.Item>
      </List>
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [x] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [ ] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

Co-authored-by: Lo Kim <lo.kim@shopify.com>

Author: 2 people

.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);