archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

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

Browse Source 
* chore(slider): include marks in hideThumb

* fix(slider): revise slider styles

* feat(changeset): add changeset

* feat(slider): add tests with marks and hideThumb
This commit is contained in:
աӄա 2024-05-05 00:17:04 +08:00 committed by GitHub
parent dc245874ce
commit 76f4dd8e76
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 105 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/eighty-kids-drop.md Normal file
View File

@ -0,0 +1,5 @@
---
"@nextui-org/theme": patch
---
Revise slider styles (#2880)

74
packages/components/slider/__tests__/slider.test.tsx
View File

@ -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
packages/components/slider/stories/slider.stories.tsx
View File

@ -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,
},
};

15
packages/core/theme/src/components/slider.ts
View File

@ -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