feat: components tooltip and popover. absolute positioning (dt 40) #194

nikitadialpad · 2021-11-14T23:46:46Z

components tooltip and popover. absolute positioning using tippy js (dt 40)

🛠️ Type Of Change

Fix
Feature
Refactoring
Documentation

📖 Description

The PR contains implementation of a tooltip using tippy headless, dialtone style and dialtone-vue components.
This implementation covers such drawbacks like rendering tooltip at the end of the body, dynamic positioning/"flipping" feature for tooltip and popover, hide on escape, modal prop was added to popover component interface.

As was investigated and discussed tippy headless is chosen as popover and tooltip engine library, because of that v-click-outside is removed, that part now covers by tippy.

📝 Checklist

I have updated library exports
I have reviewed my changes
I have added tests
I have added all relevant documentation
All tests are passing
All linters are passing
No accessibility issues reported
I have validated components with a screen reader
I have validated components keyboard navigation

🔮 Next Steps

📷 Screenshots / GIFs

* DT 40 Absolute positioning for popovers & tooltips * updates * updates * update tooltip * update tooltip * clean up * refactoring, clean up * resolve comments * resolve comments refactor first iteration stories * update comments

* add documentation for Tippy tooltip * update reactive "show" * resolve comments, update eslint config because of an error * update esplint json

* add documentation for Tippy tooltip * update reactive "show" * update tests * update tests * resolve comments * resolve comments

* DT 40 Absolute positioning for popovers & tooltips * updates * updates * update tooltip * update tooltip * clean up * refactoring, clean up * resolve comments * popover implementation, decomposition tippy, clean up * add animation, clean up * clean up popover * clean tooltip folder * add import * clean up, updates * DT-40 popover component, refactoring after tooltip implementation * resolve comments * clean up * resolve comments * fix eslint * leftover after merge * leftover after merge

Update components DtLazyShow, popover, tooltip;

…-positioning

nikitadialpad · 2021-11-15T12:12:32Z

@dbecherdialpad @braddialpad

there're some updates after merge implementation PRs to the branch:

