[ActionList][Item] Allow indentation to be applied to individual items

.changeset/angry-mirrors-explode.md

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': minor
+---
+
+Added a `variant` prop to ActionList for applying avatar size and left indentation space and border to items

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
   );
@@ -166,6 +168,30 @@
       }
     }
   }
+
+  &.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-3) * -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);
+    }
+  }
+
+  &.menu {
+    // stylelint-disable -- reset custom properties
+    --pc-action-list-image-size: 24px;
+    // stylelint-enable
+  }
 }
 
 .Prefix {

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

@@ -38,6 +38,7 @@ export function Item({
   truncate,
   active,
   role,
+  variant = 'default',
 }: ItemProps) {
   const {polarisSummerEditions2023} = useFeatures();
 
@@ -46,6 +47,9 @@ export function Item({
     disabled && styles.disabled,
     destructive && styles.destructive,
     active && styles.active,
+    variant === 'default' && styles.default,
+    variant === 'indented' && styles.indented,
+    variant === 'menu' && styles.menu,
   );
 
   let prefixMarkup: React.ReactNode | null = null;

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

@@ -8,6 +8,8 @@ import type {
   ActionListSection,
 } from '../../../../types';
 import {useFeatures} from '../../../../utilities/features';
+import {HorizontalStack} from '../../../HorizontalStack';
+import {VerticalStack} from '../../../VerticalStack';
 
 export interface SectionProps {
   /** Section of action items */
@@ -43,19 +45,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>
       );
     },
@@ -89,7 +99,9 @@ export function Section({
           </Text>
         </Box>
       ) : (
-        <Box padding="2">{section.title}</Box>
+        <Box padding="2" paddingInlineEnd="1_5-experimental">
+          {section.title}
+        </Box>
       );
   }
 
@@ -110,13 +122,19 @@ 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" as="ul">
+            {actionMarkup}
+          </VerticalStack>
+        ) : (
+          actionMarkup
+        )}
       </Box>
     </>
   );

polaris-react/src/components/TopBar/components/Menu/Menu.scss

@@ -121,14 +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);
-    // stylelint-enable
-  }
-}
-
 .Section {
   margin-top: var(--p-space-2);
   padding-top: var(--p-space-2);

polaris-react/src/types.ts

@@ -212,6 +212,8 @@ export interface ActionListItemDescriptor
   truncate?: boolean;
   /** Whether the action is active or not */
   active?: boolean;
+  /** The item variations */
+  variant?: 'default' | 'menu' | 'indented';
   /** Defines a role for the action */
   role?: string;
 }