Skip to content
Permalink
Browse files
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>
  • Loading branch information
3 people committed Mar 25, 2020
1 parent 4476945 commit b39d31cede76b594b5608fa472d53e3dac525e2b
Showing 5 changed files with 65 additions and 7 deletions.
@@ -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',
@@ -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()
})
})
@@ -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'
@@ -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()
@@ -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",

0 comments on commit b39d31c

Please sign in to comment.