feat(): add a extra-toggle-classes prop to nav-item-dropdown.js with …

…tests and docs. Refs bootstrap-vue#1550
suretec · Jan 23, 2018 · e29ffe2 · e29ffe2
1 parent 6a8022f
commit e29ffe2
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 2 deletions.
diff --git a/src/components/nav/README.md b/src/components/nav/README.md
@@ -121,7 +121,7 @@ Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
 <b-nav pills>
   <b-nav-item active>Active</b-nav-item>
   <b-nav-item>Link</b-nav-item>
-  <b-nav-item-dropdown id="nav7_ddown" text="Dropdown" right>
+  <b-nav-item-dropdown id="nav7_ddown" text="Dropdown" extra-toggle-classes="nav-link-custom" right>
     <b-dropdown-item>one</b-dropdown-item>
     <b-dropdown-item>two</b-dropdown-item>
     <b-dropdown-divider></b-dropdown-divider>
@@ -132,6 +132,18 @@ Use `<b-nav-item-dropdown>` to place dropdown items within your nav.
 <!-- nav-dropdown.vue -->
 ```
 
+Sometimes you want to add your own class names to the generated dropdown toggle button, that by default has
+the classes `nav-link` and `dropdown-toggle`. Use the `extra-toggle-classes` prop to add them (like above) which
+will produce something like:
+
+```html
+<li id="nav7_ddown" class="nav-item b-nav-dropdown dropdown">
+   <a href="#" id="nav7_ddown__BV_button_" aria-haspopup="true" aria-expanded="false" class="nav-link dropdown-toggle nav-link-custom">
+  </a>    
+  ...
+</li>
+```
+
 Refer to [`<b-dropdown>`](../dropdown) for a list of supported sub-components.
 
 ### `<b-nav-item-dropdown>` Component Alias

diff --git a/src/components/nav/nav-item-dropdown.js b/src/components/nav/nav-item-dropdown.js
@@ -56,7 +56,8 @@ export default {
       return [
         'nav-link',
         this.noCaret ? '' : 'dropdown-toggle',
-        this.disabled ? 'disabled' : ''
+        this.disabled ? 'disabled' : '',
+        this.extraToggleClasses ? this.extraToggleClasses : ''
       ]
     },
     menuClasses () {
@@ -72,6 +73,11 @@ export default {
       type: Boolean,
       default: false
     },
+    extraToggleClasses: {
+      // Extra Toggle classes
+      type: String,
+      default: ''
+    },
     role: {
       type: String,
       default: 'menu'

diff --git a/src/components/navbar/fixtures/navbar.html b/src/components/navbar/fixtures/navbar.html
@@ -33,6 +33,9 @@
                         Sign out
                     </a>
                 </b-nav-item-dropdown>
+                 <b-nav-item-dropdown ref="extraToggleClasses" extra-toggle-classes="nav-link-custom">
+                    <b-dropdown-item>CustomClassInNavLink</b-dropdown-item>
+                </b-nav-item-dropdown>
             </b-navbar-nav>
         </b-collapse>
 

diff --git a/src/components/navbar/navbar.spec.js b/src/components/navbar/navbar.spec.js
@@ -3,4 +3,12 @@ import {loadFixture, testVM} from '../../../tests/utils'
 describe('navbar', async () => {
   beforeEach(loadFixture(__dirname, 'navbar'))
   testVM()
+
+  it('should have custom toggle class in nav-item-dropdown', async () => {
+    const { app: { $refs } } = window
+    const extraClass = $refs.extraToggleClasses
+    expect(extraClass).toBeDefined()
+    expect(extraClass.$refs.toggle).toBeDefined()
+    expect(extraClass.$refs.toggle).toHaveAllClasses(['nav-link', 'dropdown-toggle', 'nav-link-custom'])
+  })
 })