docs(common): replace ClearButton parameter

Tsvetomir-Hr · Tsvetomir-Hr · commit 35a4b379f4b0 · 2024-11-18T16:05:48.000+02:00
diff --git a/common-features/input-adornments.md b/common-features/input-adornments.md
@@ -99,7 +99,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi
     <TelerikAutoComplete Data="@Products"
                          @bind-Value="@SelectedProduct"
                          Placeholder="Search a product..."
-                         ClearButton="true"
+                         ShowClearButton="true"
                          Width="300px">
         <AutoCompletePrefixTemplate>
             <TelerikSvgIcon Icon="@SvgIcon.Search" />
@@ -113,7 +113,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi
     <TelerikComboBox Data="@Products"
                      @bind-Value="@SelectedProduct"
                      Placeholder="Search a product..."
-                     ClearButton="true"
+                     ShowClearButton="true"
                      Width="300px">
         <ComboBoxPrefixTemplate>
             <TelerikSvgIcon Icon="@SvgIcon.Search" />
@@ -146,7 +146,7 @@ To add a prefix, declare a `<*ComponentName*PrefixTemplate>` tag as a direct chi
     <TelerikMultiSelect Data="@Products"
                         @bind-Value="@SelectedProducts"
                         Placeholder="Search products..."
-                        ClearButton="true"
+                        ShowClearButton="true"
                         Width="300px">
         <MultiSelectPrefixTemplate>
             <TelerikSvgIcon Icon="@SvgIcon.Search" />
@@ -243,7 +243,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi
     <TelerikAutoComplete Data="@Products"
                          @bind-Value="@SelectedProduct"
                          Placeholder="Search a product..."
-                         ClearButton="true"
+                         ShowClearButton="true"
                          Width="300px">
         <AutoCompleteSuffixTemplate>
             <TelerikSvgIcon Icon="@SvgIcon.Copy" />
@@ -257,7 +257,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi
     <TelerikComboBox Data="@Products"
                      @bind-Value="@SelectedProduct"
                      Placeholder="Search a product..."
-                     ClearButton="true"
+                     ShowClearButton="true"
                      Width="300px">
         <ComboBoxSuffixTemplate>
             <TelerikSvgIcon Icon="@SvgIcon.Copy" />
@@ -290,7 +290,7 @@ To add a suffix, declare a `<*ComponentName*SuffixTemplate>` tag as a direct chi
     <TelerikMultiSelect Data="@Products"
                         @bind-Value="@SelectedProducts"
                         Placeholder="Search products..."
-                        ClearButton="true"
+                        ShowClearButton="true"
                         Width="300px">
         <MultiSelectSuffixTemplate>
             <TelerikSvgIcon Icon="@SvgIcon.Copy" />
@@ -372,7 +372,7 @@ To prevent that behavior, you may wrap the content of the prefix/suffix template
 <TelerikAutoComplete Data="@Roles"
                      @bind-Value="@SelectedRole"
                      Placeholder="Enter your role (can be free text)"
-                     ClearButton="true">
+                     ShowClearButton="true">
     <AutoCompletePrefixTemplate>
         <div class="test" onkeydown="event.stopPropagation()">
             <TelerikDropDownList Data="@Teams"
diff --git a/common-features/input-validation.md b/common-features/input-validation.md
@@ -65,7 +65,7 @@ Simple textbox-like inputs do not have any special behavior. You need to bind th
     <p class="role">
         <label for="roleAutoComplete">Role:</label>
         <TelerikAutoComplete Data="@RoleSuggestions" @bind-Value="@person.Role" Id="roleAutoComplete"
-                             Placeholder="Enter your role (can be free text)" ClearButton="true" />
+                             Placeholder="Enter your role (can be free text)" ShowClearButton="true" />
         <ValidationMessage For="@(() => person.Role)"></ValidationMessage>
     </p>
     <p class="height">
