Improved Modal

styleguide/src/system/components/layout/Modal/Modal.vue

@@ -15,6 +15,7 @@
         <div
           v-if="isOpen"
           class="ds-modal"
+          :class="[extended && 'ds-modal-extended']"
           tableindex="-1"
           role="dialog"
           ref="modal"
@@ -30,7 +31,7 @@
                   {{ title }}
                 </ds-heading>
                 <ds-button
-                  v-if="allowAbort"
+                  v-if="!force"
                   class="ds-modal-close"
                   ghost
                   size="small"
@@ -95,12 +96,19 @@ export default {
       type: Boolean,
       default: false
     },
+    /**
+     * Force user input by disabeling the ESC key, close button and click on the backdrop
+     */
+    force: {
+      type: Boolean,
+      default: false
+    },
     /**
      * Allow closing without choosing action by ESC key, close button or click on the backdrop
      */
-    allowAbort: {
+    extended: {
       type: Boolean,
-      default: true
+      default: false
     },
     /**
      * Cancel button label
@@ -156,7 +164,7 @@ export default {
       this.$emit('close', type)
     },
     backdropHandler () {
-      if (this.allowAbort) {
+      if (!this.force) {
         this.cancel('backdrop')
       }
     }
@@ -170,7 +178,7 @@ export default {
   },
   mounted() {
     const keydownListener = document.addEventListener('keydown', e => {
-      if (this.isOpen && this.allowAbort && e.keyCode === 27) {
+      if (this.isOpen && !this.force && e.keyCode === 27) {
         this.cancel('backdrop')
       }
     })

styleguide/src/system/components/layout/Modal/demo.md

@@ -40,7 +40,8 @@ Customize button labels
       v-if="isOpen"
       v-model="isOpen"
       title="Custom Button Labels" 
-      :allow-abort="false"
+      force
+      extended
       confirm-label="All right"
       cancel-label="Please not"
     >

styleguide/src/system/components/layout/Modal/style.scss

@@ -12,7 +12,7 @@
   transform: translate3d(-50%, -50%, 0);
   display: flex;
   flex-direction: column;
-  max-width: 600px;
+  max-width: 400px;
   width: calc(90vw - 40px);
   max-height: 90vh;
   background: white;
@@ -20,6 +20,9 @@
   padding: 0 $space-base;
   box-shadow: $box-shadow-x-large;
 }
+.ds-modal-extended {
+  max-width: 600px;
+}
 .ds-modal-close {
   position: absolute;
   top: $space-small;
@@ -29,7 +32,7 @@
   flex: 1;
   overflow-y: auto;
   height: auto;
-  min-height: 100px;
+  min-height: 70px;
   max-height: 60vh;
 }
 .ds-modal-header {