SegmentedControlの概要と使用上の注意を追加 #1141

o-kwr · 2024-04-22T08:27:48Z

課題・背景

https://smarthr.atlassian.net/browse/SD-635
https://smarthr.atlassian.net/browse/SD-576

基準充足！

やったこと

SegmentedControlの概要とどんなときに使うべきかを追加した

やらなかったこと

動作確認

Previewから確認お願いします！
https://deploy-preview-1141--smarthr-design-system.netlify.app/products/components/segmented-control/

キャプチャ

Before	After

netlify · 2024-04-22T08:28:05Z

✅ Deploy Preview for smarthr-design-system ready!

Name	Link
🔨 Latest commit	`a401b95`
🔍 Latest deploy log	https://app.netlify.com/sites/smarthr-design-system/deploys/666fe4d713f2960009ec5b68
😎 Deploy Preview	https://deploy-preview-1141--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 configuration.

versionfive

コメントしました！

versionfive · 2024-04-22T08:45:08Z

content/articles/products/components/segmented-control.mdx

@@ -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/)と同義とも言えますが、選択（状態の切り替え）によってビューに対して影響が発生することが特徴です。


概要文が大きく、読み切る必要があるので、この一文はRadioButtonとの使い分けになると思うので、使用上の注意に項目をつくってもよいのではと思いました。

versionfive · 2024-04-22T08:47:56Z

content/articles/products/components/segmented-control.mdx

+### ビューの関心が切り替わるときには用いない
+異なる状態の切り替えによって、扱うオブジェクトごとビューの関心が変わる場合はSegmentedControlではなく[TabBar](/products/components/tab-bar/)を用いるようにしてください。


このドキュメントはSegmentedControlの使い方を示すページなので、「こういうときに用いる」というスタンスで書けるならより適当かと思いました。

誤った使い方が多いから「このときは使わないで」を示す使い方もあると思いますが、SegmentedControlとTabBarに関しては「どっちを使うとよい？」という迷いが出発点なので、「こういうときにSegmentedControlを使ってね」中心に書けると良さそうだと思いました

SegmentedControl も TabBar も、なんだったら SideNav などをも包括したパターンの可能性もある?

oti

SegmentControl を使うにふさわしい、同じオブジェクトの状態を切り替えるために用いることがスッとわかる具体例が欲しいと思いました！

tosiiu

既出のコメントと同じく、近しいコンポーネントとの使い分けが迷うポイントだと思うので独立した章としてSwitchのように記載されているといいなと思いました！

MasafumiKabe

既出のコメントと同じお気持ちです！
類似のコンポーネントとの違いなどについて割と序盤から言及しているので、まずは SegmentedContorol 単品について簡単に説明できていると良いと思いました！

oti

いくつかコメントしました！

content/articles/products/components/segmented-control.mdx

oti · 2024-05-20T08:42:51Z

content/articles/products/components/segmented-control.mdx

