Dialtone Vue is now fully tree-shakeable (BREAKING CHANGE)

Copy post link

Hello there! We're excited to share that we've enhanced the tree-shaking capabilities of Dialtone components. This allows you to import just the components you require, rather than the entire library. This change will help decrease your bundle size and enhance performance.

You can read more about how to take advantage of this feature in this blog post.

There are some breaking changes to be aware of in Dialtone version 9.77.0. Please update your projects as mentioned below. Dialpad and Dialpad Meetings were already updated, so the following instructions are for other projects using Dialtone.

Breaking changes #

Some components that previously received an icon name as a prop now require an icon component to be passed as a slot. These components are Avatar, Badge and Empty State. Here's an example of how to update your code:

Previously, you would have passed an icon name as a prop like this:

<dt-avatar icon="user" />

Now, you will need to use the icon slot like this:

<dt-avatar>
  <template #icon="{ iconSize }">
    <dt-icon-user :size="iconSize" />
  </template>
</dt-avatar>

Another option is to use the dt-icon component inside the dt-avatar component:

<dt-avatar>
  <template #icon="{ iconSize }">
    <dt-icon name="user" :size="iconSize" />
  </template>
</dt-avatar>

But this will import all the icons instead of just the one you need, so it's not recommended.

Notice in this case there's also a slot prop "iconSize" that you can use to pass the size of the icon to the icon component. Using the slot prop as in the example will set the size of the icon to the size of the avatar.

Similarly, for the Badge component, now instead of passing the icon-left and icon-right props, now the slots leftIcon and rightIcon should be used. Here's an example:

<dt-badge type="default" text="Label" kind="label">
  <template #leftIcon="{ iconSize }">
    <dt-icon-lightning-bolt :size="iconSize" />
  </template>
</dt-badge>

For more examples, check the updated documentation for the Avatar and Badge components.

Also, some recipes were updated following the same pattern:

• Contact info: introduced a new slot avatarIcon to pass the icon instead of the previous prop.
• Message input: added the slot sendIcon to pass the icon instead of the previous prop.
• Feed item pill: you should now use the slot leftIcon instead of the prop iconName.

Thanks for your patience and understanding, and as always, we're here to help! Reach out to us in the #dialtone channel for any assistance you need.

Dialtone Team 💜