ComboBox: Enabled Clearable for doc examples (#318)

* ComboBox: Enabled Clearable for examples

* Added parameter defaults as remarks

---------

Co-authored-by: Jeffrey Jangli <Jeffrey.Jangli@kpn.com>

Author: Yomodo

CodeBeam.MudBlazor.Extensions/Components/ComboBox/MudComboBox.razor.cs

@@ -97,7 +97,7 @@ protected internal void SetSearchString(T value)
         /// If true, all items are eligible regarding what user search in textfield. Default is false.
         /// </summary>
         [Category(CategoryTypes.FormComponent.Appearance)]
-        [Parameter] public bool DisableFilter { get; set; } = false;
+        [Parameter] public bool DisableFilter { get; set; }
 
         /// <summary>
         /// If true, searched text has highlight.
@@ -223,48 +223,55 @@ protected internal void SetSearchString(T value)
         /// <summary>
         /// If true, compact vertical padding will be applied to all Select items.
         /// </summary>
+        /// <remarks>The default is <see cref="Dense.Standard"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListAppearance)]
         public Dense Dense { get; set; } = Dense.Standard;
 
         /// <summary>
         /// The Open Select Icon
         /// </summary>
+        /// <remarks>The default is <see cref="Icons.Material.Filled.ArrowDropDown"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Appearance)]
         public string OpenIcon { get; set; } = Icons.Material.Filled.ArrowDropDown;
 
         /// <summary>
         /// The Close Select Icon
         /// </summary>
+        /// <remarks>The default is <see cref="Icons.Material.Filled.ArrowDropUp"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Appearance)]
         public string CloseIcon { get; set; } = Icons.Material.Filled.ArrowDropUp;
 
         /// <summary>
         /// Dropdown color of select. Supports theme colors.
         /// </summary>
+        /// <remarks>The default is <see cref="Color.Primary"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Appearance)]
         public Color Color { get; set; } = Color.Primary;
 
         /// <summary>
         /// The input's visual.
         /// </summary>
+        /// <remarks>The default is <see cref="ValuePresenter.Text"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Appearance)]
         public ValuePresenter InputPresenter { get; set; } = ValuePresenter.Text;
 
         /// <summary>
         /// The items' visual in popover.
         /// </summary>
+        /// <remarks>The default is <see cref="ValuePresenter.Text"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Appearance)]
         public ValuePresenter ItemPresenter { get; set; } = ValuePresenter.Text;
 
         /// <summary>
-        /// If true, shows checkbox when multiselection is true. Default is true.
+        /// If true, shows checkbox when multiselection is true.
         /// </summary>
+        /// <remarks>The default is <c>true</c></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListBehavior)]
         public bool ShowCheckbox { get; set; } = true;
@@ -279,13 +286,15 @@ protected internal void SetSearchString(T value)
         /// <summary>
         /// Sets position of the Select All checkbox
         /// </summary>
+        /// <remarks>The default is <see cref="SelectAllPosition.BeforeSearchBox"/></remarks>
         [Parameter]
         [Category(CategoryTypes.List.Appearance)]
         public SelectAllPosition SelectAllPosition { get; set; } = SelectAllPosition.BeforeSearchBox;
 
         /// <summary>
         /// Define the text of the Select All option.
         /// </summary>
+        /// <remarks>The default is <c>Select All</c></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListAppearance)]
         public string SelectAllText { get; set; } = "Select All";
@@ -329,52 +338,60 @@ protected internal void SetSearchString(T value)
         [Category(CategoryTypes.List.Behavior)]
         public string ChipClass { get; set; }
 
+        /// <remarks>The default is <see cref="Variant.Filled"/></remarks>
         [Parameter]
         [Category(CategoryTypes.List.Behavior)]
         public Variant ChipVariant { get; set; } = Variant.Filled;
 
+        /// <remarks>The default is <see cref="Size.Small"/></remarks>
         [Parameter]
         [Category(CategoryTypes.List.Behavior)]
         public Size ChipSize { get; set; } = Size.Small;
 
         /// <summary>
         /// Parameter to define the delimited string separator.
         /// </summary>
+        /// <remarks>The default is <c>, </c></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
         public string Delimiter { get; set; } = ", ";
 
         /// <summary>
         /// If true popover width will be the same as the combobox component.
         /// </summary>
+        /// <remarks>The default is <c>true</c></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
         public bool RelativeWidth { get; set; } = true;
 
         /// <summary>
         /// Sets the maxheight of the popover.
         /// </summary>
+        /// <remarks>The default is <c>300</c></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListAppearance)]
         public int MaxHeight { get; set; } = 300;
 
         /// <summary>
         /// Set the anchor origin point to determine where the popover will open from.
         /// </summary>
+        /// <remarks>The default is <see cref="Origin.BottomCenter"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListAppearance)]
         public Origin AnchorOrigin { get; set; } = Origin.BottomCenter;
 
         /// <summary>
         /// Sets the transform origin point for the popover.
         /// </summary>
+        /// <remarks>The default is <see cref="Origin.TopCenter"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListAppearance)]
         public Origin TransformOrigin { get; set; } = Origin.TopCenter;
 
         /// <summary>
         /// If false, combobox allows value from out of bound.
         /// </summary>
+        /// <remarks>The default is <c>true</c></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.Behavior)]
         public bool Strict { get; set; } = true;
@@ -396,6 +413,7 @@ protected internal void SetSearchString(T value)
         /// <summary>
         /// If true, the search-box will be focused when the dropdown is opened.
         /// </summary>
+        /// <remarks>The default is <c>true</c></remarks>
         [Parameter]
         [Category(CategoryTypes.List.Behavior)]
         public bool SearchBoxAutoFocus { get; set; } = true;
@@ -412,7 +430,7 @@ protected internal void SetSearchString(T value)
         /// </summary>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListBehavior)]
-        public bool LockScroll { get; set; } = false;
+        public bool LockScroll { get; set; }
 
         /// <summary>
         /// Button click event for clear button. Called after text and value has been cleared.
@@ -422,6 +440,7 @@ protected internal void SetSearchString(T value)
         /// <summary>
         /// Custom indeterminate icon.
         /// </summary>
+        /// <remarks>The default is <see cref="Icons.Material.Filled.IndeterminateCheckBox"/></remarks>
         [Parameter]
         [Category(CategoryTypes.FormComponent.ListAppearance)]
         public string IndeterminateIcon { get; set; } = Icons.Material.Filled.IndeterminateCheckBox;

ComponentViewer.Docs/Pages/Examples/ComboboxExample2.razor

@@ -4,21 +4,21 @@
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex gap-4 align-center justify-center">
         <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled"
-            Label="Single Selection" HelperText="Standard combobox" Editable="_editable" autocomplete="new-password">
+            Label="Single Selection" HelperText="Standard combobox" Editable="_editable" autocomplete="new-password" Clearable>
             <MudComboBoxItem Value="@("Foo")" Text="Foo">Foo</MudComboBoxItem>
             <MudComboBoxItem Value="@("Bar")" Text="Bar">Bar</MudComboBoxItem>
             <MudComboBoxItem Value="@("Fizz")" Text="Fizz">Fizz</MudComboBoxItem>
             <MudComboBoxItem Value="@("Buzz")" Text="Buzz">Buzz</MudComboBoxItem>
         </MudComboBox>
         <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" ToggleSelection="true"
-                     Label="Toggle Selection" HelperText="Can unselect the item" Editable="_editable" autocomplete="new-password">
+                     Label="Toggle Selection" HelperText="Can unselect the item" Editable="_editable" autocomplete="new-password" Clearable>
             <MudComboBoxItem Value="@("Foo")" Text="Foo">Foo</MudComboBoxItem>
             <MudComboBoxItem Value="@("Bar")" Text="Bar">Bar</MudComboBoxItem>
             <MudComboBoxItem Value="@("Fizz")" Text="Fizz">Fizz</MudComboBoxItem>
             <MudComboBoxItem Value="@("Buzz")" Text="Buzz">Buzz</MudComboBoxItem>
         </MudComboBox>
         <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" MultiSelection="true"
-                     Label="Multi Selection" HelperText="Can select multiple items" Editable="_editable" autocomplete="new-password">
+                     Label="Multi Selection" HelperText="Can select multiple items" Editable="_editable" autocomplete="new-password" Clearable>
                 <MudComboBoxItem Value="@("Foo")" Text="Foo">Foo</MudComboBoxItem>
                 <MudComboBoxItem Value="@("Bar")" Text="Bar">Bar</MudComboBoxItem>
                 <MudComboBoxItem Value="@("Fizz")" Text="Fizz">Fizz</MudComboBoxItem>

ComponentViewer.Docs/Pages/Examples/ComboboxExample5.razor

@@ -5,7 +5,7 @@
     <MudItem xs="12" sm="8" Class="d-flex gap-4 justify-center">
         <MudGrid>
             <MudItem xs="12" Class="d-flex gap-4 justify-center">
-                <MudComboBox @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Text" InputPresenter="ValuePresenter.Text" MultiSelection="_multiselection">
+                <MudComboBox @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Text" InputPresenter="ValuePresenter.Text" MultiSelection="_multiselection" Clearable>
                     <ChildContent>
                         @foreach (var item in characters)
                         {
@@ -14,7 +14,7 @@
                     </ChildContent>
                 </MudComboBox>
 
-                <MudComboBox @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Chip" InputPresenter="ValuePresenter.Chip" MultiSelection="_multiselection">
+                <MudComboBox @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Chip" InputPresenter="ValuePresenter.Chip" MultiSelection="_multiselection" Clearable>
                     <ChildContent>
                         @foreach (var item in characters)
                         {
@@ -25,7 +25,7 @@
             </MudItem>
 
             <MudItem xs="12" Class="d-flex gap-4 justify-center">
-                <MudComboBox @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="InputContent" InputPresenter="ValuePresenter.ItemContent" MultiSelection="_multiselection">
+                <MudComboBox @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="InputContent" InputPresenter="ValuePresenter.ItemContent" MultiSelection="_multiselection" Clearable>
                     <ChildContent>
                         @foreach (var item in characters)
                         {
@@ -36,7 +36,7 @@
                     </ChildContent>
                 </MudComboBox>
 
-                <MudComboBox @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Input&ItemContent" InputPresenter="ValuePresenter.ItemContent" ItemPresenter="ValuePresenter.ItemContent"  MultiSelection="_multiselection">
+                <MudComboBox @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Label="Input&ItemContent" InputPresenter="ValuePresenter.ItemContent" ItemPresenter="ValuePresenter.ItemContent" MultiSelection="_multiselection" Clearable>
                     <ChildContent>
                         @foreach (var item in characters)
                         {
@@ -49,7 +49,7 @@
             </MudItem>
 
             <MudItem xs="12">
-                <MudComboBox MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))" MultiSelection="_multiselection" @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" T="string" Label="Text Func" Variant="Variant.Filled" Placeholder="Placeholder">
+                <MudComboBox MultiSelectionTextFunc="@(new Func<List<string>, string>(GetMultiSelectionText))" MultiSelection="_multiselection" @bind-Value="@_value" @bind-SelectedValues="@_selectedValues" T="string" Label="Text Func" Variant="Variant.Filled" Placeholder="Placeholder" Clearable>
                     @foreach (var item in characters)
                     {
                         <MudComboBoxItem T="string" Value="@item" Text="@item">@item</MudComboBoxItem>

ComponentViewer.Docs/Pages/Examples/ComboboxExample6.razor

@@ -4,7 +4,7 @@
 <MudGrid>
     <MudItem xs="12" sm="8" Class="d-flex flex-column gap-4 justify-center">
         <MudComboBox @bind-Value="@_stringValue" @bind-SelectedValues="@_stringSelectedValues" Variant="Variant.Filled" Label="String Type" InputPresenter="ValuePresenter.Chip" MultiSelection="_multiselection"
-                     ChipCloseable="_chipCloseable" ChipSize="_chipSize" ChipVariant="_chipVariant" Color="_color">
+                     ChipCloseable="_chipCloseable" ChipSize="_chipSize" ChipVariant="_chipVariant" Color="_color" Clearable>
             <ChildContent>
                 @foreach (var state in states)
                 {
@@ -14,7 +14,7 @@
         </MudComboBox>
 
         <MudComboBox @bind-Value="@_intValue" @bind-SelectedValues="@_intSelectedValues" Variant="Variant.Filled" Label="Int Type" InputPresenter="ValuePresenter.Chip" MultiSelection="_multiselection"
-                     ChipCloseable="_chipCloseable" ChipSize="_chipSize" ChipVariant="_chipVariant" Color="_color">
+                     ChipCloseable="_chipCloseable" ChipSize="_chipSize" ChipVariant="_chipVariant" Color="_color" Clearable>
             <ChildContent>
                 @foreach (var num in _numbers)
                 {
@@ -24,7 +24,7 @@
         </MudComboBox>
 
         <MudComboBox @bind-Value="@_complexValue" @bind-SelectedValues="@_complexSelectedValues" Variant="Variant.Filled" Label="Complex Type" InputPresenter="ValuePresenter.Chip" MultiSelection="_multiselection"
-                     ChipCloseable="_chipCloseable" ChipSize="_chipSize" ChipVariant="_chipVariant" Color="_color" ToStringFunc="@(e => e?.Id + " - " + e?.Name)">
+                     ChipCloseable="_chipCloseable" ChipSize="_chipSize" ChipVariant="_chipVariant" Color="_color" ToStringFunc="@(e => e?.Id + " - " + e?.Name)" Clearable>
             <ChildContent>
                 @foreach (var item in _complexItems)
                 {

ComponentViewer.Docs/Pages/Examples/ComboboxExample8.razor

@@ -3,14 +3,14 @@
 
 <MudGrid>
     <MudItem xs="12" Class="d-flex gap-4 align-center justify-center">
-        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled"
+        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" Clearable
             Label="Standard (Contains)" Editable="true"  autocomplete="new-password">
             <MudComboBoxItem Value="@("Foo")" Text="Foo">Foo</MudComboBoxItem>
             <MudComboBoxItem Value="@("Bar")" Text="Bar">Bar</MudComboBoxItem>
             <MudComboBoxItem Value="@("Fizz")" Text="Fizz">Fizz</MudComboBoxItem>
             <MudComboBoxItem Value="@("Buzz")" Text="Buzz">Buzz</MudComboBoxItem>
         </MudComboBox>
-        <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" ToggleSelection="true"
+         <MudComboBox @bind-Value="@_value" @bind-Text="@_text" @bind-SelectedValues="@_selectedValues" Variant="Variant.Filled" ToggleSelection="true" Clearable
                      Label="Custom (StartsWith)" Editable="true" SearchFunc="@(new Func<string, string, string, bool>(SearchStartWith))" autocomplete="new-password">
             <MudComboBoxItem Value="@("Foo")" Text="Foo">Foo</MudComboBoxItem>
             <MudComboBoxItem Value="@("Bar")" Text="Bar">Bar</MudComboBoxItem>