Skip to content

Commit be027d6

Browse files
mckaragozmckaragoz
authored
Input Components: Fix Height and Adornment Visuals (#531)
1 parent 7f01d38 commit be027d6

File tree

9 files changed

+95
-43
lines changed

9 files changed

+95
-43
lines changed

‎CodeBeam.MudBlazor.Extensions.Docs/Pages/VisualTest.razor‎

Lines changed: 37 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -2,36 +2,38 @@
22

33
<MudContainer Class="gap-4" MaxWidth="MaxWidth.Medium">
44
<MudStack Row="true">
5-
<MudSelect T="Color" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="Label" Clearable>
6-
@foreach (var item in Enum.GetValues<Color>())
5+
<MudSelect T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="@(_label ? "Select" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable>
6+
@foreach (var item in _states)
77
{
88
<MudSelectItem Value="@item">@item</MudSelectItem>
99
}
1010
</MudSelect>
11-
<MudSelectExtended T="Color" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="Label" Clearable>
12-
@foreach (var item in Enum.GetValues<Color>())
11+
<MudSelectExtended T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="@(_label ? "SelectExt" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable>
12+
@foreach (var item in _states)
1313
{
1414
<MudSelectItemExtended Value="@item">@item</MudSelectItemExtended>
1515
}
1616
</MudSelectExtended>
17-
</MudStack>
1817

19-
<MudStack Row="true">
20-
<MudTextField T="string" />
21-
<MudTextFieldExtended T="string" />
22-
</MudStack>
23-
<MudStack Row="true">
24-
<MudTextField T="string" Variant="Variant.Outlined" />
25-
<MudTextFieldExtended T="string" Variant="Variant.Outlined" />
18+
<MudComboBox T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Variant="@_variant" Label="@(_label ? "Combobox" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable>
19+
@foreach (var item in _states)
20+
{
21+
<MudComboBoxItem Value="@item">@item</MudComboBoxItem>
22+
}
23+
</MudComboBox>
2624
</MudStack>
25+
2726
<MudStack Row="true">
28-
<MudTextField T="string" Variant="Variant.Filled" />
29-
<MudTextFieldExtended T="string" Variant="Variant.Filled" />
27+
<MudTextField T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="@(_label ? "Text Field" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable />
28+
<MudTextFieldExtended T="string" Margin="@(_margin ? Margin.Dense : Margin.Normal)" Dense="@_dense" Variant="@_variant" Label="@(_label ? "Text Field Ext" : null)" Placeholder="@(_placeholder ? "Placeholder" : null)" Clearable />
3029
</MudStack>
30+
3131
<MudStack>
3232
<MudSwitchM3 @bind-Value="_dense" Label="Dense" />
3333
<MudSwitchM3 @bind-Value="_margin" Label="Margin" />
34-
<MudSelectExtended @bind-Value="_variant">
34+
<MudSwitchM3 @bind-Value="_label" Label="Label" />
35+
<MudSwitchM3 @bind-Value="_placeholder" Label="Placeholder" />
36+
<MudSelectExtended @bind-Value="_variant" Label="Variant" Variant="Variant.Outlined" Margin="Margin.Dense">
3537
@foreach (var item in Enum.GetValues<Variant>())
3638
{
3739
<MudSelectItemExtended Value="@item">@item</MudSelectItemExtended>
@@ -43,5 +45,25 @@
4345
@code {
4446
private bool _dense;
4547
private bool _margin;
48+
private bool _label = true;
49+
private bool _placeholder;
4650
private Variant _variant;
51+
52+
private string[] _states =
53+
{
54+
"Alabama", "Alaska", "American Samoa", "Arizona",
55+
"Arkansas", "California", "Colorado", "Connecticut",
56+
"Delaware", "District of Columbia", "Federated States of Micronesia",
57+
"Florida", "Georgia", "Guam", "Hawaii", "Idaho",
58+
"Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
59+
"Louisiana", "Maine", "Marshall Islands", "Maryland",
60+
"Massachusetts", "Michigan", "Minnesota", "Mississippi",
61+
"Missouri", "Montana", "Nebraska", "Nevada",
62+
"New Hampshire", "New Jersey", "New Mexico", "New York",
63+
"North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
64+
"Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
65+
"Rhode Island", "South Carolina", "South Dakota", "Tennessee",
66+
"Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
67+
"Washington", "West Virginia", "Wisconsin", "Wyoming",
68+
};
4769
}

‎CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor‎

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -23,17 +23,28 @@
2323
Underline="@Underline"
2424
Disabled="@GetDisabledState()" ReadOnly="@GetReadOnlyState()" Error="@Error" ErrorId="@ErrorId"
2525
Clearable="@Clearable" ForceClearable="@(Clearable && HasValue(Value))" OnClearButtonClick="@ClearButtonClickHandlerAsync"
26-
MaxLength="@MaxLength" @attributes="UserAttributes" OnBlur="@HandleOnBlur" ShrinkLabel="@(HasValue(Value) || _isOpen || ShrinkLabel)">
26+
MaxLength="@MaxLength" @attributes="UserAttributes" OnBlur="@HandleOnBlur" ShrinkLabel="@(HasValue(Value) || AdornmentStart != null || _isOpen || ShrinkLabel)">
27+
28+
<AdornmentStart>
29+
@AdornmentStart
30+
</AdornmentStart>
2731

2832
<AdornmentEnd>
29-
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
33+
@if (AdornmentEnd != null)
34+
{
35+
@AdornmentEnd
36+
}
37+
else
38+
{
39+
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
40+
}
3041
</AdornmentEnd>
3142

3243
<DataVisualiser>
3344
<div style="flex-basis: content; flex-grow: 0">
3445
@if (!HasValue(Value) && !string.IsNullOrWhiteSpace(Placeholder))
3546
{
36-
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
47+
<MudText Typo="Typo.body1" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
3748
}
3849
else if (InputPresenter == ValuePresenter.Chip)
3950
{
@@ -59,7 +70,7 @@
5970
{
6071
if (SelectedValues is null)
6172
{
62-
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
73+
<MudText Typo="Typo.body1" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
6374

6475
}
6576
else if (ItemTemplate is not null)
@@ -70,7 +81,7 @@
7081
}
7182
else if (!string.IsNullOrWhiteSpace(Placeholder))
7283
{
73-
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
84+
<MudText Typo="Typo.body1" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
7485
}
7586
}
7687
else if (Items.FirstOrDefault(x => x?.Value?.Equals(Value) == true)?.ChildContent is not null)
@@ -101,7 +112,7 @@
101112
<div class="@TemplateClass">
102113
@if (!HasValue(Value) && !string.IsNullOrWhiteSpace(Placeholder))
103114
{
104-
<MudText Typo="Typo.body1" Class="mud-text-secondary">@Placeholder</MudText>
115+
<MudText Typo="Typo.body1" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
105116
}
106117
</div>
107118
</ChildContent>

‎CodeBeam.MudBlazor.Extensions/Components/InputExtended/MudInputExtended.razor.cs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ public partial class MudInputExtended<T> : MudBaseInputExtended<T>
1919
///
2020
/// </summary>
2121
protected string? Classname => MudInputCssHelperExtended.GetClassname(this,
22-
() => HasNativeHtmlPlaceholder() || ShrinkLabel == true || !string.IsNullOrEmpty(Text) || AdornmentStart != null || !string.IsNullOrWhiteSpace(Placeholder) || !string.IsNullOrEmpty(Converter.Set(Value)));
22+
() => HasNativeHtmlPlaceholder() || ShrinkLabel == true || !string.IsNullOrEmpty(Text) || !string.IsNullOrWhiteSpace(Placeholder) || !string.IsNullOrEmpty(Converter.Set(Value)));
2323

2424
/// <summary>
2525
///

‎CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -15,25 +15,36 @@
1515
Value="@(Strict && !IsValueInList ? null : Text)" Underline="@Underline"
1616
Disabled="@GetDisabledState()" ReadOnly="true" Error="@Error" ErrorId="@ErrorId"
1717
Clearable="@Clearable" OnClearButtonClick="(async (e) => await SelectClearButtonClickHandlerAsync(e))"
18-
@attributes="UserAttributes" OnBlur="@OnLostFocus" ShrinkLabel="@ShrinkLabel" Typo="@Typo"
18+
@attributes="UserAttributes" OnBlur="@OnLostFocus" ShrinkLabel="@(AdornmentStart != null || ShrinkLabel)" Typo="@Typo"
1919
ShowVisualiser="true" DataVisualiserStyle="min-height: 1.1876em; padding-right: 0px;">
2020

21+
<AdornmentStart>
22+
@AdornmentStart
23+
</AdornmentStart>
24+
2125
<AdornmentEnd>
22-
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
26+
@if (AdornmentEnd != null)
27+
{
28+
@AdornmentEnd
29+
}
30+
else
31+
{
32+
<MudIcon Icon="@_currentIcon" Color="@AdornmentColor" Size="@IconSize" @onclick="OnAdornmentClick" />
33+
}
2334
</AdornmentEnd>
2435

2536
<DataVisualiser>
2637
<div class="@TemplateClass" style="overflow: hidden; text-overflow: ellipsis;">
2738
@if (Strict && !IsValueInList)
2839
{
2940
//Show nothing
30-
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
41+
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
3142
}
3243
@if (ValuePresenter == ValuePresenter.Text)
3344
{
3445
if (string.IsNullOrEmpty(Text))
3546
{
36-
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
47+
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
3748
}
3849

3950
<MudRender>@GetSelectTextPresenter()</MudRender>
@@ -42,7 +53,7 @@
4253
{
4354
if (SelectedValues == null || !SelectedValues.Any())
4455
{
45-
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
56+
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
4657
}
4758
<MudChipSet T="T" Class="d-flex flex-wrap mud-width-full" Style="row-gap: 4px" AllClosable="ChipCloseable" OnClose="ChipClosed">
4859
@if (ItemCollection != null)
@@ -65,7 +76,7 @@
6576
{
6677
if (SelectedListItem == null)
6778
{
68-
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
79+
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
6980

7081
}
7182
else if (ItemTemplate != null)
@@ -76,7 +87,7 @@
7687
}
7788
else if (!string.IsNullOrEmpty(Placeholder))
7889
{
79-
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
90+
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
8091
}
8192
}
8293
else if (SelectedListItem.ChildContent != null)
@@ -87,7 +98,7 @@
8798
{
8899
@if (string.IsNullOrEmpty(Text))
89100
{
90-
<MudText Typo="@Typo" Class="mud-text-secondary">@Placeholder</MudText>
101+
<MudText Typo="@Typo" Class="mud-text-secondary mud-placeholder-extended">@Placeholder</MudText>
91102
}
92103

93104
<MudRender>@GetSelectTextPresenter()</MudRender>

‎CodeBeam.MudBlazor.Extensions/Components/TextFieldExtended/MudTextFieldExtended.razor‎

Lines changed: 12 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -55,23 +55,24 @@
5555
OnClearButtonClick="@OnClearButtonClick"
5656
Pattern="@Pattern"
5757
AutoSize="AutoSize"
58-
ShrinkLabel="@ShrinkLabel"
58+
ShrinkLabel="@(AdornmentStart!= null || ShrinkLabel)"
5959
Typo="@Typo"
6060
ShowVisualiser="@(DataVisualiser != null && ShowVisualiser)"
6161
DataVisualiserStyle="@(DataVisualiser != null ? "min-height: 1.1876em" : null)">
62-
<DataVisualiser>
63-
@DataVisualiser
64-
</DataVisualiser>
6562

66-
<AdornmentStart>
67-
@AdornmentStart
68-
</AdornmentStart>
63+
<DataVisualiser>
64+
@DataVisualiser
65+
</DataVisualiser>
6966

70-
<AdornmentEnd>
71-
@AdornmentEnd
72-
</AdornmentEnd>
67+
<AdornmentStart>
68+
@AdornmentStart
69+
</AdornmentStart>
7370

74-
</MudInputExtended>
71+
<AdornmentEnd>
72+
@AdornmentEnd
73+
</AdornmentEnd>
74+
75+
</MudInputExtended>
7576
}
7677
else
7778
{

‎CodeBeam.MudBlazor.Extensions/Styles/Components/_inputextended.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
/*@import '../abstracts/variables';*/
22
$mud-palette-colors: primary, secondary, tertiary, info, success, warning, error, dark;
33

4+
.mud-placeholder-extended {
5+
line-height: unset;
6+
}
7+
48
.mud-input-adornment-start-extended {
59

610
&:not(.mud-input-text-extended) {

‎CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -975,6 +975,9 @@
975975
padding-bottom: 18px; }
976976

977977
/*@import '../abstracts/variables';*/
978+
.mud-placeholder-extended {
979+
line-height: unset; }
980+
978981
.mud-input-adornment-start-extended:not(.mud-input-text-extended) {
979982
margin-inline-start: 12px; }
980983

‎CodeBeam.MudBlazor.Extensions/Styles/MudExtensions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎CodeBeam.MudBlazor.Extensions/wwwroot/MudExtensions.min.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)