Add option to "grey out" badges in header of stepper if step is incomplete (#209)

Author: jeffreyjsung

CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor

@@ -44,7 +44,8 @@
                                 }
                                 else
                                 {
-                                    <MudAvatar Style="@AvatarStylename" Color="@Color" Variant="@Variant" Size="@HeaderSize">
+                                    Color incompleteColor = (HeaderBadgeView == HeaderBadgeView.GreyOutIncomplete) && !active ? Color.Transparent : @Color;
+                                    <MudAvatar Style="@AvatarStylename" Color="@incompleteColor" Variant="@Variant" Size="@HeaderSize">
                                         <MudIcon Class="pa-1" Icon="@step.Icon" Size="@HeaderSize" />
                                     </MudAvatar>
                                 }

CodeBeam.MudBlazor.Extensions/Components/Stepper/MudStepper.razor.cs

@@ -204,6 +204,12 @@ internal int ActiveIndex
         /// </summary>
         [Parameter]
         public Variant Variant { get; set; }
+        
+        /// <summary>
+        /// Choose header badge view. Default is all.
+        /// </summary>
+        [Parameter]
+        public HeaderBadgeView HeaderBadgeView { get; set; } = HeaderBadgeView.All;
 
         /// <summary>
         /// Choose header text view. Default is all.

CodeBeam.MudBlazor.Extensions/Enums/HeaderBadgeView.cs

@@ -0,0 +1,12 @@
+using System.ComponentModel;
+
+namespace MudExtensions.Enums
+{
+    public enum HeaderBadgeView
+    {
+        [Description("grey-out-incomplete")]
+        GreyOutIncomplete,
+        [Description("all")]
+        All,
+    }
+}

ComponentViewer.Docs/Pages/Examples/StepperExample1.razor

@@ -7,9 +7,9 @@
     <MudItem xs="12" sm="8" Class="d-flex align-center">
         <MudStepper @ref="_stepper" Class="mud-width-full" ContentStyle="min-height: 400px" Linear="_linear" Vertical="_vertical" Color="_color" Variant="_variant"
                     DisableAnimation="_disableAnimation" DisablePreviousButton="_disablePreviousButton" DisableNextButton="_disableNextButton" 
-                    DisableSkipButton="_disableSkipButton" DisableStepResultIndicator="_disableStepResultIndicator" HeaderTextView="_headerTextView"
-                    PreventStepChangeAsync="new Func<StepChangeDirection, Task<bool>>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
-                    MobileView="_mobileView" IconActionButtons="_iconActionButtons" Loading="_loading" HeaderSize="_headerSize">
+                    DisableSkipButton="_disableSkipButton" DisableStepResultIndicator="_disableStepResultIndicator" HeaderBadgeView="_headerBadgeView" 
+                    HeaderTextView="_headerTextView" PreventStepChangeAsync="new Func<StepChangeDirection, Task<bool>>(CheckChange)" LocalizedStrings="GetLocalizedStrings()"
+                    MobileView="_mobileView" IconActionButtons="_iconActionButtons" Loading="_loading" HeaderSize="_headerSize" HeaderIcon="false">
             <StaticContent>
                 @if (_showStaticContent)
                 {
@@ -109,6 +109,12 @@
                     <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
                 }
             </MudSelect>
+            <MudSelect @bind-Value="_headerBadgeView" Variant="Variant.Outlined" Label="Header Badge View" Margin="Margin.Dense" Dense="true">
+                @foreach (HeaderBadgeView item in Enum.GetValues<HeaderBadgeView>())
+                {
+                    <MudSelectItem Value="item">@item.ToDescriptionString()</MudSelectItem>
+                }
+            </MudSelect>
             <MudSelectExtended @bind-Value="_headerSize" ItemCollection="@(Enum.GetValues<Size>())" Variant="Variant.Outlined" Label="Header Size" Margin="Margin.Dense" Dense="true" />
             <MudButton Variant="Variant.Filled" Color="Color.Primary" OnClick="(() => _stepper.Reset())">Reset</MudButton>
         </MudStack>
@@ -124,6 +130,7 @@
     bool _mobileView;
     bool _iconActionButtons;
     Variant _variant = Variant.Filled;
+    HeaderBadgeView _headerBadgeView = HeaderBadgeView.All;
     HeaderTextView _headerTextView = HeaderTextView.All;
     bool _disableAnimation = false;
     bool _disablePreviousButton = false;