From 07033a1c5557be737bb713fc4e15dc2d1c7a3961 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Mon, 24 Jul 2023 13:36:15 -0400
Subject: [PATCH 1/8] chore: add indent prop to Item (ActionList)

---
 .../src/components/ActionList/ActionList.scss | 14 ++++
 .../ActionList/components/Item/Item.tsx       |  2 +
 .../src/components/TopBar/TopBar.stories.tsx  | 73 ++++++++++++++++++-
 polaris-react/src/types.ts                    |  2 +
 4 files changed, 90 insertions(+), 1 deletion(-)

diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index f9410b7e0a4..06cfecd045f 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -166,6 +166,20 @@
       }
     }
   }
+
+  &.indented {
+    position: relative;
+    margin-left: var(--p-space-3);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      border-left: var(--p-border-width-1) solid var(--p-color-border);
+    }
+  }
 }
 
 .Prefix {
diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
index 90623ed2bc7..9d6e355e739 100644
--- a/polaris-react/src/components/ActionList/components/Item/Item.tsx
+++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -38,6 +38,7 @@ export function Item({
   truncate,
   active,
   role,
+  indent,
 }: ItemProps) {
   const {polarisSummerEditions2023} = useFeatures();
 
@@ -46,6 +47,7 @@ export function Item({
     disabled && styles.disabled,
     destructive && styles.destructive,
     active && styles.active,
+    indent && styles.indented,
   );
 
   let prefixMarkup: React.ReactNode | null = null;
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index 704a77c4008..c861367c35d 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -1,7 +1,13 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {ActionList, Frame, Icon, TopBar, Text, Avatar} from '@shopify/polaris';
-import {ArrowLeftMinor, QuestionMarkMajor} from '@shopify/polaris-icons';
+import {
+  ArrowLeftMinor,
+  QuestionMarkMajor,
+  ResetMinor,
+  SearchMinor,
+  TickMinor,
+} from '@shopify/polaris-icons';
 
 import type {UserMenuProps} from '../../../build/ts/latest/src/components/TopBar';
 
@@ -233,3 +239,68 @@ export function WithMessage(_, context) {
     />
   );
 }
+
+export function WithUserMenu() {
+  const userActions: UserMenuProps['actions'] = [
+    {
+      id: 'Stores',
+      title: <Text as="p">Stores</Text>,
+      items: [
+        {
+          content: 'Jaded Pixel',
+          prefix: (
+            <Avatar size="extraSmall" shape="square" name="Jaded Pixel" />
+          ),
+          truncate: true,
+          suffix: <Icon source={TickMinor} />,
+          url: '#',
+          indent: true,
+        },
+        {
+          content: 'Jaded Pixel 2.0',
+          prefix: (
+            <Avatar size="extraSmall" shape="square" name="Jaded Pixel 2.0" />
+          ),
+          truncate: true,
+          url: '#',
+          indent: true,
+        },
+        {
+          id: 'viewAllStores',
+          content: 'View all 8 stores',
+          prefix: <Icon source={SearchMinor} />,
+          url: '#',
+          indent: true,
+        },
+        {
+          id: 'otherStores',
+          content: 'Switch Organization',
+          prefix: <Icon source={ResetMinor} />,
+          url: '#',
+        },
+      ],
+    },
+    {
+      items: [{content: 'Community forums'}],
+    },
+    {
+      items: [{content: 'Help Center'}],
+    },
+    {
+      items: [{content: 'Keyboard shortcuts'}],
+    },
+    {
+      title: 'Dharma Johnson',
+      items: [{content: 'Manage account'}, {content: 'Log out'}],
+    },
+  ];
+
+  return (
+    <TopBarWrapper
+      userActions={userActions}
+      name="Xquenda Andreev"
+      detail="Hem Canada"
+      initials="XA"
+    />
+  );
+}
diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts
index 122b768867a..dcb24f5c10d 100644
--- a/polaris-react/src/types.ts
+++ b/polaris-react/src/types.ts
@@ -212,6 +212,8 @@ export interface ActionListItemDescriptor
   truncate?: boolean;
   /** Whether the action is active or not */
   active?: boolean;
+  /** Whether to indent the item or not */
+  indent?: boolean;
   /** Defines a role for the action */
   role?: string;
 }

From 208678505015cb20a5670884a7b9dfaf97bc464b Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Mon, 24 Jul 2023 19:15:11 -0400
Subject: [PATCH 2/8] chore: add styles for indentation

---
 .../src/components/ActionList/ActionList.scss |  6 +++--
 .../ActionList/components/Section/Section.tsx | 23 +++++++++++++------
 2 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index 06cfecd045f..92ad4a186fa 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -168,16 +168,18 @@
   }
 
   &.indented {
+    --pc-action-list-image-size: 24px;
     position: relative;
-    margin-left: var(--p-space-3);
+    margin-left: calc(var(--p-space-5) + var(--p-space-05));
 
     &::before {
       content: '';
       position: absolute;
-      top: 0;
+      top: calc(var(--p-space-025) * -1);
       bottom: 0;
       left: 0;
       border-left: var(--p-border-width-1) solid var(--p-color-border);
+      margin-left: calc(var(--p-space-1_5-experimental) * -1);
     }
   }
 }
diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index a09cd67b163..677ce895ad0 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -8,6 +8,7 @@ import type {
   ActionListSection,
 } from '../../../../types';
 import {useFeatures} from '../../../../utilities/features';
+import {HorizontalStack} from '../../../HorizontalStack';
 
 export interface SectionProps {
   /** Section of action items */
@@ -43,19 +44,27 @@ export function Section({
   };
   const actionMarkup = section.items.map(
     ({content, helpText, onAction, ...item}, index) => {
+      const itemMarkup = (
+        <Item
+          content={content}
+          helpText={helpText}
+          role={actionRole}
+          onAction={handleAction(onAction)}
+          {...item}
+        />
+      );
+
       return (
         <Box
           as="li"
           key={`${content}-${index}`}
           role={actionRole === 'menuitem' ? 'presentation' : undefined}
         >
-          <Item
-            content={content}
-            helpText={helpText}
-            role={actionRole}
-            onAction={handleAction(onAction)}
-            {...item}
-          />
+          {polarisSummerEditions2023 ? (
+            <HorizontalStack wrap={false}>{itemMarkup}</HorizontalStack>
+          ) : (
+            itemMarkup
+          )}
         </Box>
       );
     },

From 67fd18e598011c1ed65a713e98825bbbf79f9e6f Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Mon, 24 Jul 2023 19:18:21 -0400
Subject: [PATCH 3/8] changeset'

---
 .changeset/angry-mirrors-explode.md           |  5 ++
 .../src/components/ActionList/ActionList.scss |  4 +-
 .../ActionList/components/Section/Section.tsx |  9 ++-
 .../src/components/TopBar/TopBar.stories.tsx  | 65 -------------------
 4 files changed, 15 insertions(+), 68 deletions(-)
 create mode 100644 .changeset/angry-mirrors-explode.md

diff --git a/.changeset/angry-mirrors-explode.md b/.changeset/angry-mirrors-explode.md
new file mode 100644
index 00000000000..b7e6052a84a
--- /dev/null
+++ b/.changeset/angry-mirrors-explode.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added a prop to indent items to ActionList
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index 92ad4a186fa..dec44afd87c 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -168,14 +168,16 @@
   }
 
   &.indented {
+    // stylelint-disable -- reset custom properties
     --pc-action-list-image-size: 24px;
+    // stylelint-enable
     position: relative;
     margin-left: calc(var(--p-space-5) + var(--p-space-05));
 
     &::before {
       content: '';
       position: absolute;
-      top: calc(var(--p-space-025) * -1);
+      top: calc(var(--p-space-3) * -1);
       bottom: 0;
       left: 0;
       border-left: var(--p-border-width-1) solid var(--p-color-border);
diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index 677ce895ad0..a00ccc1196f 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -9,6 +9,7 @@ import type {
 } from '../../../../types';
 import {useFeatures} from '../../../../utilities/features';
 import {HorizontalStack} from '../../../HorizontalStack';
+import {VerticalStack} from '../../../VerticalStack';
 
 export interface SectionProps {
   /** Section of action items */
@@ -119,13 +120,17 @@ export function Section({
     <>
       {titleMarkup}
       <Box
-        as="ul"
+        as={polarisSummerEditions2023 ? 'div' : 'ul'}
         padding={polarisSummerEditions2023 ? '1_5-experimental' : '2'}
         {...(hasMultipleSections && {paddingBlockStart: '0'})}
         {...(sectionRole && {role: sectionRole})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
-        {actionMarkup}
+        {polarisSummerEditions2023 ? (
+          <VerticalStack gap="1">{actionMarkup}</VerticalStack>
+        ) : (
+          actionMarkup
+        )}
       </Box>
     </>
   );
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index c861367c35d..d60f1670c05 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -239,68 +239,3 @@ export function WithMessage(_, context) {
     />
   );
 }
-
-export function WithUserMenu() {
-  const userActions: UserMenuProps['actions'] = [
-    {
-      id: 'Stores',
-      title: <Text as="p">Stores</Text>,
-      items: [
-        {
-          content: 'Jaded Pixel',
-          prefix: (
-            <Avatar size="extraSmall" shape="square" name="Jaded Pixel" />
-          ),
-          truncate: true,
-          suffix: <Icon source={TickMinor} />,
-          url: '#',
-          indent: true,
-        },
-        {
-          content: 'Jaded Pixel 2.0',
-          prefix: (
-            <Avatar size="extraSmall" shape="square" name="Jaded Pixel 2.0" />
-          ),
-          truncate: true,
-          url: '#',
-          indent: true,
-        },
-        {
-          id: 'viewAllStores',
-          content: 'View all 8 stores',
-          prefix: <Icon source={SearchMinor} />,
-          url: '#',
-          indent: true,
-        },
-        {
-          id: 'otherStores',
-          content: 'Switch Organization',
-          prefix: <Icon source={ResetMinor} />,
-          url: '#',
-        },
-      ],
-    },
-    {
-      items: [{content: 'Community forums'}],
-    },
-    {
-      items: [{content: 'Help Center'}],
-    },
-    {
-      items: [{content: 'Keyboard shortcuts'}],
-    },
-    {
-      title: 'Dharma Johnson',
-      items: [{content: 'Manage account'}, {content: 'Log out'}],
-    },
-  ];
-
-  return (
-    <TopBarWrapper
-      userActions={userActions}
-      name="Xquenda Andreev"
-      detail="Hem Canada"
-      initials="XA"
-    />
-  );
-}

From 89ba985f15143950711d7f1ed6e8d2b828cc4181 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Tue, 25 Jul 2023 09:59:14 -0400
Subject: [PATCH 4/8] review: remove unnecessary code; apply 24px to avatars in
 menu item

---
 .../components/ActionList/components/Section/Section.tsx  | 4 +++-
 polaris-react/src/components/TopBar/TopBar.stories.tsx    | 8 +-------
 .../src/components/TopBar/components/Menu/Menu.scss       | 1 +
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index a00ccc1196f..f3daeb67801 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -99,7 +99,9 @@ export function Section({
           </Text>
         </Box>
       ) : (
-        <Box padding="2">{section.title}</Box>
+        <Box padding="2" paddingInlineEnd="1_5-experimental">
+          {section.title}
+        </Box>
       );
   }
 
diff --git a/polaris-react/src/components/TopBar/TopBar.stories.tsx b/polaris-react/src/components/TopBar/TopBar.stories.tsx
index d60f1670c05..704a77c4008 100644
--- a/polaris-react/src/components/TopBar/TopBar.stories.tsx
+++ b/polaris-react/src/components/TopBar/TopBar.stories.tsx
@@ -1,13 +1,7 @@
 import React, {useCallback, useState} from 'react';
 import type {ComponentMeta} from '@storybook/react';
 import {ActionList, Frame, Icon, TopBar, Text, Avatar} from '@shopify/polaris';
-import {
-  ArrowLeftMinor,
-  QuestionMarkMajor,
-  ResetMinor,
-  SearchMinor,
-  TickMinor,
-} from '@shopify/polaris-icons';
+import {ArrowLeftMinor, QuestionMarkMajor} from '@shopify/polaris-icons';
 
 import type {UserMenuProps} from '../../../build/ts/latest/src/components/TopBar';
 
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
index 43e9979a27b..40923dbac13 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
@@ -125,6 +125,7 @@ $activator-variables: (
   // stylelint-disable -- Polaris component custom properties temporary override
   [class*='Polaris-ActionList__Item'] {
     --pc-action-list-item-min-height: var(--p-space-10) - var(--p-space-1);
+    --pc-action-list-image-size: 24px;
     // stylelint-enable
   }
 }

From 34ca3ff55cfa3a8c0624d486b208721acc39a701 Mon Sep 17 00:00:00 2001
From: zak warsame <42528878+zakwarsame@users.noreply.github.com>
Date: Tue, 25 Jul 2023 10:00:50 -0400
Subject: [PATCH 5/8] update changeset

Co-authored-by: Sam Rose <11774595+samrose3@users.noreply.github.com>
---
 .changeset/angry-mirrors-explode.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/angry-mirrors-explode.md b/.changeset/angry-mirrors-explode.md
index b7e6052a84a..9398e9250fc 100644
--- a/.changeset/angry-mirrors-explode.md
+++ b/.changeset/angry-mirrors-explode.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': minor
 ---
 
-Added a prop to indent items to ActionList
+Added an `indent` prop to ActionList for applying left indentation space and border to items

From 1bf7adc1b1993a7d64e6eea1d4fc8b2579ef5152 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Tue, 25 Jul 2023 11:19:50 -0400
Subject: [PATCH 6/8] chore: update prop to variant with default and menu state

---
 .../src/components/ActionList/ActionList.scss          | 10 +++++++++-
 .../src/components/ActionList/components/Item/Item.tsx |  6 ++++--
 .../src/components/TopBar/components/Menu/Menu.scss    |  9 ---------
 polaris-react/src/types.ts                             |  4 ++--
 4 files changed, 15 insertions(+), 14 deletions(-)

diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index dec44afd87c..29377dc1402 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -2,8 +2,10 @@
 
 .Item {
   // stylelint-disable -- Polaris component custom properties
-  --pc-action-list-image-size: 20px;
   --pc-action-list-item-min-height: var(--p-space-10);
+  &.default {
+    --pc-action-list-image-size: 20px;
+  }
   --pc-action-list-item-vertical-padding: calc(
     (var(--pc-action-list-item-min-height) - var(--p-font-line-height-2)) / 2
   );
@@ -184,6 +186,12 @@
       margin-left: calc(var(--p-space-1_5-experimental) * -1);
     }
   }
+
+  .menu {
+    // stylelint-disable -- reset custom properties
+    --pc-action-list-image-size: 24px;
+    // stylelint-enable
+  }
 }
 
 .Prefix {
diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
index 9d6e355e739..d53b653c2de 100644
--- a/polaris-react/src/components/ActionList/components/Item/Item.tsx
+++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -38,7 +38,7 @@ export function Item({
   truncate,
   active,
   role,
-  indent,
+  variant = 'default',
 }: ItemProps) {
   const {polarisSummerEditions2023} = useFeatures();
 
@@ -47,7 +47,9 @@ export function Item({
     disabled && styles.disabled,
     destructive && styles.destructive,
     active && styles.active,
-    indent && styles.indented,
+    variant === 'default' && styles.default,
+    variant === 'indented' && styles.indented,
+    variant === 'menu' && styles.expanded,
   );
 
   let prefixMarkup: React.ReactNode | null = null;
diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
index 40923dbac13..506a7530b7c 100644
--- a/polaris-react/src/components/TopBar/components/Menu/Menu.scss
+++ b/polaris-react/src/components/TopBar/components/Menu/Menu.scss
@@ -121,15 +121,6 @@ $activator-variables: (
   }
 }
 
-.MenuItems {
-  // stylelint-disable -- Polaris component custom properties temporary override
-  [class*='Polaris-ActionList__Item'] {
-    --pc-action-list-item-min-height: var(--p-space-10) - var(--p-space-1);
-    --pc-action-list-image-size: 24px;
-    // stylelint-enable
-  }
-}
-
 .Section {
   margin-top: var(--p-space-2);
   padding-top: var(--p-space-2);
diff --git a/polaris-react/src/types.ts b/polaris-react/src/types.ts
index dcb24f5c10d..d7d2ac84d5c 100644
--- a/polaris-react/src/types.ts
+++ b/polaris-react/src/types.ts
@@ -212,8 +212,8 @@ export interface ActionListItemDescriptor
   truncate?: boolean;
   /** Whether the action is active or not */
   active?: boolean;
-  /** Whether to indent the item or not */
-  indent?: boolean;
+  /** The item variations */
+  variant?: 'default' | 'menu' | 'indented';
   /** Defines a role for the action */
   role?: string;
 }

From f69f82424e9cd36a7b15f7a61033cac2e48c4e1a Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Tue, 25 Jul 2023 11:29:21 -0400
Subject: [PATCH 7/8] update changeset

---
 .changeset/angry-mirrors-explode.md                             | 2 +-
 polaris-react/src/components/ActionList/ActionList.scss         | 2 +-
 .../src/components/ActionList/components/Item/Item.tsx          | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/.changeset/angry-mirrors-explode.md b/.changeset/angry-mirrors-explode.md
index 9398e9250fc..8890116e2d0 100644
--- a/.changeset/angry-mirrors-explode.md
+++ b/.changeset/angry-mirrors-explode.md
@@ -2,4 +2,4 @@
 '@shopify/polaris': minor
 ---
 
-Added an `indent` prop to ActionList for applying left indentation space and border to items
+Added a `variant` prop to ActionList for applying avatar size and left indentation space and border to items
diff --git a/polaris-react/src/components/ActionList/ActionList.scss b/polaris-react/src/components/ActionList/ActionList.scss
index 29377dc1402..b7b82328622 100644
--- a/polaris-react/src/components/ActionList/ActionList.scss
+++ b/polaris-react/src/components/ActionList/ActionList.scss
@@ -187,7 +187,7 @@
     }
   }
 
-  .menu {
+  &.menu {
     // stylelint-disable -- reset custom properties
     --pc-action-list-image-size: 24px;
     // stylelint-enable
diff --git a/polaris-react/src/components/ActionList/components/Item/Item.tsx b/polaris-react/src/components/ActionList/components/Item/Item.tsx
index d53b653c2de..2e790052fd6 100644
--- a/polaris-react/src/components/ActionList/components/Item/Item.tsx
+++ b/polaris-react/src/components/ActionList/components/Item/Item.tsx
@@ -49,7 +49,7 @@ export function Item({
     active && styles.active,
     variant === 'default' && styles.default,
     variant === 'indented' && styles.indented,
-    variant === 'menu' && styles.expanded,
+    variant === 'menu' && styles.menu,
   );
 
   let prefixMarkup: React.ReactNode | null = null;

From 9f6b4b791084f814bcf4dc919907c717ba634fe3 Mon Sep 17 00:00:00 2001
From: Zakaria Warsame <zakaria.warsame@shopify.com>
Date: Tue, 25 Jul 2023 13:31:52 -0400
Subject: [PATCH 8/8] review: update vertical stack to use ul

---
 .../src/components/ActionList/components/Section/Section.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/polaris-react/src/components/ActionList/components/Section/Section.tsx b/polaris-react/src/components/ActionList/components/Section/Section.tsx
index f3daeb67801..b7a32e936a3 100644
--- a/polaris-react/src/components/ActionList/components/Section/Section.tsx
+++ b/polaris-react/src/components/ActionList/components/Section/Section.tsx
@@ -129,7 +129,9 @@ export function Section({
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
         {polarisSummerEditions2023 ? (
-          <VerticalStack gap="1">{actionMarkup}</VerticalStack>
+          <VerticalStack gap="1" as="ul">
+            {actionMarkup}
+          </VerticalStack>
         ) : (
           actionMarkup
         )}