diff --git a/Backpack-SwiftUI/Slider/Classes/BPKRangeSlider.swift b/Backpack-SwiftUI/Slider/Classes/BPKRangeSlider.swift index 2078480bc..87d882ac9 100644 --- a/Backpack-SwiftUI/Slider/Classes/BPKRangeSlider.swift +++ b/Backpack-SwiftUI/Slider/Classes/BPKRangeSlider.swift @@ -44,6 +44,8 @@ public struct BPKRangeSlider: View { private let flareHeight: CGFloat = 6 private var trailingAccessibilityLabel = "" private var leadingAccessibilityLabel = "" + @State private var isDraggingLeadingThumb = false + @State private var isDraggingTrailingThumb = false @State var height: CGFloat = .zero @@ -100,57 +102,68 @@ public struct BPKRangeSlider: View { // swiftlint:disable closure_body_length // swiftlint:disable function_body_length @ViewBuilder private func sliderView(sliderSize: CGSize) -> some View { - ZStack(alignment: .bottom) { - Capsule() - .fill(Color(.lineColor)) - .frame(width: sliderSize.width, height: sliderHeight) - .padding(.bottom, (thumbSize / 2) - (sliderHeight / 2)) - Rectangle() - .fill(Color(.coreAccentColor)) - .frame(width: fillLineWidth(sliderSize: sliderSize), height: sliderHeight) - .offset(x: fillLineOffset(sliderSize: sliderSize)) - .padding(.bottom, (thumbSize / 2) - (sliderHeight / 2)) - SliderThumbView( - size: thumbSize, - offset: trailingThumbOffset(sliderSize: sliderSize), - onDrag: { value in - handleTrailingThumbDrag(value: value, sliderSize: sliderSize) - }, - onDragEnded: { onDragEnded(selectedRange) } - ) - - .accessibilityLabel(trailingAccessibilityLabel) - .accessibility(value: Text("\(selectedRange.upperBound)")) - .accessibilityAdjustableAction { direction in - switch direction { - case .increment: incrementTrailing() - case .decrement: decrementTrailing() - @unknown default: break + ZStack(alignment: .center) { + ZStack(alignment: .bottom) { + Capsule() + .fill(Color(.lineColor)) + .frame(width: sliderSize.width, height: sliderHeight) + .padding(.bottom, (thumbSize / 2) - (sliderHeight / 2)) + Rectangle() + .fill(Color(.coreAccentColor)) + .frame(width: fillLineWidth(sliderSize: sliderSize), height: sliderHeight) + .offset(x: fillLineOffset(sliderSize: sliderSize)) + .padding(.bottom, (thumbSize / 2) - (sliderHeight / 2)) + SliderThumbView( + size: thumbSize, + offset: trailingThumbOffset(sliderSize: sliderSize), + onDrag: { value in + isDraggingTrailingThumb = true + handleTrailingThumbDrag(value: value, sliderSize: sliderSize) + }, + onDragEnded: { + onDragEnded(selectedRange) + isDraggingTrailingThumb = false + } + ) + + .accessibilityLabel(trailingAccessibilityLabel) + .accessibility(value: Text("\(selectedRange.upperBound)")) + .accessibilityAdjustableAction { direction in + switch direction { + case .increment: incrementTrailing() + case .decrement: decrementTrailing() + @unknown default: break + } + } + + SliderThumbView( + size: thumbSize, + offset: leadingThumbOffset(sliderSize: sliderSize), + onDrag: { value in + isDraggingLeadingThumb = true + handleLeadingThumbDrag(value: value, sliderSize: sliderSize) + }, + onDragEnded: { + isDraggingLeadingThumb = false + onDragEnded(selectedRange) + } + ) + .accessibilityLabel(leadingAccessibilityLabel) + .accessibility(value: Text("\(selectedRange.lowerBound)")) + .accessibilityAdjustableAction { direction in + switch direction { + case .increment: incrementLeading() + case .decrement: decrementLeading() + @unknown default: break + } } } - if let thumbnailLabels = thumbnailLabels { + if let thumbnailLabels = thumbnailLabels, isDraggingTrailingThumb { thumbLabel(thumbnailLabels.upperThumbnail) .offset(x: trailingThumbOffset(sliderSize: sliderSize)) .accessibilityHidden(true) } - SliderThumbView( - size: thumbSize, - offset: leadingThumbOffset(sliderSize: sliderSize), - onDrag: { value in - handleLeadingThumbDrag(value: value, sliderSize: sliderSize) - }, - onDragEnded: { onDragEnded(selectedRange) } - ) - .accessibilityLabel(leadingAccessibilityLabel) - .accessibility(value: Text("\(selectedRange.lowerBound)")) - .accessibilityAdjustableAction { direction in - switch direction { - case .increment: incrementLeading() - case .decrement: decrementLeading() - @unknown default: break - } - } - if let thumbnailLabels = thumbnailLabels { + if let thumbnailLabels = thumbnailLabels, isDraggingLeadingThumb { thumbLabel(thumbnailLabels.lowerThumbnail) .offset(x: leadingThumbOffset(sliderSize: sliderSize)) .accessibilityHidden(true) @@ -167,7 +180,8 @@ public struct BPKRangeSlider: View { .padding(.bottom, flareHeight) .background(.coreAccentColor) .clipShape(LabelFlareShape(flareHeight: flareHeight)) - .padding(.bottom, thumbSize + BPKSpacing.sm.value) + .frame(height: thumbSize) + .offset(y: -(thumbSize + flareHeight + BPKSpacing.sm.value)) } /// Sets the accessibility label for the trailing thumb. diff --git a/Backpack-SwiftUI/Tests/Slider/SliderTests.swift b/Backpack-SwiftUI/Tests/Slider/SliderTests.swift index 919b5cd99..6d9dd27e8 100644 --- a/Backpack-SwiftUI/Tests/Slider/SliderTests.swift +++ b/Backpack-SwiftUI/Tests/Slider/SliderTests.swift @@ -42,21 +42,6 @@ class SliderTests: XCTestCase { .padding() ) } - - func testRangeSliderWithThumbnailLabels() { - assertSnapshot( - BPKRangeSlider( - selectedRange: .constant(-5...5), - sliderBounds: -20...20, - thumbnailLabels: .init( - lowerThumbnail: "BPK", - upperThumbnail: "OK" - ) - ) - .frame(width: 200, height: 70) - .padding() - ) - } func testCanCalculateNewValueFromDrag() { let newValue = BPKSliderHelpers.calculateNewValueFromDrag( diff --git a/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.dark-mode.png b/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.dark-mode.png deleted file mode 100644 index 0a0a29e6b..000000000 Binary files a/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.dark-mode.png and /dev/null differ diff --git a/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.light-mode.png b/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.light-mode.png deleted file mode 100644 index 5dfaf98d5..000000000 Binary files a/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.light-mode.png and /dev/null differ diff --git a/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.rtl.png b/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.rtl.png deleted file mode 100644 index 6cb41cd23..000000000 Binary files a/Backpack-SwiftUI/Tests/Slider/__Snapshots__/SliderTests/testRangeSliderWithThumbnailLabels.rtl.png and /dev/null differ