fix(Checkbox): redesign checkbox style compatible InputGroup (#5168)

* refactor: 代码格式化

* fix: 修复 DisplayText 丢失问题

* doc: 更新示例

* test: 更新单元测试

* refactor: 精简代码适配 InputGroup

* style: 增加适配样式

Author: ArgoZhang

src/BootstrapBlazor/Components/Checkbox/Checkbox.razor

@@ -6,39 +6,22 @@
 {
     <BootstrapLabel required="@Required" for="@Id" ShowLabelTooltip="ShowLabelTooltip" Value="@DisplayText" />
 }
-@if(InputGroup == null)
-{
-    @RenderCheckbox
-}
-else
-{
-    <div class="form-control">
-        @RenderCheckbox
-    </div>
-}
-
-@code {
-    RenderFragment RenderCheckbox =>
-    @<div @attributes="AdditionalAttributes" class="@ClassString">
-        <input type="checkbox" id="@Id" class="@InputClassString" disabled="@Disabled" checked="@CheckedString"
-               @onclick="OnToggleClick" @onclick:stopPropagation="StopPropagation" @onclick:preventDefault="false" />
-        @if (IsShowAfterLabel)
-        {
-            @RenderLabel
-        }
-    </div>;
-
-    RenderFragment RenderLabel =>
-    @<label class="form-check-label" for="@Id">
-        @if(ShowLabelTooltip is true)
-        {
-            <Tooltip Title="@DisplayText">
+<div @attributes="AdditionalAttributes" class="@ClassString">
+    <input type="checkbox" id="@Id" class="@InputClassString" disabled="@Disabled" checked="@CheckedString"
+           @onclick="OnToggleClick" @onclick:stopPropagation="StopPropagation" @onclick:preventDefault="false" />
+    @if (IsShowAfterLabel)
+    {
+        <label class="form-check-label" for="@Id">
+            @if (ShowLabelTooltip is true)
+            {
+                <Tooltip Title="@DisplayText">
+                    @DisplayText
+                </Tooltip>
+            }
+            else
+            {
                 @DisplayText
-            </Tooltip>
-        }
-        else
-        {
-            @DisplayText
-        }
-    </label>;
-}
+            }
+        </label>
+    }
+</div>

src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss

@@ -58,6 +58,22 @@
     > .form-label {
         display: none;
     }
+
+    > .form-check {
+        --bb-form-check-padding: 0.375rem 0.75rem;
+        border: 1px solid var(--bs-border-color);
+        border-radius: var(--bs-border-radius);
+        flex-grow: 1;
+        width: 1%;
+        min-width: 0;
+        display: flex;
+        align-items: center;
+        padding: var(--bb-form-check-padding);
+
+        &:hover {
+            border: 1px solid var(--bb-border-hover-color);
+        }
+    }
 }
 
 .input-group-xs {