fix divider bug

Author: langermank

docs/src/stories/components/ActionList/ActionListExamples.stories.jsx

@@ -949,11 +949,16 @@ MenuContextMenu.args = {
   showDividers: false,
   children: (
     <>
-      <ListItemTemplate onClick={() => alert('Hello!')} text="Copy link" trailingVisual={`⌘⇧C`} />
-      <ListItemTemplate onClick={() => alert('Hello!')} text="Quote reply" trailingVisual={`⌘⇧R`} />
-      <ListItemTemplate onClick={() => alert('Hello!')} text="Edit comment" />
-      <DividerTemplate />
-      <ListItemTemplate onClick={() => alert('Hello!')} text="Delete comment" variant="ActionList-item--danger" />
+      <ListItemTemplate onClick={() => alert('Hello!')} text="Copy link" trailingVisual={`⌘⇧C`} menuItem />
+      <ListItemTemplate onClick={() => alert('Hello!')} text="Quote reply" trailingVisual={`⌘⇧R`} menuItem />
+      <ListItemTemplate onClick={() => alert('Hello!')} text="Edit comment" menuItem />
+      <DividerTemplate menuItem />
+      <ListItemTemplate
+        onClick={() => alert('Hello!')}
+        text="Delete comment"
+        variant="ActionList-item--danger"
+        menuItem
+      />
     </>
   )
 }

docs/src/stories/components/ActionList/ActionListItem.stories.jsx

@@ -281,7 +281,8 @@ export const ListItemTemplate = ({
   fontSize,
   treeitem,
   ariaSetSize,
-  ariaPosInset
+  ariaPosInset,
+  menuItem
 }) => {
   const [isCollapsed, itemIsCollapsed] = useToggle()
   const [isChecked, itemIsChecked] = useToggle()
@@ -301,7 +302,7 @@ export const ListItemTemplate = ({
       aria-level={ariaLevel ? `${ariaLevel}` : undefined}
       aria-setsize={ariaSetSize ? `${ariaSetSize}` : undefined}
       aria-posinset={ariaPosInset ? `${ariaPosInset}` : undefined}
-      style={itemStyle}
+      style={ariaLevel && itemStyle}
       onClick={collapsible || collapsibleLeading ? itemIsCollapsed : itemIsChecked}
       role={
         singleSelect
@@ -316,6 +317,8 @@ export const ListItemTemplate = ({
           ? 'none'
           : treeitem
           ? 'treeitem'
+          : menuItem
+          ? 'menuitem'
           : undefined
       }
       id={id}
@@ -409,8 +412,8 @@ export const ListItemTemplate = ({
               <span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
                 <span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
                   {text}
+                  <span className="ActionList-item-description">{description}</span>
                 </span>
-                <span className="ActionList-item-description">{description}</span>
               </span>
             )}
             {!description && text && (
@@ -525,8 +528,9 @@ export const ListItemTemplate = ({
                 <span className={clsx('ActionList-item-descriptionWrap', `${descriptionVariant}`)}>
                   <span className={clsx('ActionList-item-label', truncateItem && 'ActionList-item-label--truncate')}>
                     {text}
+
+                    <span className="ActionList-item-description">{description}</span>
                   </span>
-                  <span className="ActionList-item-description">{description}</span>
                 </span>
               )}
               {!description && text && (

src/actionlist/action-list-item.scss

@@ -285,8 +285,7 @@
     .ActionList-item-multiSelectCheckmark {
       visibility: hidden;
       opacity: 0;
-      transition:
-        visibility 0 linear $actionList-item-checkmark-transition-timing,
+      transition: visibility 0 linear $actionList-item-checkmark-transition-timing,
         opacity $actionList-item-checkmark-transition-timing;
     }
 
@@ -495,6 +494,11 @@
     // stylelint-disable-next-line primer/spacing
     margin-left: $actionList-item-padding-horizontal;
   }
+
+  // label wraps description to handle list dividers
+  .ActionList-item-label {
+    flex: 1 0 auto;
+  }
 }
 
 // description