feat(spindle-ui): create SegmentedControl by yu-3in · Pull Request #731 · openameba/spindle

yu-3in · 2023-06-20T05:42:28Z

概要

SegmentedControlコンポーネントを作成しました。SegmentedControlは、ページ内で機能やモードを切り替える際に利用するコンポーネントで、基本機能はラジオボタンと同様です。

デザイン

Size

Medium	Large

動作確認

2023-06-21.2.08.46.mov

詳細

詳細な仕様に関しては、Experimental Features docsとAccessibility要件定義docsにまとめております。

TODO

バンドルサイズの maxSize を調整

github-actions · 2023-06-20T05:50:37Z

Visit the preview URL for this PR (updated for commit bfc63dc):

https://ameba-spindle--pr731-feat-segmented-contr-dnq536p6.web.app

_{(expires Fri, 28 Jul 2023 05:45:57 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e7521619a2dd5c653490c8246e81ec2a5c8f1435}

reg-suit · 2023-06-20T05:58:11Z

reg-suit detected visual differences.

Check this report, and review them.

⚪⚪⚪⚪⚪⚪⚪⚪

🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵🔵

What do the circles mean?

The number of circles represent the number of changed images.
🔴 : Changed items, ⚪ : New items, ⚫ : Deleted items, and 🔵 Passed items

How can I change the check status?

If reviewers approve this PR, the reg context status will be green automatically.

itsminadesu

他に影響がありそうなところだけ先にコメントしました！ 🙌🏻

（Draftなので、細かいところは見ていません 🙏🏻 ）

yu-3in · 2023-06-21T04:57:28Z

バンドルサイズが大きいことが原因でテストに失敗しているようです。

PaginationやDropdownMenuなどと同様に bundlesize.config.json にて maxSizeを1.6 kBに変更する方針で対応してもよろしいでしょうか？

itsminadesu · 2023-06-21T05:41:43Z

@yuuumiravy
#731 (comment)

対応はそちらで大丈夫です！ 🙌🏻
ただ、レビューを経て色々修正した結果sizeが変わることもあるので、マージ直前に対応で大丈夫です 🙆🏻‍♀️

itsminadesu

一旦、Storybookの部分に関してだけコメントしました！ 🙏🏻

（テンプレートのようなものがまだ整備されておらずすみませんが何卒... 🙇🏻 ）（DesignDocsの整備済んだら、こちらもいずれ作りますか...！ @herablog ）

itsminadesu

スタイル部分みました！ 🙏🏻

tokimari

なにとぞ！:pray:

itsminadesu

ロジックみました！

yu-3in · 2023-06-23T05:44:07Z

@tokimari
#731 (comment)

JSを使わないシンプルな方法でとても良いと思いました！ありがとうございます！

そちらの方法で改善しました：0e434b5

itsminadesu

一点だけ...！ 🙏🏻
それ以外は良さそう...な気がします.....！！！

itsminadesu

🎉🎉🎉

tokimari

すみません１点だけ見落とし・・:pray:
あとはよさそうです！ 😄

yu-3in · 2023-06-28T01:08:13Z

Accesibirlityチェックが不完全な項目があったため対処しました：a06842d

協議の結果、font-weightのアニメーションはつけない方針となりました。

yu-3in · 2023-06-28T02:54:10Z

再度全体を見直していく中でいくつか修正・リファクタリングしています。

リファクタリング：2e5ed5f（不要な条件を削除）
1550cb7（デザインの要件と異なっていた）
Design Docs
- アニメーショントークンの反映漏れ修正
- 実装例の関数等の名前が間違っていたのを修正

herablog

tokimari

遅くなってごめんなさい:pray:

tokimari

:otukaresamadesita: 🍻 :kakeru_kanpai:

yanagi0602 · 2023-06-28T05:34:48Z

https://github.com/openameba/spindle/pull/731/files#diff-5e020f4991e219ee13adced8ea4cacc0f49caaf454c45da5601024b701391625R136-R138
https://github.com/openameba/spindle/pull/731/files#diff-5e020f4991e219ee13adced8ea4cacc0f49caaf454c45da5601024b701391625R49-R51
https://github.com/openameba/spindle/pull/731/files#diff-a5f4a9907daafb0d56657233c1e1015b95732c07e71bb66fca09539eb93b45b2R7

このあたりの gap の4を定数化して、gapの値もinline styleで設定しても良いかも？と一瞬思ったものの、変更が加わるときには 4 という数値をイジるだけじゃなくいろんな微調整が発生すると思うのでこのままでも良いかも。という結論に至りました。

yu-3in · 2023-06-28T05:41:53Z

#731 (comment)

変更が加わるときには 4 という数値をイジるだけじゃなくいろんな微調整が発生すると思うのでこのままでも良いかも。

現時点では、以下の部分を修正する必要があります。

.spui-SegmentedConrolのgap
.spui-SegmentedControl-dividerのgap
.spui-SegmentedControl--divider .spui-SegmentedControl-button::beforeのleft
tsxの以下コードの４の部分（２箇所存在する点に注意）

`translateX(calc(${100 * selectedIndex}% + ${
  (4 + 4) * selectedIndex + 4
}px))`,

herablog · 2023-06-28T05:47:24Z

いちお CSS カスタムプロパティで解決できるかなぁとは思うんですが、u○sで動くか不明なんですよね・・

yu-3in force-pushed the feat/segmented-control branch 2 times, most recently from f9307a3 to a89951c Compare June 20, 2023 05:44

itsminadesu assigned yu-3in Jun 20, 2023

itsminadesu added the spindle-ui label Jun 20, 2023

yu-3in changed the title ~~feat: create SegmentedControl (Draft)~~ feat(spindle-ui): create SegmentedControl Jun 20, 2023

itsminadesu reviewed Jun 20, 2023

View reviewed changes

itsminadesu requested a review from yanagi0602 June 20, 2023 09:27

yu-3in marked this pull request as ready for review June 21, 2023 05:15

herablog reviewed Jun 21, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css Outdated

herablog reviewed Jun 21, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css Outdated

yu-3in force-pushed the feat/segmented-control branch from c5e1769 to 2d445d2 Compare June 21, 2023 05:45

itsminadesu reviewed Jun 21, 2023

View reviewed changes

yasuda-shin reviewed Jun 21, 2023

View reviewed changes

itsminadesu reviewed Jun 21, 2023

View reviewed changes

tokimari reviewed Jun 21, 2023

View reviewed changes

herablog reviewed Jun 21, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css Outdated

itsminadesu reviewed Jun 21, 2023

View reviewed changes

itsminadesu reviewed Jun 22, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx Outdated

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx Outdated

itsminadesu reviewed Jun 22, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css

itsminadesu reviewed Jun 22, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css Outdated

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx Outdated

tokimari reviewed Jun 23, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css Outdated

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.tsx Outdated

itsminadesu reviewed Jun 26, 2023

View reviewed changes

itsminadesu requested review from herablog, tokimari and yasuda-shin June 26, 2023 02:48

itsminadesu self-requested a review June 26, 2023 09:46

itsminadesu reviewed Jun 26, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx Outdated

itsminadesu approved these changes Jun 26, 2023

View reviewed changes

tokimari reviewed Jun 27, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.tsx Outdated

herablog reviewed Jun 27, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.test.tsx

herablog reviewed Jun 27, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.tsx Outdated

herablog reviewed Jun 27, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.tsx Outdated

yu-3in force-pushed the feat/segmented-control branch from 7d31999 to 96e37cd Compare June 27, 2023 04:35

herablog reviewed Jun 27, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx

herablog reviewed Jun 28, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css Outdated

herablog approved these changes Jun 28, 2023

View reviewed changes

tokimari reviewed Jun 28, 2023

View reviewed changes

Comment thread packages/spindle-ui/src/SegmentedControl/SegmentedControl.css

tokimari approved these changes Jun 28, 2023

View reviewed changes

yu-3in force-pushed the feat/segmented-control branch 3 times, most recently from 39b5ff5 to 7b88e00 Compare June 28, 2023 05:34

yanagi0602 approved these changes Jun 28, 2023

View reviewed changes

feat(spindle-ui): create SegmentedControl component

bfc63dc

yu-3in force-pushed the feat/segmented-control branch from 7b88e00 to bfc63dc Compare June 28, 2023 05:37

yu-3in merged commit e279439 into main Jun 28, 2023

yu-3in deleted the feat/segmented-control branch June 28, 2023 05:57

herablog mentioned this pull request Jun 28, 2023

docs(spindle-ui): animation guideline #740

Merged

tokimari mentioned this pull request Oct 6, 2023

[4.1.2]「HTMLの要素や属性を正しい役割で使用する」のタイトル・内容の見直し openameba/a11y-guidelines#417

Merged

6 tasks

Conversation

yu-3in commented Jun 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

概要

デザイン

Size

動作確認

詳細

TODO

Uh oh!

github-actions Bot commented Jun 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

reg-suit Bot commented Jun 20, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

itsminadesu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yu-3in commented Jun 21, 2023

Uh oh!

Uh oh!

Uh oh!

itsminadesu commented Jun 21, 2023

Uh oh!

itsminadesu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

itsminadesu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

tokimari left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

itsminadesu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

yu-3in commented Jun 20, 2023 •

edited

Loading

github-actions Bot commented Jun 20, 2023 •

edited

Loading

reg-suit Bot commented Jun 20, 2023 •

edited

Loading

yu-3in commented Jun 28, 2023 •

edited

Loading

yanagi0602 commented Jun 28, 2023 •

edited

Loading

yu-3in commented Jun 28, 2023 •

edited

Loading