diff --git a/styleguide/src/system/components/layout/Modal/Modal.vue b/styleguide/src/system/components/layout/Modal/Modal.vue
index f85c3f986..5aa00cde4 100644
--- a/styleguide/src/system/components/layout/Modal/Modal.vue
+++ b/styleguide/src/system/components/layout/Modal/Modal.vue
@@ -15,6 +15,7 @@
{
- if (this.isOpen && this.allowAbort && e.keyCode === 27) {
+ if (this.isOpen && !this.force && e.keyCode === 27) {
this.cancel('backdrop')
}
})
diff --git a/styleguide/src/system/components/layout/Modal/demo.md b/styleguide/src/system/components/layout/Modal/demo.md
index 68129b2f9..50f9481e2 100644
--- a/styleguide/src/system/components/layout/Modal/demo.md
+++ b/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"
>
diff --git a/styleguide/src/system/components/layout/Modal/style.scss b/styleguide/src/system/components/layout/Modal/style.scss
index 1c2ab66ec..8c40dd5fd 100644
--- a/styleguide/src/system/components/layout/Modal/style.scss
+++ b/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 {