@charcoal-ui/react 3.11.0 → 3.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -20,7 +20,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^3.11.0",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^3.12.0",
     "@react-types/dialog": "^3.5.8",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^8.0.5",
@@ -48,11 +48,11 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^3.11.0",
-    "@charcoal-ui/icons": "^3.11.0",
-    "@charcoal-ui/styled": "^3.11.0",
-    "@charcoal-ui/theme": "^3.11.0",
-    "@charcoal-ui/utils": "^3.11.0",
+    "@charcoal-ui/foundation": "^3.12.0",
+    "@charcoal-ui/icons": "^3.12.0",
+    "@charcoal-ui/styled": "^3.12.0",
+    "@charcoal-ui/theme": "^3.12.0",
+    "@charcoal-ui/utils": "^3.12.0",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -86,5 +86,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "503ef7c22e3eb46b39b8ddd93e8389025afdd411"
+  "gitHead": "817a068941a10855b03ca57f380412e54f8bdf4b"
 }

package/src/components/Checkbox/__snapshots__/index.story.storyshot

@@ -11,6 +11,10 @@ exports[`Storybook Tests Checkbox Checked 1`] = `
   gap: 4px;
 }
 
+.c0:has(input[readonly]) {
+  cursor: default;
+}
+
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
@@ -39,12 +43,9 @@ exports[`Storybook Tests Checkbox Checked 1`] = `
   cursor: default;
 }
 
-.c2[type='checkbox']:-moz-read-only {
-  cursor: default;
-}
-
-.c2[type='checkbox']:read-only {
+.c2[type='checkbox'][readonly] {
   cursor: default;
+  opacity: 0.32;
 }
 
 .c2[type='checkbox']:checked {
@@ -110,6 +111,12 @@ exports[`Storybook Tests Checkbox Checked 1`] = `
   color: var(--charcoal-text5);
 }
 
+.c4 {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+}
+
 <div
   data-dark={false}
 >
@@ -121,11 +128,10 @@ exports[`Storybook Tests Checkbox Checked 1`] = `
       className="c1"
     >
       <input
-        aria-label="同意する"
         checked={true}
         className="c2"
         disabled={false}
-        name="labelled"
+        name="checked"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -152,6 +158,11 @@ exports[`Storybook Tests Checkbox Checked 1`] = `
         />
       </div>
     </div>
+    <div
+      className="c4"
+    >
+      Checked
+    </div>
   </label>
 </div>
 `;
@@ -167,6 +178,10 @@ exports[`Storybook Tests Checkbox Default 1`] = `
   gap: 4px;
 }
 
+.c0:has(input[readonly]) {
+  cursor: default;
+}
+
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
@@ -195,12 +210,9 @@ exports[`Storybook Tests Checkbox Default 1`] = `
   cursor: default;
 }
 
-.c2[type='checkbox']:-moz-read-only {
-  cursor: default;
-}
-
-.c2[type='checkbox']:read-only {
+.c2[type='checkbox'][readonly] {
   cursor: default;
+  opacity: 0.32;
 }
 
 .c2[type='checkbox']:checked {
@@ -282,12 +294,10 @@ exports[`Storybook Tests Checkbox Default 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="labelled"
-        onBlur={[Function]}
+        name="default"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
-        onFocus={[Function]}
         onKeyDown={[Function]}
         onKeyUp={[Function]}
         onMouseDown={[Function]}
@@ -326,6 +336,10 @@ exports[`Storybook Tests Checkbox Disabled 1`] = `
   gap: 4px;
 }
 
+.c0:has(input[readonly]) {
+  cursor: default;
+}
+
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
@@ -354,12 +368,9 @@ exports[`Storybook Tests Checkbox Disabled 1`] = `
   cursor: default;
 }
 
-.c2[type='checkbox']:-moz-read-only {
-  cursor: default;
-}
-
-.c2[type='checkbox']:read-only {
+.c2[type='checkbox'][readonly] {
   cursor: default;
+  opacity: 0.32;
 }
 
 .c2[type='checkbox']:checked {
@@ -426,6 +437,12 @@ exports[`Storybook Tests Checkbox Disabled 1`] = `
   visibility: hidden;
 }
 
+.c4 {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+}
+
 <div
   data-dark={false}
 >
@@ -437,11 +454,10 @@ exports[`Storybook Tests Checkbox Disabled 1`] = `
       className="c1"
     >
       <input
-        aria-label="同意する"
         checked={false}
         className="c2"
         disabled={true}
-        name="labelled"
+        name="disabled"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -468,6 +484,11 @@ exports[`Storybook Tests Checkbox Disabled 1`] = `
         />
       </div>
     </div>
+    <div
+      className="c4"
+    >
+      Disabled
+    </div>
   </label>
 </div>
 `;
@@ -483,6 +504,10 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
   gap: 4px;
 }
 
+.c0:has(input[readonly]) {
+  cursor: default;
+}
+
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
@@ -511,12 +536,9 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
   cursor: default;
 }
 
-.c2[type='checkbox']:-moz-read-only {
-  cursor: default;
-}
-
-.c2[type='checkbox']:read-only {
+.c2[type='checkbox'][readonly] {
   cursor: default;
+  opacity: 0.32;
 }
 
 .c2[type='checkbox']:checked {
@@ -604,7 +626,7 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="labelled"
+        name="invalid"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -634,7 +656,7 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
     <div
       className="c4"
     >
-      同意する
+      Invalid
     </div>
   </label>
 </div>
@@ -651,6 +673,10 @@ exports[`Storybook Tests Checkbox Label 1`] = `
   gap: 4px;
 }
 
+.c0:has(input[readonly]) {
+  cursor: default;
+}
+
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
@@ -679,12 +705,9 @@ exports[`Storybook Tests Checkbox Label 1`] = `
   cursor: default;
 }
 
-.c2[type='checkbox']:-moz-read-only {
-  cursor: default;
-}
-
-.c2[type='checkbox']:read-only {
+.c2[type='checkbox'][readonly] {
   cursor: default;
+  opacity: 0.32;
 }
 
 .c2[type='checkbox']:checked {
@@ -757,13 +780,6 @@ exports[`Storybook Tests Checkbox Label 1`] = `
   line-height: 20px;
 }
 
