From bb075678aa4c88c8a3c5d323b0b89dda3b57cc5d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Mon, 9 Jul 2018 01:24:43 +0200 Subject: [PATCH 1/2] feat(button): Make button tag configurable --- src/components/button/button.js | 11 ++++++++--- src/components/dropdown/dropdown.js | 7 ++++++- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/components/button/button.js b/src/components/button/button.js index 9f34561c055..04f02ca6672 100644 --- 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/dropdown/dropdown.js b/src/components/dropdown/dropdown.js index 7cbbc02fbb9..d7270b818a0 100644 --- 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 From c13c8c83b659c89dfd0ac4358a9d28bbff29e08b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jacob=20M=C3=BCller?= Date: Sat, 14 Jul 2018 12:05:45 +0200 Subject: [PATCH 2/2] Add tests --- src/components/button/button.spec.js | 14 ++++++++++++++ src/components/button/fixtures/button.html | 13 +++++++++++++ src/components/dropdown/dropdown.spec.js | 9 +++++++++ src/components/dropdown/fixtures/dropdown.html | 7 +++++++ 4 files changed, 43 insertions(+) diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js index 54c22ad4d6a..d631ea34fcc 100755 --- 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 index 4a9d160faf6..971755303ea 100755 --- a/src/components/button/fixtures/button.html +++ b/src/components/button/fixtures/button.html @@ -24,6 +24,19 @@ alt="github"> +
+ + I am a div + +
+
+ + I am a button + +
{ 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 index 282bc799558..8a9c1b08617 100755 --- a/src/components/dropdown/fixtures/dropdown.html +++ b/src/components/dropdown/fixtures/dropdown.html @@ -90,4 +90,11 @@ Action Another action + +

+ + + Action + Another action +