fix: DLT-2398 synchronize class attrs on vue 3 components (#688)

Author: braddialpad

packages/dialtone-vue3/common/config/index.js

@@ -0,0 +1,5 @@
+export let configVue2StyleClassAttrs = false;
+
+export function enableVue2StyleClassAttrs () {
+  configVue2StyleClassAttrs = true;
+}

packages/dialtone-vue3/common/utils/index.js

@@ -3,6 +3,9 @@ import {
   DEFAULT_VALIDATION_MESSAGE_TYPE,
   VALIDATION_MESSAGE_TYPES,
 } from '../constants';
+import {
+  configVue2StyleClassAttrs,
+} from '../config';
 import {
   h,
   Comment,
@@ -219,6 +222,39 @@ export const returnFirstEl = (el) => {
   }
 };
 
+/**
+  Only will apply changes if the config option configVue2StyleClassAttrs is set to true. It is false by default.
+
+  Removes the class and style attributes from the $attrs. This is useful for vue 2 to vue 3 migration
+  purposes so we don't cause breaking changes due to INSTANCE_ATTRS_CLASS_STYLE
+  https://v3-migration.vuejs.org/breaking-changes/attrs-includes-class-style
+
+  Remove the class and style attributes from the v-bind like so so v-bind="removeClassStyleAttrs($attrs)",
+  and then apply them to the root element manually via:
+
+  :class="$attrs.class"
+  :style="$attrs.style"
+*/
+export function removeClassStyleAttrs (attrs) {
+  if (!configVue2StyleClassAttrs) return attrs;
+  const listeners = Object.entries(attrs)
+    .filter(([key]) => !['class', 'style'].includes(key));
+  return Object.fromEntries(listeners);
+}
+
+/**
+  This should be applied to the root element on components using inheritAttrs: false.
+  This will add the class and style attributes back to the root element if configVue2StyleClassAttrs
+  is enabled.
+*/
+export function addClassStyleAttrs (attrs) {
+  if (!configVue2StyleClassAttrs) return {};
+  return {
+    class: attrs.class,
+    style: attrs.style,
+  };
+}
+
 /*
 * Set's a global timer to debounce the execution of a function.
 * @param { object } func - the function that is going to be called after timeout
@@ -473,6 +509,8 @@ export default {
   flushPromises,
   kebabCaseToPascalCase,
   extractVueListeners,
+  removeClassStyleAttrs,
+  addClassStyleAttrs,
   returnFirstEl,
   debounce,
   isOutOfViewPort,

packages/dialtone-vue3/components/avatar/avatar.vue

@@ -3,6 +3,7 @@
     :is="clickable ? 'button' : 'div'"
     :id="id"
     :class="avatarClasses"
+    :style="$attrs.style"
     data-qa="dt-avatar"
     @click="handleClick"
   >
@@ -302,6 +303,7 @@ export default {
     avatarClasses () {
       return [
         'd-avatar',
+        this.$attrs.class,
         AVATAR_SIZE_MODIFIERS[this.validatedSize],
         this.avatarClass,
         {

packages/dialtone-vue3/components/breadcrumbs/breadcrumb_item.vue

@@ -5,13 +5,14 @@
       'd-breadcrumbs__item',
       { [BREADCRUMB_ITEM_SELECTED_MODIFIER]: selected },
     ]"
+    v-bind="addClassStyleAttrs($attrs)"
   >
     <dt-link
       :kind="linkKind"
       :inverted="linkInverted"
       :aria-current="ariaCurrent"
       data-qa="breadcrumb-item"
-      v-bind="$attrs"
+      v-bind="removeClassStyleAttrs($attrs)"
     >
       <!-- @slot default slot for breadcrumb item's label -->
       <slot>
@@ -23,6 +24,7 @@
 
 <script>
 import { BREADCRUMB_ITEM_SELECTED_MODIFIER } from './breadcrumbs_constants';
+import { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 import { DtLink } from '../link';
 import { MUTED } from '../link/link_constants';
 
@@ -64,6 +66,7 @@ export default {
   data () {
     return {
       BREADCRUMB_ITEM_SELECTED_MODIFIER,
+
     };
   },
 
@@ -80,5 +83,10 @@ export default {
       return this.selected ? 'location' : undefined;
     },
   },
+
+  methods: {
+    removeClassStyleAttrs,
+    addClassStyleAttrs,
+  },
 };
 </script>

packages/dialtone-vue3/components/checkbox/checkbox.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>
+  <div
+    v-bind="addClassStyleAttrs($attrs)"
+  >
     <label>
       <div :class="['d-checkbox-group', { 'd-checkbox-group--disabled': internalDisabled }]">
         <div class="d-checkbox__input">
@@ -10,7 +12,7 @@
             :value="value"
             :disabled="internalDisabled"
             :class="['d-checkbox', inputValidationClass, inputClass]"
-            v-bind="$attrs"
+            v-bind="removeClassStyleAttrs($attrs)"
             :indeterminate.prop="internalIndeterminate"
             v-on="inputListeners"
           >
@@ -59,6 +61,7 @@ import {
   GroupableMixin,
   MessagesMixin,
 } from '@/common/mixins/input';
+import { removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 import { CHECKBOX_INPUT_VALIDATION_CLASSES } from './checkbox_constants';
 import { DtValidationMessages } from '../validation_messages';
 
@@ -156,6 +159,9 @@ export default {
   },
 
   methods: {
+    removeClassStyleAttrs,
+    addClassStyleAttrs,
+
     emitValue (target) {
       let { value, checked } = target;
       // Expected: Indeterminate -> unchecked. We need to manually set DOM property `checked` to false

packages/dialtone-vue3/components/input/input.vue

@@ -2,6 +2,7 @@
   <div
     ref="container"
     :class="['d-input__root', { 'd-input--hidden': hidden }]"
+    v-bind="addClassStyleAttrs($attrs)"
     data-qa="dt-input"
   >
     <label
@@ -74,7 +75,7 @@
           :class="inputClasses()"
           :maxlength="shouldLimitMaxLength ? validationProps.length.max : null"
           data-qa="dt-input-input"
-          v-bind="$attrs"
+          v-bind="removeClassStyleAttrs($attrs)"
           v-on="inputListeners"
         />
         <input
@@ -88,7 +89,7 @@
           :class="inputClasses()"
           :maxlength="shouldLimitMaxLength ? validationProps.length.max : null"
           data-qa="dt-input-input"
-          v-bind="$attrs"
+          v-bind="removeClassStyleAttrs($attrs)"
           v-on="inputListeners"
         >
         <span
@@ -131,6 +132,8 @@ import {
   getUniqueString,
   getValidationState,
   hasSlotContent,
+  removeClassStyleAttrs,
+  addClassStyleAttrs,
 } from '@/common/utils';
 import { DtValidationMessages } from '@/components/validation_messages';
 import { MessagesMixin } from '@/common/mixins/input';
@@ -531,6 +534,8 @@ export default {
   },
 
   methods: {
+    removeClassStyleAttrs,
+    addClassStyleAttrs,
     inputClasses () {
       return [
         'd-input__input',

packages/dialtone-vue3/components/radio/radio.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>
+  <div
+    v-bind="addClassStyleAttrs($attrs)"
+  >
     <label>
       <div :class="['d-radio-group', { 'd-radio-group--disabled': internalDisabled }]">
         <div class="d-radio__input">
@@ -10,7 +12,7 @@
             :disabled="internalDisabled"
             type="radio"
             :class="['d-radio', inputValidationClass, inputClass]"
-            v-bind="$attrs"
+            v-bind="removeClassStyleAttrs($attrs)"
             v-on="inputListeners"
           >
         </div>
@@ -57,7 +59,7 @@ import {
 } from '@/common/mixins/input';
 import { RADIO_INPUT_VALIDATION_CLASSES } from './radio_constants';
 import { DtValidationMessages } from '../validation_messages';
-import { hasSlotContent } from '@/common/utils';
+import { hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 
 /**
  * Radios are control elements that allow the user to make a single selection.
@@ -169,6 +171,8 @@ export default {
   },
 
   methods: {
+    removeClassStyleAttrs,
+    addClassStyleAttrs,
     emitValue (value) {
       if (value !== this.radioGroupValue) {
         // update provided value if injected

packages/dialtone-vue3/components/select_menu/select_menu.vue

@@ -1,5 +1,7 @@
 <template>
-  <div>
+  <div
+    v-bind="addClassStyleAttrs($attrs)"
+  >
     <label>
       <div
         v-if="hasSlotContent($slots.label) || label"
@@ -44,7 +46,7 @@
             'd-select__input',
             SELECT_STATE_MODIFIERS[state],
           ]"
-          v-bind="$attrs"
+          v-bind="removeClassStyleAttrs($attrs)"
           data-qa="dt-select"
           :disabled="disabled"
           v-on="selectListeners"
@@ -88,6 +90,8 @@ import {
   getUniqueString,
   getValidationState,
   hasSlotContent,
+  removeClassStyleAttrs,
+  addClassStyleAttrs,
 } from '@/common/utils';
 import { MessagesMixin } from '@/common/mixins/input';
 import { optionsValidator } from './select_menu_validators.js';
@@ -298,6 +302,8 @@ export default {
   },
 
   methods: {
+    removeClassStyleAttrs,
+    addClassStyleAttrs,
     emitValue (value, event) {
       this.$emit('input', value, event);
       this.$emit('change', value, event);

packages/dialtone-vue3/components/split_button/split_button.vue

@@ -295,6 +295,7 @@ export default {
         size: this.size,
         tooltipText: this.alphaTooltipText,
         class: this.$attrs.class,
+        style: this.$attrs.style,
       };
     },
 
@@ -309,6 +310,7 @@ export default {
         size: this.size,
         tooltipText: this.omegaTooltipText,
         class: this.$attrs.class,
+        style: this.$attrs.style,
       };
     },
   },

packages/dialtone-vue3/components/toggle/toggle.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="d-toggle-wrapper">
+  <div
+    class="d-toggle-wrapper"
+    v-bind="addClassStyleAttrs($attrs)"
+  >
     <label
       v-if="hasSlotContent($slots.default)"
       :class="labelClass"
@@ -30,7 +33,7 @@
 
 <script>
 import { warn } from 'vue';
-import { getUniqueString, hasSlotContent } from '@/common/utils';
+import { getUniqueString, hasSlotContent, removeClassStyleAttrs, addClassStyleAttrs } from '@/common/utils';
 import { TOGGLE_CHECKED_VALUES, TOGGLE_SIZE_MODIFIERS } from '@/components/toggle/toggle_constants';
 
 /**
@@ -146,7 +149,7 @@ export default {
   computed: {
     inputListeners () {
       return {
-        ...this.$attrs,
+        ...removeClassStyleAttrs(this.$attrs),
         onClick: _ => this.toggleCheckedValue(),
       };
     },
@@ -183,6 +186,7 @@ export default {
   },
 
   methods: {
+    addClassStyleAttrs,
     toggleCheckedValue () {
       this.$emit('change', !this.internalChecked);