@charcoal-ui/react 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.6.0",
+  "version": "2.8.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.6.0",
-    "@charcoal-ui/styled": "^2.6.0",
-    "@charcoal-ui/theme": "^2.6.0",
-    "@charcoal-ui/utils": "^2.6.0",
+    "@charcoal-ui/icons": "^2.8.0",
+    "@charcoal-ui/styled": "^2.8.0",
+    "@charcoal-ui/theme": "^2.8.0",
+    "@charcoal-ui/utils": "^2.8.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": "8579b406b316285a35858512030d2143524ae154"
+  "gitHead": "f45afd2e7fd92a3bed12babb8e23e4524057a96d"
 }

package/src/components/Checkbox/index.tsx

@@ -107,8 +107,12 @@ const CheckboxInput = styled.input`
       border-color: ${({ theme }) => theme.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `
+
 const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
   position: absolute;
   top: -2px;

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

@@ -47,6 +47,7 @@ export const Sections: Story<DropdownSelectorProps> = (props) => {
     <div>
       <DropdownSelector
         {...props}
+        label="sections"
         placeholder={'Drop Down menu'}
         onChange={action('change')}
         onOpenChange={action('open')}
@@ -68,6 +69,7 @@ export const Bottom: Story<DropdownSelectorProps> = (props) => {
     <div style={{ marginTop: '1000px' }}>
       <DropdownSelector
         {...props}
+        label="bottom"
         placeholder={'Drop Down menu'}
         onChange={action('change')}
         onOpenChange={action('open')}
@@ -86,6 +88,7 @@ export const Many: Story<DropdownSelectorProps> = (props) => {
     <div style={{ padding: '300px 100px' }}>
       <DropdownSelector
         {...props}
+        label="many"
         placeholder={'Drop Down menu'}
         onChange={(v) => {
           setValue(v.toString())
@@ -181,7 +184,7 @@ type InvalidProps = {
 }
 export const Invalid: Story<InvalidProps> = ({ disabled }) => {
   const props: Omit<DropdownSelectorProps, 'children'> = {
-    label: '',
+    label: 'invalid',
     assertiveText: 'error message',
     invalid: true,
   }

package/src/components/LoadingSpinner/index.tsx

@@ -19,6 +19,7 @@ const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   padding: number
   transparent: boolean
 }>`
+  box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
   border-radius: 8px;

package/src/components/Modal/ModalPlumbing.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import { ModalTitle } from '.'
 import styled from 'styled-components'
 import { theme } from '../../styled'
-import { maxWidth } from '@charcoal-ui/utils'
 
 export function ModalHeader() {
   return (
@@ -24,11 +23,7 @@ const StyledModalTitle = styled(ModalTitle)`
 `
 
 export const ModalAlign = styled.div`
-  ${theme((o) => [o.padding.horizontal(24)])}
-
-  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16)])}
 `
 
 export const ModalBody = styled.div`
@@ -39,9 +34,6 @@ export const ModalButtons = styled.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
-  ${theme((o) => [o.padding.horizontal(24).top(16)])}
 
-  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16).top(16)])}
 `

package/src/components/Modal/index.tsx

@@ -18,13 +18,16 @@ import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
 import IconButton from '../IconButton'
 
+type BottomSheet = boolean | 'full'
+type Size = 'S' | 'M' | 'L'
+
 export type ModalProps = AriaModalOverlayProps &
   AriaDialogProps & {
     children: React.ReactNode
     zIndex?: number
     title: string
-    size?: 'S' | 'M' | 'L'
-    bottomSheet?: boolean | 'full'
+    size?: Size
+    bottomSheet?: BottomSheet
     isOpen: boolean
     onClose: () => void
 
@@ -133,28 +136,30 @@ export default function Modal({
             style={transitionEnabled ? { backgroundColor } : {}}
           >
             <FocusScope contain restoreFocus autoFocus>
-              <ModalDialog
-                ref={ref}
-                {...overlayProps}
-                {...modalProps}
-                {...dialogProps}
-                style={transitionEnabled ? { transform } : {}}
-                size={size}
-                bottomSheet={bottomSheet}
-              >
-                <ModalContext.Provider
-                  value={{ titleProps, title, close: onClose, showDismiss }}
+              <DialogContainer bottomSheet={bottomSheet} size={size}>
+                <ModalDialog
+                  ref={ref}
+                  {...overlayProps}
+                  {...modalProps}
+                  {...dialogProps}
+                  style={transitionEnabled ? { transform } : {}}
+                  size={size}
+                  bottomSheet={bottomSheet}
                 >
-                  {children}
-                  {isDismissable === true && (
-                    <ModalCrossButton
-                      size="S"
-                      icon="24/Close"
-                      onClick={onClose}
-                    />
-                  )}
-                </ModalContext.Provider>
-              </ModalDialog>
+                  <ModalContext.Provider
+                    value={{ titleProps, title, close: onClose, showDismiss }}
+                  >
+                    {children}
+                    {isDismissable === true && (
+                      <ModalCrossButton
+                        size="S"
+                        icon="24/Close"
+                        onClick={onClose}
+                      />
+                    )}
+                  </ModalContext.Provider>
+                </ModalDialog>
+              </DialogContainer>
             </FocusScope>
           </ModalBackground>
         </Overlay>
@@ -176,6 +181,8 @@ const ModalContext = React.createContext<{
 
 const ModalBackground = animated(styled.div<{ zIndex: number }>`
   z-index: ${({ zIndex }) => zIndex};
