Merge pull request #466 from pixiv/toshusai/fix-radio-disabled-style

fix: cursor to default when Radio and Checkbox are disabled
pixiv · Feb 22, 2024 · 34c606f · 34c606f
2 parents 907a4b9 + a2ca512
commit 34c606f
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 26 deletions.
diff --git a/packages/react/src/components/Checkbox/__snapshots__/index.story.storyshot b/packages/react/src/components/Checkbox/__snapshots__/index.story.storyshot
@@ -11,13 +11,9 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -39,6 +35,18 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -140,6 +148,7 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        readOnly={false}
         type="checkbox"
       />
       <div
@@ -173,13 +182,9 @@ exports[`Storybook Tests Checkbox Labelled 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -201,6 +206,18 @@ exports[`Storybook Tests Checkbox Labelled 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -309,6 +326,7 @@ exports[`Storybook Tests Checkbox Labelled 1`] = `
             onTouchEnd={[Function]}
             onTouchMove={[Function]}
             onTouchStart={[Function]}
+            readOnly={false}
             type="checkbox"
           />
           <div
@@ -357,6 +375,7 @@ exports[`Storybook Tests Checkbox Labelled 1`] = `
             onTouchEnd={[Function]}
             onTouchMove={[Function]}
             onTouchStart={[Function]}
+            readOnly={false}
             type="checkbox"
           />
           <div
@@ -401,13 +420,9 @@ exports[`Storybook Tests Checkbox Unlabelled 1`] = `
   gap: 4px;
 }
 
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
   opacity: 0.32;
 }
 
@@ -429,6 +444,18 @@ exports[`Storybook Tests Checkbox Unlabelled 1`] = `
   transition: 0.2s box-shadow,0.2s background-color;
 }
 
+.c2[type='checkbox']:disabled {
+  cursor: default;
+}
+
+.c2[type='checkbox']:-moz-read-only {
+  cursor: default;
+}
+
+.c2[type='checkbox']:read-only {
+  cursor: default;
+}
+
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
 }
@@ -525,6 +552,7 @@ exports[`Storybook Tests Checkbox Unlabelled 1`] = `
           onTouchEnd={[Function]}
           onTouchMove={[Function]}
           onTouchStart={[Function]}
+          readOnly={false}
           type="checkbox"
         />
         <div

diff --git a/packages/react/src/components/Checkbox/index.tsx b/packages/react/src/components/Checkbox/index.tsx
@@ -4,7 +4,6 @@ import styled, { css } from 'styled-components'
 import { useCheckbox } from '@react-aria/checkbox'
 import { useObjectRef } from '@react-aria/utils'
 import { useToggleState } from 'react-stately'
-import { disabledSelector } from '@charcoal-ui/utils'
 
 import type { AriaCheckboxProps } from '@react-types/checkbox'
 import Icon from '../Icon'
@@ -59,7 +58,11 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
-          <CheckboxInput type="checkbox" {...inputProps} />
+          <CheckboxInput
+            type="checkbox"
+            {...inputProps}
+            readOnly={props.readonly}
+          />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
             <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
           </CheckboxInputOverlay>
@@ -82,13 +85,11 @@ const InputRoot = styled.label`
   display: flex;
 
   cursor: pointer;
-  ${disabledSelector} {
-    cursor: default;
-  }
 
   gap: 4px;
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
+    cursor: default;
     opacity: 0.32;
   }
 `
@@ -108,6 +109,13 @@ const CheckboxInput = styled.input`
     border-radius: 4px;
     transition: 0.2s box-shadow, 0.2s background-color;
 
+    &:disabled {
+      cursor: default;
+    }
+    &:read-only {
+      cursor: default;
+    }
+
     &:checked {
       background-color: var(--charcoal-brand);
 

diff --git a/packages/react/src/components/Radio/__snapshots__/index.story.storyshot b/packages/react/src/components/Radio/__snapshots__/index.story.storyshot
@@ -12,9 +12,9 @@ exports[`Storybook Tests Radio Basic 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -34,6 +34,10 @@ exports[`Storybook Tests Radio Basic 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
@@ -244,9 +248,9 @@ exports[`Storybook Tests Radio Disabled 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -266,6 +270,10 @@ exports[`Storybook Tests Radio Disabled 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
@@ -476,9 +484,9 @@ exports[`Storybook Tests Radio Invalid 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -498,6 +506,10 @@ exports[`Storybook Tests Radio Invalid 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
@@ -709,9 +721,9 @@ exports[`Storybook Tests Radio PartialDisabled 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -731,6 +743,10 @@ exports[`Storybook Tests Radio PartialDisabled 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
@@ -941,9 +957,9 @@ exports[`Storybook Tests Radio Readonly 1`] = `
   cursor: pointer;
 }
 
-.c2:disabled,
 .c2[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
+  cursor: default;
 }
 
 .c3[type='radio'] {
@@ -963,6 +979,10 @@ exports[`Storybook Tests Radio Readonly 1`] = `
   transition: 0.2s background-color,0.2s box-shadow;
 }
 
+.c3[type='radio']:disabled {
+  cursor: default;
+}
+
 .c3[type='radio']:not(:disabled):not([aria-disabled]):hover,
 .c3[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);

diff --git a/packages/react/src/components/Radio/index.tsx b/packages/react/src/components/Radio/index.tsx
@@ -65,9 +65,9 @@ const RadioRoot = styled.label`
   align-items: center;
   cursor: pointer;
 
-  &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
+    cursor: default;
   }
 `
 
@@ -88,6 +88,10 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })`
     background-color: var(--charcoal-surface1);
     transition: 0.2s background-color, 0.2s box-shadow;
 
+    :disabled {
+      cursor: default;
+    }
+
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
       &:hover {