Loading and LoadingButton: ParameterState (#404)

mckaragoz · web-flow · commit 427aa3416f1b · 2024-05-21T21:09:53.000+03:00
* Loading and Loading Button ParameterState

* Some Fixes
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ChipField/ChipFieldPage.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ChipField/ChipFieldPage.razor
@@ -2,6 +2,10 @@
 @namespace MudExtensions.Docs.Pages
 
 <ExamplePage Title="MudChipField">
+    <ExampleCard ComponentName="ChipField" ExampleName="ChipFieldExampleIntro" Title="Tips & Tricks" ShowCodeSection="false">
+        <ChipFieldExampleIntro />
+    </ExampleCard>
+    
     <ExampleCard ComponentName="ChipField" ExampleName="ChipFieldExample1" Title="Playground" Description="Chip field create chips when user press delimiter key.">
         <ChipFieldExample1 />
     </ExampleCard>
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ChipField/Examples/ChipFieldExample1.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ChipField/Examples/ChipFieldExample1.razor
@@ -59,7 +59,7 @@
     int _chipsMaxWidth = 80;
     Color _color = Color.Default;
     Variant _chipVariant = Variant.Filled;
-    Variant _variant = Variant.Text;
+    Variant _variant = Variant.Outlined;
     Size _chipSize = Size.Medium;
     bool _wrapChips;
     bool _disabled;
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ChipField/Examples/ChipFieldExampleIntro.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/ChipField/Examples/ChipFieldExampleIntro.razor
@@ -0,0 +1,5 @@
+﻿@namespace MudExtensions.Docs.Examples
+
+<MudGrid>
+    <MudAlert Class="mud-width-full" Severity="Severity.Warning"><b>Known Issue:</b>MudChipField doesn't work on chromium based android browsers due to their keydown limitation.</MudAlert>
+</MudGrid>
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/Examples/LoadingExample1.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/Examples/LoadingExample1.razor
@@ -4,7 +4,8 @@
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center flex-wrap">
         <MudPaper Class="mud-width-full" Style="height: 300px; position: relative">
-            <MudLoading @bind-Loading="_loading" Overlap="@_overlap" LoaderType="_loaderType" Darken="_darken" Text="@_text" ClassText="@(_darken ? "white-text" : null)">
+            <MudLoading @bind-Loading="_loading" Overlap="@_overlap" LoaderType="_loaderType" Darken="_darken" 
+                        Text="@_text" TextClass="@(_darken ? "white-text" : null)" Color="_color">
                 <MudStack>
                     <MudText>This is a text inside a paper. Its the content.</MudText>
                     <MudButton OnClick="ShowSnackbar" Variant="Variant.Filled" Color="Color.Primary">A Button Can Not Be Clickable While Loading</MudButton>
@@ -15,13 +16,14 @@
 
     <MudItem xs="12" sm="4">
         <MudStack>
-            <MudSwitch @bind-Value="_loading" Color="Color.Primary">Loading</MudSwitch>
-            <MudCheckBox @bind-Value="_overlap" Label="Overlap" Color="Color.Primary" />
-            <MudCheckBox @bind-Value="_darken" Label="Darken" Color="Color.Primary" />
-            <MudSelect @bind-Value="_loaderType" Variant="Variant.Outlined" Label="Loader Type">
+            <MudSwitchM3 @bind-Value="_loading" Color="Color.Secondary">Loading</MudSwitchM3>
+            <MudCheckBox @bind-Value="_overlap" Label="Overlap" Color="Color.Secondary" />
+            <MudCheckBox @bind-Value="_darken" Label="Darken" Color="Color.Secondary" />
+            <MudSelect @bind-Value="_loaderType" Variant="Variant.Outlined" Label="Loader Type" AnchorOrigin="Origin.BottomCenter">
                 <MudSelectItem Value="LoaderType.Circular">Circular</MudSelectItem>
                 <MudSelectItem Value="LoaderType.Linear">Linear</MudSelectItem>
             </MudSelect>
+            <MudSelectExtended @bind-Value="_color" ItemCollection="@(Enum.GetValues<Color>())" Variant="Variant.Outlined" Label="Color" AnchorOrigin="Origin.BottomCenter" />
             <MudTextField @bind-Value="_text" Variant="Variant.Outlined" Label="Text" />
         </MudStack>
     </MudItem>
@@ -33,6 +35,7 @@
     bool _darken;
     string? _text;
     LoaderType _loaderType = LoaderType.Circular;
+    Color _color = Color.Primary;
 
     private void ShowSnackbar()
     {
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/Examples/LoadingExample2.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/Examples/LoadingExample2.razor
@@ -3,22 +3,21 @@
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center flex-wrap">
         <MudPaper Class="mud-width-full" Style="height: 300px; position: relative">
-            <MudLoading @bind-Loading="_loading2">
+            <MudLoading @bind-Loading="_loading">
                 <LoaderContent>
                     <div class="mud-width-full mud-height-full d-flex flex-column align-center justify-center">
-                        <MudProgressLinear Color="Color.Primary" Indeterminate="true" />
                         <MudStack Row="true" Spacing="2">
                             <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Tertiary" Size="Size.Small" />
                             <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Secondary" Size="Size.Medium" />
-                            <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Primary" Size="Size.Large" />
+                            <MudIcon Class="loading-ani-example" Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Primary" Size="Size.Large" />
                             <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Secondary" Size="Size.Medium" />
                             <MudIcon Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Tertiary" Size="Size.Small" />
                         </MudStack>
                                 
                     </div>
                 </LoaderContent>
                 <ChildContent>
-                    <MudText>This is a text inside a paper.</MudText>
+                    <MudText Class="pa-4">This is a text inside a paper.</MudText>
                 </ChildContent>
                         
             </MudLoading>
@@ -27,11 +26,13 @@
 
     <MudItem xs="12" sm="4">
         <MudStack>
-            <MudSwitch @bind-Value="_loading2" Color="Color.Primary">Loading</MudSwitch>
+            <MudSwitchM3 @bind-Value="_loading" Color="Color.Secondary">Loading</MudSwitchM3>
         </MudStack>
     </MudItem>
 </MudGrid>
 
+<MudAnimate Selector=".loading-ani-example" AnimationType="AnimationType.Rotate" Value="360" ValueSecondary="0" Duration="1" Infinite="true" />
+
 @code {
-    bool _loading2 = true;
+    bool _loading = true;
 }
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/Examples/LoadingExample3.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/Examples/LoadingExample3.razor
@@ -4,18 +4,18 @@
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center flex-wrap">
         <MudPaper Class="mud-width-full" Style="height: 300px; position: relative">
-            <MudLoading @bind-Loading="_loading" LoaderType="_loaderType" Text="@_text" ClassText="@_classText" ClassLoader="@_classLoader" StyleText="@_styleText" StyleLoader="@_styleLoader">
-                <MudStack>
+            <MudLoading @bind-Loading="_loading" LoaderType="_loaderType" Text="@_text" TextClass="@_classText" LoaderClass="@_classLoader" TextStyle="@_styleText" LoaderStyle="@_styleLoader">
+                <MudStack Class="pa-4">
                     <MudText>This is a text inside a paper. Its the content.</MudText>
-                    <MudButton OnClick="ShowSnackbar" Variant="Variant.Filled" Color="Color.Primary">A Button Can Not Be Clickable While Loading</MudButton>
+                    <MudButton Variant="Variant.Filled" Color="Color.Primary">A Button</MudButton>
                 </MudStack>
             </MudLoading>
         </MudPaper>
     </MudItem>
 
     <MudItem xs="12" sm="4">
         <MudStack>
-            <MudSwitch @bind-Value="_loading" Color="Color.Primary">Loading</MudSwitch>
+            <MudSwitchM3 @bind-Value="_loading" Color="Color.Secondary">Loading</MudSwitchM3>
             <MudSelect @bind-Value="_loaderType" Variant="Variant.Outlined" Label="Loader Type">
                 <MudSelectItem Value="LoaderType.Circular">Circular</MudSelectItem>
                 <MudSelectItem Value="LoaderType.Linear">Linear</MudSelectItem>
@@ -37,9 +37,4 @@
     string? _classLoader;
     string? _styleLoader;
     LoaderType _loaderType = LoaderType.Circular;
-
-    private void ShowSnackbar()
-    {
-        Snackbar.Add("Button clicked.", Severity.Info);
-    }
 }
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/Examples/LoadingExampleIntro.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/Examples/LoadingExampleIntro.razor
@@ -0,0 +1,5 @@
+﻿@namespace MudExtensions.Docs.Examples
+
+<MudGrid>
+    <MudAlert Class="mud-width-full" Severity="Severity.Info">MudLoading's container must have <CodeBlock>position: relative</CodeBlock> style.</MudAlert>
+</MudGrid>
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/LoadingPage.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/Loading/LoadingPage.razor
@@ -2,6 +2,10 @@
 @namespace MudExtensions.Docs.Pages
 
 <ExamplePage Title="MudLoading">
+    <ExampleCard ComponentName="Loading" ExampleName="LoadingExampleIntro" Title="Tips & Tricks" ShowCodeSection="false">
+        <LoadingExampleIntro />
+    </ExampleCard>
+    
     <ExampleCard ComponentName="Loading" ExampleName="LoadingExample1" Title="Usage" Description="MudLoading is very useful to create loading conditions faster.">
         <LoadingExample1 />
     </ExampleCard>
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/LoadingButton/Examples/LoadingButtonExample1.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/LoadingButton/Examples/LoadingButtonExample1.razor
@@ -25,7 +25,7 @@
 
     <MudItem xs="12" sm="4">
         <MudStack>
-            <MudSwitch @bind-Value="_loading" Color="Color.Primary">Loading</MudSwitch>
+            <MudSwitchM3 @bind-Value="_loading" Color="Color.Secondary">Loading</MudSwitchM3>
             <MudSelect @bind-Value="_adornment" Variant="Variant.Outlined" Label="Loading Adornment">
                 <MudSelectItem Value="Adornment.Start">Start</MudSelectItem>
                 <MudSelectItem Value="Adornment.End">End</MudSelectItem>
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/LoadingButton/Examples/LoadingButtonExample2.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/LoadingButton/Examples/LoadingButtonExample2.razor
@@ -2,7 +2,7 @@
 
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center flex-wrap">
-        <MudLoadingButton @bind-Loading="_loading2" LoadingAdornment="_adornment2" LoadingCircularColor="Color.Primary" OnClick="ButtonClick2" Variant="Variant.Filled" Color="Color.Primary">
+        <MudLoadingButton @bind-Loading="_loading" LoadingAdornment="_adornment" LoadingCircularColor="Color.Primary" OnClick="ButtonClick" Variant="Variant.Filled" Color="Color.Primary">
             <LoadingContent>
                 LOADING
             </LoadingContent>
@@ -12,31 +12,23 @@
             </ChildContent>
         </MudLoadingButton>
 
-        <MudLoadingButton ButtonVariant="ButtonVariant.IconButton" @bind-Loading="_loading2" Icon="@Icons.Custom.Brands.MudBlazor" LoadingAdornment="_adornment2" LoadingCircularColor="Color.Primary" OnClick="ButtonClick2" Variant="Variant.Filled" Color="Color.Primary">
+        <MudLoadingButton ButtonVariant="ButtonVariant.IconButton" @bind-Loading="_loading" Icon="@Icons.Custom.Brands.MudBlazor" LoadingAdornment="_adornment" LoadingCircularColor="Color.Primary" OnClick="ButtonClick" Variant="Variant.Filled" Color="Color.Primary">
             <LoadingContent>
                 LOADING
             </LoadingContent>
-
-            <ChildContent>
-                CLICK ME
-            </ChildContent>
         </MudLoadingButton>
 
-        <MudLoadingButton ButtonVariant="ButtonVariant.Fab" @bind-Loading="_loading2" StartIcon="@Icons.Custom.Brands.MudBlazor" LoadingAdornment="_adornment2" LoadingCircularColor="Color.Primary" OnClick="ButtonClick2" Variant="Variant.Filled" Color="Color.Primary">
+        <MudLoadingButton ButtonVariant="ButtonVariant.Fab" @bind-Loading="_loading" StartIcon="@Icons.Custom.Brands.MudBlazor" LoadingAdornment="_adornment" LoadingCircularColor="Color.Primary" OnClick="ButtonClick" Variant="Variant.Filled" Color="Color.Primary">
             <LoadingContent>
                 LOADING
             </LoadingContent>
-
-            <ChildContent>
-                CLICK ME
-            </ChildContent>
         </MudLoadingButton>
     </MudItem>
 
     <MudItem xs="12" sm="4">
         <MudStack>
-            <MudSwitch @bind-Value="_loading2" Color="Color.Primary">Loading</MudSwitch>
-            <MudSelect @bind-Value="_adornment2" Variant="Variant.Outlined" Label="Loading Adornment">
+            <MudSwitchM3 @bind-Value="_loading" Color="Color.Secondary">Loading</MudSwitchM3>
+            <MudSelect @bind-Value="_adornment" Variant="Variant.Outlined" Label="Loading Adornment" AnchorOrigin="Origin.BottomCenter">
                 <MudSelectItem Value="Adornment.Start">Start</MudSelectItem>
                 <MudSelectItem Value="Adornment.End">End</MudSelectItem>
             </MudSelect>
@@ -45,13 +37,13 @@
 </MudGrid>
 
 @code{
-    bool _loading2 = false;
-    Adornment _adornment2 = Adornment.Start;
+    bool _loading = false;
+    Adornment _adornment = Adornment.Start;
 
-    private async Task ButtonClick2()
+    private async Task ButtonClick()
     {
-        _loading2 = true;
+        _loading = true;
         await Task.Delay(2000);
-        _loading2 = false;
+        _loading = false;
     }
 }    
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/LoadingButton/Examples/LoadingButtonExampleIntro.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/LoadingButton/Examples/LoadingButtonExampleIntro.razor
@@ -0,0 +1,5 @@
+﻿@namespace MudExtensions.Docs.Examples
+
+<MudGrid>
+    <MudAlert Class="mud-width-full" Severity="Severity.Info">If you have some issues with async process with MudLoadingButton, set <CodeBlock>AutoDelay="null"</CodeBlock></MudAlert>
+</MudGrid>
diff --git a/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/LoadingButton/LoadingButtonPage.razor b/CodeBeam.MudBlazor.Extensions.Docs/Pages/Components/LoadingButton/LoadingButtonPage.razor
@@ -2,6 +2,10 @@
 @namespace MudExtensions.Docs.Pages
 
 <ExamplePage Title="MudLoadingButton">
+    <ExampleCard ComponentName="LoadingButton" ExampleName="LoadingButtonExampleIntro" Title="Tips & Tricks" ShowCodeSection="false">
+        <LoadingButtonExampleIntro />
+    </ExampleCard>
+
     <ExampleCard ComponentName="LoadingButton" ExampleName="LoadingButtonExample1" Title="Usage" Description="MudLoadingButton has required parameters to achieve easy loading control.">
         <LoadingButtonExample1 />
     </ExampleCard>
diff --git a/CodeBeam.MudBlazor.Extensions/Components/InputStyler/MudInputStyler.razor b/CodeBeam.MudBlazor.Extensions/Components/InputStyler/MudInputStyler.razor
@@ -119,13 +119,8 @@
         }
         else
         {
-            <MudRender>@(Selector) .mud-input-underline:after {
-                @($"border-color: {BorderColor} !important;");
-            }</MudRender>
-
-            <MudRender>@(Selector) .mud-input-outlined:focus-within .mud-input-outlined-border {
-                @($"border-color: {BorderColor} !important;");
-            }</MudRender>
+            @($"{Selector} .mud-input-underline:after {{ border-color: {BorderColor} !important; }}")
+            @($"{Selector} .mud-input-outlined:focus-within .mud-input-outlined-border {{ border-color: {BorderColor} !important; }}")
         }
     }
 
