[ActionList] Update spacing (#9734)

<!--
  ☝️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#953

### WHAT is this pull request doing?


[Figma](https://www.figma.com/file/27pnBp7zPvmbknkPPPEHlp/action-list-densification?type=design&node-id=29413-20122&mode=design&t=cqwRPgfaufugMCfw-4)
![image](https://screenshot.click/18-12-wkeek-wiflq.png)
![image](https://screenshot.click/18-12-vifau-du3af.png)
![image](https://screenshot.click/18-12-w8ooy-3kaqz.png)

<!--
  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 🎩


[Spin](https://admin.web.action-list-popover-changes.kyle-durand.us.spin.dev/store/shop1/products/1)


https://5d559397bae39100201eedc1-slmskozler.chromatic.com/?path=/story/all-components-actionlist--with-a-prefix-and-a-suffix&globals=polarisSummerEditions2023:true

<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

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

@@ -26,7 +26,11 @@
   color: inherit;
 
   #{$se23} & {
-    padding: var(--p-space-1_5-experimental) var(--p-space-3);
+    // 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;

polaris-react/src/components/ActionList/components/Item/Item.tsx

@@ -111,7 +111,7 @@ export function Item({
   const contentElement = (
     <HorizontalStack
       blockAlign="center"
-      gap={polarisSummerEditions2023 ? '3' : '4'}
+      gap={polarisSummerEditions2023 ? '1_5-experimental' : '4'}
       wrap={!truncate}
     >
       {prefixMarkup}

polaris-react/src/components/ActionList/components/Section/Section.tsx

@@ -48,8 +48,6 @@ export function Section({
           as="li"
           key={`${content}-${index}`}
           role={actionRole === 'menuitem' ? 'presentation' : undefined}
-          {...(polarisSummerEditions2023 &&
-            index !== 0 && {paddingBlockStart: '1'})}
         >
           <Item
             content={content}
@@ -71,10 +69,10 @@ export function Section({
         <Box
           {...(polarisSummerEditions2023
             ? {
-                paddingBlockStart: isFirst ? '4' : '3',
-                paddingInlineStart: '5',
-                paddingBlockEnd: '2',
-                paddingInlineEnd: '5',
+                paddingBlockStart: '3',
+                paddingBlockEnd: '1',
+                paddingInlineStart: '3',
+                paddingInlineEnd: '3',
               }
             : {
                 paddingBlockStart: '4',
@@ -113,7 +111,7 @@ export function Section({
       {titleMarkup}
       <Box
         as="ul"
-        padding="2"
+        padding={polarisSummerEditions2023 ? '1_5-experimental' : '2'}
         {...(hasMultipleSections && {paddingBlockStart: '0'})}
         {...(sectionRole && {role: sectionRole})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
@@ -129,7 +127,9 @@ export function Section({
       role="presentation"
       borderColor="border-subdued"
       {...(!isFirst && {borderBlockStartWidth: '1'})}
-      {...(!section.title && {paddingBlockStart: '2'})}
+      {...(!section.title && {
+        paddingBlockStart: polarisSummerEditions2023 ? '1_5-experimental' : '2',
+      })}
     >
       {sectionMarkup}
     </Box>

polaris-react/src/components/Filters/components/FilterPill/FilterPill.tsx

@@ -183,9 +183,11 @@ export function FilterPill({
   );
 
   const clearButtonMarkup = !hideClearButton && (
-    <Button onClick={handleClear} plain disabled={!selected} textAlign="left">
-      {i18n.translate('Polaris.FilterPill.clear')}
-    </Button>
+    <div>
+      <Button onClick={handleClear} plain disabled={!selected} textAlign="left">
+        {i18n.translate('Polaris.FilterPill.clear')}
+      </Button>
+    </div>
   );
 
   if (disabled) {

polaris-react/src/components/IndexFilters/components/SortButton/SortButton.tsx

@@ -37,7 +37,7 @@ export function SortButton({
   onChangeDirection,
 }: SortButtonProps) {
   const i18n = useI18n();
-  const {polarisSummerEditions2023: se23} = useFeatures();
+  const {polarisSummerEditions2023} = useFeatures();
 
   const [active, setActive] = useState(false);
   const [selectedValueKey, selectedDirection] = selected[0].split(' ');
@@ -97,8 +97,10 @@ export function SortButton({
     return currentKey === selectedValueKey;
   });
 
-  const iconMarkup = se23 ? SortMinor : undefined;
-  const childMarkup = !se23 ? <Icon source={SortMinor} color="base" /> : null;
+  const iconMarkup = polarisSummerEditions2023 ? SortMinor : undefined;
+  const childMarkup = !polarisSummerEditions2023 ? (
+    <Icon source={SortMinor} color="base" />
+  ) : null;
 
   const sortButton = (
     <Tooltip
@@ -128,7 +130,11 @@ export function SortButton({
     >
       <Box
         minWidth="148px"
-        padding="4"
+        padding={polarisSummerEditions2023 ? undefined : '4'}
+        paddingInlineStart={polarisSummerEditions2023 ? '3' : undefined}
+        paddingInlineEnd={polarisSummerEditions2023 ? '3' : undefined}
+        paddingBlockStart={polarisSummerEditions2023 ? '2' : undefined}
+        paddingBlockEnd={polarisSummerEditions2023 ? '2' : undefined}
         borderBlockEndWidth="1"
         borderColor="border-subdued"
       >
@@ -139,7 +145,17 @@ export function SortButton({
           onChange={handleChangeChoiceList}
         />
       </Box>
-      <Box padding="4">
+      <Box
+        padding={polarisSummerEditions2023 ? undefined : '4'}
+        paddingInlineStart={
+          polarisSummerEditions2023 ? '1_5-experimental' : undefined
+        }
+        paddingInlineEnd={
+          polarisSummerEditions2023 ? '1_5-experimental' : undefined
+        }
+        paddingBlockStart={polarisSummerEditions2023 ? '2' : undefined}
+        paddingBlockEnd={polarisSummerEditions2023 ? '2' : undefined}
+      >
         <DirectionButton
           direction="asc"
           active={selectedDirection === SortButtonDirection.Asc}

polaris-react/src/components/Popover/components/Section/Section.tsx

@@ -15,10 +15,12 @@ export function Section({children}: SectionProps) {
     <div className={styles.Section}>
       <Box
         padding={polarisSummerEditions2023 ? undefined : '4'}
-        paddingInlineStart={polarisSummerEditions2023 ? '5' : undefined}
-        paddingInlineEnd={polarisSummerEditions2023 ? '5' : undefined}
-        paddingBlockStart={polarisSummerEditions2023 ? '3' : undefined}
-        paddingBlockEnd={polarisSummerEditions2023 ? '2' : undefined}
+        paddingInlineStart={polarisSummerEditions2023 ? '3' : undefined}
+        paddingInlineEnd={polarisSummerEditions2023 ? '3' : undefined}
+        paddingBlockStart={polarisSummerEditions2023 ? '2' : undefined}
+        paddingBlockEnd={
+          polarisSummerEditions2023 ? '1_5-experimental' : undefined
+        }
       >
         {children}
       </Box>