feat(OnyxSelectInput): support validation

.changeset/cold-doors-pump.md

@@ -0,0 +1,5 @@
+---
+"@sit-onyx/headless": minor
+---
+
+feat(createComboBox): open flyout on text input for searchable combo boxes. Fix close/open bug when selecting with space

.changeset/rare-cheetahs-work.md

@@ -0,0 +1,8 @@
+---
+"sit-onyx": minor
+---
+
+feat(OnyxSelectInput): support validity handling
+
+- internal input is not readonly, but blocks all character inputs
+- supports translated error message for empty required inputs

.changeset/unlucky-otters-marry.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": minor
+---
+
+feat(global.css): include layers order to prevent hierarchy issues

apps/alpha-test-app/src/components/LanguageSelection.vue

@@ -1,11 +1,34 @@
 <script lang="ts" setup>
-import { OnyxRadioGroup, type SelectOption } from "sit-onyx";
+import { OnyxSelect, type SelectOption } from "sit-onyx";
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
 
 const locale = defineModel<string | undefined>();
+
+const { t } = useI18n();
 const supportedLocales = ["en-US", "de-DE", "ko-KR"];
-const options: SelectOption[] = supportedLocales.map((value) => ({ value, label: value }));
+const options: SelectOption<string>[] = supportedLocales.map((value) => ({ value, label: value }));
+
+const selectModel = computed({
+  get: () => options.find((option) => option.value === locale.value),
+  set: (newLocale) => (locale.value = newLocale?.value),
+});
 </script>
 
 <template>
-  <OnyxRadioGroup v-model="locale" headline="Select language" :options="options" />
+  <OnyxSelect
+    v-model="selectModel"
+    class="language"
+    label="Select language"
+    list-label="List label"
+    :options="options"
+    :message="`Preview: ${t('message')} in ${locale}`"
+  />
 </template>
+
+<style lang="scss" scoped>
+.language {
+  margin-bottom: var(--onyx-spacing-sm);
+  max-width: 15rem;
+}
+</style>

apps/alpha-test-app/src/components/form-demo/FormDemo.vue

@@ -5,11 +5,13 @@ import {
   OnyxHeadline,
   OnyxInput,
   OnyxRadioGroup,
+  OnyxSelect,
   OnyxSwitch,
   OnyxTextarea,
   type CheckboxGroupOption,
   type OnyxRadioGroupProps,
   type RadioButtonOption,
+  type SelectOption,
 } from "sit-onyx";
 import { ref } from "vue";
 
@@ -23,11 +25,27 @@ export type FormData = Partial<{
   patternInput: string;
   switch: boolean;
   checkboxGroup: number[];
+  requiredSelect: SelectOption[];
   radioGroup: OnyxRadioGroupProps["modelValue"];
 }>;
 
 const formState = defineModel<FormData>();
 
