feat(components): updates tooltip component

.changeset/swift-tips-kiss.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-components': minor
+---
+
+Update tooltip minHeight and maxWidth and added a new property arrow to tooltip that defines wheter or not the pointer arrow is displayed.

packages/components/src/components.d.ts

@@ -180,6 +180,10 @@ export namespace Components {
         "show": (panelName: string) => Promise<void>;
     }
     interface PostTooltip {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
         /**
           * Programmatically hide this tooltip
          */
@@ -469,6 +473,10 @@ declare namespace LocalJSX {
         "onTabChange"?: (event: PostTabsCustomEvent<HTMLPostTabPanelElement['name']>) => void;
     }
     interface PostTooltip {
+        /**
+          * Wheter or not to display a little pointer arrow
+         */
+        "arrow"?: boolean;
         /**
           * 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.
          */

packages/components/src/components/post-tooltip/post-tooltip.scss

@@ -12,5 +12,7 @@
 post-popovercontainer {
   &::part(popover) {
     padding: spacing.$size-micro spacing.$size-mini;
+    max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
+    min-height: spacing.$size-regular;
   }
 }

packages/components/src/components/post-tooltip/post-tooltip.tsx

@@ -25,6 +25,11 @@ export class PostTooltip {
    */
   @Prop() readonly placement?: Placement = 'top';
 
+  /**
+   * Wheter or not to display a little pointer arrow
+   */
+  @Prop() readonly arrow?: boolean = false;
+
   constructor() {
     // Create local versions of event handlers for de-registration
     // https://stackoverflow.com/questions/33859113/javascript-removeeventlistener-not-working-inside-a-class
@@ -35,6 +40,7 @@ export class PostTooltip {
   connectedCallback() {
     if (!this.host.id) {
       throw new Error(
+        /*prettier-ignore*/
         'No id set: <post-tooltip> must have an id, linking it to it\'s target element using the data-tooltip-target attribute.',
       );
     }
@@ -126,7 +132,7 @@ export class PostTooltip {
         <post-popovercontainer
           role="tooltip"
           tabindex="-1"
-          arrow
+          arrow={this.arrow}
           placement={this.placement}
           ref={(el: HTMLPostPopovercontainerElement) => (this.popoverRef = el)}
         >

packages/components/src/components/post-tooltip/readme.md

@@ -9,6 +9,7 @@
 
 | Property    | Attribute   | Description                                                                                                                                                                                                                                                                                                               | Type                                                                                                                                                                 | Default |
 | ----------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+| `arrow`     | `arrow`     | Wheter or not to display a little pointer arrow                                                                                                                                                                                                                                                                           | `boolean`                                                                                                                                                            | `false` |
 | `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'` |
 
 

packages/documentation/src/stories/components/tooltip/tooltip.stories.ts

@@ -75,6 +75,7 @@ function render(args: Args) {
       id="${args.id}"
       class="hydrated bg-${args.backgroundColor}"
       placement="${ifDefined(args.placement)}"
+      arrow="${ifDefined(args.arrow)}"
     >
       ${unsafeHTML(innerHTML)}
     </post-tooltip>