feat(b-navbar-toggle): add disabled prop (#5397)

tmorehouse · web-flow · commit 0b7082b792ee · 2020-05-18T19:35:09.000-03:00
Co-authored-by: Jacob Müller
diff --git a/src/components/navbar/navbar-toggle.js b/src/components/navbar/navbar-toggle.js
@@ -23,6 +23,10 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
     target: {
       type: String,
       required: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -36,8 +40,10 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
   },
   methods: {
     onClick(evt) {
-      // Emit courtesy `click` event
-      this.$emit('click', evt)
+      if (!this.disabled) {
+        // Emit courtesy `click` event
+        this.$emit('click', evt)
+      }
     },
     handleStateEvt(id, state) {
       // We listen for state events so that we can pass the
@@ -48,17 +54,23 @@ export const BNavbarToggle = /*#__PURE__*/ Vue.extend({
     }
   },
   render(h) {
-    const expanded = this.toggleState
+    const { disabled } = this
+
     return h(
       'button',
       {
         staticClass: CLASS_NAME,
+        class: { disabled },
         directives: [{ name: 'BToggle', value: this.target }],
-        attrs: { type: 'button', 'aria-label': this.label },
+        attrs: {
+          type: 'button',
+          disabled,
+          'aria-label': this.label
+        },
         on: { click: this.onClick }
       },
       [
-        this.normalizeSlot('default', { expanded }) ||
+        this.normalizeSlot('default', { expanded: this.toggleState }) ||
           h('span', { staticClass: `${CLASS_NAME}-icon` })
       ]
     )
diff --git a/src/components/navbar/navbar-toggle.spec.js b/src/components/navbar/navbar-toggle.spec.js
@@ -159,4 +159,22 @@ describe('navbar-toggle', () => {
 
     wrapper.destroy()
   })
+
+  it('disabled prop works', async () => {
+    const wrapper = mount(BNavbarToggle, {
+      propsData: {
+        target: 'target-9',
+        disabled: true
+      }
+    })
+
+    expect(wrapper.emitted('click')).not.toBeDefined()
+    expect(wrapper.element.hasAttribute('disabled')).toBe(true)
+    expect(wrapper.classes()).toContain('disabled')
+
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).not.toBeDefined()
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/navbar/package.json b/src/components/navbar/package.json
@@ -78,6 +78,11 @@
             "prop": "label",
             "settings": true,
             "description": "String to place in the toggle's 'aria-label' attribute"
+          },
+          {
+            "prop": "disabled",
+            "version": "2.15.0",
+            "description": "When `true`, disables the navbar toggle button, and adds class `disabled` to the button"
           }
         ],
         "events": [