+```
+
+### Switch との違い
+Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。


このページの主体はSegmentedControlなので主従が逆だと思いました。

e.g）SegmentedControlは〜〜です。〜〜の場合はSwitchを使用してください。

oti · 2024-05-20T08:42:53Z

content/articles/products/components/segmented-control.mdx

+Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。
+
+### RadioButton との違い
+振る舞いとしては[RadioButton](/products/components/radio-button/)と同義とも言えますが、選択（状態の切り替え）によって即座にビューに対して影響が発生することが特徴です。絞り込み時にsubmitが発生する場合はRadioButtonの使用も検討してみてください。


うまく説明できているように感じなかったのと、「絞り込み時に」という言葉が急に出てきたのが引っかかりました。SegmentedControl か Tab か Switch か RadioButton かという話のなかに、絞り込みという認識はないように思います。言いたいことは「表示切替時に〜」なのかな？

versionfive

前提の確認をSlackでしておりますー

versionfive · 2024-05-20T09:23:54Z

content/articles/products/components/segmented-control.mdx

+## 使用上の注意
+
+### TabBar との違い
+ビューに対してフィルタリングしたり見え方を変えたいときに[TabBar](/products/components/tab-bar/)も用いることができますが、TabBarの場合はそれぞれのタブに内包されるオブジェクト自体が異なる場合に使うことが適しています。


Suggested change

ビューに対してフィルタリングしたり見え方を変えたいときに[TabBar](/products/components/tab-bar/)も用いることができますが、TabBarの場合はそれぞれのタブに内包されるオブジェクト自体が異なる場合に使うことが適しています。

ビューに対してフィルタリングしたり見え方を変えたいときに[TabBar](/products/components/tab-bar/)を使う場合がありますが、TabBarはそれぞれのタブに内包されるオブジェクト自体が異なる場合に使うことが適しています。

一方、SegmentedControlはそれぞれのセグメントに内包されるオブジェクトが同一である場合に使うことが適しています。

書きっぷりはこれでいいのかわかりませんが、SegmentedControlはどうだ、も書いてほしいです。

tosiiu

切り替えの対象として「状態・フィルタリング・モード・見た目」が挙げられていますが、フィルタリングやモードの変化が何を示すのか明確に分かりませんでした...！何かしら説明があるとより分かりやすいと感じました

content/articles/products/components/segmented-control.mdx

versionfive

操作後の印象として、「オブジェクトが絞り込まれる（全体から一部が表示される）」というより「オブジェクトの一部が表示されたビューに切り替わる」ような結果になる気がしてきました。

また、mdxファイルのヘッダーのdescriptionが空なので埋めるようにお願いします。

content/articles/products/components/segmented-control.mdx

tosiiu

v5-sanのコメントに同意です。
「ビューの切り替え」に、レイアウトの変更も表示項目の変更（絞り込み）も含まれていると解釈して整理しても良さそうと思いました。

Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>

oti

LGTM!

tosiiu

一点コメントしましたが、大枠LGTMです！

content/articles/products/components/segmented-control.mdx

MasafumiKabe

yosasou~

uknmr

LGTM~
（「使用してください」と「使ってください」が揺れてるのはちょっと気になりました）

uknmr · 2024-06-10T08:29:35Z

content/articles/products/components/segmented-control.mdx

+<TabBar id="hover">
+    <TabItem id="border-1" selected>
+    書類
+    </TabItem>
+    <TabItem id="border-2">
+    承認経路
+    </TabItem>
+    <TabItem id="border-3">
+    承認履歴
+    </TabItem>
+</TabBar>


不要そう・名前不適切そう。

Suggested change

<TabBar id="hover">

<TabItem id="border-1" selected>

書類

</TabItem>

<TabItem id="border-2">

承認経路

</TabItem>

<TabItem id="border-3">

承認履歴

</TabItem>

</TabBar>

<TabBar>

<TabItem id="object-1" selected>

書類

</TabItem>

<TabItem id="object-2">

承認経路

</TabItem>

<TabItem id="object-3">

承認履歴

</TabItem>

</TabBar>

たしかに、TabBarのページではないので、ここになくてもよさそう

ytysym

よさそうでした！

ytysym · 2024-04-23T06:12:38Z

content/articles/products/components/segmented-control.mdx

 <ComponentStory name="SegmentedControl" />

+## 使用上の注意
+
+### ビューの関心が切り替わるときには用いない


・おおむねv5さんと同じ意見です。
「同じオブジェクトに対してビューを切り替える」はこのコンポーネントの挙動への期待として明確に含まれている認識なので、ここは強調して具体的な推奨パターンなど書いてあげてもよさそうだと思いました。

・以下の場合はNG側だと思うのですが、個人的に少し悩んだので考慮いただけるとよさそうかな〜と思いました。
コレクションビューで、オブジェクトのプロパティを起点に、表示するインスタンスを切り替える（ステータスやアーカイブのようなやつ）

・あと年末調整のこの使い方はNGかも？と思ったので、一応メモしておきます。
こういうNGを確実に弾ける基準、という考え方もありだと思うので。

tosiiu

LGTM!

oti

解説全体的に良くなったと思います！

見出しを「どういうときに使う/使わない」側の表現に揃えてみました。2つずつ提案しています。

oti · 2024-06-14T06:21:46Z

content/articles/products/components/segmented-control.mdx

 <ComponentStory name="SegmentedControl" />

+## 使用上の注意
+
+### TabBar との違い


Suggested change

### TabBar との違い

### オブジェクト自体を切り替える場合には使用しない

Suggested change

### TabBar との違い

### オブジェクト自体を切り替える場合はTabBarを使用する

oti · 2024-06-14T06:23:07Z

content/articles/products/components/segmented-control.mdx

+
+オブジェクト自体を切り替えて表示する場合は、[TabBar](/products/components/tab-bar/)を使ってください。
+
+### Switch との違い


Suggested change

### Switch との違い

### オン・オフを切り替える場合には使用しない

Suggested change

### Switch との違い

### オン・オフを切り替える場合にはSwitchを使用する

oti · 2024-06-14T06:25:05Z

content/articles/products/components/segmented-control.mdx

+### Switch との違い
+SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オン・オフのどちらか1つの状態を表して切り替えるときは[Switch](/products/components/switch/)を使ってください。
+
+### RadioButton との違い


Suggested change

### RadioButton との違い

### Submitが発生する操作の選択項目には使用しない

Suggested change

### RadioButton との違い

### Submitが発生する操作の選択項目にはRadioButtonを使用する

oti · 2024-06-14T06:28:08Z

content/articles/products/components/segmented-control.mdx

+オブジェクト自体を切り替えて表示する場合は、[TabBar](/products/components/tab-bar/)を使ってください。
+
+### Switch との違い
+SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オン・オフのどちらか1つの状態を表して切り替えるときは[Switch](/products/components/switch/)を使ってください。


Suggested change

SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オン・オフのどちらか1つの状態を表して切り替えるときは[Switch](/products/components/switch/)を使ってください。

SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オンとオフの2つの状態を切り替えるときは[Switch](/products/components/switch/)を使ってください。

[nits]なんとなく冗長に感じましたが、元のままでも良い気はしました。

oti · 2024-06-14T06:29:14Z

content/articles/products/components/segmented-control.mdx

+### RadioButton との違い
+「複数の選択肢から1つを選ぶ」という振る舞いは[RadioButton](/products/components/radio-button/)と似ていますが、SegmentedControlは操作すると即座にビューに対して影響が発生することが特徴です。
+
+選択操作後に「送信」や「保存」といった`submit`が発生する場合は、RadioButtonを使ってください。


Suggested change

選択操作後に「送信」や「保存」といった`submit`が発生する場合は、RadioButtonを使ってください。

選択操作後に「送信」や「保存」といったSubmitが発生する場合は、RadioButtonを使ってください。

[IMO] ここでいうsubmitはコードではなく処理の名称なので、code にしなくてもよさそうに感じました。ｲﾓです。

versionfive

使用上の注意の見出しについてはoti sanのコメントを反映後に確認しますが、さきに細かい点だけコメントしました

versionfive · 2024-06-14T06:37:23Z

content/articles/products/components/segmented-control.mdx

+### RadioButton との違い
+「複数の選択肢から1つを選ぶ」という振る舞いは[RadioButton](/products/components/radio-button/)と似ていますが、SegmentedControlは操作すると即座にビューに対して影響が発生することが特徴です。
+
+選択操作後に「送信」や「保存」といった`submit`が発生する場合は、RadioButtonを使ってください。


Suggested change

選択操作後に「送信」や「保存」といった`submit`が発生する場合は、RadioButtonを使ってください。

選択操作後に、`送信`や`保存`といったtype属性が`submit`のボタンなどを押すことで入力内容を適用したい場合は、RadioButtonを使ってください。

#1168 で検討されている表記とあわせてみました。

ytysym

otiさん、v5さんのコメントの部分が修正される前提で、ほかは気になるところなかったのでLGTMです！

oti

LGTM!

MasafumiKabe

改めて LGTM!

versionfive

LGTM!

SegmentedControlの概要を追加

b4b1a1a

o-kwr marked this pull request as ready for review April 22, 2024 08:34

o-kwr requested review from versionfive, tosiiu and a team as code owners April 22, 2024 08:34

o-kwr requested review from MasafumiKabe and ytysym April 22, 2024 08:34

versionfive reviewed Apr 22, 2024

View reviewed changes

oti reviewed Apr 22, 2024

View reviewed changes

tosiiu reviewed Apr 22, 2024

View reviewed changes

MasafumiKabe reviewed Apr 23, 2024

View reviewed changes

o-kwr added 2 commits May 20, 2024 16:47

Merge branch 'main' into add-guideline-segmentedcontrol

1462429

概要文の切り分けと全体的な更新

e94c860

oti requested review from versionfive, tosiiu, MasafumiKabe, uknmr and oti May 20, 2024 08:18

oti requested changes May 20, 2024

View reviewed changes

versionfive reviewed May 20, 2024

View reviewed changes

tosiiu reviewed May 21, 2024

View reviewed changes

content/articles/products/components/segmented-control.mdx Outdated Show resolved Hide resolved

content/articles/products/components/segmented-control.mdx Outdated Show resolved Hide resolved

o-kwr added 3 commits June 7, 2024 17:54

Merge branch 'main' into add-guideline-segmentedcontrol

e4dc7b5

各セクションのリライト

9ebb16e

不要な文を削除

e72f1df

o-kwr requested review from oti, versionfive and tosiiu June 7, 2024 09:19

versionfive requested changes Jun 7, 2024

View reviewed changes

content/articles/products/components/segmented-control.mdx Outdated Show resolved Hide resolved

content/articles/products/components/segmented-control.mdx Outdated Show resolved Hide resolved

content/articles/products/components/segmented-control.mdx Outdated Show resolved Hide resolved

tosiiu reviewed Jun 10, 2024

View reviewed changes

o-kwr and others added 4 commits June 10, 2024 16:31

"TabBarとの違い"のリライト

40723d1

Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>

"RadioButtonとの違い"のリライト

96a8b21

Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>

概要文のリライト

d6c8dc9

Co-authored-by: versionfive <64398878+versionfive@users.noreply.github.com>

Update description

0590a93

o-kwr requested review from tosiiu and versionfive June 10, 2024 07:39

oti previously approved these changes Jun 10, 2024

View reviewed changes

tosiiu reviewed Jun 10, 2024

View reviewed changes

content/articles/products/components/segmented-control.mdx Outdated Show resolved Hide resolved

MasafumiKabe previously approved these changes Jun 10, 2024

View reviewed changes

uknmr previously approved these changes Jun 10, 2024

View reviewed changes

ytysym previously approved these changes Jun 10, 2024

View reviewed changes

TabBarの例示を削除と概文の修正

3a0852a

o-kwr dismissed stale reviews from ytysym, uknmr, MasafumiKabe, and oti via 3a0852a June 14, 2024 04:35

o-kwr added 2 commits June 14, 2024 13:41

文末を調整

d114192

コンポーネントの定義の書き直し

618339a

tosiiu approved these changes Jun 14, 2024

View reviewed changes

oti requested changes Jun 14, 2024

View reviewed changes

versionfive reviewed Jun 14, 2024

View reviewed changes

ytysym approved these changes Jun 14, 2024

View reviewed changes

見出しの修正

a401b95

o-kwr requested review from versionfive and oti June 18, 2024 03:56

oti approved these changes Jun 18, 2024

View reviewed changes

MasafumiKabe approved these changes Jun 18, 2024

View reviewed changes

versionfive approved these changes Jun 18, 2024

View reviewed changes

o-kwr merged commit 3ed61ee into main Jun 18, 2024
5 checks passed

o-kwr deleted the add-guideline-segmentedcontrol branch June 18, 2024 04:39

		### ビューの関心が切り替わるときには用いない
		異なる状態の切り替えによって、扱うオブジェクトごとビューの関心が変わる場合はSegmentedControlではなく[TabBar](/products/components/tab-bar/)を用いるようにしてください。

-ビューに対してフィルタリングしたり見え方を変えたいときに[TabBar](/products/components/tab-bar/)も用いることができますが、TabBarの場合はそれぞれのタブに内包されるオブジェクト自体が異なる場合に使うことが適しています。
+ビューに対してフィルタリングしたり見え方を変えたいときに[TabBar](/products/components/tab-bar/)を使う場合がありますが、TabBarはそれぞれのタブに内包されるオブジェクト自体が異なる場合に使うことが適しています。
+一方、SegmentedControlはそれぞれのセグメントに内包されるオブジェクトが同一である場合に使うことが適しています。

	### TabBar との違い
	### オブジェクト自体を切り替える場合には使用しない

	### TabBar との違い
	### オブジェクト自体を切り替える場合はTabBarを使用する


		オブジェクト自体を切り替えて表示する場合は、[TabBar](/products/components/tab-bar/)を使ってください。

		### Switch との違い

	### Switch との違い
	### オン・オフを切り替える場合には使用しない

	### Switch との違い
	### オン・オフを切り替える場合にはSwitchを使用する

	### RadioButton との違い
	### Submitが発生する操作の選択項目には使用しない

	### RadioButton との違い
	### Submitが発生する操作の選択項目にはRadioButtonを使用する

	SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オン・オフのどちらか1つの状態を表して切り替えるときは[Switch](/products/components/switch/)を使ってください。
	SegmentedControlは異なる状態を切り替えるためのコンポーネントですが、オンとオフの2つの状態を切り替えるときは[Switch](/products/components/switch/)を使ってください。

	選択操作後に「送信」や「保存」といった`submit`が発生する場合は、RadioButtonを使ってください。
	選択操作後に「送信」や「保存」といったSubmitが発生する場合は、RadioButtonを使ってください。

	選択操作後に「送信」や「保存」といった`submit`が発生する場合は、RadioButtonを使ってください。
	選択操作後に、`送信`や`保存`といったtype属性が`submit`のボタンなどを押すことで入力内容を適用したい場合は、RadioButtonを使ってください。

SegmentedControlの概要と使用上の注意を追加 #1141

SegmentedControlの概要と使用上の注意を追加 #1141

Conversation

o-kwr commented Apr 22, 2024 • edited by versionfive Loading

課題・背景

やったこと

やらなかったこと

動作確認

キャプチャ

netlify bot commented Apr 22, 2024 • edited Loading

✅ Deploy Preview for smarthr-design-system ready!

versionfive left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

versionfive Apr 22, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oti left a comment

Choose a reason for hiding this comment

tosiiu left a comment

Choose a reason for hiding this comment

MasafumiKabe left a comment

Choose a reason for hiding this comment

oti left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

versionfive left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tosiiu left a comment

Choose a reason for hiding this comment

versionfive left a comment • edited Loading

Choose a reason for hiding this comment

tosiiu left a comment

Choose a reason for hiding this comment

oti left a comment

Choose a reason for hiding this comment

tosiiu left a comment

Choose a reason for hiding this comment

MasafumiKabe left a comment

Choose a reason for hiding this comment

uknmr left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ytysym left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tosiiu left a comment

Choose a reason for hiding this comment

oti left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

versionfive left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ytysym left a comment

Choose a reason for hiding this comment

oti left a comment

Choose a reason for hiding this comment

MasafumiKabe left a comment

Choose a reason for hiding this comment

versionfive left a comment

Choose a reason for hiding this comment

o-kwr commented Apr 22, 2024 •

edited by versionfive

Loading

netlify bot commented Apr 22, 2024 •

edited

Loading

versionfive Apr 22, 2024 •

edited

Loading

versionfive left a comment •

edited

Loading