From 46ac43a1c12294835500ec5dbc6cc41f637bebd2 Mon Sep 17 00:00:00 2001 From: Sebastien Tasson <sebastien.tasson@gmail.com> Date: Sun, 29 Oct 2017 19:38:07 +0000 Subject: [PATCH] fix(dialog): footer ripple missing --- components/dialog/mdc-dialog.vue | 22 +++++++++++++++------- components/dialog/test.spec.js | 8 +++++++- 2 files changed, 22 insertions(+), 8 deletions(-) diff --git a/components/dialog/mdc-dialog.vue b/components/dialog/mdc-dialog.vue index f00c9fb0..05ea92b0 100644 --- a/components/dialog/mdc-dialog.vue +++ b/components/dialog/mdc-dialog.vue @@ -15,14 +15,14 @@ <slot /> </section> <footer class="mdc-dialog__footer"> - <button ref="cancel" type="button" v-if="cancel" - class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--cancel"> + <mdcButton ref="cancel" v-if="cancel" + class="mdc-dialog__footer__button mdc-dialog__footer__button--cancel"> {{ cancel }} - </button> - <button ref="accept" type="button" - class="mdc-button mdc-dialog__footer__button mdc-dialog__footer__button--accept"> + </mdcButton> + <mdcButton ref="accept" + class="mdc-dialog__footer__button mdc-dialog__footer__button--accept"> {{ accept }} - </button> + </mdcButton> </footer> </div> <div class="mdc-dialog__backdrop"></div> @@ -32,6 +32,7 @@ <script> import MDCDialogFoundation from '@material/dialog/foundation' import { createFocusTrapInstance } from '@material/dialog/util' +import {VueMDCButton} from '../button' export default { name: 'mdc-dialog', @@ -42,6 +43,9 @@ export default { 'scrollable': Boolean, 'dark': Boolean }, + components: { + mdcButton : VueMDCButton + }, data () { return { classes: { @@ -85,7 +89,11 @@ export default { notifyCancel: () => this.$emit('cancel'), trapFocusOnSurface: () => this.focusTrap.activate(), untrapFocusOnSurface: () => this.focusTrap.deactivate(), - isDialog: (el) => (this.$refs.surface === el) + isDialog: (el) => (this.$refs.surface === el), + layoutFooterRipples: () => { + this.$refs.accept.ripple.layout() + this.cancel && this.$refs.cancel.ripple.layout() + } }) this.foundation.init() diff --git a/components/dialog/test.spec.js b/components/dialog/test.spec.js index bfe5c1ab..63315928 100644 --- a/components/dialog/test.spec.js +++ b/components/dialog/test.spec.js @@ -1,4 +1,10 @@ import { pluginSanityCheck } from '../test-utils' import * as plugin from './index.js'; -pluginSanityCheck(__dirname, plugin) +pluginSanityCheck(__dirname, plugin, { + VueMDCDialog : { + propsData: { + title: 'title' + } + } +})