@charcoal-ui/react 3.6.0 → 3.8.0

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

@@ -1,76 +1,141 @@
-import { action } from '@storybook/addon-actions'
-import { css } from 'styled-components'
-import { Story } from '../../_lib/compat'
+import styled from 'styled-components'
 import Radio, { RadioGroup } from '.'
 import { px } from '@charcoal-ui/utils'
-
-const options = ['value1', 'value2']
+import { StoryObj } from '@storybook/react'
+import { useState } from 'react'
 
 export default {
   title: 'Radio',
   component: Radio,
-  argTypes: {
-    value: {
-      control: { type: 'select' },
-      options,
-    },
-  },
   args: {
-    invalid: false,
-    parentDisabled: false,
-    childDisabled: false,
-    readonly: false,
+    name: 'name',
+    label: 'label',
+  },
+  parameters: {
+    layout: 'centered',
   },
 }
 
-interface Props {
-  value?: string
-  invalid: boolean
-  parentDisabled: boolean
-  childDisabled: boolean
-  readonly: boolean
-  className?: string
+const LayoutDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => px(theme.spacing[24])};
+`
+
+export const Basic: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
 }
 
-const Template: Story<Partial<Props>> = ({
-  value,
-  invalid,
-  parentDisabled,
-  childDisabled,
-  readonly,
-  className,
-}) => (
-  <div
-    css={css`
-      display: flex;
-      flex-direction: column;
-      gap: ${({ theme }) => px(theme.spacing[24])};
-    `}
-  >
-    {['name1', 'name2', 'name3'].map((name) => (
-      <RadioGroup
-        key={name}
-        label={`選択肢-${name}`}
-        name={name}
-        value={value}
-        onChange={action('onChange')}
-        disabled={parentDisabled}
-        readonly={readonly}
-        invalid={invalid}
-      >
-        {options.map((option) => (
-          <Radio
-            key={option}
-            value={option}
-            disabled={childDisabled}
-            className={className}
-          >
-            {name}({option})を選ぶ
-          </Radio>
-        ))}
-      </RadioGroup>
-    ))}
-  </div>
-)
+export const Disabled: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+          disabled
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option} disabled>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}
 
-export const Default = Template.bind({})
+export const PartialDisabled: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option} disabled={option === '2'}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}
+
+export const Readonly: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+          readonly
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}
+
+export const Invalid: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+          invalid
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}

package/src/components/Radio/index.tsx

@@ -1,7 +1,8 @@
 import { memo, forwardRef, useCallback, useContext } from 'react'
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import warning from 'warning'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 export type RadioProps = React.PropsWithChildren<{
   value: string
@@ -45,7 +46,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
         name={name}
         value={value}
         checked={isSelected}
-        invalid={invalid}
+        aria-invalid={invalid}
         onChange={handleChange}
         disabled={isDisabled || isReadonly}
         ref={ref}
@@ -70,9 +71,7 @@ const RadioRoot = styled.label`
   }
 `
 
-export const RadioInput = styled.input.attrs({ type: 'radio' })<{
-  invalid?: boolean
-}>`
+export const RadioInput = styled.input.attrs({ type: 'radio' })`
   /** Make prior to browser default style */
   &[type='radio'] {
     appearance: none;
@@ -91,23 +90,18 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
 
     &: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);
+      ${focusVisibleFocusRingCss}
+      &[aria-invalid='true'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        &:focus {
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        }
       }
     }
 

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots SegmentedControl Object Segments 1`] = `
+exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -95,7 +95,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
     aria-label="test"
     aria-orientation="vertical"
     className="c0"
-    id="react-aria-1"
+    id="test-id"
     onBlur={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -110,7 +110,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -149,7 +149,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -188,7 +188,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -227,7 +227,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         checked={false}
         className="c2"
         disabled={true}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -259,7 +259,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
 </div>
 `;
 
-exports[`Storyshots SegmentedControl String Segments 1`] = `
+exports[`Storybook Tests SegmentedControl StringSegments 1`] = `
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -354,7 +354,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
     aria-label="test"
     aria-orientation="vertical"
     className="c0"
-    id="react-aria-5"
+    id="test-id"
     onBlur={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -369,7 +369,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -408,7 +408,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -447,7 +447,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}

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

@@ -1,37 +1,32 @@
-import { action } from '@storybook/addon-actions'
-import SegmentedControl, { SegmentedControlProps } from '.'
-import { Story } from '../../_lib/compat'
+import SegmentedControl from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'SegmentedControl',
   component: SegmentedControl,
-}
-
-export const StringSegments: Story<SegmentedControlProps> = (props) => {
-  return <SegmentedControl {...props} onChange={action('change')} />
-}
-
-StringSegments.args = {
-  name: 'test',
-  data: ['option1', 'option2', 'option3'],
-  disabled: false,
-  readonly: false,
-  required: false,
-}
+} as Meta<typeof SegmentedControl>
 
-export const ObjectSegments: Story<SegmentedControlProps> = (props) => {
-  return <SegmentedControl {...props} onChange={action('change')} />
+export const StringSegments: StoryObj<typeof SegmentedControl> = {
+  args: {
+    name: 'test',
+    data: ['option1', 'option2', 'option3'],
+    disabled: false,
+    readonly: false,
+    required: false,
+  },
 }
 
-ObjectSegments.args = {
-  name: 'test',
-  data: [
-    { label: '選択肢1', value: 'option1' },
-    { label: '選択肢2', value: 'option2' },
-    { label: '選択肢3', value: 'option3' },
-    { label: '選択肢4', value: 'option4', disabled: true },
-  ],
-  disabled: false,
-  readonly: false,
-  required: false,
+export const ObjectSegments: StoryObj<typeof SegmentedControl> = {
+  args: {
+    name: 'test',
+    data: [
+      { label: '選択肢1', value: 'option1' },
+      { label: '選択肢2', value: 'option2' },
+      { label: '選択肢3', value: 'option3' },
+      { label: '選択肢4', value: 'option4', disabled: true },
+    ],
+    disabled: false,
+    readonly: false,
+    required: false,
+  },
 }

package/src/components/SegmentedControl/index.tsx

@@ -1,6 +1,6 @@
 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,