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