v1.1.0

[Qs-F]

For UI v1.1.0 マイグレーションガイド

おまたせしました。ついにリリースにたどり着きました！ 🎉
v1.1.0 の主な変更は、フォントサイズを 16px から 14px にサイズダウンしたことです。これに伴い、多くのコンポーネントで余白や大きさに変更が入りました。
合わせて多数のコンポーネントを、利用してくださる皆様の利用シーンを見ながら便利に使えるように改善しました。

デザイントークン

• テキストトークン
• カラートークン
• シャドートークン

---

テキストトークン

これまではサービスごとにテキストのスタイルが定義されていましたが、今後はデフォルトとして For UI のものをサービス間で共通して使っていくように推奨していきます (つまり基本フォントサイズ 14px を推奨します。歴史的経緯については Slack (参考1, 参考2) を御覧ください)

タイプフェイス	Tailwind CSS での対応	設定されているフォント (優先度の高い順)
サンセリフ	font-regular	Inter, Noto Sans JP, sans-serif
固定幅	font-mono	Fira Code, Noto Sans JP, monospaced

Note > font-mono は利用シーンの少なさを鑑みて Figma には 2023/03/01 現在反映されていません

トークン名	Tailwind CSS での対応	font-size	line-height	letter-spacing
xs	text-xs	10px	16px	.03rm
s	text-s	12px	20px	.03rm
r	text-r	14px	24px	0
xr	text-xr	16px	28px	0
l	text-l	20px	32px	0
xl	text-xl	24px	40px	0

---

カラートークン

これまで放置されていたカラートークンを整理して、未使用のものを削り、新たに必要になったものを定義しました。以下がそのリストです。
新たに値が必要になったものは各サービスの担当デザイナーに依頼して新しい値を割り当てていただくようにお願いします。

Warning
未使用のものを For UI で削ったため、いままで使えていたトークンがサービスで使用できなくなった可能性があります。削られたトークンについてはサービス内で使用されていないことを確認してください。使用されている場合は新しくtailwind.config.jsで extend してサービス固有のものとして定義し直してください。

Note
どの値がどこに使われているか見たい場合は、 Style Finder プラグインを Figma For UI v1.1 ファイルで実行すると使われている値と場所の対応を一覧で見ることが可能です。

intention	usage	level	state	状態	備考
shade	text	medium	active	削除
shade	border	dark	hover	削除
shade	border	medium	active	削除
shade	border	light	active	削除
shade	icon	medium	active	削除
shade	icon	medium	disabled	追加
shade	icon	light	default	削除
shade	icon	light	hover	削除
primary	text	dark	hover	削除
primary	text	dark	disabled	削除
primary	text	medium	default	削除
primary	text	light	default	削除
primary	background	dark	active	削除
primary	background	medium	default	削除
primary	background	light	hover	追加
primary	background	white	default	削除
primary	background	white	hover	削除
primary	background	white	disabled	削除
primary	border	dark	hover	削除
primary	border	medium	default	追加
primary	border	light	default	追加
primary	icon	dark	hover	削除
primary	icon	dark	disabled	削除
primary	icon	medium	default	追加
primary	icon	white	default	削除
primary	icon	white	hover	削除
primary	icon	white	disabled	削除
secondary	text	dark	disabled	削除
secondary	background	dark	disabled	削除
secondary	background	dark	hover	追加
secondary	background	light	default	追加
secondary	background	light	hover	追加
secondary	border	medium	default	追加
secondary	border	light	default	追加
secondary	icon	medium	default	追加
secondary	icon	medium	active	削除
positive	text	dark	default	追加	positive-text-medium-defaultを移動させてくる
positive	text	medium	default	削除
positive	text	light	default	削除
positive	background	dark	default	追加	positive-background-medium-defaultを移動させてくる
positive	background	medium	default	削除
positive	background	light	hover	追加
positive	icon	dark	default	追加
positive	icon	light	default	削除
negative	text	dark	default	追加	negative-text-medium-defaultを移動させてくる
negative	text	medium	default	削除
negative	text	light	default	削除
negative	background	dark	default	追加	negative-background-medium-defaultを移動させてくる
negative	background	dark	hover	追加
negative	background	medium	default	削除
negative	border	dark	default	追加
negative	border	light	default	追加
negative	icon	dark	default	追加
negative	icon	medium	hover	削除
notice	text	dark	default	追加	notice-text-medium-defaultを移動させてくる
notice	text	medium	default	削除
notice	text	light	default	削除
notice	background	dark	default	追加	notice-background-medium-defaultを移動させてくる
notice	background	medium	default	削除
notice	background	light	hover	追加
notice	icon	dark	default	追加
notice	icon	light	default	削除
informative	text	dark	default	追加	informative-text-medium-defaultを移動させてくる
informative	text	medium	default	削除
informative	background	dark	default	追加	informative-background-medium-defaultを移動させてくる
informative	background	medium	default	削除
informative	background	light	default	追加
informative	background	light	hover	追加
informative	border	light	default	追加
informative	icon	dark	default	追加

