docs: SingleComboBox の Story を見直し #5143
Conversation
| await userEvent.click(helpMessage[0]) // カーソルの点滅によるVRTのフレーキーを避けるためにフォーカスを移動する | ||
| } | ||
|
|
||
| VRT.play = playSingle |
There was a problem hiding this comment.
pict以外にプルダウンの展開のためplayfunctionは残しています
commit: |
misako0927
requested review from
oti,
masa0527,
Qs-F,
s-sasaki-0529 and
uknmr
and removed request for
a team,
oti and
masa0527
|
calendarのVRTが本日の日付の◯でflakyになっているのですが、以下の２択の修正で悩んでいます....
デザインのチェック的には2が良さそうなものの、機能として今日の日付を渡すことがないと思うので、1でもいいかも、、、で甲乙つけ難く。 |
|
あ、しまった...。日付のことすっかり考慮してなかったです…。 １がベターそうかなと思いましたがシュッとできそうでしょうか…？ |
| ), | ||
| args: { | ||
| items: Object.values(defaultItems), | ||
| }, |
There was a problem hiding this comment.
default に書いてしまってよさそう。
| }, | |
| }, | |
| play: playSingle, |
| import { Stack } from '../../../Layout' | ||
| import { SingleComboBox } from '../SingleComboBox' | ||
|
|
||
| const defaultItems = { |
There was a problem hiding this comment.
imo: SingleComboBox.stories と同じであれば使いまわしてもよさそう
There was a problem hiding this comment.
単純にexportするとstoryとしてカウントされてしまうので、excludeStoriesを設定しました。もしもっと良い方法があれば教えてもらえると助かります🙏
https://github.com/kufu/smarthr-ui/pull/5143/files#diff-83bd9112f2364dba079090ba55ef94e547ef3a1d6de01a36fbd5f5b1734bb2e7R86
| args: { | ||
| items: Object.values(defaultItems), | ||
| selectedItem: null, | ||
| defaultItem: defaultItems['option 1'], |
There was a problem hiding this comment.
必須に見えてしまうので消しとくとよさそう
| defaultItem: defaultItems['option 1'], |
| }, | ||
| } | ||
|
|
||
| export const DefaultItem: StoryObj<typeof SingleComboBox> = { |
There was a problem hiding this comment.
視覚的に選択されてないように見える（onSelect などを使って selectedItem を埋めてあげないと駄目ってこと?
There was a problem hiding this comment.
そんな感じがしているのですが、なんか変ですよね・・？（バグ・・？
There was a problem hiding this comment.
onSelectで反映するように変更しました！
| render: (args) => ( | ||
| <form> | ||
| <Stack gap={1}> | ||
| <FormControl title="prefixなし" dangerouslyTitleHidden> |
There was a problem hiding this comment.
コードが複雑になってしまいコンポーネントの責務が見えにくくなってしまうので、
<Stack>
<SingleComboBox />
<SingleComboBox />
</Stack>くらいの記述に収めたいです!（lint の警告はファイルごと無視しちゃって問題ないです）
| export const Width: StoryObj<typeof SingleComboBox> = { | ||
| name: 'width', | ||
| args: { | ||
| width: '500px', |
There was a problem hiding this comment.
基本的に px 固定しないので、em くらいにはしておきたいです!
| export const DropdownWidth: StoryObj<typeof SingleComboBox> = { | ||
| name: 'dropdownWidth', | ||
| args: { | ||
| dropdownWidth: '300px', |
There was a problem hiding this comment.
基本的に px 固定しないので、em くらいにはしておきたいです!
| render: (args) => ( | ||
| <Stack align="flex-start" gap={2}> | ||
| <form> | ||
| <FormControl className="shr-mb-[15rem]" title="デフォルト" dangerouslyTitleHidden> |
There was a problem hiding this comment.
imo: 大外の Stack を h-screen して、最下部のコンポーネントを開くと細かい調整を消せそう
| <form> | ||
| <FormControl className="shr-mb-[15rem]" title="デフォルト" dangerouslyTitleHidden> |
There was a problem hiding this comment.
Story の eslint は無視で大丈夫です（form とか FormControl とか消して ok
関連URL
https://smarthr.atlassian.net/browse/SHRUI-1127
概要
変更内容
確認方法
Storybook や Chromatic で確認してください。