feat(b-drodpown-item-button, b-drodpown-item-button): add button-class and link-class prop (#5014)

Payton Burdette · pburdette · tmorehouse · web-flow · commit b39d31cede76 · 2020-03-25T20:11:10.000+01:00
* feat(b-drodpown-item-button): add button-class prop

Add the button class prop to the
b-dropdown-item-button and also
add a test to ensure its working
as expected.

* Update dropdown-item-button.js

* Update package.json

* Update dropdown-item.js

* Update package.json

* Update dropdown-item.spec.js

Add new test to ensure the linkClass
prop value is applied correctly to the
a element.

Co-authored-by: pburdette &lt;pburdette@gitlab.com&gt;
Co-authored-by: Troy Morehouse &lt;troymore@nbnet.nb.ca&gt;
diff --git a/src/components/dropdown/dropdown-item-button.js b/src/components/dropdown/dropdown-item-button.js
@@ -10,6 +10,10 @@ export const props = {
     type: String,
     default: 'active'
   },
+  buttonClass: {
+    type: [String, Array, Object],
+    default: null
+  },
   disabled: {
     type: Boolean,
     default: false
@@ -48,10 +52,13 @@ export const BDropdownItemButton = /*#__PURE__*/ Vue.extend({
         'button',
         {
           staticClass: 'dropdown-item',
-          class: {
-            [this.activeClass]: this.active,
-            [`text-${this.variant}`]: this.variant && !(this.active || this.disabled)
-          },
+          class: [
+            this.buttonClass,
+            {
+              [this.activeClass]: this.active,
+              [`text-${this.variant}`]: this.variant && !(this.active || this.disabled)
+            }
+          ],
           attrs: {
             ...this.$attrs,
             role: 'menuitem',
diff --git a/src/components/dropdown/dropdown-item-button.spec.js b/src/components/dropdown/dropdown-item-button.spec.js
@@ -102,4 +102,19 @@ describe('dropdown-item-button', () => {
 
     wrapper.destroy()
   })
+
+  it('has buttonClass when prop is passed a value', () => {
+    const wrapper = mount(BDropdownItemButton, {
+      propsData: {
+        buttonClass: 'button-class'
+      }
+    })
+    expect(wrapper.is('li')).toBe(true)
+
+    const button = wrapper.find('button')
+    expect(button.classes()).toContain('button-class')
+    expect(button.classes()).toContain('dropdown-item')
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/dropdown/dropdown-item.js b/src/components/dropdown/dropdown-item.js
@@ -17,6 +17,10 @@ export const BDropdownItem = /*#__PURE__*/ Vue.extend({
   },
   props: {
     ...props,
+    linkClass: {
+      type: [String, Array, Object],
+      default: null
+    },
     variant: {
       type: String,
       default: null
@@ -43,9 +47,12 @@ export const BDropdownItem = /*#__PURE__*/ Vue.extend({
         {
           props: this.$props,
           staticClass: 'dropdown-item',
-          class: {
-            [`text-${this.variant}`]: this.variant && !(this.active || this.disabled)
-          },
+          class: [
+            this.linkClass,
+            {
+              [`text-${this.variant}`]: this.variant && !(this.active || this.disabled)
+            }
+          ],
           attrs: { ...this.$attrs, role: 'menuitem' },
           on: { click: this.onClick },
           ref: 'item'
diff --git a/src/components/dropdown/dropdown-item.spec.js b/src/components/dropdown/dropdown-item.spec.js
@@ -79,6 +79,21 @@ describe('dropdown-item', () => {
     wrapper.destroy()
   })
 
+  it('has linkClass when prop is passed a value', () => {
+    const wrapper = mount(BDropdownItem, {
+      propsData: {
+        linkClass: 'link-class'
+      }
+    })
+    expect(wrapper.is('li')).toBe(true)
+
+    const item = wrapper.find('a')
+    expect(item.classes()).toContain('link-class')
+    expect(item.classes()).toContain('dropdown-item')
+
+    wrapper.destroy()
+  })
+
   describe('router-link support', () => {
     it('works', async () => {
       const localVue = new CreateLocalVue()
diff --git a/src/components/dropdown/package.json b/src/components/dropdown/package.json
@@ -198,6 +198,13 @@
         "aliases": [
           "BDdItem"
         ],
+        "props": [
+          {
+            "prop": "linkClass",
+            "version": "2.9.0",
+            "description": "Class or classes to apply to the inner link element"
+          }
+        ],
         "events": [
           {
             "event": "click",
@@ -219,6 +226,13 @@
           "BDdItemButton",
           "BDdItemBtn"
         ],
+        "props": [
+          {
+            "prop": "buttonClass",
+            "version": "2.9.0",
+            "description": "Class or classes to apply to the inner button element"
+          }
+        ],
         "events": [
           {
             "event": "click",
