-
Notifications
You must be signed in to change notification settings - Fork 16
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
BottomFixedAreaとFloatAreaを更新 #1228
base: main
Are you sure you want to change the base?
Conversation
✅ Deploy Preview for smarthr-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
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.
一旦ここまでコメントしました!
|
||
## レイアウト | ||
|
||
対象となる領域に重なるように、画面の下辺から24pxの位置にFloatAreaはを置きます。FloatAreaの幅は、対象領域の幅から左右8pxずつ広くなるようにします。 |
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.
なぜ左右に8px広げるのか書いてあるといいかも。背景のBaseと重なって存在に気付けないのを防ぐため、的な?
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.
- fixedなFAの場合、下から16pxのところに置きがちかも(私だけ?)
- stickyなFAの場合、コンテンツがウィンドウサイズよりも小さい場合は画面の底辺につかないこともあるかも。大きければ底辺より16pxのところにくっついているかも
基本的にはstickyのほうがおすすめなんですかねぇ? @uknmr
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.
sticky 推奨というか、一択だと思ってます。
- fixed にしちゃうと実装上の考慮が余計に必要になることが多い
- 視線誘導的にも、コンテンツがウィンドウサイズより小さいとき、底辺ではなく前のコンテンツに付いてるのは自然なはず
- どうしてもウィンドウ底辺に付けたければ、
margin-block-start: auto
などで対応可能(Stack されてるはず)
- どうしてもウィンドウ底辺に付けたければ、
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.
対象領域の幅から左右8pxずつ広くなるように
この想定知らなかった。本当に必要ならコンポーネント側で対応してもよさそう(できるかはわからない
Co-authored-by: Masafumi Kabe <[email protected]>
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.
コメントしてみました!
- 両方置く場合は、Primaryボタンを右側に置きます。 | ||
- Tertiaryボタン | ||
- Primary・Secondaryボタンを置いたうえで、さらにアクションボタンを置く場合は、下の段にTertiaryボタンを複数個置けます。 | ||
|
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.
レイアウトについて言及があっても良いと思いました。(画面下部に配置している様子がわかる画像を追加するなど)
留意点として、前面に配置するコンポーネントとしての性質上、画面を下までスクロールした時にコンテンツが背面に回り込んで表示できなくなることを防ぐために適切なスペーシングをとる、みたいなことも一筆あっても良さそうに思いました。
|
||
### アクション対象外のカラムがある場合はFloatAreaを使う | ||
|
||
固定表示するアクションボタンの対象とならないカラム(サイドバーなど)がページ内にある場合は、[FloatArea](/products/components/float-area/)を使ってください。 |
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.
IMO: FloatAreaもそうですが、欲を言えばDo/Don'tなどの具体例があると良さそう。デザインパターン(基本機能)のC.アクションビューとかを参照しても良さそう。
|
||
### アクション対象外のカラムがある場合はFloatAreaを使う | ||
|
||
固定表示するアクションボタンの対象とならないカラム(サイドバーなど)がページ内にある場合は、[FloatArea](/products/components/float-area/)を使ってください。 |
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.
IMO: なぜBottomFixedAreaを避けるべきか?も言語化してあるとありがたいと思いました。
- 最大でそれぞれ1個ずつ置けます。 | ||
- 両方置く場合は、Primaryボタンを右側に置きます。 | ||
- Tertiaryボタン | ||
- Primary・Secondaryボタンを置いたうえで、さらにアクションボタンを置く場合は、下の段にTertiaryボタンを複数個置けます。 |
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.
IMO: 「必要に応じて」が具体的にどういうケースがあるかなど代表例でもあるとわかりやすいと思いました。例えばどういうケースでTertialyボタンを使うのか例示があると判断しやすいと思いました。
- [ページ全体を使ったモード](/products/design-patterns/modal-ui/#h3-2)であるとき | ||
- タスクとしての性質を持つオブジェクトの詳細画面 | ||
|
||
置かれるアクションボタンの例として、次のようなものがあります。 |
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. 説明文(任意) | ||
|
||
必要に応じて、アクションに関する説明を書きます。 |
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.
IMO: 欲を言えば、どういうケースがあるか代表的なライティングパターンがあると、どういう内容でどういう分量で表示するべきなのかのあたりがつけやすいのでありがたいと思いました。
- [ページの一部を使ったモード](/products/design-patterns/modal-ui/#h3-3)であるとき | ||
- タスクとしての性質を持つオブジェクトの詳細画面 | ||
|
||
置かれるアクションボタンの例として、次のようなものがあります。 |
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.
FloatAreaと同様
- オブジェクトの名前変更など、「対象領域の一部」に対するアクション | ||
- 機能全体の設定変更など、「対象領域よりも広い範囲」に対するアクション | ||
|
||
### ページ全体を対象とする場合はBottomFixedAreaを使う |
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.
IMO: 「領域全体」がやや抽象的なので、欲を言えば画像などの具体例があるとわかりやすそう。
|
||
### ページ全体を対象とする場合はBottomFixedAreaを使う | ||
|
||
ページ内の一部の領域ではなく全体を対象とする場合は、BottomFixedAreaを使ってください。 |
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.
IMO: 対比としてDo/Don'tがあると分かりやすそう
|
||
![FloatAreaの構成](./images/float-area_composition.png) | ||
|
||
Primaryボタンは必須です。必要に応じてSecondaryボタン、Tertiaryボタンも置けます。 |
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.
IMO: どういう時に使うかあるとより親切かも
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.
Primaryボタンがないケースがあったよーな…
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.
Primaryボタンがないケース
Props一覧の方に 必須
と書いてあるんですよね
独自実装されてる画面ですかね
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.
あるいはBottomFixedの方ですかね>Primaryが無い
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.
おおよそwentz、kabetchのコメントと同様の感想をもちました。
BFAとFAの明確な使い分けは現状言語化難しいですかねぇ。
実際は機能も配置も違うので、それぞれのメリデメ星取り表を認識しながら選んでいる感じでしょうか…
|
||
<ComponentStory name="BottomFixedArea" /> | ||
|
||
## 基本的な考え方 |
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.
コンポーネントのテンプレートにないので、冒頭の概要文にかく、使用上の注意に使いどころとして持っていく、構成のアクションボタンのところに持っていく、などがよさそうです。
|
||
<ComponentStory name="FloatArea" /> | ||
|
||
## 基本的な考え方 |
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.
BFAと同様、冒頭の説明と構成のアクションボタンのところに持っていけると思いました。
|
||
## レイアウト | ||
|
||
対象となる領域に重なるように、画面の下辺から24pxの位置にFloatAreaはを置きます。FloatAreaの幅は、対象領域の幅から左右8pxずつ広くなるようにします。 |
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.
- fixedなFAの場合、下から16pxのところに置きがちかも(私だけ?)
- stickyなFAの場合、コンテンツがウィンドウサイズよりも小さい場合は画面の底辺につかないこともあるかも。大きければ底辺より16pxのところにくっついているかも
基本的にはstickyのほうがおすすめなんですかねぇ? @uknmr
|
||
![FloatAreaの構成](./images/float-area_composition.png) | ||
|
||
Primaryボタンは必須です。必要に応じてSecondaryボタン、Tertiaryボタンも置けます。 |
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.
Primaryボタンがないケースがあったよーな…
課題・背景
基準充足
やったこと
2ページ更新しました
やらなかったこと
動作確認
Previewでみてね。
キャプチャ