New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(spindle-ui): create SegmentedControl #731
Conversation
f9307a3
to
a89951c
Compare
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 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. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
他に影響がありそうなところだけ先にコメントしました! 🙌🏻
(Draftなので、細かいところは見ていません 🙏🏻 )
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
@yuuumiravy 対応はそちらで大丈夫です! 🙌🏻 |
c5e1769
to
2d445d2
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
一旦、Storybookの部分に関してだけコメントしました! 🙏🏻
(テンプレートのようなものがまだ整備されておらずすみませんが何卒... 🙇🏻 )(DesignDocsの整備済んだら、こちらもいずれ作りますか...! @herablog )
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
スタイル部分みました! 🙏🏻
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
なにとぞ!:pray:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ロジックみました!
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
JSを使わないシンプルな方法でとても良いと思いました!ありがとうございます! そちらの方法で改善しました:0e434b5 |
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
一点だけ...! 🙏🏻
それ以外は良さそう...な気がします.....!!!
packages/spindle-ui/src/SegmentedControl/SegmentedControl.stories.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
すみません1点だけ見落とし・・:pray:
あとはよさそうです! 😄
7d31999
to
96e37cd
Compare
Accesibirlityチェックが不完全な項目があったため対処しました:a06842d 協議の結果、font-weightのアニメーションはつけない方針となりました。 |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
遅くなってごめんなさい:pray:
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
39b5ff5
to
7b88e00
Compare
https://github.com/openameba/spindle/pull/731/files#diff-5e020f4991e219ee13adced8ea4cacc0f49caaf454c45da5601024b701391625R136-R138 このあたりの gap の4を定数化して、gapの値もinline styleで設定しても良いかも?と一瞬思ったものの、変更が加わるときには 4 という数値をイジるだけじゃなくいろんな微調整が発生すると思うのでこのままでも良いかも。という結論に至りました。 |
7b88e00
to
bfc63dc
Compare
現時点では、以下の部分を修正する必要があります。
|
いちお CSS カスタムプロパティ で解決できるかなぁとは思うんですが、u○sで動くか不明なんですよね・・ |
概要
SegmentedControlコンポーネントを作成しました。SegmentedControlは、ページ内で機能やモードを切り替える際に利用するコンポーネントで、基本機能はラジオボタンと同様です。
デザイン
Size
動作確認
2023-06-21.2.08.46.mov
詳細
詳細な仕様に関しては、Experimental Features docsとAccessibility要件定義docsにまとめております。
TODO