Skip to content

Inputs: Fix Adornment Margin #539

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
Jun 8, 2025
Merged

Inputs: Fix Adornment Margin #539

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
5 changes: 5 additions & 0 deletions CodeBeam.MudBlazor.Extensions.Docs.Wasm/wwwroot/CodeBeam.MudBlazor.Extensions.xml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

16 changes: 16 additions & 0 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 @@ -28,6 +28,21 @@
<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>
<MudSelectExtended @bind-Value="@_testValue" ItemCollection="@_states" Label="Adornment Test" Variant="Variant.Text" Clearable />
<MudSelectExtended @bind-Value="@_testValue" ItemCollection="@_states" Label="Adornment Test" Variant="Variant.Outlined" Clearable />
<MudSelectExtended @bind-Value="@_testValue" ItemCollection="@_states" Label="Adornment Test" Variant="Variant.Filled" Clearable />
<MudSelectExtended @bind-Value="@_testValue" ItemCollection="@_states" Label="Adornment Test" Variant="Variant.Text" Clearable>
<AdornmentStart>abc</AdornmentStart>
</MudSelectExtended>
<MudSelectExtended @bind-Value="@_testValue" ItemCollection="@_states" Label="Adornment Test" Variant="Variant.Outlined" Clearable>
<AdornmentStart>abc</AdornmentStart>
</MudSelectExtended>
<MudSelectExtended @bind-Value="@_testValue" ItemCollection="@_states" Label="Adornment Test" Variant="Variant.Filled" Clearable>
<AdornmentStart>abc</AdornmentStart>
</MudSelectExtended>
</MudStack>

<MudStack>
<MudSwitchM3 @bind-Value="_dense" Label="Dense" />
<MudSwitchM3 @bind-Value="_margin" Label="Margin" />
Expand All @@ -48,6 +63,7 @@
private bool _label = true;
private bool _placeholder;
private Variant _variant;
private string? _testValue;

private string[] _states =
{
Expand Down
6 changes: 6 additions & 0 deletions CodeBeam.MudBlazor.Extensions/Base/MudBaseInputExtended.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,12 @@ protected MudBaseInputExtended() : base(new DefaultConverter<T>()) { }
[Category(CategoryTypes.FormComponent.Appearance)]
public bool Underline { get; set; } = true;

/// <summary>
/// Gets or sets a value indicating whether the component has an adornment at the start.
/// </summary>
[Parameter]
public bool HasAdornmentStart { get; set; }

/// <summary>
/// The HelperText will be displayed below the text field.
/// </summary>
Expand Down
1 change: 1 addition & 0 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 @@ -21,6 +21,7 @@
ShowVisualiser="@((MultiSelection && SelectedValues?.Any() == true) || !Editable)" DataVisualiserStyle="min-height: 1.1876em"
@bind-Value="@_searchString" Typo="@Typo"
Underline="@Underline"
HasAdornmentStart="@((AdornmentStart != null))"
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) || AdornmentStart != null || _isOpen || ShrinkLabel)">
Expand Down
1 change: 1 addition & 0 deletions CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
/// </summary>
protected string InputClassname =>
new CssBuilder("mud-select-input-extended")
.AddClass("mud-no-start-adornment", AdornmentStart == null)
.AddClass(InputClass)
.Build();

Expand Down Expand Up @@ -554,7 +555,7 @@
return;
_comparer = value;
// Apply comparer and refresh selected values
_selectedValues = new HashSet<T?>(_selectedValues, _comparer);

Check warning on line 558 in CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Possible null reference argument for parameter 'collection' in 'HashSet<T?>.HashSet(IEnumerable<T?> collection, IEqualityComparer<T?>? comparer)'.
SelectedValues = _selectedValues;
}
}
Expand All @@ -573,7 +574,7 @@
if (_toStringFunc == value)
return;
_toStringFunc = value;
Converter = new Converter<T?>

Check warning on line 577 in CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Nullability of reference types in value of type 'Converter<T?>' doesn't match target type 'Converter<T, string>'.
{
SetFunc = _toStringFunc ?? (x => x?.ToString()),
};
Expand Down Expand Up @@ -614,7 +615,7 @@

_selectedValues = new HashSet<T?>(set, _comparer);

SelectedValuesChanged.InvokeAsync(new HashSet<T?>(SelectedValues, _comparer)).CatchAndLog();

