Fix styling

SchwarzIT · May 27, 2024 · fecb131 · fecb131
1 parent f625de9
commit fecb131
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 17 deletions.
diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.ct.tsx
@@ -85,11 +85,11 @@ test.describe("Screenshot tests", () => {
     },
     beforeScreenshot: async (component, page, _column, _row) => {
       const tooltip = page.getByRole("tooltip");
+      await tooltip.hover();
+
       await component.evaluate((element) => {
-        element.style.height = `10rem`;
+        element.style.paddingTop = `3rem`;
       });
-
-      await tooltip.hover();
     },
   });
 

diff --git a/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue b/packages/sit-onyx/src/components/OnyxInput/OnyxInput.vue
@@ -80,11 +80,8 @@ const { t } = injectI18n();
 
   <div v-else :class="['onyx-input', requiredTypeClass, densityClass]">
     <label>
-      <div
-        v-if="!props.hideLabel"
-        :class="['onyx-input__label', 'onyx-text--small', requiredMarkerClass]"
-      >
-        <div class="onyx-input__info-label">
+      <div v-if="!props.hideLabel" class="onyx-input__label onyx-text--small">
+        <div :class="['onyx-input__info-label', requiredMarkerClass]">
           <div class="onyx-truncation-ellipsis">{{ props.label }}</div>
           <OnyxTooltip v-if="props.infoLabel" open="hover" :text="props.infoLabel">
             <button

diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.ct.tsx
@@ -231,11 +231,11 @@ test.describe("Screenshot tests", () => {
     },
     beforeScreenshot: async (component, page, _column, _row) => {
       const tooltip = page.getByRole("tooltip");
+      await tooltip.hover();
+
       await component.evaluate((element) => {
-        element.style.height = `15rem`;
+        element.style.paddingTop = `3rem`;
       });
-
-      await tooltip.hover();
     },
   });
 });

diff --git a/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue b/packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.vue
@@ -100,11 +100,8 @@ const handleInput = (event: Event) => {
     :style="autosizeMinMaxStyles"
   >
     <label>
-      <div
-        v-if="!props.hideLabel"
-        :class="['onyx-textarea__label', 'onyx-text--small', requiredMarkerClass]"
-      >
-        <div class="onyx-textarea__info-label">
+      <div v-if="!props.hideLabel" class="onyx-textarea__label onyx-text--small">
+        <div :class="['onyx-textarea__info-label', requiredMarkerClass]">
           <div class="onyx-truncation-ellipsis">{{ props.label }}</div>
           <OnyxTooltip
             v-if="props.infoLabel"
@@ -115,7 +112,7 @@ const handleInput = (event: Event) => {
             <button
               :aria-label="t('infoTooltip')"
               role="tooltip"
-              class="onyx-input__tooltip-trigger"
+              class="onyx-textarea__tooltip-trigger"
             >
               <OnyxIcon :icon="circleInformation" color="neutral" size="12px" />
             </button>