fix(avatar): overlay icon alignment

[juliodialpad]

Fix (Avatar): Overlay icon alignment

🛠️ Type Of Change

• Fix
• Feature
• Refactoring
• Documentation

📖 Description

Added justify-content: center to be sure the icon is always at the center of the overlay regarding its size.

💡 Context

Issues on product with icon alignment where reported and tried to fix it here but it was better to add the fix on the actual avatar instead of just the recipe.

📝 Checklist

• I have reviewed my changes
• I have added tests
• I have added all relevant documentation
• I have validated components with a screen reader
• I have validated components keyboard navigation
• I have considered the performance impact of my change
• I have checked that my change did not significantly increase bundle size
• I am exporting any new components or constants in the index.js in the component directory
• I am exporting any new components or constants in the index.js in the root

📷 Screenshots / GIFs

[github-actions]

Thanks for contributing to Dialtone Vue! Please read below for some important info regarding Vue 3 compatibility.

Currently we need to maintain two branches in Dialtone Vue, one for Vue 2, one for Vue 3.

This means you must create two PRs for every feature change you make. One into staging and one into staging-vue3.

Many times the change you have made in Vue 2 will be identical to the change you need to make in Vue 3. To make this easier we have made a script that can copy your changes from this branch to a new branch off of staging-vue3 suffixed with -vue3.

run ./copy_pr_vue3.sh from the root dialtone-vue directory.

Once the new branch is created, you will need to look at your code to make sure it still makes sense and test that your changes all work in vue 3. If everything is good you can push it and create a PR into staging-vue3.

It is a required check for every PR to have a corresponding branch called yourbranch-vue3 so that we do not forget to do it. In the special case that you need to make a change to vue2 without making it in vue3, you can set the label vue2-only on this PR.

I got "commit SHA is a merge but no -m option was given."

This happens if there are merge commits in your branch. It's no problem, you can simply skip them with git cherry-pick --skip. We don't want to copy merge commits to the Vue 3 branch.

What if I make more changes to my vue 2 branch after running ./copy_pr_vue3.sh?

You can copy these to the existing -vue3 branch by running the script with a git SHA param like so:

./copy_pr_vue3.sh 2a78db7

where 2a78db7 is the last commit from your branch that was copied to the other branch (all commits after this will be copied)

If it's just one or two commits, you may prefer to just manually use git cherry-pick which will work fine as well.

What if I get a conflict?

It's possible to get a conflict when running copy_pr_vue3.sh as there are differences in Vue 2 and Vue 3 code. If this happens you can manually fix the conflict, commit it and do git cherry-pick --continue.

[github-actions]

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1115/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

[iropolo]

cc @fabiangarga

[juliodialpad]

Accessibility tests are broken due to the recent color update on links I think @francisrupert @fede-dp

[github-actions]

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1115/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

[github-actions]

🎉 This PR is included in version 2.93.2 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