Fluent UI v9 がリリースされていました
以前にこんな記事を書いていました。
記事の後半に書いてあるのですが 2 つの Fluent UI は統合される計画になっていました。とはいえいつになるかわからないなと思っていたらいつの間にか (2022 年 6 月に) Fluent UI v9 がリリースされていました。半年も気づいてなかった。
Fluent UI v9 の特徴としてはすでに書いた通り @fluentui/react (v8: Office 向け) と @fluentui/react-northstar (v0: Teams 向け) の統合です。上のサイトでも v8 とか v0 と表記されるのでここでも以下はその表記にしたがいます。ちなみに v9 のパッケージ名は @fluentui/react-components です。
v9 は v0 をベースにしているようで v8 はテーマを Web Light または Web Dark に変えることで実現しています。ただし見た目は完全互換ではないです。プロパティも v0 ベースですが v8 向けに一部のコンポーネントで Shim が提供されています。
テーマについては BrandVariants というのが採用されて 10～160 のグラデーションで表現できるようになりました。v8 からのコンバーターも用意されているので以下のサイトで Primary の色を入れてコンバートすればそれっぽいテーマができます。
完成度としてはまだまだでいくつかのコンポーネントが実装されていません。ロードマップは以下のページで見ることができます。現実的に使えるようになるのはもう少し先のようです。
アイコンについては @fluentui/react-icons を使うようにアナウンスされています。ただ明らかに種類が足りないので @fluentui/react-icons-mdl2 や @fluentui/react-icons-mdl2-branded を使うのがよさそうです。ただしライセンスの違いには注意が必要です。
| ライブラリ名 | ライセンスの種類 |
|---|---|
@fluentui/react-icons |
MIT License |
@fluentui/react-icons-mdl2 |
MIT License |
@fluentui/react-icons-mdl2-branded |
Microsoft Fabric Assets License |
Discussion