Official Microsoft Fluent Design components for Blazor

[yehia2amer]

Is your feature request related to a problem? Please describe.

One of the Things that can make Blazor even more promising, is to have Open source, Enterprise ready, Native C#, Blazor UI components for things like (Layout, Navigation, Data Entry, Grids, Forms, Data Visualization, etc..). So that developers don't have to reinvent the wheel.

Also Microsoft Now do have a complete and really Great UI/UX Design System that i think will make sense in this context which is Fluent Design System.

This is a very successful approach in front-end web frameworks like Angular and Developers use it extensively. as it makes development time much less, so that they can focus more on their business requirements. Examples are:

• Material Design by Google
• Component Dev Kit by Google
• Clarity Design by vmware
• Ant Design by NG-ZORRO team

I Know that this can be developed by the community, But a project like that backed by Microsoft will encourage too much developers to migrate to Blazor, just like google's approach in material design & Angular.

Describe the solution you'd like

Create an Open source, Enterprise ready, Native C#, Blazor UI components that work across web, mobile and desktop using .

Describe alternatives you've considered

• Telerik Blazor UI Components (Closed Source, Paid)

[mkArtakMSFT]

Thanks for contacting us, @yehia2amer. We've moved this issue to the Backlog milestone. This means that it is not going to happen for the coming release. We will reassess the backlog following the current release and consider this item at that time. However, keep in mind that there are many other high priority features with which it will be competing for resources.

//cc @danroth27, @rynowak

[Mercurial]

hopefully, it will be considered as high as this is one of the selling points of a UI Library. actually, have beautiful components <3, whats best to fill that hole than Fluent Design!

[amrmoneem32]

