Plans around reference to Fluent UI 9!

[Nishant20021987]

What type of issue is this?

Updating referred Fluent UI library to latest version.

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Target SharePoint environment

SharePoint Online

What browser(s) / client(s) have you tested

• 💥 Internet Explorer
• 💥 Microsoft Edge
• 💥 Google Chrome
• 💥 FireFox
• 💥 Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

Additional environment details

• browser version
• SPFx version
• Node.js version
• etc

Issue description

I have a general question around when & whether this library will update its reference to Fluent UI 9. Currently it points to older version and in controls like IconPicker, it is fetching icons from previous version and not Fluent UI 9 icons.
This is important as these controls are super useful however need to know plan around referring latest libraries.
Kindly answer and elaborate so it is clear.
Best Regards,
Nishant.

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[nick-pape]

Is this for the sp-property-pane?

[henningeiben]

I'm also keen when SPFx will support Fluent UI 9 (aka Fluent 2.0). Not only for sp-property-pane but also for ModalDialog or BaseDialog and such.

[StfBauer]

Fluent 2.0 is a design language.
Fluent UI 9 is an implementation of Fluent 2.0. They are two completely different things.

Then, there is another thing to consider, which is the SPDialog Framework. It gets/got updated with every new version of SPFx simply because it's essentially backed into the complete SPFx ecosystem.

Very little information is available on which Fluent UI version it uses. From the dependencies, one would assume it's Fluent UI 8. https://www.npmjs.com/package/@fluentui/react.

Nevertheless, both SPFx and Fluent UI 9 implementations are built on a legacy implementation for Dialogs, which, In a supported way, relies on DOM Injection and DOM manipulations outside of the WebParts boundary. They are still built in a form IE11 supports with fewer functionalities than the OOTB '' HTML element.

This HTML element can be placed in any web part and function as dialogues or modal dialogues.

Of course, the styles are missing, but you get more functional web parts.

Recently, hTWOo UI ditched the IE 11 implementation of dialog and implemented state of the art. Both the pure HTML Dialog implementation as well as the HTWOO React Dialog implementation are more versatile than the current Fluent UI 9 implementation.

One single control can be served as:

• Sidebars - left and right
• Top bars
• Bottom bars
• as well as for status message bars

This is all made possible using the correct HTML element without event functionality-wise bleed to the rest of the page.

Also, this dialogue helps to handle return values from the dialogue into your web part in a native OOTB way.

In the case of browser support of the < dialog> element - 95% and baseline support in all major browsers since early 2022.

[Nishant20021987]

If I try to be specific:
In my Org, designer used Fluent UI 2 kit to design pages and have used latest Fluent UI icons.
In my dev side, I have referred corresponding Fluent UI 9 react controls and all fine here.

Issue is if I use IconPicker from this spfx controls react repo, it pick icons from older icons library. This has side effects such as icons name are different.

So I would like to know if there is plan around updating Fluent UI reference here such that controls like IconPicker shows icons from Fluent UI 9. I am sure there would be other benefits too if we keep reference to latest library.

Best Regards,
Nishant.

[StfBauer]

Thank you very much for the clarification. When your designer use Fluent UI 2 kit - the can design applications for Windows Devices. Fluent 2 was introduced with Windows 11 first, and Windows is still the first-class citizen for those design kits.

For example, the new Fluent UI icons have been released for over a year and still need to find their way into the web world fully.

The "new" Microsoft Teams Client is the first application to use Fluent 2 and Fluent UI 9. Recently, the Microsoft List has been updating to Fluent UI 9, too, but this doesn't mean that the rest of SharePoint and "ALL" components got the same update.

Specifically, the new Icons selector is also available for certain web parts. Still, you need reusable control as a third-party developer, as it seems to be targeted at first-party developers.

If you like to use Fluent UI 9, you can use it today in your React Applications, npm install it and start developing with it.

The major issue would be the incompatible theming engines between Fluent UI 8 and 9.

The best approach is to tell your designer to keep using Fluent 1 until Fluent 2 becomes generally available in all applications. For that, we need to have Microsoft inform you when it is fully migrated, not only from a design but also from a technical perspective.

We need to know the details to ensure we reach equilibrium with Fluent 2 in SharePoint and all the other web-based applications.

Would you be able to find the latest icons? You will find them here: https://github.com/microsoft/fluentui-system-icons
or use an open-source tool such as @pnp/spfx-controls-react icon picker. The PNP reusable controls are open for contributions and are a community effort to support 3rd party developers with tools such as an icon picker. This is probably your best option because no official icon picker control is available anyway.

When someone from the community submits a PR to update those icons to the latest Fluent 2 icons, it will become available in a matter of days rather than a month.

or another option like mentioned before is hTWOo Icons - https://lab.n8d.studio/htwoo/htwoo-core/patterns/design-tokens-icon-overview/design-tokens-icon-overview.rendered.html or via the npm package.

[henningeiben]

Then, there is another thing to consider, which is the SPDialog Framework. It gets/got updated with every new version of SPFx simply because it's essentially backed into the complete SPFx ecosystem.
[...]
Recently, hTWOo UI ditched the IE 11 implementation of dialog and implemented state of the art. Both the pure HTML Dialog implementation as well as the HTWOO React Dialog implementation are more versatile than the current Fluent UI 9 implementation.

This sounds pretty good. As for my usecase - I'm displaying a dialog from an extension, a commandbar button to be precise. So I don't have any React-Code directly. That's why using the SPDialog-class of the SPFx frameworks is so convenient. I guess I would need to use React.createPortal to create myself a react-element where I could insert react-components like the HTWOO components you mentioned.

[StfBauer]

Well but in case of a dialog from an application customizer - that's a 6 liner:

<button id="dlgOpener">Open Dialog</button>
<dialog id="mydialog">Dialog Cotent.</dialog>

and the following script

document.getElementById('dlgOpener').addEventListener('click', () => {

   const myDialog = document.getElementById('myDialog');
   myDialog.openModal()

}

Of course you still need to have close button on rely on the ESC key. ;)

[henningeiben]

Maybe I'm missing something, but where would I put the HTML in a ListView Command Set extension?

And: do you have some sample spfx-solution that is using the hwtoo-react components?

[juliemturner]

@henningeiben I was able to code up a sample for you that demo's a very simple implementation of the dialog in a command set. Hopefully this helps you. The corresponding blog post is here: https://julieturner.net/post/htwoo-dialogs-command/