ActionList: Checkbox inside disabled item should have not-allowed cus…

…or (#3870) * Add cursor not-allowed * Create actionlist-disabled-item-checkbox.md * test(vrt): update snapshots * update snapshots! * update missing snapshot * new updated snapshots? --------- Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>
primer · Nov 1, 2023 · 2c24d6a · 2c24d6a
1 parent 33d302a
commit 2c24d6a
Show file tree

Hide file tree

Showing 14 changed files with 23 additions and 0 deletions.
diff --git a/.changeset/smart-bugs-occur.md b/.changeset/smart-bugs-occur.md
@@ -0,0 +1,7 @@
+---
+"@primer/react": patch
+---
+
+ActionList: Checkbox inside a disabled item should have `not-allowed` cusor
+
+<!-- Changed components: ActionList -->
diff --git a/.../ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png b/.../ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png
diff --git a/...ents/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png b/...ents/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png
diff --git a/...tionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png b/...tionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png
diff --git a/.../components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png b/.../components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png b/.../ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png b/...ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png b/...components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png b/...ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png
diff --git a/src/ActionList/ActionList.features.stories.tsx b/src/ActionList/ActionList.features.stories.tsx
@@ -287,6 +287,7 @@ export const MultiSelect = () => {
           selected={selectedIndices.includes(index)}
           aria-checked={selectedIndices.includes(index)}
           onSelect={() => handleSelect(index)}
+          disabled={index === 3 ? true : undefined}
         >
           <ActionList.LeadingVisual>
             <TableIcon />

diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -107,6 +107,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
       '&[aria-disabled]': {
         cursor: 'not-allowed',
         '[data-component="ActionList.Checkbox"]': {
+          cursor: 'not-allowed',
           bg: selected ? 'fg.muted' : 'var(--color-input-disabled-bg, rgba(175, 184, 193, 0.2))',
           borderColor: selected ? 'fg.muted' : 'var(--color-input-disabled-bg, rgba(175, 184, 193, 0.2))',
         },

diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -70,6 +70,7 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c2[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -156,6 +157,7 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c6[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -480,6 +482,7 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c6[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -566,6 +569,7 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c10[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -934,6 +938,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c11[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -1020,6 +1025,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c4[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -1381,6 +1387,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c11[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -1477,6 +1484,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c4[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }

diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -686,6 +686,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c3[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -1422,6 +1423,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c3[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -2131,6 +2133,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c3[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: #656d76;
   border-color: #656d76;
 }
@@ -2206,6 +2209,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c8[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -2857,6 +2861,7 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c3[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }
@@ -3307,6 +3312,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
 }
 
 .c3[aria-disabled] [data-component="ActionList.Checkbox"] {
+  cursor: not-allowed;
   background-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
   border-color: var(--color-input-disabled-bg,rgba(175,184,193,0.2));
 }