ActionList: Fix leaky disabled description styles (#4566)

* replace leaky & with data-component * Create stupid-stingrays-sparkle.md
primer · May 16, 2024 · 9d21c17 · 9d21c17
1 parent b329ef5
commit 9d21c17
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>