diff --git a/.changeset/shy-buckets-refuse.md b/.changeset/shy-buckets-refuse.md new file mode 100644 index 0000000000..d14fa3a5bf --- /dev/null +++ b/.changeset/shy-buckets-refuse.md @@ -0,0 +1,5 @@ +--- +"@zag-js/slider": patch +--- + +Rename output to valueText diff --git a/e2e/slider.e2e.ts b/e2e/slider.e2e.ts index 3b604b34b9..ace34e6520 100644 --- a/e2e/slider.e2e.ts +++ b/e2e/slider.e2e.ts @@ -1,7 +1,7 @@ import { expect, test } from "@playwright/test" import { part, a11y, rect } from "./__utils" -const output = part("output") +const output = part("value-text") const thumb = part("thumb") const track = part("track") diff --git a/examples/next-ts/pages/range-slider.tsx b/examples/next-ts/pages/range-slider.tsx index 5fc64be298..645212dbd3 100644 --- a/examples/next-ts/pages/range-slider.tsx +++ b/examples/next-ts/pages/range-slider.tsx @@ -34,7 +34,7 @@ export default function Page() {
- {api.value.join(" - ")} + {api.value.join(" - ")}
diff --git a/examples/next-ts/pages/slider.tsx b/examples/next-ts/pages/slider.tsx index 9b44d72c97..f9aabd9410 100644 --- a/examples/next-ts/pages/slider.tsx +++ b/examples/next-ts/pages/slider.tsx @@ -38,7 +38,7 @@ export default function Page() { - + {api.value}
diff --git a/examples/nuxt-ts/pages/range-slider.vue b/examples/nuxt-ts/pages/range-slider.vue index 59df52a217..669242291f 100644 --- a/examples/nuxt-ts/pages/range-slider.vue +++ b/examples/nuxt-ts/pages/range-slider.vue @@ -31,7 +31,7 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps))
- {{ api.value.join(" - ") }} + {{ api.value.join(" - ") }}
diff --git a/examples/nuxt-ts/pages/slider.vue b/examples/nuxt-ts/pages/slider.vue index 52c09e888a..9c6eaf8c55 100644 --- a/examples/nuxt-ts/pages/slider.vue +++ b/examples/nuxt-ts/pages/slider.vue @@ -32,7 +32,7 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps))
- {{ api.value.at(0) }} + {{ api.value.at(0) }}
diff --git a/examples/solid-ts/src/pages/range-slider.tsx b/examples/solid-ts/src/pages/range-slider.tsx index 8b11623d43..3e9fdae9ba 100644 --- a/examples/solid-ts/src/pages/range-slider.tsx +++ b/examples/solid-ts/src/pages/range-slider.tsx @@ -1,8 +1,8 @@ +import { sliderControls } from "@zag-js/shared" import * as slider from "@zag-js/slider" import { normalizeProps, useMachine } from "@zag-js/solid" import serialize from "form-serialize" -import { createMemo, For, createUniqueId } from "solid-js" -import { sliderControls } from "@zag-js/shared" +import { For, createMemo, createUniqueId } from "solid-js" import { StateVisualizer } from "../components/state-visualizer" import { Toolbar } from "../components/toolbar" import { useControls } from "../hooks/use-controls" @@ -34,7 +34,7 @@ export default function Page() {
- {api().value.join(" - ")} + {api().value.join(" - ")}
diff --git a/examples/solid-ts/src/pages/slider.tsx b/examples/solid-ts/src/pages/slider.tsx index 1b2252f072..b6b182e8e3 100644 --- a/examples/solid-ts/src/pages/slider.tsx +++ b/examples/solid-ts/src/pages/slider.tsx @@ -1,8 +1,8 @@ +import { sliderControls } from "@zag-js/shared" import * as slider from "@zag-js/slider" import { normalizeProps, useMachine } from "@zag-js/solid" import serialize from "form-serialize" import { For, createMemo, createUniqueId } from "solid-js" -import { sliderControls } from "@zag-js/shared" import { StateVisualizer } from "../components/state-visualizer" import { Toolbar } from "../components/toolbar" import { useControls } from "../hooks/use-controls" @@ -31,7 +31,7 @@ export default function Page() { - + {api().value.at(0)}
diff --git a/examples/vue-ts/src/pages/range-slider.tsx b/examples/vue-ts/src/pages/range-slider.tsx index 4387cef14a..f24264b180 100644 --- a/examples/vue-ts/src/pages/range-slider.tsx +++ b/examples/vue-ts/src/pages/range-slider.tsx @@ -40,7 +40,7 @@ export default defineComponent({
- {api.value.join(" - ")} + {api.value.join(" - ")}
diff --git a/examples/vue-ts/src/pages/slider.tsx b/examples/vue-ts/src/pages/slider.tsx index da17cbd092..9cdda8ca99 100644 --- a/examples/vue-ts/src/pages/slider.tsx +++ b/examples/vue-ts/src/pages/slider.tsx @@ -47,7 +47,7 @@ export default defineComponent({ - + {api.value}
diff --git a/packages/machines/slider/src/slider.anatomy.ts b/packages/machines/slider/src/slider.anatomy.ts index 57267f4512..e907e6436e 100644 --- a/packages/machines/slider/src/slider.anatomy.ts +++ b/packages/machines/slider/src/slider.anatomy.ts @@ -4,7 +4,7 @@ export const anatomy = createAnatomy("slider").parts( "root", "label", "thumb", - "output", + "valueText", "track", "range", "control", diff --git a/packages/machines/slider/src/slider.connect.ts b/packages/machines/slider/src/slider.connect.ts index 96b174310c..abc40cf70e 100644 --- a/packages/machines/slider/src/slider.connect.ts +++ b/packages/machines/slider/src/slider.connect.ts @@ -104,14 +104,14 @@ export function connect(state: State, send: Send, normalize style: dom.getRootStyle(state.context), }), - outputProps: normalize.output({ - ...parts.output.attrs, + valueTextProps: normalize.output({ + ...parts.valueText.attrs, dir: state.context.dir, "data-disabled": dataAttr(isDisabled), "data-orientation": state.context.orientation, "data-invalid": dataAttr(isInvalid), "data-focus": dataAttr(isFocused), - id: dom.getOutputId(state.context), + id: dom.getValueTextId(state.context), htmlFor: sliderValue.map((_v, i) => dom.getHiddenInputId(state.context, i)).join(" "), "aria-live": "off", }), diff --git a/packages/machines/slider/src/slider.dom.ts b/packages/machines/slider/src/slider.dom.ts index 7eff16a978..71d34386df 100644 --- a/packages/machines/slider/src/slider.dom.ts +++ b/packages/machines/slider/src/slider.dom.ts @@ -14,7 +14,7 @@ export const dom = createScope({ getTrackId: (ctx: Ctx) => ctx.ids?.track ?? `slider:${ctx.id}:track`, getRangeId: (ctx: Ctx) => ctx.ids?.range ?? `slider:${ctx.id}:range`, getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `slider:${ctx.id}:label`, - getOutputId: (ctx: Ctx) => ctx.ids?.output ?? `slider:${ctx.id}:output`, + getValueTextId: (ctx: Ctx) => ctx.ids?.valueText ?? `slider:${ctx.id}:valueText`, getMarkerId: (ctx: Ctx, value: number) => ctx.ids?.marker?.(value) ?? `slider:${ctx.id}:marker:${value}`, getRootEl: (ctx: Ctx) => dom.getById(ctx, dom.getRootId(ctx)), diff --git a/packages/machines/slider/src/slider.types.ts b/packages/machines/slider/src/slider.types.ts index b1ae8242a1..39ed018e88 100644 --- a/packages/machines/slider/src/slider.types.ts +++ b/packages/machines/slider/src/slider.types.ts @@ -25,7 +25,7 @@ type ElementIds = Partial<{ track: string range: string label: string - output: string + valueText: string marker(index: number): string }> @@ -268,7 +268,7 @@ export interface MachineApi { focus(): void labelProps: T["label"] rootProps: T["element"] - outputProps: T["output"] + valueTextProps: T["output"] trackProps: T["element"] getThumbProps(props: ThumbProps): T["element"] getHiddenInputProps(props: ThumbProps): T["input"] diff --git a/shared/src/style.css b/shared/src/style.css index 44af246168..0bbdcfc25d 100644 --- a/shared/src/style.css +++ b/shared/src/style.css @@ -593,7 +593,7 @@ main [data-testid="scrubber"] { width: 100%; } -[data-scope="slider"][data-part="output"] { +[data-scope="slider"][data-part="value-text"] { margin-inline-start: 12px; } diff --git a/website/components/machines/range-slider.tsx b/website/components/machines/range-slider.tsx index c49d936e69..756c928316 100644 --- a/website/components/machines/range-slider.tsx +++ b/website/components/machines/range-slider.tsx @@ -22,7 +22,7 @@ export function RangeSlider(props: any) { Quantity - + {api.value.join(" - ")} diff --git a/website/components/machines/slider.tsx b/website/components/machines/slider.tsx index b09b29585c..a68148beea 100644 --- a/website/components/machines/slider.tsx +++ b/website/components/machines/slider.tsx @@ -18,7 +18,7 @@ export function Slider(props: any) { Quantity - + {api.value.at(0)} diff --git a/website/data/components/range-slider.mdx b/website/data/components/range-slider.mdx index 410f089714..b2df5693dc 100644 --- a/website/data/components/range-slider.mdx +++ b/website/data/components/range-slider.mdx @@ -245,7 +245,7 @@ label, control and thumb. /* styles for control disabled state */ } -[data-part="output"][data-disabled] { +[data-part="value-text"][data-disabled] { /* styles for output disabled state */ } diff --git a/website/data/components/slider.mdx b/website/data/components/slider.mdx index d51cf80ad2..b69cb28840 100644 --- a/website/data/components/slider.mdx +++ b/website/data/components/slider.mdx @@ -257,7 +257,7 @@ label, control and thumb. /* styles for control disabled state */ } -[data-part="output"][data-disabled] { +[data-part="value-text"][data-disabled] { /* styles for output disabled state */ } @@ -288,7 +288,7 @@ track, range, label, and thumb parts. /* styles for control invalid state */ } -[data-part="output"][data-invalid] { +[data-part="valueText"][data-invalid] { /* styles for output invalid state */ } diff --git a/website/data/snippets/react/slider/usage.mdx b/website/data/snippets/react/slider/usage.mdx index adc3da8a45..bcc51ddf0c 100644 --- a/website/data/snippets/react/slider/usage.mdx +++ b/website/data/snippets/react/slider/usage.mdx @@ -11,7 +11,7 @@ export function Slider() {
- {api.value.at(0)} + {api.value.at(0)}
diff --git a/website/data/snippets/solid/slider/usage.mdx b/website/data/snippets/solid/slider/usage.mdx index ba514ceabb..6908d3880f 100644 --- a/website/data/snippets/solid/slider/usage.mdx +++ b/website/data/snippets/solid/slider/usage.mdx @@ -14,7 +14,7 @@ export function Slider() {
- {api().value.at(0)} + {api().value.at(0)}
diff --git a/website/data/snippets/vue-jsx/slider/usage.mdx b/website/data/snippets/vue-jsx/slider/usage.mdx index a860455e0d..9e7e66af59 100644 --- a/website/data/snippets/vue-jsx/slider/usage.mdx +++ b/website/data/snippets/vue-jsx/slider/usage.mdx @@ -18,7 +18,7 @@ export default defineComponent({
- {api.value.at(0)} + {api.value.at(0)}
diff --git a/website/data/snippets/vue-sfc/slider/usage.mdx b/website/data/snippets/vue-sfc/slider/usage.mdx index 4dbb03ebfe..e4fab62464 100644 --- a/website/data/snippets/vue-sfc/slider/usage.mdx +++ b/website/data/snippets/vue-sfc/slider/usage.mdx @@ -12,7 +12,7 @@ const api = computed(() => slider.connect(state.value, send, normalizeProps));
- {{ api.value.at(0) }} + {{ api.value.at(0) }}