@charcoal-ui/react 3.2.0 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -19,14 +19,15 @@
   },
   "devDependencies": {
     "@react-types/switch": "^3.1.2",
-    "@storybook/addon-actions": "^6.4.17",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addons": "^6.4.17",
-    "@storybook/api": "^6.4.17",
-    "@storybook/components": "^6.4.17",
-    "@storybook/core-events": "^6.4.17",
-    "@storybook/react": "^6.4.17",
-    "@storybook/theming": "^6.4.17",
+    "@storybook/addon-actions": "^7.4.1",
+    "@storybook/addon-knobs": "^7.0.2",
+    "@storybook/addons": "^7.4.1",
+    "@storybook/api": "^7.4.1",
+    "@storybook/components": "^7.4.1",
+    "@storybook/core-events": "^7.4.1",
+    "@storybook/react": "^7.4.1",
+    "@storybook/react-webpack5": "^7.4.1",
+    "@storybook/theming": "^7.4.1",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
@@ -44,15 +45,16 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
+    "storybook": "^7.4.1",
     "styled-components": "^5.3.3",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.2.0",
-    "@charcoal-ui/styled": "^3.2.0",
-    "@charcoal-ui/theme": "^3.2.0",
-    "@charcoal-ui/utils": "^3.2.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",
@@ -88,5 +90,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "495dc492d64a159618461a074b2315547eeda99f"
+  "gitHead": "60cfc06dc31206cb629f762f263be3fe46a13808"
 }

package/src/components/Button/index.test.tsx

@@ -1,12 +1,12 @@
 import 'jest-styled-components'
 
 import Button from '.'
-import renderder from 'react-test-renderer'
+import renderer from 'react-test-renderer'
 import { ThemeProvider } from 'styled-components'
 import { light } from '@charcoal-ui/theme'
 
 export function render(children: JSX.Element) {
-  return renderder
+  return renderer
     .create(<ThemeProvider theme={light}>{children}</ThemeProvider>)
     .toJSON()
 }

package/src/components/Button/index.tsx

@@ -58,7 +58,7 @@ const StyledButton = styled(Clickable)<StyledProps>`
   ${(p) =>
     theme((o) => [
       o.font[variantToFont(p.$variant)].hover.press,
-      o.bg[variantToBackgraund(p.$variant)].hover.press,
+      o.bg[variantToBackground(p.$variant)].hover.press,
       o.typography(14).bold.preserveHalfLeading,
       o.padding.horizontal(p.$size === 'M' ? 24 : 16),
       o.disabled,
@@ -70,7 +70,7 @@ const StyledButton = styled(Clickable)<StyledProps>`
   height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
 `
 
-function variantToBackgraund(variant: Variant) {
+function variantToBackground(variant: Variant) {
   switch (variant) {
     case 'Overlay':
       return 'surface4'

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;

package/src/components/Checkbox/performance.test.tsx

@@ -2,12 +2,12 @@ import { light } from '@charcoal-ui/theme'
 import 'jest-styled-components'
 
 import React from 'react'
-import renderder from 'react-test-renderer'
+import renderer from 'react-test-renderer'
 import { ThemeProvider } from 'styled-components'
 import Checkbox from '.'
 
 export function render(children: JSX.Element) {
-  return renderder
+  return renderer
     .create(<ThemeProvider theme={light}>{children}</ThemeProvider>)
     .toJSON()
 }

package/src/components/LoadingSpinner/index.tsx

@@ -50,7 +50,7 @@ const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
     ])}
 `
 
-const scaleout = keyframes`
+const scaleOut = keyframes`
   from {
     transform: scale(0);
     opacity: 1;
@@ -67,7 +67,7 @@ const Icon = styled.div.attrs({ role: 'presentation' })<{ once: boolean }>`
   height: 1em;
   border-radius: 1em;
   background-color: currentColor;
-  animation: ${scaleout} 1s both ease-out;
+  animation: ${scaleOut} 1s both ease-out;
   animation-iteration-count: ${(p) => (p.once ? 1 : 'infinite')};
 
   &[data-reset-animation] {

package/src/core/CharcoalProvider.tsx

@@ -3,7 +3,7 @@ import { ThemeProvider } from 'styled-components'
 import ComponentAbstraction, { Components } from './ComponentAbstraction'
 import { TokenInjector } from '@charcoal-ui/styled'
 import { ThemeMap } from '@charcoal-ui/styled/src/TokenInjector'
-import { CharcoalTheme } from '@charcoal-ui/theme'
+import { CharcoalTheme, ThemeColor } from '@charcoal-ui/theme'
 
 import { OverlayProvider } from './OverlayProvider'
 import { SSRProvider } from './SSRProvider'
@@ -13,6 +13,7 @@ export type CharcoalProviderProps = React.PropsWithChildren<{
   defaultTheme?: CharcoalTheme
   injectTokens?: boolean
   components?: Partial<Components>
+  background?: keyof ThemeColor
 }>
 
 export function CharcoalProvider({
@@ -21,11 +22,14 @@ export function CharcoalProvider({
   components = {},
   injectTokens = true,
   children,
+  background,
 }: CharcoalProviderProps) {
   return (
     <SSRProvider>
       <ThemeProvider theme={defaultTheme}>
-        {injectTokens && <TokenInjector theme={themeMap} />}
+        {injectTokens && (
+          <TokenInjector theme={themeMap} background={background} />
+        )}
         <ComponentAbstraction components={components}>
           <OverlayProvider>{children}</OverlayProvider>
         </ComponentAbstraction>