@charcoal-ui/react 2.6.0 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.6.0",
+  "version": "2.7.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.7.0",
+    "@charcoal-ui/styled": "^2.7.0",
+    "@charcoal-ui/theme": "^2.7.0",
+    "@charcoal-ui/utils": "^2.7.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": "77e32148d5a981f988e8bbc0c88aec82b0936a1a"
 }

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