feat: add support for multiple predefined dialog sizes

[MarvinKlein1508]

🙋 Feature Request

This request is related to the v5 version. Since the Dialogs seem to get an entire overhaul I'd like to bring this feature request back up again.

I would highly appreciate if the FluentDialog can provide different pre-defined dialog sizes like bootstrap does.
https://getbootstrap.com/docs/5.3/components/modal/#optional-sizes

I'd like to show some larger tables within dialogs/modals and the default size is too small for me most of the time. Those sizes are also different for every different screensize. Especially on larger screens (>24inches) I'd like to use up more space to show more stuff.

In v3 you can specify the Width parameter of the DialogParameters however this only allows for one valid css value.

💁 Possible Solution

Control the width of the dialog by different CSS classes which can easily be overwritten. I really like the Bootstrap default sizes but it would be also nice to allow for custom size classes here (In my case I created custom classes for xxl (for 32inch screens) and fullscreen)

🔦 Context

This request is related to #2456

[dvoituron]

Yes, it's a good idea to be able to define the width, height and max-width and max-height values.

My first impression would be to have Class and Style attributes where we could set these values (or use predefined values as you suggested). But also to configure other UI styles.

[MarvinKlein1508]

The charm of pre-definded values would be that you can throw them into an enum, so you don't need to remember the class names. In case you want to provide a custom class you can always change CSS variabels within your custom class. I'm actually doing it manually in my projects right now like this:

/* Modals */
@media (min-width: 576px) {
    .modal {
        --dialog-width: 500px !important;
    }

    .modal-sm {
        --dialog-width: 300px !important;
    }
}

@media (min-width: 992px) {
    .modal-lg,
    .modal-xl {
        --dialog-width: 800px !important;
    }
}

@media (min-width: 1200px) {
    .modal-xl {
        --dialog-width: 1140px !important;
    }
}

.modal-fullscreen {
    --dialog-width: 100% !important;
    --dialog-height: calc(100dvh - 2px) !important;
    --layer-corner-radius: 0 !important;
}

[fdonnet]

It can be great for the panels too.

To be able to set the size depending on the screens via a class and style breakpoints. If you use the panel for editing an object, for mobile screen 500px is perfect but for larger ones you want more space and maybe change the design to present the fields in 2 columns mode.

The "width" property is limited. I think it will be better to be able to pass a "class" ?

It's not really possible now. So It limits the usage of the panel for other things (not add or edit resources). => one column design is ok on mobile but on larger screens it's not so good.

Maybe it's not a good idea to use the panel for this usage in "general" term ? What do you think ?
When we need to "Add" or "Edit" a resource => a new route is better, with "return to list" or something like that ?

[dvoituron]

I created a new PR for dev-v5, including some code refactoring.

I will add these features in the next PR (this new existing PR is already so big).

Another PR will add some extra extension methods to simplify the migration steps.

https://fluentui-blazor-v5.azurewebsites.net/Dialog

Give me your feedback about these new APIs 😀

[fdonnet]

I saw you added "Class" for the "API FluentDialog." That's great. If we have a way to remove the fixed base "width," either this way or with an additional configuration, it may force me to revert to a "panel" approach for my add/edit operations 😄. That was my only pain point because the way we can customize every component to be a dialog is already 👍.

I like to use Azure as an example for some UIs I have because I believe they use React Fluent, and I kinda appreciate the work they do. With Fluent Blazor, I tend to match their approach and achieve great results... happy with that.

My latest discovery is the <FluentToolbar> with a custom <FluentOverflow> in it (reassign the buttons in a tooltip), which provides access to all actions on every devices => so beautiful!

Regarding the panel specifically, on Azure, sometimes they use a left panel for "edit/add," and if it's a more complex resource, they use a new route. it will be hard to decide what's best if we can have more options to design the panel for each screen size 😉 .

Thanks for the great library!