feat(RadioList): add outline style (#6540)

* refactor: 更改样式

* style: 微调样式

* style: 调整样式

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor/Components/Radio/RadioList.razor.cs

@@ -46,7 +46,8 @@ public partial class RadioList<TValue>
         .Build();
 
     private string? GetButtonItemClassString(SelectedItem item) => CssBuilder.Default("btn")
-        .AddClass($"active bg-{Color.ToDescriptionString()}", CurrentValueAsString == item.Value)
+        .AddClass($"btn-outline-{Color.ToDescriptionString()}")
+        .AddClass("active", CurrentValueAsString == item.Value)
         .Build();
 
     /// <summary>

src/BootstrapBlazor/Components/Radio/RadioList.razor.scss

@@ -1,4 +1,4 @@
-.radio-list {
+.radio-list {
     --bb-radio-item-width: #{$bb-radio-item-width};
     --bb-radio-item-padding: #{$bb-radio-item-padding};
     --bb-radio-group-item-active-color: #{$bb-radio-group-item-active-color};
@@ -24,7 +24,6 @@
     }
 
     &.btn-group {
-        border: var(--bs-border-width) solid var(--bs-border-color);
         display: inline-flex;
         flex: 0 !important;
         flex-wrap: nowrap;
@@ -39,12 +38,18 @@
         }
 
         &.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: var(--bb-radio-group-item-active-color);
+        }
     }
 
     &.btn-group-vertical {

test/UnitTest/Components/RadioTest.cs

@@ -232,13 +232,13 @@ public void IsButton_Ok()
         {
             pb.Add(a => a.Color, Color.Danger);
         });
-        cut.Contains("btn active bg-danger");
+        cut.Contains("btn btn-outline-danger");
 
         cut.InvokeAsync(() =>
         {
             var btn = cut.Find(".btn");
             btn.Click();
-            cut.Contains("btn active bg-danger");
+            cut.Contains("btn btn-outline-danger active");
         });
     }