I totally agree with @yehia2amer`s suggestions, it would help alot of developers and facilitate their job!!

[yehia2amer]

Thanks @mkArtakMSFT , Great to hear that there is an interest for this idea to be implemented. Very Excited to see this in Blazor Roadmap soon. and hopefully in production with .Net 5 !

[BANG88]

Another example https://github.com/bang88/ant-design-blazor

Ant-Design for Blazor (WIP)

[limefrogyank]

Hacking away at it myself, too: https://github.com/limefrogyank/BlazorFabric

[ElderJames]

I have created the Ant Design Components for Blazor: https://github.com/ElderJames/ant-design-blazor

[shqwerty]

Came accross this library which is a port of the Microsoft Fluent Design React Library to Blazor.

git repo description: "Simple port of FluenUI/Office Fabric React components and style to Blazor https://github.com/BlazorFluentUI/BlazorFluentUI

[NPadrutt]

I found another Ant Design Component Library which looks very promising: https://github.com/Append-IT/ant-design-blazor

[lukechu10]

Why is fluent ui core still on the getting started page? There is no documentation whatsoever.

[jwatkin]

This video is about a new Microsoft project named FAST, which is relevant to this discussion. The FAST content begins at 13:50 and ends at 1:17:20.

[BrunoBlanes]

Holy crap, FAST is already shipped as release and works with a hole lot of frameworks, Blazor included, and it also has support for FluentUI out of the box. And here I was trying create Razor Components using JSInterop to work with FluentUI...

[lonix1]

Project page: https://www.fast.design/

[yehia2amer]

@jwatkin @BrunoBlanes @lonix1. Thanks for sharing this. I Just went through fast today and it is really good. I like how universal it is, the way it is using web components, and how we as developers can integrate our own design systems to it. it seems like a perfect match for anyone using JS Frameworks. Specially if a developer is using multiple JS Front end Frameworks!

But what I initially suggested is a Native C#, Blazor UI components. where developers don't have to learn JS, and can only use C# to use, edit or even expand how those components works and behave and I cannot see how Fast is going to help in this area. Please correct me if I am wrong.

I really hope that Microsoft use Fast as an architectural reference to design those components though but in C#

[BrunoBlanes]

You are not wrong, I would love to have that, but I consider FAST to be a workaround.

[LuohuaRain]

Can FAST work with Blazor ServerSide seamlessly?

[limefrogyank]

Can FAST work with Blazor ServerSide seamlessly?

I've experimented with FAST and Blazor. If you're using simple elements that have string-based attributes, they work perfectly with Blazor. However, you can't really make a List element using FAST and assign an array to it. At least, you can't do it easily. You'd either have to do work-arounds like set the array as a JSON string via attribute. Or you'd have to get a reference to the element and then once rendered, assign the array via javascript. This is pretty much the opposite of what you'd want to do in Blazor.

But for basic buttons and other basic elements, FAST is great!

[Mercurial]

Can FAST work with Blazor ServerSide seamlessly?

I've experimented with FAST and Blazor. If you're using simple elements that have string-based attributes, they work perfectly with Blazor. However, you can't really make a List element using FAST and assign an array to it. At least, you can't do it easily. You'd either have to do work-arounds like set the array as a JSON string via attribute. Or you'd have to get a reference to the element and then once rendered, assign the array via javascript. This is pretty much the opposite of what you'd want to do in Blazor.

But for basic buttons and other basic elements, FAST is great!

Fast components arent meant to be treated like html elements, they don't support C# datatypes only strings. You have to make a wrapper around or a higher level component if you want.

A FastBlazor component library if you will :)

[jwatkin]

At the FAST site, there's a "Community" tab where you can ask questions about FAST and Blazor as well as provide feedback. They want your feedback for which components they should implement next.

Check out this spot in the video to hear about their plans for components.

[kbrilla]

It would be great if css and js if any would be separated from actual Blazor components and could be reused for WebComponents etc. Also maybe drop old browser and go full flag css variables, etc.

[hkusulja]

Hello, sorry, I do not understand, I have a new ASP.NET 5 project, (without migration), from start, using Blazor / WASM, and I would like to use Fluent UI , but this is React, which i try to avoid. So, mentioned FAST, I do not see as a replacement, since missing lots of components, such as tables/lists/grid views etc. I am writing b2b web application, with lots of forms and grids. So, what is current status, solution or proposal that you have?

[BrunoBlanes]

@hkusulja there are quite a few community driven libraries full of components for Blazor, you can just Google it.. As per something oficial from Microsoft, I guess FAST is as far as it goes.

[hkusulja]

@BrunoBlanes thank you for your message, so Blazor WASM and using FAST ..., but not sure, how to get the Fluent UI then, i also saw - https://www.fast.design/docs/tutorials/site-rebrand/#fast-and-the-flexibility-of-the-design-system

Anyhow, I am also looking and hope for "native" Microsoft controls for Blazor, not to use 3rd solutions (yes, there are several ones on google)

[BrunoBlanes]

FAST is a component library, FluentUI wrote their style into it. You must leverage this CDN: https://unpkg.com/@fluentui/web-components and instead of wrapping your UI in <fast-design-system-provider> you'll use <fluent-design-system-provider>. That means you'll also need to change every component name from fast to fluent. You can use the same docs from FAST for Fluent components, they share the exact same code behind.

[misaya]

ant-design-blazor is ready! https://github.com/ant-design-blazor/ant-design-blazor

[legistek]

Doesn't anyone think it's curious why Microsoft would make Fluent UI web controls for a competitive web platform like React but not for its own?

[danroth27]

@legistek Microsoft loves JavaScript too :smiley:. We build VS Code, TypeScript, and React Native for Windows, and lots of Microsoft products at Microsoft make heavy use of React.

That all said, there are Fluent UI web components that you can use with any frontend framework, including Blazor. The Fluent UI web components are based on FAST, which also can be used with Blazor. We're working with the Fluent UI team to see if we can make using their Fluent UI web components easier by providing some thin Blazor component wrappers. Hopefully we'll have more to share about that soon.

[legistek]

Microsoft loves JavaScript too

LOL, oh we know. And Linux, and Mac. Life was simpler back in the good old days when all we had to learn was MFC. :D

But anyway but glad to hear you're looking into official Blazor versions. After all MAUI's getting the Fluent treatment. They even made iOS versions. Time for Blazor to get some love!

[scottkuhl]

That all said, there are Fluent UI web components that you can use with any frontend framework, including Blazor. The Fluent UI web components are based on FAST, which also can be used with Blazor.

The FAST components are far behind those implemented in React. But I believe the React components are owned by the Office team and Office is heavily invested in React.

The ideal scenario here would be to port all Fluent React components to FAST and then use FAST in React like it is suggested here for Blazor.

[hkusulja]

@scottkuhl or the other way around, that Office team, with their components, build also the Blazor / WASM version of it, can you reference their GitHub, since they also have angular, and others support...

[fredrikhr]

In think in that regard it would make more sense to invest into unifying into one single technology (FAST) instead of hvaing the office team build the same thing multiple times for each tech stack

[hkusulja]

@fredrikhr ok, but this is up to Office team, right? can you reference their github please?

[ElderJames]

I think you'd rather have a component library that uses C # instead of JS. This is the full advantage of Blazor and can be used as the official development specification for the framework. Just as many Angular developers derive a lot of best practices from the Material component library.

[kbrilla]

Angular Material is as far as possible from best practices for Angular. They overly complicate a lot of things there and use a lot of things they say should not be done in official style guide.

Also they currently move to wrapping Material WebComponents into Angular, for best intercompatibility with different frameworks.

[legistek]

So basically the Office team uses React for their web apps, Swift for iOS, and Kotlin for Android, and so they made Fluent controls for those platforms and released them to the public.

Office doesn't use Blazor, so they don't have an internal need themselves to make that port.

It would have to be a strategic move to help support Blazor then.

I think you'd rather have a component library that uses C # instead of JS.

Not if you want your UI to be responsive with interpreted WASM...

[hkusulja]

@legistek ok, thank you for clarification. However, Blazor team, now uses this / aspnet github repo, so we are again, here, on right place to request the feature - Fluent UI components inside Blazor ...

[MS-Hayden]

Microsoft FAST now has Blazor integration with Fluent styling.

https://github.com/microsoft/fast-blazor

https://www.fast.design/docs/integrations/blazor/

[EisenbergEffect]

Quick note for those interested in the new components... We haven't updated the documentation yet, so the best way to see how to use the components is via the sample project in the fast-blazor repo. We hope to have some basic documentation ready pretty soon though. Also, this is a beta/preview release. So, expect some bugs and some changes for a little while.

[hkusulja]

Yeah, i think relation to Microsoft FAST is somehow misleading, since FAST has some basic components/patterns, but it does not have grids and lot of other components, including all stuff from Office Team (like SharePoint etc.) and Microsoft Fluent UI components, that we need in Blazor WASM.. Having Microsoft FAST in Blazor is ok, but we/developers/customers need more components - Microsoft Fluent UI components.

So we need - https://developer.microsoft.com/en-us/fluentui#/controls/web So ASP.NET team can get it from https://github.com/microsoft/fluentui to implement those in Blazor :)

[Falkicon]

@hkusulja, for base components, Fluent UI WC has a shared development plan with Fluent UI React so the ultimate list of components will be largely the same. We have been making regular updates to this alignment and priority is largely based on user demand, so if you need a component sooner than later, please feel free to request it. We have been regularly releasing new components toward this alignment effort. Some components likely won't be the same, for example, we currently don't plan on making an image component since in the Web Component context you would simply use the image element. In many ways, this is the case with Grid. For React, a grid implementation makes sense but for Web Components, we recommend using platform based layout options such as CSS Grid or Flexbox. For cases where specific patterns are not well supported by the platform, we are open to features that support those specific cases, but so far, we have not any any requests for additional grid features. Regarding more product specific components; product teams often contribute these components so they tend to be aligned with the product/technology combinations of those teams. There are several components that we use internally that are built for Web Components that may not be in the React implementation and visa versa. We will be releasing some of these components externally where it makes sense but often these components are tested and validated internally before we release them externally. Ultimately, there may not be 100% overlap in these composite components since the creation of these components will be based on partner/user need. For example, Fluent UI WC may never make an Office content card if no partner/user needs an Office content card built on Web Components. This will also be the case for React implementations where they would not build a news article card if nobody using Fluent UI React needed it. So, similar to making requests for foundational components, please feel free to request additional components and we will do our best to accommodate. In cases where we can't accommodate or can't make the component available on your timeline, components can be contributed by the community.

[Falkicon]

It is also worth mentioning here, because this is a common point of confusion, that there is not a single pixel-to-pixel representation of Fluent. Due to the broad range of products at Microsoft, Fluent must provide a design framework that creates common visual and behavioral alignment points yet still have the flexibility to address the many products, services, and devices that Microsoft offers. For example, I don't think anyone would expect the exact same component style to be used for Xbox, Office, and Edge Devtools. One of the features supported in Fluent UI WC, Adaptive UI, helps address many of these differences by allowing the design configuration of components to make them align with the other components they may be integrating side by side with.

[kbrilla]

I would say this is the trasom why Apple does have an upper hand, they do mantain consistent ui between difrent products. Also Google with they new aproach to MWC is trying to do the same. So why won’t Microsoft try to do it? Of course there will be some very specyfic usecases but those should be rare and backed up with good list of reasones why it should be dofferent only here in this product. I often come across reasonig cause it would look better, but given arguments like consistency across products they often back off from this idea.

W dniu czw., 6.05.2021 o 19:39 Jason Falk @.***> napisał(a):

It is also worth mentioning here, because this is a common point of confusion, that there is not a single pixel-to-pixel representation of Fluent. Due to the broad range of products and Microsoft, Fluent must provide a design framework that creates common visual and behavioral alignment points yet still have the flexiblity to address the many products, services, and devices that Microsoft offers. For example, I don't think anyone would expect the exact same component style to be used for Xbox, Office, and Edge Devtools. One of the features supported in Fluent UI WC, Adaptive UI, helps address many of these differences by allowing the design configuration of components to make them align with the other components they may be integrating side by side with.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/dotnet/aspnetcore/issues/11229#issuecomment-833723494, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFKBQQJHXRJYQF7QWL7OYULTMLH4PANCNFSM4HYKFH3A .

[EisenbergEffect]

@hkusulja Thank you for sharing your concerns with us ❤️

One thing I'd like to point out is that these new Blazor components are actually wrappers around the official FluentUI Web Components, the source of which lives in precisely the repo you have referenced. You can see it here: https://github.com/microsoft/fluentui/tree/master/packages/web-components One of the truly innovative features of this implementation is that it's built on top of this Adaptive UI idea that @Falkicon mentioned. As a result, by setting a few simple properties on the components, you can make them look like Windows, Edge, Office, Teams, Sharepoint, etc.

We're still working on our demos and documentation, which we hope will show just how to use these adaptive capabilities. I think some of the confusion may stem from the fact that we don't have that in place just yet.

As @Falkicon mentioned, we're actively working with the community to address any gaps on the component offering itself. With almost 40 components in the library and more coming, I think we're making great progress here, but we need your specific feedback in this area to help drive our prioritization of what to build next.

[hkusulja]

Just for the info, I work for MS partner company, and we develop lot of different apps, including SharePoint, office, and other, but also Single page web applications (SPA). Where we used to do it with Angular / Typescript, but later decided to move to native ASP.NET Blazor WASM as solution with C#. However, we are lacking the components so much, and trying to avoid 3rd party (free or paid) and rather count on native / Microsoft .NET 5 or .NET 6 solution. Also, trying not to move to React SPA and have native Office Fluent UI. Yes, we need grids and lot of stuff that Office Fluent UI has. Also, as I see, the point of Fluent UI was that we can make the apps that looks the same or similar as much as possible with user well-known designs, methods and controls.

for the FAST i see just about 10 small/minor controls But what we need is more like Fluent UI Web components in ASP.NET 5 / 6 which brings also more functionality. Calendar DatePicker DetailsList (important! including sort on grid etc., which FAST won't implement as I understand) GroupedList Panel ...

Also, as MVP, I hope that one day, portal.azure.com will host their interface and components for free on github for wider usage.

Anyhow, currently on Blazor WASM and latest stable .NET 5 with C# and with FAST, we are very limited and need to, either develop our own controls (where we do not want to invest, and rather go with existing solution) or use 3rd party (Telerik or others).

If you can be more concrete, about current status of components that you are developing, as part of ASP.NET Blazor WASM, and share a GitHub link to them? maybe we will test those, even if they are in preview.

This is critical for the current and ongoing projects to choose the "right direction" of development...

[Falkicon]

Currently Fluent UI Web Components have at least 30 publicly available components which can be found here: https://github.com/microsoft/fluentui/tree/master/packages/web-components/src. Calender is currently in development (spec here: https://github.com/microsoft/fast/pull/4610 if you would like to provide feedback). Requests for additional controls and features should be made on GitHub and are reviewed regularly by our team.

Regarding visual alignment, we are aligning with the Fluent UI React vNext work which uses the latest Fluent guidance. Fluent UI React was previously Fabric and has not been updated to use the Fluent updates. Regardless, with FAST's Adaptive UI, you can make Fluent UI WC components look like either Fluent UI React or Fluent UI React vNext and with our upcoming dependency injection work, that will be even easier. Ultimately, we have to have a design default for Fluent UI WC and we have chosen the latest Fluent guidance.

We are also working on deeper Blazor integration, more info will be available on that soon.

We would like to publish a more concrete component roadmap, feedback taken on that.

[vnbaaij]

So. Many. Questions. 😉

Between Fluent UI React (and therefore by extension in Blazor Fluent UI (https://github.com/BlazorFluentUI/BlazorFluentUI) which I'm one of the maintainers of) and Fluent UI WC a lot of cheese is being moved.

For example, in Fluent UI (both React and ours), you use a <PrimaryButton> tag to create such a primary button. Now in Fluent UI WC/FAST you need to create a <FluentButton> with an Appearance="Appearance.Accent" attribute. The React verison used this mechanism with a buttonType attribute before and actually deprecated that a while back. So, different mechanisms (attribute vs specific tag) and different terminology (Primary vs Appearance.Accent) to get to the same result. I suspect this will happen in a lot of areas. Are there any plans to harmonize how this kind of functionality will work between the different implementations?

Another question I have is how the integration will be between Fluent UI WC and native Blazor functionality for things like EventHandlers and bindings? I already see the raw EventHandlers and bindings in the fast-blazor repo so hopefull that this will evolve further.

[lonix1]

To @Falkicon / @EisenbergEffect

We would like to publish a more concrete component roadmap

As someone who doesn't follow the bleeding edge of every new change in all these component frameworks, understand that for me (and anyone new to blazor), there are many options and all are pulling in different directions, so it's very CONFUSING.

And there are other options too, which should be good for most devs, e.g. "blazor with bootstrap".

So publishing a roadmap for blazor-related UI would be very welcome! I just want to quickly start a blazor project, but figuring out which tooling to use is a headache.

TLDR: those following this thread are already experts... please give OFFICIAL guidance to blazor newbies. Which tools are compatible, of those which are the official microsoft tools (and which components/features are implemented vs planned).

[robarbms]

Currently Fluent UI Web Components have at least 30 publicly available components which can be found here: https://github.com/microsoft/fluentui/tree/master/packages/web-components/src. Calender is currently in development (spec here: microsoft/fast#4610 if you would like to provide feedback). Requests for additional controls and features should be made on GitHub and are reviewed regularly by our team.

Regarding visual alignment, we are aligning with the Fluent UI React vNext work which uses the latest Fluent guidance. Fluent UI React was previously Fabric and has not been updated to use the Fluent updates. Regardless, with FAST's Adaptive UI, you can make Fluent UI WC components look like either Fluent UI React or Fluent UI React vNext and with our upcoming dependency injection work, that will be even easier. Ultimately, we have to have a design default for Fluent UI WC and we have chosen the latest Fluent guidance.

We are also working on deeper Blazor integration, more info will be available on that soon.

We would like to publish a more concrete component roadmap, feedback taken on that.

I had work for a date-picker and decided to break out the calendar portion as it's own component. I'm glad that I had the time to focus on the calendar component so that I was able to make it more robust. I've just pushed the first draft of a fast-calendar component - microsoft/fast/pull/4748 Localization has been particularly tricky. The date-picker should follow pretty quickly as it's more straight forward.

[hkusulja]

@robarbms Ok, so feature of Blazor integration/components is then from .NET 5 / .NET 6 ? or ASP.NET Blazor team? Office team? FAST Team? reference to github would be nice... Since new .NET 6 is preview and in few months we expect GA, i think information about using Blazor with FAST components for Fluent UI React vNEXT would be needed ASAP. Thank you

[danroth27]

@hkusulja The work is happening in the https://github.com/microsoft/fast-blazor repo and is being handled by the Fluent UI folks who work on the Fluent UI web components. The Blazor component wrappers are currently based on .NET 5.