feat(components): tooltips #1879
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
gfellerph
requested review from
b1aserlu,
davidritter-dotcom and
a team
as code owners
🦋 Changeset detectedLatest commit: 6a8bbeb The changes in this PR will be included in the next version bump. This PR includes changesets to release 3 packages
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 |
gfellerph
commented
Aug 28, 2023
Comment on lines
79
to
82
| componentDidRender() { | ||
| // Can't figure out how to extend HTMLAttributes<HTMLParagraphElement> to support the popover attribute | ||
| this.tooltipRef.setAttribute('popover', ''); | ||
| } |
There was a problem hiding this comment.
This is a really tricky TS situation where builds fail if a <p popover> is present. Temporary workaround, posted a question here https://discord.com/channels/520266681499779082/1145691780625473628/1145691780625473628 and will update when answered.
|
Preview environment ready: https://preview-1879--swisspost-design-system-next.netlify.app |
Some context for the jsx-no-bind stencil-community/stencil-eslint#11
oliverschuerch
requested changes
Sep 6, 2023
packages/components/src/components/post-tooltip/post-tooltip.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/components/post-tooltip/post-tooltip.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/components/post-tooltip/post-tooltip.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/components/post-tooltip/post-tooltip.tsx
Outdated
Show resolved
Hide resolved
packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
Outdated
Show resolved
Hide resolved
packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
Outdated
Show resolved
Hide resolved
packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
Outdated
Show resolved
Hide resolved
# Conflicts: # packages/components/cypress/e2e/tooltip.cy.ts
|
Thanks @alizedebray for the great review ! |
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. |
alizedebray
approved these changes
Sep 26, 2023
packages/components/src/components/post-tooltip/post-tooltip.tsx
Outdated
Show resolved
Hide resolved
packages/components/src/components/post-tooltip/post-tooltip.tsx
Outdated
Show resolved
Hide resolved
|
Kudos, SonarCloud Quality Gate passed!
|
gfellerph
pushed a commit
that referenced
this pull request
Oct 4, 2023
This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @swisspost/[email protected] ### Minor Changes - Added the `post-tooltip` component. (by [@gfellerph](https://github.com/gfellerph) with [#1879](#1879)) - Created the web component variant for the alert component. (by [@alizedebray](https://github.com/alizedebray) with [#1085](#1085)) ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Minor Changes - Enabled nesting the header in a different scroll container than the `<body>` element. The header stickyness and logo animation logic will automatically attach to the nearest scrolling container instead of the document when nested in a container that has `overflow: auto | scroll` set. (by [@alizedebray](https://github.com/alizedebray) with [#1855](#1855)) - Added ability to toggle programmatically an overlay associated with a button using the `toggleOverlayById` method. (by [@imagoiq](https://github.com/imagoiq) with [#1838](#1838)) ### Patch Changes - Fixed an issue with custom configuration that was not applied when the prop "language" was not set on the internet header. (by [@alizedebray](https://github.com/alizedebray) with [#1855](#1855)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Removed bound between logo and language to allow any language to display the logo. (by [@imagoiq](https://github.com/imagoiq) with [#2009](#2009)) - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Removed bound between logo and language to allow any language to display the logo. (by [@imagoiq](https://github.com/imagoiq) with [#2009](#2009)) - Reduced the gap between the alert body and action buttons. (by [@alizedebray](https://github.com/alizedebray) with [#1085](#1085)) - Removed duplicated close button on toast when using ngx-toastr programatically. (by [@imagoiq](https://github.com/imagoiq) with [#2011](#2011)) - Updated and added the gaps between the title and the link-list in the `.topic-teaser-content` class to comply with the figma design. (by [@b1aserlu](https://github.com/b1aserlu) with [#1927](#1927)) - Added missing pointer-events to allow a dismissible toast to be closed interactively. (by [@imagoiq](https://github.com/imagoiq) with [#2008](#2008)) - Updated icons to display as mask images, this way their color can be set by adjusting the CSS `background-color` property. (by [@alizedebray](https://github.com/alizedebray) with [#1945](#1945)) ## @swisspost/[email protected] ### Minor Changes - Added the `post-tooltip` component. (by [@gfellerph](https://github.com/gfellerph) with [#1879](#1879)) - Integrated the google tag manager and the basic events (page_context, page_change) to the documentation. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#1951](#1951)) - Created the web component variant for the alert component. (by [@alizedebray](https://github.com/alizedebray) with [#1085](#1085)) ### Patch Changes - Used the post-icon component instead of `.pi` classes to display icons in stories. (by [@alizedebray](https://github.com/alizedebray) with [#1945](#1945)) - Added deprecation alerts for `.form-control-rg`, `.form-control-md`, `.form-select-rg` and `.form-select-md` form-control variants. (by [@b1aserlu](https://github.com/b1aserlu) with [#1882](#1882)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated dependencies: - @swisspost/[email protected] ## @swisspost/[email protected] ### Patch Changes - Updated the installation intructions for the Intranet Header. (by [@alizedebray](https://github.com/alizedebray) with [#1942](#1942)) - Added deprecation alerts for `.form-control-rg`, `.form-control-md`, `.form-select-rg` and `.form-select-md` form-control variants. (by [@b1aserlu](https://github.com/b1aserlu) with [#1882](#1882)) - Fixed ngBootstrap documentation links. (by [@imagoiq](https://github.com/imagoiq) with [#1987](#1987)) - Updated dependencies: - @swisspost/[email protected] - @swisspost/[email protected]
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Adds a
post-tooltipcomponent.[popover]?: using the popover attribute (with polyfill) has several advantages. In supporting browsers, the tooltip will be lifted to the top-layer, ignoringoverflow: hiddenand thez-indexorder. 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.[data-tooltip-trigger]? This is a custom attribute in place ofpopovertargetaction, 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 withpopovertargetaction="interest", but is not implemented at the moment. To be able to patch this functionality without interference from clicks, there is nopopovertargetactionon the trigger element.@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.