Hello and happy Friday to you all as we approach the holiday season! 🎄 🕎
We'll be performing a number of redesigns to existing Dialtone components over the coming months. Some of these updates may involve breaking changes to existing Vue components and Dialtone classes. Today's update involves badge which we have just reworked for better styling, functionality and convenience.
Badge
The recent updates to badge cause breaking changes in Dialtone v7.9.0 and Dialtone Vue v2.43.0 and Dialtone Vue 3 v3.29.0
The migration has been performed for all existing DtBadge components and d-badge classes in Dialpad and Dialpad Meetings. However if you have an existing feature branch or are in a project outside of Dialpad / Dialpad Meetings that involves badge, the changes will not have been made there so you'll have to make the updates yourself. If you need to do this, please follow the badge section of the migration guide.
Variants
Label Badge Examples
Count Badge Examples
Styling & documentation changes
- Visual styling updates.
- You no longer set a badge to a specific color, you set it to a "type" with a specific semantic intent. See badge documenatation for all the possible types.
- Two different kinds of badge "label" which is meant for alphanumeric text and "count" which makes the badge circular and is intended for numerical text only.
- Improved documentation for badge usage and best practices.
- Support for icons on either side of the badge.
Vue component changes
- New iconLeft and iconRight prop on the vue component. pass in any icon name from the icon catalog to set the icon.
- New prop "kind", set to "label" or "count".
- New prop "type", replaces "color".
- Special case: setting the type to 'ai' will automatically display the AI icon on the left. This can be overridden if desired by setting the iconLeft prop.
Avatar
We have also made some updates to the avatar component. You'll notice that when you use the component in initials or icon mode it will now display a randomly generated gradient for the background using multiple colors:
Very fancy!! 🧐 Thanks to Francis and Jose for this one.
The new presence component has also been released and is integrated into the Avatar. You'll notice there is a new prop on the Vue component called presence in which you can set the presence state for the avatar.
Combobox
You may have noticed that while our input component had a label on it, none of our combobox components which use input had labels, or had any way of setting the label.
All combobox components now have a required label prop. You do not have to set a label that shows up visually, but if you don't then you still have to label it for screenreaders. You can do so by setting the label prop and then setting the labelVisible prop to false in which case the aria-label will still be set even if it is not shown visually.
That's all for today have a great weekend all!