v1.1.0 #1052
Qs-F
announced in
マイグレーションガイド
v1.1.0
#1052
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
For UI
v1.1.0
マイグレーションガイドおまたせしました。ついにリリースにたどり着きました! 🎉
v1.1.0
の主な変更は、フォントサイズを 16px から 14px にサイズダウンしたことです。これに伴い、多くのコンポーネントで余白や大きさに変更が入りました。合わせて多数のコンポーネントを、利用してくださる皆様の利用シーンを見ながら便利に使えるように改善しました。
デザイントークン
テキストトークン
これまではサービスごとにテキストのスタイルが定義されていましたが、今後はデフォルトとして For UI のものをサービス間で共通して使っていくように推奨していきます (つまり基本フォントサイズ 14px を推奨します。歴史的経緯については Slack (参考1, 参考2) を御覧ください)
font-regular
font-mono
text-xs
text-s
text-r
text-xr
text-l
text-xl
カラートークン
これまで放置されていたカラートークンを整理して、未使用のものを削り、新たに必要になったものを定義しました。以下がそのリストです。
新たに値が必要になったものは各サービスの担当デザイナーに依頼して新しい値を割り当てていただくようにお願いします。
positive-text-medium-default
を移動させてくるpositive-background-medium-default
を移動させてくるnegative-text-medium-default
を移動させてくるnegative-background-medium-default
を移動させてくるnotice-text-medium-default
を移動させてくるnotice-background-medium-default
を移動させてくるinformative-text-medium-default
を移動させてくるinformative-background-medium-default
を移動させてくるシャドートークン
シャドートークンについては新しい値をサービス側で設定していただく必要はありません。言い換えればサービス間で共通したスタイルを使用していきます。
shadow-attractive
box-shadow: 0px 2px 2px rgba(0, 0, 0, .05);
shadow-more
box-shadow: 0px 8px 24px rgba(0, 0, 0, .1);
rgba(0, 0, 0, .3)
で塗ってください)コンポーネント
共通の変更
color
props →intenton
propscolor props が廃止され (一部はレガシーサポートとして残っていますがいずれ廃止予定です) 新たに intention props が導入されました。これは
color=negative
などの違和感を避ける目的と、カラートークンの仕様 (shade, primary, negative などの部分を intention と呼んでいる) ことに起因しています。コンポーネントごとの詳細なマイグレーションガイド
Button
新しい Button は
@mui/lab/LoadingButton
ではなく@mui/base/ButtonUnstyled
を用いて作られています。よく使われている props については移植しましたが、そうでないものはなくなっている可能性があります。デフォルトスタイルの変更
変更の理由
primary かつ filled がデフォルトだと、1 番主張の強いボタンがデフォルトになってしまい使いづらいことが想定される。sublte かつ outlined であれば最も主張の度合いが小さくかつ視認性も確保されている (text であると場所によっては本文と混同してしまうため) のでこれを選択した。
props の変更
contained
は廃止filled
を使用してくださいstartIconendIconloadingPositionよくあるマイグレーション
アイコンを先頭に伴う Button の場合
これまで
これから
アイコンを末尾に伴う Button の場合
これまで
これから
アイコンのみの Button
これまで
これから
variant="contained"
な Buttonこれまで
これから
IconButton
IconButton は廃止されました。Buttonの項目「マイグレーション」の「アイコンのみの Button」を参照してください。
よくあるマイグレーション
アイコンのみの Button
これまで
これから
Checkbox
新しい Checkbox は MUI のアイコンによる Checkbox 表現を改め、チェックマークだけをアイコンとして、枠は独自の定義になっています。
デフォルトスタイルの変更
secondary
からprimary
に色を変更しました。primary
以外の色を使用することはできません。props の変更
iconsizeよくあるマイグレーション
ありません。そのまま使用できます。
Chip
新しい Chip は
@mui/material/Chip
の使用をやめ、独自の定義になりました。よく使われている props は移植しましたが、いくつかは廃止されている可能性があります。また、今まで合わせて Chip と言われていたものが分割されました。1 つはBadge、もう 1 つは Chip です。
Badgeはユーザーのアクションを受け付けないためクリックできない表示のためだけのものに、Chip はユーザーがアクションできるのでクリックしてなにか操作を伴うものに使います。
Chip は表示するデータの声質によって使い分けます。
たとえば電話番号にように電話番号それ自体を押すことと電話をかけることが同義である場合は
actionArea="full"
な Chip を使用します。一方、Select / Multiple で使用されているような操作と表示するデータが同義ではない場合は
actionArea="limited"
な Chip を使用します。Chip / Limited には操作部分のアイコン以外を設定することはできません。
デフォルトスタイルの変更
props の変更
colorleadingIcontrailingIcononDeleteshade
,primary
,secondary
,positive
,negative
,notice
,informative
が選択できますactionArea="limited"
に移行するべき可能性があります。よくあるマイグレーション
削除可能な Chip (例: Select / Multiple で使用されているような Chip)
これまで
これから
先頭にアイコンのある Chip
これまで
これから
末尾にアイコンのある Chip
末尾は混乱を避けるため操作可能なアイコン以外を設置できなくなりました。代わりに先頭にアイコンを置くことを検討してください。
削除のように操作可能な場合は次のようにします。
これまで
これから
Radio
デフォルトスタイルの変更
secondary
からprimary
に変更しました。色の変更はできません。props の変更
ありません。
よくあるマイグレーション
ありません。そのまま使用できます。
Select
内部的な変更はありません。スタイルの変更が主です。
デフォルトスタイルの変更
ありません。
props の変更
large
,medium
が選択できますよくあるマイグレーション
ありません。そのまま使用できます。
Switch
新しい Switch は
@mui/material/Switch
の使用をやめ、独自の定義になりました。内部的には<input type="checkbox" />
です。よく使われる props は移植しましたが、いくつかは廃止されている可能性があります。デフォルトスタイルの変更
ありません。
props の変更
<input type="checkbox" />
にある propsよくあるマイグレーション
ありません。そのまま使用できます。
TextArea
サイズとスタイルの変更のみです。内部的な変更はありません。
デフォルトスタイルの変更
ありません。
props の変更
large
,medium
が選択できますよくあるマイグレーション
ありません。そのまま使用できます。
TextField
新しい TextField は
@mui/material/TextField
の使用をやめ、@mui/material/OutlinedInput
を用いて作られています。@mui/material/TextField
は variant が outlined のときに@mui/material/OutlinedInput
を内部的に使用していましたが、For UI では outlined のみが存在するためバンドルサイズを削減する目的で@mui/material/OutlinedInput
を直接使用しています。デフォルトスタイルの変更
ありません。
props の変更
unitLabelInputPropslarge
,medium
が選択できますよくあるマイグレーション
アイコンを先頭に伴う TextField
これまで
これから
アイコンを末尾に伴う TextField
末尾には Select や
type="date"
などブラウザが持つ標準機能による操作領域が入ることがあり、混乱を招くのでアイコンを置かないでください。先頭に設置する、suffix を利用する等への置き換えをお願いします。unitLabel を使用している TextField
unitLabel
はprefix
とsuffix
というより抽象度の高い仕組みに変更されました。例えば "円" の場合はsuffix
が一般的であり、 "$" の場合はprefix
が一般的なため、その対応のためでもあります。Badge
新しく追加されました (以前も存在はしていましたが Example なコンポーネントで使われることを想定していませんでした)。用途は
@mui/material/Badge
とは大きく違い、以前存在していた Chip を 2 つの役割に分割し、Chipと Badge に別れたことにより生まれたコンポーネントです。Badge はユーザーのアクションを受け付けないためクリックできない表示のためだけのものに、Chipはユーザーがアクションできるのでクリックしてなにか操作を伴うものに使います。
内部的には独自の定義となっています。
Badge / Constant はユーザーの入力等の外部的な入力により変化しないものに使用してください。Badge / Text, Outlined はユーザーの入力で変化するものに使用してください。
デフォルトスタイルの変更
新規なのでありません。
props の変更
変更ではないですがよく使われそうなものを一覧にしておきます。
shade
,primary
,secondary
,positive
,negative
,notice
,informative
が選択できますconstant
,text
,outlined
が選択できます。constant
は入力によらず一定だということを示していますよくあるマイグレーション
新規なのでありません。
Menu
内部的には引き続き
@mui/material/Menu
を使用していますが、表示するものが変化しています。デフォルトスタイルの変更
<MenuDivider />
を使ってください)props の変更
MenuList
MenuItem
divider<MenuDivider />
を使用してくださいshade
,negative
が選択できますよくあるマイグレーション
アイコンを伴う MenuItem
これまで
これから
説明を伴う MenuItem
これまではチームでよしなに小さい Text などで対応していただいてました
これから
Tabs
新しい Tabs は
@mui/material/Tabs
を拡張していた部分を削り、もとの実装に近い形になりました。ただし下線は absolute を外すため border を使った独自実装になっています。
またよく使われている方法として Tab 内に通知の個数など Badge を置くケースが見られたので、badge props に Badge を渡すことで表示できるようになりました。
デフォルトスタイルの変更
props の変更
Tabs
intention
を使ってくださいprimary
,secondary
から選択できますTab
よくあるマイグレーション
Badge のついた Tab
これまで
これから
Beta Was this translation helpful? Give feedback.
All reactions