docs: Update Loader Size and ThemeColor

Author: Dimo Dimov

_contentTemplates/loaders/size.md

@@ -1,10 +1,10 @@
 #loaders-size
 
-There are three predefined sizes for the loader that you can set through its `Size` parameter that takes a member of the `Telerik.Blazor.Components.LoaderSize` enum:
+There are three predefined sizes for the loader that you can set through its `Size` parameter (`string`). You can use the predefined properties in the `Telerik.Blazor.ThemeConstants.Loader.Size` static class:
 
-* `Small`
-* `Medium` - the default value
-* `Large`
+* `Small` (equals `"sm"`)
+* `Medium` (equals `"md"`) - the default value
+* `Large` (equals `"lg"`)
 
 You can see them in action in the [Loader Overview](https://demos.telerik.com/blazor-ui/loader/overview) Live Demo.
 
@@ -13,14 +13,22 @@ You can see them in action in the [Loader Overview](https://demos.telerik.com/bl
 ![loader size](images/loader-size.png)
 
 ````CSHTML
-@foreach (LoaderSize size in Enum.GetValues(typeof(Telerik.Blazor.Components.LoaderSize)))
+@foreach (string size in LoaderSizes)
 {
     <div style="float: left; margin: 20px;">
         @size
         <br /><br />
         <TelerikLoader Size="@size"></TelerikLoader>
     </div>
 }
+
+@code {
+    List<string> LoaderSizes { get; set; } = new List<string>() {
+        ThemeConstants.Loader.Size.Small,
+        ThemeConstants.Loader.Size.Medium,
+        ThemeConstants.Loader.Size.Large
+    };
+}
 ````
 
 #end

_contentTemplates/loaders/themeColor.md

@@ -1,6 +1,6 @@
 #loaders-theme-color
 
-The color of the animated loading icon is controlled through the `ThemeColor` parameter. You can set it to a member of the `Telerik.Blazor.ThemeColor` class:
+The color of the animated loading icon is controlled through the `ThemeColor` parameter. You can set it to a string property of the static `ThemeConstants.Loader.ThemeColor` class:
 
 * `Primary`
 * `Secondary`
@@ -19,6 +19,7 @@ These predefined options match the main [Telerik Theme]({%slug general-informati
 
 ![Loader Theme Colors](images/loader-built-in-theme-colors.png)
 
+<!--
 ````CSHTML
 @{
     var fields = typeof(Telerik.Blazor.ThemeColors)
@@ -36,6 +37,7 @@ These predefined options match the main [Telerik Theme]({%slug general-informati
     }
 }
 ````
+-->
 
 The `ThemeColor` parameter renders as the `k-loader-<ThemeColor>` CSS class on the wrapping element and you can set it to a custom value to cascade through and set the color to a setting of your own without customizing the entire theme.
 
@@ -53,4 +55,3 @@ The `ThemeColor` parameter renders as the `k-loader-<ThemeColor>` CSS class on t
 ````
 
 #end
-

common-features/loading-sign.md

@@ -84,7 +84,7 @@ This sample shows only an indicator for the initial data load, only the DELETE o
     <TelerikLoaderContainer OverlayThemeColor="light" Visible="@( !InitialDataLoadComplete )"
                             Text="@null">
         <Template>
-            <TelerikLoader Type="@LoaderType.InfiniteSpinner" Size="@LoaderSize.Large"></TelerikLoader>
+            <TelerikLoader Type="@LoaderType.InfiniteSpinner" Size="@ThemeConstants.Loader.Size.Large"></TelerikLoader>
         </Template>
     </TelerikLoaderContainer>
 
@@ -151,7 +151,7 @@ This sample shows only an indicator for the initial data load, only the DELETE o
     <TelerikLoaderContainer OverlayThemeColor="light" Visible="@( !InitialDataLoadComplete )"
                             Text="@null">
         <Template>
-            <TelerikLoader Type="@LoaderType.InfiniteSpinner" Size="@LoaderSize.Large"></TelerikLoader>
+            <TelerikLoader Type="@LoaderType.InfiniteSpinner" Size="@ThemeConstants.Loader.Size.Large"></TelerikLoader>
         </Template>
     </TelerikLoaderContainer>
 

components/loader/overview.md

@@ -98,7 +98,7 @@ You can devise such a loading panel as needed by your app, and place a Telerik L
                 @* sample loading panel, styles are at the end *@
                 <div class="loading-panel-wrapper">
                     <div class="loading-panel-overlay"></div>
-                    <TelerikLoader Size="@LoaderSize.Large" Type="@LoaderType.ConvergingSpinner" ThemeColor="@ThemeColors.Tertiary" />
+                    <TelerikLoader Size="@ThemeConstants.Loader.Size.Large" Type="@LoaderType.ConvergingSpinner" ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary" />
                 </div>
             }
             <TelerikGrid Data="@GridData" Height="500px" Pageable="true" AutoGenerateColumns="true">
@@ -111,7 +111,7 @@ You can devise such a loading panel as needed by your app, and place a Telerik L
                     here we just copy it to showcase the concept of showing a loading sign *@
                 <div class="loading-panel-wrapper">
                     <div class="loading-panel-overlay"></div>
-                    <TelerikLoader Size="@LoaderSize.Large" Type="@LoaderType.ConvergingSpinner" ThemeColor="@ThemeColors.Tertiary" />
+                    <TelerikLoader Size="@ThemeConstants.Loader.Size.Large" Type="@LoaderType.ConvergingSpinner" ThemeColor="@ThemeConstants.Loader.ThemeColor.Tertiary" />
                 </div>
             }
             <p>some other content</p>

components/loadercontainer/appearance.md

@@ -96,7 +96,7 @@ The `LoaderContainer` utilizes the [Loader]({%slug loader-overview%}) component
 
 <TelerikLoaderContainer LoaderType="@LoaderType.InfiniteSpinner"
                         LoaderPosition="@LoaderPosition.Start"
-                        Size="@LoaderSize.Small"
+                        Size="@ThemeConstants.Loader.Size.Small"
                         ThemeColor="info">
 </TelerikLoaderContainer>
 ````

components/loadercontainer/overview.md

@@ -87,7 +87,7 @@ The LoaderContainer provides the following features:
 
 * `LoaderType` - `enum` - controls the shape of the loader indicator. Takes a member of the `Telerik.Blazor.Component.LoaderType` enum. See the [Appearance]({%slug loadercontainer-appearance%}) article for more information and examples.
 
-* `Size` - `enum` - controls the size of the loader indicator. Takes a member of the `Telerik.Blazor.Component.LoaderSize` enum. See the [Appearance]({%slug loadercontainer-appearance%}) article for more information and examples.
+* `Size` - `string` - controls the size of the loader indicator. Use a static property from the `ThemeConstants.Loader.Size` class - `Size.Small`, `Size.Medium` (default) or `Size.Large`. See the [Appearance]({%slug loadercontainer-appearance%}) article for more information and examples.
 
 * `LoaderPosition` - `enum` - configures the position of the loader indicator against the `Text` parameter. Takes a member of the `Telerik.Blazor.Components.LoaderPosition`. You can find more information and examples in the [Appearance]({%slug loadercontainer-appearance%}) article.
 
@@ -138,7 +138,7 @@ The panel is the white rectangular area that surrounds the loader indicator and
 
 <TelerikLoaderContainer Class="myLoaderContainer"
                         Visible="@(GridData == null ? true: false)"
-                        Size="@LoaderSize.Large"
+                        Size="@ThemeConstants.Loader.Size.Large"
                         Text="My custom loading text"
                         ThemeColor="light">
 </TelerikLoaderContainer>