Hi everyone, hope you're having a great week. It's time for an update. First off we'll talk about the deprecation of the old icons in Dialtone, and then our exciting new tooltip directive!
Deprecated icons
We've had a new icon set in Dialtone for quite a while now which you can see here: Icon List. Over the last quarter we've performed the migration on Dialpad to convert all of our icons to the new set. Two weeks from now on November 13th we will be removing the old icons from Dialtone. This means if you have an application outside of ubervoice that is using the old icons after Nov 13th it will error upon update to the latest Dialtone version.
How do I know if I'm using the old icons?
The old icons will have a path like this: @dialpad/dialtone/lib/dist/vue/icons/IconName.vue or @dialpad/dialtone-legacy/lib/dist/vue/icons/IconName.vue
The new icons should be used via the DtIcon component like so:
import { DtIcon } from '@dialpad/dialtone-vue';
<template>
<dt-icon name="external-link" size="300" />
</template>
Or by direct import of the svg. It is recommended to use the DtIcon component over this. Only use this method if you cannot use the vue component:
import IconArrowUp from '@dialpad/dialtone-icons/dist/svg/arrow-up.svg';
How do I migrate?
Simply replace the existing icon with a corresponding icon from Icon List passing the name into the DtIcon component. Some of the equivalent icons may be named differently than in the old system. If you are unable to find a reasonable replacement icon please let us know in #dialtone on slack. We can also assist with any complications that may arise from the migration.
New tooltip directive
In addition to our DtTooltip vue component, we now have a tooltip directive: v-dt-tooltip see: storybook example. This is very similar to the v-tooltip directive we have in ubervoice, and is going to make it much easier to replace going forward.
How do I use it?
You may import it from @dialpad/dialtone-vue in your entry point, and then register it via Vue.use() to make it globally available everywhere:
// This has already been done in Dialpad.
import { DtTooltipDirective } from '@dialpad/dialtone-vue';
Vue.use(DtTooltipDirective);
You can then simply add the v-dt-tooltip directive to any element you want to have a tooltip:
<button v-dt-tooltip="'This is a tooltip'">Hover me</button>
or with a specific placement direction:
<button v-dt-tooltip:bottom-start="'This is a tooltip'">Hover me</button>
When should I use it?
When you have to wrap a lot of things in a tooltip component it causes a lot of nesting and makes things harder to read. The tooltip directive is a great way to avoid this. That said the tooltip directive is only for simple tooltips. If you need to do anything more complicated than just showing basic text in a tooltip on hover, you should use the DtTooltip component. This should also make it easy to replace any existing v-tooltip directives in ubervoice with the new directive.
Thanks for your cooperation and assistance in improving Dialtone!