---

シャドートークン

シャドートークンについては新しい値をサービス側で設定していただく必要はありません。言い換えればサービス間で共通したスタイルを使用していきます。

トークン名	Tailwind CSS での対応	CSS の値	利用シーン
attractive	shadow-attractive	box-shadow: 0px 2px 2px rgba(0, 0, 0, .05);	Chip など、操作できることが曖昧なものに使用することで操作可能であることをより明示的に示します。なるべくシャドーを使わず操作可能であることをユーザーに提示できるように心がけてください。
more	shadow-more	box-shadow: 0px 8px 24px rgba(0, 0, 0, .1);	Menu や Modal など、ユーザーの操作を起点に広がり上に覆いかぶさる形で表示されるものに使用します。下にあるレイヤーより 1 つ上に存在していることをユーザーにより明確に示します。コンテキストを断絶する役割はないため、その場合は focused を使用してください。
focused	なし (Modal に直書きされています)	なし (rgba(0, 0, 0, .3)で塗ってください)	Modal など、ユーザーにコンテキストが断絶していることを示すのに使用します。

---

コンポーネント

共通の変更

• color props → intenton props
  color props が廃止され (一部はレガシーサポートとして残っていますがいずれ廃止予定です) 新たに intention props が導入されました。これはcolor=negative などの違和感を避ける目的と、カラートークンの仕様 (shade, primary, negative などの部分を intention と呼んでいる) ことに起因しています。

コンポーネントごとの詳細なマイグレーションガイド

• Button
• IconButton
• Checkbox
• Chip
• Radio
• Select
• Switch
• TextArea
• TextField
• Badge
• Menu
• Tabs

---

Button

新しい Button は @mui/lab/LoadingButton ではなく @mui/base/ButtonUnstyled を用いて作られています。よく使われている props については移植しましたが、そうでないものはなくなっている可能性があります。

デフォルトスタイルの変更

これまで	これから
color=primary, variant=filled	inention=sublte, variant=outlined

変更の理由

primary かつ filled がデフォルトだと、1 番主張の強いボタンがデフォルトになってしまい使いづらいことが想定される。sublte かつ outlined であれば最も主張の度合いが小さくかつ視認性も確保されている (text であると場所によっては本文と混同してしまうため) のでこれを選択した。

props の変更

props 名	状態	備考
variant	containedは廃止	filledを使用してください
startIcon	廃止
endIcon	廃止
loadingPosition	廃止
children	仕様変更

よくあるマイグレーション

• アイコンを先頭に伴う Button の場合

  これまで

  <Button startIcon={<MdEdit size={24} />}>編集する</Button>

  これから

  <Button>
    <MdEdit /> {/* サイズ・色指定は必要ありません */}
    編集する {/* spanやText等で囲ったりネストしていても問題ありません */}
  </Button>

• アイコンを末尾に伴う Button の場合

  これまで

  <Button endIcon={<MdEdit size={24} />}>編集する</Button>

  これから

  <Button>
    編集する {/* spanやText等で囲ったりネストしていても問題ありません */}
    <MdEdit /> {/* サイズ・色指定は必要ありません */}
  </Button>

