docs(ChipList): Add ThemeColorField parameter

Author: dimodi

components/chip/appearance.md

@@ -144,7 +144,6 @@ The `ThemeColor` parameter applies a predefined text color and background color.
 |`Success`|`success`|
 |`Warning`|`warning`|
 |`Error`|`error`|
-|`None`|`none`|
 
 >caption The built-in ThemeColors
 
@@ -162,7 +161,7 @@ The `ThemeColor` parameter applies a predefined text color and background color.
         <div style="float:left; margin: 20px;">
             <TelerikChip @bind-Selected="@IsChipSelected"
                  ThemeColor="@themeColor"
-                 Text="Audio">
+                 Text="@themeColor">
             </TelerikChip>
         </div>
     }

components/chiplist/appearance.md

@@ -10,14 +10,16 @@ position: 35
 
 # ChipList Appearance Settings
 
-You can control the appearance of the chips in the ChipList by setting the following attributes:
+You can control the appearance of the chips in the ChipList by setting the following parameters:
 
 * [FillMode](#fillmode)
 * [Rounded](#rounded)
 * [Size](#size)
 
 You can use all of them together to achieve the desired appearance. This article will explain their effect one by one.
 
+Also see how to [set `ThemeColor`](slug:chip-appearance#themecolor) for each [chip in the ChipList](slug:chiplist-bound).
+
 ## FillMode
 
 The `FillMode` controls how the individual chip is filled. You can set it to a member of the `Telerik.Blazor.ThemeConstants.Chip.FillMode` class:
@@ -191,3 +193,7 @@ You can increase or decrease the size of the chips by setting the `Size` paramet
 ````
 
 @[template](/_contentTemplates/common/themebuilder-section.md#appearance-themebuilder)
+
+## See Also
+
+* [Set ThemeColor for each chip in the ChipList](slug:chiplist-bound)

components/chiplist/data-bind.md

@@ -30,30 +30,34 @@ The ChipList has features that map to properties in the component model class. T
             Text = "Audio",
             Icon = SvgIcon.FileAudio,
             Disabled = false,
-            Removable = true
+            Removable = true,
+            ThemeColor = ThemeConstants.Chip.ThemeColor.Base
         },
         new ChipModel()
         {
             Text = "Video",
             Icon = SvgIcon.FileVideo,
             Disabled = false,
-            Removable = false
+            Removable = false,
+            ThemeColor = ThemeConstants.Chip.ThemeColor.Warning
         },
         new ChipModel()
         {
             Text = "Image",
             Icon = SvgIcon.FileImage,
             Disabled = true,
-            Removable = false
+            Removable = false,
+            ThemeColor = ThemeConstants.Chip.ThemeColor.Info
         }
     };
 
     public class ChipModel
     {
-        public string Text { get; set; }
-        public ISvgIcon Icon { get; set; }
+        public string Text { get; set; } = string.Empty;
+        public ISvgIcon? Icon { get; set; }
         public bool Disabled { get; set; }
         public bool Removable { get; set; }
+        public string ThemeColor { get; set; } = string.Empty;
     }
 }
 ````
@@ -68,6 +72,7 @@ The table below lists the available data binding parameters for the Blazor ChipL
 | `IconField` | `"Icon"` | The icon that renders in the chip. |
 | `TextField` | `"Text"` | The text that renders in the chip. |
 | `RemovableField`| `"Removable"` | Defines if the users can remove the chip. |
+| `ThemeColorField`| `"ThemeColor"` | Defines the [`ThemeColor` of each chip](slug:chip-appearance#themecolor). |
 
 #### Icons
 

components/chiplist/overview.md

@@ -52,7 +52,7 @@ The <a href="https://www.telerik.com/blazor-ui/chiplist" target="_blank">Blazor
 
 ## Data Binding
 
-The Blazor ChipList requires a data source so that it can display items to the user. To provide a data source, use the `Data` property. [Read more about the Blazor ChipList data binding](slug:chiplist-bound).
+The Blazor ChipList requires a data source so that it can display items to the user. To provide a data source, use the `Data` property. Some properties of the ChipList model can enhance the behavior and appearance of each chip. [Read more about the Blazor ChipList data binding](slug:chiplist-bound).
 
 ## Selection
 
@@ -68,7 +68,7 @@ You can use the built-in events of the Blazor ChipList to react to chip selectio
 
 ## Appearance
 
-You can customize the appearance of the Blazor ChipList via a variety of built-in customization options. [Read more about the ChipList appearance settings...](slug:chiplist-appearance)
+You can customize the [appearance of the Blazor ChipList](slug:chiplist-appearance) via a variety of built-in customization options. Also see how to [set `ThemeColor`](slug:chip-appearance#themecolor) for each [chip in the ChipList](slug:chiplist-bound).
 
 ## ChipList Parameters
 
@@ -82,7 +82,7 @@ The table below lists the ChipList parameters. Also check the [ChipList API Refe
 | `AriaLabelledBy` | `string` | Maps to the `area-labelledby` attribute. Use this parameter to reference another element to define its accessible name. |
 | `Class` | `string` | An additional CSS class for the `<div class="k-chip-list">` element. Use it to [customize the component styles and override the theme](slug:themes-override). |
 | `Data` | `IEnumerable<TItem>` | The collection of the items that will be rendered as chips. |
-| `Removable` | `bool` | Specifies if the chip can be removed by the user. If set to `true` a remove icon will be rendered on each available chip. |
+| `Removable` | `bool` | Specifies if the chips can be removed by the user. If set to `true` a remove icon will be rendered on each available chip. |
 | `RemoveIcon` | `object` | Defines the icon that will be rendered if the `Removable` parameter is set to `true`. |
 
 ## Next Steps