[ActionList] Make spacing consistent

[AndrewMusgrave]

WHY are these changes introduced?

Fixes linked issue (see mentions below)

WHAT is this pull request doing?

Creating consistent spacing between the list, items, sections & titles.

Screenies

How to 🎩

Code below displaying a bunch of different combinations between sections/items/section titles

Copy-paste this code in playground/Playground.tsx:

import React, {useState, useCallback} from 'react';
import {ImportMinor, ExportMinor} from '@shopify/polaris-icons';

import {Page, Popover, Button, ActionList} from '../src';

const actionListProps = [
  {
    sections: [
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
    ],
  },
  {
    sections: [
      {
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: '',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: 'Test',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
    ],
  },
  {
    items: [{content: 'Import file', icon: ImportMinor}],
    sections: [
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
    ],
  },
  {
    items: [
      {content: 'Import file', icon: ImportMinor},
      {content: 'Export file', icon: ExportMinor},
    ],
    sections: [
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: 'File options',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: '',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
      {
        title: 'Test',
        items: [
          {content: 'Import file', icon: ImportMinor},
          {content: 'Export file', icon: ExportMinor},
        ],
      },
    ],
  },
  {
    items: [
      {content: 'Import file', icon: ImportMinor},
      {content: 'Export file', icon: ExportMinor},
    ],
  },
];

export function Playground() {
  return (
    <Page title="Playground">
      {Array.from({length: actionListProps.length}).map((_, index) => (
        <SectionedActionListExample index={index} key={index} />
      ))}
    </Page>
  );
}

function SectionedActionListExample({index}: any) {
  const [active, setActive] = useState(false);

  const toggleActive = useCallback(() => setActive((active) => !active), []);

  const activator = (
    <Button onClick={toggleActive} disclosure>
      More actions
    </Button>
  );

  return (
    <Popover active={active} activator={activator} onClose={toggleActive}>
      <ActionList {...actionListProps[index]} />
    </Popover>
  );
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, ping @ sarahill to update the Polaris UI kit

[github-actions]

size-limit report

Path	Size
cjs	142.4 KB (+0.03% 🔺)
esm	96.16 KB (+0.06% 🔺)
esnext	139.35 KB (+0.06% 🔺)
css	33.73 KB (+0.04% 🔺)

[danielle-dsouza]

Looks amazing!

[AndrewMusgrave]

@sarahill This may require some UI kit changes