MudSelect: Allow setting Class on various internal elements (MudBlazo…

…r#7596) * MudSelect: Arrange Classes Co-authored-by: mckaragoz [email protected] Co-authored-by: pupper9 [email protected]
Yomodo · Oct 21, 2023 · ebbc58e · ebbc58e
1 parent 04703e6
commit ebbc58e
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 2 deletions.
diff --git a/src/MudBlazor.UnitTests/Components/SelectTests.cs b/src/MudBlazor.UnitTests/Components/SelectTests.cs
@@ -30,6 +30,18 @@ public async Task SelectTest_CheckListClass()
             comp.WaitForAssertion(() => comp.Markup.Should().Contain("my-list-class"));
         }
 
+        [Test]
+        public async Task SelectTest_CheckLayerClass()
+        {
+            var comp = Context.RenderComponent<MudSelect<string>>();
+            await comp.InvokeAsync(() => comp.SetParam("OuterClass", "my-outer-class"));
+            await comp.InvokeAsync(() => comp.SetParam("Class", "my-main-class"));
+            await comp.InvokeAsync(() => comp.SetParam("InputClass", "my-input-class"));
+            comp.WaitForAssertion(() => comp.Markup.Should().Contain("my-outer-class"));
+            comp.WaitForAssertion(() => comp.Markup.Should().Contain("my-main-class"));
+            comp.WaitForAssertion(() => comp.Markup.Should().Contain("my-input-class"));
+        }
+
         /// <summary>
         /// Select id should propagate to label for attribute
         /// </summary>

diff --git a/src/MudBlazor/Components/Select/MudSelect.razor b/src/MudBlazor/Components/Select/MudSelect.razor
@@ -3,12 +3,12 @@
 @inherits MudBaseInput<T>
 
 <CascadingValue Name="SubscribeToParentForm" Value="false" IsFixed="true">
-    <div class="mud-select" id="@_elementId" @onfocusout="@OnFocusOutAsync">
+    <div class="@OuterClassname" id="@_elementId" @onfocusout="@OnFocusOutAsync">
 		<MudInputControl Label="@Label" Variant="@Variant" HelperText="@HelperText" HelperTextOnFocus="@HelperTextOnFocus" FullWidth="@FullWidth" Margin="@Margin" Class="@Classname" Style="@Style"
 						 Error="@Error" ErrorText="@ErrorText" ErrorId="@ErrorId" Disabled="@GetDisabledState()" @onclick="@ToggleMenu" Required="@Required" ForId="@FieldId">
 			<InputContent>
                 <MudInput @ref="_elementReference" InputType="@(CanRenderValue || (Strict && !IsValueInList) ? InputType.Hidden : InputType.Text)"
-                          Class="mud-select-input" Margin="@Margin" Placeholder="@Placeholder"
+                          Class="@InputClassname" Margin="@Margin" Placeholder="@Placeholder"
                           Variant="@Variant"
                           TextUpdateSuppression="false"
                           Value="@(Strict && !IsValueInList ? null : Text)" DisableUnderLine="@DisableUnderLine"

diff --git a/src/MudBlazor/Components/Select/MudSelect.razor.cs b/src/MudBlazor/Components/Select/MudSelect.razor.cs
@@ -24,11 +24,21 @@ public partial class MudSelect<T> : MudBaseInput<T>, IMudSelect, IMudShadowSelec
         private bool? _selectAllChecked;
         private IKeyInterceptor _keyInterceptor;
 
+        protected string OuterClassname =>
+            new CssBuilder("mud-select")
+            .AddClass(OuterClass)
+            .Build();
+
         protected string Classname =>
             new CssBuilder("mud-select")
             .AddClass(Class)
             .Build();
 
+        protected string InputClassname =>
+            new CssBuilder("mud-select-input")
+            .AddClass(InputClass)
+            .Build();
+
         [Inject] private IKeyInterceptorFactory KeyInterceptorFactory { get; set; }
         [Inject] IScrollManager ScrollManager { get; set; }
 
@@ -136,6 +146,18 @@ private async Task SelectLastItem()
             await ScrollToItemAsync(item);
         }
 
+        /// <summary>
+        /// The outer div's classnames, seperated by space.
+        /// </summary>
+        [Category(CategoryTypes.FormComponent.Appearance)]
+        [Parameter] public string OuterClass { get; set; }
+
+        /// <summary>
+        /// Input's classnames, seperated by space.
+        /// </summary>
+        [Category(CategoryTypes.FormComponent.Appearance)]
+        [Parameter] public string InputClass { get; set; }
+
         /// <summary>
         /// Fired when dropdown opens.
         /// </summary>