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 と @fluentui/react-icons-mdl2 は MIT License ですが @fluentui/react-icons-mdl2-branded は Microsoft Fabric Assets License になります。
Discussion