@charcoal-ui/react 2.8.0 → 2.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.8.0",
+  "version": "2.10.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -49,10 +49,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.8.0",
-    "@charcoal-ui/styled": "^2.8.0",
-    "@charcoal-ui/theme": "^2.8.0",
-    "@charcoal-ui/utils": "^2.8.0",
+    "@charcoal-ui/icons": "^2.10.0",
+    "@charcoal-ui/styled": "^2.10.0",
+    "@charcoal-ui/theme": "^2.10.0",
+    "@charcoal-ui/utils": "^2.10.0",
     "@react-aria/button": "^3.7.0",
     "@react-aria/checkbox": "^3.8.0",
     "@react-aria/dialog": "^3.5.0",
@@ -88,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "f45afd2e7fd92a3bed12babb8e23e4524057a96d"
+  "gitHead": "de4d7ee93313b0438dedc3dae21c2fc3419e4a8b"
 }

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

@@ -0,0 +1,385 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Basic <Button>Hello</Button> 1`] = `
+.c0 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  -webkit-letter-spacing: inherit;
+  -moz-letter-spacing: inherit;
+  -ms-letter-spacing: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  font: inherit;
+  margin: 0;
+  overflow: visible;
+  text-transform: none;
+  cursor: pointer;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+<button
+  className="c0 c1"
+  disabled={false}
+  height={40}
+  size="M"
+>
+  Hello
+</button>
+`;
+
+exports[`Link <Button to="#">Hello</Button> 1`] = `
+.c0 {
+  color: inherit;
+  cursor: pointer;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0 .text {
+  top: calc(1em + 2em);
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1 {
+  width: -webkit-min-content;
+  width: -moz-min-content;
+  width: min-content;
+  display: inline-grid;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  white-space: nowrap;
+  color: var(--charcoal-text2);
+  background-color: var(--charcoal-surface3);
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+  padding-right: 24px;
+  padding-left: 24px;
+  border-radius: 999999px;
+  -webkit-transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  transition: 0.2s color,0.2s background-color,0.2s box-shadow;
+  height: 40px;
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  color: var(--charcoal-text2-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  color: var(--charcoal-text2-press);
+}
+
+.c1:hover:not(:disabled):not([aria-disabled]),
+.c1:hover[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-hover);
+}
+
+.c1:active:not(:disabled):not([aria-disabled]),
+.c1:active[aria-disabled=false] {
+  background-color: var(--charcoal-surface3-press);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus,
+.c1[aria-disabled=false]:focus,
+.c1:not(:disabled):not([aria-disabled]):active,
+.c1[aria-disabled=false]:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled=false]:focus:not(:focus-visible),
+.c1:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c1[aria-disabled=false]:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus-visible,
+.c1[aria-disabled=false]:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+<a
+  aria-disabled={false}
+  background="surface3"
+  className="c0 c1"
+  font="text2"
+  height={40}
+  href="#"
+  padding={24}
+  size="M"
+  theme={
+    Object {
+      "border": Object {
+        "default": Object {
+          "color": "rgba(0,0,0,0.08)",
+        },
+      },
+      "borderRadius": Object {
+        "16": 16,
+        "24": 24,
+        "4": 4,
+        "8": 8,
+        "none": 0,
+        "oval": 999999,
+      },
+      "breakpoint": Object {
+        "screen1": 744,
+        "screen2": 952,
+        "screen3": 1160,
+        "screen4": 1368,
+      },
+      "color": Object {
+        "assertive": "#ff2b00",
+        "background1": "#ffffff",
+        "background2": "#f5f5f5",
+        "border": "rgba(0,0,0,0.08)",
+        "brand": "#0096fa",
+        "icon6": "rgba(255,255,255,0.28)",
+        "link1": "#3d7699",
+        "link2": "rgba(255,255,255,0.36)",
+        "success": "#b1cc29",
+        "surface1": "#ffffff",
+        "surface10": "rgba(0,0,0,0.16)",
+        "surface2": "rgba(0,0,0,0.02)",
+        "surface3": "rgba(0,0,0,0.04)",
+        "surface4": "rgba(0,0,0,0.32)",
+        "surface6": "rgba(0,0,0,0.88)",
+        "surface7": "rgba(0,0,0,0.02)",
+        "surface8": "rgba(0,0,0,0.88)",
+        "surface9": "#ffffff",
+        "text1": "#1f1f1f",
+        "text2": "#474747",
+        "text3": "#858585",
+        "text4": "#adadad",
+        "text5": "#ffffff",
+        "transparent": "rgba(0,0,0,0)",
+        "updatedItem": "rgba(0,150,250,0.04)",
+        "warning": "#ffaf0f",
+      },
+      "effect": Object {
+        "hover": Object {
+          "color": "rgba(0,0,0,0.04)",
+          "type": "alpha",
+        },
+        "press": Object {
+          "color": "rgba(0,0,0,0.16)",
+          "type": "alpha",
+        },
+      },
+      "elementEffect": Object {
+        "disabled": Object {
+          "opacity": 0.32,
+          "type": "opacity",
+        },
+      },
+      "gradientColor": Object {
+        "callToAction": Array [
+          Object {
+            "color": "#d1ff1a",
+            "ratio": 0,
+          },
+          Object {
+            "color": "#1ad1ff",
+            "ratio": 100,
+          },
+        ],
+        "surface5": Array [
+          Object {
+            "color": "rgba(0,0,0,0.32)",
+            "ratio": 0,
+          },
+          Object {
+            "color": "rgba(0,0,0,0)",
+            "ratio": 100,
+          },
+        ],
+      },
+      "grid": Object {
+        "unit": Object {
+          "column": 80,
+          "gutter": 24,
+        },
+      },
+      "outline": Object {
+        "assertive": Object {
+          "color": "rgba(255,43,0,0.32)",
+          "weight": 4,
+        },
+        "default": Object {
+          "color": "rgba(0,150,250,0.32)",
+          "weight": 4,
+        },
+      },
+      "spacing": Object {
+        "0": 0,
+        "104": 104,
+        "16": 16,
+        "168": 168,
+        "24": 24,
+        "272": 272,
+        "4": 4,
+        "40": 40,
+        "440": 440,
+        "64": 64,
+        "8": 8,
+      },
+      "transition": Object {
+        "default": Object {
+          "duration": 0.2,
+        },
+      },
+      "typography": Object {
+        "size": Object {
+          "12": Object {
+            "fontSize": 12,
+            "lineHeight": 20,
+          },
+          "14": Object {
+            "fontSize": 14,
+            "lineHeight": 22,
+          },
+          "16": Object {
+            "fontSize": 16,
+            "lineHeight": 24,
+          },
+          "20": Object {
+            "fontSize": 20,
+            "lineHeight": 28,
+          },
+          "32": Object {
+            "fontSize": 32,
+            "lineHeight": 40,
+          },
+        },
+      },
+    }
+  }
+  variant="Default"
+>
+  Hello
+</a>
+`;

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

@@ -0,0 +1,25 @@
+import 'jest-styled-components'
+
+import React from 'react'
+import Button from '.'
+import renderder from 'react-test-renderer'
+import { ThemeProvider } from 'styled-components'
+import { light } from '@charcoal-ui/theme'
+
+export function render(children: JSX.Element) {
+  return renderder
+    .create(<ThemeProvider theme={light}>{children}</ThemeProvider>)
+    .toJSON()
+}
+
+describe('Basic', () => {
+  test('<Button>Hello</Button>', () => {
+    expect(render(<Button>Hello</Button>)).toMatchSnapshot()
+  })
+})
+
+describe('Link', () => {
+  test('<Button to="#">Hello</Button>', () => {
+    expect(render(<Button to="#">Hello</Button>)).toMatchSnapshot()
+  })
+})

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

@@ -13,6 +13,7 @@ type Props = {
   defaultChecked: boolean
   disabled: boolean
   readonly: boolean
+  className?: string
 }
 
 export const Labelled: Story<Props> = (props) => {

package/src/components/Checkbox/index.tsx

@@ -20,6 +20,7 @@ type CheckboxLabelProps =
 export type CheckboxProps = CheckboxLabelProps & {
   readonly id?: string
   readonly name?: string
+  readonly className?: string
 
   readonly checked?: boolean
   readonly defaultChecked?: boolean
@@ -52,7 +53,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false)
 
     return (
-      <InputRoot aria-disabled={isDisabled}>
+      <InputRoot aria-disabled={isDisabled} className={props.className}>
         <CheckboxRoot>
           <CheckboxInput type="checkbox" {...inputProps} />
           <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>

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

@@ -21,9 +21,15 @@ export function Basic() {
   const size = number('size', 48)
   const padding = number('padding', 16)
   const transparent = boolean('transparent', false)
+  const className = text('className', 'basic')
 
   return (
-    <LoadingSpinner size={size} padding={padding} transparent={transparent} />
+    <LoadingSpinner
+      size={size}
+      padding={padding}
+      transparent={transparent}
+      className={className}
+    />
   )
 }
 

package/src/components/LoadingSpinner/index.tsx

@@ -1,19 +1,35 @@
-import React, { useImperativeHandle, useRef } from 'react'
+import React, { forwardRef, memo, useImperativeHandle, useRef } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { theme } from '../../styled'
 
-export default function LoadingSpinner({
-  size = 48,
-  padding = 16,
-  transparent = false,
-}) {
-  return (
-    <LoadingSpinnerRoot size={size} padding={padding} transparent={transparent}>
-      <LoadingSpinnerIcon />
-    </LoadingSpinnerRoot>
-  )
+export type LoadingSpinnerProps = {
+  readonly size?: number
+  readonly padding?: number
+  readonly transparent?: boolean
+  readonly className?: string
 }
 
+const LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(
+  function LoadingSpinnerInner(
+    { size = 48, padding = 16, transparent = false, className },
+    ref
+  ) {
+    return (
+      <LoadingSpinnerRoot
+        size={size}
+        padding={padding}
+        transparent={transparent}
+        className={className}
+        ref={ref}
+      >
+        <LoadingSpinnerIcon />
+      </LoadingSpinnerRoot>
+    )
+  }
+)
+
+export default memo(LoadingSpinner)
+
 const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   size: number
   padding: number

package/src/components/Modal/index.tsx

@@ -1,4 +1,4 @@
-import React, { useContext, useRef } from 'react'
+import React, { forwardRef, memo, useContext } from 'react'
 import {
   AriaModalOverlayProps,
   Overlay,
@@ -17,6 +17,7 @@ import { useMedia } from '@charcoal-ui/styled'
 import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
 import IconButton from '../IconButton'
+import { useObjectRef } from '@react-aria/utils'
 
 type BottomSheet = boolean | 'full'
 type Size = 'S' | 'M' | 'L'
@@ -30,6 +31,7 @@ export type ModalProps = AriaModalOverlayProps &
     bottomSheet?: BottomSheet
     isOpen: boolean
     onClose: () => void
+    className?: string
 
     /**
      * https://github.com/adobe/react-spectrum/issues/3787
@@ -55,31 +57,32 @@ const DEFAULT_Z_INDEX = 10
  *
  * <OverlayProvider>
  *   <App>
- *     <Modal isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
+ *     <Modal title="Title" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
  *       <ModalHeader />
- *       <ModalBody>...</ModalBody>
- *       <ModalButtons>...</ModalButtons>
+ *       <ModalBody>
+ *         ...
+ *         <ModalButtons>...</ModalButtons>
+ *       </ModalBody>
  *     </Modal>
  *   </App>
  * </OverlayProvider>
  * ```
  */
-export default function Modal({
-  children,
-  zIndex = DEFAULT_Z_INDEX,
-  portalContainer,
-  ...props
-}: ModalProps) {
+const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
+  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },
+  external
+) {
   const {
     title,
     size = 'M',
     bottomSheet = false,
     isDismissable,
     onClose,
+    className,
     isOpen = false,
   } = props
 
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useObjectRef<HTMLDivElement>(external)
   const { overlayProps, underlayProps } = useOverlay(props, ref)
 
   const { modalProps } = useModalOverlay(
@@ -145,6 +148,7 @@ export default function Modal({
                   style={transitionEnabled ? { transform } : {}}
                   size={size}
                   bottomSheet={bottomSheet}
+                  className={className}
                 >
                   <ModalContext.Provider
                     value={{ titleProps, title, close: onClose, showDismiss }}
@@ -165,7 +169,9 @@ export default function Modal({
         </Overlay>
       )
   )
-}
+})
+
+export default memo(Modal)
 
 const ModalContext = React.createContext<{
   titleProps: React.HTMLAttributes<HTMLElement>

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

@@ -61,6 +61,7 @@ type Props = {
   readonly?: boolean
   hasError?: boolean
   variant?: 'default' | 'overlay'
+  className?: string
 }
 
 const StyledMultiSelectGroup = styled(MultiSelectGroup)`
@@ -79,6 +80,7 @@ const Template: Story<Props> = ({
   readonly,
   hasError,
   variant,
+  className,
 }) => {
   return (
     <StyledMultiSelectGroup
@@ -90,7 +92,6 @@ const Template: Story<Props> = ({
         readonly,
         hasError,
       }}
-      className={''}
       selected={selected ? ['選択肢1', '選択肢3'] : []}
     >
       {[1, 2, 3, 4].map((idx) => (
@@ -99,6 +100,7 @@ const Template: Story<Props> = ({
           forceChecked={firstOptionForceChecked && idx === 1}
           variant={variant}
           key={idx}
+          className={className}
         >
           選択肢{idx}
         </MultiSelect>
@@ -127,10 +129,11 @@ type PlaygroundProps = {
   disabled?: boolean
   readonly?: boolean
   hasError?: boolean
+  className?: string
   variant?: 'default' | 'overlay'
 }
 
-export const Playground: Story<PlaygroundProps> = (props) => {
+export const Playground: Story<PlaygroundProps> = ({ className, ...props }) => {
   const [selected, setSelected] = useState<string[]>([])
 
   return (
@@ -140,7 +143,12 @@ export const Playground: Story<PlaygroundProps> = (props) => {
       onChange={setSelected}
     >
       {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect value={`選択肢${idx}`} variant={props.variant} key={idx}>
+        <MultiSelect
+          value={`選択肢${idx}`}
+          variant={props.variant}
+          key={idx}
+          className={className}
+        >
           選択肢{idx}
         </MultiSelect>
       ))}