Add vertical adjustment to OptionList control items

[sarahill]

WHY are these changes introduced?

Inconsistent alignment of controls between OptionList and ChoiceList items. In OptionList items are center-aligned which causes things to look off when the items wrap.

Fixes #1310

WHAT is this pull request doing?

Adds vertical adjustment to OptionList control items

Before	After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React, {useCallback, useState} from 'react';
import {Page, Card, OptionList, ChoiceList} from '../src';

export function Playground() {
  const [selected, setSelected] = useState(['hidden']);

  const handleChange = useCallback((value) => setSelected(value), []);

  return (
    <Page title="Playground">
      <Card>
        <OptionList
          title="Inventory Location"
          onChange={setSelected}
          options={[
            {
              value: 'byward_market',
              label:
                'Currently, items that are two lines have the checkboxes vertically aligned to the middle of the text. They should be aligned to the top to be consistent with ChoiceList.',
            },
            {
              value: 'centretown',
              label:
                'Our color usage guidelines indicate that the color Indigo should be used to signify active/highlighted states. Indigo is active and should be shown to indicate active states.',
            },
            {value: 'hintonburg', label: 'Hintonburg'},
            {value: 'westboro', label: 'Westboro'},
            {value: 'downtown', label: 'Downtown'},
          ]}
          selected={selected}
          allowMultiple
        />
      </Card>

      <Card sectioned>
        <ChoiceList
          allowMultiple
          title="While the customer is checking out"
          choices={[
            {
              label:
                'Use the shipping address as the billing address by default',
              value: 'shipping',
              helpText:
                'Reduces the number of fields required to check out. The billing address can still be edited.',
            },
            {
              label:
                'Currently, items that are two lines have the checkboxes vertically aligned to the middle of the text. They should be aligned to the top to be consistent with ChoiceList.',
              value: 'confirmation',
              helpText:
                'Customers must review their order details before purchasing.',
            },
          ]}
          selected={selected}
          onChange={handleChange}
        />
      </Card>
    </Page>
  );
}

🎩 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, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

💦 Potential splash zone of changes introduced to src/**/*.tsx in this pull request:

Files modified	3
Files potentially affected	12

Details

All files potentially affected (total: 12)

• /src/components/Choice/Choice.tsx
• /src/components/Checkbox/Checkbox.tsx
• /src/components/ChoiceList/ChoiceList.tsx
• /src/components/ResourceItem/ResourceItem.tsx
• /src/components/ResourceList/ResourceList.tsx
• /src/components/ResourceList/components/CheckableButton/CheckableButton.tsx
• /src/components/ResourceList/components/BulkActions/BulkActions.tsx
• /src/components/RadioButton/RadioButton.tsx
• /src/components/OptionList/components/Option/Option.tsx
• /src/components/OptionList/OptionList.tsx
• /src/components/Autocomplete/Autocomplete.tsx
• /src/components/Autocomplete/components/ComboBox/ComboBox.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/Choice/Choice.scss (total: 8)

Files potentially affected (total: 8)

• /src/components/Choice/Choice.tsx
• /src/components/Checkbox/Checkbox.tsx
• /src/components/ChoiceList/ChoiceList.tsx
• /src/components/ResourceItem/ResourceItem.tsx
• /src/components/ResourceList/ResourceList.tsx
• /src/components/ResourceList/components/CheckableButton/CheckableButton.tsx
• /src/components/ResourceList/components/BulkActions/BulkActions.tsx
• /src/components/RadioButton/RadioButton.tsx

🎨 src/components/OptionList/components/Option/Option.scss (total: 4)

Files potentially affected (total: 4)

• /src/components/OptionList/components/Option/Option.tsx
• /src/components/OptionList/OptionList.tsx
• /src/components/Autocomplete/Autocomplete.tsx
• /src/components/Autocomplete/components/ComboBox/ComboBox.tsx

---

This comment automatically updates as changes are made to this pull request.
Feedback, troubleshooting: open an issue or reach out on Slack in #polaris-tooling.

[kaelig]

A couple of comments — I haven't tophatted yet.

[dleroux]

🎩 looks good.