@charcoal-ui/react 3.10.1 → 3.11.0

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests MultiSelect Default 1`] = `
+exports[`Storybook Tests MultiSelect Basic 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -136,7 +136,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -149,7 +149,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={true}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -166,8 +166,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -179,7 +178,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -196,8 +195,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -209,7 +207,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={true}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -226,8 +224,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -239,7 +236,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name=""
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -256,8 +253,7 @@ exports[`Storybook Tests MultiSelect Default 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -405,7 +401,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -418,7 +414,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -435,8 +431,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -448,7 +443,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -465,8 +460,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -478,7 +472,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -495,8 +489,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -508,7 +501,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -525,8 +518,7 @@ exports[`Storybook Tests MultiSelect Invalid 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -673,7 +665,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
   data-dark={false}
 >
   <div
-    aria-label=""
+    aria-label="label"
     className="c0"
     data-testid="SelectGroup"
   >
@@ -686,7 +678,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -703,8 +695,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        1
+        選択肢1
       </div>
     </label>
     <label
@@ -716,7 +707,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -733,8 +724,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        2
+        選択肢2
       </div>
     </label>
     <label
@@ -746,7 +736,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -763,8 +753,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        3
+        選択肢3
       </div>
     </label>
     <label
@@ -776,7 +765,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name="name"
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"
@@ -793,8 +782,7 @@ exports[`Storybook Tests MultiSelect Overlay 1`] = `
       <div
         className="c4"
       >
-        選択肢
-        4
+        選択肢4
       </div>
     </label>
   </div>
@@ -950,7 +938,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢1"
@@ -980,7 +968,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢2"
@@ -1010,7 +998,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢3"
@@ -1040,7 +1028,7 @@ exports[`Storybook Tests MultiSelect Playground 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="defaultName"
+        name=""
         onChange={[Function]}
         type="checkbox"
         value="選択肢4"

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

@@ -1,42 +1,19 @@
 import { useState } from 'react'
-import { Story } from '../../_lib/compat'
 import styled from 'styled-components'
 import { MultiSelectGroup, default as MultiSelect } from '.'
+import { Meta, StoryObj } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
+
+const StyledMultiSelectGroup = styled(MultiSelectGroup)`
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+`
 
 export default {
   title: 'MultiSelect',
   component: MultiSelect,
   argTypes: {
-    name: {
-      control: {
-        type: 'text',
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-    },
-    selected: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    readonly: {
-      control: {
-        type: 'boolean',
-      },
-    },
-    invalid: {
-      control: {
-        type: 'boolean',
-      },
-    },
     variant: {
       control: {
         type: 'inline-radio',
@@ -44,173 +21,92 @@ export default {
       },
     },
   },
-}
-
-type Props = {
-  name: string
-  label: string
-  selected: boolean
-  onChange: (selected: string[]) => void
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  variant?: 'default' | 'overlay'
-  className?: string
-}
-
-const StyledMultiSelectGroup = styled(MultiSelectGroup)`
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 8px;
-`
-
-const Template: Story<Props> = ({
-  name,
-  label,
-  selected,
-  onChange,
-  disabled,
-  readonly,
-  invalid,
-  variant,
-  className,
-}) => {
-  return (
-    <StyledMultiSelectGroup
-      {...{
-        name,
-        label,
-        onChange,
-        disabled,
-        readonly,
-        invalid,
-      }}
-      selected={selected ? ['選択肢1', '選択肢3'] : []}
-    >
-      {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          variant={variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-
-export const Default = Template.bind({})
-Default.args = {
-  name: '',
-  label: '',
-  selected: true,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'default',
-  // eslint-disable-next-line no-console
-  onChange: (selected) => console.log(selected),
-}
+  args: {
+    variant: 'default',
+  },
+} as Meta<typeof MultiSelect>
 
-type PlaygroundProps = {
-  name: string
-  label: string
-  disabled?: boolean
-  readonly?: boolean
-  invalid?: boolean
-  className?: string
-  variant?: 'default' | 'overlay'
+export const Basic: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={['選択肢1', '選択肢3']}
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }
 
-export const Playground: 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={props.variant}
-          key={idx}
-          className={className}
-        >
-          選択肢{idx}
-        </MultiSelect>
-      ))}
-    </StyledMultiSelectGroup>
-  )
-}
-Playground.args = {
-  name: 'defaultName',
-  label: '',
-  disabled: false,
-  readonly: false,
-  invalid: false,
-  variant: 'default',
+export const Invalid: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={[]}
+        invalid
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }
 
-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: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    const options = ['選択肢1', '選択肢2', '選択肢3', '選択肢4']
+    return (
+      <StyledMultiSelectGroup
+        name="name"
+        label="label"
+        onChange={action('click')}
+        selected={[]}
+      >
+        {options.map((option) => (
+          <MultiSelect {...args} value={option} key={option}>
+            {option}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
+  args: {
+    variant: 'overlay',
+  },
 }
 
-export const Overlay: Story<PlaygroundProps> = ({ className, ...props }) => {
-  const [selected, setSelected] = useState<string[]>([])
+export const Playground: StoryObj<typeof MultiSelect> = {
+  render: function Render(args) {
+    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,
+    return (
+      <StyledMultiSelectGroup
+        name=""
+        label=""
+        onChange={setSelected}
+        selected={selected}
+      >
+        {[1, 2, 3, 4].map((idx) => (
+          <MultiSelect {...args} value={`選択肢${idx}`} key={idx}>
+            選択肢{idx}
+          </MultiSelect>
+        ))}
+      </StyledMultiSelectGroup>
+    )
+  },
 }

package/src/components/MultiSelect/index.tsx

@@ -6,6 +6,7 @@ import { px } from '@charcoal-ui/utils'
 
 import { MultiSelectGroupContext } from './context'
 import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
+import Icon from '../Icon'
 
 export type MultiSelectProps = React.PropsWithChildren<{
   value: string
@@ -76,7 +77,7 @@ const MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(
           invalid={invalid}
           aria-hidden={true}
         >
-          <pixiv-icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
+          <Icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
         </MultiSelectInputOverlay>
         {Boolean(children) && <MultiSelectLabel>{children}</MultiSelectLabel>}
       </MultiSelectRoot>

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Radio Basic 1`] = `
+exports[`Storybook Tests Radio Default 1`] = `
 .c2 {
   display: grid;
   grid-template-columns: auto 1fr;