feat(components): apply data-slot attribute to all component parts (#…

…127) * feat(accordion): add `data-slot` attributes to all slots of the component(s) * feat(card): add `data-slot` attribute to all slots of the component(s) * feat(checkbox): add `data-slot` attribute to all slots of the component * feat(checkbox-group): add `data-slot` attribute to all slots of the component * feat(navbar): add `data-slot` attribute to all slots of the component * feat(radio-group): add `data-slot` attribute to all slots of the components * feat(switch): add `data-slot` attribute to all slots of the component
LumexUI · Dec 29, 2024 · f1ae82e · f1ae82e
1 parent 8a103db
commit f1ae82e
Show file tree

Hide file tree

Showing 17 changed files with 77 additions and 36 deletions.
diff --git a/src/LumexUI/Components/Accordion/LumexAccordionItem.razor b/src/LumexUI/Components/Accordion/LumexAccordionItem.razor
@@ -48,7 +48,9 @@
             </div>
             @if( Context.Owner.ShowIndicators )
             {
-                <span class="@IndicatorClass" data-opened="@_expanded">
+                <span class="@IndicatorClass" 
+                      data-slot="indicator" 
+                      data-opened="@_expanded">
                     <LumexIcon Icon="@Indicator(_expanded)" />
                 </span>
             }

diff --git a/src/LumexUI/Components/Card/LumexCard.razor b/src/LumexUI/Components/Card/LumexCard.razor
@@ -4,8 +4,8 @@
 <CascadingValue TValue="CardContext" Value="@_context" IsFixed="@true">
     <LumexComponent Class="@RootClass"
                     Style="@RootStyle"
-                    @attributes="@AdditionalAttributes"
-                    data-slot="root">
+                    data-slot="base"
+                    @attributes="@AdditionalAttributes">
         @ChildContent
     </LumexComponent>
 </CascadingValue>
diff --git a/src/LumexUI/Components/Card/LumexCardBody.razor b/src/LumexUI/Components/Card/LumexCardBody.razor
@@ -3,7 +3,7 @@
 
 <LumexComponent Class="@RootClass"
                 Style="@RootStyle"
-                @attributes="@AdditionalAttributes"
-                data-slot="body">
+                data-slot="body"
+                @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexComponent>
diff --git a/src/LumexUI/Components/Card/LumexCardFooter.razor b/src/LumexUI/Components/Card/LumexCardFooter.razor
@@ -3,7 +3,7 @@
 
 <LumexComponent Class="@RootClass"
                 Style="@RootStyle"
-                @attributes="@AdditionalAttributes"
-                data-slot="footer">
+                data-slot="footer"
+                @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexComponent>
diff --git a/src/LumexUI/Components/Card/LumexCardHeader.razor b/src/LumexUI/Components/Card/LumexCardHeader.razor
@@ -3,7 +3,7 @@
 
 <LumexComponent Class="@RootClass"
                 Style="@RootStyle"
-                @attributes="@AdditionalAttributes"
-                data-slot="header">
+                data-slot="header"
+                @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexComponent>
diff --git a/src/LumexUI/Components/Checkbox/LumexCheckbox.razor b/src/LumexUI/Components/Checkbox/LumexCheckbox.razor
@@ -4,13 +4,14 @@
 <LumexComponent As="label"
                 Class="@RootClass"
                 Style="@RootStyle"
+                tabindex="0"
+                data-slot="base"
                 data-checked="@CurrentValue.ToAttributeValue()"
                 data-disabled="@GetDisabledState().ToAttributeValue()"
                 data-readonly="@GetReadOnlyState().ToAttributeValue()"
-                tabindex="0"
                 @attributes="@AdditionalAttributes"
                 @onclick:stopPropagation="@true">
-    <span class="@WrapperClass">
+    <span class="@WrapperClass" data-slot="wrapper">
         <span class="@StyleUtils.VisuallyHidden">
             <input type="checkbox"
                    value="@true"
