Autocomplete: Adornments are styled as Icon Buttons

[danielchalmers]

Bug type

Component

Component name

MudAutocomplete

What happened?

The DOM and the styling of adornments have changed in the autocomplete and maybe other components too.

Docs search bar (v6.19.1):

<div class="mud-select mud-autocomplete"><!--!-->
    <div class="mud-input-control mud-select docs-search-bar mx-4">
        <div class="mud-input-control-input-container"><!--!-->
            <div class="mud-input mud-input-outlined mud-input-adorned-start mud-shrink mud-select-input"><!--!-->
                <div class="mud-input-adornment mud-input-adornment-start mud-select-input"><!--!--><svg
                        aria-label="Icon" tabindex="-1"
                        class="mud-icon-root mud-icon-default mud-svg-icon mud-icon-size-medium" focusable="false"
                        viewBox="0 0 24 24" aria-hidden="true"><!--!-->
                        <path d="M0 0h24v24H0z" fill="none"></path>
                        <path
                            d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
                        </path>
                    </svg></div><input
                    class="mud-input-slot mud-input-root mud-input-root-outlined mud-input-root-adorned-start mud-select-input"
                    autocomplete="mud-disabled-2f06dcf6-c0e0-4c0f-9e3e-0694ab552150" type="text" placeholder="Search"
                    inputmode="text" maxlength="524288" aria-invalid="false" _bl_77="">
                <div class="mud-input-slot mud-input-root mud-input-root-outlined mud-input-root-adorned-start mud-select-input"
                    style="display:none" tabindex="-1" _bl_78=""></div><!--!-->
                <div class="mud-input-outlined-border"></div>
            </div><!--!-->
            <div id="popover-b793f2fc-abad-4725-88f4-55eb3fcecdbf" class="mud-popover-cascading-value"></div>
        </div>
    </div>
</div>

Regular:

There is an appropriate amount of margin between the adornment and the text.

Adornment hover:

There is no hover effect.

Docs search bar (dev @ 0f37ec5):

<div class="mud-select mud-autocomplete"><!--!-->
    <div class="mud-input-control mud-select docs-search-bar ml-4">
        <div class="mud-input-control-input-container"><!--!-->
            <div
                class="mud-input mud-input-outlined mud-input-adorned-start mud-shrink mud-typography-input mud-select-input">
                <!--!-->
                <div class="mud-input-adornment mud-input-adornment-start mud-select-input"><!--!--><!--!--><button
                        aria-label="Icon Button" tabindex="-1" type="button"
                        class="mud-button-root mud-icon-button mud-ripple mud-ripple-icon mud-icon-button-edge-start mud-input-adornment-icon-button"
                        _bl_94=""><span class="mud-icon-button-label"><!--!--><svg
                                class="mud-icon-root mud-svg-icon mud-icon-size-medium" focusable="false"
                                viewBox="0 0 24 24" aria-hidden="true"><!--!-->
                                <path d="M0 0h24v24H0z" fill="none"></path>
                                <path
                                    d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z">
                                </path>
                            </svg></span></button></div><input
                    class="mud-input-slot mud-input-root mud-input-root-outlined mud-input-root-adorned-start mud-select-input"
                    autocomplete="mud-disabled-2e0baa65-4b11-49d2-9608-080df7674bf5"
                    id="mudinput-147356dd-5ff7-4ae0-8a1b-7cfd02140747" type="text" placeholder="Search" inputmode="text"
                    maxlength="524288" aria-invalid="false" aria-required="false" _bl_77="">
                <div class="mud-input-slot mud-input-root mud-input-root-outlined mud-input-root-adorned-start mud-select-input"
                    style="display:none" tabindex="-1" _bl_78=""></div><!--!-->
                <div class="mud-input-outlined-border"></div>
            </div><!--!-->
            <div id="popover-23a137b9-03ff-475e-bceb-559cded3bee4" class="mud-popover-cascading-value"></div>
        </div>
    </div>
</div>

Regular:

Too much margin between the adornment and the icon, and the icon is not as vibrant.

Adornment hover:

Icon button hover effect

Expected behavior

The adornment should not take up so much space nor should it have a large hover effect.

Reproduction link

https://dev.mudblazor.com/components/autocomplete

Reproduction steps

1. Find an autocomplete with an adornment
2. Hover the adornment
3. Compare this to the style on v6.19.1

Relevant log output

No response

Version (bug)

7.0.0-preview1

Version (working)

6.19.1

What browsers are you seeing the problem on?

Edge

On which operating systems are you experiencing the issue?

Windows

Pull Request

• I would like to do a Pull Request

Code of Conduct

• I agree to follow this project's Code of Conduct

[danielchalmers]

@ScarletKuro @henon This was introduced by #8787 and it was due to OnAdornmentClick always having a delegate now:

MudBlazor/src/MudBlazor/Components/Autocomplete/MudAutocomplete.razor

Line 18 in 122a95f

OnAdornmentClick="@AdornmentClickHandler" AdornmentIcon="@CurrentIcon" Adornment="@Adornment" AdornmentColor="@AdornmentColor" IconSize="@IconSize" AdornmentText="@AdornmentText"

MudBlazor/src/MudBlazor/Components/Autocomplete/MudAutocomplete.razor.cs

Lines 898 to 903 in 122a95f

	private async Task AdornmentClickHandler()
	{
	await FocusAsync();
	await OnAdornmentClick.InvokeAsync();
	}

This is rendered differently in MudInputAdornment:

MudBlazor/src/MudBlazor/Components/Input/MudInputAdornment.razor

Lines 12 to 19 in 122a95f

	@if (AdornmentClick.HasDelegate)
	{
	<MudIconButton Class="mud-input-adornment-icon-button" Icon="@Icon" OnClick="@AdornmentClick" Edge="@Edge" Size="@Size" Color="@Color" aria-label="@(!string.IsNullOrEmpty(AriaLabel) ? AriaLabel : "Icon Button")" tabindex="-1"/>
	}
	else
	{
	<MudIcon Class="mud-input-adornment-icon" Icon="@Icon" Size="@Size" Color="@Color" aria-label="@(!string.IsNullOrEmpty(AriaLabel) ? AriaLabel : "Icon")" tabindex="-1" />
	}

and this was already the case for Text Fields in the docs and likely most other adornments.
I don't understand why this icon button style is preferred when it doesn't even fit in the component:

✋I propose we make it always be a clickable MudIcon instead of a MudIconButton because it looks much cleaner.
I am not aware of the original reasoning behind this design difference.

To see the difference yourself, look at the docs search bar in dev.mudblazor.com vs mudblazor.com.

Then take a look at other adornments throughout the docs like in the MudTextField.

[henon]

The reason for the button is evident, someone wanted a clickable element to hover.

[danielchalmers]

The reason for the button is evident, someone wanted a clickable element to hover.

@henon The regular icon is hoverable in the way that the cursor changes without having a huge ring around it. The padding should at least be reduced. Why was the docs search bar using one without the padded hover?

[henon]

Interesting, I didn't know MudIcon was able to hover

[danielchalmers]

This is intended behavior. The fact that icon adornment buttons have too much padding is a separate issue which is a little convoluted to change due to the way the styles are written.