[ActionList/Modal.Header] Fix spacing regressions

.changeset/twenty-socks-count.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Fixed visual spacing regressions on `ActionList` and `Modal.Header`

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

@@ -7,15 +7,19 @@
   padding: 0;
 }
 
-.Section-withoutTitle:not(:first-child) {
+.Section:not(:first-child) {
   border-top: var(--p-border-divider);
+
+  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
+  > .Section-withoutTitle .Actions {
+    padding-top: var(--p-space-2);
+  }
 }
 
 .Actions {
   outline: none;
   list-style: none;
   margin: 0;
-  border-bottom: var(--p-border-divider);
   padding: var(--p-space-2);
 }
 
@@ -24,7 +28,7 @@
   // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
   > .Section-withoutTitle .Actions {
     border-top: none;
-    border-bottom: none;
+    padding-top: var(--p-space-2);
   }
 }
 
@@ -35,13 +39,6 @@
   }
 }
 
-.ActionList .Section:last-child {
-  // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity
-  .Actions {
-    border-bottom: none;
-  }
-}
-
 .Item {
   --pc-action-list-image-size: 20px;
   --pc-action-list-item-min-height: var(--p-space-10);

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

@@ -178,6 +178,47 @@ export function WithSections() {
   );
 }
 
+export function WithSectionsNoTitles() {
+  const [active, setActive] = useState(true);
+
+  const toggleActive = useCallback(() => setActive((active) => !active), []);
+
+  const activator = (
+    <Button onClick={toggleActive} disclosure>
+      More actions
+    </Button>
+  );
+
+  return (
+    <div style={{height: '250px'}}>
+      <Popover
+        active={active}
+        activator={activator}
+        autofocusTarget="first-node"
+        onClose={toggleActive}
+      >
+        <ActionList
+          actionRole="menuitem"
+          sections={[
+            {
+              items: [
+                {content: 'Import file', icon: ImportMinor},
+                {content: 'Export file', icon: ExportMinor},
+              ],
+            },
+            {
+              items: [
+                {content: 'Edit', icon: EditMinor},
+                {content: 'Delete', icon: DeleteMinor},
+              ],
+            },
+          ]}
+        />
+      </Popover>
+    </div>
+  );
+}
+
 export function WithDestructiveItem() {
   const [active, setActive] = useState(true);
 

polaris-react/src/components/Modal/components/Header/Header.scss

@@ -24,5 +24,5 @@
 .Title {
   @include text-breakword;
   flex: 1;
-  margin-top: var(--p-space-1);
+  align-self: center;
 }