[OptionList] Update spacing (#9867)

<!--
  ☝️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?

Fixes Shopify/archive-polaris-backlog-2024#1044
<!-- link to issue if one exists -->

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

### WHAT is this pull request doing?

Updates OptionList spacing to match ActionList


[Storybook](https://5d559397bae39100201eedc1-gdondovftm.chromatic.com/?path=/story/all-components-optionlist--with-sections&globals=polarisSummerEditions2023:true)

| before | after |
|---|---|
| <img width="756" alt="image"
src="https://github.com/Shopify/polaris/assets/8629173/f2498825-8362-41db-96c7-8e16dcd9e6ca">
| <img width="757" alt="image"
src="https://github.com/Shopify/polaris/assets/8629173/b73f1356-c45b-4cf9-9736-c93dc695e47b">
|
| | <img width="572" alt="image"
src="https://github.com/Shopify/polaris/assets/8629173/4cbea936-3537-4d3e-aec8-d73f2d4f2e51">
|

<!--
  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 {Page} from '../src';

export function Playground() {
  return (
    <Page title="Playground">
      {/* Add the code you want to test in here */}
    </Page>
  );
}
```

</details>

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] 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 <[email protected]>

polaris-react/src/components/OptionList/OptionList.stories.tsx

@@ -21,11 +21,13 @@ export default {
 export function Default() {
   const [selected, setSelected] = useState([]);
 
+  const handleChange = useCallback((value) => setSelected(value), []);
+
   return (
     <LegacyCard>
       <OptionList
         title="Inventory Location"
-        onChange={setSelected}
+        onChange={handleChange}
         options={[
           {value: 'byward_market', label: 'Byward Market'},
           {value: 'centretown', label: 'Centretown'},
@@ -42,11 +44,13 @@ export function Default() {
 export function Multiple() {
   const [selected, setSelected] = useState([]);
 
+  const handleChange = useCallback((value) => setSelected(value), []);
+
   return (
     <LegacyCard>
       <OptionList
         title="Manage sales channels availability"
-        onChange={setSelected}
+        onChange={handleChange}
         options={[
           {value: 'online_store', label: 'Online Store'},
           {value: 'messenger', label: 'Messenger'},
@@ -64,10 +68,12 @@ export function Multiple() {
 export function WithSections() {
   const [selected, setSelected] = useState([]);
 
+  const handleChange = useCallback((value) => setSelected(value), []);
+
   return (
     <LegacyCard>
       <OptionList
-        onChange={setSelected}
+        onChange={handleChange}
         sections={[
           {
             options: [
@@ -105,6 +111,8 @@ export function InAPopover() {
   const [selected, setSelected] = useState([]);
   const [popoverActive, setPopoverActive] = useState(true);
 
+  const handleChange = useCallback((value) => setSelected(value), []);
+
   const togglePopoverActive = useCallback(
     () => setPopoverActive((popoverActive) => !popoverActive),
     [],
@@ -125,18 +133,16 @@ export function InAPopover() {
       >
         <OptionList
           title="Inventory Location"
-          onChange={setSelected}
+          onChange={handleChange}
           options={[
             {
               value: 'byward_market',
               label: 'Byward Market',
-              active: true,
             },
             {value: 'centretown', label: 'Centretown'},
             {
               value: 'hintonburg',
               label: 'Hintonburg',
-              active: true,
             },
             {value: 'westboro', label: 'Westboro'},
             {value: 'downtown', label: 'Downtown'},
@@ -151,11 +157,13 @@ export function InAPopover() {
 export function WithDisabledOption() {
   const [selected, setSelected] = useState([]);
 
+  const handleChange = useCallback((value) => setSelected(value), []);
+
   return (
     <LegacyCard>
       <OptionList
         title="Inventory Location"
-        onChange={setSelected}
+        onChange={handleChange}
         options={[
           {value: 'byward_market', label: 'Byward Market'},
           {value: 'centretown', disabled: true, label: 'Centretown'},

polaris-react/src/components/OptionList/OptionList.tsx

@@ -128,14 +128,21 @@ export function OptionList({
     ? normalizedOptions.map(({title, options}, sectionIndex) => {
         const isFirstOption = sectionIndex === 0;
         const sectionPaddingBlockStart = polarisSummerEditions2023 ? '3' : '4';
+        const firstOptionBlockStartPadding = polarisSummerEditions2023
+          ? '05'
+          : '2';
         const titleLevel = isFirstOption ? 'h2' : 'h3';
         const titleMarkup = title ? (
           <Box
-            paddingBlockStart={isFirstOption ? '2' : sectionPaddingBlockStart}
+            paddingBlockStart={
+              isFirstOption
+                ? firstOptionBlockStartPadding
+                : sectionPaddingBlockStart
+            }
             paddingInlineStart={
               polarisSummerEditions2023 ? '1_5-experimental' : '2'
             }
-            paddingBlockEnd="2"
+            paddingBlockEnd={polarisSummerEditions2023 ? '1' : '2'}
             paddingInlineEnd={
               polarisSummerEditions2023 ? '1_5-experimental' : '2'
             }
@@ -193,14 +200,29 @@ export function OptionList({
           </Bleed>
         );
 
+        // eslint-disable-next-line no-nested-ternary
+        const blockStartPadding = isFirstOption
+          ? // eslint-disable-next-line no-nested-ternary
+            polarisSummerEditions2023
+            ? title
+              ? '1'
+              : '0'
+            : undefined
+          : // eslint-disable-next-line no-nested-ternary
+          polarisSummerEditions2023
+          ? title
+            ? '05'
+            : '0'
+          : '2';
+
         return (
           <Box
             key={title || `noTitle-${sectionIndex}`}
             as="li"
-            paddingBlockStart={isFirstOption ? undefined : '2'}
+            paddingBlockStart={blockStartPadding}
           >
             {polarisSummerEditions2023 ? (
-              <VerticalStack gap={isFirstOption && sections ? undefined : '1'}>
+              <VerticalStack gap={isFirstOption && sections ? undefined : '0'}>
                 {titleMarkup}
                 {option}
               </VerticalStack>

polaris-react/src/components/OptionList/components/Option/Option.scss

@@ -81,6 +81,12 @@ $control-vertical-adjustment: 2px;
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
+
+    &.select,
+    &.select:hover:not(.disabled),
+    &.active {
+      font-weight: var(--p-font-weight-semibold);
+    }
   }
 }