@charcoal-ui/react 2.6.0 → 3.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.6.0",
+  "version": "3.0.0-beta.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": "^3.0.0-beta.0",
+    "@charcoal-ui/styled": "^3.0.0-beta.0",
+    "@charcoal-ui/theme": "^3.0.0-beta.0",
+    "@charcoal-ui/utils": "^3.0.0-beta.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": "e3522bffb7136b259f31cef88920aebc7637a5b6"
 }

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

@@ -58,7 +58,7 @@ Small.args = {
 
 export const Fixed: Story<ButtonProps> = DefaultStory.bind({})
 Fixed.args = {
-  fixed: true,
+  fullWidth: true,
 }
 
 export const Disabled: Story<ButtonProps> = DefaultStory.bind({})
@@ -121,10 +121,10 @@ const LayoutExampleStory = (args: ButtonProps) => (
         gap: 8px;
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         Submit
       </Button>
-      <Button {...args} variant="Default" fixed>
+      <Button {...args} variant="Default" fullWidth>
         Cancel
       </Button>
     </div>
@@ -156,10 +156,10 @@ const LayoutExampleStory = (args: ButtonProps) => (
         }
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         Submit
       </Button>
-      <Button {...args} variant="Default" fixed>
+      <Button {...args} variant="Default" fullWidth>
         Cancel
       </Button>
     </div>
@@ -174,7 +174,7 @@ const LayoutExampleStory = (args: ButtonProps) => (
         }
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         すべて見る
       </Button>
       <Button {...args} variant="Default">

package/src/components/Button/index.tsx

@@ -19,7 +19,7 @@ interface StyledProps {
   /**
    * 幅を最大まで広げて描画
    */
-  fixed: boolean
+  fullWidth: boolean
 }
 
 export type ButtonProps = Partial<StyledProps> & ClickableProps
@@ -29,7 +29,7 @@ const Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(
     children,
     variant = 'Default',
     size = 'M',
-    fixed = false,
+    fullWidth: fixed = false,
     disabled = false,
     ...rest
   },
@@ -41,7 +41,7 @@ const Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(
       disabled={disabled}
       variant={variant}
       size={size}
-      fixed={fixed}
+      fullWidth={fixed}
       ref={ref}
     >
       {children}
@@ -54,11 +54,11 @@ const StyledButton = styled(Clickable)
   .withConfig<StyledProps>({
     shouldForwardProp(prop) {
       // fixed は <button> 要素に渡ってはいけない
-      return prop !== 'fixed'
+      return prop !== 'fullWidth'
     },
   })
   .attrs<StyledProps, ReturnType<typeof styledProps>>(styledProps)`
-  width: ${(p) => (p.fixed ? 'stretch' : 'min-content')};
+  width: ${(p) => (p.fullWidth ? 'stretch' : 'min-content')};
   display: inline-grid;
   align-items: center;
   justify-content: center;

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/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.story.tsx

@@ -76,10 +76,10 @@ const DefaultStory = (args: ModalProps) => {
             </ModalAlign>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fixed>
+            <Button variant="Primary" onClick={() => state.close()} fullWidth>
               Apply
             </Button>
-            <Button onClick={() => state.close()} fixed>
+            <Button onClick={() => state.close()} fullWidth>
               Cancel
             </Button>
           </ModalButtons>
@@ -140,10 +140,10 @@ const FullBottomSheetStory = (args: ModalProps) => {
             </ModalAlign>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fixed>
+            <Button variant="Primary" onClick={() => state.close()} fullWidth>
               Apply
             </Button>
-            <Button onClick={() => state.close()} fixed>
+            <Button onClick={() => state.close()} fullWidth>
               Cancel
             </Button>
           </ModalButtons>
@@ -181,7 +181,7 @@ const BottomSheetStory = (args: ModalProps) => {
             </StyledModalText>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Danger" onClick={() => state.close()} fixed>
+            <Button variant="Danger" onClick={() => state.close()} fullWidth>
               削除する
             </Button>
             <ModalDismissButton>キャンセル</ModalDismissButton>

package/src/components/Modal/index.tsx

@@ -263,7 +263,7 @@ export function ModalDismissButton({ children, ...props }: ButtonProps) {
   }
 
   return (
-    <Button {...props} onClick={close} fixed>
+    <Button {...props} onClick={close} fullWidth>
       {children}
     </Button>
   )

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/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))}