feat(slider): rename output to valueText

chakra-ui · Oct 24, 2023 · 215df8c · 215df8c · vercel · Oct 24, 2023
1 parent 255e631
commit 215df8c
Show file tree

Hide file tree

Showing 23 changed files with 34 additions and 29 deletions.
diff --git a/.changeset/shy-buckets-refuse.md 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
@@ -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
@@ -34,7 +34,7 @@ export default function Page() {
           <div {...api.rootProps}>
             <div>
               <label {...api.labelProps}>Quantity:</label>
-              <output {...api.outputProps}>{api.value.join(" - ")}</output>
+              <output {...api.valueTextProps}>{api.value.join(" - ")}</output>
             </div>
             <div className="control-area">
               <div {...api.controlProps}>

diff --git a/examples/next-ts/pages/slider.tsx b/examples/next-ts/pages/slider.tsx
@@ -38,7 +38,7 @@ export default function Page() {
               <label data-testid="label" {...api.labelProps}>
                 Slider Label
               </label>
-              <output data-testid="output" {...api.outputProps}>
+              <output data-testid="output" {...api.valueTextProps}>
                 {api.value}
               </output>
             </div>

diff --git 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))
       <div v-bind="api.rootProps">
         <div>
           <label v-bind="api.labelProps">Quantity:</label>
-          <output v-bind="api.outputProps">{{ api.value.join(" - ") }}</output>
+          <output v-bind="api.valueTextProps">{{ api.value.join(" - ") }}</output>
         </div>
         <div class="control-area">
           <div v-bind="api.controlProps">

diff --git 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))
       <div v-bind="api.rootProps">
         <div>
           <label data-testid="label" v-bind="api.labelProps"> Slider Label </label>
-          <output data-testid="output" v-bind="api.outputProps"> {{ api.value.at(0) }} </output>
+          <output data-testid="output" v-bind="api.valueTextProps"> {{ api.value.at(0) }} </output>
         </div>
         <div class="control-area">
           <div v-bind="api.controlProps">

diff --git 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() {
           <div {...api().rootProps}>
             <div>
               <label {...api().labelProps}>Quantity:</label>
-              <output {...api().outputProps}>{api().value.join(" - ")}</output>
+              <output {...api().valueTextProps}>{api().value.join(" - ")}</output>
             </div>
             <div class="control-area">
               <div {...api().controlProps}>

diff --git 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() {
               <label data-testid="label" {...api().labelProps}>
                 Slider Label
               </label>
-              <output data-testid="output" {...api().outputProps}>
+              <output data-testid="output" {...api().valueTextProps}>
                 {api().value.at(0)}
               </output>
             </div>

diff --git 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({
               <div {...api.rootProps}>
                 <div>
                   <label {...api.labelProps}>Quantity:</label>
-                  <output {...api.outputProps}>{api.value.join(" - ")}</output>
+                  <output {...api.valueTextProps}>{api.value.join(" - ")}</output>
                 </div>
                 <div class="control-area">
                   <div {...api.controlProps}>

diff --git a/examples/vue-ts/src/pages/slider.tsx b/examples/vue-ts/src/pages/slider.tsx
@@ -47,7 +47,7 @@ export default defineComponent({
                   <label data-testid="label" {...api.labelProps}>
                     Slider Label
                   </label>
-                  <output data-testid="output" {...api.outputProps}>
+                  <output data-testid="output" {...api.valueTextProps}>
                     {api.value}
                   </output>
                 </div>

diff --git 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
@@ -104,14 +104,14 @@ export function connect<T extends PropTypes>(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
@@ -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
@@ -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<T extends PropTypes = PropTypes> {
   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
@@ -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
@@ -22,7 +22,7 @@ export function RangeSlider(props: any) {
         <chakra.label mr="2" {...api.labelProps}>
           Quantity
         </chakra.label>
-        <output {...api.outputProps}>
+        <output {...api.valueTextProps}>
           <b>{api.value.join(" - ")}</b>
         </output>
       </Flex>

diff --git a/website/components/machines/slider.tsx b/website/components/machines/slider.tsx
@@ -18,7 +18,7 @@ export function Slider(props: any) {
         <chakra.label mr="2" {...api.labelProps}>
           Quantity
         </chakra.label>
-        <output {...api.outputProps}>
+        <output {...api.valueTextProps}>
           <b>{api.value.at(0)}</b>
         </output>
       </Flex>

diff --git 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
@@ -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
@@ -11,7 +11,7 @@ export function Slider() {
     <div {...api.rootProps}>
       <div>
         <label {...api.labelProps}>Slider Label</label>
-        <output {...api.outputProps}>{api.value.at(0)}</output>
+        <output {...api.valueTextProps}>{api.value.at(0)}</output>
       </div>
       <div {...api.controlProps}>
         <div {...api.trackProps}>

diff --git a/website/data/snippets/solid/slider/usage.mdx b/website/data/snippets/solid/slider/usage.mdx
@@ -14,7 +14,7 @@ export function Slider() {
     <div {...api().rootProps}>
       <div>
         <label {...api().labelProps}>Slider Label</label>
-        <output {...api().outputProps}>{api().value.at(0)}</output>
+        <output {...api().valueTextProps}>{api().value.at(0)}</output>
       </div>
       <div {...api().controlProps}>
         <div {...api().trackProps}>

diff --git 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({
         <div {...api.rootProps}>
           <div>
             <label {...api.labelProps}>Slider Label</label>
-            <output {...api.outputProps}>{api.value.at(0)}</output>
+            <output {...api.valueTextProps}>{api.value.at(0)}</output>
           </div>
           <div {...api.controlProps}>
             <div {...api.trackProps}>

diff --git 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));
   <div ref="ref" v-bind="api.rootProps">
     <div>
       <label v-bind="api.labelProps">Slider Label</label>
-      <output v-bind="api.outputProps">{{ api.value.at(0) }}</output>
+      <output v-bind="api.valueTextProps">{{ api.value.at(0) }}</output>
     </div>
     <div v-bind="api.controlProps">
       <div v-bind="api.trackProps">