From ebbc58ea893206a3050f400f13699f0a7a8b9769 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mehmet=20Can=20Karag=C3=B6z?=
 <78308169+mckaragoz@users.noreply.github.com>
Date: Sat, 21 Oct 2023 18:05:32 +0300
Subject: [PATCH] MudSelect: Allow setting Class on various internal elements
 (#7596)

* MudSelect: Arrange Classes

Co-authored-by: mckaragoz 78308169+mckaragoz@users.noreply.github.com
Co-authored-by: pupper9 81972128+pupper9@users.noreply.github.com
---
 .../Components/SelectTests.cs                 | 12 ++++++++++
 .../Components/Select/MudSelect.razor         |  4 ++--
 .../Components/Select/MudSelect.razor.cs      | 22 +++++++++++++++++++
 3 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/src/MudBlazor.UnitTests/Components/SelectTests.cs b/src/MudBlazor.UnitTests/Components/SelectTests.cs
index 4d3d33011876..4a0f7e839866 100644
--- 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
index 52f351716847..168ea13c6e00 100644
--- 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
index 3e887b5876bb..80ebc3eca4a3 100644
--- 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>