MudStepper - improvements in css classes, actions bar

[Arsync]

Tried to insert MudStepper into MudDialog and found some css-classes missed. Suggested improvements for better style customizations: 1) add 'mud-stepper' class to outer div of MudStepper 2) add 'mud-stepper-content' class to div, wrapping ChildContent. 3) add 'mud-stepper-actions' class to div, which contains prev/next buttons to allow custom styling of that area.

Outer div of stepper content which now has no dedicated classname, can be named as 'mud-stepper-content-wrapper' or other. Main goal is to have well-known names on all internal MudStepper divs.

Also, please:

• add an option to move 'previous' button to right side (but keep custom buttons added at left side),
• add an option to customize 'next' button variant like 'NextButtonVariant' to allow it looks different than other action buttons

Optional:

• need to hide outer div of action buttons when there is no buttons (all disabled) to hide bottom gap.

[mckaragoz]

Hi,

2. add 'mud-stepper-content' class to div, wrapping ChildContent.

We already have ContentClass property to customize the wrapper div.

3. add 'mud-stepper-actions' class to div, which contains prev/next buttons to allow custom styling of that area.

Yes we can add ActionClass property same as ContentClass

[mckaragoz]

• need to hide outer div of action buttons when there is no buttons (all disabled) to hide bottom gap.

This should be MudStack's Spacing value.

[Arsync]

Sorry for my English (if any misreadings).

We already have ContentClass property to customize the wrapper div.

This is not enough in some cases. With ContentClass="h-stepper-content" there is another unnamed div around, which is not catchable by css selectors (only by d-flex which can be subject to change).

Issue

All framework-specific html parts of MudStepper should be named by internal classnames like mud-stepper-[partname].

Goal

Allow to override css rules in some hard cases.

Example purpose

We can put MudStepper in MudDialog and allow it to get scrolled smooth within content area of MudStepper, not just dialog content where it placed (when stepper buttons scrolled out of view).

But we need to turn in flexbox all parents of MudStepper content area (just within mud-dialog). With this aproach we don't need to set stepper content height as fixed, but just control height of MudDialog, which respects window size).

Details

Turn into flexboxes all direct parents of content div with computed height and the next parent whose height is specified; make it display: flex, flex-grow: 1, overflow-y: auto as shown in this explanation.

Well, with this changes we can put MudStepper in MudDialog and allow it to get scrolled smooth within content area of MudStepper, not dialog content where it placed. Without that classes it looks hard (but working):

.h-dialog-scrollable { // MudDialog Class, travel down to stepper content

    height: 80vh;
    overflow-y: hidden;

    & > .outline-none, // part of MudDialog
    & > .outline-none > :not(.fixed), // part of MudDialog
    .mud-dialog-content, // part of MudDialog
    .h-stepper, // MudStepper begins
    .h-stepper > .d-flex, // Suspicious snap, subject to change
    .h-stepper-content { // ContentClass - is ok!
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow-y: hidden;
    }

    .h-stepper-content {
        overflow-y: auto;
        padding-inline: 24px;
    }
}

So there is need to have built-in classes on internal MudStepper divs to make code simple. Just named parts.

[Arsync]

Yes we can add ActionClass property same as ContentClass

Thanks!

add an option to move 'previous' button to right side

About this one. Youtube dialog of editing video in channel has prev/next buttons on the right side and custom buttons on the left. Will be cool if we can change buttons layout just by setting an option. Github buttons close/comment all on the right side.

add an option to customize 'next' button variant like 'NextButtonVariant' to allow it looks different than other action buttons

Also it makes accent on next button, while other buttons looks common.