RadioButtonとSelectの使い分けを記述

[kuny25]

課題・背景

https://github.com/kufu/smarthr-design-system-issues/issues/1238

やったこと

• RadioButton、Selectに「使いどころ」を追記
  • https://deploy-preview-736--smarthr-design-system.netlify.app/products/components/radio-button/
  • https://deploy-preview-736--smarthr-design-system.netlify.app/products/components/select/

参考にした資料

• チェックボックス 対 ラジオボタン – U-Site
  • RadioButton
    • 排他的な選択肢で、ユーザが 1 項目だけを選択しなければいけないときに使われる。
    • 全ての選択肢が常に表示されていて、ユーザが選択肢を見ながら考えやすい
• 選択式フォームをより使いやすくするポイント | knowledge / baigie
  • Select
    • 選択肢がリストに格納されるのでたくさんの選択肢を少しのスペースで配置できる
    • 選択肢が多い場合、一目で選択肢のすべてを確認することができず、一覧性が低い
    • RadioButtonと比べるとクリックが1回増えるため、反復作業にドロップダウンが使われていると、面倒さが増してしまう

動作確認

• Previewでみてね。

進め方

• たたき案をcommitし、#design_system_相談 で相談。
• フィードバックもらってfixさせる。

[netlify]

✅ Deploy Preview for smarthr-design-system ready!

Name	Link
🔨 Latest commit	5445c2b
🔍 Latest deploy log	https://app.netlify.com/sites/smarthr-design-system/deploys/648e2a1445557200086115a0
😎 Deploy Preview	https://deploy-preview-736--smarthr-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[oremega]

@kuny25 Selectはすでに加筆修正して別PRがマージされています。
差分があるので、↑デザインシステムを見てもらってからのほうがいいと思いました。

ちなみに、プロデザではチェックリストの基準充足を目指して頻繁にPRだしてマージしていくのでコンフリクトに気をつけたほうが良いです。
これが対応表になります。

[oremega]

しもためちゃ古いPRだったのに今気づいた。
@kuny25 すいません。最近のものだと勘違いしました。
だいぶ時間立っているのと使い分けも書かれているのでこちらはcloseします。