@@ -243,7 +243,7 @@ The ComboBox works with the `Value` of the selected item (through its `ValueFiel
     <ValidationSummary />
     <p class="team">
         <label for="teamCombobox">Team:</label>
-        <TelerikComboBox @bind-Value="person.Team" Placeholder="Select team" ClearButton="true" Id="teamCombobox"
+        <TelerikComboBox @bind-Value="person.Team" Placeholder="Select team" ShowClearButton="true" Id="teamCombobox"
                                Data="@teams" TextField="MyTextField" ValueField="MyValueField">
         </TelerikComboBox>
         <ValidationMessage For="@(() => person.Team)"></ValidationMessage>
@@ -301,7 +301,7 @@ The ComboBox works with the `Value` of the selected item (through its `ValueFiel
     <ValidationSummary />
     <p class="team">
         <label for="teamComboBox">Team:</label>
-        <TelerikComboBox Data="@ExistingTeams" @bind-Value="person.Team" AllowCustom="true" ClearButton="true" Id="teamComboBox"></TelerikComboBox>
+        <TelerikComboBox Data="@ExistingTeams" @bind-Value="person.Team" AllowCustom="true" ShowClearButton="true" Id="teamComboBox"></TelerikComboBox>
         <ValidationMessage For="@(() => person.Team)"></ValidationMessage>
     </p>
 
diff --git a/components/autocomplete/filter.md b/components/autocomplete/filter.md
@@ -67,7 +67,7 @@ By default, the filtering is debounced with 150ms. Configure that with the [`Deb
                      MinLength="@FilterMinLength"
                      DebounceDelay="@AutoCompleteDebounceDelay"
                      Placeholder="Type 's' or 'a' to see the difference"
-                     ClearButton="true"
+                     ShowClearButton="true"
                      Width="300px" />
 
 @code{
diff --git a/components/autocomplete/overview.md b/components/autocomplete/overview.md
@@ -29,7 +29,7 @@ User input: @AutoCompleteValue
 <TelerikAutoComplete Data="@Suggestions"
                      @bind-Value="@AutoCompleteValue"
                      Placeholder="Enter your role (can be free text)"
-                     ClearButton="true" />
+                     ShowClearButton="true" />
 
 @code{
     //Current value is null (no item is selected) which allows the Placeholder to be displayed.
@@ -94,7 +94,7 @@ The Blazor AutoComplete provides various parameters that allow you to configure
 | `Value` and `bind-Value` | `string`  | Get/set the value of the component, can be used for binding. Use the `@bind-Value` syntax for two-way binding, for example, to a variable of your own. The `Value` must be a `string`.|
 | `ValueField` | `string` <br /> (`Value`) | The name of the field from the model that will be shown as hints to the user. Not required when binding to a simple list of strings. |
 | `TabIndex` | `int?`  | Maps to the `tabindex` attribute of the HTML element. You can use it to customize the order in which the inputs in your form focus with the `Tab` key. |
-| `ClearButton` | `bool`  | Whether the user will have the option to clear the selected value with a button on the input. When it is clicked, the `Value` will be updated to `string.Empty`. |
+| `ShowClearButton` | `bool`  | Whether the user will have the option to clear the selected value with a button on the input. When it is clicked, the `Value` will be updated to `string.Empty`. |
 | `Enabled` | `bool`  | Use this Boolean property to render a disabled Blazor AutoComplete component until certain requirements are met. |
 | `ReadOnly` | `bool` | If set to `true`, the component will be readonly and will not allow user input. The component is not readonly by default and allows user input. |
 | `MinLength` | `int`  | How many characters the text has to be before the suggestions list appears. Cannot be `0`. Often works together with [filtering]({%slug autocomplete-filter%}). |
diff --git a/components/combobox/appearance.md b/components/combobox/appearance.md
@@ -47,7 +47,7 @@ You can increase or decrease the size of the ComboBox by setting the `Size` attr
                              ValueField="MyValueField" 
                              @bind-Value="selectedValue"
                              Placeholder="Select an item..." 
-                             ClearButton="true" 
+                             ShowClearButton="true" 
                              Filterable="true">
             </TelerikComboBox>
         </div>
@@ -105,7 +105,7 @@ The `Rounded` attribute applies the `border-radius` CSS rule to the ComboBox to
                              ValueField="MyValueField" 
                              @bind-Value="selectedValue"
                              Placeholder="Select an item..." 
-                             ClearButton="true" 
+                             ShowClearButton="true" 
                              Filterable="true">
             </TelerikComboBox>
         </div>
@@ -162,7 +162,7 @@ The `FillMode` controls how the TelerikComboBox is filled. You can set it to a m
                              ValueField="MyValueField" 
                              @bind-Value="selectedValue"
                              Placeholder="Select an item..." 
-                             ClearButton="true" 
+                             ShowClearButton="true" 
                              Filterable="true">
             </TelerikComboBox>
         </div>
diff --git a/components/combobox/filter.md b/components/combobox/filter.md
@@ -60,7 +60,7 @@ By default, the filtering is debounced with 150ms. Configure that with the [`Deb
                  FilterOperator="@FilterOperator"
                  DebounceDelay="@DebounceDelay"
                  Placeholder="Type digits to see filtering in action"
-                 ClearButton="true"
+                 ShowClearButton="true"
                  Width="300px">
 </TelerikComboBox>
 
diff --git a/components/combobox/overview.md b/components/combobox/overview.md
@@ -27,7 +27,7 @@ Selected value: @selectedValue
 <br />
 
 <TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
-                 Placeholder="Select an item..." ClearButton="true" Filterable="true">
+                 Placeholder="Select an item..." ShowClearButton="true" Filterable="true">
 </TelerikComboBox>
 
 @code {
@@ -85,7 +85,7 @@ The Blazor ComboBox @[template](/_contentTemplates/dropdowns/features.md#groupin
 | ----------- | ----------- | -----------|
 | `AdaptiveMode` | `AdaptiveMode` <br /> (`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. |
 | `AllowCustom` | `bool` | whether the user can enter [custom values]({%slug components/combobox/custom-value%}). If enabled, the `ValueField` must be a `string`. |
-| `ClearButton` | `bool` | whether the user will have the option to clear the selected value. When it is clicked, the `Value` will be updated to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, clearing the value will lead to a `0` `Value`, so if there is an Item with `0` in its `ValueField` - issues may arise with its selection. This feature can often go together with `AllowCustom`. |
+| `ShowClearButton` | `bool` | whether the user will have the option to clear the selected value. When it is clicked, the `Value` will be updated to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, clearing the value will lead to a `0` `Value`, so if there is an Item with `0` in its `ValueField` - issues may arise with its selection. This feature can often go together with `AllowCustom`. |
 | `Data` | `IEnumerable<TItem>` | allows you to provide the data source. Required. |
 | `DebounceDelay` | `int` <br/> 150 | Time in milliseconds between the last typed symbol and the internal `oninput` event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries. |
 | `Enabled` | `bool` | whether the component is enabled. |
diff --git a/components/combobox/pre-select-item.md b/components/combobox/pre-select-item.md
@@ -22,7 +22,7 @@ Selected value: @selectedValue
 <br />
 
 <TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
-                 Placeholder="Select an item..." ClearButton="true" Filterable="true">
+                 Placeholder="Select an item..." ShowClearButton="true" Filterable="true">
 </TelerikComboBox>
 
 @code {
diff --git a/components/multicolumncombobox/appearance.md b/components/multicolumncombobox/appearance.md
@@ -47,7 +47,7 @@ You can increase or decrease the size of the MultiColumnComboBox by setting the
                                 ValueField="MyValueField"
                                     @bind-Value="selectedValue"
                                 Placeholder="Select an item..."
-                                ClearButton="true"
+                                ShowClearButton="true"
                                 Filterable="true">
                 <MultiColumnComboBoxColumns>
                     <MultiColumnComboBoxColumn Field="@nameof(MyDdlModel.MyTextField)"></MultiColumnComboBoxColumn>
@@ -109,7 +109,7 @@ The `Rounded` attribute applies the `border-radius` CSS rule to the MultiColumnC
                                 ValueField="MyValueField"
                                 @bind-Value="selectedValue"
                                 Placeholder="Select an item..."
-                                ClearButton="true"
+                                ShowClearButton="true"
                                 Filterable="true">
                 <MultiColumnComboBoxColumns>
                     <MultiColumnComboBoxColumn Field="@nameof(MyDdlModel.MyTextField)"></MultiColumnComboBoxColumn>
@@ -170,7 +170,7 @@ The `FillMode` controls how the TelerikMultiColumnComboBox is filled. You can se
                                 ValueField="MyValueField"
                                 @bind-Value="selectedValue"
                                 Placeholder="Select an item..."
-                                ClearButton="true"
+                                ShowClearButton="true"
                                 Filterable="true">
                 <MultiColumnComboBoxColumns>
                     <MultiColumnComboBoxColumn Field="@nameof(MyDdlModel.MyTextField)"></MultiColumnComboBoxColumn>
diff --git a/components/multicolumncombobox/overview.md b/components/multicolumncombobox/overview.md
@@ -111,7 +111,7 @@ The MultiColumnComboBox @[template](/_contentTemplates/dropdowns/features.md#gro
 | ----------- | ----------- | -----------|
 | `AdaptiveMode` | `AdaptiveMode` <br /> (`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. |
 | `AllowCustom` | `bool` | Determines if the user can enter [custom values]({%slug multicolumncombobox-custom-value%}). If enabled, the `ValueField` must be a `string`. |
-| `ClearButton` | `bool` | Displays a clear button inside the input. When it is clicked, the `Value` will change to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, there should be no data item with `0` in its `ValueField`, otherwise selection issues may occur. |
+| `ShowClearButton` | `bool` | Displays a clear button inside the input. When it is clicked, the `Value` will change to `default(TValue)`, so there must be no item in the `Data` that has such a `Value`. For example, if `TValue` is `int`, there should be no data item with `0` in its `ValueField`, otherwise selection issues may occur. |
 | `Data` | `IEnumerable<TItem>` | The component data. |
 | `DebounceDelay` | `int` <br/> (`150`) | The time in milliseconds between the last typed symbol and the internal `oninput` event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries. |
 | `Enabled` | `bool` | Whether the user can interact with the component. |
diff --git a/components/multiselect/overview.md b/components/multiselect/overview.md
@@ -29,7 +29,7 @@ The <a href="https://www.telerik.com/blazor-ui/multiselect" target="_blank">Blaz
 <TelerikMultiSelect Data="@Countries"
                     @bind-Value="@Values"
                     Placeholder="Enter Balkan country, e.g., Bulgaria"
-                    Width="350px" ClearButton="true" AutoClose="false">
+                    Width="350px" ShowClearButton="true" AutoClose="false">
 </TelerikMultiSelect>
 @if (Values.Count > 0)
 {
@@ -99,7 +99,7 @@ The Blazor MultiSelect provides various parameters that allow you to configure t
 | ----------- | ----------- | ------ |
 | `AdaptiveMode` | `AdaptiveMode` <br /> (`None`) | The [adaptive mode]({%slug adaptive-rendering%}) of the component. |
 | `AutoClose` | `bool` <br /> (`true`) | Defines whether the dropdown list containing the items for the MultiSelect will automatically close after each user selection. |
-| `ClearButton` | `bool` | Whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the `Value` will be updated to an empty list. |
+| `ShowClearButton` | `bool` | Whether the user will have the option to clear the selected items with a button on the input. When it is clicked, the `Value` will be updated to an empty list. |
 | `Data` | `IEnumerable<TItem>` | Allows you to provide the data source. Required. |
 | `DebounceDelay` | `int` <br/> 150 | Time in milliseconds between the last typed symbol and the internal `oninput` event firing. Applies when the user types and filters. Use it to balance between client-side performance and number of database queries. |
 | `Enabled` | `bool` | Whether the component is enabled. |
diff --git a/components/multiselect/pre-select-items.md b/components/multiselect/pre-select-items.md
@@ -32,7 +32,7 @@ and
                     Value="@SelectedProductIDs"
                     ValueField="@nameof(Product.Id)"
                     TextField="@nameof(Product.Name)"
-                    ClearButton="true"
+                    ShowClearButton="true"
                     Placeholder="Select Products">
 </TelerikMultiSelect>
 
diff --git a/components/multiselect/tag-mode.md b/components/multiselect/tag-mode.md
@@ -34,7 +34,7 @@ To use the single tag mode, set the `TagMode` parameter to `MultiSelectTagMode.S
                     TagMode="@MultiSelectTagMode.Single"
                     Placeholder="Enter Balkan country, e.g., Bulgaria"
                     Width="350px" 
-                    ClearButton="true"
+                    ShowClearButton="true"
                     AutoClose="false">
 </TelerikMultiSelect>
 
@@ -73,7 +73,7 @@ When the multiple tag mode is enabled, each selected item will be displayed as a
                     TagMode="@MultiSelectTagMode.Multiple"
                     Placeholder="Enter Balkan country, e.g., Bulgaria"
                     Width="350px" 
-                    ClearButton="true"
+                    ShowClearButton="true"
                     AutoClose="false">
 </TelerikMultiSelect>
 
@@ -113,7 +113,7 @@ To restrict the allowed number of individual tags, use the `MaxAllowedTags` para
                     MaxAllowedTags="2"     
                     Placeholder="Enter Balkan country, e.g., Bulgaria"
                     Width="350px" 
-                    ClearButton="true" 
+                    ShowClearButton="true" 
                     AutoClose="false">
 </TelerikMultiSelect>
 
diff --git a/knowledge-base/combobox-clear-button-click.md b/knowledge-base/combobox-clear-button-click.md
@@ -36,7 +36,7 @@ What you need to do is to check if the new value that comes in is the `default`
 ````CSHTML
 Monitor the console to see when the events fire in these examples. You can use only one of the events, this sample showcases both so you can see the options.
 
-<TelerikComboBox Data="@MyList" ClearButton="true"
+<TelerikComboBox Data="@MyList" ShowClearButton="true"
                  Value="@MyItem" ValueChanged="@( (string v) => MyValueChangeHandlerString(v) )"
                  OnChange="@OnChangeHandlerString">
 </TelerikComboBox>
@@ -63,7 +63,7 @@ Monitor the console to see when the events fire in these examples. You can use o
 
 <hr />
 
-<TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" ClearButton="true"
+<TelerikComboBox Data="@myDdlData" TextField="MyTextField" ValueField="MyValueField" ShowClearButton="true"
                  Value="@selectedValue" ValueChanged="@( (int v) => MyValueChangeHandlerInt(v) )"
                  OnChange="@OnChangeHandlerInt">
 </TelerikComboBox>
diff --git a/knowledge-base/combobox-not-closing.md b/knowledge-base/combobox-not-closing.md
@@ -39,7 +39,7 @@ Selected value: @selectedValue
 <br />
 
 <TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
-                 Placeholder="Select an item..." ClearButton="true" >
+                 Placeholder="Select an item..." ShowClearButton="true" >
 </TelerikComboBox>
 
 @code {
@@ -75,7 +75,7 @@ Selected value: @selectedValue
 <br />
 
 <TelerikComboBox Data="@myComboData" TextField="MyTextField" ValueField="MyValueField" @bind-Value="selectedValue"
-                 Placeholder="Select an item..." ClearButton="true" >
+                 Placeholder="Select an item..." ShowClearButton="true" >
 </TelerikComboBox>
 
 @code {
diff --git a/knowledge-base/dropdown-kb-bind-to-enum.md b/knowledge-base/dropdown-kb-bind-to-enum.md
diff --git a/knowledge-base/dropdowns-readonly-struct-error.md b/knowledge-base/dropdowns-readonly-struct-error.md
diff --git a/knowledge-base/inputs-align-text-right.md b/knowledge-base/inputs-align-text-right.md
diff --git a/knowledge-base/multiselect-always-select-item-limit-total.md b/knowledge-base/multiselect-always-select-item-limit-total.md
diff --git a/styling-and-themes/override-theme-styles.md b/styling-and-themes/override-theme-styles.md
