adjustment after merge

swisspost · Feb 28, 2025 · 17fa710 · 17fa710
1 parent 2ff6723
commit 17fa710
Show file tree

Hide file tree

Showing 7 changed files with 164 additions and 289 deletions.
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -9,10 +9,12 @@ import { HeadingLevel } from "./types/index";
 import { BannerType } from "./components/post-banner/banner-types";
 import { DEVICE_SIZE } from "./components/post-header/post-header";
 import { SwitchVariant } from "./components/post-language-switch/switch-variants";
+import { Placement } from "@floating-ui/dom";
 export { HeadingLevel } from "./types/index";
 export { BannerType } from "./components/post-banner/banner-types";
 export { DEVICE_SIZE } from "./components/post-header/post-header";
 export { SwitchVariant } from "./components/post-language-switch/switch-variants";
+export { Placement } from "@floating-ui/dom";
 export namespace Components {
     interface PostAccordion {
         /**
@@ -368,38 +370,42 @@ export namespace Components {
         "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
     }
     interface PostPopovercontainer {
+        /**
+          * Animation style
+         */
+        "animation"?: 'pop-in';
         /**
           * Whether or not to display a little pointer arrow
          */
         "arrow"?: boolean;
         /**
-          * Gap between the edge of the page and the popover
+          * Gap between the edge of the page and the popover-container
          */
         "edgeGap"?: number;
         /**
-          * Programmatically hide this tooltip
+          * Programmatically hide this popover-container
          */
         "hide": () => Promise<void>;
         /**
           * Whether or not the popover should close when user clicks outside of it
          */
         "manualClose": 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.
+          * Defines the placement of the popover-container according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popover-containers 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;
         /**
           * Enables a safespace through which the cursor can be moved without the popover being disabled
          */
         "safeSpace"?: 'triangle' | 'trapezoid';
         /**
-          * Programmatically display the tooltip
-          * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+          * Programmatically display the popover-container
+          * @param target An element with [data-popover-target="id"] where the popover-container should be shown
          */
         "show": (target: HTMLElement) => Promise<void>;
         /**
-          * Toggle tooltip display
-          * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+          * Toggle popover-container display
+          * @param target An element with [popover-container-target="id"] where the popover-container should be shown
           * @param force Pass true to always show or false to always hide
          */
         "toggle": (target: HTMLElement, force?: boolean) => Promise<boolean>;
@@ -466,30 +472,33 @@ export namespace Components {
     }
     interface PostTooltip {
         /**
-          * Wheter or not to display a little pointer arrow
+          * Choose a tooltip animation
          */
-        "arrow"?: boolean;
+        "animation"?: 'pop-in' | null;
         /**
-          * If `true`, the tooltip is displayed a few milliseconds after it is triggered
+          * Wheter or not to display a little pointer arrow
          */
-        "delayed": boolean;
+        "arrow"?: boolean;
         /**
           * Programmatically hide this tooltip
          */
         "hide": () => Promise<void>;
+        /**
+          * Indicates the open state of the tooltip
+         */
+        "open": 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.
          */
         "placement"?: Placement;
         /**
           * Programmatically display the tooltip
-          * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
-          * @param triggeredByFocus A boolean indicating if the tooltip was triggered by a focus event.
+          * @param target An element where the tooltip should be shown
          */
-        "show": (target: HTMLElement, triggeredByFocus?: boolean) => Promise<void>;
+        "show": (target: HTMLElement) => Promise<void>;
         /**
           * Toggle tooltip display
-          * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+          * @param target An element where the tooltip should be shown
           * @param force Pass true to always show or false to always hide
          */
         "toggle": (target: HTMLElement, force?: boolean) => Promise<void>;
@@ -1218,12 +1227,16 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     interface PostPopovercontainer {
+        /**
+          * Animation style
+         */
+        "animation"?: 'pop-in';
         /**
           * Whether or not to display a little pointer arrow
          */
         "arrow"?: boolean;
         /**
-          * Gap between the edge of the page and the popover
+          * Gap between the edge of the page and the popover-container
          */
         "edgeGap"?: number;
         /**
@@ -1235,7 +1248,7 @@ declare namespace LocalJSX {
          */
         "onPostToggle"?: (event: PostPopovercontainerCustomEvent<boolean>) => void;
         /**
-          * 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.
+          * Defines the placement of the popover-container according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement. Popover-containers 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;
         /**
@@ -1312,14 +1325,18 @@ declare namespace LocalJSX {
         "toggled"?: boolean;
     }
     interface PostTooltip {
+        /**
+          * Choose a tooltip animation
+         */
+        "animation"?: 'pop-in' | null;
         /**
           * Wheter or not to display a little pointer arrow
          */
         "arrow"?: boolean;
         /**
-          * If `true`, the tooltip is displayed a few milliseconds after it is triggered
+          * Indicates the open state of the tooltip
          */
-        "delayed"?: boolean;
+        "open"?: 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.
          */

diff --git a/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss b/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss
@@ -4,6 +4,7 @@
 @use '@swisspost/design-system-styles/variables/commons';
 @use '@swisspost/design-system-styles/variables/spacing';
 @use '@swisspost/design-system-styles/mixins/color' as color-mx;
+@use '@swisspost/design-system-styles/mixins/animation';
 @use '@swisspost/design-system-styles/variables/elevation';
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 @use '@swisspost/design-system-styles/mixins/utilities';
@@ -20,6 +21,15 @@
 }
 
 :where(post-popovercontainer) {
+  &[data-animation='pop-in']:where(:popover-open, .popover-open) {
+    @include animation.top-layer-pop-in(0.25s, ':popover-open');
+
+  @media (prefers-reduced-motion) {
+    & {
+      --post-transition-duration: 0s;
+    }
+  }
+}
   background-color: transparent;
   border: transparent;
   position: fixed;
@@ -30,6 +40,7 @@
   overflow: visible;
 
   > div {
+    background-color: red;
     box-shadow: elevation.$elevation-300;
     width: max-content;
     color: var(--post-current-palette-fg);

diff --git a/packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx b/packages/components/src/components/post-popovercontainer/post-popovercontainer.tsx
@@ -73,17 +73,22 @@ export class PostPopovercontainer {
   @Prop() manualClose: 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
+   * Defines the placement of the popover-container according to the floating-ui options available at https://floating-ui.com/docs/computePosition#placement.
+   * Popover-containers 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.
    */
   @Prop() readonly placement?: Placement = 'top';
 
   /**
-   * Gap between the edge of the page and the popover
+   * Gap between the edge of the page and the popover-container
    */
   @Prop() readonly edgeGap?: number = 8;
 
+   /**
+   * Animation style
+   */
+   @Prop() readonly animation?: 'pop-in';
+
   /**
    * Whether or not to display a little pointer arrow
    */
@@ -115,8 +120,8 @@ export class PostPopovercontainer {
   }
 
   /**
-   * Programmatically display the tooltip
-   * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+   * Programmatically display the popover-container
+   * @param target An element with [data-popover-target="id"] where the popover-container should be shown
    */
   @Method()
   async show(target: HTMLElement) {
@@ -128,7 +133,7 @@ export class PostPopovercontainer {
   }
 
   /**
-   * Programmatically hide this tooltip
+   * Programmatically hide this popover-container
    */
   @Method()
   async hide() {
@@ -139,8 +144,8 @@ export class PostPopovercontainer {
   }
 
   /**
-   * Toggle tooltip display
-   * @param target An element with [data-tooltip-target="id"] where the tooltip should be shown
+   * Toggle popover-container display
+   * @param target An element with [popover-container-target="id"] where the popover-container should be shown
    * @param force Pass true to always show or false to always hide
    */
   @Method()
@@ -156,8 +161,8 @@ export class PostPopovercontainer {
   }
 
   /**
-   * Start or stop auto updates based on tooltip events.
-   * Tooltips can be closed or opened with other methods than class members,
+   * Start or stop auto updates based on popover-container events.
+   * Popover-containers can be closed or opened with other methods than class members,
    * therefore listening to the toggle event is safer for cleaning up.
    * @param e ToggleEvent
    */
@@ -179,7 +184,7 @@ export class PostPopovercontainer {
 
   /**
    * Start listening for DOM updates, scroll events etc. that have
-   * an influence on tooltip positioning
+   * an influence on popover-container positioning
    */
   private startAutoupdates() {
     this.clearAutoUpdate = autoUpdate(
@@ -193,7 +198,7 @@ export class PostPopovercontainer {
     const { x, y, middlewareData, placement } = await this.computeMainPosition();
     const currentPlacement = placement.split('-')[0];
 
-    // Position popover
+    // Position popover-container
     this.host.style.left = `${x}px`;
     this.host.style.top = `${y}px`;
 
@@ -315,7 +320,7 @@ export class PostPopovercontainer {
 
   render() {
     return (
-      <Host data-version={version} popover={this.manualClose ? 'manual' : 'auto'}>
+      <Host data-version={version} data-animation={this.animation} popover={this.manualClose ? 'manual' : 'auto'}>
         <div>
           {this.arrow && (
             <span