@ons/design-system 48.0.1 → 48.0.2

package/components/modal/_macro.njk

@@ -5,19 +5,21 @@
         role="dialog"
         aria-labelledby="ons-modal-title"
         {% if params.attributes is defined and params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}
-    >
-        <h1 id="ons-modal-title" class="ons-modal__title">
-            {{ params.title }}
-        </h1>
-        <div class="ons-modal__body">
-            {{ (params.body if params else "") | safe }}{{ caller() if caller }}
+    >   
+        <div class="ons-modal__content">
+            <h1 id="ons-modal-title" class="ons-modal__title">
+                {{ params.title }}
+            </h1>
+            <div class="ons-modal__body">
+                {{ (params.body if params else "") | safe }}{{ caller() if caller }}
+            </div>
+            {% if params.btnText %}
+                {% from "components/button/_macro.njk" import onsButton %}
+                {{ onsButton({
+                    "text": params.btnText,
+                    "classes": "ons-js-modal-btn ons-u-mt-s"
+                }) }}
+            {% endif %}
         </div>
-        {% if params.btnText %}
-            {% from "components/button/_macro.njk" import onsButton %}
-            {{ onsButton({
-                "text": params.btnText,
-                "classes": "ons-js-modal-btn ons-u-mt-s"
-            }) }}
-        {% endif %}
     </dialog>
 {% endmacro %}

package/components/modal/_modal.scss

@@ -9,8 +9,20 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
   margin-right: 2rem;
   max-width: 500px;
   padding: 2rem;
+  position: relative;
   width: auto;
 
+  &-ie11 & {
+    background: $color-white;
+    bottom: 0;
+    height: 350px;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
   @media screen and (min-width: 600px) {
     margin-left: auto;
     margin-right: auto;
@@ -24,6 +36,11 @@ $backdrop-colour: rgba(0, 0, 0, 0.8);
 
   & + .backdrop {
     background: $backdrop-colour;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
   }
 }
 

package/components/modal/modal.js

@@ -1,6 +1,7 @@
 import dialogPolyfill from 'dialog-polyfill';
 
 const overLayClass = 'ons-modal-overlay';
+const ie11Class = 'ons-modal-ie11';
 
 export default class Modal {
   constructor(component) {
@@ -8,7 +9,7 @@ export default class Modal {
     this.launcher = document.querySelector(`[data-modal-id=${component.id}]`);
     this.closeButton = component.querySelector('.ons-js-modal-btn');
     this.lastFocusedEl = null;
-
+    this.dialogCSSSupported = true;
     this.initialise();
   }
 
@@ -33,6 +34,7 @@ export default class Modal {
     } else {
       try {
         dialogPolyfill.registerDialog(this.component);
+        this.dialogCSSSupported = false;
         return true;
       } catch (error) {
         /* istanbul ignore next */
@@ -44,9 +46,15 @@ export default class Modal {
   openDialog(event) {
     if (!this.isDialogOpen()) {
       this.component.classList.add('ons-u-db');
-      document.querySelector('body').className += ' ' + overLayClass;
+      document.querySelector('body').classList.add(overLayClass);
+
+      if (!this.dialogCSSSupported) {
+        document.querySelector('body').classList.add(ie11Class);
+      }
+
       this.makePageContentInert();
       this.saveLastFocusedEl();
+
       if (event) {
         const modal = document.getElementById(event.target.getAttribute('data-modal-id'));
         modal.showModal();
@@ -96,6 +104,11 @@ export default class Modal {
       }
       this.component.classList.remove('ons-u-db');
       document.querySelector('body').classList.remove(overLayClass);
+
+      if (!this.dialogCSSSupported) {
+        document.querySelector('body').classList.remove(ie11Class);
+      }
+
       this.component.close();
       this.setFocusOnLastFocusedEl(this.lastFocusedEl);
       this.removeInertFromPageContent();