+  overflow: scroll;
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -185,50 +192,61 @@ const ModalBackground = animated(styled.div<{ zIndex: number }>`
   ${theme((o) => [o.bg.surface4])}
 `)
 
+const DialogContainer = styled.div<{ bottomSheet: BottomSheet; size: Size }>`
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
+  width: ${(p) => {
+    switch (p.size) {
+      case 'S': {
+        return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      case 'M': {
+        return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      case 'L': {
+        return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      default: {
+        return unreachable(p.size)
+      }
+    }
+  }}px;
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    width: calc(100% - 48px);
+    ${(p) =>
+      p.bottomSheet !== false &&
+      css`
+        margin: 0;
+        padding: 0;
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+        ${p.bottomSheet === 'full' ? 'height: 100%' : ''};
+      `}
+  }
+`
+
 const ModalDialog = animated(styled.div<{
-  size: 'S' | 'M' | 'L'
-  bottomSheet: boolean | 'full'
+  size: Size
+  bottomSheet: BottomSheet
 }>`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: ${(p) =>
-    p.size === 'S'
-      ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : p.size === 'M'
-      ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      p.size === 'L'
-      ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : unreachable(p.size)}px;
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-
   @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
     ${(p) =>
-      p.bottomSheet === 'full'
-        ? css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-            height: 100%;
-          `
-        : p.bottomSheet
-        ? css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-          `
-        : css`
-            width: calc(100% - 48px);
-          `}
+      p.bottomSheet !== false &&
+      css`
+        border-radius: 0;
+        ${p.bottomSheet === 'full' &&
+        css`
+          height: 100%;
+        `}
+      `}
   }
 `)
 

package/src/components/Radio/index.tsx

@@ -110,6 +110,9 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     }
 
     ${theme((o) => o.outline.default.focus)}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `
 

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

@@ -13,6 +13,7 @@ export const StringSegments: Story<SegmentedControlProps> = (props) => {
 }
 
 StringSegments.args = {
+  name: 'test',
   data: ['option1', 'option2', 'option3'],
   disabled: false,
   readonly: false,
@@ -24,6 +25,7 @@ export const ObjectSegments: Story<SegmentedControlProps> = (props) => {
 }
 
 ObjectSegments.args = {
+  name: 'test',
   data: [
     { label: '選択肢1', value: 'option1' },
     { label: '選択肢2', value: 'option2' },

package/src/components/SegmentedControl/index.tsx

@@ -41,6 +41,7 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         isDisabled: props.disabled,
         isReadOnly: props.readonly,
         isRequired: props.required,
+        'aria-label': props.name,
       }),
       [props]
     )

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

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
+import React, { useState } from 'react'
 import { Story } from '../../_lib/compat'
 import Switch from '.'
 
@@ -13,6 +13,25 @@ interface Props {
   disabled: boolean
 }
 
+export const Playground: Story<Props> = (props: Props) => {
+  const [checked, setChecked] = useState(false)
+  return (
+    <div>
+      <Switch
+        {...props}
+        name="name"
+        onChange={(v) => {
+          setChecked(v)
+          action('onChange')
+        }}
+        checked={checked}
+      >
+        選択する
+      </Switch>
+    </div>
+  )
+}
+
 export const Labelled: Story<Props> = (props: Props) => (
   <div>
     <Switch {...props} name="name" onChange={action('onChange')}>

package/src/components/Switch/index.tsx

@@ -64,6 +64,10 @@ const Label = styled.label`
 
   ${theme((o) => o.disabled)}
 
