SegmentedControlの概要と使用上の注意を追加 #1141
Conversation
✅ Deploy Preview for smarthr-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -5,8 +5,19 @@ description: '' | |||
| import { ComponentStory } from '@Components/ComponentStory' | |||
| import { ComponentPropsTable } from '@Components/ComponentPropsTable' | |||
|
|
|||
| 2つ以上の異なる状態を切り替えるためのコンポーネントです。[Switch](/products/components/switch/)はオンとオフの単純な2つの状態を切り替えるためのコンポーネントですが、SegmentedControlは任意の異なる状態を3つ以上持つことができます。 | |||
|
|
|||
| 振る舞いとしては[RadioButton](/products/components/radio-button/)と同義とも言えますが、選択（状態の切り替え）によってビューに対して影響が発生することが特徴です。 | |||
There was a problem hiding this comment.
概要文が大きく、読み切る必要があるので、この一文はRadioButtonとの使い分けになると思うので、使用上の注意に項目をつくってもよいのではと思いました。
| ### ビューの関心が切り替わるときには用いない | ||
| 異なる状態の切り替えによって、扱うオブジェクトごとビューの関心が変わる場合はSegmentedControlではなく[TabBar](/products/components/tab-bar/)を用いるようにしてください。 |
There was a problem hiding this comment.
このドキュメントはSegmentedControlの使い方を示すページなので、「こういうときに用いる」というスタンスで書けるならより適当かと思いました。
誤った使い方が多いから「このときは使わないで」を示す使い方もあると思いますが、SegmentedControlとTabBarに関しては「どっちを使うとよい？」という迷いが出発点なので、「こういうときにSegmentedControlを使ってね」中心に書けると良さそうだと思いました
There was a problem hiding this comment.
SegmentedControl も TabBar も、なんだったら SideNav などをも包括したパターンの可能性もある?
| 2つ以上の異なる状態を切り替えるためのコンポーネントです。状態を切り替えることによって影響下のビューに対して作用し、主にオブジェクトのフィルタリングやモードの変化を促します。 | ||
| ビューに存在するオブジェクト自体は変わらないが、フィルタリングや見え方を変えたいときに適しているコンポーネントです。 | ||
|
|
||
|
|
There was a problem hiding this comment.
| ```tsx editable codeBlock | |
| <SegmentedControl size="s" options={[ | |
| { value: 'list view', content: 'リスト表示' }, | |
| { value: 'map view', content: 'マップ表示' }, | |
| ]} value="list view" /> |
ここに具体例を書くのはだめですか？
There was a problem hiding this comment.
ComponentStoryがそれを担っている認識
| ``` | ||
|
|
||
| ### Switch との違い | ||
| Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。 |
There was a problem hiding this comment.
このページの主体はSegmentedControlなので主従が逆だと思いました。
e.g）SegmentedControlは〜〜です。〜〜の場合はSwitchを使用してください。
| Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。 | ||
|
|
||
| ### RadioButton との違い | ||
| 振る舞いとしては[RadioButton](/products/components/radio-button/)と同義とも言えますが、選択（状態の切り替え）によって即座にビューに対して影響が発生することが特徴です。絞り込み時にsubmitが発生する場合はRadioButtonの使用も検討してみてください。 |
There was a problem hiding this comment.
うまく説明できているように感じなかったのと、「絞り込み時に」という言葉が急に出てきたのが引っかかりました。SegmentedControl か Tab か Switch か RadioButton かという話のなかに、絞り込みという認識はないように思います。言いたいことは「表示切替時に〜」なのかな？
| ## 使用上の注意 | ||
|
|
||
| ### TabBar との違い | ||
| ビューに対してフィルタリングしたり見え方を変えたいときに[TabBar](/products/components/tab-bar/)も用いることができますが、TabBarの場合はそれぞれのタブに内包されるオブジェクト自体が異なる場合に使うことが適しています。 |
There was a problem hiding this comment.
| ビューに対してフィルタリングしたり見え方を変えたいときに[TabBar](/products/components/tab-bar/)も用いることができますが、TabBarの場合はそれぞれのタブに内包されるオブジェクト自体が異なる場合に使うことが適しています。 | |
| ビューに対してフィルタリングしたり見え方を変えたいときに[TabBar](/products/components/tab-bar/)を使う場合がありますが、TabBarはそれぞれのタブに内包されるオブジェクト自体が異なる場合に使うことが適しています。 | |
| 一方、SegmentedControlはそれぞれのセグメントに内包されるオブジェクトが同一である場合に使うことが適しています。 |
書きっぷりはこれでいいのかわかりませんが、SegmentedControlはどうだ、も書いてほしいです。
| ``` | ||
|
|
||
| ### Switch との違い | ||
| Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。 |
There was a problem hiding this comment.
細かいですがリンクが欲しいです！
| Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。 | |
| [Switch](/products/components/switch/)はオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。 |
| 2つ以上の異なる状態を切り替えるためのコンポーネントです。状態を切り替えることによって影響下のビューに対して作用し、主にオブジェクトのフィルタリングやモードの変化を促します。 | ||
| ビューに存在するオブジェクト自体は変わらないが、フィルタリングや見え方を変えたいときに適しているコンポーネントです。 |
There was a problem hiding this comment.
IMOですが、概要としては2つ以上の異なる状態を切り替えるコンポーネントであることと主な用途が説明されていれば十分に感じました！オブジェクトの変更には使わないことは「TabBarとの違い」で言及できると十分そうです！
課題・背景
https://smarthr.atlassian.net/browse/SD-635
https://smarthr.atlassian.net/browse/SD-576
基準充足！
やったこと
やらなかったこと
動作確認
Previewから確認お願いします！
https://deploy-preview-1141--smarthr-design-system.netlify.app/products/components/segmented-control/
キャプチャ