chore: Rename and move OnyxSelect (#1165)

Relates to #565

Renamed `OnyxSelect` component to `OnyxSelectInput` in preparation for
the new `OnyxSelect` component.
The `OnyxSelectInput` is only responsible for rendering the selected
value(s) and handling focus.
Therefore, the `modelValue` prop was renamed to `selection` to better
communicate that it only does One-Way binding.

---------

Co-authored-by: Lars Rickert <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: JoCa96 <[email protected]>

.changeset/eleven-sheep-fry.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": major
+---
+
+Renamed OnyxSelect to OnyxSelectInput

apps/alpha-test-app/src/views/HomeView.vue

@@ -16,7 +16,7 @@ import {
   OnyxLoadingIndicator,
   OnyxPageLayout,
   OnyxRadioButtonGroup,
-  OnyxSelect,
+  OnyxSelectInput,
   OnyxSkeleton,
   OnyxSwitch,
   OnyxTable,
@@ -45,7 +45,7 @@ const COMPONENTS = [
   "OnyxListbox",
   "OnyxLoadingIndicator",
   "OnyxRadioButtonGroup",
-  "OnyxSelect",
+  "OnyxSelectInput",
   "OnyxSkeleton",
   "OnyxSwitch",
   "OnyxTable",
@@ -225,18 +225,18 @@ timerEndDate.setHours(timerEndDate.getHours() + 2);
           </div>
         </template>
 
-        <template v-if="show('OnyxSelect')">
-          <OnyxSelect
+        <template v-if="show('OnyxSelectInput')">
+          <OnyxSelectInput
             v-model="singleSelectState"
             label="Single Select"
             placeholder="Select your fruits"
             :skeleton="useSkeleton"
             :options="selectOptions"
           />
           <div v-if="!useSkeleton" class="onyx-text--small state-info">
-            OnyxSelect single state: {{ singleSelectState ?? "–" }}
+            OnyxSelectInput single state: {{ singleSelectState ?? "–" }}
           </div>
-          <OnyxSelect
+          <OnyxSelectInput
             v-model="multiSelectState"
             label="Multiple Select"
             placeholder="Select your fruits"
@@ -245,7 +245,7 @@ timerEndDate.setHours(timerEndDate.getHours() + 2);
             :options="selectOptions"
           />
           <div v-if="!useSkeleton" class="onyx-text--small state-info">
-            OnyxSelect multiple state: {{ multiSelectState ?? "–" }}
+            OnyxSelectInput multiple state: {{ multiSelectState ?? "–" }}
           </div>
         </template>
 

apps/playground/src/components/VersionSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { OnyxListbox, OnyxSelect, type SelectOption } from "sit-onyx";
+import { OnyxListbox, OnyxSelectInput, type SelectOption } from "sit-onyx";
 import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import { fetchVersions } from "../utils/versions";
 
@@ -75,7 +75,7 @@ onBeforeUnmount(() => {
 
 <template>
   <div class="version" @click.stop>
-    <OnyxSelect
+    <OnyxSelectInput
       :label="props.label"
       placeholder="Select version"
       :model-value="version ? { label: version, value: version } : undefined"

packages/sit-onyx/src/components/OnyxListbox/OnyxMiniSearch.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import { computed, useAttrs, type HtmlHTMLAttributes } from "vue";
+import { computed } from "vue";
 import OnyxIcon from "../OnyxIcon/OnyxIcon.vue";
 import xSmall from "@sit-onyx/icons/x-small.svg?raw";
 import { injectI18n } from "../../i18n";
+import { useRootAttrs } from "../../utils/attrs";
 
 export type MiniSearchProps = { modelValue: string; label: string };
 
 defineOptions({ inheritAttrs: false });
 
-const attrs = useAttrs();
+const { rootAttrs, restAttrs } = useRootAttrs();
 
 const props = defineProps<MiniSearchProps>();
 
@@ -25,28 +26,13 @@ const value = computed({
   get: () => props.modelValue,
   set: (value) => emit("update:modelValue", value),
 });
-
-const rootAttrs = computed(
-  () =>
-    ({ class: attrs["class"], style: attrs["style"] }) as Pick<
-      HtmlHTMLAttributes,
-      "class" | "style"
-    >,
-);
-
-const inputAttrs = computed<Omit<HtmlHTMLAttributes, "class" | "style">>(() => {
-  const rest = { ...attrs };
-  delete rest.class;
-  delete rest.style;
-  return rest;
-});
 </script>
 <template>
   <div class="onyx-mini-search" v-bind="rootAttrs">
     <input
       v-model="value"
       :aria-label="props.label"
-      v-bind="inputAttrs"
+      v-bind="restAttrs"
       class="onyx-mini-search__input"
       placeholder="Search"
       type="text"

packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.ct.tsx → packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.ct.tsx

@@ -1,25 +1,24 @@
 import { DENSITIES } from "../../composables/density";
 import { expect, test } from "../../playwright/a11y";
 import { executeMatrixScreenshotTest } from "../../playwright/screenshots";
-import OnyxSelect from "./OnyxSelect.vue";
+import OnyxSelectInput from "./OnyxSelectInput.vue";
 import { MULTISELECT_TEXT_MODE } from "./types";
 
 test.describe("Screenshot tests", () => {
   for (const state of ["default", "placeholder", "with value"] as const) {
     executeMatrixScreenshotTest({
-      name: `Select (${state})`,
+      name: `SelectInput (${state})`,
       columns: DENSITIES,
       rows: ["default", "hover", "focus-visible"],
       component: (column) => (
-        <OnyxSelect
+        <OnyxSelectInput
           style="width: 16rem"
           label="Test label"
           placeholder={state === "placeholder" ? "Test placeholder" : undefined}
           density={column}
-          modelValue={
+          selection={
             state === "with value" ? { label: "Selected value", value: "test-value" } : undefined
           }
-          options={[]}
         />
       ),
       beforeScreenshot: async (component, page, column, row) => {
@@ -30,39 +29,37 @@ test.describe("Screenshot tests", () => {
   }
 
   executeMatrixScreenshotTest({
-    name: "Select (other)",
+    name: "SelectInput (other)",
     columns: ["default", "hideLabel"],
     rows: ["required", "optional", "message"],
     // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
     disabledAccessibilityRules: ["color-contrast"],
     component: (column, row) => (
-      <OnyxSelect
+      <OnyxSelectInput
         style="width: 16rem"
         label="Test label"
         hideLabel={column === "hideLabel"}
         required={row === "required"}
         requiredMarker={row === "optional" ? "optional" : undefined}
         message={row === "message" ? "Test message" : undefined}
-        options={[]}
       />
     ),
   });
 
   executeMatrixScreenshotTest({
-    name: "Select (readonly, disabled, loading)",
+    name: "SelectInput (readonly, disabled, loading)",
     columns: ["readonly", "disabled", "loading"],
     rows: ["default", "hover", "focus-visible"],
     // TODO: remove when contrast issues are fixed in https://github.com/SchwarzIT/onyx/issues/410
     disabledAccessibilityRules: ["color-contrast"],
     component: (column) => (
-      <OnyxSelect
+      <OnyxSelectInput
         style="width: 16rem"
         label="Test label"
         placeholder="Test placeholder"
         readonly={column === "readonly"}
         disabled={column === "disabled"}
         loading={column === "loading"}
-        options={[]}
       />
     ),
     beforeScreenshot: async (component, page, column, row) => {
@@ -72,7 +69,7 @@ test.describe("Screenshot tests", () => {
   });
 
   executeMatrixScreenshotTest({
-    name: "Select (multiple)",
+    name: "SelectInput (multiple)",
     columns: MULTISELECT_TEXT_MODE,
     rows: ["empty", "one-value", "two-values", "many-values"],
     component: (column, row) => {
@@ -84,28 +81,26 @@ test.describe("Screenshot tests", () => {
       };
 
       return (
-        <OnyxSelect
+        <OnyxSelectInput
           style="width: 16rem"
           label="Test label"
-          modelValue={modelValues[row].map((i) => ({ label: i, value: i }))}
-          multiple={{ textMode: column }}
-          options={[]}
+          selection={modelValues[row].map((i) => ({ label: i, value: i }))}
+          textMode={column}
         />
       );
     },
   });
 
   executeMatrixScreenshotTest({
-    name: "Select (skeleton)",
+    name: "SelectInput (skeleton)",
     rows: ["default", "hideLabel"],
     columns: DENSITIES,
     component: (column, row) => (
-      <OnyxSelect
+      <OnyxSelectInput
         style="width: 16rem"
         label="Test label"
         density={column}
         hideLabel={row === "hideLabel"}
-        options={[]}
         skeleton
       />
     ),
@@ -115,7 +110,7 @@ test.describe("Screenshot tests", () => {
 test("should have aria-label if label is hidden", async ({ mount, makeAxeBuilder }) => {
   // ARRANGE
   const component = await mount(
-    <OnyxSelect style="width: 16rem" label="Test label" options={[]} hideLabel />,
+    <OnyxSelectInput style="width: 16rem" label="Test label" hideLabel />,
   );
 
   // ACT

packages/sit-onyx/src/components/OnyxSelect/OnyxSelect.stories.ts → packages/sit-onyx/src/components/OnyxSelectInput/OnyxSelectInput.stories.ts

@@ -1,17 +1,17 @@
 import { defineStorybookActionsAndVModels } from "@sit-onyx/storybook-utils";
 import type { Meta, StoryObj } from "@storybook/vue3";
 import { Default as ListboxDefaultStory } from "../OnyxListbox/OnyxListbox.stories";
-import OnyxSelect from "./OnyxSelect.vue";
+import OnyxSelectInput from "./OnyxSelectInput.vue";
 
-// TODO: description in figma is missing.
 /**
- * This is a select.
+ * This is the select element.
+ * Itself is readonly and only takes care of showing the selection.
  */
-const meta: Meta<typeof OnyxSelect> = {
-  title: "components/Select",
+const meta: Meta<typeof OnyxSelectInput> = {
+  title: "support/SelectInput",
   ...defineStorybookActionsAndVModels({
-    component: OnyxSelect,
-    events: ["update:modelValue"],
+    component: OnyxSelectInput,
+    events: [],
     decorators: [
       (story) => ({
         components: { story },
@@ -22,7 +22,7 @@ const meta: Meta<typeof OnyxSelect> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof OnyxSelect>;
+type Story = StoryObj<typeof OnyxSelectInput>;
 
 const EXAMPLE_OPTIONS = ListboxDefaultStory.args.options;
 
@@ -32,7 +32,6 @@ const EXAMPLE_OPTIONS = ListboxDefaultStory.args.options;
 export const Default = {
   args: {
     label: "Fruits",
-    options: EXAMPLE_OPTIONS,
     placeholder: "Select your fruits",
   },
 } satisfies Story;
@@ -43,7 +42,7 @@ export const Default = {
 export const FilledSingleSelect = {
   args: {
     ...Default.args,
-    modelValue: EXAMPLE_OPTIONS[0],
+    selection: EXAMPLE_OPTIONS[0],
   },
 } satisfies Story;
 
@@ -54,8 +53,7 @@ export const FilledSingleSelect = {
 export const FilledMultiSelect = {
   args: {
     ...Default.args,
-    multiple: true,
-    modelValue: EXAMPLE_OPTIONS.slice(0, 2),
+    selection: EXAMPLE_OPTIONS.slice(0, 2),
   },
 } satisfies Story;
 
@@ -66,8 +64,8 @@ export const FilledMultiSelect = {
 export const FilledMultiSelectPreview = {
   args: {
     ...FilledMultiSelect.args,
-    modelValue: EXAMPLE_OPTIONS.slice(0, 5),
-    multiple: { textMode: "preview" },
+    selection: EXAMPLE_OPTIONS.slice(0, 5),
+    textMode: "preview",
   },
 } satisfies Story;
 
@@ -88,7 +86,7 @@ export const Disabled = {
   args: {
     ...Default.args,
     disabled: true,
-    modelValue: EXAMPLE_OPTIONS[0],
+    selection: EXAMPLE_OPTIONS[0],
   },
 } satisfies Story;
 
@@ -108,7 +106,7 @@ export const Readonly = {
 export const Loading = {
   args: {
     ...Default.args,
-    modelValue: EXAMPLE_OPTIONS[0],
+    selection: EXAMPLE_OPTIONS[0],
     loading: true,
   },
 } satisfies Story;