Check warning on line 618 in CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Possible null reference argument for parameter 'collection' in 'HashSet<T?>.HashSet(IEnumerable<T?> collection, IEqualityComparer<T?>? comparer)'.
ForceUpdateItems().CatchAndLog();
//Console.WriteLine("SelectedValues setter ended");
}
Expand Down Expand Up @@ -797,7 +798,7 @@
{
DeselectAllItems();
if (Value is not null)
Items.FirstOrDefault(x => x.Value?.Equals(Value) == true).Selected = true;

Check warning on line 801 in CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Dereference of a possibly null reference.
}
}
if ((Value == null && _oldValue != null) || (Value != null && Value.Equals(_oldValue) == false))
Expand All @@ -808,7 +809,7 @@
_searchString = Converter.Set(Value);
if (_inputReference != null)
{
await _inputReference?.SetText(_searchString);

Check warning on line 812 in CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

View workflow job for this annotation

GitHub Actions / build 

Dereference of a possibly null reference.
}
}
}
Expand Down
2 changes: 1 addition & 1 deletion CodeBeam.MudBlazor.Extensions/Components/InputExtended/MudInputCssHelperExtended.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ public static string GetInputClassname<T>(MudBaseInputExtended<T> baseInput) =>
.AddClass($"mud-input-root-{baseInput.Variant.ToDescriptionString()}")
//.AddClass($"mud-input-root-adorned-{baseInput.Adornment.ToDescriptionString()}", baseInput.Adornment != Adornment.None)
.AddClass($"mud-input-root-margin-{baseInput.Margin.ToDescriptionString()}", when: () => baseInput.Margin != Margin.None)
.AddClass("ms-4", baseInput.AdornmentStart != null && baseInput.Variant == Variant.Text)
.AddClass("ms-4", baseInput.HasAdornmentStart == true && baseInput.Variant == Variant.Text)
.AddClass(baseInput.Class)
.Build();

Expand Down
2 changes: 1 addition & 1 deletion CodeBeam.MudBlazor.Extensions/Components/InputExtended/MudInputExtended.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

<div class="@Classname" style="@Style">

@if (AdornmentStart != null)
@if (HasAdornmentStart == true)
{
<div class="@AdornmentStartClassname">
@AdornmentStart
Expand Down
1 change: 1 addition & 0 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 @@ -11,6 +11,7 @@
<MudInputExtended @ref="_elementReference" InputType="InputType.Hidden" Label="@Label"
Class="@InputClassname" Style="@InputStyle" Margin="@Margin" Placeholder="@Placeholder"
Variant="@Variant"
HasAdornmentStart="@((AdornmentStart != null))"
TextUpdateSuppression="false"
Value="@(Strict && !IsValueInList ? null : Text)" Underline="@Underline"
Disabled="@GetDisabledState()" ReadOnly="true" Error="@Error" ErrorId="@ErrorId"
Expand Down
1 change: 1 addition & 0 deletions CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,11 +42,11 @@
/// <summary>
///
/// </summary>
protected Dictionary<T, MudSelectItemExtended<T?>> _valueLookup = new();

Check warning on line 45 in CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs

View workflow job for this annotation

GitHub Actions / build 

The type 'T' cannot be used as type parameter 'TKey' in the generic type or method 'Dictionary<TKey, TValue>'. Nullability of type argument 'T' doesn't match 'notnull' constraint.
/// <summary>
///
/// </summary>
protected Dictionary<T, MudSelectItemExtended<T?>> _shadowLookup = new();

Check warning on line 49 in CodeBeam.MudBlazor.Extensions/Components/SelectExtended/MudSelectExtended.razor.cs

View workflow job for this annotation

GitHub Actions / build 

The type 'T' cannot be used as type parameter 'TKey' in the generic type or method 'Dictionary<TKey, TValue>'. Nullability of type argument 'T' doesn't match 'notnull' constraint.
private MudInputExtended<string> _elementReference = new();
internal bool _isOpen;
/// <summary>
Expand All @@ -69,6 +69,7 @@
protected string? InputClassname =>
new CssBuilder("mud-select-input-extended")
.AddClass("mud-select-extended-nowrap", NoWrap)
.AddClass("mud-no-start-adornment", AdornmentStart == null)
.AddClass(InputClass)
.Build();

Expand Down
1 change: 1 addition & 0 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 @@ -30,6 +30,7 @@
Lines="@Lines"
Style="@Style"
Variant="@Variant"
HasAdornmentStart="@((AdornmentStart != null))"
TextUpdateSuppression="@TextUpdateSuppression"
Value="@Text"
ValueChanged="(s) => SetTextAsync(s)"
Expand Down
1 change: 1 addition & 0 deletions CodeBeam.MudBlazor.Extensions/Components/TextFieldExtended/MudTextFieldExtended.razor.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ public partial class MudTextFieldExtended<T> : MudDebouncedInputExtended<T>
/// </summary>
protected string? Classname =>
new CssBuilder("mud-input-input-control")
.AddClass("mud-no-start-adornment", AdornmentStart == null)
.AddClass(Class)
.Build();

Expand Down
6 changes: 5 additions & 1 deletion CodeBeam.MudBlazor.Extensions/Styles/Components/_inputextended.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,4 +21,8 @@ $mud-palette-colors: primary, secondary, tertiary, info, success, warning, error
&:not(.mud-input-text-extended) {
margin-inline-end: 12px;
}
}
}

.mud-no-start-adornment .mud-input-adornment-start-extended {
margin-inline-start: 0 !important;
}
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 @@ -998,3 +998,6 @@

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

.mud-no-start-adornment .mud-input-adornment-start-extended {
margin-inline-start: 0 !important; }
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