feat(spindle-ui): create SegmentedControl

[yu-3in]

概要

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

デザイン

Size

Medium	Large

動作確認

2023-06-21.2.08.46.mov

詳細

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

TODO

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

[github-actions]

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]

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]

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

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

[itsminadesu]

@yuuumiravy
#731 (comment)

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

[itsminadesu]

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

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

[itsminadesu]

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

[tokimari]

なにとぞ！:pray:

[itsminadesu]

ロジックみました！

[yu-3in]

@tokimari
#731 (comment)

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

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

[itsminadesu]

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

[itsminadesu]

🎉🎉🎉

[tokimari]

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

[yu-3in]

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

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

[yu-3in]

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

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

[herablog]

[tokimari]

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

[tokimari]

:otukaresamadesita: 🍻 :kakeru_kanpai:

[yanagi0602]

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]

#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]

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