✨ Dialog: slot for header and footer

Signed-off-by: Eduardo San Martin Morote <posva13@gmail.com>
posva · May 2, 2017 · 0d2ba6f · 0d2ba6f
1 parent 5dff77d
commit 0d2ba6f
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 10 deletions.
diff --git a/src/Dialog/Dialog.vue b/src/Dialog/Dialog.vue
@@ -7,23 +7,27 @@
          aria-describedby="mdc-dialog-with-list-description">
     <div class="mdc-dialog__surface" ref="surface">
       <header class="mdc-dialog__header">
-        <h2 id="mdc-dialog-with-list-label"
-            class="mdc-dialog__header__title">{{ title }}</h2>
+        <slot name="header">
+          <h2 id="mdc-dialog-with-list-label"
+              class="mdc-dialog__header__title">{{ title }}</h2>
+        </slot>
       </header>
       <section id="mdc-dialog-with-list-description"
                :class="bodyClasses"
                class="mdc-dialog__body">
         <slot></slot>
       </section>
       <footer class="mdc-dialog__footer">
-        <MdcButton class="mdc-dialog__footer__button mdc-dialog__footer__button--cancel"
-                   v-ripple
-                   v-if="cancelText"
-        >{{ cancelText }}</MdcButton>
-        <MdcButton class="mdc-dialog__footer__button mdc-dialog__footer__button--accept"
-                   v-ripple
-                   ref="accept"
-        >{{ acceptText || 'OK' }}</MdcButton>
+        <slot name="footer">
+          <MdcButton class="mdc-dialog__footer__button mdc-dialog__footer__button--cancel"
+                     v-ripple
+                     v-if="cancelText"
+          >{{ cancelText }}</MdcButton>
+          <MdcButton class="mdc-dialog__footer__button mdc-dialog__footer__button--accept"
+                     v-ripple
+                     ref="accept"
+          >{{ acceptText || 'OK' }}</MdcButton>
+        </slot>
       </footer>
     </div>
     <div class="mdc-dialog__backdrop"></div>

diff --git a/src/Dialog/DialogHeaderTitle.js b/src/Dialog/DialogHeaderTitle.js
@@ -0,0 +1,13 @@
+export default {
+  functional: true,
+
+  render (h, { data, children }) {
+    const staticClass = 'mdc-dialog__header__title'
+    data.staticClass = data.staticClass
+                     ? `${data.staticClass} ${staticClass}`
+                     : staticClass
+    return h('h2', {
+      ...data,
+    }, children)
+  },
+}
diff --git a/test/specs/Dialog.spec.js b/test/specs/Dialog.spec.js
@@ -1,4 +1,5 @@
 import Dialog from 'src/Dialog/Dialog'
+import DialogHeaderTitle from 'src/Dialog/DialogHeaderTitle'
 import {
   createVM,
   dataPropagationTest,
@@ -230,4 +231,19 @@ describe('Dialog', function () {
       }).then(done)
     })
   })
+
+  it('can override the header', function () {
+    const vm = createVM(this, function (h) {
+      return (
+        <div>
+          <Dialog ref='dialog'>
+            <DialogHeaderTitle slot='header'>Custom</DialogHeaderTitle>
+            Dialog content
+          </Dialog>
+          <button onClick={() => this.$refs.dialog.open()}>Open</button>
+        </div>
+      )
+    })
+    vm.$('.mdc-dialog__header__title').should.exist.and.have.text('Custom')
+  })
 })