[ActionList] Consolidate se23 logic and styles (#9911)

### WHY are these changes introduced? Resolves #9910 . ### WHAT is this pull request doing? Removes se23 beta conditional logic for `ActionList`. Consolidates se23 beta styles for `ActionList`. ### How to 🎩 [Storybook](https://5d559397bae39100201eedc1-xfazrnicvb.chromatic.com/?path=/story/all-components-actionlist--all) 🖥 [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) ### 🎩 checklist - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] 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
Shopify · Aug 10, 2023 · 053dba2 · 053dba2
1 parent 8259ea7
commit 053dba2
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 133 deletions.
diff --git a/.changeset/tall-chicken-repeat.md b/.changeset/tall-chicken-repeat.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': major
 ---
 
-Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`
+Removed Summer Editions experimental styles and code for the following components: `Avatar`, `AccountConnection`, `ActionList`
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
@@ -5,7 +5,7 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
 
 .Item {
   // stylelint-disable -- Polaris component custom properties
-  --pc-action-list-item-min-height: var(--p-space-10);
+  --pc-action-list-item-min-height: var(--p-space-8);
   &.default {
     --pc-action-list-image-size: 20px;
   }
@@ -16,102 +16,62 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include unstyled-button;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring;
-  display: block;
+  @include focus-ring($size: 'wide');
+  display: flex;
+  align-items: center;
   width: 100%;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-height: var(--pc-action-list-item-min-height);
   text-align: left;
   text-decoration: none;
   cursor: pointer;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: var(--pc-action-list-item-vertical-padding) var(--p-space-2);
-  border-radius: var(--p-border-radius-1);
+  padding: var(--p-space-1_5-experimental);
+  border-radius: var(--p-border-radius-2);
   border-top: var(--p-border-width-1) solid transparent;
   color: inherit;
 
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    @include focus-ring($size: 'wide');
-    /* stylelint-disable-next-line polaris/conventions/polaris/custom-property-allowed-list -- se23 */
-    --pc-action-list-item-min-height: var(--p-space-8);
-    padding: var(--p-space-1_5-experimental);
-    border-radius: var(--p-border-radius-2);
-    align-items: center;
-    display: flex;
-  }
-
   @media (forced-colors: active) {
     border: var(--p-border-width-1) solid transparent;
   }
 
   &:hover {
-    background-color: var(--p-color-bg-hover);
+    background-color: var(--p-color-bg-subdued-hover);
     text-decoration: none;
     outline: var(--p-border-width-3) solid transparent;
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
-    }
   }
 
   &:active {
-    background-color: var(--p-color-bg-active);
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
-    }
+    background-color: var(--p-color-bg-subdued-hover);
 
     svg {
-      fill: var(--p-color-icon-interactive);
-
-      #{$se23} & {
-        fill: var(--p-color-icon);
-      }
+      fill: var(--p-color-icon);
     }
   }
 
   &:focus-visible:not(:active) {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-    outline: var(--p-border-width-3) solid transparent;
-
-    #{$se23} & {
-      // stylelint-disable-next-line -- se23
-      @include no-focus-ring;
-      background-color: var(--p-color-bg);
-      outline: var(--p-border-width-2) solid
-        var(--p-color-border-interactive-focus);
-    }
+    @include no-focus-ring;
+    background-color: var(--p-color-bg);
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
   }
 
   &:visited {
     color: inherit;
   }
 
   &.active {
-    background-color: var(--p-color-bg-interactive-selected);
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-subdued-active);
-      font-weight: var(--p-font-weight-semibold);
-    }
+    background-color: var(--p-color-bg-subdued-active);
+    font-weight: var(--p-font-weight-semibold);
 
     svg {
-      fill: var(--p-color-icon-interactive);
-
-      #{$se23} & {
-        fill: var(--p-color-icon-primary);
-      }
+      fill: var(--p-color-icon-primary);
     }
 
     &::before {
       // stylelint-disable-next-line -- alignment for left tab style https://github.com/Shopify/polaris/pull/3619
       @include list-selected-indicator;
-
-      #{$se23} & {
-        display: none;
-      }
+      display: none;
     }
   }
 
@@ -120,31 +80,16 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
 
     svg {
       fill: var(--p-color-icon-critical);
-
-      #{$se23} & {
-        // Specificity bump
-        fill: var(--p-color-icon-critical);
-      }
     }
 
     &:hover {
       background-color: var(--p-color-bg-critical-subdued-hover);
-
-      #{$se23} & {
-        // Specificity bump
-        background-color: var(--p-color-bg-critical-subdued-hover);
-      }
     }
 
     // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY
     &:active,
     &.active {
       background-color: var(--p-color-bg-critical-subdued-active);
-
-      #{$se23} & {
-        // Specificity bump
-        background-color: var(--p-color-bg-critical-subdued-active);
-      }
     }
   }
 
@@ -164,11 +109,6 @@ $indented-item-width: calc(100% - #{$indented-item-margin});
     .Prefix svg,
     .Suffix svg {
       fill: var(--p-color-icon-disabled);
-
-      #{$se23} & {
-        // Specificity bump
-        fill: var(--p-color-icon-disabled);
-      }
     }
   }
 

diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -14,7 +14,6 @@ import {HorizontalStack} from '../../../HorizontalStack';
 import {Box} from '../../../Box';
 import {Tooltip} from '../../../Tooltip';
 import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
-import {useFeatures} from '../../../../utilities/features';
 
 export type ItemProps = ActionListItemDescriptor;
 
@@ -40,8 +39,6 @@ export function Item({
   role,
   variant = 'default',
 }: ItemProps) {
-  const {polarisSummerEditions2023} = useFeatures();
-
   const className = classNames(
     styles.Item,
     disabled && styles.disabled,
@@ -84,12 +81,8 @@ export function Item({
       <Box>{contentText}</Box>
       <Text
         as="span"
-        variant={polarisSummerEditions2023 ? 'bodySm' : undefined}
-        color={
-          polarisSummerEditions2023 && (active || disabled)
-            ? undefined
-            : 'subdued'
-        }
+        variant="bodySm"
+        color={active || disabled ? undefined : 'subdued'}
       >
         {helpText}
       </Text>
@@ -115,7 +108,7 @@ export function Item({
   const contentElement = (
     <HorizontalStack
       blockAlign="center"
-      gap={polarisSummerEditions2023 ? '1_5-experimental' : '4'}
+      gap="1_5-experimental"
       wrap={!truncate}
     >
       {prefixMarkup}
@@ -125,11 +118,7 @@ export function Item({
     </HorizontalStack>
   );
 
-  const contentWrapper = polarisSummerEditions2023 ? (
-    <Box width="100%">{contentElement}</Box>
-  ) : (
-    contentElement
-  );
+  const contentWrapper = <Box width="100%">{contentElement}</Box>;
 
   const scrollMarkup = active ? <Scrollable.ScrollTo /> : null;
 

diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -7,7 +7,6 @@ import type {
   ActionListItemDescriptor,
   ActionListSection,
 } from '../../../../types';
-import {useFeatures} from '../../../../utilities/features';
 import {HorizontalStack} from '../../../HorizontalStack';
 import {VerticalStack} from '../../../VerticalStack';
 
@@ -31,8 +30,6 @@ export function Section({
   actionRole,
   onActionAnyItem,
 }: SectionProps) {
-  const {polarisSummerEditions2023} = useFeatures();
-
   const handleAction = (itemOnAction: ActionListItemDescriptor['onAction']) => {
     return () => {
       if (itemOnAction) {
@@ -61,11 +58,7 @@ export function Section({
           key={`${content}-${index}`}
           role={actionRole === 'menuitem' ? 'presentation' : undefined}
         >
-          {polarisSummerEditions2023 ? (
-            <HorizontalStack wrap={false}>{itemMarkup}</HorizontalStack>
-          ) : (
-            itemMarkup
-          )}
+          <HorizontalStack wrap={false}>{itemMarkup}</HorizontalStack>
         </Box>
       );
     },
@@ -77,24 +70,12 @@ export function Section({
     titleMarkup =
       typeof section.title === 'string' ? (
         <Box
-          {...(polarisSummerEditions2023
-            ? {
-                paddingBlockStart: '3',
-                paddingBlockEnd: '1',
-                paddingInlineStart: '3',
-                paddingInlineEnd: '3',
-              }
-            : {
-                paddingBlockStart: '4',
-                paddingInlineStart: '4',
-                paddingBlockEnd: '2',
-                paddingInlineEnd: '4',
-              })}
+          paddingBlockStart="3"
+          paddingBlockEnd="1"
+          paddingInlineStart="3"
+          paddingInlineEnd="3"
         >
-          <Text
-            as="p"
-            variant={polarisSummerEditions2023 ? 'headingSm' : 'headingXs'}
-          >
+          <Text as="p" variant="headingSm">
             {section.title}
           </Text>
         </Box>
@@ -122,23 +103,18 @@ export function Section({
     <>
       {titleMarkup}
       <Box
-        as={polarisSummerEditions2023 ? 'div' : 'ul'}
-        padding={polarisSummerEditions2023 ? '1_5-experimental' : '2'}
+        as="div"
+        padding="1_5-experimental"
         {...(hasMultipleSections && {paddingBlockStart: '0'})}
-        {...(sectionRole && !polarisSummerEditions2023 && {role: sectionRole})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
-        {polarisSummerEditions2023 ? (
-          <VerticalStack
-            gap="1"
-            as="ul"
-            {...(sectionRole && {role: sectionRole})}
-          >
-            {actionMarkup}
-          </VerticalStack>
-        ) : (
-          actionMarkup
-        )}
+        <VerticalStack
+          gap="1"
+          as="ul"
+          {...(sectionRole && {role: sectionRole})}
+        >
+          {actionMarkup}
+        </VerticalStack>
       </Box>
     </>
   );
@@ -150,7 +126,7 @@ export function Section({
       borderColor="border-subdued"
       {...(!isFirst && {borderBlockStartWidth: '1'})}
       {...(!section.title && {
-        paddingBlockStart: polarisSummerEditions2023 ? '1_5-experimental' : '2',
+        paddingBlockStart: '1_5-experimental',
       })}
     >
       {sectionMarkup}