acidio
Repos
12
Followers
14

Events

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

current

intended

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

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

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

Created at 3 weeks ago
delete branch
acidio delete branch list-component-spacing-prop
Created at 3 weeks ago
pull request closed
[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.

current

intended

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

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

Created at 3 weeks ago
issue comment
[List] Add spacing property

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

Created at 1 month ago

fix changeset message

Created at 1 month ago
issue comment
[List] Add spacing property

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

Created at 1 month ago

[List] reset last Item margin-bottom

Created at 1 month ago

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

Created at 1 month ago

[List] Add spacing property

Created at 1 month ago
pull request opened
[WIP][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.

current

intended

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

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

Created at 1 month ago
create branch
acidio create branch list-component-spacing-prop
Created at 1 month ago