Selectコンポーネントのガイドラインに使用上の注意を追加する #1127
Conversation
✅ Deploy Preview for smarthr-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
@tosiiu 利用を検討利用を検討ってしつこかったので別の表現に変えつつ、当該箇所を修正しました！ |
| 選択肢の数が定まらない箇所で、数によってSelectとRadioButtonを出し分けることは推奨しません。 | ||
|
|
||
| 管理画面ではなく操作画面でユーザー自身が選択肢を設定できる場合は、[Combobox](/products/components/combo-box/)の利用を検討してください。 |
There was a problem hiding this comment.
過去のやり取りを見ていない状況で読んだのですが、この2文が言いたいことがうまく伝わりませんでした。
- 同一画面で数によってSelectとRadioButtonがバラバラと並んでいるのは避ける？
- 「管理画面ではなく操作画面で」とはどういうことでしょうか…
There was a problem hiding this comment.
@versionfive 前者の一文は、その前の段落とセットになっていて、
選択肢が管理画面などで自由に設定され、ユーザーの操作画面に表示する際に数が定まらない場合は、選択肢の最大数を考慮して利用するコンポーネントを判断してください。
選択肢の数が定まらない箇所で、数によってSelectとRadioButtonを出し分けることは推奨しません。
でまとめて解釈してほしい箇所でした。ここは選択肢の元ネタが増減する場合、たとえば評価シートの設問設定画面で選択肢の数が可変な場合を言っていて、そういうときはユーザーが操作する画面側で「元ネタの数によってUIを切り替える」ようなことはせずに、提供する側の最大値で判断してねという話です。そういうふうに元ネタを設定できる画面を「管理画面」と読んでいるつもり、でした。
後者の一文は、そういう管理画面がない場合で、ユーザーが自分で選択肢を追加できるシーンを言っています。Comboboxにもうその機構があるから使ってねくらいのつもりでしたが、この文になる前は「例えばselectやradioの隣に新規に選択肢を入力するinputと追加buttonなどを配置する必要はありません」的なことを添えていました。
前者は段落を分けずにつなげたら良さそう？ 後者はもはや不要な気がしてきましたが、イキの場合はもうちょっと説明が必要かもしれませんね…
There was a problem hiding this comment.
なるほどなんとなく理解できました。
想定元のUIのイメージがない人が読み取るのがどちらも難しいと思ったのですが、例えばUIイメージを画像なりで示すのはどうですか？「こうしないでね」という意図を感じたのでDo&Don'tで見せるのもアリかと思いました。
There was a problem hiding this comment.
@versionfive UIイメージを画像なりで示すとなると、たとえば人事評価の管理画面を使うと思うんですが、それはそれで人事評価ツールを使っていない人にとってはイメージしづらいのは変わらなそうだなぁと思えてきました。文章だけで伝わるようにできないかもう少し考えてみます。
|
|
||
| ただし、RadioButtonで配置するスペースがない場合はSelectも利用可能です。 | ||
|
|
||
| ### 選択肢の数が未定の場合 |
There was a problem hiding this comment.
| ### 選択肢の数が未定の場合 | |
| ### 選択肢の数が不定の場合 |
imo: 「未定」だといつか決まるというニュアンスに聞こえるので、「不定」が良さそうな気がします
There was a problem hiding this comment.
言いたいこと的に不定が合ってそうなので修正しました！
| @@ -9,6 +9,26 @@ import { ComponentStory } from '@Components/ComponentStory' | |||
|
|
|||
| <ComponentStory name="Select" /> | |||
|
|
|||
| ## 使用上の注意 | |||
|
|
|||
| 基本的に選択肢の数が6個以上になる場合はSelectを利用します。また、初期状態では選択肢を一覧できないことに注意してください。 | |||
There was a problem hiding this comment.
「また」に関して、「また」の前後が並列関係の書き方ではないので最初ちょっと不自然に感じました😭 (私だけかもなので気にならなかったらLGTMです！
| ## 使用上の注意 | ||
|
|
||
| 基本的に選択肢の数が6個以上になる場合はSelectを利用します。また、初期状態では選択肢を一覧できないことに注意してください。 | ||
|
|
||
| ユーザーがスムーズに操作できるよう、選択肢の数に応じてSelectコンポーネント以外の利用も考えられます。 | ||
|
|
||
| ### 選択肢が5個以下の場合 | ||
|
|
||
| 一般的に人は4±1個の情報のまとまりまでしか短期的に記憶できないと言われています。選択肢が5個以下であれば、初期状態で選択肢が一覧できる[RadioButton](/products/components/radio-button/)の利用を推奨します。 | ||
|
|
||
| ただし、RadioButtonで配置するスペースがない場合はSelectも利用可能です。 | ||
|
|
||
| ### 選択肢の数が不定の場合 | ||
|
|
||
| ユーザーの設定や条件によって選択肢の数が増減するなど、実装時に数を固定できない場合は、想定される最大数を考慮して利用するコンポーネントを判断してください。 | ||
|
|
There was a problem hiding this comment.
| ## 使用上の注意 | |
| 基本的に選択肢の数が6個以上になる場合はSelectを利用します。また、初期状態では選択肢を一覧できないことに注意してください。 | |
| ユーザーがスムーズに操作できるよう、選択肢の数に応じてSelectコンポーネント以外の利用も考えられます。 | |
| ### 選択肢が5個以下の場合 | |
| 一般的に人は4±1個の情報のまとまりまでしか短期的に記憶できないと言われています。選択肢が5個以下であれば、初期状態で選択肢が一覧できる[RadioButton](/products/components/radio-button/)の利用を推奨します。 | |
| ただし、RadioButtonで配置するスペースがない場合はSelectも利用可能です。 | |
| ### 選択肢の数が不定の場合 | |
| ユーザーの設定や条件によって選択肢の数が増減するなど、実装時に数を固定できない場合は、想定される最大数を考慮して利用するコンポーネントを判断してください。 | |
| ## 使用上の注意 | |
| ### 選択肢が6個以上の場合に使用する | |
| 基本的に選択肢の数が6個以上になる場合はSelectを使用します。また、初期状態では選択肢を一覧できないことに注意してください。 | |
| ユーザーがスムーズに操作できるよう、選択肢の数に応じてSelectコンポーネント以外の使用も考えられます。 | |
| #### 選択肢が5個以下の場合 | |
| 一般的に人は4±1個の情報のまとまりまでしか短期的に記憶できないと言われています。選択肢が5個以下であれば、初期状態で選択肢が一覧できる[RadioButton](/products/components/radio-button/)の使用を推奨します。 | |
| ただし、RadioButtonで配置するスペースがない場合はSelectも使用可能です。 | |
| #### 選択肢の数が不定の場合 | |
| ユーザーの設定や条件によって選択肢の数が増減するなど、実装時に数を固定できない場合は、想定される最大数を考慮して使用するコンポーネントを判断してください。 | |
見出し構造が見づらくなっていたので、まず「このとき使う」を見えるようにして、その他のケースは下に下げました。
[Proposal] また主語が開発者の場合、コンポーネントは「利用」よりも「使用」派です。（という話を @tosiiu sanとしていました）
|
|
||
| ### SingleComboBoxとの使い分け | ||
|
|
||
| 単一選択かつ、ユーザーに選択肢をフィルタリングさせたい場合は[SingleComboBox](/products/components/combo-box/single-combo-box)の利用を検討してください。 |
There was a problem hiding this comment.
| 単一選択かつ、ユーザーに選択肢をフィルタリングさせたい場合は[SingleComboBox](/products/components/combo-box/single-combo-box)の利用を検討してください。 | |
| 単一選択かつ、ユーザーに選択肢をフィルタリングさせたい場合は[SingleComboBox](/products/components/combo-box/single-combo-box)の使用を検討してください。 |
[Proposal] 主語が開発者の場合、コンポーネントは「利用」よりも「使用」派です。
|
@versionfive @Qs-F 見出し構造と表現を修正しました！ @wentzzz こちらが先にマージされる気運になってきたので、single-combo-box のリンクを combo-box に戻してあります。お手数ですが #1152 の対応時に select.mdx の修正もお願いいたします。 |
|
|
||
| ### ComboBoxとの使い分け | ||
|
|
||
| 単一選択かつ、ユーザーに選択肢をフィルタリングさせたい場合は[ComboBox](/products/components/combo-box/)の使用を検討してください。 |
There was a problem hiding this comment.
[IMO] SmartHRのSelectにおいてはmultiple属性を想定されていない認識なので、単一選択であることは文脈から自明として省けそうに思いました。
| 単一選択かつ、ユーザーに選択肢をフィルタリングさせたい場合は[ComboBox](/products/components/combo-box/)の使用を検討してください。 | |
| ユーザーに選択肢をフィルタリングさせたい場合は[ComboBox](/products/components/combo-box/)の使用を検討してください。 |
課題・背景
https://smarthr.atlassian.net/browse/SD-651
やったこと
Selectコンポーネントのガイドラインに使用上の注意を追加しました。
https://deploy-preview-1127--smarthr-design-system.netlify.app/products/components/select
配置するスペースがないとか項目が6以上のとき、ただちにSelectコンポーネントに変えるべきとまでは思わないので、「検討してください」としています。参考
確認おねがいいたします。