feat(components): updates tooltip component

swisspost · Dec 12, 2023 · 8ea76e0 · 8ea76e0
1 parent e238edd
commit 8ea76e0
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 9 deletions.
diff --git a/.changeset/witty-walls-laugh.md b/.changeset/witty-walls-laugh.md
@@ -0,0 +1,11 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Updated tooltip to better match the description in figma.
+
+- added a new property that defines wheter or not the arrow is rendered.
+- set minHeight to 32px
+- set maxWidht to 200px
+- upated storybook documentation
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -151,6 +151,10 @@ export namespace Components {
           * @param force Pass true to always show or false to always hide
          */
         "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
+        /**
+          * Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered
+         */
+        "withArrow"?: boolean;
     }
 }
 export interface PostAlertCustomEvent<T> extends CustomEvent<T> {
@@ -372,6 +376,10 @@ declare namespace LocalJSX {
           * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries.
          */
         "placement"?: Placement;
+        /**
+          * Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered
+         */
+        "withArrow"?: boolean;
     }
     interface IntrinsicElements {
         "post-accordion": PostAccordion;

diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -15,7 +15,8 @@ div {
   z-index: commons.$zindex-tooltip;
 
   width: max-content;
-  max-width: 30ch;
+  max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
+  min-height: spacing.$size-regular;
   margin: 0;
   padding: spacing.$size-micro spacing.$size-mini;
 

diff --git a/packages/components/src/components/post-tooltip/post-tooltip.tsx b/packages/components/src/components/post-tooltip/post-tooltip.tsx
@@ -58,6 +58,13 @@ export class PostTooltip {
    */
   @Prop() readonly backgroundColor?: BackgroundColor = 'primary';
 
+  /**
+   * Defines wheter an Arrow is rendered or not.
+   * true: arrow is rendered
+   * false: arrow is not rendered
+   */
+  @Prop() readonly withArrow?: boolean = false;
+
   /**
    * Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
    * Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted
@@ -101,7 +108,7 @@ export class PostTooltip {
   connectedCallback() {
     if (!this.host.id) {
       throw new Error(
-        'No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.',
+        "No id set: <post-tooltip> must have an id, linking it to it's target element using the data-tooltip-target attribute.",
       );
     }
 
@@ -237,7 +244,7 @@ export class PostTooltip {
         flip(),
         inline(),
         shift({ padding: 8 }),
-        offset(12), // 4px outside of element to account for focus outline + ~arrow size
+        offset(this.withArrow ? 12 : 4), // 4px outside of element to account for focus outline + ~arrow size
         arrow({ element: this.arrowRef, padding: 8 }),
       ],
     });
@@ -268,12 +275,16 @@ export class PostTooltip {
           class={this.tooltipClasses}
           ref={(el: HTMLDivElement & PopoverElement) => (this.tooltipRef = el)}
         >
-          <span
-            class="arrow"
-            ref={el => {
-              this.arrowRef = el;
-            }}
-          ></span>
+          {this.withArrow ? (
+            <span
+              class="arrow"
+              ref={el => {
+                this.arrowRef = el;
+              }}
+            ></span>
+          ) : (
+            ''
+          )}
           <slot></slot>
         </div>
       </Host>

diff --git a/packages/components/src/components/post-tooltip/readme.md b/packages/components/src/components/post-tooltip/readme.md
@@ -11,6 +11,7 @@
 | ----------------- | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
 | `backgroundColor` | `background-color` | Defines the background color of the tooltip. Choose the one that provides the best contrast in your scenario.                                                                                                                                                                                                             | `"primary" \| "yellow"`                                                                                                                                              | `'primary'` |
 | `placement`       | `placement`        | Defines the placement of the tooltip according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Tooltips are automatically flipped to the opposite side if there is not enough available space and are shifted towards the viewport if they would overlap edge boundaries. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'top'`     |
+| `withArrow`       | `with-arrow`       | Defines wheter an Arrow is rendered or not. true: arrow is rendered false: arrow is not rendered                                                                                                                                                                                                                          | `boolean`                                                                                                                                                            | `false`     |
 
 
 ## Methods

diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
@@ -50,6 +50,7 @@ function render(args: Args) {
       class="hydrated"
       background-color="${ifDefined(args.backgroundColor)}"
       placement="${ifDefined(args.placement)}"
+      with-arrow=${ifDefined(args.withArrow)}
     >
       ${unsafeHTML(innerHTML)}
     </post-tooltip>