Plans around reference to Fluent UI 9!

Nishant20021987 commented 11 months ago

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
[X] 💥 Microsoft Edge
[X] 💥 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.

ghost commented 11 months ago

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

nick-pape commented 11 months ago

Is this for the sp-property-pane?

henningeiben commented 11 months ago

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 commented 11 months ago

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 '

Nishant20021987 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

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 commented 11 months ago

@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/

henningeiben commented 10 months ago

wow - that's amazing. I just looked into that and once you see it, it seems kinda obvious.

juliemturner commented 10 months ago

Glad I could help.

stamminator commented 4 months ago

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

@StfBauer Not trying to be pedantic, but this isn't quite correct. Fluent UI React 9 is an implementation of Fluent 2, as is Fluent UI Web Components 3, WinUI 3, and others. Without mention of the platform/framework, it sounds like a v9 of the Fluent specification.

SharePoint / sp-dev-docs