ActionList: Fix leaky disabled description styles (#4566)

* replace leaky & with data-component * Create stupid-stingrays-sparkle.md
primer · May 13, 2024 · 4dd6bef · 4dd6bef
1 parent 4ecbe1a
commit 4dd6bef
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 12 deletions.
diff --git a/.changeset/stupid-stingrays-sparkle.md b/.changeset/stupid-stingrays-sparkle.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionList: Fix leaky description styles for disabled item
diff --git a/packages/react/src/ActionList/Description.tsx b/packages/react/src/ActionList/Description.tsx
@@ -28,23 +28,15 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
     minWidth: 0,
     marginLeft: variant === 'block' ? 0 : 2,
     color: 'fg.muted',
-    'li[aria-disabled="true"] &': {
-      color: 'inherit',
-    },
-    'li[data-variant="danger"]:hover &, li[data-variant="danger"]:active &': {
-      color: 'inherit',
-    },
+    'li[aria-disabled="true"] &[data-component="ActionList.Description"]': {color: 'inherit'},
+    'li[data-variant="danger"]:hover &[data-component="ActionList.Description"], li[data-variant="danger"]:active &[data-component="ActionList.Description"]':
+      {color: 'inherit'},
   }
 
   const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
 
   return variant === 'block' ? (
-    <Box
-      as="span"
-      // huh why?
-      sx={merge(styles, sx as SxProp)}
-      id={blockDescriptionId}
-    >
+    <Box as="span" sx={merge(styles, sx as SxProp)} id={blockDescriptionId} data-component="ActionList.Description">
       {props.children}
     </Box>
   ) : (
@@ -54,6 +46,7 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
       title={props.children as string}
       inline={true}
       maxWidth="100%"
+      data-component="ActionList.Description"
     >
       {props.children}
     </Truncate>