Skip to content

Input Components: Fix Height and Adornment Visuals #531

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
May 15, 2025
+95 −43
Merged

Input Components: Fix Height and Adornment Visuals #531

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 37 additions & 15 deletions CodeBeam.MudBlazor.Extensions.Docs/Pages/VisualTest.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,38 @@

<MudContainer Class="gap-4" MaxWidth="MaxWidth.Medium">
<MudStack Row="true">
<MudSelect T="Color" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="Label" Clearable>
@foreach (var item in Enum.GetValues<Color>())
<MudSelect T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="@(_label ? "Select" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable>
@foreach (var item in _states)
{
<MudSelectItem Value="@item">@item</MudSelectItem>
}
</MudSelect>
<MudSelectExtended T="Color" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="Label" Clearable>
@foreach (var item in Enum.GetValues<Color>())
<MudSelectExtended T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="@(_label ? "SelectExt" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable>
@foreach (var item in _states)
{
<MudSelectItemExtended Value="@item">@item</MudSelectItemExtended>
}
</MudSelectExtended>
</MudStack>

<MudStack Row="true">
<MudTextField T="string" />
<MudTextFieldExtended T="string" />
</MudStack>
<MudStack Row="true">
<MudTextField T="string" Variant="Variant.Outlined" />
<MudTextFieldExtended T="string" Variant="Variant.Outlined" />
<MudComboBox T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Variant="@_variant" Label="@(_label ? "Combobox" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable>
@foreach (var item in _states)
{
<MudComboBoxItem Value="@item">@item</MudComboBoxItem>
}
</MudComboBox>
</MudStack>

<MudStack Row="true">
<MudTextField T="string" Variant="Variant.Filled" />
<MudTextFieldExtended T="string" Variant="Variant.Filled" />
<MudTextField T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="@(_label ? "Text Field" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable />
<MudTextFieldExtended T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="@(_label ? "Text Field Ext" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable />
</MudStack>

<MudStack>
<MudSwitchM3 @bind-Value="_dense" Label="Dense" />
<MudSwitchM3 @bind-Value="_margin" Label="Margin" />
<MudSelectExtended @bind-Value="_variant">
<MudSwitchM3 @bind-Value="_label" Label="Label" />
<MudSwitchM3 @bind-Value="_placeholder" Label="Placeholder" />
<MudSelectExtended @bind-Value="_variant" Label="Variant" Variant="Variant.Outlined" Margin="Margin.Dense">
@foreach (var item in Enum.GetValues<Variant>())
{
<MudSelectItemExtended Value="@item">@item</MudSelectItemExtended>
Expand All @@ -43,5 +45,25 @@
@code {
private bool _dense;
private bool _margin;
private bool _label = true;
private bool _placeholder;
private Variant _variant;

private string[] _states =
{
"Alabama", "Alaska", "American Samoa", "Arizona",
"Arkansas", "California", "Colorado", "Connecticut",
"Delaware", "District of Columbia", "Federated States of Micronesia",
"Florida", "Georgia", "Guam", "Hawaii", "Idaho",
"Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
"Louisiana", "Maine", "Marshall Islands", "Maryland",
"Massachusetts", "Michigan", "Minnesota", "Mississippi",
"Missouri", "Montana", "Nebraska", "Nevada",
"New Hampshire", "New Jersey", "New Mexico", "New York",
"North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
"Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
"Rhode Island", "South Carolina", "South Dakota", "Tennessee",
"Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
"Washington", "West Virginia", "Wisconsin", "Wyoming",
};
}
23 changes: 17 additions & 6 deletions CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,17 +23,28 @@
Underline="@Underline"
Disabled="@GetDisabledState()" ReadOnly="@GetReadOnlyState()" Error="@Error" ErrorId="@ErrorId"
Clearable="@Clearable" ForceClearable="@(Clearable && HasValue(Value))" OnClearButtonClick="@ClearButtonClickHandlerAsync"
MaxLength="@MaxLength" @attributes="UserAttributes" OnBlur="@HandleOnBlur" ShrinkLabel="@(HasValue(Value) || _isOpen || ShrinkLabel)">
MaxLength="@MaxLength" @attributes="UserAttributes" OnBlur="@HandleOnBlur" ShrinkLabel="@(HasValue(Value) || AdornmentStart != null || _isOpen || ShrinkLabel)">

<AdornmentStart>
@AdornmentStart
</AdornmentStart>

<AdornmentEnd>
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
@if (AdornmentEnd != null)
{
@AdornmentEnd
}
else
{
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
}
</AdornmentEnd>

<DataVisualiser>
<div style="flex-basis: content; flex-grow: 0">
@if (!HasValue(Value) && !string.IsNullOrWhiteSpace(Placeholder))
{
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="Typo.body1" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
}
else if (InputPresenter == ValuePresenter.Chip)
{
Expand All @@ -59,7 +70,7 @@
{
if (SelectedValues is null)
{
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="Typo.body1" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>

}
else if (ItemTemplate is not null)
Expand All @@ -70,7 +81,7 @@
}
else if (!string.IsNullOrWhiteSpace(Placeholder))
{
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="Typo.body1" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
}
}
else if (Items.FirstOrDefault(x => x?.Value?.Equals(Value) == true)?.ChildContent is not null)
Expand Down Expand Up @@ -101,7 +112,7 @@
<div class="@TemplateClass">
@if (!HasValue(Value) && !string.IsNullOrWhiteSpace(Placeholder))
{
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="Typo.body1" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
}
</div>
</ChildContent>
Expand Down
2 changes: 1 addition & 1 deletion CodeBeam.MudBlazor.Extensions/Components/InputExtended/MudInputExtended.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ public partial class MudInputExtended<T> : MudBaseInputExtended<T>
///
/// </summary>
protected string? Classname => MudInputCssHelperExtended.GetClassname(this,
() => HasNativeHtmlPlaceholder() || ShrinkLabel == true || !string.IsNullOrEmpty(Text) || AdornmentStart != null || !string.IsNullOrWhiteSpace(Placeholder) || !string.IsNullOrEmpty(Converter.Set(Value)));
() => HasNativeHtmlPlaceholder() || ShrinkLabel == true || !string.IsNullOrEmpty(Text) || !string.IsNullOrWhiteSpace(Placeholder) || !string.IsNullOrEmpty(Converter.Set(Value)));

