Fix [MenuItem]: Vue Compat: deprecation INSTANCE_ATTRS_CLASS_STYLE (#16…

…) (#212)

* feat(lib): add compat-fallthrough prop to MenuItem

- `MenuItem` introduces a new prop `compat-fallthrough` that determines
  if the `class`, `style`, and `id` attributes are applied to the root
  `<li>` element or the underlying tag. Since Vue 3 changed the
  fallthrough behavior, `MenuItem` became incompatible with that of
  Buefy for Vue 2. The default value of this prop is determined by the
  `defaultCompatFallthrough` config option that is `true` by default.

* test(lib): test MenuItem fallthrough behavior

- Adds test cases for the `compat-fallthrough` prop of `MenuItem`

* chore(docs): explain compat-fallthrough prop of MenuItem

* docs(CHANGELOG): explain compat-fallthrough prop of MenuItem

CHANGELOG.md

@@ -31,7 +31,7 @@
 
   * `MenuItem`:
 
-    TBD
+    If `compat-fallthrough` is `true`, the attributes fall through to the root `<li>` element, otherwise to the underlying tag.
 
   * `NavbarDropdown`:
 

packages/buefy-next/src/components/menu/MenuItem.spec.js

@@ -40,4 +40,51 @@ describe('BMenuItem', () => {
         expect(wrapper.vm.newExpanded).toBeTruthy()
         expect(wrapper.emitted()['update:expanded'][0]).toContainEqual(true)
     })
+
+    describe('with fallthrough attributes', () => {
+        const attrs = {
+            class: 'fallthrough-class',
+            style: 'font-size: 2rem;',
+            id: 'fallthrough-id'
+        }
+
+        it('should apply class, style, and id to the root <li> element, if compatFallthrough is true (default)', () => {
+            const wrapper = shallowMount(BMenuItem, {
+                attrs,
+                props: {
+                    tag: 'a'
+                }
+            })
+
+            const root = wrapper.find('li')
+            expect(root.classes(attrs.class)).toBe(true)
+            expect(root.attributes('style')).toBe(attrs.style)
+            expect(root.attributes('id')).toBe(attrs.id)
+
+            const tag = wrapper.find('a')
+            expect(tag.classes(attrs.class)).toBe(false)
+            expect(tag.attributes('style')).toBeUndefined()
+            expect(tag.attributes('id')).toBeUndefined()
+        })
+
+        it('should apply class, style, and id to the underlying tag, if compatFallthrough is false', () => {
+            const wrapper = shallowMount(BMenuItem, {
+                attrs,
+                props: {
+                    tag: 'a',
+                    compatFallthrough: false
+                }
+            })
+
+            const root = wrapper.find('li')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const tag = wrapper.find('a')
+            expect(tag.classes(attrs.class)).toBe(true)
+            expect(tag.attributes('style')).toBe(attrs.style)
+            expect(tag.attributes('id')).toBe(attrs.id)
+        })
+    })
 })

packages/buefy-next/src/components/menu/MenuItem.vue

@@ -1,8 +1,8 @@
 <template>
-    <li :role="ariaRoleMenu">
+    <li :role="ariaRoleMenu" v-bind="rootAttrs">
         <component
             :is="tag"
-            v-bind="$attrs"
+            v-bind="fallthroughAttrs"
             :class="{
                 'is-active': newActive,
                 'is-expanded': newExpanded,
@@ -39,21 +39,21 @@
 <script>
 import Icon from '../icon/Icon.vue'
 import config from '../../utils/config'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 import MenuItemContainerMixin from './MenuItemContainerMixin'
 
 export default {
     name: 'BMenuItem',
     components: {
         [Icon.name]: Icon
     },
-    mixins: [MenuItemContainerMixin],
+    mixins: [CompatFallthroughMixin, MenuItemContainerMixin],
     inject: {
         parent: {
             from: 'BMenuItemContainer',
             default: null
         }
     },
-    inheritAttrs: false,
     // deprecated, to replace with default 'value' in the next breaking change
     model: {
         prop: 'active',

packages/docs/src/pages/components/menu/api/menu.js

@@ -136,6 +136,13 @@ export default [
                 values: '<code>menuitem</code>',
                 default: '—'
             },
+            {
+                name: '<code>compat-fallthrough</code>',
+                description: 'Whether <code>class</code>, <code>style</code>, and <code>id</code> attributes are applied to the root &lt;li&gt; element or the underlying tag. If <code>true</code>, they are applied to the root &lt;li&gt; element, which is compatible with Buefy for Vue 2.',
+                type: 'Boolean',
+                values: '-',
+                default: '<code>true</code>. Can be changed via the <code>defaultCompatFallthrough</code> config option.'
+            },
             {
                 name: 'Any native attribute',
                 description: '—',