BottomFixedAreaとFloatAreaを更新 #1228

drivesketch · 2024-06-27T03:17:21Z

課題・背景

基準充足

やったこと

2ページ更新しました

やらなかったこと

動作確認

Previewでみてね。

キャプチャ

Before	After

netlify · 2024-06-27T03:17:38Z

✅ Deploy Preview for smarthr-design-system ready!

Name	Link
🔨 Latest commit	`2943b16`
🔍 Latest deploy log	https://app.netlify.com/sites/smarthr-design-system/deploys/669773e173dfad0008a8e29c
😎 Deploy Preview	https://deploy-preview-1228--smarthr-design-system.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

MasafumiKabe

一旦ここまでコメントしました！

content/articles/products/components/float-area/index.mdx

MasafumiKabe · 2024-06-27T05:41:10Z

content/articles/products/components/float-area/index.mdx

+
+## レイアウト
+
+対象となる領域に重なるように、画面の下辺から24pxの位置にFloatAreaはを置きます。FloatAreaの幅は、対象領域の幅から左右8pxずつ広くなるようにします。


なぜ左右に8px広げるのか書いてあるといいかも。背景のBaseと重なって存在に気付けないのを防ぐため、的な？

fixedなFAの場合、下から16pxのところに置きがちかも（私だけ？）

stickyなFAの場合、コンテンツがウィンドウサイズよりも小さい場合は画面の底辺につかないこともあるかも。大きければ底辺より16pxのところにくっついているかも

基本的にはstickyのほうがおすすめなんですかねぇ？ @uknmr

sticky 推奨というか、一択だと思ってます。

fixed にしちゃうと実装上の考慮が余計に必要になることが多い

視線誘導的にも、コンテンツがウィンドウサイズより小さいとき、底辺ではなく前のコンテンツに付いてるのは自然なはず

どうしてもウィンドウ底辺に付けたければ、margin-block-start: auto などで対応可能（Stack されてるはず）

対象領域の幅から左右8pxずつ広くなるように

この想定知らなかった。本当に必要ならコンポーネント側で対応してもよさそう（できるかはわからない

Co-authored-by: Masafumi Kabe <[email protected]>

wentzzz

コメントしてみました！

wentzzz · 2024-06-27T05:44:03Z

content/articles/products/components/bottom-fixed-area/index.mdx

+  - 両方置く場合は、Primaryボタンを右側に置きます。
+- Tertiaryボタン
+  - Primary・Secondaryボタンを置いたうえで、さらにアクションボタンを置く場合は、下の段にTertiaryボタンを複数個置けます。
+


レイアウトについて言及があっても良いと思いました。（画面下部に配置している様子がわかる画像を追加するなど）

留意点として、前面に配置するコンポーネントとしての性質上、画面を下までスクロールした時にコンテンツが背面に回り込んで表示できなくなることを防ぐために適切なスペーシングをとる、みたいなことも一筆あっても良さそうに思いました。

wentzzz · 2024-06-27T05:46:51Z

content/articles/products/components/bottom-fixed-area/index.mdx

+
+### アクション対象外のカラムがある場合はFloatAreaを使う
+
+固定表示するアクションボタンの対象とならないカラム（サイドバーなど）がページ内にある場合は、[FloatArea](/products/components/float-area/)を使ってください。


IMO: FloatAreaもそうですが、欲を言えばDo/Don'tなどの具体例があると良さそう。デザインパターン（基本機能）のC.アクションビューとかを参照しても良さそう。

wentzzz · 2024-06-27T05:48:21Z

content/articles/products/components/bottom-fixed-area/index.mdx

+
+### アクション対象外のカラムがある場合はFloatAreaを使う
+
+固定表示するアクションボタンの対象とならないカラム（サイドバーなど）がページ内にある場合は、[FloatArea](/products/components/float-area/)を使ってください。


IMO: なぜBottomFixedAreaを避けるべきか？も言語化してあるとありがたいと思いました。

wentzzz · 2024-06-27T05:51:08Z

content/articles/products/components/bottom-fixed-area/index.mdx

+  - 最大でそれぞれ1個ずつ置けます。
+  - 両方置く場合は、Primaryボタンを右側に置きます。
+- Tertiaryボタン
+  - Primary・Secondaryボタンを置いたうえで、さらにアクションボタンを置く場合は、下の段にTertiaryボタンを複数個置けます。