• アイコンのみの Button

  これまで

  <IconButton>
    <MdEdit size={20} />
  </IconButton>

  これから

  <Button>
    <MdEdit /> {/* サイズ・色指定は必要ありません */}
  </Button>

• variant="contained" な Button

  これまで

  <Button variant="contained">編集する</Button>

  これから

  <Button variant="filled">編集する</Button>

---

IconButton

IconButton は廃止されました。Buttonの項目「マイグレーション」の「アイコンのみの Button」を参照してください。

よくあるマイグレーション

• アイコンのみの Button

  これまで

  <IconButton>
    <MdEdit size={20} />
  </IconButton>

  これから

  <Button>
    <MdEdit /> {/* サイズ・色指定は必要ありません */}
  </Button>

---

Checkbox

新しい Checkbox は MUI のアイコンによる Checkbox 表現を改め、チェックマークだけをアイコンとして、枠は独自の定義になっています。

デフォルトスタイルの変更

secondary から primary に色を変更しました。primary以外の色を使用することはできません。

props の変更

props 名	状態
iconsize	廃止

よくあるマイグレーション

ありません。そのまま使用できます。

---

Chip

新しい Chip は@mui/material/Chipの使用をやめ、独自の定義になりました。よく使われている props は移植しましたが、いくつかは廃止されている可能性があります。

また、今まで合わせて Chip と言われていたものが分割されました。1 つはBadge、もう 1 つは Chip です。
Badgeはユーザーのアクションを受け付けないためクリックできない表示のためだけのものに、Chip はユーザーがアクションできるのでクリックしてなにか操作を伴うものに使います。

Chip は表示するデータの声質によって使い分けます。

たとえば電話番号にように電話番号それ自体を押すことと電話をかけることが同義である場合は actionArea="full"な Chip を使用します。

<Chip actionArea="full" icon={<MdPhone />} label="080-1234-5678" />

一方、Select / Multiple で使用されているような操作と表示するデータが同義ではない場合はactionArea="limited"な Chip を使用します。

<Chip actionArea="limited" label="選択中の項目" />

Chip / Limited には操作部分のアイコン以外を設定することはできません。

デフォルトスタイルの変更

これまで	これから
color=default	inention=shade

props の変更

props 名	状態	備考
color	廃止	intention を使用してください
leadingIcon	廃止	icon を使用してください
trailingIcon	廃止	icon を使用してください
onDelete	廃止	onClick を使用してください (actionArea の使用も合わせて検討してください)
intention	追加	shade, primary, secondary, positive, negative, notice, informativeが選択できます
actionArea	追加	full と limited があります。今まで onDelete がついていた Chip は actionArea="limited" に移行するべき可能性があります。
icon	追加
onClick	必須項目に変更

よくあるマイグレーション

• 削除可能な Chip (例: Select / Multiple で使用されているような Chip)

  これまで

  <Chip
    onDelete={() => {
      console.log('削除されました');
    }}
    label="選択中の項目A"
  />

  これから

  <Chip
    actionArea="limited"
    onClick={() => {
      console.log('削除されました');
    }}
    label="選択中の項目A"
  />

• 先頭にアイコンのある Chip

  これまで

  <Chip
    leadingIcon={<MdEdit size={24} />}
    label="選択中の項目A"
    onClick={() => {
      console.log('クリックされました');
    }}
  />

  これから

  <Chip
    icon={<MdEdit />}
    label="選択中の項目A"
    onClick={() => {
      console.log('クリックされました');
    }}
  />

• 末尾にアイコンのある Chip

  末尾は混乱を避けるため操作可能なアイコン以外を設置できなくなりました。代わりに先頭にアイコンを置くことを検討してください。
  削除のように操作可能な場合は次のようにします。

  これまで

  <Chip
    trailingIcon={<MdEdit size={24} />}
    label="選択中の項目A"
    onDelete={() => {
      console.log('クリックされました');
    }}
  />

  これから

  <Chip
    actionArea="limited"
    icon={<MdEdit />}
    label="選択中の項目A"
    onClick={() => {
      console.log('クリックされました');
    }}
  />

---

Radio

デフォルトスタイルの変更

secondaryからprimaryに変更しました。色の変更はできません。

props の変更

ありません。

よくあるマイグレーション

