fix: DLT-2398 synchronize class attrs on vue 3 components

[Brad Paugh (braddialpad)]

fix: synchronize class attrs on vue 3 components

Obligatory GIF (super important!)

🛠️ Type Of Change

These types will increment the version number on release:

• Fix

📖 Jira Ticket

https://dialpad.atlassian.net/browse/DLT-2398

📖 Description

Migrated our class attributes to match the way it works in vue 2 if config option is enabled.

Vue 3 only.

💡 Context

Due to the breaking change INSTANCE_ATTRS_CLASS_STYLE in vue 3, the class and style attributes are not applied to the same elements they were in vue 2.

Any component that uses inheritAttrs: false will now include class and style attributes in $attrs unlike vue 2 which always applied them to the root element. This means in order to have our components behave the same in vue 2 and vue 3 we need to make a small modification to directly apply the class to the root element in the case of inheritAttrs: true.

This could potentially be a breaking change for applications already using the vue 3 library and applying class attributes to inheritAttrs components so I included this behaviour as a configuration option that you can set on init more for migration purposes.

Already tested on the vue 3 migration branch and it does seem to work.

📝 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.

🔮 Next Steps

Apply config option in ubervoice vue 3 migration.

🔗 Sources

https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style.html

[Julio Ortega (juliodialpad)]

As you're removing the class and style attributes doesn't that mean that you should include on all those components a :style="$attrs.style" attribute? even if it's empty, otherwise, if any of those components have a style, it'd be ignored, right?

[Brad Paugh (braddialpad)]

As you're removing the class and style attributes doesn't that mean that you should include on all those components a :style="$attrs.style" attribute? even if it's empty, otherwise, if any of those components have a style, it'd be ignored, right?

Yeah true, if there was one. I didn't do this because we don't generally use inline styles and in fact consider it a bad practice to do so.

[Julio Ortega (juliodialpad)]

As you're removing the class and style attributes doesn't that mean that you should include on all those components a :style="$attrs.style" attribute? even if it's empty, otherwise, if any of those components have a style, it'd be ignored, right?

Yeah true, if there was one. I didn't do this because we don't generally use inline styles and in fact consider it a bad practice to do so.

I understand, but as we don't want to do breaking changes, we should include them as they might cause issues if someone used it on product.

Or at least we should put a comment somewhere saying that we remove style attribute on purpose on those components.

[Brad Paugh (braddialpad)]

As you're removing the class and style attributes doesn't that mean that you should include on all those components a :style="$attrs.style" attribute? even if it's empty, otherwise, if any of those components have a style, it'd be ignored, right?

Yeah true, if there was one. I didn't do this because we don't generally use inline styles and in fact consider it a bad practice to do so.

I understand, but as we don't want to do breaking changes, we should include them as they might cause issues if someone used it on product.

Or at least we should put a comment somewhere saying that we remove style attribute on purpose on those components.

Yeah doesn't hurt to include them I guess..

[Brad Paugh (braddialpad)]

Added style as requested.

[Julio Ortega (juliodialpad)]

Looking good, thanks!

[Noelle Levy (noellelevydialpad)]

why does this file have inheritAttrs false? If it didn't have that what you are doing would be default behavior (plus some other attrs could be inherited)

[Brad Paugh (braddialpad)]

100% agree, I will do this in a separate PR though since i'll have to do it on vue 2 and vue 3.

[Noelle Levy (noellelevydialpad)]

also would be default behavior without inheritattrs false

[Noelle Levy (noellelevydialpad)]

I think the util function should be used in a computed that splits out the style and class attrs if enabled. As it stands, if you don't opt into emulating the vue2 behavior, the class and style gets added in both places.

[Brad Paugh (braddialpad)]

Made requested fixes, will put the two I mentioned in another PR

[github-actions]

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