@charcoal-ui/react 3.5.0 → 3.7.0

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

@@ -154,3 +154,63 @@ Playground.args = {
   invalid: false,
   variant: 'default',
 }
+
+export const Invalid: Story<PlaygroundProps> = ({ className, ...props }) => {
+  const [selected, setSelected] = useState<string[]>([])
+
+  return (
+    <StyledMultiSelectGroup
+      {...props}
+      selected={selected}
+      onChange={setSelected}
+      invalid
+    >
+      {[1, 2, 3, 4].map((idx) => (
+        <MultiSelect
+          value={`選択肢${idx}`}
+          variant={props.variant}
+          key={idx}
+          className={className}
+        >
+          選択肢{idx}
+        </MultiSelect>
+      ))}
+    </StyledMultiSelectGroup>
+  )
+}
+Invalid.args = {
+  name: 'defaultName',
+  label: '',
+  disabled: false,
+  readonly: false,
+  variant: 'default',
+}
+
+export const Overlay: Story<PlaygroundProps> = ({ className, ...props }) => {
+  const [selected, setSelected] = useState<string[]>([])
+
+  return (
+    <StyledMultiSelectGroup
+      {...props}
+      selected={selected}
+      onChange={setSelected}
+    >
+      {[1, 2, 3, 4].map((idx) => (
+        <MultiSelect
+          value={`選択肢${idx}`}
+          variant="overlay"
+          key={idx}
+          className={className}
+        >
+          選択肢{idx}
+        </MultiSelect>
+      ))}
+    </StyledMultiSelectGroup>
+  )
+}
+Overlay.args = {
+  name: 'defaultName',
+  label: '',
+  disabled: false,
+  readonly: false,
+}

package/src/components/MultiSelect/index.tsx

@@ -2,8 +2,7 @@ import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
 import styled, { css } from 'styled-components'
 import warning from 'warning'
-import { theme } from '../../styled'
-import { disabledSelector, px } from '@charcoal-ui/utils'
+import { px } from '@charcoal-ui/utils'
 
 import { MultiSelectGroupContext } from './context'
 
@@ -92,17 +91,36 @@ const MultiSelectRoot = styled.label`
   align-items: center;
   position: relative;
   cursor: pointer;
-  ${disabledSelector} {
+  gap: ${({ theme }) => px(theme.spacing[4])};
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
     cursor: default;
   }
-  gap: ${({ theme }) => px(theme.spacing[4])};
-  ${theme((o) => o.disabled)}
 `
 
 const MultiSelectLabel = styled.div`
   display: flex;
   align-items: center;
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 
 const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
@@ -115,18 +133,55 @@ const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
     width: 20px;
     height: 20px;
     margin: 0;
+    background-color: var(--charcoal-text3);
+    border-radius: 999999px;
+    transition: 0.2s background-color, 0.2s box-shadow;
 
     &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+      background-color: var(--charcoal-brand);
+      &:hover {
+        &:not(:disabled):not([aria-disabled]),
+        &[aria-disabled='false'] {
+          background-color: var(--charcoal-brand-hover);
+        }
+      }
+
+      &:active {
+        &:not(:disabled):not([aria-disabled]),
+        &[aria-disabled='false'] {
+          background-color: var(--charcoal-brand-press);
+        }
+      }
+    }
+
+    &:hover {
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        background-color: var(--charcoal-text3-hover);
+      }
+    }
+
+    &:active {
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        background-color: var(--charcoal-text3-press);
+      }
     }
 
     ${({ invalid, overlay }) =>
-      theme((o) => [
-        o.bg.text3.hover.press,
-        o.borderRadius('oval'),
-        invalid && !overlay && o.outline.assertive,
-        overlay && o.bg.surface4,
-      ])};
+      invalid &&
+      !overlay &&
+      css`
+        &:not(:disabled):not([aria-disabled]),
+        &[aria-disabled='false'] {
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        }
+      `}
+    ${({ overlay }) =>
+      overlay &&
+      css`
+        background-color: var(--charcoal-surface4);
+      `}
   }
 `
 
@@ -141,20 +196,25 @@ const MultiSelectInputOverlay = styled.div<{
   display: flex;
   align-items: center;
   justify-content: center;
-
+  width: 24px;
+  height: 24px;
+  border-radius: 999999px;
+  color: var(--charcoal-text5);
+  transition: 0.2s box-shadow;
   ${({ invalid, overlay }) =>
-    theme((o) => [
-      o.width.px(24),
-      o.height.px(24),
-      o.borderRadius('oval'),
-      o.font.text5,
-      invalid && overlay && o.outline.assertive,
-    ])}
+    invalid &&
+    overlay &&
+    css`
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+      }
+    `}
 
   ${({ overlay }) =>
     overlay &&
     css`
-      border-color: ${({ theme }) => theme.color.text5};
+      border-color: var(--charcoal-text5);
       border-width: 2px;
       border-style: solid;
     `}

package/src/components/Radio/__snapshots__/index.story.storyshot

@@ -13,7 +13,7 @@ exports[`Storyshots Radio Default 1`] = `
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -30,44 +30,38 @@ exports[`Storyshots Radio Default 1`] = `
   cursor: pointer;
   border-radius: 999999px;
   background-color: var(--charcoal-surface1);
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c2[type='radio']:hover:not(:disabled):not([aria-disabled]),
-.c2[type='radio']:hover[aria-disabled=false] {
+.c2[type='radio']:not(:disabled):not([aria-disabled]):hover,
+.c2[type='radio'][aria-disabled='false']:hover {
   background-color: var(--charcoal-surface1-hover);
 }
 
-.c2[type='radio']:active:not(:disabled):not([aria-disabled]),
-.c2[type='radio']:active[aria-disabled=false] {
+.c2[type='radio']:not(:disabled):not([aria-disabled]):active,
+.c2[type='radio'][aria-disabled='false']:active {
   background-color: var(--charcoal-surface1-press);
 }
 
+.c2[type='radio']:not(:disabled):not([aria-disabled]):focus,
+.c2[type='radio'][aria-disabled='false']:focus,
+.c2[type='radio']:not(:disabled):not([aria-disabled]):active,
+.c2[type='radio'][aria-disabled='false']:active,
+.c2[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
+.c2[type='radio'][aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
 .c2[type='radio']:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: #858585;
+  border-color: var(--charcoal-text3);
 }
 
 .c2[type='radio']:checked {
   background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
-}
-
-.c2[type='radio']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='radio']:checked:hover[aria-disabled=false] {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c2[type='radio']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='radio']:checked:active[aria-disabled=false] {
-  background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='radio']:checked::after {
@@ -78,39 +72,28 @@ exports[`Storyshots Radio Default 1`] = `
   pointer-events: none;
   background-color: var(--charcoal-text5);
   border-radius: 999999px;
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
-}
-
-.c2[type='radio']:checked::after:hover:not(:disabled):not([aria-disabled]),
-.c2[type='radio']:checked::after:hover[aria-disabled=false] {
-  background-color: var(--charcoal-text5-hover);
+  -webkit-transition: 0.2s background-color,0.2s box-shadow;
+  transition: 0.2s background-color,0.2s box-shadow;
 }
 
-.c2[type='radio']:checked::after:active:not(:disabled):not([aria-disabled]),
-.c2[type='radio']:checked::after:active[aria-disabled=false] {
-  background-color: var(--charcoal-text5-press);
+.c2[type='radio']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='radio']:checked[aria-disabled='false']:hover {
+  background-color: var(--charcoal-brand-hover);
 }
 
-.c2[type='radio']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='radio'][aria-disabled=false]:focus,
-.c2[type='radio']:not(:disabled):not([aria-disabled]):active,
-.c2[type='radio'][aria-disabled=false]:active {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+.c2[type='radio']:checked:not(:disabled):not([aria-disabled]):hover::after,
+.c2[type='radio']:checked[aria-disabled='false']:hover::after {
+  background-color: var(--charcoal-text5-hover);
 }
 
-.c2[type='radio']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='radio'][aria-disabled=false]:focus:not(:focus-visible),
-.c2[type='radio']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='radio'][aria-disabled=false]:active:not(:focus-visible) {
-  outline: none;
+.c2[type='radio']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='radio']:checked[aria-disabled='false']:active {
+  background-color: var(--charcoal-brand-press);
 }
 
-.c2[type='radio']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='radio'][aria-disabled=false]:focus-visible {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+.c2[type='radio']:checked:not(:disabled):not([aria-disabled]):active::after,
+.c2[type='radio']:checked[aria-disabled='false']:active::after {
+  background-color: var(--charcoal-text5-press);
 }
 
 .c3 {

package/src/components/Radio/index.tsx

@@ -1,9 +1,7 @@
 import { memo, forwardRef, useCallback, useContext } from 'react'
 import * as React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import warning from 'warning'
-import { theme } from '../../styled'
-import { px } from '@charcoal-ui/utils'
 
 export type RadioProps = React.PropsWithChildren<{
   value: string
@@ -62,11 +60,14 @@ export default memo(Radio)
 const RadioRoot = styled.label`
   display: grid;
   grid-template-columns: auto 1fr;
-  grid-gap: ${({ theme }) => px(theme.spacing[4])};
+  grid-gap: 4px;
   align-items: center;
   cursor: pointer;
 
-  ${theme((o) => [o.disabled])}
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
 `
 
 export const RadioInput = styled.input.attrs({ type: 'radio' })<{
@@ -84,43 +85,90 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     width: 20px;
     height: 20px;
     cursor: pointer;
-
-    ${({ invalid = false }) =>
-      theme((o) => [
-        o.borderRadius('oval'),
-        o.bg.surface1.hover.press,
-        invalid && o.outline.assertive,
-      ])};
+    border-radius: 999999px;
+    background-color: var(--charcoal-surface1);
+    transition: 0.2s background-color, 0.2s box-shadow;
+
+    &:not(:disabled):not([aria-disabled]),
+    &[aria-disabled='false'] {
+      ${({ invalid = false }) =>
+        invalid &&
+        css`
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        `}
+
+      &:hover {
+        background-color: var(--charcoal-surface1-hover);
+      }
+      &:active {
+        background-color: var(--charcoal-surface1-press);
+      }
+      &:focus,
+      &:active,
+      &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+      }
+    }
 
     &:not(:checked) {
       border-width: 2px;
       border-style: solid;
-      border-color: ${({ theme }) => theme.color.text3};
+      border-color: var(--charcoal-text3);
     }
 
     &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
-
+      background-color: var(--charcoal-brand);
       &::after {
         content: '';
         display: block;
         width: 8px;
         height: 8px;
         pointer-events: none;
+        background-color: var(--charcoal-text5);
+        border-radius: 999999px;
+        transition: 0.2s background-color, 0.2s box-shadow;
+      }
 
-        ${theme((o) => [o.bg.text5.hover.press, o.borderRadius('oval')])}
+      &:not(:disabled):not([aria-disabled]),
+      &[aria-disabled='false'] {
+        &:hover {
+          background-color: var(--charcoal-brand-hover);
+          &::after {
+            background-color: var(--charcoal-text5-hover);
+          }
+        }
+        &:active {
+          background-color: var(--charcoal-brand-press);
+          &::after {
+            background-color: var(--charcoal-text5-press);
+          }
+        }
       }
     }
-
-    ${theme((o) => o.outline.default.focus)}
-
-    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
-    transition: all 0.2s !important;
   }
 `
 
 const RadioLabel = styled.div`
-  ${theme((o) => [o.typography(14), o.font.text2])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `
 
 export type RadioGroupProps = React.PropsWithChildren<{
@@ -138,7 +186,7 @@ export type RadioGroupProps = React.PropsWithChildren<{
 const StyledRadioGroup = styled.div`
   display: grid;
   grid-template-columns: 1fr;
-  grid-gap: ${({ theme }) => px(theme.spacing[8])};
+  grid-gap: 8px;
 `
 
 interface RadioGroupContext {

package/src/components/SegmentedControl/RadioGroupContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import * as React from 'react'
-import { RadioGroupState } from 'react-stately'
+import type { RadioGroupState } from '@react-stately/radio'
 
 const RadioContext = createContext<RadioGroupState | null>(null)
 

package/src/components/SegmentedControl/__snapshots__/index.story.storyshot

@@ -33,12 +33,8 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
   opacity: 0.32;
 }
 
@@ -129,6 +125,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        required={false}
         tabIndex={0}
         type="radio"
         value="option1"
@@ -167,6 +164,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        required={false}
         tabIndex={0}
         type="radio"
         value="option2"
@@ -205,6 +203,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        required={false}
         tabIndex={0}
         type="radio"
         value="option3"
@@ -242,6 +241,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        required={false}
         type="radio"
         value="option4"
       />
@@ -292,12 +292,8 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
 }
 
 .c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
+.c1[aria-disabled]:not([aria-disabled='false']) {
   cursor: default;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled=false]) {
   opacity: 0.32;
 }
 
@@ -388,6 +384,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        required={false}
         tabIndex={0}
         type="radio"
         value="option1"
@@ -426,6 +423,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        required={false}
         tabIndex={0}
         type="radio"
         value="option2"
@@ -464,6 +462,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         onTouchEnd={[Function]}
         onTouchMove={[Function]}
         onTouchStart={[Function]}
+        required={false}
         tabIndex={0}
         type="radio"
         value="option3"

package/src/components/SegmentedControl/index.tsx

@@ -1,17 +1,15 @@
 import { ReactNode, forwardRef, memo, useMemo, useRef } from 'react'
 import * as React from 'react'
-import { useRadioGroupState } from 'react-stately'
+import { useRadioGroupState } from '@react-stately/radio'
 import {
   AriaRadioGroupProps,
   AriaRadioProps,
   useRadio,
   useRadioGroup,
 } from '@react-aria/radio'
-import styled from 'styled-components'
-import { disabledSelector } from '@charcoal-ui/utils'
+import styled, { css } from 'styled-components'
 
 import { RadioProvider, useRadioContext } from './RadioGroupContext'
-import { theme } from '../../styled'
 
 type SegmentedControlItem = {
   label: React.ReactNode
@@ -120,7 +118,8 @@ const SegmentedControlRoot = styled.div`
   display: inline-flex;
   align-items: center;
 
-  ${theme((o) => [o.bg.surface3, o.borderRadius(16)])}
+  background-color: var(--charcoal-surface3);
+  border-radius: 16px;
 `
 
 const SegmentedRoot = styled.label<{ checked?: boolean }>`
@@ -130,18 +129,22 @@ const SegmentedRoot = styled.label<{ checked?: boolean }>`
   cursor: pointer;
   height: 32px;
 
-  ${disabledSelector} {
+  padding-right: 16px;
+  padding-left: 16px;
+  border-radius: 16px;
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
     cursor: default;
+    opacity: 0.32;
   }
-
-  ${({ checked }) =>
-    theme((o) => [
-      o.padding.horizontal(16),
-      o.borderRadius(16),
-      o.disabled,
-      checked === true && o.bg.brand,
-      checked === true ? o.font.text5 : o.font.text2,
-    ])}
+  color: var(--charcoal-text2);
+
+  ${({ checked = false }) =>
+    checked &&
+    css`
+      background-color: var(--charcoal-brand);
+      color: var(--charcoal-text5);
+    `}
 `
 const SegmentedInput = styled.input`
   position: absolute;
@@ -165,5 +168,22 @@ const RadioLabel = styled.div`
   height: 22px;
 `
 const SegmentedLabelInner = styled.div`
-  ${theme((o) => [o.typography(14)])}
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
 `