implement basic slots for onyx input

SchwarzIT · Jan 9, 2025 · 760d145 · 760d145
1 parent 7f5586e
commit 760d145
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 5 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
@@ -6,20 +6,38 @@ import { createFormElementUtils } from "../OnyxFormElement/OnyxFormElement.ct-ut
 import OnyxInput from "./OnyxInput.vue";
 
 test.describe("Screenshot tests", () => {
-  for (const state of ["default", "placeholder", "with value", "autofill"] as const) {
+  for (const state of [
+    "default",
+    "placeholder",
+    "with value",
+    "autofill",
+    "slot content",
+  ] as const) {
     executeMatrixScreenshotTest({
       name: `Input (${state})`,
       columns: DENSITIES,
       rows: ["default", "hover", "focus"],
       component: (column) => {
+        const modelValue =
+          state === "slot content"
+            ? "test"
+            : ["autofill", "with value"].includes(state)
+              ? "Filled value"
+              : undefined;
+
         return (
           <OnyxInput
             label="Test label"
             placeholder={state === "placeholder" ? "Test placeholder" : undefined}
             density={column}
-            modelValue={state === "with value" || state === "autofill" ? "Filled value" : undefined}
+            modelValue={modelValue}
             style="width: 12rem;"
-          />
+          >
+            {state === "slot content" && [
+              <template v-slot:leading>https://</template>,
+              <template v-slot:trailing>.com</template>,
+            ]}
+          </OnyxInput>
         );
       },
       hooks: {

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts
@@ -192,3 +192,12 @@ export const WithMessageTooltip = {
     },
   },
 } satisfies Story;
+
+export const WithSlotContent = {
+  args: {
+    ...Default.args,
+    modelValue: "example",
+    leading: "https://",
+    trailing: ".com",
+  },
+} satisfies Story;
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -38,6 +38,19 @@ const emit = defineEmits<{
   validityChange: [validity: ValidityState];
 }>();
 
+const slots = defineSlots<{
+  /**
+   * Inline content rendered before the actual input area.
+   * Avoid using this slot, as it will shrink the space of the input.
+   */
+  leading?(): unknown /**
+  /**
+   * Inline content rendered after the actual input area.
+   * Avoid using this slot, as it will shrink the space of the input.
+   */;
+  trailing?(): unknown;
+}>();
+
 const { t } = injectI18n();
 const { vCustomValidity, errorMessages } = useCustomValidity({ props, emit });
 const successMessages = computed(() => getFormMessages(props.success));
@@ -78,6 +91,8 @@ const errorClass = useErrorClass(showError);
     >
       <template #default="{ id: inputId }">
         <div class="onyx-input__wrapper">
+          <slot name="leading"></slot>
+          <hr v-if="slots.leading" class="onyx-input__separator onyx-input__separator--leading" />
           <OnyxLoadingIndicator v-if="props.loading" class="onyx-input__loading" type="circle" />
           <input
             :id="inputId"
@@ -120,7 +135,8 @@ const errorClass = useErrorClass(showError);
             color="success"
           />
 
-          <!-- eslint-enable vuejs-accessibility/no-autofocus -->
+          <hr v-if="slots.trailing" class="onyx-input__separator onyx-input__separator--trailing" />
+          <slot name="trailing"></slot>
         </div>
       </template>
     </OnyxFormElement>

diff --git a/packages/sit-onyx/src/styles/mixins/input.scss b/packages/sit-onyx/src/styles/mixins/input.scss
@@ -34,7 +34,7 @@
     border-radius: var(--onyx-radius-sm);
     border: var(--onyx-1px-in-rem) solid var(--border-color);
     background-color: var(--background-color);
-    color: var(--onyx-color-text-icons-neutral-intense);
+    color: var(--onyx-color-text-icons-neutral-medium);
 
     outline: var(--onyx-outline-width) var(--outline-style) var(--outline-color);
 
@@ -47,6 +47,10 @@
     padding: $vertical-padding var(--onyx-density-sm);
     height: calc(1lh + 2 * #{$vertical-padding});
 
+    #{$base-selector}__native {
+      color: var(--onyx-color-text-icons-neutral-intense);
+    }
+
     &:has(#{$base-selector}__native:read-write):hover {
       --border-color: var(--hover-border-color, var(--onyx-color-component-border-primary-hover));
       --button-color: var(--button-hover-color, var(--onyx-color-text-icons-primary-medium));
@@ -94,6 +98,24 @@
     }
   }
 
+  &__separator {
+    all: initial;
+    line-height: inherit;
+    // should have full height, but not overlap actual border
+    height: calc(1lh + 2 * var(--onyx-input-padding-vertical) - 2px);
+    border-width: 1px;
+    border-color: var(--onyx-color-component-border-neutral);
+
+    &--trailing {
+      border-inline-start-style: solid;
+      padding-inline-end: calc(var(--onyx-density-sm) - var(--onyx-density-xs));
+    }
+    &--leading {
+      border-inline-end-style: solid;
+      padding-inline-start: calc(var(--onyx-density-sm) - var(--onyx-density-xs));
+    }
+  }
+
   &__loading {
     color: var(--onyx-color-text-icons-primary-intense);
   }