From 4dd6bef7513e6ae32aa236410f2fbf1eb72a5eb9 Mon Sep 17 00:00:00 2001
From: Siddharth Kshetrapal <siddharthkp@github.com>
Date: Mon, 13 May 2024 16:30:20 +0200
Subject: [PATCH] ActionList: Fix leaky disabled description styles (#4566)

* replace leaky & with data-component

* Create stupid-stingrays-sparkle.md
---
 .changeset/stupid-stingrays-sparkle.md        |  5 +++++
 packages/react/src/ActionList/Description.tsx | 17 +++++------------
 2 files changed, 10 insertions(+), 12 deletions(-)
 create mode 100644 .changeset/stupid-stingrays-sparkle.md

diff --git a/.changeset/stupid-stingrays-sparkle.md b/.changeset/stupid-stingrays-sparkle.md
new file mode 100644
index 00000000000..cc03222695a
--- /dev/null
+++ 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
index ffa9b0bf359..8b298418411 100644
--- 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>