BottomFixedAreaとFloatAreaを更新 #1228
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| --- | ||
| title: 'BottomFixedArea' | ||
| description: '画面の下部に固定表示する領域のためのコンポーネントです。特定のアクションボタンを、スクロール位置にかかわらず常に画面内に表示するために使います。' | ||
| --- | ||
| import { ComponentPropsTable } from '@Components/ComponentPropsTable' | ||
| import { ComponentStory } from '@Components/ComponentStory' | ||
|
|
||
| 画面の下部に固定表示する領域のためのコンポーネントです。特定のアクションボタンを、スクロール位置にかかわらず常に画面内に表示するために使います。 | ||
|
|
||
| <ComponentStory name="BottomFixedArea" /> | ||
|
|
||
| ## 基本的な考え方 | ||
|
|
||
| ページ全体を対象とした主要なアクションがある場合、BottomFixedAreaを使ってボタンを固定表示できます。代表的な例として以下があります。 | ||
|
There was a problem hiding this comment. IMO: ButtomFixedAreaを使わずにボタンを配置するケースもあると思うのですが、この書きかただとそうしたパターンでもButtomFixedAreaを使う、というふうに読めなくもないと思いました。それらと対比してButtomFixedAreaを使う理由が言語化されているとありがたいと思いました。（FloartAreaもそう） |
||
|
|
||
| - [ページ全体を使ったモード](/products/design-patterns/modal-ui/#h3-2)であるとき | ||
| - タスクとしての性質を持つオブジェクトの詳細画面 | ||
|
|
||
| 置かれるアクションボタンの例として、次のようなものがあります。 | ||
|
There was a problem hiding this comment. 構成のアクションボタンのところに書いてあった方が便利な気がします。 |
||
|
|
||
| - 操作した内容をシステムに送信する | ||
| - 操作した内容を破棄し、前の状態に戻す | ||
| - プレビューする | ||
| - タスクを次のステータスに進める、前のステータスに戻す | ||
| - オブジェクトを削除する、アーカイブする | ||
|
|
||
| ## 使用上の注意 | ||
|
|
||
| ### ページ全体に対するアクションボタン以外は置かない | ||
|
|
||
| BottomFixedAreaに置くアクションボタンは、ページに表示されている情報全体に対するものに限定します。 | ||
|
|
||
| 以下のようなアクションのボタンは、BottomFixedArea以外の場所に置いてください。 | ||
|
|
||
| - オブジェクトの名前変更など、「ページの一部」に対するアクション | ||
| - 機能全体の設定変更など、「ページよりも広い範囲」に対するアクション | ||
|
|
||
| ### アクション対象外のカラムがある場合はFloatAreaを使う | ||
|
|
||
| 固定表示するアクションボタンの対象とならないカラム（サイドバーなど）がページ内にある場合は、[FloatArea](/products/components/float-area/)を使ってください。 | ||
|
There was a problem hiding this comment. IMO: FloatAreaもそうですが、欲を言えばDo/Don'tなどの具体例があると良さそう。デザインパターン（基本機能）のC.アクションビューとかを参照しても良さそう。 There was a problem hiding this comment. IMO: なぜBottomFixedAreaを避けるべきか？も言語化してあるとありがたいと思いました。 |
||
|
|
||
| ## 構成 | ||
|
|
||
| 1. 説明文（任意） | ||
| 2. アクションボタン | ||
|
|
||
|  | ||
|
|
||
| ### 1. 説明文（任意） | ||
|
|
||
| 必要に応じて、アクションに関する説明を書きます。 | ||
|
There was a problem hiding this comment. IMO: 欲を言えば、どういうケースがあるか代表的なライティングパターンがあると、どういう内容でどういう分量で表示するべきなのかのあたりがつけやすいのでありがたいと思いました。 |
||
|
|
||
| ### 2. アクションボタン | ||
|
|
||
| 必要に応じて、以下のボタンを配置できます。 | ||
|
|
||
| - Primaryボタン・Secondaryボタン | ||
| - 最大でそれぞれ1個ずつ置けます。 | ||
| - 両方置く場合は、Primaryボタンを右側に置きます。 | ||
| - Tertiaryボタン | ||
| - Primary・Secondaryボタンを置いたうえで、さらにアクションボタンを置く場合は、下の段にTertiaryボタンを複数個置けます。 | ||
|
There was a problem hiding this comment. IMO: 「必要に応じて」が具体的にどういうケースがあるかなど代表例でもあるとわかりやすいと思いました。例えばどういうケースでTertialyボタンを使うのか例示があると判断しやすいと思いました。 |
||
|
|
||
|
There was a problem hiding this comment. レイアウトについて言及があっても良いと思いました。（画面下部に配置している様子がわかる画像を追加するなど） 留意点として、前面に配置するコンポーネントとしての性質上、画面を下までスクロールした時にコンテンツが背面に回り込んで表示できなくなることを防ぐために適切なスペーシングをとる、みたいなことも一筆あっても良さそうに思いました。 |
||
| ## Props | ||
|
|
||
| <ComponentPropsTable name="BottomFixedArea" /> | ||
|
|
||
|
|
||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,66 @@ | ||
| --- | ||
| title: 'FloatArea' | ||
| description: 'ページの前面に固定表示する領域のためのコンポーネントです。特定のアクションボタンを、スクロール位置にかかわらず常に画面内に表示するために使います。' | ||
| --- | ||
| import { ComponentPropsTable } from '@Components/ComponentPropsTable' | ||
| import { ComponentStory } from '@Components/ComponentStory' | ||
|
|
||
| ページの前面に固定表示する領域のためのコンポーネントです。特定のアクションボタンを、スクロール位置にかかわらず常に画面内に表示するために使います。 | ||
|
|
||
| <ComponentStory name="FloatArea" /> | ||
|
|
||
| ## 基本的な考え方 | ||
|
There was a problem hiding this comment. BFAと同様、冒頭の説明と構成のアクションボタンのところに持っていけると思いました。 |
||
|
|
||
| ページ内の特定の領域全体を対象とした主要なアクションがある場合、FloatAreaを使ってボタンを固定表示できます。代表的な例として以下があります。 | ||
|
There was a problem hiding this comment. IMO: FloatAreaを使わずにボタンを配置するケースもあると思うのですが、この書きかただとそうしたパターンでもFloartAreaを使う、というふうに読めなくもないと思いました。それらと対比してFloartAreaを使う理由が言語化されているとありがたいと思いました。（ButtomFixedAreaも同様） |
||
|
|
||
| - [ページの一部を使ったモード](/products/design-patterns/modal-ui/#h3-3)であるとき | ||
| - タスクとしての性質を持つオブジェクトの詳細画面 | ||
|
|
||
| 置かれるアクションボタンの例として、次のようなものがあります。 | ||
|
|
||
|
|
||
| - 操作した内容をシステムに送信する | ||
| - 操作した内容を破棄し、前の状態に戻す | ||
| - プレビューする | ||
| - タスクを次のステータスに進める、前のステータスに戻す | ||
| - オブジェクトを削除する、アーカイブする | ||
|
|
||
| ## 使用上の注意 | ||
|
|
||
| ### 対象領域全体に対するアクションボタン以外は置かない | ||
|
|
||
| FloatAreaに置くアクションボタンは、対象となる領域全体に対するものに限定します。 | ||
|
|
||
| 以下のようなアクションのボタンは、FloatArea以外の場所に置いてください。 | ||
|
|
||
| - オブジェクトの名前変更など、「対象領域の一部」に対するアクション | ||
| - 機能全体の設定変更など、「対象領域よりも広い範囲」に対するアクション | ||
|
|
||
| ### ページ全体を対象とする場合はBottomFixedAreaを使う | ||
|
There was a problem hiding this comment. IMO: 「領域全体」がやや抽象的なので、欲を言えば画像などの具体例があるとわかりやすそう。 |
||
|
|
||
| ページ内の一部の領域ではなく全体を対象とする場合は、[BottomFixedArea](/products/components/bottom-fixed-area/)を使ってください。 | ||
|
|
||
| ## レイアウト | ||
|
|
||
| 対象となる領域に重なるように、画面の下辺から24pxの位置にFloatAreaはを置きます。FloatAreaの幅は、対象領域の幅から左右8pxずつ広くなるようにします。 | ||
|
There was a problem hiding this comment. なぜ左右に8px広げるのか書いてあるといいかも。背景のBaseと重なって存在に気付けないのを防ぐため、的な？ There was a problem hiding this comment.
基本的にはstickyのほうがおすすめなんですかねぇ？ @uknmr There was a problem hiding this comment. sticky 推奨というか、一択だと思ってます。
There was a problem hiding this comment.
この想定知らなかった。本当に必要ならコンポーネント側で対応してもよさそう（できるかはわからない |
||
|
|
||
|  | ||
|
|
||
| ## 構成 | ||
|
|
||
| 1. Primaryボタン | ||
| 2. Secondaryボタン（任意） | ||
| 3. Tertiaryボタン（任意） | ||
|
|
||
|  | ||
|
|
||
| Primaryボタンは必須です。必要に応じてSecondaryボタン、Tertiaryボタンも置けます。 | ||
|
There was a problem hiding this comment. Primaryボタンがないケースがあったよーな… There was a problem hiding this comment.
Props一覧の方に There was a problem hiding this comment.
そうかもしれない… There was a problem hiding this comment. あるいはBottomFixedの方ですかね＞Primaryが無い |
||
|
|
||
| ## デザインパターン | ||
|
|
||
| パターンの1つとして[共通設定のアクションビュー](/products/design-patterns-core-features/main-admin/)があります。 | ||
|
|
||
| ## Props | ||
|
|
||
| <ComponentPropsTable 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.
コンポーネントのテンプレートにないので、冒頭の概要文にかく、使用上の注意に使いどころとして持っていく、構成のアクションボタンのところに持っていく、などがよさそうです。