-.c5 {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
 <div
   data-dark={false}
 >
@@ -778,7 +794,7 @@ exports[`Storybook Tests Checkbox Label 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="labelled"
+        name="checkbox"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -808,11 +824,7 @@ exports[`Storybook Tests Checkbox Label 1`] = `
     <div
       className="c4"
     >
-      <span
-        className="c5"
-      >
-        同意する
-      </span>
+      Checkbox
     </div>
   </label>
 </div>
@@ -829,6 +841,10 @@ exports[`Storybook Tests Checkbox ReadOnly 1`] = `
   gap: 4px;
 }
 
+.c0:has(input[readonly]) {
+  cursor: default;
+}
+
 .c0:disabled,
 .c0[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
@@ -857,12 +873,9 @@ exports[`Storybook Tests Checkbox ReadOnly 1`] = `
   cursor: default;
 }
 
-.c2[type='checkbox']:-moz-read-only {
-  cursor: default;
-}
-
-.c2[type='checkbox']:read-only {
+.c2[type='checkbox'][readonly] {
   cursor: default;
+  opacity: 0.32;
 }
 
 .c2[type='checkbox']:checked {
@@ -926,26 +939,30 @@ exports[`Storybook Tests Checkbox ReadOnly 1`] = `
   width: 24px;
   height: 24px;
   color: var(--charcoal-text5);
-  visibility: hidden;
+}
+
+.c4 {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
 }
 
 <div
   data-dark={false}
 >
   <label
-    aria-disabled={true}
+    aria-disabled={false}
     className="c0"
   >
     <div
       className="c1"
     >
       <input
-        aria-label="同意する"
         aria-readonly={true}
-        checked={false}
+        checked={true}
         className="c2"
         disabled={false}
-        name="labelled"
+        name="readonly"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -964,7 +981,7 @@ exports[`Storybook Tests Checkbox ReadOnly 1`] = `
       />
       <div
         aria-hidden={true}
-        checked={false}
+        checked={true}
         className="c3"
       >
         <pixiv-icon
@@ -973,6 +990,11 @@ exports[`Storybook Tests Checkbox ReadOnly 1`] = `
         />
       </div>
     </div>
+    <div
+      className="c4"
+    >
+      ReadOnly
+    </div>
   </label>
 </div>
 `;

package/src/components/Checkbox/index.story.tsx

@@ -1,36 +1,36 @@
-import { action } from '@storybook/addon-actions'
 import Checkbox from '.'
 import { Meta, StoryObj } from '@storybook/react'
 import { useCallback, useState } from 'react'
-import styled from 'styled-components'
 
 export default {
   title: 'Checkbox',
   component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
 } as Meta<typeof Checkbox>
 
-const InnerText = styled.span`
-  user-select: none;
-`
-
 export const Default: StoryObj<typeof Checkbox> = {
-  render: (props) => {
+  argTypes: {
+    checked: { type: 'boolean' },
+    children: { type: 'string' },
+    disabled: { type: 'boolean' },
+    invalid: { type: 'boolean' },
+    readonly: { type: 'boolean' },
+  },
+  render: function Render(props) {
     const [checked, setChecked] = useState(props.checked)
     const handleChange = useCallback((isSelected: boolean) => {
       setChecked(isSelected)
-      action('change')(isSelected)
     }, [])
 
     return (
       <Checkbox
         {...props}
-        checked={checked ?? props.checked}
-        name="labelled"
+        checked={props.checked ?? checked}
+        name="default"
         label="label"
-        onBlur={action('blur')}
-        onClick={action('click')}
         onChange={handleChange}
-        onFocus={action('focus')}
       />
     )
   },
@@ -38,37 +38,45 @@ export const Default: StoryObj<typeof Checkbox> = {
 
 export const Label: StoryObj<typeof Checkbox> = {
   render: () => {
-    return (
-      <Checkbox name="labelled">
-        <InnerText>同意する</InnerText>
-      </Checkbox>
-    )
+    return <Checkbox name="checkbox">Checkbox</Checkbox>
   },
 }
 
 export const Checked: StoryObj<typeof Checkbox> = {
   render: () => {
-    return <Checkbox name="labelled" label="同意する" checked />
+    return (
+      <Checkbox name="checked" checked>
+        Checked
+      </Checkbox>
+    )
   },
 }
 
 export const Disabled: StoryObj<typeof Checkbox> = {
   render: () => {
-    return <Checkbox name="labelled" label="同意する" disabled />
+    return (
+      <Checkbox name="disabled" disabled>
+        Disabled
+      </Checkbox>
+    )
   },
 }
 
 export const ReadOnly: StoryObj<typeof Checkbox> = {
   render: () => {
-    return <Checkbox name="labelled" label="同意する" readonly />
+    return (
+      <Checkbox checked name="readonly" readonly>
+        ReadOnly
+      </Checkbox>
+    )
   },
 }
 
 export const Invalid: StoryObj<typeof Checkbox> = {
   render: () => {
     return (
-      <Checkbox name="labelled" invalid>
-        同意する
+      <Checkbox name="invalid" invalid>
+        Invalid
       </Checkbox>
     )
   },

package/src/components/Checkbox/index.tsx

@@ -54,7 +54,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const objectRef = useObjectRef(ref)
 
     const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef)
-    const isDisabled = (props.disabled ?? false) || (props.readonly ?? false)
+    const isDisabled = props.disabled ?? false
 
     return (
       <InputRoot aria-disabled={isDisabled} className={props.className}>
@@ -88,6 +88,9 @@ const InputRoot = styled.label`
   cursor: pointer;
 
   gap: 4px;
+  &:has(input[readonly]) {
+    cursor: default;
+  }
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     cursor: default;
@@ -113,8 +116,9 @@ const CheckboxInput = styled.input`
     &:disabled {
       cursor: default;
     }
-    &:read-only {
+    &[readonly] {
       cursor: default;
+      opacity: 0.32;
     }
 
     &:checked {