Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(slider): missing marks when hideThumb is true & revise slider styles #2883

Merged
merged 4 commits into from May 4, 2024
Merged

fix(slider): missing marks when hideThumb is true & revise slider styles #2883

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
4965e22
chore(slider): include marks in hideThumb
wingkwong Apr 26, 2024
25cbef2
fix(slider): revise slider styles
wingkwong Apr 26, 2024
73d4706
feat(changeset): add changeset
wingkwong Apr 26, 2024
8534c85
feat(slider): add tests with marks and hideThumb
wingkwong Apr 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/eighty-kids-drop.md
View file
Open in desktop
@@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---

Revise slider styles (#2880)
74 changes: 74 additions & 0 deletions packages/components/slider/__tests__/slider.test.tsx
View file
Open in desktop
Expand Up @@ -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);
});
19 changes: 18 additions & 1 deletion packages/components/slider/stories/slider.stories.tsx
View file
Open in desktop
Expand Up @@ -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,
},
};

Expand Down
15 changes: 8 additions & 7 deletions packages/core/theme/src/components/slider.ts
View file
Open in desktop
Expand Up @@ -166,6 +166,7 @@ const slider = tv({
hasMarks: {
true: {
base: "mb-5",
mark: "cursor-pointer",
},
false: {},
},
Expand All @@ -185,7 +186,7 @@ const slider = tv({
hideThumb: {
true: {
thumb: "sr-only",
track: "overflow-hidden cursor-pointer",
track: "cursor-pointer",
},
},
hasSingleThumb: {
Expand Down Expand Up @@ -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
Expand All @@ -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
Expand Down