IMO: 「必要に応じて」が具体的にどういうケースがあるかなど代表例でもあるとわかりやすいと思いました。例えばどういうケースでTertialyボタンを使うのか例示があると判断しやすいと思いました。

wentzzz · 2024-06-27T05:53:52Z

content/articles/products/components/bottom-fixed-area/index.mdx

+- [ページ全体を使ったモード](/products/design-patterns/modal-ui/#h3-2)であるとき
+- タスクとしての性質を持つオブジェクトの詳細画面
+
+置かれるアクションボタンの例として、次のようなものがあります。


構成のアクションボタンのところに書いてあった方が便利な気がします。

wentzzz · 2024-06-27T05:58:44Z

content/articles/products/components/bottom-fixed-area/index.mdx

+
+### 1. 説明文（任意）
+
+必要に応じて、アクションに関する説明を書きます。


IMO: 欲を言えば、どういうケースがあるか代表的なライティングパターンがあると、どういう内容でどういう分量で表示するべきなのかのあたりがつけやすいのでありがたいと思いました。

wentzzz · 2024-06-27T05:59:36Z

content/articles/products/components/float-area/index.mdx

+- [ページの一部を使ったモード](/products/design-patterns/modal-ui/#h3-3)であるとき
+- タスクとしての性質を持つオブジェクトの詳細画面
+
+置かれるアクションボタンの例として、次のようなものがあります。


FloatAreaと同様

wentzzz · 2024-06-27T06:00:29Z

content/articles/products/components/float-area/index.mdx

+- オブジェクトの名前変更など、「対象領域の一部」に対するアクション
+- 機能全体の設定変更など、「対象領域よりも広い範囲」に対するアクション
+
+### ページ全体を対象とする場合はBottomFixedAreaを使う


IMO: 「領域全体」がやや抽象的なので、欲を言えば画像などの具体例があるとわかりやすそう。

wentzzz · 2024-06-27T06:01:09Z

content/articles/products/components/float-area/index.mdx

+
+### ページ全体を対象とする場合はBottomFixedAreaを使う
+
+ページ内の一部の領域ではなく全体を対象とする場合は、BottomFixedAreaを使ってください。


IMO: 対比としてDo/Don'tがあると分かりやすそう

wentzzz · 2024-06-27T06:01:52Z

content/articles/products/components/float-area/index.mdx

+
+![FloatAreaの構成](./images/float-area_composition.png)
+
+Primaryボタンは必須です。必要に応じてSecondaryボタン、Tertiaryボタンも置けます。


IMO: どういう時に使うかあるとより親切かも

Primaryボタンがないケースがあったよーな…

Primaryボタンがないケース

Props一覧の方に 必須 と書いてあるんですよね
独自実装されてる画面ですかね

独自実装されてる画面

そうかもしれない…

あるいはBottomFixedの方ですかね＞Primaryが無い

versionfive

おおよそwentz、kabetchのコメントと同様の感想をもちました。

BFAとFAの明確な使い分けは現状言語化難しいですかねぇ。
実際は機能も配置も違うので、それぞれのメリデメ星取り表を認識しながら選んでいる感じでしょうか…

versionfive · 2024-06-27T07:46:23Z

content/articles/products/components/bottom-fixed-area/index.mdx

+
+<ComponentStory name="BottomFixedArea" />
+
+## 基本的な考え方


コンポーネントのテンプレートにないので、冒頭の概要文にかく、使用上の注意に使いどころとして持っていく、構成のアクションボタンのところに持っていく、などがよさそうです。

versionfive · 2024-06-27T07:51:48Z

content/articles/products/components/float-area/index.mdx

+
+<ComponentStory name="FloatArea" />
+
+## 基本的な考え方


BFAと同様、冒頭の説明と構成のアクションボタンのところに持っていけると思いました。

versionfive · 2024-06-27T07:56:42Z

content/articles/products/components/float-area/index.mdx

+
+## レイアウト
+
+対象となる領域に重なるように、画面の下辺から24pxの位置にFloatAreaはを置きます。FloatAreaの幅は、対象領域の幅から左右8pxずつ広くなるようにします。


fixedなFAの場合、下から16pxのところに置きがちかも（私だけ？）

stickyなFAの場合、コンテンツがウィンドウサイズよりも小さい場合は画面の底辺につかないこともあるかも。大きければ底辺より16pxのところにくっついているかも

基本的にはstickyのほうがおすすめなんですかねぇ？ @uknmr

versionfive · 2024-06-27T07:57:23Z

content/articles/products/components/float-area/index.mdx

+
+![FloatAreaの構成](./images/float-area_composition.png)
+
+Primaryボタンは必須です。必要に応じてSecondaryボタン、Tertiaryボタンも置けます。


Primaryボタンがないケースがあったよーな…

drivesketch added 2 commits June 27, 2024 12:10

BottomFixedAreaを更新

18712da

FloatAreaを更新

e3ddd56

drivesketch requested review from versionfive, tosiiu and a team as code owners June 27, 2024 03:17

drivesketch requested review from o-kwr and ytysym June 27, 2024 03:17

画像を追加

91cccfc

MasafumiKabe reviewed Jun 27, 2024

View reviewed changes

Update content/articles/products/components/float-area/index.mdx

8ddb3db

Co-authored-by: Masafumi Kabe <[email protected]>

wentzzz reviewed Jun 27, 2024

View reviewed changes

versionfive reviewed Jun 27, 2024

View reviewed changes

drivesketch added 4 commits June 28, 2024 10:48

Merge branch 'main' into update-BottomFixedArea-FloatArea

8678b95

Merge branch 'main' into update-BottomFixedArea-FloatArea

53dd083

Merge branch 'main' into update-BottomFixedArea-FloatArea

98425dd

Merge branch 'main' into update-BottomFixedArea-FloatArea

2943b16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

BottomFixedAreaとFloatAreaを更新 #1228

BottomFixedAreaとFloatAreaを更新 #1228

drivesketch commented Jun 27, 2024 •

edited

Loading

netlify bot commented Jun 27, 2024 •

edited

Loading

MasafumiKabe left a comment

MasafumiKabe Jun 27, 2024

versionfive Jun 27, 2024

uknmr Jun 28, 2024

uknmr Jun 28, 2024

wentzzz left a comment

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

wentzzz Jun 27, 2024

versionfive Jun 27, 2024

drivesketch Jun 28, 2024

versionfive Jun 28, 2024 •

edited

Loading

drivesketch Jun 28, 2024

versionfive left a comment

versionfive Jun 27, 2024

versionfive Jun 27, 2024

versionfive Jun 27, 2024

versionfive Jun 27, 2024


		## レイアウト

		対象となる領域に重なるように、画面の下辺から24pxの位置にFloatAreaはを置きます。FloatAreaの幅は、対象領域の幅から左右8pxずつ広くなるようにします。


		### アクション対象外のカラムがある場合はFloatAreaを使う

		固定表示するアクションボタンの対象とならないカラム（サイドバーなど）がページ内にある場合は、[FloatArea](/products/components/float-area/)を使ってください。


		### 1. 説明文（任意）

		必要に応じて、アクションに関する説明を書きます。


		### ページ全体を対象とする場合はBottomFixedAreaを使う

		ページ内の一部の領域ではなく全体を対象とする場合は、BottomFixedAreaを使ってください。


		![FloatAreaの構成](./images/float-area_composition.png)

		Primaryボタンは必須です。必要に応じてSecondaryボタン、Tertiaryボタンも置けます。


		<ComponentStory name="BottomFixedArea" />

		## 基本的な考え方

BottomFixedAreaとFloatAreaを更新 #1228

Are you sure you want to change the base?

BottomFixedAreaとFloatAreaを更新 #1228

Conversation

drivesketch commented Jun 27, 2024 • edited Loading

課題・背景

やったこと

やらなかったこと

動作確認

キャプチャ

netlify bot commented Jun 27, 2024 • edited Loading

✅ Deploy Preview for smarthr-design-system ready!

MasafumiKabe left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wentzzz left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

versionfive Jun 28, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

versionfive left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

drivesketch commented Jun 27, 2024 •

edited

Loading

netlify bot commented Jun 27, 2024 •

edited

Loading

versionfive Jun 28, 2024 •

edited

Loading