From 0b0f21334808e6ab6e9f97eb0ffe393850474465 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Thu, 20 Mar 2025 21:34:21 +0800 Subject: [PATCH 1/6] fix(slider): track fill start & end --- packages/components/slider/src/use-slider.ts | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/components/slider/src/use-slider.ts b/packages/components/slider/src/use-slider.ts index 1526ccd33d..485f1af25f 100644 --- a/packages/components/slider/src/use-slider.ts +++ b/packages/components/slider/src/use-slider.ts @@ -311,11 +311,15 @@ export function useSlider(originalProps: UseSliderProps) { }; const getTrackProps: PropGetter = (props = {}) => { + const fillWidth = (endOffset - startOffset) * 100; + return { ref: trackRef, "data-slot": "track", "data-thumb-hidden": !!originalProps?.hideThumb, "data-vertical": isVertical, + "data-fill-start": fillWidth > 0, + "data-fill-end": fillWidth == 100, className: slots.track({class: classNames?.track}), ...trackProps, ...props, From cd8be2d4f099a513da370046689549a831785fca Mon Sep 17 00:00:00 2001 From: WK Wong Date: Thu, 20 Mar 2025 21:34:57 +0800 Subject: [PATCH 2/6] fix(theme): revise slider display with `hideThumb` --- packages/core/theme/src/components/slider.ts | 52 +++++++++++++++++++- 1 file changed, 51 insertions(+), 1 deletion(-) diff --git a/packages/core/theme/src/components/slider.ts b/packages/core/theme/src/components/slider.ts index 3811564678..f9e540900f 100644 --- a/packages/core/theme/src/components/slider.ts +++ b/packages/core/theme/src/components/slider.ts @@ -311,11 +311,12 @@ const slider = tv({ "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]", }, }, - // color && !isVertical && hasSingleThumb + // color && !isVertical && hasSingleThumb & !hideThumb { color: "foreground", isVertical: false, hasSingleThumb: true, + hideThumb: false, class: { track: "border-s-foreground", }, @@ -324,6 +325,7 @@ const slider = tv({ color: "primary", isVertical: false, hasSingleThumb: true, + hideThumb: false, class: { track: "border-s-primary", }, @@ -332,6 +334,7 @@ const slider = tv({ color: "secondary", isVertical: false, hasSingleThumb: true, + hideThumb: false, class: { track: "border-s-secondary", }, @@ -340,6 +343,7 @@ const slider = tv({ color: "success", isVertical: false, hasSingleThumb: true, + hideThumb: false, class: { track: "border-s-success", }, @@ -348,6 +352,7 @@ const slider = tv({ color: "warning", isVertical: false, hasSingleThumb: true, + hideThumb: false, class: { track: "border-s-warning", }, @@ -356,10 +361,55 @@ const slider = tv({ color: "danger", isVertical: false, hasSingleThumb: true, + hideThumb: false, class: { track: "border-s-danger", }, }, + // color && hideThumb + { + color: "foreground", + hideThumb: true, + class: { + track: + "data-[fill-start=true]:border-s-foreground data-[fill-end=true]:border-e-foreground", + }, + }, + { + color: "primary", + hideThumb: true, + class: { + track: "data-[fill-start=true]:border-s-primary data-[fill-end=true]:border-e-primary", + }, + }, + { + color: "secondary", + hideThumb: true, + class: { + track: "data-[fill-start=true]:border-s-secondary data-[fill-end=true]:border-e-secondary", + }, + }, + { + color: "success", + hideThumb: true, + class: { + track: "data-[fill-start=true]:border-s-success data-[fill-end=true]:border-e-success", + }, + }, + { + color: "warning", + hideThumb: true, + class: { + track: "data-[fill-start=true]:border-s-warning data-[fill-end=true]:border-e-warning", + }, + }, + { + color: "danger", + hideThumb: true, + class: { + track: "data-[fill-start=true]:border-s-danger data-[fill-end=true]:border-e-danger", + }, + }, // color && isVertical && hasSingleThumb { color: "foreground", From 72211c04010ff7f8cad91b3d1f549e487c464d8a Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 22 Mar 2025 22:58:46 +0800 Subject: [PATCH 3/6] fix(theme): handle isVertical case --- packages/core/theme/src/components/slider.ts | 35 ++++++++++++-------- 1 file changed, 21 insertions(+), 14 deletions(-) diff --git a/packages/core/theme/src/components/slider.ts b/packages/core/theme/src/components/slider.ts index f9e540900f..c3be93620b 100644 --- a/packages/core/theme/src/components/slider.ts +++ b/packages/core/theme/src/components/slider.ts @@ -366,10 +366,11 @@ const slider = tv({ track: "border-s-danger", }, }, - // color && hideThumb + // color && !isVertical && hideThumb { color: "foreground", hideThumb: true, + isVertical: false, class: { track: "data-[fill-start=true]:border-s-foreground data-[fill-end=true]:border-e-foreground", @@ -378,6 +379,7 @@ const slider = tv({ { color: "primary", hideThumb: true, + isVertical: false, class: { track: "data-[fill-start=true]:border-s-primary data-[fill-end=true]:border-e-primary", }, @@ -385,6 +387,7 @@ const slider = tv({ { color: "secondary", hideThumb: true, + isVertical: false, class: { track: "data-[fill-start=true]:border-s-secondary data-[fill-end=true]:border-e-secondary", }, @@ -392,6 +395,7 @@ const slider = tv({ { color: "success", hideThumb: true, + isVertical: false, class: { track: "data-[fill-start=true]:border-s-success data-[fill-end=true]:border-e-success", }, @@ -399,6 +403,7 @@ const slider = tv({ { color: "warning", hideThumb: true, + isVertical: false, class: { track: "data-[fill-start=true]:border-s-warning data-[fill-end=true]:border-e-warning", }, @@ -406,57 +411,59 @@ const slider = tv({ { color: "danger", hideThumb: true, + isVertical: false, class: { track: "data-[fill-start=true]:border-s-danger data-[fill-end=true]:border-e-danger", }, }, - // color && isVertical && hasSingleThumb + // color && isVertical && hideThumb { color: "foreground", + hideThumb: true, isVertical: true, - hasSingleThumb: true, class: { - track: "border-b-foreground", + track: + "data-[fill-start=true]:border-b-foreground data-[fill-end=true]:border-t-foreground", }, }, { color: "primary", + hideThumb: true, isVertical: true, - hasSingleThumb: true, class: { - track: "border-b-primary", + track: "data-[fill-start=true]:border-b-primary data-[fill-end=true]:border-t-primary", }, }, { color: "secondary", + hideThumb: true, isVertical: true, - hasSingleThumb: true, class: { - track: "border-b-secondary", + track: "data-[fill-start=true]:border-b-secondary data-[fill-end=true]:border-t-secondary", }, }, { color: "success", + hideThumb: true, isVertical: true, - hasSingleThumb: true, class: { - track: "border-b-success", + track: "data-[fill-start=true]:border-b-success data-[fill-end=true]:border-t-success", }, }, { color: "warning", + hideThumb: true, isVertical: true, - hasSingleThumb: true, class: { - track: "border-b-warning", + track: "data-[fill-start=true]:border-b-warning data-[fill-end=true]:border-t-warning", }, }, { color: "danger", + hideThumb: true, isVertical: true, - hasSingleThumb: true, class: { - track: "border-b-danger", + track: "data-[fill-start=true]:border-b-danger data-[fill-end=true]:border-t-danger", }, }, ], From c5a334dd1b715192bc23338a6a7273f7c303fc31 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 22 Mar 2025 23:34:25 +0800 Subject: [PATCH 4/6] fix(slider): handle range case --- packages/components/slider/src/use-slider.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/components/slider/src/use-slider.ts b/packages/components/slider/src/use-slider.ts index 485f1af25f..a88295da41 100644 --- a/packages/components/slider/src/use-slider.ts +++ b/packages/components/slider/src/use-slider.ts @@ -318,8 +318,15 @@ export function useSlider(originalProps: UseSliderProps) { "data-slot": "track", "data-thumb-hidden": !!originalProps?.hideThumb, "data-vertical": isVertical, - "data-fill-start": fillWidth > 0, - "data-fill-end": fillWidth == 100, + ...(hasSingleThumb + ? { + "data-fill-start": fillWidth > 0, + "data-fill-end": fillWidth == 100, + } + : { + "data-fill-start": startOffset == 0, + "data-fill-end": startOffset * 100 + fillWidth == 100, + }), className: slots.track({class: classNames?.track}), ...trackProps, ...props, From 9bd1bee5f5a1c1a4b1a75039e53dd7acf98fe4f2 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 22 Mar 2025 23:35:03 +0800 Subject: [PATCH 5/6] refactor(theme): simplify thumb related styles --- packages/core/theme/src/components/slider.ts | 71 +------------------- 1 file changed, 2 insertions(+), 69 deletions(-) diff --git a/packages/core/theme/src/components/slider.ts b/packages/core/theme/src/components/slider.ts index c3be93620b..f0d10ffe43 100644 --- a/packages/core/theme/src/components/slider.ts +++ b/packages/core/theme/src/components/slider.ts @@ -311,66 +311,10 @@ const slider = tv({ "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]", }, }, - // color && !isVertical && hasSingleThumb & !hideThumb + // color && !isVertical { color: "foreground", isVertical: false, - hasSingleThumb: true, - hideThumb: false, - class: { - track: "border-s-foreground", - }, - }, - { - color: "primary", - isVertical: false, - hasSingleThumb: true, - hideThumb: false, - class: { - track: "border-s-primary", - }, - }, - { - color: "secondary", - isVertical: false, - hasSingleThumb: true, - hideThumb: false, - class: { - track: "border-s-secondary", - }, - }, - { - color: "success", - isVertical: false, - hasSingleThumb: true, - hideThumb: false, - class: { - track: "border-s-success", - }, - }, - { - color: "warning", - isVertical: false, - hasSingleThumb: true, - hideThumb: false, - class: { - track: "border-s-warning", - }, - }, - { - color: "danger", - isVertical: false, - hasSingleThumb: true, - hideThumb: false, - class: { - track: "border-s-danger", - }, - }, - // color && !isVertical && hideThumb - { - color: "foreground", - hideThumb: true, - isVertical: false, class: { track: "data-[fill-start=true]:border-s-foreground data-[fill-end=true]:border-e-foreground", @@ -378,7 +322,6 @@ const slider = tv({ }, { color: "primary", - hideThumb: true, isVertical: false, class: { track: "data-[fill-start=true]:border-s-primary data-[fill-end=true]:border-e-primary", @@ -386,7 +329,6 @@ const slider = tv({ }, { color: "secondary", - hideThumb: true, isVertical: false, class: { track: "data-[fill-start=true]:border-s-secondary data-[fill-end=true]:border-e-secondary", @@ -394,7 +336,6 @@ const slider = tv({ }, { color: "success", - hideThumb: true, isVertical: false, class: { track: "data-[fill-start=true]:border-s-success data-[fill-end=true]:border-e-success", @@ -402,7 +343,6 @@ const slider = tv({ }, { color: "warning", - hideThumb: true, isVertical: false, class: { track: "data-[fill-start=true]:border-s-warning data-[fill-end=true]:border-e-warning", @@ -410,16 +350,14 @@ const slider = tv({ }, { color: "danger", - hideThumb: true, isVertical: false, class: { track: "data-[fill-start=true]:border-s-danger data-[fill-end=true]:border-e-danger", }, }, - // color && isVertical && hideThumb + // color && isVertical { color: "foreground", - hideThumb: true, isVertical: true, class: { track: @@ -428,7 +366,6 @@ const slider = tv({ }, { color: "primary", - hideThumb: true, isVertical: true, class: { track: "data-[fill-start=true]:border-b-primary data-[fill-end=true]:border-t-primary", @@ -436,7 +373,6 @@ const slider = tv({ }, { color: "secondary", - hideThumb: true, isVertical: true, class: { track: "data-[fill-start=true]:border-b-secondary data-[fill-end=true]:border-t-secondary", @@ -444,7 +380,6 @@ const slider = tv({ }, { color: "success", - hideThumb: true, isVertical: true, class: { track: "data-[fill-start=true]:border-b-success data-[fill-end=true]:border-t-success", @@ -452,7 +387,6 @@ const slider = tv({ }, { color: "warning", - hideThumb: true, isVertical: true, class: { track: "data-[fill-start=true]:border-b-warning data-[fill-end=true]:border-t-warning", @@ -460,7 +394,6 @@ const slider = tv({ }, { color: "danger", - hideThumb: true, isVertical: true, class: { track: "data-[fill-start=true]:border-b-danger data-[fill-end=true]:border-t-danger", From 328ce4579802bef0fcad8820b9e950e9c7f55ca2 Mon Sep 17 00:00:00 2001 From: WK Wong Date: Sat, 22 Mar 2025 23:35:14 +0800 Subject: [PATCH 6/6] chore(changeset): add changeset --- .changeset/funny-yaks-smoke.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/funny-yaks-smoke.md diff --git a/.changeset/funny-yaks-smoke.md b/.changeset/funny-yaks-smoke.md new file mode 100644 index 0000000000..bca5b0421e --- /dev/null +++ b/.changeset/funny-yaks-smoke.md @@ -0,0 +1,6 @@ +--- +"@heroui/theme": patch +"@heroui/slider": patch +--- + +fixed slider display when `hideThumb` is `true` (#5085)