+const selectOptions = [
+  {
+    value: "apple",
+    label: "Apple",
+  },
+  {
+    value: "banana",
+    label: "Banana",
+  },
+  {
+    value: "strawberry",
+    label: "Strawberry",
+  },
+];
+
 const customErrorExample = ref("");
 
 const onPatternValidityChange = (state: ValidityState) => {
@@ -50,50 +68,92 @@ const radioOptions: RadioButtonOption[] = [
 </script>
 
 <template>
-  <form v-if="formState" class="demo" @submit.prevent="handleSubmit" @reset="formState = {}">
-    <OnyxHeadline is="h2" class="demo__headline"
+  <form
+    v-if="formState"
+    class="demo onyx-grid"
+    @submit.prevent="handleSubmit"
+    @reset="formState = {}"
+  >
+    <OnyxHeadline is="h3" class="onyx-grid-span-20"
       >This form is currently <span class="demo__invalid">in</span>valid.</OnyxHeadline
     >
 
-    <OnyxInput v-model="formState.defaultInput" label="Default" />
+    <OnyxInput v-model="formState.defaultInput" class="onyx-grid-span-4" label="Default" />
 
-    <OnyxInput v-model="formState.requiredInput" label="Requires a value" required />
+    <OnyxInput
+      v-model="formState.requiredInput"
+      class="onyx-grid-span-4"
+      label="Requires a value"
+      required
+    />
 
     <OnyxInput
       v-model="formState.minlengthInput"
+      class="onyx-grid-span-4"
       label="Minlength 5"
       type="text"
       :minlength="5"
       required
     />
+    <OnyxInput
+      v-model="formState.typeInput"
+      class="onyx-grid-span-4"
+      label="Type email"
+      type="email"
+    />
+
+    <OnyxInput
+      v-model="formState.patternInput"
+      class="onyx-grid-span-4"
+      label="Pattern lowercase characters"
+      pattern="[a-z ]*"
+      :custom-error="customErrorExample"
+      @validity-change="onPatternValidityChange"
+    />
+
+    <OnyxSelect
+      v-model="formState.requiredSelect"
+      class="onyx-grid-span-4"
+      label="Example select"
+      list-label="List label"
+      multiple
+      :options="selectOptions"
+      placeholder="Placeholder..."
+      required
+    />
 
-    <OnyxTextarea v-model="formState.requiredTextarea" label="Requires a value" required />
+    <OnyxTextarea
+      v-model="formState.requiredTextarea"
+      class="onyx-grid-span-4"
+      label="Requires a value"
+      required
+    />
 
     <OnyxTextarea
       v-model="formState.minlengthTextarea"
+      class="onyx-grid-span-4"
       label="Minlength 5"
       type="text"
       :minlength="5"
       required
     />
 
-    <OnyxInput v-model="formState.typeInput" label="Type email" type="email" />
+    <OnyxSwitch v-model="formState.switch" class="onyx-grid-span-4" label="Switch" required />
 
-    <OnyxInput
-      v-model="formState.patternInput"
-      label="Pattern lowercase characters"
-      pattern="[a-z ]*"
-      :custom-error="customErrorExample"
-      @validity-change="onPatternValidityChange"
+    <OnyxCheckboxGroup
+      v-model="formState.checkboxGroup"
+      class="onyx-grid-span-4"
+      :options="checkboxOptions"
     />
 
-    <OnyxSwitch v-model="formState.switch" label="Switch" required />
-
-    <OnyxCheckboxGroup v-model="formState.checkboxGroup" :options="checkboxOptions" />
-
-    <OnyxRadioGroup v-model="formState.radioGroup" :options="radioOptions" required />
+    <OnyxRadioGroup
+      v-model="formState.radioGroup"
+      class="onyx-grid-span-4"
+      :options="radioOptions"
+      required
+    />
 
-    <div class="demo__actions">
+    <div class="demo__actions onyx-grid-span-20">
       <OnyxButton label="Reset" color="neutral" type="reset" />
       <OnyxButton class="demo__submit" label="Submit" type="submit" />
     </div>
@@ -102,10 +162,6 @@ const radioOptions: RadioButtonOption[] = [
 
 <style lang="scss" scoped>
 .demo {
-  display: flex;
-  flex-direction: column;
-  gap: var(--onyx-spacing-md);
-
   &:valid {
     .demo__invalid {
       display: none;
@@ -116,10 +172,5 @@ const radioOptions: RadioButtonOption[] = [
     display: flex;
     gap: var(--onyx-spacing-xs);
   }
-
-  .onyx-input,
-  .onyx-textarea {
-    max-width: 20rem;
-  }
 }
 </style>

apps/alpha-test-app/src/stores/grid-store.ts

@@ -2,8 +2,8 @@ import { defineStore } from "pinia";
 import { ref } from "vue";
 
 export const useGridStore = defineStore("grid", () => {
-  const isMaxWidth = ref(false);
-  const isCentered = ref(false);
+  const isMaxWidth = ref(true);
+  const isCentered = ref(true);
 
   return { isMaxWidth, isCentered };
 });

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

@@ -5,7 +5,7 @@ import { useI18n } from "vue-i18n";
 import LanguageSelection from "../components/LanguageSelection.vue";
 import FormDemo, { type FormData } from "../components/form-demo/FormDemo.vue";
 
-const { t, locale } = useI18n();
+const { locale } = useI18n();
 
 const validFormData = ref<FormData>({
   defaultInput: "No Validation",
@@ -27,31 +27,29 @@ const invalidFormData = ref<FormData>({
 
 <template>
   <OnyxPageLayout>
-    <template #sidebar>
-      <div class="sidebar">
-        <LanguageSelection v-model="locale" />
+    <div class="onyx-grid-container">
+      <section class="header">
+        <OnyxHeadline is="h1" element="h1">Form Demos</OnyxHeadline>
 
-        <p>"{{ t("message") }}" in {{ locale }}</p>
-      </div>
-    </template>
+        <LanguageSelection v-model="locale" />
+      </section>
 
-    <div class="page">
-      <OnyxHeadline is="h1" element="h1">Initially Invalid example</OnyxHeadline>
+      <OnyxHeadline is="h2" element="h1">Initially Invalid example</OnyxHeadline>
       <FormDemo v-model="invalidFormData" />
       <pre class="state">State: {{ invalidFormData }}</pre>
 
       <hr />
 
-      <OnyxHeadline is="h1" element="h1">Initially Valid example</OnyxHeadline>
+      <OnyxHeadline is="h2" element="h1">Initially Valid example</OnyxHeadline>
       <FormDemo v-model="validFormData" />
       <pre class="state">State: {{ validFormData }}</pre>
     </div>
   </OnyxPageLayout>
 </template>
 
 <style lang="scss" scoped>
-.page {
-  padding: var(--onyx-spacing-xl);
+.header {
+  margin-bottom: var(--onyx-spacing-lg);
 }
 .sidebar {
   padding: var(--onyx-spacing-3xs);

packages/headless/src/composables/comboBox/createComboBox.ct.ts

@@ -36,7 +36,7 @@ const expectToClose = async (
  * Test an implementation of the combobox based on https://w3c.github.io/aria/#combobox
  */
 export const comboboxTesting = async (
-  page: Page,
+  _page: Page,
   listbox: Locator,
   combobox: Locator,
   button: Locator,

packages/headless/src/composables/comboBox/createComboBox.ts

@@ -1,4 +1,4 @@
-import { computed, ref, unref, type MaybeRef, type Ref } from "vue";
+import { computed, unref, type MaybeRef, type Ref } from "vue";
 import { createBuilder } from "../../utils/builder";
 import { createId } from "../../utils/id";
 import { isPrintableCharacter, wasKeyPressed, type PressedKey } from "../../utils/keyboard";
@@ -12,8 +12,13 @@ import { useTypeAhead } from "../typeAhead";
 
 export type ComboboxAutoComplete = "none" | "list" | "both";
 
-const OPENING_KEYS: PressedKey[] = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"];
-const CLOSING_KEYS: PressedKey[] = ["Escape", { key: "ArrowUp", altKey: true }, "Enter", "Tab"];
+export const OPENING_KEYS: PressedKey[] = ["ArrowDown", "ArrowUp", " ", "Enter", "Home", "End"];
+export const CLOSING_KEYS: PressedKey[] = [
+  "Escape",
+  { key: "ArrowUp", altKey: true },
+  "Enter",
+  "Tab",
+];
 const SELECTING_KEYS_SINGLE: PressedKey[] = ["Enter", " "];
 const SELECTING_KEYS_MULTIPLE: PressedKey[] = ["Enter"];
 
@@ -117,7 +122,6 @@ export const createComboBox = createBuilder(
     onActivatePrevious,
     templateRef,
   }: CreateComboboxOptions<TValue, TAutoComplete, TMultiple>) => {
-    const inputValid = ref(true);
     const controlsId = createId("comboBox-control");
 
     const autocomplete = computed(() => unref(autocompleteRef));
@@ -126,10 +130,6 @@ export const createComboBox = createBuilder(
 
     const handleInput = (event: Event) => {
       const inputElement = event.target as HTMLInputElement;
-      inputValid.value = inputElement.validity.valid;
-      if (!unref(isExpanded)) {
-        onToggle?.();
-      }
 
       if (autocomplete.value !== "none") {
         onAutocomplete?.(inputElement.value);
@@ -193,6 +193,10 @@ export const createComboBox = createBuilder(
         !isExpanded.value && onToggle?.();
         return typeAhead(event);
       }
+      if (autocomplete.value !== "none" && isPrintableCharacter(event.key)) {
+        !isExpanded.value && onToggle?.();
+        return;
+      }
       return handleNavigation(event);
     };
 

packages/sit-onyx/src/components/OnyxButton/OnyxButton.vue

@@ -17,7 +17,9 @@ const props = withDefaults(defineProps<OnyxButtonProps>(), {
 const { densityClass } = useDensity(props);
 
 const emit = defineEmits<{
-  /** Emitted when the button is clicked (and is not disabled). */
+  /**
+   * Emitted when the button is clicked (and is not disabled).
+   */
   click: [];
 }>();
 </script>

packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx

@@ -73,7 +73,7 @@ test.describe("Screenshot tests", () => {
     disabledAccessibilityRules: ["color-contrast"],
     component: (column, row) => {
       const label =
-        column === "long-text" ? "Very long label that should be truncated" : "Test label";
+        column === "long-text" ? "Very very long label that should be truncated" : "Test label";
       const message =
         column === "long-text" ? "Very long message that should be truncated" : "Test message";
       const labelTooltip = "More information";
@@ -103,12 +103,6 @@ test.describe("Screenshot tests", () => {
     },
   });
 
-  /* 
-  message
-invalid
-error tooltip
-counter
-  */
   executeMatrixScreenshotTest({
     name: "Input (message replacement on invalid)",
     columns: ["default", "long-text", "with-counter"],