[OptionList] consolidate se23 styles and logic

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

@@ -11,8 +11,6 @@ import {useDeepEffect} from '../../utilities/use-deep-effect';
 import {Box} from '../Box';
 import type {BoxProps} from '../Box';
 import {Text} from '../Text';
-import {Bleed} from '../Bleed';
-import {useFeatures} from '../../utilities/features';
 import {BlockStack} from '../BlockStack';
 
 import {Option} from './components';
@@ -28,8 +26,6 @@ export interface OptionListProps {
   options?: OptionDescriptor[];
   /** Defines a specific role attribute for the list itself */
   role?: 'listbox' | 'combobox' | string;
-  /** Defines a specific role attribute for each option in the list */
-  optionRole?: string;
   /** Sections containing a header and related options */
   sections?: SectionDescriptor[];
   /** The selected options */
@@ -53,14 +49,12 @@ export function OptionList({
   selected,
   allowMultiple,
   role,
-  optionRole,
   verticalAlign,
   onChange,
   id: idProp,
   onPointerEnterOption,
   onFocusOption,
 }: OptionListProps) {
-  const {polarisSummerEditions2023} = useFeatures();
   const [normalizedOptions, setNormalizedOptions] = useState(
     createNormalizedOptions(options, sections, title),
   );
@@ -127,34 +121,16 @@ export function OptionList({
   const optionsMarkup = optionsExist
     ? 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
-                ? firstOptionBlockStartPadding
-                : sectionPaddingBlockStart
-            }
-            paddingInlineStart={
-              polarisSummerEditions2023 ? '1_5-experimental' : '2'
-            }
-            paddingBlockEnd={polarisSummerEditions2023 ? '1' : '2'}
-            paddingInlineEnd={
-              polarisSummerEditions2023 ? '1_5-experimental' : '2'
-            }
+            paddingBlockStart={isFirstOption ? '05' : '3'}
+            paddingInlineStart="1_5-experimental"
+            paddingBlockEnd="1"
+            paddingInlineEnd="1_5-experimental"
             borderColor="border-subdued"
-            borderBlockStartWidth={
-              !isFirstOption && !polarisSummerEditions2023 ? '1' : undefined
-            }
           >
-            <Text
-              as={polarisSummerEditions2023 ? titleLevel : 'p'}
-              variant="headingXs"
-            >
+            <Text as={titleLevel} variant="headingXs">
               {title}
             </Text>
           </Box>
@@ -177,72 +153,48 @@ export function OptionList({
                 select={isSelected}
                 allowMultiple={allowMultiple}
                 verticalAlign={verticalAlign}
-                role={optionRole}
                 onPointerEnter={handlePointerEnter}
                 onFocus={handleFocus}
               />
             );
           });
 
         const option = (
-          <Bleed
-            marginBlockStart={
-              title || polarisSummerEditions2023 ? undefined : '05'
-            }
+          <Box
+            as="ul"
+            id={`${id}-${sectionIndex}`}
+            role={role as BoxProps['role']}
           >
-            <Box
-              as="ul"
-              id={`${id}-${sectionIndex}`}
-              role={role as BoxProps['role']}
-            >
-              {optionsMarkup}
-            </Box>
-          </Bleed>
+            {optionsMarkup}
+          </Box>
         );
 
         // 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'
+            ? '1'
             : '0'
-          : '2';
+          : title
+          ? '05'
+          : '0';
 
         return (
           <Box
             key={title || `noTitle-${sectionIndex}`}
             as="li"
             paddingBlockStart={blockStartPadding}
           >
-            {polarisSummerEditions2023 ? (
-              <BlockStack gap={isFirstOption && sections ? undefined : '0'}>
-                {titleMarkup}
-                {option}
-              </BlockStack>
-            ) : (
-              <>
-                {titleMarkup}
-                {option}
-              </>
-            )}
+            <BlockStack gap={isFirstOption && sections ? undefined : '0'}>
+              {titleMarkup}
+              {option}
+            </BlockStack>
           </Box>
         );
       })
     : null;
 
   return (
-    <Box
-      as="ul"
-      role={role as BoxProps['role']}
-      padding={polarisSummerEditions2023 ? '1_5-experimental' : '2'}
-    >
+    <Box as="ul" role={role as BoxProps['role']} padding="1_5-experimental">
       {optionsMarkup}
     </Box>
   );