feat(button): Make button tag configurable (bootstrap-vue#1929)

jacobmllr95 · mosinve · commit afcadd9733da · 2018-07-15T09:11:57.000+07:00
* feat(button): Make button tag configurable
diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -26,6 +26,10 @@ const btnProps = {
     type: String,
     default: 'button'
   },
+  tag: {
+    type: String,
+    default: 'button'
+  },
   pressed: {
     // tri-state prop: true, false or null
     // => on, off, not a toggle
@@ -55,6 +59,7 @@ export default {
   render (h, { props, data, listeners, children }) {
     const isLink = Boolean(props.href || props.to)
     const isToggle = typeof props.pressed === 'boolean'
+    const isButtonTag = props.tag === 'button'
     const on = {
       click (e) {
         if (props.disabled && e instanceof Event) {
@@ -90,8 +95,8 @@ export default {
       ],
       props: isLink ? pluckProps(linkPropKeys, props) : null,
       attrs: {
-        type: isLink ? null : props.type,
-        disabled: isLink ? null : props.disabled,
+        type: isButtonTag && !isLink ? props.type : null,
+        disabled: isButtonTag && !isLink ? props.disabled : null,
         // Data attribute not used for js logic,
         // but only for BS4 style selectors.
         'data-toggle': isToggle ? 'button' : null,
@@ -107,6 +112,6 @@ export default {
       on
     }
 
-    return h(isLink ? Link : 'button', mergeData(data, componentData), children)
+    return h(isLink ? Link : props.tag, mergeData(data, componentData), children)
   }
 }
diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js
@@ -55,6 +55,20 @@ describe('button', async () => {
     expect(btnRootNode.href).toBe('https://github.com/bootstrap-vue/bootstrap-vue')
   })
 
+  it('should use the given tag', async () => {
+    const { app: { $refs } } = window
+    const btnRootNode = $refs.btn_div
+
+    expect(btnRootNode).toBeElement('div')
+  })
+
+  it('should use button when no tag is given', async () => {
+    const { app: { $refs } } = window
+    const btnRootNode = $refs.btn_no_tag
+
+    expect(btnRootNode).toBeElement('button')
+  })
+
   it('should emit "click" event when clicked', async () => {
     const { app: { $refs } } = window
     const btn = $refs.btn_click
diff --git a/src/components/button/fixtures/button.html b/src/components/button/fixtures/button.html
@@ -24,6 +24,19 @@
                      alt="github">
             </b-btn>
         </div>
+        <div class="col-md-4 pb-2">
+            <b-btn variant="secondary"
+                   tag="div"
+                   ref="btn_div">
+                I am a div
+            </b-btn>
+        </div>
+        <div class="col-md-4 pb-2">
+            <b-btn variant="secondary"
+                   ref="btn_no_tag">
+                I am a button
+            </b-btn>
+        </div>
         <div class="col-md-4 pb-2">
             <b-btn variant="success"
                    ref="btn_click"
diff --git a/src/components/dropdown/dropdown.js b/src/components/dropdown/dropdown.js
@@ -37,7 +37,8 @@ export default {
         props: {
           variant: this.variant,
           size: this.size,
-          disabled: this.disabled
+          disabled: this.disabled,
+          tag: this.toggleTag
         },
         attrs: {
           id: this.safeId('_BV_toggle_'),
@@ -98,6 +99,10 @@ export default {
       type: [String, Array],
       default: null
     },
+    toggleTag: {
+      type: String,
+      default: 'button'
+    },
     toggleClass: {
       type: [String, Array],
       default: null
diff --git a/src/components/dropdown/dropdown.spec.js b/src/components/dropdown/dropdown.spec.js
@@ -73,6 +73,15 @@ describe('dropdown', async () => {
     expect(dd_1).not.toHaveClass('position-static')
   })
   */
+
+  it('should have a toggle with the given toggle tag', async () => {
+    const { app: { $refs } } = window
+    const { dd_10 } = $refs // eslint-disable-line camelcase
+
+    const toggle = dd_10.$el.querySelector('.dropdown-toggle')
+    expect(toggle).toBeElement('div')
+  })
+
   it('dd-item should render as link by default', async () => {
     const {app: {$refs}} = window
     const {dd_6} = $refs // eslint-disable-line camelcase
diff --git a/src/components/dropdown/fixtures/dropdown.html b/src/components/dropdown/fixtures/dropdown.html
@@ -90,4 +90,11 @@
         <b-dropdown-item href="#">Action</b-dropdown-item>
         <b-dropdown-item href="#">Another action</b-dropdown-item>
     </b-dropdown>
+
+    <br><br>
+
+    <b-dropdown ref="dd_10" text="Dropdown" toggle-tag="div">
+        <b-dropdown-item href="#">Action</b-dropdown-item>
+        <b-dropdown-item href="#">Another action</b-dropdown-item>
+    </b-dropdown>
 </div>
