feat(avatar): DLT-1916 remove dt-icon

[ninamarina]

feat(avatar): DLT-1916 remove dt-icon

🛠️ Type Of Change

These types will increment the version number on release:

• Fix
• Feature
• Performance Improvement
• Refactor

📖 Jira Ticket

DLT-1916

📖 Description

Removes the use of dt-icon from the Avatar component. Adds instead a slot for the avatar icon and for the overlay icon.
As a consequence of these changes, these recipes need to be updated:

• Feed item row
• Contact Info
• Callbox
• Contact Row

💡 Context

The want to remove all the uses of dt-icon from Dialtone so that consumers can make use of the tree shakable feature of Dialtone icons.
Instead, all icons should be directly imported in this format: import { DtIconDownload } from '@dialpad/dialtone-icons/vue2';

📝 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 added / updated unit tests.
• 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
• I have validated components with a screen reader.
• I have validated components keyboard navigation.

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.
• I have used gap or flexbox properties for layout instead of margin whenever possible.

🔮 Next Steps

• Do a beta release with just the Avatar component and test that in the chat bot app everything works as expected and that dialtone-icons is effectively tree shaken
• Update doc site for all updated components
• Update vue 2
• Update product

📷 Screenshots / GIFs

Avatar

Contact Info

Callbox

Contact Row

[github-actions]

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

[braddialpad]

Looks good, exactly what I was expecting to see!

We should probably not merge this in since it's a breaking change, you might want to merge this into an alternate branch, and then we'll merge that in once the entire icon migration story has been completed.

Did we release this to a beta and test with alex yet?

[ninamarina]

Looks good, exactly what I was expecting to see!

We should probably not merge this in since it's a breaking change, you might want to merge this into an alternate branch, and then we'll merge that in once the entire icon migration story has been completed.

Did we release this to a beta and test with alex yet?

Not yet, but I will do that today. Should I merge this one to the branch Beta? And then do a Beta release?

[braddialpad]

I wouldn't merge this directly to beta, merge it into a new branch and then you can merge that branch into beta when you want to release