ありません。そのまま使用できます。

---

Select

内部的な変更はありません。スタイルの変更が主です。

デフォルトスタイルの変更

ありません。

props の変更

props 名	状態	備考
size	追加	large, mediumが選択できます

よくあるマイグレーション

ありません。そのまま使用できます。

---

Switch

新しい Switch は@mui/material/Switchの使用をやめ、独自の定義になりました。内部的には <input type="checkbox" /> です。よく使われる props は移植しましたが、いくつかは廃止されている可能性があります。

デフォルトスタイルの変更

ありません。

props の変更

props 名	状態
<input type="checkbox" />にある props	追加

よくあるマイグレーション

ありません。そのまま使用できます。

---

TextArea

サイズとスタイルの変更のみです。内部的な変更はありません。

デフォルトスタイルの変更

ありません。

props の変更

props 名	状態	備考
size	追加	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 の変更

props 名	状態	備考
unitLabel	廃止	代わりに suffix を使ってください
InputProps	廃止	直接指定してください (inputProps とは別物です。MUI では OutlinedInput 等に渡る props が InputProps、input 要素に渡る props が inputProps になっています。)
size	追加	large, medium が選択できます
suffix	追加	unitLabel などに使用できます
icon	追加	これまで InputAdornment を使用しないとアイコンが設置できませんでしたが、かんたんに設置できるようになりました
label	追加
helperText	追加

よくあるマイグレーション

• アイコンを先頭に伴う TextField

  これまで

  <TextField
    InputProps={{
      startAdornment: (
        <InputAdornment position="start">
          <MdSearch size="24" className="fill-shade-medium-default ml-3 -mr-1" />
        </InputAdornment>
      ),
    }}
  />

  これから

  <TextField icon={<MdSearch />} />

• アイコンを末尾に伴う 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 の変更

変更ではないですがよく使われそうなものを一覧にしておきます。

props 名	状態	備考
intention	追加	shade, primary, secondary, positive, negative, notice, informativeが選択できます
variant	追加	constant, text, outlined が選択できます。constantは入力によらず一定だということを示しています
label	追加
icon	追加

よくあるマイグレーション

新規なのでありません。

---

Menu

内部的には引き続き@mui/material/Menuを使用していますが、表示するものが変化しています。

デフォルトスタイルの変更

これまで	これから
下線あり	下線なし (分割線が欲しい場合は <MenuDivider /> を使ってください)

props の変更

MenuList

props 名	状態
as	追加

MenuItem

props 名	状態	備考
divider	廃止	<MenuDivider />を使用してください
icon	追加
description	追加
intention	追加	shade, negativeが選択できます
selected	追加	Select 等で選択中の項目を示すのに使います。通常は使用しません

よくあるマイグレーション

• アイコンを伴う MenuItem

  これまで

  <MenuItem>
    <ListItemIcon>
      <MdEdit size={24} />
    </ListItemIcon>
    <ListItemText>Cut</ListItemText>
  </MenuItem>

  これから

  <MenuItem icon={<MdEdit />}>編集</MenuItem>

• 説明を伴う MenuItem

  これまではチームでよしなに小さい Text などで対応していただいてました

  これから

  <MenuItem
    description="編集するには権限が必要です"
  />
    編集
  </MenuItem>

---

Tabs

新しい Tabs は@mui/material/Tabsを拡張していた部分を削り、もとの実装に近い形になりました。
ただし下線は absolute を外すため border を使った独自実装になっています。

またよく使われている方法として Tab 内に通知の個数など Badge を置くケースが見られたので、badge props に Badge を渡すことで表示できるようになりました。

デフォルトスタイルの変更

props の変更

Tabs

props 名	状態	備考
noBorder	廃止
reverse	廃止
color	廃止	intentionを使ってください
intention	追加	primary, secondary から選択できます

Tab

props 名	状態
bagde	追加。Badge を置くことができるようになりました

よくあるマイグレーション

• Badge のついた Tab

  これまで

  <Tab
    label={
      <div>
        タブ名
        <Badge label="2件" />
      </div>
    }
  />

  これから

  <Tab label="タブ名" badge={<Badge label="2件" />} />