Checkbox: Add cursor:not-allowed to unchecked disabled state (#4176)

* move disabled cursor out of checked * Create unlucky-boats-film.md * update snapshots
primer · Jan 30, 2024 · b8b090b · b8b090b
1 parent e9a84c8
commit b8b090b
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/.changeset/unlucky-boats-film.md b/.changeset/unlucky-boats-film.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Checkbox: Add `not-allowed` cursor to unchecked disabled state
diff --git a/src/Checkbox/Checkbox.tsx b/src/Checkbox/Checkbox.tsx
@@ -71,6 +71,10 @@ const StyledCheckbox = styled.input`
     }
   }
 
+  &:disabled {
+    cursor: not-allowed;
+  }
+
   &:checked {
     transition:
       background-color,
@@ -82,7 +86,6 @@ const StyledCheckbox = styled.input`
     }
 
     &:disabled {
-      cursor: not-allowed;
       background-color: ${get('colors.fg.muted')};
       border-color: ${get('colors.fg.muted')};
       opacity: 1;