feat(b-drodpown-item-button, b-drodpown-item-button): add `button-cla…

…ss` and `link-class` prop (#5014) * 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 <pburdette@gitlab.com> Co-authored-by: Troy Morehouse <troymore@nbnet.nb.ca>
bootstrap-vue · Mar 25, 2020 · b39d31c · b39d31c
1 parent 4476945
commit b39d31c
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 7 deletions.
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",