fix(slider): missing marks when hideThumb is true & revise slider sty…

…les (#2883) * chore(slider): include marks in hideThumb * fix(slider): revise slider styles * feat(changeset): add changeset * feat(slider): add tests with marks and hideThumb
nextui-org · May 4, 2024 · 76f4dd8 · 76f4dd8
1 parent dc24587
commit 76f4dd8
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 8 deletions.
diff --git a/.changeset/eighty-kids-drop.md 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
@@ -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
@@ -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
@@ -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,23 +267,23 @@ 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)]",
  },
  },
  {
  size: "md",
  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)]",
  },
  },
  {
  size: "lg",
  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,23 +292,23 @@ 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)]",
  },
  },
  {
  size: "md",
  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)]",
  },
  },
  {
  size: "lg",
  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