/// <summary>
///
Expand Down
27 changes: 19 additions & 8 deletions CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,25 +15,36 @@
Value="@(Strict && !IsValueInList ? null : Text)" Underline="@Underline"
Disabled="@GetDisabledState()" ReadOnly="true" Error="@Error" ErrorId="@ErrorId"
Clearable="@Clearable" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
@attributes="UserAttributes" OnBlur="@OnLostFocus" ShrinkLabel="@ShrinkLabel" Typo="@Typo"
@attributes="UserAttributes" OnBlur="@OnLostFocus" ShrinkLabel="@(AdornmentStart != null || ShrinkLabel)" Typo="@Typo"
ShowVisualiser="true" DataVisualiserStyle="min-height: 1.1876em; padding-right: 0px;">

<AdornmentStart>
@AdornmentStart
</AdornmentStart>

<AdornmentEnd>
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
@if (AdornmentEnd != null)
{
@AdornmentEnd
}
else
{
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
}
</AdornmentEnd>

<DataVisualiser>
<div class="@TemplateClass" style="overflow: hidden; text-overflow: ellipsis;">
@if (Strict && !IsValueInList)
{
//Show nothing
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
}
@if (ValuePresenter == ValuePresenter.Text)
{
if (string.IsNullOrEmpty(Text))
{
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
}

<MudRender>@GetSelectTextPresenter()</MudRender>
Expand All @@ -42,7 +53,7 @@
{
if (SelectedValues == null || !SelectedValues.Any())
{
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
}
<MudChipSet T="T" Class="d-flex flex-wrap mud-width-full" Style="row-gap: 4px" AllClosable="ChipCloseable" OnClose="ChipClosed">
@if (ItemCollection != null)
Expand All @@ -65,7 +76,7 @@
{
if (SelectedListItem == null)
{
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>

}
else if (ItemTemplate != null)
Expand All @@ -76,7 +87,7 @@
}
else if (!string.IsNullOrEmpty(Placeholder))
{
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
}
}
else if (SelectedListItem.ChildContent != null)
Expand All @@ -87,7 +98,7 @@
{
@if (string.IsNullOrEmpty(Text))
{
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
}

<MudRender>@GetSelectTextPresenter()</MudRender>
Expand Down
23 changes: 12 additions & 11 deletions CodeBeam.MudBlazor.Extensions/Components/TextFieldExtended/MudTextFieldExtended.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,23 +55,24 @@
OnClearButtonClick="@OnClearButtonClick"
Pattern="@Pattern"
AutoSize="AutoSize"
ShrinkLabel="@ShrinkLabel"
ShrinkLabel="@(AdornmentStart!= null || ShrinkLabel)"
Typo="@Typo"
ShowVisualiser="@(DataVisualiser != null && ShowVisualiser)"
DataVisualiserStyle="@(DataVisualiser != null ? "min-height: 1.1876em" : null)">
<DataVisualiser>
@DataVisualiser
</DataVisualiser>

<AdornmentStart>
@AdornmentStart
</AdornmentStart>
<DataVisualiser>
@DataVisualiser
</DataVisualiser>

<AdornmentEnd>
@AdornmentEnd
</AdornmentEnd>
<AdornmentStart>
@AdornmentStart
</AdornmentStart>

</MudInputExtended>
<AdornmentEnd>
@AdornmentEnd
</AdornmentEnd>

</MudInputExtended>
}
else
{
Expand Down
4 changes: 4 additions & 0 deletions CodeBeam.MudBlazor.Extensions/Styles/Components/_inputextended.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
/*@import '../abstracts/variables';*/
$mud-palette-colors: primary, secondary, tertiary, info, success, warning, error, dark;

.mud-placeholder-extended {
line-height: unset;
}

.mud-input-adornment-start-extended {

&:not(.mud-input-text-extended) {
Expand Down
3 changes: 3 additions & 0 deletions CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -975,6 +975,9 @@
padding-bottom: 18px; }

/*@import '../abstracts/variables';*/
.mud-placeholder-extended {
line-height: unset; }

.mud-input-adornment-start-extended:not(.mud-input-text-extended) {
margin-inline-start: 12px; }

Expand Down
2 changes: 1 addition & 1 deletion CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.min.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion CodeBeam.MudBlazor.Extensions/wwwroot/MudExtensions.min.css
View file
Open in desktop

Large diffs are not rendered by default.

Loading