fix(contact-info, feed-item-row, item-layout): alignment issues

[juliodialpad]

Fix (Contact row, Feed item row, Item layout): Alignment issues

🛠️ Type Of Change

• Fix
• Feature
• Refactoring
• Documentation

📖 Description

• Fixed alignment issues with dt-item-layout based components
• Fixed class not being applied to content-text-wrapper-class, is this the right styling now or was it correct before the class being applied?
• Renamed feed-item-row* references to dt-feed-item-row* to correct naming convention.

💡 Context

Alignment issues were reported: https://dialpad.atlassian.net/browse/DP-80497 and found others while fixing them.

In this PR: #1170 absolute positioning was beign used which is not correct, also we shouldn't use utility classes on dialtone-vue components anymore, so fixed it also.

📝 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

🔮 Next Steps

• Move .dt-item-layout styles to dialtone

[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-1186/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

[iropolo]

Thanks for the update, lets see if visual_test actions works. Not sure if it will be triggered.

[github-actions]

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

[github-actions]

🎉 This PR is included in version 2.97.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