feat(OnyxTooltip): auto align tooltip (#1821)

- add auto alingment to the tooltip component
- add screenshot-tests
- add a demo on the homeView

Removed Tooltip-Error-Logic (hide tooltip before user interaction) in:
- OnyxCheckbox
- OnyxRadioButton
- OnyxSwitch

// hide error tooltip before a user interaction happened
.onyx-error-tooltip:has(&__input):not(:has(&__input:user-invalid))
.onyx-tooltip {
      display: none;
    }

---------

Co-authored-by: Chrisiboiii <[email protected]>
Co-authored-by: Maja Zarkova <[email protected]>
Co-authored-by: Chrisiboiii <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: ChristianBusshoff <[email protected]>

.changeset/happy-carrots-invite.md

@@ -0,0 +1,5 @@
+---
+"sit-onyx": patch
+---
+
+Implement autoalignment feature for OnyxTooltip

apps/demo-app/src/views/HomeView.vue

@@ -270,10 +270,30 @@ const currentPage = ref(1);
           label="Show toast"
           @click="toast.show({ headline: 'Example toast', color: 'success' })"
         />
+        <OnyxHeadline is="h2">Tooltip (auto alignment)</OnyxHeadline>
 
-        <OnyxTooltip v-if="show('OnyxTooltip')" text="Example tooltip text">
-          Hover me to show tooltip
-        </OnyxTooltip>
+        <div v-if="show('OnyxTooltip')" class="tooltip-container">
+          <OnyxTooltip text="Example tooltip text">
+            <template #default="{ trigger }">
+              <OnyxButton label="Left" v-bind="trigger" />
+            </template>
+          </OnyxTooltip>
+          <OnyxTooltip text="Example tooltip text">
+            <template #default="{ trigger }">
+              <OnyxButton label="Center" v-bind="trigger" />
+            </template>
+          </OnyxTooltip>
+          <OnyxTooltip text="Example tooltip text">
+            <template #default="{ trigger }">
+              <OnyxButton label="Center" v-bind="trigger" />
+            </template>
+          </OnyxTooltip>
+          <OnyxTooltip text="Example tooltip text">
+            <template #default="{ trigger }">
+              <OnyxButton label="Right" v-bind="trigger" />
+            </template>
+          </OnyxTooltip>
+        </div>
 
         <!-- Add new components alphabetically. -->
       </div>
@@ -311,4 +331,10 @@ const currentPage = ref(1);
 .state-info {
   color: var(--onyx-color-text-icons-neutral-soft);
 }
+.tooltip-container {
+  display: flex;
+  justify-content: space-between;
+  width: 101%;
+  margin-top: 2rem;
+}
 </style>

packages/headless/src/index.ts

@@ -1,4 +1,5 @@
 export * from "./composables/comboBox/createComboBox";
+export * from "./composables/helpers/useGlobalListener";
 export * from "./composables/listbox/createListbox";
 export * from "./composables/menuButton/createMenuButton";
 export * from "./composables/navigationMenu/createMenu";

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

@@ -78,7 +78,10 @@ test.describe("Screenshot tests", () => {
           : "Test error";
       return (
         <OnyxCheckbox
-          style={row !== "default" ? "padding-top: 3rem;" : ""}
+          style={{
+            ...(row !== "default" && { paddingBottom: "3rem" }),
+            ...(column === "hideLabel" && { paddingRight: "3rem" }),
+          }}
           label="Test label"
           modelValue={column === "checked"}
           indeterminate={column === "indeterminate"}

packages/sit-onyx/src/components/OnyxCheckbox/OnyxCheckbox.stories.ts

@@ -52,15 +52,6 @@ export const Required = {
     ...Default.args,
     required: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 2.5rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
 
 /**
@@ -108,13 +99,4 @@ export const CustomError = {
       longMessage: "Further explanation.",
     },
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 5rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;

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

@@ -175,11 +175,6 @@ const title = computed(() => {
       max-width: var(--onyx-checkbox-input-size);
       height: var(--onyx-checkbox-input-size);
     }
-
-    // hide error tooltip before a user interaction happened
-    .onyx-error-tooltip:has(&__input):not(:has(&__input:user-invalid)) .onyx-tooltip {
-      display: none;
-    }
   }
 }
 

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

@@ -113,7 +113,7 @@ test.describe("Screenshot tests", () => {
     name: "CheckboxGroup",
     columns: ["default", "checked", "indeterminate"],
     rows: ["default", "interacted"],
-    component: (column) => {
+    component: (column, row) => {
       const options = [...mockOptions, { label: "Invalid", value: 4, customError: "Invalid" }];
       const modelValue: number[] = [];
       if (column === "checked") {
@@ -128,7 +128,10 @@ test.describe("Screenshot tests", () => {
           label="Checkbox group headline"
           withCheckAll
           modelValue={modelValue}
-          style={{ maxWidth: "16rem" }}
+          style={{
+            maxWidth: "16rem",
+            ...(row === "interacted" && { paddingBottom: "3rem" }),
+          }}
         />
       );
     },

packages/sit-onyx/src/components/OnyxCheckboxGroup/OnyxCheckboxGroup.stories.ts

@@ -12,15 +12,6 @@ const meta: Meta<typeof OnyxCheckboxGroup> = {
   argTypes: {
     withCheckAll: { control: { type: "boolean" } },
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding-left: 1rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 };
 
 export default meta;

packages/sit-onyx/src/components/OnyxFormElement/OnyxFormElement.stories.ts

@@ -9,14 +9,15 @@ import OnyxFormElement from "./OnyxFormElement.vue";
  */
 const meta: Meta<typeof OnyxFormElement> = {
   title: "Support/FormElement",
+
   component: OnyxFormElement,
   argTypes: {
     default: { control: { disable: true } },
   },
   decorators: [
     (story) => ({
       components: { story },
-      template: `<div style="max-width: 12rem; padding: 2rem 1rem">
+      template: `<div style="max-width: 12rem">
                     <story />
                    </div>`,
     }),

packages/sit-onyx/src/components/OnyxInput/OnyxInput.stories.ts

@@ -107,12 +107,6 @@ export const Maxlength: Story = {
     minlength: 5,
     withCounter: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding: 0 0 4rem 4rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**
@@ -160,12 +154,6 @@ export const CustomError: Story = {
     },
     placeholder: "Interact with me to show error",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-bottom: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**
@@ -176,12 +164,6 @@ export const WithLabelTooltip: Story = {
     label: "Label",
     labelTooltip: "More information",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-top: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**

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

@@ -93,6 +93,19 @@ test.describe("Screenshot tests", () => {
           component.getByRole("tooltip"),
           `should show error tooltip for ${row} and ${column}`,
         ).toBeVisible();
+
+        const tooltipSize = await component
+          .getByRole("tooltip")
+          .evaluate((element) => [element.clientHeight, element.clientWidth]);
+
+        // set paddings to fit the full tooltip in the screenshot
+        await component.evaluate(
+          (element, { tooltipSize: [height] }) => {
+            const verticalPadding = `${height + 12}px`;
+            element.style.paddingBottom = verticalPadding;
+          },
+          { tooltipSize },
+        );
       }
     },
   });

packages/sit-onyx/src/components/OnyxRadioButton/OnyxRadioButton.stories.ts

@@ -61,13 +61,4 @@ export const Required = {
     name: "radio-required",
     required: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 2.5rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;

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

@@ -101,16 +101,6 @@ const skeleton = useSkeletonContext(props);
       --onyx-radio-button-selector-background-color: var(--onyx-color-base-primary-400);
     }
 
-    /**
-     * hide error tooltip if the radio button is valid.
-     * this happens when a radio group is required and one of the radio buttons is
-     * checked, the other ones will not update their validityState but will be
-     * recognized as "valid" by CSS
-     */
-    .onyx-error-tooltip:has(&__selector:valid) .onyx-tooltip {
-      display: none;
-    }
-
     &:has(&__selector:invalid) {
       --onyx-radio-button-selector-border-color: var(--onyx-color-base-danger-500);
       --onyx-radio-button-selector-outline-color: var(--onyx-color-base-danger-200);

packages/sit-onyx/src/components/OnyxRadioGroup/OnyxRadioGroup.stories.ts

@@ -96,15 +96,6 @@ export const Required = {
     modelValue: undefined,
     required: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding-left: 2rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
 
 /**
@@ -119,13 +110,4 @@ export const CustomError = {
       longMessage: "Further explanation.",
     },
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding-left: 2rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;

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

@@ -118,12 +118,6 @@ export const WithMessage: Story = {
     message: "Example message",
     messageTooltip: "Additional info message",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-bottom: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**
@@ -134,12 +128,6 @@ export const WithLabelTooltip: Story = {
     ...Default.args,
     labelTooltip: "More information",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-top: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**

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

@@ -55,7 +55,7 @@ test.describe("Screenshot tests", () => {
           : "Test error";
       return (
         <OnyxSwitch
-          style={row !== "default" ? "padding-top: 3rem;" : ""}
+          style={row !== "default" ? "padding-bottom: 3rem;" : ""}
           label="Test label"
           modelValue={column === "checked"}
           customError={customError}

packages/sit-onyx/src/components/OnyxSwitch/OnyxSwitch.stories.ts

@@ -40,15 +40,6 @@ export const Required = {
     ...Default.args,
     required: true,
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 1rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;
 
 /**
@@ -107,13 +98,4 @@ export const CustomError = {
       longMessage: "Further explanation.",
     },
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `
-      <div style="padding: 2rem 0 0 4rem;">
-        <story />
-      </div>`,
-    }),
-  ],
 } satisfies Story;

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

@@ -319,11 +319,6 @@ $input-width: calc(2 * var(--onyx-switch-icon-size) - 2 * var(--onyx-switch-cont
         color: var(--onyx-color-text-icons-neutral-soft);
       }
     }
-
-    // hide error tooltip before a user interaction happened
-    .onyx-error-tooltip:has(&__input):not(:has(&__input:user-invalid)) .onyx-tooltip {
-      display: none;
-    }
   }
 }
 

packages/sit-onyx/src/components/OnyxTextarea/OnyxTextarea.stories.ts

@@ -125,12 +125,6 @@ export const CustomError: Story = {
     },
     placeholder: "Interact with me to show error",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-bottom: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**
@@ -156,12 +150,6 @@ export const WithLabelTooltip: Story = {
     label: "Label",
     labelTooltip: "More Information",
   },
-  decorators: [
-    (story) => ({
-      components: { story },
-      template: `<div style="padding-top: 2rem"> <story /> </div>`,
-    }),
-  ],
 };
 
 /**