My experience using Microsoft.FluentUI #2443
Replies: 5 comments 3 replies
-
Thanks for the extensive write up. As you already said in the issue that led to this discussion, we can't fix all of this in the current version. But good to have this as a checklist for the next iteration. ps you forgot to mention the DatePicker/Type value issue here 😉 |
Beta Was this translation helpful? Give feedback.
-
I've created issue #2471 and #2470 to address IMO the two most important points from my experience |
Beta Was this translation helpful? Give feedback.
-
Doesn't the recently added Placeholder option for FluentSelect solve the "null" value? +1 though for being able to use Enums in a model without needing confusing hacks... |
Beta Was this translation helpful? Give feedback.
-
I also encountered a similar issue with the @OnClick of FluentAnchor when I used it to create a horizontal menu bar for the header. |
Beta Was this translation helpful? Give feedback.
-
I am hitting issues with validation and FluentDatePicker being DateOnly? (nullable DateOnly) I also vote for this is work out of the box. An example of a recommended alternative to FluentNumberField that I can use for decimal values, in an EditForm, would be useful. I have seen the many issues about this as well. Have you had any requests to make the FluentUI equivalents of the EF Core CRUD scaffolding? Is this even possible? |
Beta Was this translation helpful? Give feedback.
-
Hey everyone,
As suggested by @vnbaaij, I'm creating this discussion to share my thoughts on some bottlenecks of this library. You might read many negative points in this thread, but I can assure you that I enjoy using this library a lot. The areas I discuss are those that, in my opinion, could benefit significantly from certain improvements.
I have not used all of the components extensively, but I believe I have a good understanding of the ones I use. I also try to provide comparison code from my earlier implementations, which mostly rely on pure HTML & Blazor.
FluentSelect
This is the component to display dropdown menus. In basic Blazor, I would implement this like this:
Or what I do most of the time is selecting an enum like this:
Using the FluentUI equivalent is much harder compared to vanilla because I can only bind strings or objects to it. Let's translate my examples over to FluentUI.
This would be the example for the enum:
The biggest pain here is the requirement of either binding to a string or an object. Most of the time, I just want to bind to some ints or enums. This component would benefit a lot if it allowed for generic binding like InputSelect.
FluentAutoComplete
I'm using this component to allow the user to search within a large number of objects. It's a good component but has some downsides. Implementing just one item is kind of difficult.
Take this implementation, for example. This is used to search for one cost center within the database. The selected ID will then be assigned to my object.
Sadly, there is no vanilla option to do search with vanilla Blazor components (as far as I know). What I've done here is used an InputSelect instead and displayed all items within it, fetching the item from memory in the ValueChanged event.
Also, I cannot bind to List as the component explicitly wants an IEnumerable. Because of this, I often end up doing boilerplate code to cast the instances around.
Dialogs
I must admit that I have not used this component as much. But whenever I need it, the amount of work required to achieve what I want is enormous.
In my opinion, the biggest weakness of this component is that it does not support parameters at all. Let's consider a very simple example. Let's say I have an object called User. This object consists of two properties, Name and Email. Now, I want to display this information in a dialog and want only certain users to be able to modify the Email. This is not possible right now. The only three ways I've found to achieve this are:
I went with option 3, but this loses all the advantages of the DialogService because I need to create a new Modal for everything I want to display:
Then I can open it like this:
It would be really cool if I could pass parameters to the modal like this:
https://demos.blazorbootstrap.com/modals#dynamic-component-as-modal
Another big weakness is that they are not scaling with the content. Sure, I can assign a width in percentages, but this will be used on all devices then. I want the modal to be larger on larger displays. In Bootstrap, this works automatically. An addition of a fullscreen modal would be nice as well. Right now, I create fullscreen modals with a custom CSS class that gets applied to my component.
I often run into some pixel issues with dialogs where I get additional vertical or horizontal scrollbars within and outside the dialog for some reason. That's why I don't use the Grid or StackPanel in it at all. Instead, I'm using default Bootstrap row and col classes, which do the trick for me.
All of this also applies to the confirm dialog. Here, I just don't understand why I cannot toggle the background shadow for them.
FluentGrid & FluentStack
As I've mentioned before, I often get some scrollbars in my container for some reason. That's why I don't use these two components at all.
The only thing I wish for here would be if I could somehow revert the order of items on smaller screen sizes.
Icons
Adding icons to any component is always a headache for me because I just cannot remember the syntax for it.
It also doesn't help that the documentation allows copying it to the clipboard like this:
FluentNavMenu
I really like this component. It's easy to use and looks pretty good. The only thing I need here is that it should remember the state of expanded objects because many of my users are bookmarking the pages and they don't know where they are if the menu does not open expanded objects by default.
FluentButton & FluentAnchor
FluentButtons support custom colors, but FluentAnchor does not. In my opinion, a FluentAnchor is just a link with the appearance of a button, so it should also support custom colors. Also, why can't I use the warning, danger, info, etc., colors that are available in MessageBar?
I just don't understand why there is an OnClick EventHandler and @OnClick.
Besides this, these are pretty good and easy-to-use components.
FluentDataGrid
I just wish there would be a default component to achieve table-like behavior. Besides this, I'm enjoying this component a lot.
Cards
I don't use them at all. They are way too complicated in my opinion. I tried them, but I always have issues with either height, width, or some magic scrollbars.
Toasts
They should support an effect that shows how long a toast will last until it fades away. Also, error/success/warning toasts don't stand out as much. Both I and my users often overlook them.
Panels
I like it.
FluentDatePicker
This component should support all other DateTime, DateOnly etc. formats out of the box.
FluentNumberField
This component needs an entire overhaul. It doesn't support different CultureInfo for decimals. Nullables and overflow in min and max values are bugged.
Beta Was this translation helpful? Give feedback.
All reactions