From 76f4dd8e76d4c0047953fc8a5b8b65614d7375f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D5=A1=D3=84=D5=A1?= <wingkwong.code@gmail.com>
Date: Sun, 5 May 2024 00:17:04 +0800
Subject: [PATCH] fix(slider): missing marks when hideThumb is true & revise
 slider styles (#2883)

* chore(slider): include marks in hideThumb

* fix(slider): revise slider styles

* feat(changeset): add changeset

* feat(slider): add tests with marks and hideThumb
---
 .changeset/eighty-kids-drop.md                |  5 ++
 .../slider/__tests__/slider.test.tsx          | 74 +++++++++++++++++++
 .../slider/stories/slider.stories.tsx         | 19 ++++-
 packages/core/theme/src/components/slider.ts  | 15 ++--
 4 files changed, 105 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/eighty-kids-drop.md

diff --git a/.changeset/eighty-kids-drop.md b/.changeset/eighty-kids-drop.md
new file mode 100644
index 0000000000..9b4e8e1635
--- /dev/null
+++ b/.changeset/eighty-kids-drop.md
@@ -0,0 +1,5 @@
+---
+"@nextui-org/theme": patch
+---
+
+Revise slider styles (#2880)
diff --git a/packages/components/slider/__tests__/slider.test.tsx b/packages/components/slider/__tests__/slider.test.tsx
index 9507e3e80e..247baad70c 100644
--- a/packages/components/slider/__tests__/slider.test.tsx
+++ b/packages/components/slider/__tests__/slider.test.tsx
@@ -214,3 +214,77 @@ describe("Slider", () => {
     expect(setValues).toStrictEqual([[15, 25]]);
   });
 });
+
+it("should supports hideThumb", async function () {
+  const {container} = render(<Slider hideThumb defaultValue={20} label="The Label" />);
+
+  const track = container.querySelector("[data-slot='track']");
+
+  expect(track).toHaveAttribute("data-thumb-hidden", "true");
+});
+
+it("should supports marks", async function () {
+  const {container} = render(
+    <Slider
+      hideThumb
+      defaultValue={20}
+      label="The Label"
+      marks={[
+        {
+          value: 0.2,
+          label: "20%",
+        },
+        {
+          value: 0.5,
+          label: "50%",
+        },
+        {
+          value: 0.8,
+          label: "80%",
+        },
+      ]}
+      maxValue={1}
+      minValue={0}
+      step={0.1}
+    />,
+  );
+
+  const marks = container.querySelectorAll("[data-slot='mark']");
+
+  expect(marks).toHaveLength(3);
+});
+
+it("should supports marks with hideThumb", async function () {
+  const {container} = render(
+    <Slider
+      hideThumb
+      defaultValue={20}
+      label="The Label"
+      marks={[
+        {
+          value: 0.2,
+          label: "20%",
+        },
+        {
+          value: 0.5,
+          label: "50%",
+        },
+        {
+          value: 0.8,
+          label: "80%",
+        },
+      ]}
+      maxValue={1}
+      minValue={0}
+      step={0.1}
+    />,
+  );
+
+  const track = container.querySelector("[data-slot='track']");
+
+  expect(track).toHaveAttribute("data-thumb-hidden", "true");
+
+  const marks = container.querySelectorAll("[data-slot='mark']");
+
+  expect(marks).toHaveLength(3);
+});
diff --git a/packages/components/slider/stories/slider.stories.tsx b/packages/components/slider/stories/slider.stories.tsx
index bcbf3b79dd..64022e7995 100644
--- a/packages/components/slider/stories/slider.stories.tsx
+++ b/packages/components/slider/stories/slider.stories.tsx
@@ -315,7 +315,24 @@ export const ThumbHidden = {
     "aria-label": "Player progress",
     color: "foreground",
     hideThumb: true,
-    defaultValue: 20,
+    maxValue: 1,
+    minValue: 0,
+    step: 0.1,
+    marks: [
+      {
+        value: 0.2,
+        label: "20%",
+      },
+      {
+        value: 0.5,
+        label: "50%",
+      },
+      {
+        value: 0.8,
+        label: "80%",
+      },
+    ],
+    defaultValue: 0.2,
   },
 };
 
diff --git a/packages/core/theme/src/components/slider.ts b/packages/core/theme/src/components/slider.ts
index e21b870a29..a4385a0c29 100644
--- a/packages/core/theme/src/components/slider.ts
+++ b/packages/core/theme/src/components/slider.ts
@@ -166,6 +166,7 @@ const slider = tv({
     hasMarks: {
       true: {
         base: "mb-5",
+        mark: "cursor-pointer",
       },
       false: {},
     },
@@ -185,7 +186,7 @@ const slider = tv({
     hideThumb: {
       true: {
         thumb: "sr-only",
-        track: "overflow-hidden cursor-pointer",
+        track: "cursor-pointer",
       },
     },
     hasSingleThumb: {
@@ -266,7 +267,7 @@ const slider = tv({
       isVertical: false,
       class: {
         track:
-          "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.5)/2)]",
+          "h-1 my-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-x-[calc(theme(spacing.5)/2)]",
       },
     },
     {
@@ -274,7 +275,7 @@ const slider = tv({
       isVertical: false,
       class: {
         track:
-          "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.6)/2)]",
+          "h-3 my-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-x-[calc(theme(spacing.6)/2)]",
       },
     },
     {
@@ -282,7 +283,7 @@ const slider = tv({
       isVertical: false,
       class: {
         track:
-          "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] data-[thumb-hidden=false]:border-x-[calc(theme(spacing.7)/2)]",
+          "h-7 my-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-x-[calc(theme(spacing.7)/2)]",
       },
     },
     // size && isVertical
@@ -291,7 +292,7 @@ const slider = tv({
       isVertical: true,
       class: {
         track:
-          "w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.5)/2)]",
+          "w-1 mx-[calc((theme(spacing.5)-theme(spacing.1))/2)] border-y-[calc(theme(spacing.5)/2)]",
       },
     },
     {
@@ -299,7 +300,7 @@ const slider = tv({
       isVertical: true,
       class: {
         track:
-          "w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.6)/2)]",
+          "w-3 mx-[calc((theme(spacing.6)-theme(spacing.3))/2)] border-y-[calc(theme(spacing.6)/2)]",
       },
     },
     {
@@ -307,7 +308,7 @@ const slider = tv({
       isVertical: true,
       class: {
         track:
-          "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] data-[thumb-hidden=false]:border-y-[calc(theme(spacing.7)/2)]",
+          "w-7 mx-[calc((theme(spacing.7)-theme(spacing.5))/2)] border-y-[calc(theme(spacing.7)/2)]",
       },
     },
     // color && !isVertical && hasSingleThumb