@charcoal-ui/react 3.3.0-beta.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.3.0-beta.0",
+  "version": "3.3.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -51,10 +51,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.3.0-beta.0",
-    "@charcoal-ui/styled": "^3.3.0-beta.0",
-    "@charcoal-ui/theme": "^3.3.0-beta.0",
-    "@charcoal-ui/utils": "^3.3.0-beta.0",
+    "@charcoal-ui/icons": "^3.3.0",
+    "@charcoal-ui/styled": "^3.3.0",
+    "@charcoal-ui/theme": "^3.3.0",
+    "@charcoal-ui/utils": "^3.3.0",
     "@react-aria/button": "^3.7.0",
     "@react-aria/checkbox": "^3.8.0",
     "@react-aria/dialog": "^3.5.0",
@@ -90,5 +90,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "aa4321ee5b76734602f8e135caa5e91388ca9403"
+  "gitHead": "60cfc06dc31206cb629f762f263be3fe46a13808"
 }

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

@@ -13,6 +13,7 @@ type Props = {
   disabled: boolean
   readonly: boolean
   className?: string
+  invalid: boolean
 }
 
 export const Labelled: Story<Props> = (props) => {
@@ -56,6 +57,7 @@ Labelled.args = {
   defaultChecked: false,
   disabled: false,
   readonly: false,
+  invalid: false,
 }
 
 export const Unlabelled: Story<Props> = (props) => {
@@ -79,4 +81,5 @@ Unlabelled.args = {
   defaultChecked: false,
   disabled: false,
   readonly: false,
+  invalid: false,
 }

package/src/components/Checkbox/index.tsx

@@ -27,6 +27,7 @@ export type CheckboxProps = CheckboxLabelProps & {
   readonly defaultChecked?: boolean
   readonly disabled?: boolean
   readonly readonly?: boolean
+  readonly invalid?: boolean
 
   readonly onClick?: () => void
   readonly onChange?: (isSelected: boolean) => void
@@ -35,17 +36,18 @@ export type CheckboxProps = CheckboxLabelProps & {
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  function CheckboxInner(props, ref) {
+  function CheckboxInner({ invalid = false, ...props }, ref) {
     const ariaCheckboxProps = useMemo<AriaCheckboxProps>(
       () => ({
         ...props,
         isSelected: props.checked,
         defaultSelected: props.defaultChecked,
+        validationState: invalid ? 'invalid' : 'valid',
         // children がいない場合は aria-label をつけないといけない
         'aria-label': 'children' in props ? undefined : props.label,
         isDisabled: props.disabled,
       }),
-      [props]
+      [invalid, props]
     )
     const state = useToggleState(ariaCheckboxProps)
     const objectRef = useObjectRef(ref)
@@ -56,7 +58,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     return (
       <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
-          <CheckboxInput type="checkbox" {...inputProps} />
+          <CheckboxInput type="checkbox" {...inputProps} invalid={invalid} />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
             <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
           </CheckboxInputOverlay>
@@ -91,7 +93,7 @@ const CheckboxRoot = styled.div`
   position: relative;
 `
 
-const CheckboxInput = styled.input`
+const CheckboxInput = styled.input<{ invalid: boolean }>`
   &[type='checkbox'] {
     appearance: none;
     display: block;
@@ -109,6 +111,7 @@ const CheckboxInput = styled.input`
       border-color: ${({ theme }) => theme.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+    ${(p) => p.invalid && theme((o) => [o.outline.assertive])}
 
     /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
     transition: all 0.2s !important;