ActionList: Visual update for disabled Items (#1629)

* add styles for disabled state * Create actionlist-disabled-items.md
primer · Nov 19, 2021 · 47fdbf4 · 47fdbf4
1 parent 250e4b0
commit 47fdbf4
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git a/.changeset/actionlist-disabled-items.md b/.changeset/actionlist-disabled-items.md
@@ -0,0 +1,5 @@
+---
+"@primer/components": patch
+---
+
+ActionList: Visual update for disabled Items to make them more obvious
diff --git a/src/ActionList2/Description.tsx b/src/ActionList2/Description.tsx
@@ -16,7 +16,6 @@ export type DescriptionProps = {
 
 export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
   const styles = {
-    color: 'fg.muted',
     fontSize: 0,
     lineHeight: '16px',
     flexGrow: 1,
@@ -27,15 +26,19 @@ export const Description: React.FC<DescriptionProps> = ({variant = 'inline', sx
 
   return (
     <Slot name={variant === 'block' ? 'BlockDescription' : 'InlineDescription'}>
-      {({blockDescriptionId, inlineDescriptionId}: ItemContext) =>
+      {({blockDescriptionId, inlineDescriptionId, disabled}: ItemContext) =>
         variant === 'block' ? (
-          <Box as="span" sx={merge(styles, sx as SxProp)} id={blockDescriptionId}>
+          <Box
+            as="span"
+            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
+            id={blockDescriptionId}
+          >
             {props.children}
           </Box>
         ) : (
           <Truncate
             id={inlineDescriptionId}
-            sx={merge(styles, sx as SxProp)}
+            sx={merge({...styles, color: disabled ? 'fg.disabled' : 'fg.muted'}, sx as SxProp)}
             title={props.children as string}
             inline={true}
             maxWidth="100%"

diff --git a/src/ActionList2/Item.tsx b/src/ActionList2/Item.tsx
@@ -13,9 +13,9 @@ import {Selection} from './Selection'
 export const getVariantStyles = (variant: ItemProps['variant'], disabled: ItemProps['disabled']) => {
   if (disabled) {
     return {
-      color: 'fg.muted',
-      iconColor: 'fg.muted',
-      annotationColor: 'fg.muted'
+      color: 'primer.fg.disabled',
+      iconColor: 'primer.fg.disabled',
+      annotationColor: 'primer.fg.disabled'
     }
   }
 
@@ -114,8 +114,9 @@ export const Item = React.forwardRef<HTMLLIElement, ItemProps>(
       borderRadius: listVariant === 'inset' ? 2 : 0,
       transition: 'background 33.333ms linear',
       color: getVariantStyles(variant, disabled).color,
-      textDecoration: 'none', // for as="a"
-      ':not([aria-disabled])': {cursor: 'pointer'},
+      cursor: 'pointer',
+      '&[aria-disabled]': {cursor: 'not-allowed'},
+
       '@media (hover: hover) and (pointer: fine)': {
         ':hover:not([aria-disabled])': {
           backgroundColor: `actionListItem.${variant}.hoverBg`,