[Layout] Rebuild OptionList with layout primitives (#7958)

### WHY are these changes introduced?

Fixes #7952 

### WHAT is this pull request doing?

Updates `OptionList` to use new layout primitives.

One small visual change with this update due to replacing `margin` with
`padding` is a slight increase (`4px`) in spacing when there are
multiple sections in an `OptionList`. I don't think the added complexity
to keep this the same as current doesn't seem worth it, but happy to
hear other thoughts.

**Update:** Added a `Bleed` to resolve the spacing change. Feels hacky
but prevents the visual change.

Author: aveline

.changeset/slimy-years-tie.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Updated `OptionList` to use new layout primitives

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

@@ -9,11 +9,11 @@ import {isSection} from '../../utilities/options';
 import {arraysAreEqual} from '../../utilities/arrays';
 import {useUniqueId} from '../../utilities/unique-id';
 import {useDeepEffect} from '../../utilities/use-deep-effect';
-import {Box} from '../Box';
+import {Box, BoxProps} from '../Box';
 import {Text} from '../Text';
+import {Bleed} from '../Bleed';
 
 import {Option} from './components';
-import styles from './OptionList.scss';
 
 type Alignment = 'top' | 'center' | 'bottom';
 
@@ -130,24 +130,30 @@ export function OptionList({
           });
 
         return (
-          <li key={title || `noTitle-${sectionIndex}`}>
+          <Box
+            key={title || `noTitle-${sectionIndex}`}
+            as="li"
+            paddingBlockStart={isFirstOption ? undefined : '2'}
+          >
             {titleMarkup}
-            <ul
-              className={styles.Options}
-              id={`${id}-${sectionIndex}`}
-              role={role}
-            >
-              {optionsMarkup}
-            </ul>
-          </li>
+            <Bleed marginBlockStart={title ? undefined : '05'} marginInline="0">
+              <Box
+                as="ul"
+                id={`${id}-${sectionIndex}`}
+                role={role as BoxProps['role']}
+              >
+                {optionsMarkup}
+              </Box>
+            </Bleed>
+          </Box>
         );
       })
     : null;
 
   return (
-    <ul className={styles.OptionList} role={role}>
+    <Box as="ul" role={role as BoxProps['role']} padding="2">
       {optionsMarkup}
-    </ul>
+    </Box>
   );
 }
 

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

@@ -112,7 +112,6 @@ $control-vertical-adjustment: 2px;
 .Media {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include recolor-icon(var(--p-icon));
-  padding: 0 var(--p-space-2);
 }
 
 .verticalAlignTop {