diff --git a/CodeBeam.MudBlazor.Extensions/Components/Loading/MudLoading.razor b/CodeBeam.MudBlazor.Extensions/Components/Loading/MudLoading.razor
@@ -1,7 +1,7 @@
 ﻿@namespace MudExtensions
 @inherits MudComponentBase
 
-@if (Loading == true)
+@if (_loading.Value == true)
 {
     if (LoaderType == LoaderType.Circular)
     {
@@ -11,10 +11,10 @@
         }
         else
         {
-            <MudOverlay Visible="_loading" Absolute="true" DarkBackground="@Darken">
+            <MudOverlay Class="mud-loading-overlay" Visible="_loading" Absolute="true" DarkBackground="@Darken">
                 <div class="d-flex flex-column align-center justify-center">
-                    <MudProgressCircular Class="@ClassLoader" Style="@StyleLoader" Color="Color.Primary" Indeterminate="true" />
-                    <MudText Class="@TextClassname" Style="@StyleText">@Text</MudText>
+                    <MudProgressCircular Class="@LoaderClass" Style="@LoaderStyle" Color="@Color" Indeterminate="true" />
+                    <MudText Class="@TextClassname" Style="@TextStyle">@Text</MudText>
                 </div>
             </MudOverlay>
         }
@@ -28,10 +28,10 @@
         else
         {
 
-            <MudProgressLinear Class="@ClassLoader" Style="@StyleLoader" Color="Color.Primary" Indeterminate="true" />
-            <MudText Class="@TextClassname" Style="@StyleText" Align="Align.Center">@Text</MudText>
-            
-            <MudOverlay Visible="_loading" Absolute="true" DarkBackground="@Darken">
+            <MudProgressLinear Class="@LoaderClass" Style="@LoaderStyle" Color="@Color" Indeterminate="true" />
+            <MudText Class="@TextClassname" Style="@TextStyle" Align="Align.Center">@Text</MudText>
+
+            <MudOverlay Class="mud-loading-overlay" Visible="_loading" Absolute="true" DarkBackground="@Darken">
                 <div class="d-flex align-center justify-center">
                 
                 </div>
@@ -40,7 +40,7 @@
     }
 }
 
-@if (!Loading || Overlap)
+@if (!_loading.Value || Overlap)
 {
     @ChildContent
 }
diff --git a/CodeBeam.MudBlazor.Extensions/Components/Loading/MudLoading.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/Loading/MudLoading.razor.cs
diff --git a/CodeBeam.MudBlazor.Extensions/Components/LoadingButton/MudLoadingButton.razor b/CodeBeam.MudBlazor.Extensions/Components/LoadingButton/MudLoadingButton.razor
diff --git a/CodeBeam.MudBlazor.Extensions/Components/LoadingButton/MudLoadingButton.razor.cs b/CodeBeam.MudBlazor.Extensions/Components/LoadingButton/MudLoadingButton.razor.cs