+  :active > input {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
+
   ${disabledSelector} {
     cursor: default;
   }
@@ -80,42 +84,63 @@ const LabelInner = styled.div`
 const SwitchInput = styled.input.attrs({
   type: 'checkbox',
 })`
-  &[type='checkbox'] {
-    appearance: none;
-    display: inline-flex;
-    position: relative;
-    box-sizing: border-box;
-    width: 28px;
-    border: 2px solid transparent;
-    transition: box-shadow 0.2s, background-color 0.2s;
-    cursor: inherit;
-    ${theme((o) => [
-      o.borderRadius(16),
-      o.height.px(16),
-      o.bg.text4.hover.press,
-      o.outline.default.focus,
-      o.margin.all(0),
-    ])}
+  appearance: none;
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  border: 2px solid transparent;
 
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      top: 0;
-      left: 0;
-      width: 12px;
-      height: 12px;
-      transform: translateX(0);
-      transition: transform 0.2s;
-      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}
-    }
+  transition-property: background-color, box-shadow;
+  transition-duration: 0.2s;
+  cursor: inherit;
+
+  outline: none;
+  border-radius: 16px;
+  height: 16px;
+  margin: 0;
+  background-color: var(--charcoal-text4);
+  :hover {
+    background-color: var(--charcoal-text4-hover);
+  }
+  :active {
+    background-color: var(--charcoal-text4-press);
+  }
+  :focus {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
 
-    &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    transform: translateX(0);
+    transition: transform 0.2s;
+    border-radius: 1024px;
+    background-color: var(--charcoal-text5);
+    :hover {
+      background-color: var(--charcoal-text5-hover);
+    }
+    :active {
+      background-color: var(--charcoal-text5-press);
+    }
+  }
 
-      &::after {
-        transform: translateX(12px);
-      }
+  &:checked {
+    background-color: var(--charcoal-brand);
+    :hover {
+      background-color: var(--charcoal-brand-hover);
+    }
+    :active {
+      background-color: var(--charcoal-brand-press);
+    }
+    &::after {
+      transform: translateX(12px);
+      transition: transform 0.2s;
     }
   }
 `

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

@@ -25,6 +25,7 @@ Default.args = {
   href: '',
   rel: '',
   target: '',
+  className: '',
 }
 
 export const Playground: Story<TagItemProps> = ({

package/src/components/TagItem/index.tsx

@@ -24,6 +24,7 @@ export type TagItemProps = {
   status?: 'default' | 'active' | 'inactive'
   size?: keyof typeof sizeMap
   disabled?: boolean
+  className?: string
 } & Pick<ComponentPropsWithoutRef<'a'>, 'href' | 'target' | 'rel' | 'onClick'>
 
 const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
@@ -36,6 +37,7 @@ const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
       size = 'M',
       disabled,
       status = 'default',
+      className,
       ...props
     },
     _ref
@@ -60,6 +62,7 @@ const TagItem = forwardRef<HTMLAnchorElement, TagItemProps>(
         size={hasTranslatedLabel ? 'M' : size}
         status={status}
         {...buttonProps}
+        className={className}
       >
         <Background bgColor={bgColor} bgImage={bgImage} status={status} />
 

package/src/components/TextField/index.tsx

@@ -417,6 +417,13 @@ const StyledTextareaContainer = styled.div<{ rows: number; invalid: boolean }>`
       o.borderRadius(4),
     ])}
 
+  /**
+   * FIXME: o.outline.default を &:focus-within 内に書いてると、外れるときに transition が効かない
+   * 本来 o.outline.default.focus と書けば足してくれるような transition の内容を一旦明示している
+   * o.outline.default.focusWithin のようなものがあればこの行は不要になるはず
+   */
+  transition: box-shadow 0.2s;
+
   &:focus-within {
     ${(p) =>
       theme((o) => (p.invalid ? o.outline.assertive : o.outline.default))}

package/src/index.ts

@@ -52,11 +52,12 @@ export {
 } from './components/LoadingSpinner'
 export {
   default as DropdownSelector,
+  type DropdownSelectorProps,
   DropdownSelectorItem,
 } from './components/DropdownSelector'
 export {
   default as SegmentedControl,
   type SegmentedControlProps,
 } from './components/SegmentedControl'
-export { default as Checkbox } from './components/Checkbox'
+export { default as Checkbox, type CheckboxProps } from './components/Checkbox'
 export { default as TagItem, type TagItemProps } from './components/TagItem'