feat(b-dropdown): add toggle-attrs prop (closes #3694) (#6339)

phegman · peterhegman · jacobmllr95 · web-flow · commit 6cfcbb300877 · 2021-01-21T11:44:07.000+01:00
* feat(b-dropdown): add `toggle-attrs` prop

Add `toggle-attrs` prop to allow adding HTML attributes to the
dropdown toggle

* Update dropdown.js

* Update dropdown.spec.js

Co-authored-by: peterhegman &lt;phegman@gitlab.com&gt;
Co-authored-by: Jacob Müller &lt;jacob.mueller.elz@gmail.com&gt;
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -3,6 +3,7 @@ import { NAME_DROPDOWN } from '../../constants/components'
 import {
   PROP_TYPE_ARRAY_OBJECT_STRING,
   PROP_TYPE_BOOLEAN,
+  PROP_TYPE_OBJECT,
   PROP_TYPE_OBJECT_STRING,
   PROP_TYPE_STRING
 } from '../../constants/props'
@@ -40,6 +41,7 @@ export const props = makePropsConfigurable(
     splitTo: makeProp(PROP_TYPE_OBJECT_STRING),
     splitVariant: makeProp(PROP_TYPE_STRING),
     text: makeProp(PROP_TYPE_STRING),
+    toggleAttrs: makeProp(PROP_TYPE_OBJECT, {}),
     toggleClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
     toggleTag: makeProp(PROP_TYPE_STRING, 'button'),
     // TODO: This really should be `toggleLabel`
@@ -145,6 +147,9 @@ export const BDropdown = /*#__PURE__*/ Vue.extend({
         staticClass: 'dropdown-toggle',
         class: this.toggleClasses,
         attrs: {
+          // Merge in user supplied attributes
+          ...this.toggleAttrs,
+          // Must have attributes
           id: this.safeId('_BV_toggle_'),
           'aria-haspopup': 'true',
           'aria-expanded': toString(visible)
diff --git a/src/components/dropdown/dropdown.spec.js b/src/components/dropdown/dropdown.spec.js
@@ -300,7 +300,9 @@ describe('dropdown', () => {
         block: true
       }
     })
+
     expect(wrapper.classes()).not.toContain('btn-group')
+
     wrapper.destroy()
   })
 
@@ -312,8 +314,10 @@ describe('dropdown', () => {
         split: true
       }
     })
+
     expect(wrapper.classes()).toContain('btn-group')
     expect(wrapper.classes()).toContain('d-flex')
+
     wrapper.destroy()
   })
 
@@ -324,7 +328,9 @@ describe('dropdown', () => {
         noCaret: true
       }
     })
+
     expect(wrapper.find('.dropdown-toggle').classes()).toContain('dropdown-toggle-no-caret')
+
     wrapper.destroy()
   })
 
@@ -336,7 +342,9 @@ describe('dropdown', () => {
         split: true
       }
     })
+
     expect(wrapper.find('.dropdown-toggle').classes()).not.toContain('dropdown-toggle-no-caret')
+
     wrapper.destroy()
   })
 
@@ -347,7 +355,22 @@ describe('dropdown', () => {
         toggleTag: 'div'
       }
     })
+
     expect(wrapper.find('.dropdown-toggle').element.tagName).toBe('DIV')
+
+    wrapper.destroy()
+  })
+
+  it('should have attributes on toggle when "toggle-attrs" prop is set', async () => {
+    const wrapper = mount(BDropdown, {
+      attachTo: createContainer(),
+      propsData: {
+        toggleAttrs: { 'data-foo-bar': 'foo-bar' }
+      }
+    })
+
+    expect(wrapper.find('.dropdown-toggle').attributes('data-foo-bar')).toBe('foo-bar')
+
     wrapper.destroy()
   })
 
@@ -358,17 +381,21 @@ describe('dropdown', () => {
         dropup: true
       }
     })
+
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).toContain('dropup')
     expect(wrapper.classes()).not.toContain('show')
     expect(wrapper.find('.dropdown-menu').classes()).not.toContain('show')
+
     wrapper.vm.show()
     await waitNT(wrapper.vm)
     await waitRAF()
+
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).toContain('dropup')
     expect(wrapper.classes()).toContain('show')
     expect(wrapper.find('.dropdown-menu').classes()).toContain('show')
+
     wrapper.destroy()
   })
 
@@ -379,17 +406,21 @@ describe('dropdown', () => {
         dropright: true
       }
     })
+
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).toContain('dropright')
     expect(wrapper.classes()).not.toContain('show')
     expect(wrapper.find('.dropdown-menu').classes()).not.toContain('show')
+
     wrapper.vm.show()
     await waitNT(wrapper.vm)
     await waitRAF()
+
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).toContain('dropright')
     expect(wrapper.classes()).toContain('show')
     expect(wrapper.find('.dropdown-menu').classes()).toContain('show')
+
     wrapper.destroy()
   })
 
@@ -400,17 +431,21 @@ describe('dropdown', () => {
         dropleft: true
       }
     })
+
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).toContain('dropleft')
     expect(wrapper.classes()).not.toContain('show')
     expect(wrapper.find('.dropdown-menu').classes()).not.toContain('show')
+
     wrapper.vm.show()
     await waitNT(wrapper.vm)
     await waitRAF()
+
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).toContain('dropleft')
     expect(wrapper.classes()).toContain('show')
     expect(wrapper.find('.dropdown-menu').classes()).toContain('show')
+
     wrapper.destroy()
   })
 
@@ -423,10 +458,12 @@ describe('dropdown', () => {
         split: true
       }
     })
+
     const $buttons = wrapper.findAll('button')
     const $split = $buttons.at(0)
-
     expect($split.classes()).toContain(splitClass)
+
+    wrapper.destroy()
   })
 
   it('menu should have class dropdown-menu-right when prop right set', async () => {
@@ -436,17 +473,21 @@ describe('dropdown', () => {
         right: true
       }
     })
+
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).not.toContain('show')
     expect(wrapper.find('.dropdown-menu').classes()).toContain('dropdown-menu-right')
     expect(wrapper.find('.dropdown-menu').classes()).not.toContain('show')
+
     wrapper.vm.show()
     await waitNT(wrapper.vm)
     await waitRAF()
+
     expect(wrapper.classes()).toContain('dropdown')
     expect(wrapper.classes()).toContain('show')
     expect(wrapper.find('.dropdown-menu').classes()).toContain('dropdown-menu-right')
     expect(wrapper.find('.dropdown-menu').classes()).toContain('show')
+
     wrapper.destroy()
   })
 
diff --git a/src/components/dropdown/package.json b/src/components/dropdown/package.json
@@ -98,6 +98,11 @@
             "prop": "text",
             "description": "Text to place in the toggle button, or in the split button is split mode"
           },
+          {
+            "prop": "toggleAttrs",
+            "version": "2.22.0",
+            "description": "Additional attributes to apply to the toggle button"
+          },
           {
             "prop": "toggleClass",
             "description": "CSS class (or classes) to add to the toggle button"
