feat(components): tooltips

[gfellerph]

Adds a post-tooltip component.

• Why [popover]?: using the popover attribute (with polyfill) has several advantages. In supporting browsers, the tooltip will be lifted to the top-layer, ignoring overflow: hidden and the z-index order. This ensures that tooltips are always displayed on top of everything and never cut off. Until all browsers support the popover API (ETA is end of 2023), a polyfill without these qualities (but some decent standards) is needed.
• Why [data-tooltip-trigger]? This is a custom attribute in place of popovertargetaction, an attribute that can be used to trigger a popover, but reacts to clicks only. In this situation we want to show the popover on hover, focus and long-press. This behavior is in consideration with popovertargetaction="interest", but is not implemented at the moment. To be able to patch this functionality without interference from clicks, there is no popovertargetaction on the trigger element.
• floating-ui: this component uses floating-ui, the successor to @popperjs/core, for positioning. This low-level library can be used to dynamically position the tooltip and the corresponding arrow and can be customised in every imaginable way while leaving a pretty small footprint.
• No snapshot tests: not sure how to test something that only shows up on user interaction
• No animation: had some trouble implementing an animation that was compatible with the polyfill as well as the default API. Suggestion: wait till Design provides a concept and the popover API is standardised

[changeset-bot[bot]]

🦋 Changeset detected

Latest commit: 6a8bbeb2047cfcce6d3059e3d3db0c44630cb2fc

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

| Name | Type | | ----------------------------------------- | ----- | | @swisspost/design-system-documentation | Minor | | @swisspost/design-system-components | Minor | | @swisspost/design-system-components-react | Patch |

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[swisspost-bot]

Preview environment ready: https://preview-1879--swisspost-design-system-next.netlify.app Preview environment ready: https://preview-1879--swisspost-design-system-next-v7.netlify.app

[alizedebray]

• No snapshot tests: not sure how to test something that only shows up on user interaction

Probably something like:

cy.get('button[data-tooltip-target="tooltip"]', { timeout: 30000 }).should('be.visible'); // wait for page load
cy.get('button[data-tooltip-target="tooltip"]').focus();
cy.get('#tooltip').should('be.visible');
cy.percySnapshot('Alerts', { widths: [1440] });

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[imagoiq]

Thanks @alizedebray for the great review !

[imagoiq]

• No snapshot tests: not sure how to test something that only shows up on user interaction

Probably something like:

cy.get('button[data-tooltip-target="tooltip"]', { timeout: 30000 }).should('be.visible'); // wait for page load
cy.get('button[data-tooltip-target="tooltip"]').focus();
cy.get('#tooltip').should('be.visible');
cy.percySnapshot('Alerts', { widths: [1440] });

You are right about the interaction, but I'll still avoid doing the snapshot tests as we are limited by the number of snapshots. In this case, we would need to make one snapshot per variant, as we cannot focus multiple elements at the same time.

[sonarcloud[bot]]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication