Add gap between ActionList label and trailingVisual (#6177)

Co-authored-by: Jon Rohan <[email protected]>
Co-authored-by: Marie Lucca <[email protected]>
Co-authored-by: Hussam Ghazzi <[email protected]>

Author: 4 people

.changeset/soft-walls-help.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add gap between ActionList label and `trailingVisual`

packages/react/src/ActionList/ActionList.module.css

@@ -526,6 +526,12 @@
   grid-template-areas: 'label trailingVisual trailingAction';
   grid-template-columns: minmax(0, auto) min-content min-content;
   align-items: start;
+
+  /* column-gap persists with empty grid-areas, margin applies only when children exist */
+  & > :not(:last-child) {
+    /* stylelint-disable-next-line primer/spacing */
+    margin-right: var(--control-medium-gap);
+  }
 }
 
 /* place children on grid */

packages/react/src/ActionList/Item.tsx

@@ -291,7 +291,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
               {
                 // If the item is inactive, but it's not in an overlay (e.g. ActionMenu, SelectPanel),
                 // render the inactive warning message directly in the item.
-                !showInactiveIndicator ? (
+                !showInactiveIndicator && inactiveText ? (
                   <span className={classes.InactiveWarning} id={inactiveWarningId}>
                     {inactiveText}
                   </span>