From 1c0f564dac63048205b027bad428ff7df102a929 Mon Sep 17 00:00:00 2001
From: Argo Zhang <argo@live.ca>
Date: Tue, 21 Jan 2025 12:01:46 +0800
Subject: [PATCH] feat(Slider): remove InputGroup cascade parameter (#5170)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 精简逻辑移除对 InputGroup 依赖

* style: 增加 InputGroup 兼容样式

* doc: 更新示例代码
---
 .../Components/Samples/Sliders.razor              |  5 ++---
 .../Input/BootstrapInputGroup.razor.scss          | 15 ++++++++++++---
 .../Components/Slider/Slider.razor                | 15 +--------------
 .../Components/Slider/Slider.razor.scss           | 10 ----------
 .../wwwroot/scss/theme/bootstrapblazor.scss       |  1 -
 5 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/src/BootstrapBlazor.Server/Components/Samples/Sliders.razor b/src/BootstrapBlazor.Server/Components/Samples/Sliders.razor
index d40d0d3886a..958fb9ec87f 100644
--- a/src/BootstrapBlazor.Server/Components/Samples/Sliders.razor
+++ b/src/BootstrapBlazor.Server/Components/Samples/Sliders.razor
@@ -70,14 +70,13 @@
         <BootstrapInputGroup>
             <BootstrapInputGroupLabel DisplayText="@DisplayText" />
             <Slider @bind-Value="@CurrentValue" Max="MaxValue" Min="MinValue" Step="Step" UseInputEvent="UseInput"
-                    DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged" />
-
+                    DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged"></Slider>
         </BootstrapInputGroup>
     }
     else
     {
         <Slider @bind-Value="@CurrentValue" Max="MaxValue" Min="MinValue" Step="Step" UseInputEvent="UseInput"
-                DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged" />
+                DisplayText="@DisplayText" ShowLabel="ShowLabel" IsDisabled="IsDisabled" OnValueChanged="OnRangeSliderValueChanged"></Slider>
     }
     <section ignore>
         <ConsoleLogger @ref="Logger" />
diff --git a/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss b/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss
index 32a8ca27b9a..3af26a56b9f 100644
--- a/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss
+++ b/src/BootstrapBlazor/Components/Input/BootstrapInputGroup.razor.scss
@@ -61,14 +61,23 @@
 
     > .form-check {
         --bb-form-check-padding: 0.375rem 0.75rem;
+        display: flex;
+        align-items: center;
+        padding: var(--bb-form-check-padding);
+    }
+
+    > .form-range {
+        --bb-form-range-padding: 0.375rem 0.75rem;
+        height: var(--bb-height);
+        padding: var(--bb-form-range-padding);
+    }
+
+    > .form-check, .form-range {
         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);
diff --git a/src/BootstrapBlazor/Components/Slider/Slider.razor b/src/BootstrapBlazor/Components/Slider/Slider.razor
index a80d8cdb86a..3209a2cf035 100644
--- a/src/BootstrapBlazor/Components/Slider/Slider.razor
+++ b/src/BootstrapBlazor/Components/Slider/Slider.razor
@@ -7,18 +7,5 @@
 {
     <BootstrapLabel Value="@DisplayText" ShowLabelTooltip="ShowLabelTooltip" for="@Id" />
 }
-@if (InputGroup == null)
-{
-    @RenderRange
-}
-else
-{
-    <div class="form-control range-group">
-        @RenderRange
-    </div>
-}
 
-@code {
-    RenderFragment RenderRange =>
-    @<input type="range" id="@Id" @attributes="@AdditionalAttributes" class="@ClassString" disabled="@IsDisabled" @bind-value="CurrentValueAsString" @bind-value:event="@EventString" step="@StepString" min="@MinString" max="@MaxString" @onblur="OnBlur">;
-}
+<input @attributes="@AdditionalAttributes" type="range" id="@Id" class="@ClassString" disabled="@IsDisabled" @bind-value="CurrentValueAsString" @bind-value:event="@EventString" step="@StepString" min="@MinString" max="@MaxString" @onblur="OnBlur">
diff --git a/src/BootstrapBlazor/Components/Slider/Slider.razor.scss b/src/BootstrapBlazor/Components/Slider/Slider.razor.scss
index 06077b0ad0b..8abdb28c092 100644
--- a/src/BootstrapBlazor/Components/Slider/Slider.razor.scss
+++ b/src/BootstrapBlazor/Components/Slider/Slider.razor.scss
@@ -1,13 +1,3 @@
-.range-group {
-    display: flex;
-    align-items: center;
-    --bb-form-range-height: #{$bb-form-range-height};
-
-    .form-range {
-        height: var(--bb-form-range-height);
-    }
-}
-
 .row {
     --bb-form-range-margin-top: #{$bb-form-range-margin-top};
 
diff --git a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
index c265b0b32ee..e5114bd94bd 100644
--- a/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
+++ b/src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
@@ -536,7 +536,6 @@ $bb-skeleton-gradient-from-color: rgba(var(--bs-body-color-rgb), 0.06);
 $bb-skeleton-gradient-to-color: rgba(var(--bs-body-color-rgb), 0.15);
 
 // Slider
-$bb-form-range-height: 1rem;
 $bb-form-range-margin-top: 6px;
 
 // Speech