[List] Add spacing property (#7939)

WHY are these changes introduced?

This PR is a follow up ofcompact list the conversation about having a more 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.

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 | | - | - | | | |

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

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

🎩 checklist

• [ ] Tested on mobile
• [x] Tested on multiple browsers
• [ ] Tested for accessibility
• [ ] Updated the component's README.md with documentation changes
• [ ] Tophatted documentation changes in the style guide

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

WHY are these changes introduced?

This PR is a follow up ofcompact list the conversation about having a more 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.

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 | | - | - | | | |

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

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

🎩 checklist

• [ ] Tested on mobile
• [x] Tested on multiple browsers
• [ ] Tested for accessibility
• [ ] Updated the component's README.md with documentation changes
• [ ] Tophatted documentation changes in the style guide

Closes https://github.com/Shopify/polaris/issues/5791

fix changeset message

Changes lgtm 👍 I ran the yarn get-props script for our style guide to pick up the new spacing prop for the List component. There were merge conflicts on the props.json file when I tried to do it so I had to rebase this branch off latest main.

Updated List component page:

Oh, thank you, I didn't know about this command, TIL :)

[List] reset last Item margin-bottom

[polaris.shopify.com] Add examples for List using spacing property

[List] Add spacing property

WHY are these changes introduced?

This PR is a follow up ofcompact list the conversation about having a more 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.

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 | | - | - | | | |

How to 🎩

🖥 Local development instructions 🗒 General tophatting guidelines 📄 Changelog guidelines

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

🎩 checklist

• [ ] Tested on mobile
• [x] Tested on multiple browsers
• [ ] Tested for accessibility
• [ ] Updated the component's README.md with documentation changes
• [ ] Tophatted documentation changes in the style guide