Added EuiOverlayMask directly to EuiModal (#4480)

* added EuiOverlayMask directly * removed EuiOverlayMask * Fixing EuiMarkdownEditor usage * Cleaning up the docs and fixing mobile widths Co-authored-by: cchaos <[email protected]>
elastic · Feb 5, 2021 · 5e75993 · 5e75993
1 parent 9bcf6b4
commit 5e75993
Show file tree

Hide file tree

Showing 16 changed files with 480 additions and 439 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `EuiOverlayMask` directly to `EuiModal` ([#4480](https://github.com/elastic/eui/pull/4480))
+
 **Bug fixes**
 
 - Fixed invalid color entry passed to `EuiBadge` color prop ([#4481](https://github.com/elastic/eui/pull/4481))

diff --git a/src-docs/src/views/color_picker/containers.js b/src-docs/src/views/color_picker/containers.js
@@ -10,7 +10,6 @@ import {
   EuiModalBody,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiOverlayMask,
   EuiSpacer,
 } from '../../../../src/components';
 
@@ -63,19 +62,17 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiOverlayMask>
-        <EuiModal onClose={closeModal} style={{ width: '800px' }}>
-          <EuiModalHeader>
-            <EuiModalHeaderTitle>Color picker in a modal</EuiModalHeaderTitle>
-          </EuiModalHeader>
-
-          <EuiModalBody>
-            <EuiFormRow label="Color picker">{colorPicker}</EuiFormRow>
-            <EuiSpacer />
-            <EuiFormRow label="Color stops">{stops}</EuiFormRow>
-          </EuiModalBody>
-        </EuiModal>
-      </EuiOverlayMask>
+      <EuiModal onClose={closeModal} style={{ width: '800px' }}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Color picker in a modal</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          <EuiFormRow label="Color picker">{colorPicker}</EuiFormRow>
+          <EuiSpacer />
+          <EuiFormRow label="Color stops">{stops}</EuiFormRow>
+        </EuiModalBody>
+      </EuiModal>
     );
   }
 

diff --git a/src-docs/src/views/combo_box/containers.js b/src-docs/src/views/combo_box/containers.js
@@ -9,7 +9,6 @@ import {
   EuiModalBody,
   EuiModalHeader,
   EuiModalHeaderTitle,
-  EuiOverlayMask,
   EuiSpacer,
 } from '../../../../src/components';
 
@@ -122,15 +121,13 @@ export default () => {
 
   if (isModalVisible) {
     modal = (
-      <EuiOverlayMask>
-        <EuiModal onClose={closeModal} style={{ width: '800px' }}>
-          <EuiModalHeader>
-            <EuiModalHeaderTitle>Combo box in a modal</EuiModalHeaderTitle>
-          </EuiModalHeader>
-
-          <EuiModalBody>{comboBox}</EuiModalBody>
-        </EuiModal>
-      </EuiOverlayMask>
+      <EuiModal onClose={closeModal} style={{ width: '800px' }}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>Combo box in a modal</EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>{comboBox}</EuiModalBody>
+      </EuiModal>
     );
   }