fix(tooltip): DLT-1757 round button alignment #314

braddialpad · 2024-05-15T21:00:47Z

fix(tooltip): round button alignment

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

Fix

📖 Jira Ticket

📖 Description

Changed tooltip arrows from custom CSS to the built in Tippy arrow SVG, which it automatically aligns correctly
No longer rendering tooltips with a custom tippy render function. (Why were we doing this in the first place?)
Still using the old style custom render function for popover, because that one will be a ton of work to fix.
When rendering this way, the default offset had to change. I will have to check any custom offsets set in product because they may be incorrect after this change.
Remove aria attrs because they are handled by tippy
Remove lazy show because that's handled by tippy

💡 Context

Noticed this issue in my prior PR #311

The tooltip arrow was not rendering correctly on circle buttons because we were using custom css from who knows how long ago, and it was rendering the arrow in a fixed position. Tippy renders it's arrow dynamically to be in the center so I changed it to that instead. In order to do this I had to get rid of our custom override of the tippy render function, which seemed to have no real purpose, and it disabled a ton of default tippy functionality and options that we could have been taking advantage of.

There are a ton of other things we can improve in this component and the popover one now, but I'm trying to keep the scope of this somewhat reasonable.

BEFORE

AFTER

📝 Checklist

For all PRs:

I have ensured no private Dialpad links or info are in the code or pull request description (Dialtone is a public repo!).
I have reviewed my changes.
I have added all relevant documentation.
I have considered the performance impact of my change.

For all Vue changes:

I have made my changes in Vue 2 and Vue 3. Note: you may sync your changes from Vue 2 to Vue 3 (or vice versa) using the ./scripts/dialtone-vue-sync.sh script. Read docs here: Dialtone Vue Sync Script

For all CSS changes:

I have used design tokens whenever possible.
I have considered how this change will behave on different screen sizes.
I have visually validated my change in light and dark mode.

🔮 Next Steps

check usage of offset in product.

📷 Screenshots / GIFs

See Context

🔗 Sources

https://atomiks.github.io/tippyjs/v6/all-props

braddialpad · 2024-05-15T21:03:07Z

@francisrupert the shape of the arrow changed slightly since it's now just using the built in tippy arrow. Should we make a custom SVG to make it look like the previously used arrow? For reference this is the svg for the default tippy arrow.

<svg width="16" height="6" xmlns="http://www.w3.org/2000/svg"><path d="M0 6s1.796-.013 4.67-3.615C5.851.9 6.93.006 8 0c1.07-.006 2.148.887 3.343 2.385C14.233 6.005 16 6 16 6H0z"></svg>

github-actions · 2024-05-15T21:05:15Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

github-actions · 2024-05-15T21:15:11Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

github-actions · 2024-05-15T21:20:58Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

iropolo · 2024-05-16T13:47:20Z

packages/dialtone-vue2/components/tooltip/tooltip.vue

+@import 'tippy.js/dist/svg-arrow.css';
+
 .tippy-box[data-popper-reference-hidden] {
  .d-tooltip {
    visibility: hidden;
    pointer-events: none;
  }
 }
+
+.tippy-box > .tippy-svg-arrow {
+  fill: var(--dt-color-surface-contrast);
+}
+
+.tippy-box[data-animation='fade'][data-state='hidden'] {
+  opacity: 0;
+}


Could we move this to dialpad css?, since this is not an scoped style, we will be importing @import 'tippy.js/dist/svg-arrow.css'; globally when this component is being initialized.

The problem is tippy.js is not a dependency of dialtone-css, so it won't be able to import it. Scoping it also won't work because the tooltip renders outside of the component at the document body. I think it's probably okay just to leave global 🤷

packages/dialtone-vue2/components/tooltip/tooltip.test.js

packages/dialtone-vue2/components/tooltip/tooltip.vue

iropolo · 2024-05-16T15:12:59Z

Seems like there is some issues in the test.

it('should set default classes', () => {
  expect(tooltip.classes('d-tooltip__arrow-tippy--top')).toBe(true);
});

This one seems like it is not necessary anymore since we are not handling the classes anymore.

Then there is some issues related to show prop or isShown watcher.

github-actions · 2024-05-16T16:25:19Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

github-actions · 2024-05-16T16:36:28Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

github-actions · 2024-05-16T17:24:42Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

iropolo

Cool and useful improvement, thanks.

github-actions · 2024-05-16T18:39:46Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

github-actions · 2024-05-16T18:57:43Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

github-actions · 2024-05-16T19:24:48Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

github-actions · 2024-05-16T22:24:39Z

✔️ Deploy previews ready!
😎 Dialtone preview: https://dialtone.dialpad.com/deploy-previews/pr-314/
😎 Dialtone-vue 2 preview: https://dialtone.dialpad.com/vue/deploy-previews/pr-314/
😎 Dialtone-vue 3 the preview: https://dialtone.dialpad.com/vue3/deploy-previews/pr-314/

braddialpad · 2024-05-16T22:26:06Z

Fixed svg shape, merging.

# [9.36.0](dialtone/v9.35.0...dialtone/v9.36.0) (2024-05-16) ### Bug Fixes * **Tooltip:** DLT-1757 round button alignment ([#314](#314)) ([eabd110](eabd110)) ### Features * DLT-1756 add unread mention count ([#312](#312)) ([ff21d01](ff21d01))

