Fix: [BreadcrumbItem] Vue Compat: deprecation INSTANCE_ATTRS_CLASS_ST…

…YLE (#16) (#209)

* feat(lib): add compat fallthrough prop to BreadcrumbItem

- `BreadcrumbItem` introduces a new prop `compat-fallthrough` which
  determines if the `style`, `class`, and `id` attributes falls through
  to the root `<li>` element rather than the underlying tag. Since Vue 3
  changed the fallthrough behavior, `BreadcrumbItem` became incompatible
  with that of Buefy for Vue 2. The default value for this prop is
  configured by the `defaultCompatFallthrough` config option, which is
  `true` by default (compatible with Buefy for Vue 2).

* test(lib): test BreadcrumbItem fallthrough behavior

- Tests the new prop `compat-fallthrough` of `BreadcrumbItem`

* chore(docs): explain compat-fallthrough of BreadcrumbItem

* docs(CHANGELOG): explain compat-fallthrough of BreadcrumbItem

CHANGELOG.md

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

packages/buefy-next/src/components/breadcrumb/BreadcrumbItem.spec.js

@@ -22,4 +22,51 @@ describe('BBreadcrumbItem', () => {
     it('should have a li tag', () => {
         expect(wrapper.find('li').exists()).toBeTruthy()
     })
+
+    describe('with fallthrough attributes', () => {
+        const attrs = {
+            class: 'fallthrough-class',
+            style: 'font-size: 2rem;',
+            id: 'fallthrough-id'
+        }
+
+        it('should bind class, style, and id to the root li if compatFallthrough is true (default)', async () => {
+            const wrapper = mount(BBreadcrumbItem, {
+                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 anchor = wrapper.find('a')
+            expect(anchor.classes(attrs.class)).toBe(false)
+            expect(anchor.attributes('style')).toBeUndefined()
+            expect(anchor.attributes('id')).toBeUndefined()
+        })
+
+        it('should bind class, style, and id to the underlying tag if compatFallthrough is false', async () => {
+            const wrapper = mount(BBreadcrumbItem, {
+                attrs,
+                props: {
+                    compatFallthrough: false,
+                    tag: 'a'
+                }
+            })
+
+            const root = wrapper.find('li')
+            expect(root.classes(attrs.class)).toBe(false)
+            expect(root.attributes('style')).toBeUndefined()
+            expect(root.attributes('id')).toBeUndefined()
+
+            const anchor = wrapper.find('a')
+            expect(anchor.classes(attrs.class)).toBe(true)
+            expect(anchor.attributes('style')).toBe(attrs.style)
+            expect(anchor.attributes('id')).toBe(attrs.id)
+        })
+    })
 })

packages/buefy-next/src/components/breadcrumb/BreadcrumbItem.vue

@@ -1,10 +1,11 @@
 <template>
     <li
         :class="{ 'is-active': active }"
+        v-bind="rootAttrs"
     >
         <component
             :is="tag"
-            v-bind="$attrs"
+            v-bind="fallthroughAttrs"
         >
             <slot />
         </component>
@@ -13,10 +14,11 @@
 
 <script>
 import config from '../../utils/config'
+import CompatFallthroughMixin from '../../utils/CompatFallthroughMixin'
 
 export default {
     name: 'BBreadcrumbItem',
-    inheritAttrs: false,
+    mixins: [CompatFallthroughMixin],
     props: {
         tag: {
             type: String,

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

@@ -41,6 +41,13 @@ export default [
                 type: 'Boolean',
                 values: '<code>false</code>, <code>true</code>',
                 default: '<code>false</code>'
+            },
+            {
+                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 <code>tag</code>. If <code>true</code>, they are applied to the root &lt;li&gt; element, which is compatible with Vue 2.',
+                type: 'Boolean',
+                values: '-',
+                default: '<code>true</code>. Can be changed via <code>defaultCompatFallthrough</code> config option.'
             }
         ]
     }