@@ -21,7 +22,9 @@
 
         @if( !string.IsNullOrEmpty( CheckIcon ) )
         {
-            <LumexIcon Icon="@CheckIcon" Class="@IconClass" />
+            <LumexIcon Icon="@CheckIcon" 
+                       Class="@IconClass" 
+                       data-slot="icon" />
         }
         else
         {
@@ -31,7 +34,7 @@
 
     @if( ChildContent is not null )
     {
-        <span class="@LabelClass">
+        <span class="@LabelClass" data-slot="label">
             @ChildContent
         </span>
     }
@@ -44,7 +47,9 @@
             .Add( "transition", "stroke-dashoffset 0.2s linear 0.15s", when: CurrentValue )
             .ToString();
 
-        <svg class="@IconClass" viewBox="0 0 17 18">
+        <svg class="@IconClass" 
+             viewBox="0 0 17 18" 
+             data-slot="icon">
             <polyline fill="none"
                       points="1 9 7 14 15 4"
                       stroke="currentColor"

diff --git a/src/LumexUI/Components/Checkbox/LumexCheckboxGroup.razor b/src/LumexUI/Components/Checkbox/LumexCheckboxGroup.razor
@@ -2,19 +2,26 @@
 @inherits LumexComponentBase
 
 <CascadingValue TValue="CheckboxGroupContext" Value="@_context" IsFixed="@true">
-    <div class="@RootClass" style="@RootStyle" @attributes="@AdditionalAttributes">
+    <div class="@RootClass" 
+         style="@RootStyle" 
+         data-slot="base"
+         @attributes="@AdditionalAttributes">
         @if( !string.IsNullOrEmpty( Label ) )
         {
-            <span class="@LabelClass">@Label</span>
+            <span class="@LabelClass" data-slot="label">
+                @Label
+            </span>
         }
 
-        <div class="@WrapperClass">
+        <div class="@WrapperClass" data-slot="wrapper">
             @ChildContent
         </div>
 
         @if( !string.IsNullOrEmpty( Description ) )
         {
-            <div class="@DescriptionClass">@Description</div>
+            <div class="@DescriptionClass" data-slot="description">
+                @Description
+            </div>
         }
     </div>
 </CascadingValue>
diff --git a/src/LumexUI/Components/Navbar/LumexNavbar.razor b/src/LumexUI/Components/Navbar/LumexNavbar.razor
@@ -5,8 +5,9 @@
     <LumexComponent As="@As"
                     Class="@RootClass"
                     Style="@RootStyle"
+                    data-slot="base"
                     @attributes="@AdditionalAttributes">
-        <nav class="@WrapperClass">
+        <nav class="@WrapperClass" data-slot="wrapper">
             @ChildContent
         </nav>
     </LumexComponent>

diff --git a/src/LumexUI/Components/Navbar/LumexNavbarBrand.razor b/src/LumexUI/Components/Navbar/LumexNavbarBrand.razor
@@ -4,6 +4,7 @@
 <LumexComponent As="@As"
                 Class="@RootClass"
                 Style="@RootStyle"
+                data-slot="brand"
                 @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexComponent>
diff --git a/src/LumexUI/Components/Navbar/LumexNavbarContent.razor b/src/LumexUI/Components/Navbar/LumexNavbarContent.razor
@@ -4,6 +4,7 @@
 <LumexComponent As="@As"
                 Class="@RootClass"
                 Style="@RootStyle"
+                data-slot="content"
                 @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexComponent>
diff --git a/src/LumexUI/Components/Navbar/LumexNavbarItem.razor b/src/LumexUI/Components/Navbar/LumexNavbarItem.razor
@@ -4,6 +4,7 @@
 <LumexComponent As="@As"
                 Class="@RootClass"
                 Style="@RootStyle"
+                data-slot="item"
                 @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexComponent>
diff --git a/src/LumexUI/Components/Navbar/LumexNavbarMenu.razor b/src/LumexUI/Components/Navbar/LumexNavbarMenu.razor
@@ -5,6 +5,7 @@
                Class="@RootClass"
                Style="@RootStyle"
                Expanded="@Expanded"
+               data-slot="menu"
                @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexCollapse>
diff --git a/src/LumexUI/Components/Navbar/LumexNavbarMenuItem.razor b/src/LumexUI/Components/Navbar/LumexNavbarMenuItem.razor
@@ -4,6 +4,7 @@
 <LumexComponent As="@As"
                 Class="@RootClass"
                 Style="@RootStyle"
+                data-slot="menu-item"
                 @attributes="@AdditionalAttributes">
     @ChildContent
 </LumexComponent>
diff --git a/src/LumexUI/Components/Navbar/LumexNavbarMenuToggle.razor b/src/LumexUI/Components/Navbar/LumexNavbarMenuToggle.razor
@@ -5,6 +5,7 @@
                 Class="@RootClass"
                 Style="@RootStyle"
                 type="button"
+                data-slot="toggle-icon"
                 data-expanded="@Context.Menu?.Expanded"
                 @attributes="@AdditionalAttributes"
                 @onclick="@Toggle">

diff --git a/src/LumexUI/Components/Radio/LumexRadio.razor b/src/LumexUI/Components/Radio/LumexRadio.razor
@@ -5,10 +5,11 @@
 <LumexComponent As="label"
                 Class="@RootClass"
                 Style="@RootStyle"
+                tabindex="0"
+                data-slot="base"
                 data-selected="@GetSelectedState().ToAttributeValue()"
                 data-disabled="@GetDisabledState().ToAttributeValue()"
                 data-readonly="@GetReadOnlyState().ToAttributeValue()"
-                tabindex="0"
                 @attributes="@AdditionalAttributes"
                 @onclick:stopPropagation="@true">
     <span class="@StyleUtils.VisuallyHidden">
@@ -20,21 +21,21 @@
                @onchange="@Context.ChangeEventCallback" />
     </span>
 
-    <span class="@ControlWrapperClass">
-        <span class="@ControlClass" data-slot="control"></span>
+    <span class="@ControlWrapperClass" data-slot="wrapper">
+        <span class="@ControlClass" data-slot="control" />
     </span>
 
-    <div class="@LabelWrapperClass">
+    <div class="@LabelWrapperClass" data-slot="label-wrapper">
         @if (ChildContent is not null)
         {
-            <span class="@LabelClass">
+            <span class="@LabelClass" data-slot="label">
                 @ChildContent
             </span>
         }
 
         @if (Description is not null)
         {
-            <span class="@DescriptionClass">
+            <span class="@DescriptionClass" data-slot="description">
                 @Description
             </span>
         }

diff --git a/src/LumexUI/Components/Radio/LumexRadioGroup.razor b/src/LumexUI/Components/Radio/LumexRadioGroup.razor
@@ -7,19 +7,28 @@ Note that we must not set IsFixed=true on the CascadingValue, because the mutati
 are what cause the descendant InputRadio components to re-render themselves
 *@
 <CascadingValue Value="@_context" Name="Context" TValue="RadioGroupContext<TValue>">
-    <div class="@RootClass" style="@RootStyle" @attributes="@AdditionalAttributes">
+    <div class="@RootClass" 
+         style="@RootStyle" 
+         data-slot="base" 
+         @attributes="@AdditionalAttributes">
         @if( !string.IsNullOrEmpty( Label ) )
         {
-            <span class="@LabelClass">@Label</span>
+            <span class="@LabelClass" data-slot="label">
+                @Label
+            </span>
         }
 
-        <div class="@WrapperClass" data-orientation="@(Orientation.ToString().ToLowerInvariant())">
+        <div class="@WrapperClass" 
+             data-slot="wrapper" 
+             data-orientation="@Orientation.ToString().ToLowerInvariant()">
             @ChildContent
         </div>
 
         @if( !string.IsNullOrEmpty( Description ) )
         {
-            <div class="@DescriptionClass">@Description</div>
+            <div class="@DescriptionClass" data-slot="description">
+                @Description
+            </div>
         }
     </div>
 </CascadingValue>
diff --git a/src/LumexUI/Components/Switch/LumexSwitch.razor b/src/LumexUI/Components/Switch/LumexSwitch.razor
@@ -4,10 +4,11 @@
 <LumexComponent As="label"
                 Class="@RootClass"
                 Style="@RootStyle"
+                tabindex="0"
+                data-slot="base"
                 data-checked="@CurrentValue.ToAttributeValue()"
                 data-disabled="@GetDisabledState().ToAttributeValue()"
                 data-readonly="@GetReadOnlyState().ToAttributeValue()"
-                tabindex="0"
                 @attributes="@AdditionalAttributes">
     <span class="@StyleUtils.VisuallyHidden">
         <input type="checkbox"
@@ -17,31 +18,40 @@
                @onchange="@OnChangeAsync" />
     </span>
 
-    <span class="@WrapperClass">
+    <span class="@WrapperClass" data-slot="wrapper">
         @if( !string.IsNullOrEmpty( StartIcon ) )
         {
-            <LumexIcon Icon="@StartIcon" Size="@(new("1em"))" Class="@StartIconClass" />
+            <LumexIcon Icon="@StartIcon" 
+                       Size="@(new("1em"))" 
+                       Class="@StartIconClass" 
+                       data-slot="start-icon" />
         }
 
-        <span class="@ThumbClass">
+        <span class="@ThumbClass" data-slot="thumb">
             @{
                 var thumbIcon = ThumbIcon?.Invoke( CurrentValue );
                 if( !string.IsNullOrEmpty( thumbIcon ) )
                 {
-                    <LumexIcon Icon="@thumbIcon" Size="@(new("100%"))" Class="@ThumbIconClass" />
+                    <LumexIcon Icon="@thumbIcon" 
+                               Size="@(new("100%"))" 
+                               Class="@ThumbIconClass"
+                               data-slot="thumb-icon" />
                 }
             }
         </span>
 
         @if( !string.IsNullOrEmpty( EndIcon ) )
         {
-            <LumexIcon Icon="@EndIcon" Size="@(new("1em"))" Class="@EndIconClass" />
+            <LumexIcon Icon="@EndIcon" 
+                       Size="@(new("1em"))" 
+                       Class="@EndIconClass" 
+                       data-slot="end-icon" />
         }
     </span>
 
     @if( ChildContent is not null )
     {
-        <span class="@LabelClass">
+        <span class="@LabelClass" data-slot="label">
             @ChildContent
         </span>
     }