resolve comments

SchwarzIT · Sep 3, 2024 · aa50aa0 · aa50aa0
1 parent 00f336b
commit aa50aa0
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 24 deletions.
diff --git a/apps/demo-app/src/views/HomeView.vue b/apps/demo-app/src/views/HomeView.vue
@@ -280,7 +280,7 @@ const currentPage = ref(1);
  />
  <OnyxHeadline is="h2">Tooltip (auto alignment)</OnyxHeadline>
 
- <div v-if="show('OnyxTooltip')">
+ <div v-if="show('OnyxTooltip')" class="tooltip-container">
  <OnyxTooltip text="Example tooltip text">
  <template #default="{ trigger }">
  <OnyxButton label="Left" v-bind="trigger" />
@@ -340,9 +340,9 @@ const currentPage = ref(1);
  color: var(--onyx-color-text-icons-neutral-soft);
 }
 .tooltip-container {
- display: "flex";
+ display: flex;
  justify-content: space-between;
- width: "101%";
- margin-top: "2rem";
+ width: 101%;
+ margin-top: 2rem;
 }
 </style>
diff --git a/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.ct.tsx b/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.ct.tsx
@@ -175,7 +175,7 @@ test.describe("Alignment screenshot tests", () => {
  rows: ["top", "bottom"],
  component: (column, row) => {
  return (
- <OnyxTooltip text="Test tooltip" position={row} open={true} float={column}>
+ <OnyxTooltip text="Test tooltip" position={row} open={true} align={column}>
  <span
  style={{
  fontFamily: "var(--onyx-font-family)",

diff --git a/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.stories.ts b/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.stories.ts
@@ -54,8 +54,8 @@ export const Default = {
  open: true,
  position: "auto",
  color: "neutral",
- float: "auto",
- de,
+ align: "auto",
+ density: "default",
  },
 } satisfies Story;
 

diff --git a/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue b/packages/sit-onyx/src/components/OnyxTooltip/OnyxTooltip.vue
@@ -36,7 +36,8 @@ const props = withDefaults(defineProps<OnyxTooltipProps>(), {
  position: "auto",
  fitParent: false,
  open: "hover",
- float: "auto",
+ align: "auto",
+ density: "default",
 });
 
 defineSlots<{
@@ -81,18 +82,16 @@ const type = computed(() => {
  return "hover";
 });
 
-// classes for the tooltip | computed to drevent bugs
+// classes for the tooltip | computed to prevent bugs
 const tooltipClasses = computed(() => {
  return {
  "onyx-tooltip--danger": props.color === "danger",
- "onyx-tooltip--top": props.position === "top",
- "onyx-tooltip--bottom": props.position === "bottom",
- ["onyx-tooltip--" + openDirection.value]: props.position === "auto",
  "onyx-tooltip--fit-parent": props.fitParent,
  "onyx-tooltip--hidden": !isVisible.value,
- "onyx-tooltip--float--left": props.float === "left",
- "onyx-tooltip--float--right": props.float === "right",
- ["onyx-tooltip--float--" + wedgePosition.value]: wedgePosition.value && props.float === "auto",
+ [`onyx-tooltip--${props.position}`]: props.position !== "auto",
+ [`onyx-tooltip--${openDirection.value}`]: props.position === "auto",
+ [`onyx-tooltip--align--${wedgePosition.value}`]: props.align === "auto",
+ [`onyx-tooltip--align--${props.align}`]: props.align !== "auto",
  };
 });
 
@@ -112,14 +111,14 @@ const tooltipRef = ref<HTMLElement>();
 const { openDirection, updateOpenDirection } = useOpenDirection(tooltipWrapperRef);
 const { wedgePosition, updateWedgePosition } = useWedgePosition(tooltipWrapperRef, tooltipRef);
 
-// update open direction on resize and to ensure the tooltip is always visible
+// update open direction on resize to ensure the tooltip is always visible
 onMounted(() => {
- const updateOnEvent = () => {
+ const updateOnResize = () => {
  updateOpenDirection();
  updateWedgePosition();
  };
 
- window.addEventListener("resize", updateOnEvent);
+ window.addEventListener("resize", updateOnResize);
 
  // initial update
  updateOpenDirection();
@@ -130,7 +129,7 @@ onBeforeUnmount(() => {
  window.removeEventListener("resize", updateOpenDirection);
  window.removeEventListener("resize", updateWedgePosition);
 });
-// update open direction on visibliity changes ensure the tooltip is always visible
+// update open direction when visibility changes to ensure the tooltip is always visible
 watch(isVisible, async () => {
  await nextTick();
  updateOpenDirection();
@@ -229,7 +228,7 @@ $wedge-size: 0.5rem;
  }
  }
 
- &--float {
+ &--align {
  &--left {
  left: var(--wedge-size);
  transform: translateX(0);

diff --git a/packages/sit-onyx/src/components/OnyxTooltip/types.ts b/packages/sit-onyx/src/components/OnyxTooltip/types.ts
@@ -29,9 +29,9 @@ export type OnyxTooltipProps = DensityProp & {
  */
  position?: TooltipPosition;
  /**
- * How to float the tooltip relative to the parent element.
+ * How to align the tooltip relative to the parent element.
  */
- float?: TooltipFloat;
+ align?: TooltipAlignment;
  /**
  * If `true`, the tooltip will match the width of the parent/slot element.
  */
@@ -50,8 +50,8 @@ export type OnyxTooltipProps = DensityProp & {
 
 export const TOOLTIP_POSITIONS = ["top", "bottom", "auto"] as const;
 export type TooltipPosition = (typeof TOOLTIP_POSITIONS)[number];
-export const TOOLTIP_FLOAT = ["left", "right", "center", "auto"] as const;
-export type TooltipFloat = (typeof TOOLTIP_FLOAT)[number];
+export const TOOLTIP_ALIGNMENT = ["left", "right", "center", "auto"] as const;
+export type TooltipAlignment = (typeof TOOLTIP_ALIGNMENT)[number];
 
 export type TooltipOpen =
  | "hover"