From a932ccea07202179e69f1498e65b1701ff1f7d03 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Wed, 27 Nov 2024 21:55:14 +0900 Subject: [PATCH 01/15] =?UTF-8?q?docs:=20SingleComboBox=20=E3=81=AE=20Stor?= =?UTF-8?q?y=20=E3=82=92=E8=A6=8B=E7=9B=B4=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SingleComboBox.test.tsx} | 2 +- .../{ => SingleComboBox}/SingleComboBox.tsx | 21 +- .../ComboBox/SingleComboBox/index.ts | 1 + .../stories/SingleComboBox.stories.tsx | 166 ++++++++++ .../stories/VRTSingleComboBox.stories.tsx | 214 ++++++++++++ .../stories/singleComboBox.pict | 5 + .../ComboBox/SingleCombobox.stories.tsx | 305 ------------------ .../ComboBox/VRTSingleCombobox.stories.tsx | 53 --- 8 files changed, 397 insertions(+), 370 deletions(-) rename packages/smarthr-ui/src/components/ComboBox/{SingleCombobox.test.tsx => SingleComboBox/SingleComboBox.test.tsx} (99%) rename packages/smarthr-ui/src/components/ComboBox/{ => SingleComboBox}/SingleComboBox.tsx (96%) create mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleComboBox/index.ts create mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx create mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx create mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/singleComboBox.pict delete mode 100644 packages/smarthr-ui/src/components/ComboBox/SingleCombobox.stories.tsx delete mode 100644 packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.test.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.test.tsx similarity index 99% rename from packages/smarthr-ui/src/components/ComboBox/SingleCombobox.test.tsx rename to packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.test.tsx index 18fbdc3b77..5926c46d44 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.test.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.test.tsx @@ -2,7 +2,7 @@ import { userEvent } from '@storybook/test' import { render, screen } from '@testing-library/react' import React, { ComponentProps, act } from 'react' -import { FormControl } from '../FormControl' +import { FormControl } from '../../FormControl' import { SingleComboBox } from './SingleComboBox' diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx similarity index 96% rename from packages/smarthr-ui/src/components/ComboBox/SingleComboBox.tsx rename to packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx index 11c1ab47d6..110ce2a801 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/SingleComboBox.tsx @@ -14,18 +14,17 @@ import React, { import innerText from 'react-innertext' import { tv } from 'tailwind-variants' -import { useClick } from '../../hooks/useClick' -import { genericsForwardRef } from '../../libs/util' -import { textColor } from '../../themes' -import { UnstyledButton } from '../Button' -import { FaCaretDownIcon, FaCircleXmarkIcon } from '../Icon' -import { Input } from '../Input' +import { useClick } from '../../../hooks/useClick' +import { genericsForwardRef } from '../../../libs/util' +import { textColor } from '../../../themes' +import { UnstyledButton } from '../../Button' +import { FaCaretDownIcon, FaCircleXmarkIcon } from '../../Icon' +import { Input } from '../../Input' +import { useListBox } from '../useListBox' +import { useOptions } from '../useOptions' -import { useListBox } from './useListBox' -import { useOptions } from './useOptions' - -import type { BaseProps, ComboBoxItem } from './types' -import type { DecoratorsType } from '../../types' +import type { DecoratorsType } from '../../../types' +import type { BaseProps, ComboBoxItem } from '../types' type Props = BaseProps & { /** diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/index.ts b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/index.ts new file mode 100644 index 0000000000..f37ab59f1d --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/index.ts @@ -0,0 +1 @@ +export { SingleComboBox } from './SingleComboBox' diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx new file mode 100644 index 0000000000..6712742385 --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -0,0 +1,166 @@ +import { Meta, StoryObj } from '@storybook/react' +import React from 'react' + +import { FormControl } from '../../../FormControl' +import { FaCirclePlusIcon } from '../../../Icon' +import { Stack } from '../../../Layout' +import { SingleComboBox } from '../SingleComboBox' + +const defaultItems = { + 'option 1': { + label: 'option 1', + value: 'value-1', + data: { + name: 'test', + age: 23, + }, + }, + 'option 2': { + label: 'option 2', + value: 'value-2', + data: { + name: 'test 2', + age: 34, + }, + }, + 'option 3': { + label: 'option 3', + value: 'value-3', + disabled: true, + }, + 'option 4': { + label: 'option 4', + value: 'value-4', + }, + 'option 5': { + label: 'option 5', + value: 'value-5', + }, + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { + label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', + value: 'value-6', + }, + アイテムのラベルがReactNodeの場合: { + label: ( + + アイテムのラベルがReactNodeの場合 + （ダミーテキストダミーテキストダミーテキストダミーテキスト） + + ), + value: 'value-7', + }, +} +const prefixes = { なし: '', あり: } + +export default { + title: 'Forms（フォーム）/SingleComboBox', + component: SingleComboBox, + args: { + items: Object.values(defaultItems), + selectedItem: null, + defaultItem: defaultItems['option 1'], + }, + argTypes: { + items: { control: 'object' }, + selectedItem: { + control: { type: 'select' }, + options: Object.keys(defaultItems), + mapping: defaultItems, + }, + defaultItem: { + control: { type: 'select' }, + options: Object.keys(defaultItems), + mapping: defaultItems, + }, + prefix: { + control: 'radio', + options: Object.keys(prefixes), + mapping: prefixes, + }, + }, + parameters: { + chromatic: { disableSnapshot: true }, + }, +} as Meta + +export const Playground: StoryObj = {} + +export const SelectedItem: StoryObj = { + name: 'selectedItem', + args: { + selectedItem: defaultItems['option 2'], + }, +} + +export const DefaultItem: StoryObj = { + name: 'defaultItem', + args: { + defaultItem: defaultItems['option 4'], + }, +} + +export const Prefix: StoryObj = { + name: 'prefix', + render: (args) => ( +
+ + + + + + + + +
+ ), +} + +export const Disabled: StoryObj = { + name: 'disabled', + args: { + disabled: true, + }, +} + +export const Error: StoryObj = { + name: 'error', + args: { + error: true, + }, +} + +export const Creatable: StoryObj = { + name: 'creatable', + args: { + creatable: true, + dropdownHelpMessage: '新しいアイテムを追加できます。', + }, +} + +export const IsLoading: StoryObj = { + name: 'isLoading', + args: { + isLoading: true, + }, +} + +export const Width: StoryObj = { + name: 'width', + args: { + width: '500px', + }, +} + +export const DropdownHelpMessage: StoryObj = { + name: 'dropdownHelpMessage', + args: { + dropdownHelpMessage: 'ヘルプメッセージ', + }, +} + +export const DropdownWidth: StoryObj = { + name: 'dropdownWidth', + args: { + dropdownWidth: '300px', + }, +} diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx new file mode 100644 index 0000000000..69118366cf --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx @@ -0,0 +1,214 @@ +import { action } from '@storybook/addon-actions' +import { Meta, StoryFn, StoryObj } from '@storybook/react' +import { userEvent, within } from '@storybook/test' +import React, { ReactNode, useCallback, useState } from 'react' + +import { FormControl } from '../../../FormControl' +import { FaCirclePlusIcon } from '../../../Icon' +import { InformationPanel } from '../../../InformationPanel' +import { Stack } from '../../../Layout' +import { SingleComboBox } from '../SingleComboBox' + +const defaultItems = { + 'option 1': { + label: 'option 1', + value: 'value-1', + data: { + name: 'test', + age: 23, + }, + }, + 'option 2': { + label: 'option 2', + value: 'value-2', + data: { + name: 'test 2', + age: 34, + }, + }, + 'option 3': { + label: 'option 3', + value: 'value-3', + disabled: true, + }, + 'option 4': { + label: 'option 4', + value: 'value-4', + }, + 'option 5': { + label: 'option 5', + value: 'value-5', + }, + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { + label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', + value: 'value-6', + }, + アイテムのラベルがReactNodeの場合: { + label: ( + + アイテムのラベルがReactNodeの場合 + （ダミーテキストダミーテキストダミーテキストダミーテキスト） + + ), + value: 'value-7', + }, +} + +const prefixes = { なし: '', あり: } + +/* pict singleComboBox.pict + * disabled error width prefix selectedItem + * false false なし なし あり + * false true あり あり なし + * true true あり なし あり + * true false あり あり なし + * true true なし なし なし + * true false なし あり あり + */ + +const _cases: Array[0], 'items'>> = [ + { + disabled: false, + error: false, + width: undefined, + prefix: undefined, + selectedItem: defaultItems['option 1'], + }, + { disabled: false, error: true, width: '15em', prefix: prefixes['あり'], selectedItem: null }, + { + disabled: true, + error: true, + width: '15em', + prefix: undefined, + selectedItem: + defaultItems[ + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）' + ], + }, + { disabled: true, error: false, width: '15em', prefix: prefixes['あり'], selectedItem: null }, + { disabled: true, error: true, width: undefined, prefix: undefined, selectedItem: null }, + { + disabled: true, + error: false, + width: undefined, + prefix: prefixes['あり'], + selectedItem: defaultItems['アイテムのラベルがReactNodeの場合'], + }, +] + +export default { + title: 'Forms（フォーム）/SingleComboBox/VRT', + component: SingleComboBox, + render: (args) => ( + +
+ + + +
+ {[undefined, 'hover', 'focus-visible'].map((id) => ( + + {_cases.map((props, i) => ( +
+ + + +
+ ))} + + ))} + + ), + args: { + items: Object.values(defaultItems), + }, + parameters: { + withTheming: true, + chromatic: { disableSnapshot: false }, + }, + tags: ['!autodocs', 'skip-test-runner'], +} as Meta + +export const VRT: StoryObj = {} + +type Item = { label: ReactNode; value: string; disabled?: boolean; data?: any } + +const StoryFunctionSingleComboBox: StoryFn = () => { + const [items, setItems] = useState(Object.values(defaultItems)) + const [selectedItem, setSelectedItem] = useState(null) + const [seq, setSeq] = useState(0) + + const handleSelectItem = useCallback((item: Item) => { + action('onSelect')(item) + setSelectedItem(item) + }, []) + const handleClear = useCallback(() => { + action('onClear')() + setSelectedItem(null) + }, []) + const handleAddItem = useCallback( + (label: string) => { + action('onAdd')(label) + const newItem = { + label, + value: label, + } + setItems([...items, newItem]) + setSelectedItem(newItem) + setSeq(seq + 1) + }, + [items, seq], + ) + + const [itemsForDefault] = useState(Object.values(defaultItems)) + const [selectedItemForDefault, setSelectedItemForDefault] = useState(null) + + const handleSelectItemForDefault = useCallback((item: Item) => { + action('onSelect')(item) + setSelectedItemForDefault(item) + }, []) + const handleClearForDefault = useCallback(() => { + action('onClear')() + setSelectedItemForDefault(null) + }, []) + + return ( +
+ + + +
+ ) +} + +const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { + const canvas = within(canvasElement) + const textboxes = await canvas.findAllByRole('combobox') + await textboxes[0].focus() + const body = canvasElement.ownerDocument.body + const option = await within(body).findByText('option 1') + await userEvent.hover(option) + const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') + await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する +} +VRT.play = playSingle + +export const VRTForcedColors: StoryObj = { + ...VRT, + parameters: { + chromatic: { forcedColors: 'active' }, + }, +} diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/singleComboBox.pict b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/singleComboBox.pict new file mode 100644 index 0000000000..13e92e19e3 --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/singleComboBox.pict @@ -0,0 +1,5 @@ +disabled: true, false +error: true, false +width: あり, なし +prefix: あり, なし +selectedItem: あり, なし diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.stories.tsx deleted file mode 100644 index 45428c4d9b..0000000000 --- a/packages/smarthr-ui/src/components/ComboBox/SingleCombobox.stories.tsx +++ /dev/null @@ -1,305 +0,0 @@ -import { action } from '@storybook/addon-actions' -import { StoryFn } from '@storybook/react' -import React, { ReactNode, useCallback, useState } from 'react' - -import { FormControl } from '../FormControl' -import { Stack } from '../Layout' - -import { SingleComboBox } from '.' - -export default { - title: 'Forms（フォーム）/SingleComboBox', - component: SingleComboBox, - parameters: { - docs: { - source: { type: 'dynamic' }, - }, - }, -} - -const defaultItems = [ - { - label: 'option 1', - value: 'value-1', - data: { - name: 'test', - age: 23, - }, - }, - { - label: 'option 2', - value: 'value-2', - data: { - name: 'test 2', - age: 34, - }, - }, - { - label: 'option 3', - value: 'value-3', - disabled: true, - }, - { - label: 'option 4', - value: 'value-4', - }, - { - label: 'option 5', - value: 'value-5', - }, - { - label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', - value: 'value-6', - }, - { - label: ( - - アイテムのラベルがReactNodeの場合 - （ダミーテキストダミーテキストダミーテキストダミーテキスト） - - ), - value: 'value-7', - }, -] - -const manyItems = Array.from({ length: 2000 }).map((_, i) => ({ - label: `option ${i}`, - value: `option ${i}`, -})) - -type Item = { label: ReactNode; value: string; disabled?: boolean; data?: any } - -export const SingleCombobox: StoryFn = () => { - const [items, setItems] = useState(defaultItems) - const [selectedItem, setSelectedItem] = useState(null) - const [seq, setSeq] = useState(0) - - const handleSelectItem = useCallback((item: Item) => { - action('onSelect')(item) - setSelectedItem(item) - }, []) - const handleClear = useCallback(() => { - action('onClear')() - setSelectedItem(null) - }, []) - const handleAddItem = useCallback( - (label: string) => { - action('onAdd')(label) - const newItem = { - label, - value: label, - } - setItems([...items, newItem]) - setSelectedItem(newItem) - setSeq(seq + 1) - }, - [items, seq], - ) - - const [itemsForDefault] = useState(defaultItems) - const [selectedItemForDefault, setSelectedItemForDefault] = useState(null) - - const handleSelectItemForDefault = useCallback((item: Item) => { - action('onSelect')(item) - setSelectedItemForDefault(item) - }, []) - const handleClearForDefault = useCallback(() => { - action('onClear')() - setSelectedItemForDefault(null) - }, []) - - return ( - - - { - action('onChangeSelected')(item) - setSelectedItem(item) - }} - onFocus={action('onFocus')} - onBlur={action('onBlur')} - data-test="single-combobox-default" - /> - - - - - - - - - - - - - - - - - - - - - - - - `no result.(${text})`, - destroyButtonIconAlt: (text) => `destroy.(${text})`, - }} - /> - - - - - - - - - - - - { - e.preventDefault() - handleClear() - }} - onChangeSelected={(item) => { - action('onChangeSelected')(item) - setSelectedItem(item) - }} - data-test="single-combobox-default" - /> - - - - -
{ - throw new Error('このsubmitは発火しません') - }} - > - - { - action('onChangeSelected')(item) - setSelectedItem(item) - }} - data-test="single-combobox-no-form-submit" - /> - -
- - ) -} diff --git a/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx deleted file mode 100644 index 1271b59c55..0000000000 --- a/packages/smarthr-ui/src/components/ComboBox/VRTSingleCombobox.stories.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import { StoryFn } from '@storybook/react' -import { userEvent, within } from '@storybook/test' -import React from 'react' - -import { InformationPanel } from '../InformationPanel' -import { Stack } from '../Layout' - -import { SingleCombobox as StoriesSingleComboBox } from './SingleCombobox.stories' - -import { SingleComboBox } from '.' - -export default { - title: 'Forms（フォーム）/SingleComboBox', - component: SingleComboBox, - parameters: { - withTheming: true, - }, -} - -export const VRTSingleCombobox: StoryFn = () => ( - - - Singleコンボボックスのリストを展開して1つ目の項目をホバーした状態で表示されます - - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} - - -) -const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { - const canvas = within(canvasElement) - const textboxes = await canvas.findAllByRole('combobox') - await textboxes[0].focus() - const body = canvasElement.ownerDocument.body - const option = await within(body).findByText('option 1') - await userEvent.hover(option) - const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') - await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する -} -VRTSingleCombobox.play = playSingle - -export const VRTForcedColorsSingleCombobox: StoryFn = () => ( - - - Chromatic 上では強制カラーモードで表示されます{' '} - - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} - - -) -VRTForcedColorsSingleCombobox.play = playSingle -VRTForcedColorsSingleCombobox.parameters = { - chromatic: { forcedColors: 'active' }, -} From 6d372380761ded263379b97db9b7ebd81a152188 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Wed, 27 Nov 2024 21:59:42 +0900 Subject: [PATCH 02/15] =?UTF-8?q?refactor:=20=E4=B8=8D=E8=A6=81=E3=81=AA?= =?UTF-8?q?=E9=96=A2=E6=95=B0=E7=AD=89=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/VRTSingleComboBox.stories.tsx | 65 +------------------ 1 file changed, 3 insertions(+), 62 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx index 69118366cf..367cc45793 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx @@ -1,11 +1,9 @@ -import { action } from '@storybook/addon-actions' -import { Meta, StoryFn, StoryObj } from '@storybook/react' +import { Meta, StoryObj } from '@storybook/react' import { userEvent, within } from '@storybook/test' -import React, { ReactNode, useCallback, useState } from 'react' +import React from 'react' import { FormControl } from '../../../FormControl' import { FaCirclePlusIcon } from '../../../Icon' -import { InformationPanel } from '../../../InformationPanel' import { Stack } from '../../../Layout' import { SingleComboBox } from '../SingleComboBox' @@ -136,64 +134,6 @@ export default { export const VRT: StoryObj = {} -type Item = { label: ReactNode; value: string; disabled?: boolean; data?: any } - -const StoryFunctionSingleComboBox: StoryFn = () => { - const [items, setItems] = useState(Object.values(defaultItems)) - const [selectedItem, setSelectedItem] = useState(null) - const [seq, setSeq] = useState(0) - - const handleSelectItem = useCallback((item: Item) => { - action('onSelect')(item) - setSelectedItem(item) - }, []) - const handleClear = useCallback(() => { - action('onClear')() - setSelectedItem(null) - }, []) - const handleAddItem = useCallback( - (label: string) => { - action('onAdd')(label) - const newItem = { - label, - value: label, - } - setItems([...items, newItem]) - setSelectedItem(newItem) - setSeq(seq + 1) - }, - [items, seq], - ) - - const [itemsForDefault] = useState(Object.values(defaultItems)) - const [selectedItemForDefault, setSelectedItemForDefault] = useState(null) - - const handleSelectItemForDefault = useCallback((item: Item) => { - action('onSelect')(item) - setSelectedItemForDefault(item) - }, []) - const handleClearForDefault = useCallback(() => { - action('onClear')() - setSelectedItemForDefault(null) - }, []) - - return ( -
- - - -
- ) -} - const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { const canvas = within(canvasElement) const textboxes = await canvas.findAllByRole('combobox') @@ -204,6 +144,7 @@ const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する } + VRT.play = playSingle export const VRTForcedColors: StoryObj = { From 6aa24f9d50bf63e6a6241849f343bd6a2c0fb7ff Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Wed, 27 Nov 2024 22:04:08 +0900 Subject: [PATCH 03/15] =?UTF-8?q?refactor:=20=E4=B8=8D=E8=A6=81=E3=81=AA?= =?UTF-8?q?=E3=83=AB=E3=83=BC=E3=83=97=E3=82=92=E5=89=8A=E9=99=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/VRTSingleComboBox.stories.tsx | 20 +++++++++---------- 1 file changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx index 367cc45793..1a2bbe7435 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx @@ -109,17 +109,15 @@ export default { /> - {[undefined, 'hover', 'focus-visible'].map((id) => ( - - {_cases.map((props, i) => ( -
- - - -
- ))} - - ))} + + {_cases.map((props, i) => ( +
+ + + +
+ ))} + ), args: { From 567c16a755626a2e1c7d3a2bc6339b88a988c967 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Thu, 28 Nov 2024 09:50:18 +0900 Subject: [PATCH 04/15] =?UTF-8?q?refactor:=20=E3=83=87=E3=82=A3=E3=83=AC?= =?UTF-8?q?=E3=82=AF=E3=83=88=E3=83=AA=E5=A4=89=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{ => MultiComboBox}/MultiComboBox.test.tsx | 3 +-- .../{ => MultiComboBox}/MultiComboBox.tsx | 18 +++++++++--------- .../{ => MultiComboBox}/MultiSelectedItem.tsx | 8 ++++---- .../MultiSelectedItemTooltip.tsx | 2 +- .../ComboBox/MultiComboBox/index.tsx | 1 + .../{ => MultiComboBox}/multiComboBoxHelper.ts | 0 .../stories}/MultiCombobox.stories.tsx | 7 +++---- .../stories}/VRTMultiCombobox.stories.tsx | 7 +++---- 8 files changed, 22 insertions(+), 24 deletions(-) rename packages/smarthr-ui/src/components/ComboBox/{ => MultiComboBox}/MultiComboBox.test.tsx (99%) rename packages/smarthr-ui/src/components/ComboBox/{ => MultiComboBox}/MultiComboBox.tsx (97%) rename packages/smarthr-ui/src/components/ComboBox/{ => MultiComboBox}/MultiSelectedItem.tsx (95%) rename packages/smarthr-ui/src/components/ComboBox/{ => MultiComboBox}/MultiSelectedItemTooltip.tsx (91%) create mode 100644 packages/smarthr-ui/src/components/ComboBox/MultiComboBox/index.tsx rename packages/smarthr-ui/src/components/ComboBox/{ => MultiComboBox}/multiComboBoxHelper.ts (100%) rename packages/smarthr-ui/src/components/ComboBox/{ => MultiComboBox/stories}/MultiCombobox.stories.tsx (98%) rename packages/smarthr-ui/src/components/ComboBox/{ => MultiComboBox/stories}/VRTMultiCombobox.stories.tsx (93%) diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox.test.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.test.tsx similarity index 99% rename from packages/smarthr-ui/src/components/ComboBox/MultiComboBox.test.tsx rename to packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.test.tsx index 47fb166f30..1f54ec1f2f 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox.test.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.test.tsx @@ -2,10 +2,9 @@ import { userEvent } from '@storybook/test' import { render, screen } from '@testing-library/react' import React, { ComponentProps, act } from 'react' -import { FormControl } from '../FormControl' +import { FormControl } from '../../FormControl' import { MultiComboBox } from './MultiComboBox' -import { SingleComboBox } from './SingleComboBox' describe('SingleComboBox', () => { beforeEach(() => { diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx similarity index 97% rename from packages/smarthr-ui/src/components/ComboBox/MultiComboBox.tsx rename to packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx index e286c38a61..7405d8d6c8 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiComboBox.tsx @@ -13,19 +13,19 @@ import { useId } from 'react' import innerText from 'react-innertext' import { tv } from 'tailwind-variants' -import { useOuterClick } from '../../hooks/useOuterClick' -import { genericsForwardRef } from '../../libs/util' -import { textColor } from '../../themes' -import { FaCaretDownIcon } from '../Icon' +import { useOuterClick } from '../../../hooks/useOuterClick' +import { genericsForwardRef } from '../../../libs/util' +import { textColor } from '../../../themes' +import { FaCaretDownIcon } from '../../Icon' +import { useFocusControl } from '../useFocusControl' +import { useListBox } from '../useListBox' +import { useOptions } from '../useOptions' import { MultiSelectedItem } from './MultiSelectedItem' import { hasParentElementByClassName } from './multiComboBoxHelper' -import { useFocusControl } from './useFocusControl' -import { useListBox } from './useListBox' -import { useOptions } from './useOptions' -import type { BaseProps, ComboBoxItem } from './types' -import type { DecoratorsType } from '../../types' +import type { DecoratorsType } from '../../../types' +import type { BaseProps, ComboBoxItem } from '../types' type Props = BaseProps & { /** diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiSelectedItem.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItem.tsx similarity index 95% rename from packages/smarthr-ui/src/components/ComboBox/MultiSelectedItem.tsx rename to packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItem.tsx index 8bd78be713..92b07f3213 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiSelectedItem.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItem.tsx @@ -1,12 +1,12 @@ import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react' import { tv } from 'tailwind-variants' -import { UnstyledButton } from '../Button' -import { Chip } from '../Chip' -import { FaTimesCircleIcon } from '../Icon' +import { UnstyledButton } from '../../Button' +import { Chip } from '../../Chip' +import { FaTimesCircleIcon } from '../../Icon' +import { ComboBoxItem } from '../types' import { MultiSelectedItemTooltip } from './MultiSelectedItemTooltip' -import { ComboBoxItem } from './types' export type Props = { item: ComboBoxItem & { deletable?: boolean } diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiSelectedItemTooltip.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItemTooltip.tsx similarity index 91% rename from packages/smarthr-ui/src/components/ComboBox/MultiSelectedItemTooltip.tsx rename to packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItemTooltip.tsx index f6429214c9..1511022b10 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiSelectedItemTooltip.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/MultiSelectedItemTooltip.tsx @@ -1,6 +1,6 @@ import React, { FC, PropsWithChildren, ReactNode } from 'react' -import { Tooltip } from '../Tooltip' +import { Tooltip } from '../../Tooltip' type Props = PropsWithChildren<{ needsTooltip: boolean diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/index.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/index.tsx new file mode 100644 index 0000000000..68ef677601 --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/index.tsx @@ -0,0 +1 @@ +export { MultiComboBox } from './MultiComboBox' diff --git a/packages/smarthr-ui/src/components/ComboBox/multiComboBoxHelper.ts b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/multiComboBoxHelper.ts similarity index 100% rename from packages/smarthr-ui/src/components/ComboBox/multiComboBoxHelper.ts rename to packages/smarthr-ui/src/components/ComboBox/MultiComboBox/multiComboBoxHelper.ts diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx similarity index 98% rename from packages/smarthr-ui/src/components/ComboBox/MultiCombobox.stories.tsx rename to packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx index ebd09626b2..b1f61382c4 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiCombobox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx @@ -2,10 +2,9 @@ import { action } from '@storybook/addon-actions' import { StoryFn } from '@storybook/react' import React, { ReactNode, useCallback, useState } from 'react' -import { FormControl } from '../FormControl' -import { Stack } from '../Layout' - -import { MultiComboBox } from '.' +import { FormControl } from '../../../FormControl' +import { Stack } from '../../../Layout' +import { MultiComboBox } from '../MultiComboBox' export default { title: 'Forms（フォーム）/MultiComboBox', diff --git a/packages/smarthr-ui/src/components/ComboBox/VRTMultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx similarity index 93% rename from packages/smarthr-ui/src/components/ComboBox/VRTMultiCombobox.stories.tsx rename to packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx index f8713f1100..68e8b3c3d1 100644 --- a/packages/smarthr-ui/src/components/ComboBox/VRTMultiCombobox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx @@ -2,13 +2,12 @@ import { StoryFn } from '@storybook/react' import { userEvent, within } from '@storybook/test' import React from 'react' -import { InformationPanel } from '../InformationPanel' -import { Stack } from '../Layout' +import { InformationPanel } from '../../../InformationPanel' +import { Stack } from '../../../Layout' +import { MultiComboBox } from '../MultiComboBox' import { MultiCombobox as StoriesMultiComboBox } from './MultiCombobox.stories' -import { MultiComboBox } from '.' - export default { title: 'Forms（フォーム）/MultiComboBox', component: MultiComboBox, From 43d7c404402f2feb8ac15f9ccacf35d9cc8e8b0b Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Thu, 28 Nov 2024 09:54:29 +0900 Subject: [PATCH 05/15] =?UTF-8?q?chore:=20=20calender=E3=81=AEflaky?= =?UTF-8?q?=E3=82=92=E8=A7=A3=E6=B6=88=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Calendar/stories/VRTCalendar.stories.tsx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/smarthr-ui/src/components/Calendar/stories/VRTCalendar.stories.tsx b/packages/smarthr-ui/src/components/Calendar/stories/VRTCalendar.stories.tsx index bb1a1db85b..4e3ca3126e 100644 --- a/packages/smarthr-ui/src/components/Calendar/stories/VRTCalendar.stories.tsx +++ b/packages/smarthr-ui/src/components/Calendar/stories/VRTCalendar.stories.tsx @@ -1,8 +1,8 @@ -import { fireEvent, userEvent, within } from '@storybook/test' +import { userEvent, within } from '@storybook/test' import dayjs from 'dayjs' import React from 'react' -import { Cluster, Stack } from '../../Layout' +import { Cluster } from '../../Layout' import { Calendar } from '../Calendar' import type { Meta, StoryObj } from '@storybook/react' @@ -11,17 +11,17 @@ export default { title: 'Data Display（データ表示）/Calendar/VRT', render: (args) => ( - + @@ -49,9 +49,9 @@ export const VRTFocusVisible: StoryObj = { ...VRT, render: (args) => ( ), From f3662606a83f30c7226eec7b1744b1cf70ac1616 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Thu, 28 Nov 2024 22:02:02 +0900 Subject: [PATCH 06/15] =?UTF-8?q?fix:=20=E6=8C=87=E6=91=98=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/SingleComboBox.stories.tsx | 31 +++-- .../stories/VRTSingleComboBox.stories.tsx | 109 ++++-------------- 2 files changed, 39 insertions(+), 101 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx index 6712742385..92a9a1599b 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -1,12 +1,13 @@ +/* eslint-disable smarthr/a11y-input-in-form-control */ import { Meta, StoryObj } from '@storybook/react' -import React from 'react' +import React, { useState } from 'react' -import { FormControl } from '../../../FormControl' import { FaCirclePlusIcon } from '../../../Icon' import { Stack } from '../../../Layout' import { SingleComboBox } from '../SingleComboBox' -const defaultItems = { +// eslint-disable-next-line storybook/prefer-pascal-case +export const defaultItems = { 'option 1': { label: 'option 1', value: 'value-1', @@ -50,7 +51,9 @@ const defaultItems = { value: 'value-7', }, } -const prefixes = { なし: '', あり: } + +// eslint-disable-next-line storybook/prefer-pascal-case +export const prefixes = { なし: '', あり: } export default { title: 'Forms（フォーム）/SingleComboBox', @@ -58,7 +61,6 @@ export default { args: { items: Object.values(defaultItems), selectedItem: null, - defaultItem: defaultItems['option 1'], }, argTypes: { items: { control: 'object' }, @@ -81,6 +83,7 @@ export default { parameters: { chromatic: { disableSnapshot: true }, }, + excludeStories: ['defaultItems', 'prefixes'], } as Meta export const Playground: StoryObj = {} @@ -102,16 +105,10 @@ export const DefaultItem: StoryObj = { export const Prefix: StoryObj = { name: 'prefix', render: (args) => ( -
- - - - - - - - -
+ + + + ), } @@ -147,7 +144,7 @@ export const IsLoading: StoryObj = { export const Width: StoryObj = { name: 'width', args: { - width: '500px', + width: '20rem', }, } @@ -161,6 +158,6 @@ export const DropdownHelpMessage: StoryObj = { export const DropdownWidth: StoryObj = { name: 'dropdownWidth', args: { - dropdownWidth: '300px', + dropdownWidth: '30rem', }, } diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx index 1a2bbe7435..c0de979343 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/VRTSingleComboBox.stories.tsx @@ -1,58 +1,12 @@ +/* eslint-disable smarthr/a11y-input-in-form-control */ import { Meta, StoryObj } from '@storybook/react' import { userEvent, within } from '@storybook/test' import React from 'react' -import { FormControl } from '../../../FormControl' -import { FaCirclePlusIcon } from '../../../Icon' import { Stack } from '../../../Layout' import { SingleComboBox } from '../SingleComboBox' -const defaultItems = { - 'option 1': { - label: 'option 1', - value: 'value-1', - data: { - name: 'test', - age: 23, - }, - }, - 'option 2': { - label: 'option 2', - value: 'value-2', - data: { - name: 'test 2', - age: 34, - }, - }, - 'option 3': { - label: 'option 3', - value: 'value-3', - disabled: true, - }, - 'option 4': { - label: 'option 4', - value: 'value-4', - }, - 'option 5': { - label: 'option 5', - value: 'value-5', - }, - 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { - label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', - value: 'value-6', - }, - アイテムのラベルがReactNodeの場合: { - label: ( - - アイテムのラベルがReactNodeの場合 - （ダミーテキストダミーテキストダミーテキストダミーテキスト） - - ), - value: 'value-7', - }, -} - -const prefixes = { なし: '', あり: } +import { defaultItems, prefixes } from './SingleComboBox.stories' /* pict singleComboBox.pict * disabled error width prefix selectedItem @@ -94,35 +48,35 @@ const _cases: Array[0], 'items'>> = [ }, ] +const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { + const canvas = within(canvasElement) + const textboxes = await canvas.findAllByRole('combobox') + await textboxes[textboxes.length - 1].focus() + const body = canvasElement.ownerDocument.body + const option = await within(body).findByText('option 1') + await userEvent.hover(option) + const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') + await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する +} + export default { title: 'Forms（フォーム）/SingleComboBox/VRT', component: SingleComboBox, render: (args) => ( - -
- - - -
- - {_cases.map((props, i) => ( -
- - - -
- ))} - + + {_cases.map((props, i) => ( + + ))} + ), - args: { - items: Object.values(defaultItems), - }, + play: playSingle, parameters: { withTheming: true, chromatic: { disableSnapshot: false }, @@ -132,19 +86,6 @@ export default { export const VRT: StoryObj = {} -const playSingle = async ({ canvasElement }: { canvasElement: HTMLElement }) => { - const canvas = within(canvasElement) - const textboxes = await canvas.findAllByRole('combobox') - await textboxes[0].focus() - const body = canvasElement.ownerDocument.body - const option = await within(body).findByText('option 1') - await userEvent.hover(option) - const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') - await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する -} - -VRT.play = playSingle - export const VRTForcedColors: StoryObj = { ...VRT, parameters: { From aea51be24af25438c8267a872f0d3940a6e597d9 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Fri, 29 Nov 2024 09:01:46 +0900 Subject: [PATCH 07/15] =?UTF-8?q?fix:=20defaultItem=E3=81=8C=E5=8F=8D?= =?UTF-8?q?=E6=98=A0=E3=81=95=E3=82=8C=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?= =?UTF-8?q?=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SingleComboBox/stories/SingleComboBox.stories.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx index 92a9a1599b..45d74bbc2f 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -97,6 +97,16 @@ export const SelectedItem: StoryObj = { export const DefaultItem: StoryObj = { name: 'defaultItem', + render: (args) => { + const [selectItem, setSelectItem] = useState(args.defaultItem) + return ( + setSelectItem(item)} + /> + ) + }, args: { defaultItem: defaultItems['option 4'], }, From 9e6b9e35f77dca09841c04c961e9f3504c2abc08 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Thu, 5 Dec 2024 14:02:19 +0900 Subject: [PATCH 08/15] =?UTF-8?q?docs(MultiComboBox):=20Story=20=E3=82=92?= =?UTF-8?q?=E8=A6=8B=E7=9B=B4=E3=81=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/MultiCombobox.stories.tsx | 334 +++++------------- .../stories/VRTMultiCombobox.stories.tsx | 121 +++++-- .../MultiComboBox/stories/multiComboBox.pict | 4 + 3 files changed, 173 insertions(+), 286 deletions(-) create mode 100644 packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/multiComboBox.pict diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx index b1f61382c4..d2413c391e 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx @@ -1,23 +1,13 @@ -import { action } from '@storybook/addon-actions' -import { StoryFn } from '@storybook/react' -import React, { ReactNode, useCallback, useState } from 'react' +/* eslint-disable smarthr/a11y-input-in-form-control */ +import { Meta, StoryObj } from '@storybook/react' +import React from 'react' -import { FormControl } from '../../../FormControl' import { Stack } from '../../../Layout' import { MultiComboBox } from '../MultiComboBox' -export default { - title: 'Forms（フォーム）/MultiComboBox', - component: MultiComboBox, - parameters: { - docs: { - source: { type: 'dynamic' }, - }, - }, -} - -const defaultItems = [ - { +// eslint-disable-next-line storybook/prefer-pascal-case +export const defaultItems = { + 'option 1': { label: 'option 1', value: 'value-1', data: { @@ -25,7 +15,7 @@ const defaultItems = [ age: 23, }, }, - { + 'option 2': { label: 'option 2', value: 'value-2', data: { @@ -33,24 +23,24 @@ const defaultItems = [ age: 34, }, }, - { + 'option 3': { label: 'option 3', value: 'value-3', disabled: true, }, - { + 'option 4': { label: 'option 4', value: 'value-4', }, - { + 'option 5': { label: 'option 5', value: 'value-5', }, - { + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', value: 'value-6', }, - { + アイテムのラベルがReactNodeの場合: { label: ( アイテムのラベルがReactNodeの場合 @@ -59,236 +49,82 @@ const defaultItems = [ ), value: 'value-7', }, -] +} -const manyItems = Array.from({ length: 2000 }).map((_, i) => ({ - label: `option ${i}`, - value: `option ${i}`, -})) +export default { + title: 'Forms（フォーム）/MultiComboBox', + component: MultiComboBox, + args: { + items: Object.values(defaultItems), + selectedItems: [], + }, + argTypes: { + items: { control: 'object' }, + selectedItems: { control: 'object' }, + }, + parameters: { + parameters: { + chromatic: { disableSnapshot: true }, + }, + }, + excludeStories: ['defaultItems'], +} as Meta -type Item = { label: ReactNode; value: string; disabled?: boolean; data?: any } +export const Playground: StoryObj = {} -export const MultiCombobox: StoryFn = () => { - const [items, setItems] = useState(defaultItems) - const [selectedItems, setSelectedItems] = useState([]) - const [seq, setSeq] = useState(0) - const [controlledInputValue, setControlledInputValue] = useState('') +export const SelectedItems: StoryObj = { + name: 'selectedItems', + args: { + selectedItems: [defaultItems['option 1'], defaultItems['option 4']], + }, +} - const handleSelectItem = useCallback( - (item: Item) => { - action('onSelect')(item) - setSelectedItems([...selectedItems, item]) - }, - [selectedItems], - ) - const handleDelete = useCallback( - (deleted: Item) => { - action('onDelete')() - setSelectedItems(selectedItems.filter((item) => item.value !== deleted.value)) - }, - [selectedItems], - ) - const handleAddItem = useCallback( - (label: string) => { - action('onAdd')(label) - const newItem = { - label, - value: label, - } - setItems([...items, newItem]) - setSelectedItems([...selectedItems, newItem]) - setSeq(seq + 1) - }, - [items, selectedItems, seq], - ) +export const Disabled: StoryObj = { + name: 'disabled', + args: { + disabled: true, + }, +} + +export const Error: StoryObj = { + name: 'error', + args: { + error: true, + }, +} + +export const Creatable: StoryObj = { + name: 'creatable', + args: { + creatable: true, + dropdownHelpMessage: '新しいアイテムを追加できます。', + }, +} - return ( - - - { - action('onChangeSelected')(selected) - setSelectedItems(selected) - }} - onFocus={action('onFocus')} - onBlur={action('onBlur')} - data-test="multi-combobox-default" - /> - - - - - - - - - - - - - - - - - - - - - - - - - - - `no result.(${text})`, - destroyButtonIconAlt: (text) => `destroy.(${text})`, - selectedListAriaLabel: (text) => `selected item list.(${text})`, - }} - /> - - - ({ ...item, deletable: false }))} - dropdownHelpMessage="入力でフィルタリングできます。" - onDelete={handleDelete} - onSelect={handleSelectItem} - data-test="multi-combobox-undeletable" - /> - - - { - action('onChangeSelected')(selected) - setSelectedItems(selected) - }} - inputValue={controlledInputValue} - onChangeInput={(e) => { - setControlledInputValue(e.target.value) - }} - onBlur={() => setControlledInputValue('')} - /> - - - - - - - - - - - - ) +export const IsLoading: StoryObj = { + name: 'isLoading', + args: { + isLoading: true, + }, +} + +export const Width: StoryObj = { + name: 'width', + args: { + width: '20rem', + }, +} + +export const DropdownHelpMessage: StoryObj = { + name: 'dropdownHelpMessage', + args: { + dropdownHelpMessage: 'ヘルプメッセージ', + }, +} + +export const DropdownWidth: StoryObj = { + name: 'dropdownWidth', + args: { + dropdownWidth: '30rem', + }, } diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx index 68e8b3c3d1..4fc6d99553 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx @@ -1,30 +1,53 @@ -import { StoryFn } from '@storybook/react' +/* eslint-disable smarthr/a11y-input-in-form-control */ +import { Meta, StoryObj } from '@storybook/react' import { userEvent, within } from '@storybook/test' -import React from 'react' +import React, { useState } from 'react' -import { InformationPanel } from '../../../InformationPanel' import { Stack } from '../../../Layout' +import { ComboBoxItem } from '../../types' import { MultiComboBox } from '../MultiComboBox' -import { MultiCombobox as StoriesMultiComboBox } from './MultiCombobox.stories' +import { defaultItems } from './MultiCombobox.stories' -export default { - title: 'Forms（フォーム）/MultiComboBox', - component: MultiComboBox, - parameters: { - withTheming: true, - }, -} +/* + * pict multiComboBox.pict + * disabled error width selectedItems + * false true なし なし + * false false あり 複数 + * true true あり 一つ + * false false なし 一つ + * true true なし 複数 + * true false あり なし + */ -export const VRTMultiCombobox: StoryFn = () => ( - - - Multiコンボボックスのリストを展開して1つ目と2つ目の項目を選択した状態で表示されます - - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} - - -) +const _cases: Array[0], 'items'>> = [ + { disabled: false, error: true, width: undefined, selectedItems: [] }, + { + disabled: false, + error: false, + width: '15em', + selectedItems: [defaultItems['option 1'], defaultItems['option 4']], + }, + { disabled: true, error: true, width: '15em', selectedItems: [defaultItems['option 3']] }, + { + disabled: false, + error: false, + width: undefined, + selectedItems: [defaultItems['アイテムのラベルがReactNodeの場合']], + }, + { + disabled: true, + error: true, + width: undefined, + selectedItems: [ + defaultItems['option 2'], + defaultItems[ + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）' + ], + ], + }, + { disabled: true, error: false, width: '15em', selectedItems: [] }, +] const waitForRAF = () => new Promise((resolve) => { @@ -35,29 +58,53 @@ const waitForRAF = () => const playMulti = async ({ canvasElement }: { canvasElement: HTMLElement }) => { const canvas = within(canvasElement) const comboboxes = await canvas.findAllByRole('combobox') - comboboxes[0].focus() + comboboxes[comboboxes.length - 1].focus() const body = canvasElement.ownerDocument.body - const option1 = await within(body).findByText('option 1') + const option1 = await within(body).findByRole('button', { name: 'option 1' }) await userEvent.click(option1) await waitForRAF() - const option2 = await within(body).findByText('option 2') + const option2 = await within(body).findByRole('button', { name: 'option 2' }) await userEvent.click(option2) await waitForRAF() const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する } -VRTMultiCombobox.play = playMulti - -export const VRTForcedColorsMultiCombobox: StoryFn = () => ( - - - Chromatic 上では強制カラーモードで表示されます{' '} - - {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */} - - -) -VRTForcedColorsMultiCombobox.play = playMulti -VRTForcedColorsMultiCombobox.parameters = { - chromatic: { forcedColors: 'active' }, + +export default { + title: 'Forms（フォーム）/MultiComboBox/VRT', + component: MultiComboBox, + render: (args) => { + const items = Object.values(defaultItems) + const [selectedItems, setSelectedItems] = useState>>([]) + return ( + + {_cases.map((props, i) => ( + + ))} + setSelectedItems(its)} + /> + + ) + }, + play: playMulti, + parameters: { + withTheming: true, + chromatic: { disableSnapshot: false }, + }, + tags: ['!autodocs', 'skip-test-runner'], +} as Meta + +export const VRT: StoryObj = {} + +export const VRTForcedColors: StoryObj = { + ...VRT, + parameters: { + chromatic: { forcedColors: 'active' }, + }, } diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/multiComboBox.pict b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/multiComboBox.pict new file mode 100644 index 0000000000..5c13a6fc32 --- /dev/null +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/multiComboBox.pict @@ -0,0 +1,4 @@ +disabled: true, false +error: true, false +width: あり, なし +selectedItems: 一つ, 複数, なし From 20bc809e46d717bc5445e0dd4d80bb9e90266a98 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Tue, 10 Dec 2024 21:26:29 +0900 Subject: [PATCH 09/15] =?UTF-8?q?docs:=20=E9=81=B8=E6=8A=9E=E3=81=97?= =?UTF-8?q?=E3=81=9F=E3=82=A2=E3=82=A4=E3=83=86=E3=83=A0=E3=82=92=E6=B6=88?= =?UTF-8?q?=E3=81=97=E3=81=9F=E3=82=8A=E3=81=A7=E3=81=8D=E3=82=8B=E3=82=88?= =?UTF-8?q?=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/smarthr-ui/package.json | 1 + .../stories/SingleComboBox.stories.tsx | 35 ++++++++++++++++--- pnpm-lock.yaml | 3 ++ 3 files changed, 34 insertions(+), 5 deletions(-) diff --git a/packages/smarthr-ui/package.json b/packages/smarthr-ui/package.json index 699ae99820..e596b0b58b 100644 --- a/packages/smarthr-ui/package.json +++ b/packages/smarthr-ui/package.json @@ -32,6 +32,7 @@ "@storybook/blocks": "^8.4.7", "@storybook/cli": "^8.4.7", "@storybook/manager-api": "^8.4.7", + "@storybook/preview-api": "^8.4.7", "@storybook/react": "^8.4.7", "@storybook/react-webpack5": "^8.4.7", "@storybook/source-loader": "^8.4.7", diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx index 45d74bbc2f..d195c7a85f 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -1,4 +1,5 @@ /* eslint-disable smarthr/a11y-input-in-form-control */ +import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' import React, { useState } from 'react' @@ -12,34 +13,45 @@ export const defaultItems = { label: 'option 1', value: 'value-1', data: { - name: 'test', - age: 23, + option: 'option 1', }, }, 'option 2': { label: 'option 2', value: 'value-2', data: { - name: 'test 2', - age: 34, + option: 'option 2', }, }, 'option 3': { label: 'option 3', value: 'value-3', disabled: true, + data: { + option: 'option 3', + }, }, 'option 4': { label: 'option 4', value: 'value-4', + data: { + option: 'option 4', + }, }, 'option 5': { label: 'option 5', value: 'value-5', + data: { + option: 'option 5', + }, }, 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）': { label: 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', value: 'value-6', + data: { + option: + 'アイテムのラベルが長い場合（ダミーテキストダミーテキストダミーテキストダミーテキスト）', + }, }, アイテムのラベルがReactNodeの場合: { label: ( @@ -49,6 +61,9 @@ export const defaultItems = { ), value: 'value-7', + data: { + option: 'アイテムのラベルがReactNodeの場合', + }, }, } @@ -58,6 +73,16 @@ export const prefixes = { なし: '', あり: } export default { title: 'Forms（フォーム）/SingleComboBox', component: SingleComboBox, + render: (args) => { + const [, setArgs] = useArgs() + return ( + setArgs({ selectedItem: null })} + onSelect={(item) => setArgs({ selectedItem: item.data?.option })} + /> + ) + }, args: { items: Object.values(defaultItems), selectedItem: null, @@ -84,7 +109,7 @@ export default { chromatic: { disableSnapshot: true }, }, excludeStories: ['defaultItems', 'prefixes'], -} as Meta +} as Meta> export const Playground: StoryObj = {} diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 86b6145925..a17576e5ad 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -150,6 +150,9 @@ importers: '@storybook/manager-api': specifier: ^8.4.7 version: 8.4.7(storybook@8.4.7(prettier@3.4.2)) + '@storybook/preview-api': + specifier: ^8.4.7 + version: 8.4.7(storybook@8.4.7(prettier@3.4.2)) '@storybook/react': specifier: ^8.4.7 version: 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(prettier@3.4.2)))(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(storybook@8.4.7(prettier@3.4.2))(typescript@5.7.2) From 0b6d0bbd6a67b04c7d1f8dcbfe341da6e323deda Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Tue, 10 Dec 2024 21:34:04 +0900 Subject: [PATCH 10/15] =?UTF-8?q?docs:=20dropdownHelpMessage=E3=82=92?= =?UTF-8?q?=E9=81=B8=E6=8A=9E=E5=BC=8F=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SingleComboBox/stories/SingleComboBox.stories.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx index d195c7a85f..b89b7c59af 100644 --- a/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/SingleComboBox/stories/SingleComboBox.stories.tsx @@ -5,6 +5,7 @@ import React, { useState } from 'react' import { FaCirclePlusIcon } from '../../../Icon' import { Stack } from '../../../Layout' +import { Text } from '../../../Text' import { SingleComboBox } from '../SingleComboBox' // eslint-disable-next-line storybook/prefer-pascal-case @@ -104,6 +105,14 @@ export default { options: Object.keys(prefixes), mapping: prefixes, }, + dropdownHelpMessage: { + control: { type: 'select' }, + options: ['文字列', 'ReactNode'], + mapping: { + 文字列: 'ヘルプメッセージ', + ReactNode: React Nodeを渡したメッセージ, + }, + }, }, parameters: { chromatic: { disableSnapshot: true }, From 03ee75ec0721f9aec3dd9261a6ed1154d2100762 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Fri, 13 Dec 2024 09:29:12 +0900 Subject: [PATCH 11/15] =?UTF-8?q?docs:=20MultiComboBox=E3=81=AEStory?= =?UTF-8?q?=E3=81=A7=E5=80=A4=E3=81=AE=E9=81=B8=E6=8A=9E=E3=83=BB=E8=A7=A3?= =?UTF-8?q?=E9=99=A4=E3=81=8Cargs=E3=81=A8=E9=80=A3=E5=8B=95=E3=81=99?= =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../stories/MultiCombobox.stories.tsx | 23 ++++++++++++++++++- .../stories/VRTMultiCombobox.stories.tsx | 2 +- 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx index d2413c391e..fed7018643 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx @@ -1,4 +1,5 @@ /* eslint-disable smarthr/a11y-input-in-form-control */ +import { useArgs } from '@storybook/preview-api' import { Meta, StoryObj } from '@storybook/react' import React from 'react' @@ -54,6 +55,26 @@ export const defaultItems = { export default { title: 'Forms（フォーム）/MultiComboBox', component: MultiComboBox, + render: (args) => { + const [_, setArgs] = useArgs() + return ( + + setArgs({ + selectedItems: args.selectedItems.filter( + (selectedItem) => selectedItem.value !== item.value, + ), + }) + } + onSelect={(item) => + setArgs({ + selectedItems: [...args.selectedItems, item], + }) + } + /> + ) + }, args: { items: Object.values(defaultItems), selectedItems: [], @@ -68,7 +89,7 @@ export default { }, }, excludeStories: ['defaultItems'], -} as Meta +} as Meta> export const Playground: StoryObj = {} diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx index 4fc6d99553..dc20c79e1d 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx @@ -7,7 +7,7 @@ import { Stack } from '../../../Layout' import { ComboBoxItem } from '../../types' import { MultiComboBox } from '../MultiComboBox' -import { defaultItems } from './MultiCombobox.stories' +import { defaultItems } from './MultiComboBox.stories' /* * pict multiComboBox.pict From fccd3f9d2b57af6c0c9d8161e36bb7b90703bd28 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Fri, 13 Dec 2024 09:33:45 +0900 Subject: [PATCH 12/15] =?UTF-8?q?docs:=20MultiComboBox=E3=81=AEStory?= =?UTF-8?q?=E3=81=A7dropdownHelpMessage=E3=82=92=E7=B7=A8=E9=9B=86?= =?UTF-8?q?=E3=81=99=E3=82=8B=E9=9A=9B=E3=81=AB=E3=82=AF=E3=83=A9=E3=83=83?= =?UTF-8?q?=E3=82=B7=E3=83=A5=E3=81=97=E3=81=AA=E3=81=84=E3=82=88=E3=81=86?= =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MultiComboBox/stories/MultiCombobox.stories.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx index fed7018643..ff6acdc551 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx @@ -4,6 +4,7 @@ import { Meta, StoryObj } from '@storybook/react' import React from 'react' import { Stack } from '../../../Layout' +import { Text } from '../../../Text' import { MultiComboBox } from '../MultiComboBox' // eslint-disable-next-line storybook/prefer-pascal-case @@ -82,6 +83,14 @@ export default { argTypes: { items: { control: 'object' }, selectedItems: { control: 'object' }, + dropdownHelpMessage: { + control: { type: 'select' }, + options: ['文字列', 'ReactNode'], + mapping: { + 文字列: 'ヘルプメッセージ', + ReactNode: React Nodeを渡したメッセージ, + }, + }, }, parameters: { parameters: { From 5fce5163fae9d4c0e023a26294128aedad6fdcd5 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Fri, 13 Dec 2024 09:36:51 +0900 Subject: [PATCH 13/15] =?UTF-8?q?fix:=20=E3=83=95=E3=82=A1=E3=82=A4?= =?UTF-8?q?=E3=83=AB=E5=90=8D=E3=81=AE=E5=A4=A7=E6=96=87=E5=AD=97=E5=B0=8F?= =?UTF-8?q?=E6=96=87=E5=AD=97=E3=81=AE=E5=A4=89=E6=8F=9B=E3=81=8C=E5=8F=8D?= =?UTF-8?q?=E6=98=A0=E3=81=95=E3=82=8C=E3=81=A6=E3=81=84=E3=81=AA=E3=81=84?= =?UTF-8?q?=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{MultiCombobox.stories.tsx => MultiComboBox.stories.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/{MultiCombobox.stories.tsx => MultiComboBox.stories.tsx} (100%) diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx similarity index 100% rename from packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiCombobox.stories.tsx rename to packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx From 8f251464b7f8cb35435178fa0384ad0c62f0be85 Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Wed, 25 Dec 2024 08:47:37 +0900 Subject: [PATCH 14/15] =?UTF-8?q?fix:=20play=20function=E3=81=8C=E8=90=BD?= =?UTF-8?q?=E3=81=A1=E3=81=A6=E3=81=84=E3=81=9F=E5=95=8F=E9=A1=8C=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../MultiComboBox/stories/VRTMultiCombobox.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx index dc20c79e1d..f9ba23193a 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/VRTMultiCombobox.stories.tsx @@ -60,10 +60,10 @@ const playMulti = async ({ canvasElement }: { canvasElement: HTMLElement }) => { const comboboxes = await canvas.findAllByRole('combobox') comboboxes[comboboxes.length - 1].focus() const body = canvasElement.ownerDocument.body - const option1 = await within(body).findByRole('button', { name: 'option 1' }) + const option1 = await within(body).findByRole('option', { name: 'option 1' }) await userEvent.click(option1) await waitForRAF() - const option2 = await within(body).findByRole('button', { name: 'option 2' }) + const option2 = await within(body).findByRole('option', { name: 'option 2' }) await userEvent.click(option2) await waitForRAF() const helpMessage = await within(body).findAllByText('入力でフィルタリングできます。') From 7790aa0b16f70ff738d0966960560d8f01bca91b Mon Sep 17 00:00:00 2001 From: Misako Tateiwa Date: Wed, 25 Dec 2024 08:54:56 +0900 Subject: [PATCH 15/15] =?UTF-8?q?fix:=20disableSnapshot=E3=81=AE=E8=A8=AD?= =?UTF-8?q?=E5=AE=9A=E3=81=8C=E9=96=93=E9=81=95=E3=81=A3=E3=81=A6=E3=81=84?= =?UTF-8?q?=E3=81=9F=E3=81=AE=E3=81=A7=E4=BF=AE=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx index ff6acdc551..90a6097fc0 100644 --- a/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx +++ b/packages/smarthr-ui/src/components/ComboBox/MultiComboBox/stories/MultiComboBox.stories.tsx @@ -93,9 +93,7 @@ export default { }, }, parameters: { - parameters: { - chromatic: { disableSnapshot: true }, - }, + chromatic: { disableSnapshot: true }, }, excludeStories: ['defaultItems'], } as Meta>