Merge branch 'main' into feat-radio-button

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/CheckboxLists.razor

@@ -128,7 +128,7 @@
                 <BootstrapInput @bind-Value="@Model.Name" />
             </div>
             <div class="col-12 col-sm-6">
-                <CheckboxList @bind-Value="@SelectedItems" IsButton="true" Items="FooItems" />
+                <CheckboxList @bind-Value="@SelectedItems" IsButton="true" Items="FooItems" ShowLabel="true" DisplayText="Hobby" />
             </div>
         </div>
     </ValidateForm>

src/BootstrapBlazor/BootstrapBlazor.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Razor">
 
   <PropertyGroup>
-    <Version>9.9.1-beta02</Version>
+    <Version>9.9.1-beta03</Version>
   </PropertyGroup>
 
   <ItemGroup>

src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor

@@ -13,7 +13,8 @@
         <div class="@ButtonGroupClassString" role="group">
             @foreach (var item in Items)
             {
-                <DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)" class="@GetButtonItemClassString(item)">
+                <DynamicElement TagName="span" TriggerClick="!IsDisabled" OnClick="() => OnClick(item)"
+                                class="@GetButtonItemClassString(item)">
                     @item.Text
                 </DynamicElement>
             }

src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor.cs

@@ -38,7 +38,8 @@ public partial class CheckboxList<TValue> : ValidateBase<TValue>
         .Build();
 
     private string? GetButtonItemClassString(SelectedItem item) => CssBuilder.Default("btn")
-        .AddClass($"active bg-{Color.ToDescriptionString()}", CurrentValueAsString.Split(',', StringSplitOptions.RemoveEmptyEntries).Contains(item.Value))
+        .AddClass($"btn-outline-{Color.ToDescriptionString()}")
+        .AddClass($"active", CurrentValueAsString.Split(',', StringSplitOptions.RemoveEmptyEntries).Contains(item.Value))
         .Build();
 
     /// <summary>

src/BootstrapBlazor/Components/Checkbox/CheckboxList.razor.scss

@@ -1,4 +1,4 @@
-.checkbox-list {
+.checkbox-list {
     --bb-checkbox-item-width: #{$bb-checkbox-item-width};
     min-height: var(--bb-height);
     height: auto;
@@ -38,7 +38,6 @@
     }
 
     .btn-group {
-        border: var(--bs-border-width) solid var(--bs-border-color);
         display: inline-flex;
         flex: 0 !important;
         flex-wrap: nowrap;
@@ -54,13 +53,19 @@
 
         &.disabled {
             > span {
+                --bs-btn-hover-color: var(--bs-btn-color);
+                --bs-btn-active-color: var(--bs-btn-color);
                 opacity: var(--bs-btn-disabled-opacity);
 
                 &:not(.active) {
                     background-color: var(--bs-secondary-bg);
                 }
             }
         }
+
+        .btn-outline-info {
+            --bs-btn-active-color: #fff;
+        }
     }
 }
 

src/BootstrapBlazor/Components/Collapse/Collapse.razor

@@ -19,13 +19,16 @@
                                 @item.HeaderTemplate
                             </div>
                         }
-                        else if(!string.IsNullOrEmpty(item.Icon))
-                        {
-                            <i class="@GetItemIconString(item)"></i>
-                        }
                         else
                         {
-                            <span>@item.Text</span>
+                            if (!string.IsNullOrEmpty(item.Icon))
+                            {
+                                <i class="@GetItemIconString(item)"></i>
+                            }
+                            if (!string.IsNullOrEmpty(item.Text))
+                            {
+                                <span>@item.Text</span>
+                            }
                         }
                     </div>
                 </div>