added dt-lazy-show for tooltip after popover implementation
updated tests for tooltip after
added after-leave event to dt-lazy-show to fix incorrect opening and closing tooltip with custom triggers.
added modal prop for popover ( it's a description for that in the story). According to that change, it's a question
added flip feature for popover
updated documentation for popover
removed v-click-outside dependency, tippy manages that now.

Could you please confirm now that previous popover and tooltip implementation should be completely removed now?

…ansition

nikitadialpad · 2021-11-15T14:37:20Z

components/popover/popover.vue

+    <div
+      v-if="open && modal"
+      class="d-modal"
+      aria-hidden="false"


usage d-modal will not show overlay with aria-hidden="true". is it need to update dialtone with some styles for popover with modal prop?

Discussed on slack, we decided to create a new class specifically for popover modal

components/lazy_show/lazy_show.vue

…-positioning

…-positioning # Conflicts: # components/popover/popover.stories.js # components/popover/popover_default.story.vue

braddialpad

We made a bunch of adjustments to our storybook prop/slot organization recently, which of course was not included in this tooltip since it was not in staging. Most of my comments are related to this.

components/tooltip/tooltip.test.js

components/popover/popover.stories.js

braddialpad · 2021-11-15T19:40:32Z

components/popover/popover.vue

+    <div
+      v-if="open && modal"
+      class="d-modal"
+      aria-hidden="false"


Discussed on slack, we decided to create a new class specifically for popover modal

components/tooltip/tooltip_tippy.stories.js

components/popover/popover.vue

braddialpad

Looks good, just a couple small things

components/lazy_show/lazy_show.vue

components/modal/modal.vue

components/popover/popover.vue

components/tooltip/tooltip.test.js

braddialpad

Thanks!

…-positioning

…-absolute-positioning' into components-Tooltip-Popover-DT-40-absolute-positioning

…-positioning # Conflicts: # package-lock.json

add new constant to popover update default story

# [1.6.0](v1.5.0...v1.6.0) (2021-11-25) ### Bug Fixes * add our alpha sort to list-item. Change slot types to VNode for consistiency ([#202](#202)) ([686b2b9](686b2b9)) ### Features * components tooltip and popover. absolute positioning (dt 40) ([#194](#194)) ([dd9e44d](dd9e44d)), closes [#131](#131) [#177](#177) [#178](#178) [#135](#135)

github-actions · 2021-11-25T17:25:43Z

🎉 This PR is included in version 1.6.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

dbecherdialpad · 2021-11-30T20:38:52Z

components/popover/popover.vue

-    class="d-ps-relative dt-popover"
-  >
+  <component :is="elementType">
+    <dt-lazy-show


@braddialpad @nikitadialpad couple suggestions from testing this with the emoji popover in the feed list (which was one of the drivers for doing this):

The popover overlay should be at the end of the DOM as well, as a sibling of the popover itself. This way it properly overlays the content (see video example, where the feed actions disappear on hover and take the overlay with it)

The overlay should have the option of being transparent. Arguably, this should be the default (every popover has a "transparent" overlay preventing you from interacting with the page behind it). In the case of the feed list, this is so you can't scroll the feed while the popover is open.

emoji.mov

nikitadialpad added 13 commits October 19, 2021 11:01

DT 40 Absolute positioning for tooltips (#131)

67cb861

* DT 40 Absolute positioning for popovers & tooltips * updates * updates * update tooltip * update tooltip * clean up * refactoring, clean up * resolve comments * resolve comments refactor first iteration stories * update comments

DT 40 Tooltip documentation (#177)

aeb1bde

* add documentation for Tippy tooltip * update reactive "show" * resolve comments, update eslint config because of an error * update esplint json

DT 40 Tooltip tests (#178)

f18dea0

* add documentation for Tippy tooltip * update reactive "show" * update tests * update tests * resolve comments * resolve comments

Added test for tooltip tippy;

cae4022

Update components DtLazyShow, popover, tooltip;

Merge branch 'staging' into components-Tooltip-Popover-DT-40-absolute…

dcf7f93

…-positioning

chore: update package-lock.json

f8d7f59

refactor: after merge

b4d0b76

story doc

71b66d8

update story doc

62d1f0c

add flip for popover

4caf503

add implementation "modal"

b1a05cd

remove v-click-outside

8d1b2b0

nikitadialpad self-assigned this Nov 14, 2021

nikitadialpad added 2 commits November 15, 2021 13:54

update documentation

59d4fc9

update stories

5fd2749

nikitadialpad added 2 commits November 15, 2021 16:31

prevent closing popup when a user blur and focus repeatedly during tr…

c197a5e

…ansition

clean up

88f5cd2

nikitadialpad commented Nov 15, 2021

View reviewed changes

components/lazy_show/lazy_show.vue Outdated Show resolved Hide resolved

nikitadialpad marked this pull request as ready for review November 15, 2021 14:52

nikitadialpad requested review from braddialpad and dialpad-drew as code owners November 15, 2021 14:52

Merge branch 'staging' into components-Tooltip-Popover-DT-40-absolute…

0d64e0f

…-positioning

nikitadialpad requested a review from dbecherdialpad November 15, 2021 14:54

nikitadialpad added 3 commits November 15, 2021 17:16

Merge branch 'staging' into components-Tooltip-Popover-DT-40-absolute…

f6c1d0c

…-positioning # Conflicts: # components/popover/popover.stories.js # components/popover/popover_default.story.vue

update storybook folder for tooltip.

5eaf4cf

added comment for after-leave event

6091be0

braddialpad suggested changes Nov 15, 2021

View reviewed changes

nikitadialpad commented Nov 18, 2021

View reviewed changes

components/popover/popover.vue Show resolved Hide resolved

braddialpad reviewed Nov 18, 2021

View reviewed changes

components/lazy_show/lazy_show.vue Show resolved Hide resolved

components/modal/modal.vue Show resolved Hide resolved

components/popover/popover.vue Show resolved Hide resolved

components/tooltip/tooltip.test.js Outdated Show resolved Hide resolved

resolve comments

cca3ebb

braddialpad approved these changes Nov 18, 2021

View reviewed changes

nikitadialpad and others added 19 commits November 18, 2021 19:56

add comment

fe0103d

Merge branch 'staging' into components-Tooltip-Popover-DT-40-absolute…

42f52b9

…-positioning

popover uv alignments

621ed60

Merge remote-tracking branch 'origin/components-Tooltip-Popover-DT-40…

9b696b9

…-absolute-positioning' into components-Tooltip-Popover-DT-40-absolute-positioning

clean up, update data

567e0ae

clean up, remove prev version tooltip.

8dec5df

update docs

ae01eaf

update z-index for tooltip

e4513b4

update border-box for content

4d8e0a8

add width content prop (anchor), update focus logic,

b56f163

clean up, rename contentWidth

0222ffe

set empty string to content width by default

6110cfe

Merge branch 'staging' into components-Tooltip-Popover-DT-40-absolute…

9c3c77a

…-positioning # Conflicts: # package-lock.json

package lock

d5c8ff9

restore tooltip test

df2e058

clean up tooltip test

57d008a

add new constant to popover update default story

add flushPromises to utils

e50552f

add $nextTick before setPopoverContentAnchorWidth

9ef3b92

update tooltip story

24d0f9c

braddialpad merged commit dd9e44d into staging Nov 25, 2021

braddialpad deleted the components-Tooltip-Popover-DT-40-absolute-positioning branch November 25, 2021 17:06

github-actions bot added the released label Nov 25, 2021

dbecherdialpad reviewed Nov 30, 2021

View reviewed changes

deepanudaiyar unassigned nikitadialpad Jan 15, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: components tooltip and popover. absolute positioning (dt 40) #194

feat: components tooltip and popover. absolute positioning (dt 40) #194

nikitadialpad commented Nov 14, 2021 •

edited

Loading

nikitadialpad commented Nov 15, 2021 •

edited

Loading

nikitadialpad Nov 15, 2021 •

edited

Loading

braddialpad Nov 15, 2021

braddialpad left a comment

braddialpad Nov 15, 2021

braddialpad left a comment

braddialpad left a comment

github-actions bot commented Nov 25, 2021

dbecherdialpad Nov 30, 2021 •

edited

Loading

feat: components tooltip and popover. absolute positioning (dt 40) #194

feat: components tooltip and popover. absolute positioning (dt 40) #194

Conversation

nikitadialpad commented Nov 14, 2021 • edited Loading

components tooltip and popover. absolute positioning using tippy js (dt 40)

🛠️ Type Of Change

📖 Description

📝 Checklist

🔮 Next Steps

📷 Screenshots / GIFs

nikitadialpad commented Nov 15, 2021 • edited Loading

nikitadialpad Nov 15, 2021 • edited Loading

Choose a reason for hiding this comment

braddialpad Nov 15, 2021

Choose a reason for hiding this comment

braddialpad left a comment

Choose a reason for hiding this comment

braddialpad Nov 15, 2021

Choose a reason for hiding this comment

braddialpad left a comment

Choose a reason for hiding this comment

braddialpad left a comment

Choose a reason for hiding this comment

github-actions bot commented Nov 25, 2021

dbecherdialpad Nov 30, 2021 • edited Loading

Choose a reason for hiding this comment

nikitadialpad commented Nov 14, 2021 •

edited

Loading

nikitadialpad commented Nov 15, 2021 •

edited

Loading

nikitadialpad Nov 15, 2021 •

edited

Loading

dbecherdialpad Nov 30, 2021 •

edited

Loading