github-actions · 2024-05-16T22:41:15Z

🎉 This PR is included in version 9.36.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

## [8.31.2](dialtone-css/v8.31.1...dialtone-css/v8.31.2) (2024-05-16) ### Bug Fixes * **Tooltip:** DLT-1757 round button alignment ([#314](#314)) ([eabd110](eabd110))

github-actions · 2024-05-16T22:41:31Z

🎉 This PR is included in version 8.31.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [2.132.0](dialtone-vue2/v2.131.0...dialtone-vue2/v2.132.0) (2024-05-16) ### Bug Fixes * **Tooltip:** DLT-1757 round button alignment ([#314](#314)) ([eabd110](eabd110)) ### Features * DLT-1756 add unread mention count ([#312](#312)) ([ff21d01](ff21d01))

github-actions · 2024-05-16T22:42:02Z

🎉 This PR is included in version 2.132.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

# [3.125.0](dialtone-vue3/v3.124.0...dialtone-vue3/v3.125.0) (2024-05-16) ### Bug Fixes * **Tooltip:** DLT-1757 round button alignment ([#314](#314)) ([eabd110](eabd110)) ### Features * DLT-1756 add unread mention count ([#312](#312)) ([ff21d01](ff21d01))

github-actions · 2024-05-16T22:42:16Z

🎉 This PR is included in version 3.125.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

braddialpad added 4 commits May 14, 2024 10:23

fix(datepicker): change tooltip fallback positions

1928081

vue3

c856142

fix(tooltip): round button alignment

23ca257

vue 2

0821236

braddialpad added the visual-test-ready Add this tag when the PR is ready for visual test, to trigger GHA visual tests label May 15, 2024

braddialpad self-assigned this May 15, 2024

braddialpad requested review from juliodialpad, iropolo, francisrupert and ninamarina as code owners May 15, 2024 21:00

Merge branch 'staging' into fix/tooltip-align

f048fea

braddialpad changed the title ~~fix(tooltip): round button alignment~~ fix(tooltip): DLT-1757 round button alignment May 15, 2024

braddialpad added 3 commits May 15, 2024 14:07

fix vue2

ae9fd7d

remove unneeded tests

594242d

vue 3 tests

8fd2a42

braddialpad added 2 commits May 15, 2024 14:15

fix directive tests

ddc1d65

vue 3 directive tests

52eec8f

iropolo reviewed May 16, 2024

View reviewed changes

packages/dialtone-vue2/components/tooltip/tooltip.test.js Outdated Show resolved Hide resolved

iropolo reviewed May 16, 2024

View reviewed changes

packages/dialtone-vue2/components/tooltip/tooltip.vue Show resolved Hide resolved

iropolo reviewed May 16, 2024

View reviewed changes

packages/dialtone-vue2/components/tooltip/tooltip.vue Show resolved Hide resolved

braddialpad added 2 commits May 16, 2024 09:10

fix tests

a2149d7

vue2

b938241

fix error vue 2

f14119a

iropolo approved these changes May 16, 2024

View reviewed changes

braddialpad added 3 commits May 16, 2024 11:29

add placement tests back in

c4b374c

vue2

08b6d07

change to destroy for vue 2

c1580a4

braddialpad added 2 commits May 16, 2024 11:52

fix hiding

cdb548a

vue 2

55df9fb

braddialpad added 4 commits May 16, 2024 12:16

don't show when content empty

0f5efaf

vue2

f67fd2e

remove empty css

13f049b

vue2

70bcb5c

braddialpad added 2 commits May 16, 2024 15:19

add custom svg

84ec098

vue 2

e349b96

braddialpad merged commit eabd110 into staging May 16, 2024
11 checks passed

braddialpad deleted the fix/tooltip-align branch May 16, 2024 22:26

github-actions bot added the released label May 16, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(tooltip): DLT-1757 round button alignment #314

fix(tooltip): DLT-1757 round button alignment #314

braddialpad commented May 15, 2024 •

edited

Loading

braddialpad commented May 15, 2024

github-actions bot commented May 15, 2024

github-actions bot commented May 15, 2024

github-actions bot commented May 15, 2024

iropolo May 16, 2024

braddialpad May 16, 2024

iropolo commented May 16, 2024 •

edited

Loading

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

iropolo left a comment

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

braddialpad commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

fix(tooltip): DLT-1757 round button alignment #314

fix(tooltip): DLT-1757 round button alignment #314

Conversation

braddialpad commented May 15, 2024 • edited Loading

fix(tooltip): round button alignment

Obligatory GIF (super important!)

🛠️ Type Of Change

📖 Jira Ticket

📖 Description

💡 Context

📝 Checklist

🔮 Next Steps

📷 Screenshots / GIFs

🔗 Sources

braddialpad commented May 15, 2024

github-actions bot commented May 15, 2024

github-actions bot commented May 15, 2024

github-actions bot commented May 15, 2024

iropolo May 16, 2024

Choose a reason for hiding this comment

braddialpad May 16, 2024

Choose a reason for hiding this comment

iropolo commented May 16, 2024 • edited Loading

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

iropolo left a comment

Choose a reason for hiding this comment

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

braddialpad commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

github-actions bot commented May 16, 2024

braddialpad commented May 15, 2024 •

edited

Loading

iropolo commented May 16, 2024 •

edited

Loading