refactor(headless select): change DisplayText to DisplayValue

maiieul · maiieul · commit 6acc4fbea890 · 2024-05-25T20:21:26.000+02:00
diff --git a/.changeset/silent-yaks-crash.md b/.changeset/silent-yaks-crash.md
@@ -5,7 +5,7 @@
 ### Select API Changes
 
 - `<SelectOption />` has been renamed to `<Select.ItemLabel />`.
-- `<Select.Value />` has been renamed to `<Select.DisplayText />`.
+- `<Select.Value />` has been renamed to `<Select.DisplayValue />`.
 
 ### `<Select.Item />`
 
diff --git a/apps/website/src/routes/docs/headless/modal/examples/nested-popover.tsx b/apps/website/src/routes/docs/headless/modal/examples/nested-popover.tsx
@@ -12,7 +12,7 @@ export default component$(() => {
         <Select.Root class="select">
           <Select.Label>Logged in users</Select.Label>
           <Select.Trigger class="select-trigger">
-            <Select.DisplayText placeholder="Select an option" />
+            <Select.DisplayValue placeholder="Select an option" />
           </Select.Trigger>
           <Select.Popover class="select-popover">
             <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/add-users.tsx b/apps/website/src/routes/docs/headless/select/examples/add-users.tsx
@@ -11,7 +11,7 @@ export default component$(() => {
       <Select.Root class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx b/apps/website/src/routes/docs/headless/select/examples/bind-open.tsx
@@ -13,7 +13,7 @@ export default component$(() => {
       <Select.Root bind:open={isOpen} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/change-value.tsx b/apps/website/src/routes/docs/headless/select/examples/change-value.tsx
@@ -15,7 +15,7 @@ export default component$(() => {
       <Select.Root onChange$={handleChange$} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx b/apps/website/src/routes/docs/headless/select/examples/controlled-value.tsx
@@ -16,7 +16,7 @@ export default component$(() => {
       <Select.Root bind:value={selectedId} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/controlled.tsx b/apps/website/src/routes/docs/headless/select/examples/controlled.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
       <Select.Root bind:value={selected} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/csr.tsx b/apps/website/src/routes/docs/headless/select/examples/csr.tsx
@@ -13,7 +13,7 @@ export default component$(() => {
         <Select.Root class="select">
           <Select.Label>Logged in users</Select.Label>
           <Select.Trigger class="select-trigger">
-            <Select.DisplayText placeholder="Select an option" />
+            <Select.DisplayValue placeholder="Select an option" />
           </Select.Trigger>
           <Select.Popover class="select-popover">
             <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/disabled.tsx b/apps/website/src/routes/docs/headless/select/examples/disabled.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
       <p>This one is the disabled</p>
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/form.tsx b/apps/website/src/routes/docs/headless/select/examples/form.tsx
@@ -33,7 +33,7 @@ export default component$(() => {
           <Select.Label>Logged in users</Select.Label>
           <Select.HiddenNativeSelect />
           <Select.Trigger class="select-trigger">
-            <Select.DisplayText>{displayText.value.join(', ')}</Select.DisplayText>
+            <Select.DisplayValue>{displayText.value.join(', ')}</Select.DisplayValue>
           </Select.Trigger>
           <Select.Popover class="select-popover">
             <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/group.tsx b/apps/website/src/routes/docs/headless/select/examples/group.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
   return (
     <Select.Root class="select">
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/hero.tsx b/apps/website/src/routes/docs/headless/select/examples/hero.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/indicator.tsx b/apps/website/src/routes/docs/headless/select/examples/indicator.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/item-value.tsx b/apps/website/src/routes/docs/headless/select/examples/item-value.tsx
@@ -22,7 +22,7 @@ export default component$(() => {
       <Select.Root onChange$={handleChange$} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/loop.tsx b/apps/website/src/routes/docs/headless/select/examples/loop.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root loop={true} class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/multiple-pill.tsx b/apps/website/src/routes/docs/headless/select/examples/multiple-pill.tsx
@@ -12,7 +12,7 @@ export default component$(() => {
     <Select.Root multiple bind:displayText={display} bind:value={selected} class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText>
+        <Select.DisplayValue>
           {display.value.map((item) => (
             <span class="select-pill" key={item}>
               {item}
@@ -27,7 +27,7 @@ export default component$(() => {
               </span>
             </span>
           ))}
-        </Select.DisplayText>
+        </Select.DisplayValue>
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/multiple.tsx b/apps/website/src/routes/docs/headless/select/examples/multiple.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
   return (
     <Select.Root bind:displayText={display} multiple class="select">
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText>{display.value.join(', ')}</Select.DisplayText>
+        <Select.DisplayValue>{display.value.join(', ')}</Select.DisplayValue>
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/object.tsx b/apps/website/src/routes/docs/headless/select/examples/object.tsx
@@ -16,7 +16,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/open-change.tsx b/apps/website/src/routes/docs/headless/select/examples/open-change.tsx
@@ -18,7 +18,7 @@ export default component$(() => {
       <Select.Root onOpenChange$={handleOpenChange$} class="select">
         <Select.Label>Logged in users</Select.Label>
         <Select.Trigger class="select-trigger">
-          <Select.DisplayText placeholder="Select an option" />
+          <Select.DisplayValue placeholder="Select an option" />
         </Select.Trigger>
         <Select.Popover class="select-popover">
           <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx b/apps/website/src/routes/docs/headless/select/examples/scrollable.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
   return (
     <Select.Root class="select">
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox select-max-height">
diff --git a/apps/website/src/routes/docs/headless/select/examples/string.tsx b/apps/website/src/routes/docs/headless/select/examples/string.tsx
@@ -8,7 +8,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/typeahead.tsx b/apps/website/src/routes/docs/headless/select/examples/typeahead.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/uncontrolled.tsx b/apps/website/src/routes/docs/headless/select/examples/uncontrolled.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root value="Jessie" class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/headless/select/examples/validation.tsx b/apps/website/src/routes/docs/headless/select/examples/validation.tsx
@@ -32,7 +32,7 @@ export default component$(() => {
               <Select.HiddenNativeSelect {...props} />
               <Select.Label>Logged in users</Select.Label>
               <Select.Trigger class="select-trigger">
-                <Select.DisplayText placeholder="Select an option" />
+                <Select.DisplayValue placeholder="Select an option" />
               </Select.Trigger>
               {field.error && <div style={{ color: '#D2122E' }}>{field.error}</div>}
               <Select.Popover class="select-popover">
diff --git a/apps/website/src/routes/docs/headless/select/index.mdx b/apps/website/src/routes/docs/headless/select/index.mdx
@@ -59,7 +59,7 @@ A control that allows the user to select multiple predefined items from a listbo
         'A button or similar control that opens the select menu when interacted with.',
     },
     {
-      name: 'Select.DisplayText',
+      name: 'Select.DisplayValue',
       description: 'Displays the currently selected value.',
     },
     {
@@ -243,7 +243,7 @@ Sometimes we want to allow the user to select multiple pre-defined items at a ti
 
 If we want to configure the multiple display values, we can use the `bind:displayText` signal.
 
-Something to be aware of, is the `<Select.DisplayText />` component will now display whatever you put inside of it.
+Something to be aware of, is the `<Select.DisplayValue />` component will now display whatever you put inside of it.
 
 > Under the hood, Qwik UI updates the `bind:displayText` signal with the latest display values.
 
@@ -315,7 +315,7 @@ To customize the scroll behavior, add the `scrollOptions` prop to the `<Select.R
 
 ## Placeholder
 
-We can provide a custom placeholder to the `<Select.DisplayText />` component by adding the `placeholder` prop.
+We can provide a custom placeholder to the `<Select.DisplayValue />` component by adding the `placeholder` prop.
 
 <Showcase name="hero" />
 
@@ -417,7 +417,7 @@ When in multi select mode, additional keyboard interactions are available.
 
 ### Data Attributes
 
-`Select`, `Select.Trigger`, `Select.DisplayText`, `Select.Popover`, and `Select.Listbox` all have data attributes that are used to track state.
+`Select`, `Select.Trigger`, `Select.DisplayValue`, `Select.Popover`, and `Select.Listbox` all have data attributes that are used to track state.
 
 <AnatomyTable
   firstColumnLabel="Attribute"
@@ -495,7 +495,7 @@ When in multi select mode, additional keyboard interactions are available.
   ]}
 />
 
-### Select.DisplayText
+### Select.DisplayValue
 
 <APITable
   propDescriptors={[
diff --git a/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx b/apps/website/src/routes/docs/headless/select/snippets/building-blocks.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root class="select">
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger class="select-trigger">
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover class="select-popover">
         <Select.Listbox class="select-listbox">
diff --git a/apps/website/src/routes/docs/styled/select/examples/hero.tsx b/apps/website/src/routes/docs/styled/select/examples/hero.tsx
@@ -9,7 +9,7 @@ export default component$(() => {
     <Select.Root>
       <Select.Label>Logged in users</Select.Label>
       <Select.Trigger>
-        <Select.DisplayText placeholder="Select an option" />
+        <Select.DisplayValue placeholder="Select an option" />
       </Select.Trigger>
       <Select.Popover gutter={8}>
         <Select.Listbox>
diff --git a/apps/website/src/routes/docs/styled/select/index.mdx b/apps/website/src/routes/docs/styled/select/index.mdx
@@ -65,7 +65,7 @@ const Trigger = component$<PropsOf<typeof HeadlessSelect.Trigger>>(({ ...props }
   );
 });
 
-const DisplayText = HeadlessSelect.DisplayText;
+const DisplayValue = HeadlessSelect.DisplayValue;
 
 const Popover = component$<PropsOf<typeof HeadlessSelect.Popover>>(({ ...props }) => {
   return (
@@ -144,7 +144,7 @@ export const Select = {
   Root,
   Label,
   Trigger,
-  DisplayText,
+  DisplayValue,
   Popover,
   Listbox,
   Group,
diff --git a/packages/kit-headless/src/components/select/index.ts b/packages/kit-headless/src/components/select/index.ts
@@ -1,7 +1,7 @@
 export { HSelectRoot as Root } from './select-inline';
 export { HSelectLabel as Label } from './select-label';
 export { HSelectTrigger as Trigger } from './select-trigger';
-export { HSelectDisplayText as DisplayText } from './select-display-text';
+export { HSelectDisplayText as DisplayValue } from './select-display-text';
 export { HSelectPopover as Popover } from './select-popover';
 export { HSelectListbox as Listbox } from './select-listbox';
 export { HSelectGroup as Group } from './select-group';
diff --git a/packages/kit-styled/src/components/select/select.tsx b/packages/kit-styled/src/components/select/select.tsx
@@ -42,7 +42,7 @@ const Trigger = component$<PropsOf<typeof HeadlessSelect.Trigger>>(({ ...props }
   );
 });
 
-const DisplayText = HeadlessSelect.DisplayText;
+const DisplayValue = HeadlessSelect.DisplayValue;
 
 const Popover = component$<PropsOf<typeof HeadlessSelect.Popover>>(({ ...props }) => {
   return (
@@ -121,7 +121,7 @@ export const Select = {
   Root,
   Label,
   Trigger,
-  DisplayText,
+  DisplayValue,
   Popover,
   Listbox,
   Group,
