From 851f5c4f9e2f0d201008d91898b4177d1edb6343 Mon Sep 17 00:00:00 2001 From: Jiajun Chen Date: Sat, 27 Jul 2019 16:31:24 +0800 Subject: [PATCH] feat: update button to mdc-web v3.1.0 (#365) --- components/button/Button.vue | 32 +++++++++++++++---- components/button/README.md | 6 ++-- components/button/__tests__/Button.spec.js | 22 +++++++++---- .../__snapshots__/Button.spec.js.snap | 12 ++++--- .../__test__/__snapshots__/Card.spec.js.snap | 4 +-- docs/.vuepress/components/ButtonDemo.vue | 10 ++++-- 6 files changed, 63 insertions(+), 23 deletions(-) diff --git a/components/button/Button.vue b/components/button/Button.vue index 1a7a4c0d1..53304801c 100644 --- a/components/button/Button.vue +++ b/components/button/Button.vue @@ -9,7 +9,8 @@ v-on="$listeners" > - + + @@ -49,6 +51,10 @@ export default { href: { type: String, default: '' + }, + ripple: { + type: Boolean, + default: true } }, data () { @@ -69,8 +75,10 @@ export default { }, watch: { classes () { - this.mdcRipple.destroy() - this.mdcRipple = MDCRipple.attachTo(this.$el) + this.reinitRipple() + }, + ripple () { + this.reinitRipple() } }, mounted () { @@ -80,11 +88,11 @@ export default { childList: true, subtree: true }) - this.mdcRipple = MDCRipple.attachTo(this.$el) + if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el) }, beforeDestroy () { this.slotObserver.disconnect() - if (typeof this.mdcRipple !== 'undefined') { + if (this.mdcRipple) { this.mdcRipple.destroy() } }, @@ -96,6 +104,18 @@ export default { n.elm.setAttribute('aria-hidden', 'true') }) } + if (this.$slots.trailingIcon) { + this.$slots.trailingIcon.map(n => { + n.elm.classList.add('mdc-button__icon') + n.elm.setAttribute('aria-hidden', 'true') + }) + } + }, + reinitRipple () { + if (this.mdcRipple) { + this.mdcRipple.destroy() + if (this.ripple) this.mdcRipple = MDCRipple.attachTo(this.$el) + } } } } diff --git a/components/button/README.md b/components/button/README.md index 0f8ee6a55..05005689c 100644 --- a/components/button/README.md +++ b/components/button/README.md @@ -33,7 +33,8 @@ | unelevated | Boolean | false | unelevated button | | outlined | Boolean | false | outlined button | | dense | Boolean | false | dense button | -| href | String | ' ' | link button | +| href | String | '' | link button | +| ripple | Boolean | true | use js ripple or not | Non prop attributes and events are mapped to the inner button element. @@ -42,7 +43,8 @@ Non prop attributes and events are mapped to the inner button element. | Slot | Description | |------|-------------| | default | button label | -| icon | icon component | +| icon | leading icon component | +| trailingIcon | trailing icon component | ### Reference diff --git a/components/button/__tests__/Button.spec.js b/components/button/__tests__/Button.spec.js index 3fbdce037..9b70a6b40 100644 --- a/components/button/__tests__/Button.spec.js +++ b/components/button/__tests__/Button.spec.js @@ -4,20 +4,20 @@ import Button from '../Button.vue' describe('Button', () => { it('should mount', () => { - let wrapper = mount(Button) + const wrapper = mount(Button) expect(wrapper.isVueInstance()).toBeTruthy() expect(wrapper.vm.$data.mdcRipple).toBeDefined() expect(wrapper.vm.$data.slotObserver).toBeDefined() }) it('should render with no prop', () => { - let wrapper = mount(Button) + const wrapper = mount(Button) expect(wrapper).toMatchSnapshot() expect(wrapper.classes()).toContain('mdc-button') }) it('should render as raised', () => { - let wrapper = mount(Button, { + const wrapper = mount(Button, { propsData: { raised: true } @@ -27,7 +27,7 @@ describe('Button', () => { }) it('should render as unelevated', () => { - let wrapper = mount(Button, { + const wrapper = mount(Button, { propsData: { unelevated: true } @@ -37,7 +37,7 @@ describe('Button', () => { }) it('should render as outlined', () => { - let wrapper = mount(Button, { + const wrapper = mount(Button, { propsData: { outlined: true } @@ -47,7 +47,7 @@ describe('Button', () => { }) it('should render as dense', () => { - let wrapper = mount(Button, { + const wrapper = mount(Button, { propsData: { dense: true } @@ -55,4 +55,14 @@ describe('Button', () => { expect(wrapper).toMatchSnapshot() expect(wrapper.classes()).toContain('mdc-button--dense') }) + + it('should render without ripple', () => { + const wrapper = mount(Button, { + propsData: { + ripple: false + } + }) + expect(wrapper).toMatchSnapshot() + expect(wrapper.vm.$data.mdcRipple).toBeUndefined() + }) }) diff --git a/components/button/__tests__/__snapshots__/Button.spec.js.snap b/components/button/__tests__/__snapshots__/Button.spec.js.snap index 809ad210a..c91a318f0 100644 --- a/components/button/__tests__/__snapshots__/Button.spec.js.snap +++ b/components/button/__tests__/__snapshots__/Button.spec.js.snap @@ -1,11 +1,13 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Button should render as dense 1`] = ``; +exports[`Button should render as dense 1`] = ``; -exports[`Button should render as outlined 1`] = ``; +exports[`Button should render as outlined 1`] = ``; -exports[`Button should render as raised 1`] = ``; +exports[`Button should render as raised 1`] = ``; -exports[`Button should render as unelevated 1`] = ``; +exports[`Button should render as unelevated 1`] = ``; -exports[`Button should render with no prop 1`] = ``; +exports[`Button should render with no prop 1`] = ``; + +exports[`Button should render without ripple 1`] = ``; diff --git a/components/card/__test__/__snapshots__/Card.spec.js.snap b/components/card/__test__/__snapshots__/Card.spec.js.snap index d8dd99ae6..972e91fa4 100644 --- a/components/card/__test__/__snapshots__/Card.spec.js.snap +++ b/components/card/__test__/__snapshots__/Card.spec.js.snap @@ -28,7 +28,7 @@ exports[`Card should render with action buttons 1`] = `
-
+
@@ -54,7 +54,7 @@ exports[`Card should render with action icons 1`] = ` exports[`Card should render with full bleed action 1`] = `
-
+
diff --git a/docs/.vuepress/components/ButtonDemo.vue b/docs/.vuepress/components/ButtonDemo.vue index c5e71af0f..a14b849f9 100644 --- a/docs/.vuepress/components/ButtonDemo.vue +++ b/docs/.vuepress/components/ButtonDemo.vue @@ -7,12 +7,16 @@ :unelevated="radioProps[2].value" :outlined="radioProps[3].value" :disabled="checkboxProps[1].value" - :interactive="checkboxProps[2].value"> + :ripple="checkboxProps[4].value"> Button +