From 9efedf2937ea9d91aac9b8c80584f9454872c24d Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Fri, 18 Nov 2022 22:55:29 +0000
Subject: [PATCH] [Emotion] Convert `EuiModal` (#6321)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [Emotion] Convert `modal`

* Fix weird bug in Chrome with parent `overflow: hidden` and children with `image-mask`

* Better styles and fixed `euiOverflowShadowStyles`

* Adding CL

* Added `euiAnimSlideInUp`

* Removing unnecessary class name

* REVERT ME - To test bug with `mask-image`

* Added `shouldRenderCustomStyles()` tests

* Cleaned up docs code and converted to TS

* Adding bug fix in CL

* CL again

* CL again 😭

* Changing examples source types to TSX

* Reverting example and renaming to `*.tsx`

* Remove bug fix entry from CL

* DRY out `initialFocus` types/prop docs + add `defaultFocusedButton` prop docs

* [EuiModalHeader] misc cleanup

* Clean up unnecessary width CSS

* Simplify `style` logic + switch to logical property

* [opinionated] Rename `defaultMaxWidth` class modifier

- to match `defaultMinWidth` modifier, used in EuiButtonDisplay (#6373)

* Fix `maxWidth` conditional class logic + write unit tests

* Use `inset` shorthand

* [EuiModal] Fix box-shadows

* Restore `!important`s required for style.width overrides

Co-authored-by: Constance Chen <constance.chen.3@gmail.com>
---
 .../{confirm_modal.js => confirm_modal.tsx}   |   2 +-
 ...l_loading.js => confirm_modal_loading.tsx} |   8 +-
 .../src/views/modal/{modal.js => modal.tsx}   |   0
 src-docs/src/views/modal/modal_example.js     |  10 +-
 .../modal/{modal_form.js => modal_form.tsx}   |  20 +--
 .../modal/{modal_width.js => modal_width.tsx} |   4 +-
 .../image/image_fullscreen_wrapper.styles.ts  |  17 +-
 src/components/index.scss                     |   1 -
 .../__snapshots__/confirm_modal.test.tsx.snap |  40 ++---
 .../modal/__snapshots__/modal.test.tsx.snap   |   4 +-
 .../__snapshots__/modal_body.test.tsx.snap    |   6 +-
 .../__snapshots__/modal_footer.test.tsx.snap  |   4 +-
 .../__snapshots__/modal_header.test.tsx.snap  |   4 +-
 .../modal_header_title.test.tsx.snap          |  12 +-
 src/components/modal/_index.scss              |   1 -
 src/components/modal/_modal.scss              | 156 ------------------
 src/components/modal/confirm_modal.test.tsx   |   5 +
 src/components/modal/confirm_modal.tsx        |  18 +-
 src/components/modal/modal.styles.ts          |  81 +++++++++
 src/components/modal/modal.test.tsx           |  59 ++++++-
 src/components/modal/modal.tsx                |  30 ++--
 src/components/modal/modal_body.styles.ts     |  39 +++++
 src/components/modal/modal_body.test.tsx      |  11 +-
 src/components/modal/modal_body.tsx           |  15 +-
 src/components/modal/modal_footer.styles.ts   |  39 +++++
 src/components/modal/modal_footer.test.tsx    |  15 +-
 src/components/modal/modal_footer.tsx         |  10 +-
 src/components/modal/modal_header.styles.ts   |  31 ++++
 src/components/modal/modal_header.test.tsx    |  15 +-
 src/components/modal/modal_header.tsx         |  10 +-
 .../modal/modal_header_title.test.tsx         |  15 +-
 src/components/modal/modal_header_title.tsx   |   7 +-
 src/global_styling/utility/animations.ts      |  12 ++
 src/themes/amsterdam/overrides/_index.scss    |   1 -
 src/themes/amsterdam/overrides/_modal.scss    |   3 -
 upcoming_changelogs/6321.md                   |   3 +
 36 files changed, 433 insertions(+), 275 deletions(-)
 rename src-docs/src/views/modal/{confirm_modal.js => confirm_modal.tsx} (98%)
 rename src-docs/src/views/modal/{confirm_modal_loading.js => confirm_modal_loading.tsx} (94%)
 rename src-docs/src/views/modal/{modal.js => modal.tsx} (100%)
 rename src-docs/src/views/modal/{modal_form.js => modal_form.tsx} (91%)
 rename src-docs/src/views/modal/{modal_width.js => modal_width.tsx} (93%)
 delete mode 100644 src/components/modal/_index.scss
 delete mode 100644 src/components/modal/_modal.scss
 create mode 100644 src/components/modal/modal.styles.ts
 create mode 100644 src/components/modal/modal_body.styles.ts
 create mode 100644 src/components/modal/modal_footer.styles.ts
 create mode 100644 src/components/modal/modal_header.styles.ts
 delete mode 100644 src/themes/amsterdam/overrides/_modal.scss
 create mode 100644 upcoming_changelogs/6321.md

diff --git a/src-docs/src/views/modal/confirm_modal.js b/src-docs/src/views/modal/confirm_modal.tsx
similarity index 98%
rename from src-docs/src/views/modal/confirm_modal.js
rename to src-docs/src/views/modal/confirm_modal.tsx
index 8a4ea147576..b79539692f9 100644
--- a/src-docs/src/views/modal/confirm_modal.js
+++ b/src-docs/src/views/modal/confirm_modal.tsx
@@ -5,7 +5,7 @@ import {
   EuiConfirmModal,
   EuiFlexGroup,
   EuiFlexItem,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
diff --git a/src-docs/src/views/modal/confirm_modal_loading.js b/src-docs/src/views/modal/confirm_modal_loading.tsx
similarity index 94%
rename from src-docs/src/views/modal/confirm_modal_loading.js
rename to src-docs/src/views/modal/confirm_modal_loading.tsx
index 7cfc0558271..4a1fd1b1573 100644
--- a/src-docs/src/views/modal/confirm_modal_loading.js
+++ b/src-docs/src/views/modal/confirm_modal_loading.tsx
@@ -5,16 +5,18 @@ import {
   EuiConfirmModal,
   EuiFormRow,
   EuiFieldText,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [isLoading, setIsLoading] = useState(false);
-  clearTimeout(searchTimeout);
+
   const searchTimeout = setTimeout(() => {
     // Simulate a remotely-executed search.
     setIsLoading(false);
   }, 1200);
 
+  clearTimeout(searchTimeout);
+
   const [isModalVisible, setIsModalVisible] = useState(false);
   const showModal = () => {
     setIsModalVisible(true);
@@ -27,7 +29,7 @@ export default () => {
   };
 
   const [value, setValue] = useState('');
-  const onChange = (e) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
 
diff --git a/src-docs/src/views/modal/modal.js b/src-docs/src/views/modal/modal.tsx
similarity index 100%
rename from src-docs/src/views/modal/modal.js
rename to src-docs/src/views/modal/modal.tsx
diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js
index 458fc0216f8..a7b648a5428 100644
--- a/src-docs/src/views/modal/modal_example.js
+++ b/src-docs/src/views/modal/modal_example.js
@@ -131,7 +131,7 @@ export const ModalExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: modalSource,
         },
       ],
@@ -167,7 +167,7 @@ export const ModalExample = {
       title: 'Forms in a modal',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: modalFormSource,
         },
       ],
@@ -192,7 +192,7 @@ export const ModalExample = {
       title: 'Confirm modal',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: confirmModalSource,
         },
       ],
@@ -214,7 +214,7 @@ export const ModalExample = {
       title: 'Loading and disabling confirm button',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: confirmModalLoadingSource,
         },
       ],
@@ -236,7 +236,7 @@ export const ModalExample = {
       title: 'Widths',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: modalWidthSource,
         },
       ],
diff --git a/src-docs/src/views/modal/modal_form.js b/src-docs/src/views/modal/modal_form.tsx
similarity index 91%
rename from src-docs/src/views/modal/modal_form.js
rename to src-docs/src/views/modal/modal_form.tsx
index 70ef6c67ccb..a9b138235c8 100644
--- a/src-docs/src/views/modal/modal_form.js
+++ b/src-docs/src/views/modal/modal_form.tsx
@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState } from 'react';
 
 import {
   EuiButton,
@@ -15,7 +15,7 @@ import {
   EuiSwitch,
   EuiSuperSelect,
   EuiText,
-} from '../../../../src/components';
+} from '../../../../src';
 
 import { useGeneratedHtmlId } from '../../../../src/services';
 
@@ -39,36 +39,36 @@ export default () => {
       value: 'option_one',
       inputDisplay: 'Option one',
       dropdownDisplay: (
-        <Fragment>
+        <>
           <strong>Option one</strong>
           <EuiText size="s" color="subdued">
             <p>Has a short description giving more detail to the option.</p>
           </EuiText>
-        </Fragment>
+        </>
       ),
     },
     {
       value: 'option_two',
       inputDisplay: 'Option two',
       dropdownDisplay: (
-        <Fragment>
+        <>
           <strong>Option two</strong>
           <EuiText size="s" color="subdued">
             <p>Has a short description giving more detail to the option.</p>
           </EuiText>
-        </Fragment>
+        </>
       ),
     },
     {
       value: 'option_three',
       inputDisplay: 'Option three',
       dropdownDisplay: (
-        <Fragment>
+        <>
           <strong>Option three</strong>
           <EuiText size="s" color="subdued">
             <p>Has a short description giving more detail to the option.</p>
           </EuiText>
-        </Fragment>
+        </>
       ),
     },
   ];
@@ -90,7 +90,7 @@ export default () => {
       </EuiFormRow>
 
       <EuiFormRow label="Range" helpText="Some help text for the range">
-        <EuiRange min={0} max={100} name="poprange" />
+        <EuiRange min={0} max={100} value={50} name="poprange" />
       </EuiFormRow>
 
       <EuiFormRow label="An EuiSuperSelect">
@@ -105,7 +105,7 @@ export default () => {
     </EuiForm>
   );
 
-  const onSuperSelectChange = (value) => {
+  const onSuperSelectChange = (value: string) => {
     setSuperSelectValue(value);
   };
 
diff --git a/src-docs/src/views/modal/modal_width.js b/src-docs/src/views/modal/modal_width.tsx
similarity index 93%
rename from src-docs/src/views/modal/modal_width.js
rename to src-docs/src/views/modal/modal_width.tsx
index 1a92c52c19c..4ba180ea71f 100644
--- a/src-docs/src/views/modal/modal_width.js
+++ b/src-docs/src/views/modal/modal_width.tsx
@@ -8,8 +8,8 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiCodeBlock,
-} from '../../../../src/components';
-import { EuiSpacer } from '../../../../src/components/spacer';
+  EuiSpacer,
+} from '../../../../src';
 
 export default () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
diff --git a/src/components/image/image_fullscreen_wrapper.styles.ts b/src/components/image/image_fullscreen_wrapper.styles.ts
index 9230791dbd1..698d662aa7e 100644
--- a/src/components/image/image_fullscreen_wrapper.styles.ts
+++ b/src/components/image/image_fullscreen_wrapper.styles.ts
@@ -6,11 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { css, keyframes } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
   logicalCSS,
   logicalTextAlignCSS,
   euiCanAnimate,
+  euiAnimSlideInUp,
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
@@ -28,7 +29,7 @@ export const euiImageFullscreenWrapperStyles = (
       line-height: 0; // Fixes cropping when image is resized by forcing its height to be determined by the image not line-height
 
       ${euiCanAnimate} {
-        animation: ${euiImageFullScreen(euiTheme.size.xxxxl)}
+        animation: ${euiAnimSlideInUp(euiTheme.size.xxxxl)}
           ${euiTheme.animation.extraSlow} ${euiTheme.animation.bounce};
       }
 
@@ -42,15 +43,3 @@ export const euiImageFullscreenWrapperStyles = (
     `,
   };
 };
-
-const euiImageFullScreen = (size: string) => keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(${size});
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
diff --git a/src/components/index.scss b/src/components/index.scss
index 12530e2af31..12c8908501b 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -17,7 +17,6 @@
 @import 'header/index';
 @import 'key_pad_menu/index';
 @import 'markdown_editor/index';
-@import 'modal/index';
 @import 'notification/index';
 @import 'panel/index';
 @import 'page/index'; // Page needs to come after Panel for cascade specificity
diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 4bfb83a1d64..ab79a4d4291 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -12,13 +12,13 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
+      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation"
       data-test-subj="test subject string"
       tabindex="0"
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles"
+        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
         type="button"
       >
         <span
@@ -29,22 +29,20 @@ Array [
         />
       </button>
       <div
-        class="euiModalHeader"
+        class="euiModalHeader emotion-euiModalHeader"
       >
-        <div
-          class="euiModalHeader__title"
+        <h1
+          class="euiTitle euiModalHeader__title emotion-euiTitle-m"
           data-test-subj="confirmModalTitleText"
         >
-          <h1>
-            A confirmation modal
-          </h1>
-        </div>
+          A confirmation modal
+        </h1>
       </div>
       <div
-        class="euiModalBody"
+        class="euiModalBody emotion-euiModalBody"
       >
         <div
-          class="euiModalBody__overflow"
+          class="euiModalBody__overflow emotion-euiModalBody__overflow"
         >
           <div
             class="euiText emotion-euiText-m"
@@ -57,7 +55,7 @@ Array [
         </div>
       </div>
       <div
-        class="euiModalFooter"
+        class="euiModalFooter emotion-euiModalFooter"
       >
         <button
           class="euiButtonEmpty css-9t7nyf-empty-primary"
@@ -112,13 +110,13 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
+      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation"
       data-test-subj="test subject string"
       tabindex="0"
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles"
+        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
         type="button"
       >
         <span
@@ -129,19 +127,17 @@ Array [
         />
       </button>
       <div
-        class="euiModalHeader"
+        class="euiModalHeader emotion-euiModalHeader"
       >
-        <div
-          class="euiModalHeader__title"
+        <h1
+          class="euiTitle euiModalHeader__title emotion-euiTitle-m"
           data-test-subj="confirmModalTitleText"
         >
-          <h1>
-            A confirmation modal
-          </h1>
-        </div>
+          A confirmation modal
+        </h1>
       </div>
       <div
-        class="euiModalFooter"
+        class="euiModalFooter emotion-euiModalFooter"
       >
         <button
           class="euiButtonEmpty css-9t7nyf-empty-primary"
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index 3769c2c754d..c992006b697 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -18,13 +18,13 @@ exports[`EuiModal renders 1`] = `
     >
       <div
         aria-label="aria-label"
-        class="euiModal euiModal--maxWidth-default testClass1 testClass2"
+        class="euiModal testClass1 testClass2 emotion-euiModal-defaultMaxWidth"
         data-test-subj="test subject string"
         tabindex="0"
       >
         <button
           aria-label="Closes this modal window"
-          class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
           type="button"
         >
           <span
diff --git a/src/components/modal/__snapshots__/modal_body.test.tsx.snap b/src/components/modal/__snapshots__/modal_body.test.tsx.snap
index 371fd024ef8..f73231daf79 100644
--- a/src/components/modal/__snapshots__/modal_body.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_body.test.tsx.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalBody 1`] = `
+exports[`EuiModalBody is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiModalBody testClass1 testClass2"
+  class="euiModalBody testClass1 testClass2 emotion-euiModalBody"
   data-test-subj="test subject string"
 >
   <div
-    class="euiModalBody__overflow"
+    class="euiModalBody__overflow emotion-euiModalBody__overflow"
   >
     children
   </div>
diff --git a/src/components/modal/__snapshots__/modal_footer.test.tsx.snap b/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
index 97a131ac01a..db28b9cc812 100644
--- a/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalFooter 1`] = `
+exports[`EuiModalFooter is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiModalFooter testClass1 testClass2"
+  class="euiModalFooter testClass1 testClass2 emotion-euiModalFooter"
   data-test-subj="test subject string"
 >
   children
diff --git a/src/components/modal/__snapshots__/modal_header.test.tsx.snap b/src/components/modal/__snapshots__/modal_header.test.tsx.snap
index b656c263416..984b9cb20d5 100644
--- a/src/components/modal/__snapshots__/modal_header.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_header.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalHeader 1`] = `
+exports[`EuiModalHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiModalHeader testClass1 testClass2"
+  class="euiModalHeader testClass1 testClass2 emotion-euiModalHeader"
   data-test-subj="test subject string"
 >
   children
diff --git a/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap b/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap
index 09c6eaab241..e2e140b8fd7 100644
--- a/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap
@@ -1,13 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalHeaderTitle 1`] = `
-<div
+exports[`EuiModalHeaderTitle is rendered 1`] = `
+<h1
   aria-label="aria-label"
-  class="euiModalHeader__title testClass1 testClass2"
+  class="euiTitle euiModalHeader__title testClass1 testClass2 emotion-euiTitle-m"
   data-test-subj="test subject string"
 >
-  <h1>
-    children
-  </h1>
-</div>
+  children
+</h1>
 `;
diff --git a/src/components/modal/_index.scss b/src/components/modal/_index.scss
deleted file mode 100644
index 0da80648382..00000000000
--- a/src/components/modal/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'modal';
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
deleted file mode 100644
index 60380ea4543..00000000000
--- a/src/components/modal/_modal.scss
+++ /dev/null
@@ -1,156 +0,0 @@
-.euiModal {
-  border: $euiBorderThin;
-  // This mixin overwrites some of the border above
-  @include euiBottomShadowLarge; // sass-lint:disable-line mixins-before-declarations
-  display: flex;
-  flex-direction: column;
-  max-height: 75vh; // We overflow the modal body based off this
-
-  // TODO: Consider restoring this once https://bugs.chromium.org/p/chromium/issues/detail?id=1229700 is resolved
-  // overflow: hidden; Ensure long, non-breaking text doesn't expand beyond the modal bounds
-
-  position: relative;
-  background-color: $euiColorEmptyShade;
-  border-radius: $euiBorderRadius;
-  z-index: $euiZModal;
-  min-width: $euiFormMaxWidth;
-  animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce;
-  max-width: calc(100vw - #{$euiSize});
-
-  // Remove the outline from the focusable container
-  &:focus {
-    outline: none;
-  }
-}
-
-.euiModal--maxWidth-default {
-  // Sass and CSS's versions of `min` collide here, so we use all uppercase to ensure the CSS version is used
-  // https://css-tricks.com/when-sass-and-new-css-features-collide/#the-solution
-  // sass-lint:disable-block function-name-format
-  max-width: MIN(#{map-get($euiBreakpoints, 'm')}, calc(100vw - #{$euiSize}));
-}
-
-.euiModal--confirmation {
-  min-width: $euiFormMaxWidth;
-}
-
-.euiModalHeader {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: $euiSizeL $euiSizeXXL $euiSize $euiSizeL;
-  flex-grow: 0;
-  flex-shrink: 0;
-}
-
-.euiModalHeader__title {
-  @include euiTitle('m');
-}
-
-.euiModalBody {
-  flex-grow: 1;
-  overflow: hidden;
-  // The below fixes scroll on Chrome and Safari
-  display: flex;
-  flex-direction: column;
-
-  .euiModalBody__overflow {
-    @include euiYScrollWithShadows;
-    padding: $euiSizeS $euiSizeL;
-  }
-}
-
-.euiModalFooter {
-  display: flex;
-  justify-content: flex-end;
-  padding: $euiSize $euiSizeL $euiSizeL;
-  flex-grow: 0;
-  flex-shrink: 0; // ensure the height of the footer is based off its contents and doesn't squish
-
-  > * + * {
-    margin-left: $euiSize;
-  }
-}
-
-// If a body doesn't exist, remove some extra padding from footer
-.euiModalHeader + .euiModalFooter {
-  padding-top: $euiSizeS;
-}
-
-// If a footer doesn't exist (body is the last element) add padding to the bottom
-.euiModalBody:last-of-type .euiModalBody__overflow {
-  padding-bottom: $euiSizeL;
-}
-
-
-// The actual size of the X button in pixels is a bit fuzzy because of all the
-// button padding so there is some pixel pushing here.
-.euiModal__closeIcon {
-  background-color: transparentize($euiColorEmptyShade, .1);
-  position: absolute;
-  right: $euiSizeXS;
-  top: $euiSizeXS;
-  z-index: 3;
-}
-
-@keyframes euiModal {
-  0% {
-    opacity: 0;
-    transform: translateY($euiSizeXL);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-// On mobile we fix modals as a takeover.
-@include euiBreakpoint('xs', 's') {
-  .euiModal {
-    // sass-lint:disable-block no-important
-    position: fixed;
-    width: 100vw !important;
-    max-width: none !important;
-    min-width: 0 !important;
-    max-height: 100vh;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    top: 0;
-    border-radius: 0;
-    border: none;
-
-    &.euiModal--confirmation {
-      @include euiBottomShadowLarge($reverse: true);
-      top: auto;
-    }
-  }
-
-  .euiModalHeader {
-    width: 100%;
-  }
-
-  .euiModalFooter {
-    width: 100%;
-    background: $euiColorLightestShade;
-    padding: $euiSizeM $euiSizeL !important; // sass-lint:disable-line no-important
-    justify-content: stretch;
-
-    > * {
-      flex: 1;
-
-      + * {
-        margin-left: 0;
-      }
-    }
-  }
-
-  .euiModalBody {
-    width: 100%;
-
-    .euiModalBody__overflow {
-      padding-bottom: $euiSizeL;
-    }
-  }
-}
diff --git a/src/components/modal/confirm_modal.test.tsx b/src/components/modal/confirm_modal.test.tsx
index 680a1642847..9f420725d61 100644
--- a/src/components/modal/confirm_modal.test.tsx
+++ b/src/components/modal/confirm_modal.test.tsx
@@ -15,6 +15,7 @@ import {
   takeMountedSnapshot,
 } from '../../test';
 import { keys } from '../../services';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import {
   CANCEL_BUTTON,
@@ -31,6 +32,10 @@ beforeEach(() => {
 });
 
 describe('EuiConfirmModal', () => {
+  shouldRenderCustomStyles(
+    <EuiConfirmModal onCancel={() => {}}>children</EuiConfirmModal>
+  );
+
   test('renders EuiConfirmModal', () => {
     const component = mount(
       <EuiConfirmModal
diff --git a/src/components/modal/confirm_modal.tsx b/src/components/modal/confirm_modal.tsx
index 419b91c8c73..bfca07a31cf 100644
--- a/src/components/modal/confirm_modal.tsx
+++ b/src/components/modal/confirm_modal.tsx
@@ -20,15 +20,15 @@ import { EuiModalHeader } from './modal_header';
 import { EuiModalHeaderTitle } from './modal_header_title';
 import { EuiModalBody } from './modal_body';
 
+import { useEuiTheme } from '../../services';
+import { euiModalStyles } from './modal.styles';
+
 import { EuiButtonColor, EuiButton, EuiButtonEmpty } from '../button';
 
 import { EuiText } from '../text';
 
 export interface EuiConfirmModalProps
-  extends Omit<
-    EuiModalProps,
-    'children' | 'initialFocus' | 'onClose' | 'title'
-  > {
+  extends Omit<EuiModalProps, 'children' | 'onClose' | 'title'> {
   /**
    * ReactNode to render as this component's content
    */
@@ -44,6 +44,10 @@ export interface EuiConfirmModalProps
   onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   confirmButtonDisabled?: boolean;
   className?: string;
+  /**
+   * Allows focusing either the confirm or cancel button on modal initialization.
+   * Will take precedence over `initialFocus`, if `initialFocus` is passed.
+   */
   defaultFocusedButton?: typeof CONFIRM_BUTTON | typeof CANCEL_BUTTON;
   buttonColor?: EuiButtonColor;
   // For docs only, will get passed with ...rest
@@ -105,6 +109,10 @@ export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = ({
 
   const classes = classnames('euiModal--confirmation', className);
 
+  const euiTheme = useEuiTheme();
+  const styles = euiModalStyles(euiTheme);
+  const cssStyles = [styles.confirmation];
+
   let modalTitle;
 
   if (title) {
@@ -126,7 +134,7 @@ export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = ({
   }
 
   return (
-    <EuiModal className={classes} onClose={onCancel} {...rest}>
+    <EuiModal className={classes} css={cssStyles} onClose={onCancel} {...rest}>
       {modalTitle}
 
       {message && (
diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
new file mode 100644
index 00000000000..d7ac17fda5c
--- /dev/null
+++ b/src/components/modal/modal.styles.ts
@@ -0,0 +1,81 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
+import {
+  euiCanAnimate,
+  euiBreakpoint,
+  euiAnimSlideInUp,
+} from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+import { euiFormVariables } from '../form/form.styles';
+
+export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiModal: css`
+      ${euiShadowXLarge(euiThemeContext)}
+      display: flex;
+      flex-direction: column;
+      max-block-size: 75vh; // We overflow the modal body based off this
+      position: relative;
+      background-color: ${euiTheme.colors.emptyShade};
+      border-radius: ${euiTheme.border.radius.medium};
+      z-index: ${euiTheme.levels.modal};
+      min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth};
+      max-inline-size: calc(100vw - ${euiTheme.size.base});
+      // TODO: Consider restoring this once https://bugs.chromium.org/p/chromium/issues/detail?id=1229700 is resolved
+      // overflow: hidden; Ensure long, non-breaking text doesn't expand beyond the modal bounds
+
+      ${euiCanAnimate} {
+        animation: ${euiAnimSlideInUp(euiTheme.size.xxl)}
+          ${euiTheme.animation.slow} ${euiTheme.animation.bounce};
+      }
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        position: fixed;
+        inset: 0;
+        border-radius: 0;
+        // The below importants are required to override any
+        // inline width/heights that consumers set via {style}
+        inline-size: 100vw !important;
+        min-inline-size: 0 !important;
+        max-inline-size: none !important;
+        max-block-size: 100vh !important;
+      }
+
+      // Remove the outline from the focusable container
+      &:focus {
+        outline: none;
+      }
+    `,
+    // Variants
+    defaultMaxWidth: css`
+      max-inline-size: min(
+        ${euiTheme.breakpoint.m}px,
+        calc(100vw - ${euiTheme.size.base})
+      );
+    `,
+    confirmation: css`
+      min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth};
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        ${euiShadowXLarge(euiThemeContext, { reverse: true })}
+        inset-block-start: auto;
+      }
+    `,
+    euiModal__closeIcon: css`
+      position: absolute;
+      inset-inline-end: ${euiTheme.size.xs};
+      inset-block-start: ${euiTheme.size.xs};
+      z-index: 3;
+    `,
+  };
+};
diff --git a/src/components/modal/modal.test.tsx b/src/components/modal/modal.test.tsx
index 01505752296..d2843fdef27 100644
--- a/src/components/modal/modal.test.tsx
+++ b/src/components/modal/modal.test.tsx
@@ -7,12 +7,15 @@
  */
 
 import React from 'react';
-import { render } from '../../test/rtl';
+import { render, screen } from '../../test/rtl';
 import { requiredProps } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiModal } from './modal';
 
 describe('EuiModal', () => {
+  shouldRenderCustomStyles(<EuiModal onClose={() => {}}>children</EuiModal>);
+
   it('renders', () => {
     const { baseElement } = render(
       <EuiModal onClose={() => {}} {...requiredProps}>
@@ -23,4 +26,58 @@ describe('EuiModal', () => {
     // NOTE: Using baseElement instead of container is required for components that use portals
     expect(baseElement).toMatchSnapshot();
   });
+
+  describe('maxWidth', () => {
+    it('true/undefined should apply the `defaultMaxWidth` class and no inline style', () => {
+      render(
+        <>
+          <EuiModal onClose={() => {}} data-test-subj="A" maxWidth={true}>
+            children
+          </EuiModal>
+          <EuiModal onClose={() => {}} data-test-subj="B">
+            children
+          </EuiModal>
+        </>
+      );
+      const modalA = screen.queryByTestSubject('A')!;
+      const modalB = screen.queryByTestSubject('B')!;
+
+      expect(modalA.className).toContain('defaultMaxWidth');
+      expect(modalB.className).toContain('defaultMaxWidth');
+      expect(modalA.getAttribute('style')).toBeNull();
+      expect(modalB.getAttribute('style')).toBeNull();
+    });
+
+    test('false should not apply either the `defaultMaxWidth` class or an inline style', () => {
+      render(
+        <EuiModal onClose={() => {}} data-test-subj="A" maxWidth={false}>
+          children
+        </EuiModal>
+      );
+      const modal = screen.queryByTestSubject('A')!;
+
+      expect(modal.className).not.toContain('defaultMaxWidth');
+      expect(modal.getAttribute('style')).toBeNull();
+    });
+
+    test('custom max width should not apply the `defaultMaxWidth` but should apply an inline style', () => {
+      render(
+        <>
+          <EuiModal onClose={() => {}} data-test-subj="A" maxWidth={300}>
+            children
+          </EuiModal>
+          <EuiModal onClose={() => {}} data-test-subj="B" maxWidth="50%">
+            children
+          </EuiModal>
+        </>
+      );
+      const modalA = screen.queryByTestSubject('A')!;
+      const modalB = screen.queryByTestSubject('B')!;
+
+      expect(modalA.className).not.toContain('defaultMaxWidth');
+      expect(modalB.className).not.toContain('defaultMaxWidth');
+      expect(modalA.getAttribute('style')).toEqual('max-inline-size: 300px;');
+      expect(modalB.getAttribute('style')).toEqual('max-inline-size: 50%;');
+    });
+  });
 });
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 231f0de0b3d..18090f91a08 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 
-import { keys } from '../../services';
+import { keys, useEuiTheme } from '../../services';
 
 import { EuiButtonIcon } from '../button';
 
@@ -17,6 +17,8 @@ import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
 import { EuiI18n } from '../i18n';
 
+import { euiModalStyles } from './modal.styles';
+
 export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
   className?: string;
   /**
@@ -60,25 +62,32 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
     }
   };
 
-  let newStyle;
-  let widthClassName;
-  if (maxWidth === true) {
-    widthClassName = 'euiModal--maxWidth-default';
-  } else if (maxWidth !== false) {
-    const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
-    newStyle = { ...style, maxWidth: value };
+  let newStyle = style;
+
+  if (typeof maxWidth !== 'boolean') {
+    newStyle = { ...newStyle, maxInlineSize: maxWidth };
   }
 
-  const classes = classnames('euiModal', widthClassName, className);
+  const classes = classnames('euiModal', className);
+
+  const euiTheme = useEuiTheme();
+  const styles = euiModalStyles(euiTheme);
+  const cssStyles = [
+    styles.euiModal,
+    maxWidth === true && styles.defaultMaxWidth,
+  ];
+
+  const cssCloseIconStyles = [styles.euiModal__closeIcon];
 
   return (
     <EuiOverlayMask>
       <EuiFocusTrap initialFocus={initialFocus} scrollLock preventScrollOnFocus>
         <div
+          css={cssStyles}
           className={classes}
           onKeyDown={onKeyDown}
           tabIndex={0}
-          style={newStyle || style}
+          style={newStyle}
           {...rest}
         >
           <EuiI18n
@@ -89,6 +98,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
               <EuiButtonIcon
                 iconType="cross"
                 onClick={onClose}
+                css={cssCloseIconStyles}
                 className="euiModal__closeIcon"
                 color="text"
                 aria-label={closeModal}
diff --git a/src/components/modal/modal_body.styles.ts b/src/components/modal/modal_body.styles.ts
new file mode 100644
index 00000000000..1330ca9a5c5
--- /dev/null
+++ b/src/components/modal/modal_body.styles.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiYScrollWithShadows, euiBreakpoint } from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+
+export const euiModalBodyStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiModalBody: css`
+      flex-grow: 1;
+      overflow: hidden;
+      // The below fixes scroll on Chrome and Safari
+      display: flex;
+      flex-direction: column;
+
+      // If a footer doesn't exist (body is the last element) add padding to the bottom
+      &:last-of-type .euiModalBody__overflow {
+        padding-block-end: ${euiTheme.size.l};
+      }
+    `,
+    euiModalBody__overflow: css`
+      ${euiYScrollWithShadows(euiThemeContext)};
+      padding-inline: ${euiTheme.size.l};
+      padding-block: ${euiTheme.size.s};
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        padding-block-end: ${euiTheme.size.l};
+      }
+    `,
+  };
+};
diff --git a/src/components/modal/modal_body.test.tsx b/src/components/modal/modal_body.test.tsx
index 4fb3952c291..33ff1f21407 100644
--- a/src/components/modal/modal_body.test.tsx
+++ b/src/components/modal/modal_body.test.tsx
@@ -9,10 +9,15 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiModalBody } from './modal_body';
 
-test('renders EuiModalBody', () => {
-  const component = <EuiModalBody {...requiredProps}>children</EuiModalBody>;
-  expect(render(component)).toMatchSnapshot();
+describe('EuiModalBody', () => {
+  shouldRenderCustomStyles(<EuiModalBody>children</EuiModalBody>);
+
+  test('is rendered', () => {
+    const component = <EuiModalBody {...requiredProps}>children</EuiModalBody>;
+    expect(render(component)).toMatchSnapshot();
+  });
 });
diff --git a/src/components/modal/modal_body.tsx b/src/components/modal/modal_body.tsx
index 5b9c96f766d..6808fa88cf6 100644
--- a/src/components/modal/modal_body.tsx
+++ b/src/components/modal/modal_body.tsx
@@ -10,6 +10,9 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { CommonProps } from '../common';
 
+import { useEuiTheme } from '../../services';
+import { euiModalBodyStyles } from './modal_body.styles';
+
 export type EuiModalBodyProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
 >;
@@ -20,9 +23,17 @@ export const EuiModalBody: EuiModalBodyProps = ({
   ...rest
 }) => {
   const classes = classnames('euiModalBody', className);
+
+  const euiTheme = useEuiTheme();
+  const styles = euiModalBodyStyles(euiTheme);
+  const cssStyles = [styles.euiModalBody];
+  const cssOverflowStyles = [styles.euiModalBody__overflow];
+
   return (
-    <div className={classes} {...rest}>
-      <div className="euiModalBody__overflow">{children}</div>
+    <div css={cssStyles} className={classes} {...rest}>
+      <div css={cssOverflowStyles} className="euiModalBody__overflow">
+        {children}
+      </div>
     </div>
   );
 };
diff --git a/src/components/modal/modal_footer.styles.ts b/src/components/modal/modal_footer.styles.ts
new file mode 100644
index 00000000000..a0523bd5d7b
--- /dev/null
+++ b/src/components/modal/modal_footer.styles.ts
@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { euiBreakpoint } from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+
+export const euiModalFooterStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiModalFooter: css`
+      display: flex;
+      justify-content: flex-end;
+      padding-block: ${euiTheme.size.base} ${euiTheme.size.l};
+      padding-inline: ${euiTheme.size.l};
+      flex-grow: 0;
+      flex-shrink: 0; // ensure the height of the footer is based off its contents and doesn't squish
+      gap: ${euiTheme.size.base};
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        background: ${euiTheme.colors.lightestShade};
+        padding-block: ${euiTheme.size.m};
+        padding-inline: ${euiTheme.size.l};
+        justify-content: stretch;
+        gap: ${euiTheme.size.s};
+
+        > * {
+          flex: 1;
+        }
+      }
+    `,
+  };
+};
diff --git a/src/components/modal/modal_footer.test.tsx b/src/components/modal/modal_footer.test.tsx
index 63283b43d56..a879ed2c3d3 100644
--- a/src/components/modal/modal_footer.test.tsx
+++ b/src/components/modal/modal_footer.test.tsx
@@ -9,12 +9,17 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiModalFooter } from './modal_footer';
 
-test('renders EuiModalFooter', () => {
-  const component = (
-    <EuiModalFooter {...requiredProps}>children</EuiModalFooter>
-  );
-  expect(render(component)).toMatchSnapshot();
+describe('EuiModalFooter', () => {
+  shouldRenderCustomStyles(<EuiModalFooter>children</EuiModalFooter>);
+
+  test('is rendered', () => {
+    const component = (
+      <EuiModalFooter {...requiredProps}>children</EuiModalFooter>
+    );
+    expect(render(component)).toMatchSnapshot();
+  });
 });
diff --git a/src/components/modal/modal_footer.tsx b/src/components/modal/modal_footer.tsx
index edb406b5874..befcca1d778 100644
--- a/src/components/modal/modal_footer.tsx
+++ b/src/components/modal/modal_footer.tsx
@@ -10,6 +10,9 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { CommonProps } from '../common';
 
+import { useEuiTheme } from '../../services';
+import { euiModalFooterStyles } from './modal_footer.styles';
+
 export type EuiModalFooterProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
 >;
@@ -20,8 +23,13 @@ export const EuiModalFooter: EuiModalFooterProps = ({
   ...rest
 }) => {
   const classes = classnames('euiModalFooter', className);
+
+  const euiTheme = useEuiTheme();
+  const styles = euiModalFooterStyles(euiTheme);
+  const cssStyles = [styles.euiModalFooter];
+
   return (
-    <div className={classes} {...rest}>
+    <div css={cssStyles} className={classes} {...rest}>
       {children}
     </div>
   );
diff --git a/src/components/modal/modal_header.styles.ts b/src/components/modal/modal_header.styles.ts
new file mode 100644
index 00000000000..8bf75ec86df
--- /dev/null
+++ b/src/components/modal/modal_header.styles.ts
@@ -0,0 +1,31 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { UseEuiTheme } from '../../services';
+
+export const euiModalHeaderStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiModalHeader: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding-inline: ${euiTheme.size.l} ${euiTheme.size.xxl};
+      padding-block: ${euiTheme.size.l} ${euiTheme.size.base};
+      flex-grow: 0;
+      flex-shrink: 0;
+
+      // If a body doesn't exist, remove some extra padding from footer
+      & + .euiModalFooter {
+        padding-block-start: ${euiTheme.size.s};
+      }
+    `,
+  };
+};
diff --git a/src/components/modal/modal_header.test.tsx b/src/components/modal/modal_header.test.tsx
index 72f3c78d985..e210531873a 100644
--- a/src/components/modal/modal_header.test.tsx
+++ b/src/components/modal/modal_header.test.tsx
@@ -9,12 +9,17 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiModalHeader } from './modal_header';
 
-test('renders EuiModalHeader', () => {
-  const component = (
-    <EuiModalHeader {...requiredProps}>children</EuiModalHeader>
-  );
-  expect(render(component)).toMatchSnapshot();
+describe('EuiModalHeader', () => {
+  shouldRenderCustomStyles(<EuiModalHeader>children</EuiModalHeader>);
+
+  test('is rendered', () => {
+    const component = (
+      <EuiModalHeader {...requiredProps}>children</EuiModalHeader>
+    );
+    expect(render(component)).toMatchSnapshot();
+  });
 });
diff --git a/src/components/modal/modal_header.tsx b/src/components/modal/modal_header.tsx
index 7246900535b..8a75c153b87 100644
--- a/src/components/modal/modal_header.tsx
+++ b/src/components/modal/modal_header.tsx
@@ -10,6 +10,9 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { CommonProps } from '../common';
 
+import { useEuiTheme } from '../../services';
+import { euiModalHeaderStyles } from './modal_header.styles';
+
 export type EuiModalHeaderProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
 >;
@@ -20,8 +23,13 @@ export const EuiModalHeader: EuiModalHeaderProps = ({
   ...rest
 }) => {
   const classes = classnames('euiModalHeader', className);
+
+  const euiTheme = useEuiTheme();
+  const styles = euiModalHeaderStyles(euiTheme);
+  const cssStyles = [styles.euiModalHeader];
+
   return (
-    <div className={classes} {...rest}>
+    <div css={cssStyles} className={classes} {...rest}>
       {children}
     </div>
   );
diff --git a/src/components/modal/modal_header_title.test.tsx b/src/components/modal/modal_header_title.test.tsx
index a044c7625ba..9ca267edd7a 100644
--- a/src/components/modal/modal_header_title.test.tsx
+++ b/src/components/modal/modal_header_title.test.tsx
@@ -9,12 +9,17 @@
 import React from 'react';
 import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiModalHeaderTitle } from './modal_header_title';
 
-test('renders EuiModalHeaderTitle', () => {
-  const component = (
-    <EuiModalHeaderTitle {...requiredProps}>children</EuiModalHeaderTitle>
-  );
-  expect(render(component)).toMatchSnapshot();
+describe('EuiModalHeaderTitle', () => {
+  shouldRenderCustomStyles(<EuiModalHeaderTitle>children</EuiModalHeaderTitle>);
+
+  test('is rendered', () => {
+    const component = (
+      <EuiModalHeaderTitle {...requiredProps}>children</EuiModalHeaderTitle>
+    );
+    expect(render(component)).toMatchSnapshot();
+  });
 });
diff --git a/src/components/modal/modal_header_title.tsx b/src/components/modal/modal_header_title.tsx
index c31475fce0e..79815cf2ba1 100644
--- a/src/components/modal/modal_header_title.tsx
+++ b/src/components/modal/modal_header_title.tsx
@@ -10,6 +10,8 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classnames from 'classnames';
 import { CommonProps } from '../common';
 
+import { EuiTitle } from '../title';
+
 export type EuiModalHeaderTitleProps = FunctionComponent<
   HTMLAttributes<HTMLDivElement> & CommonProps
 >;
@@ -20,9 +22,10 @@ export const EuiModalHeaderTitle: EuiModalHeaderTitleProps = ({
   ...rest
 }) => {
   const classes = classnames('euiModalHeader__title', className);
+
   return (
-    <div className={classes} {...rest}>
+    <EuiTitle size="m" className={classes} {...rest}>
       {React.isValidElement(children) ? children : <h1>{children}</h1>}
-    </div>
+    </EuiTitle>
   );
 };
diff --git a/src/global_styling/utility/animations.ts b/src/global_styling/utility/animations.ts
index bedd2330ecc..397ce13a9fd 100644
--- a/src/global_styling/utility/animations.ts
+++ b/src/global_styling/utility/animations.ts
@@ -17,3 +17,15 @@ export const euiAnimFadeIn = keyframes`
     opacity: 1;
   }
 `;
+
+export const euiAnimSlideInUp = (size: string) => keyframes`
+   0% {
+    opacity: 0;
+    transform: translateY(${size});
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
diff --git a/src/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index 8d1e11becf6..1e8deae5be6 100644
--- a/src/themes/amsterdam/overrides/_index.scss
+++ b/src/themes/amsterdam/overrides/_index.scss
@@ -12,7 +12,6 @@
 @import 'hue';
 @import 'key_pad_menu';
 @import 'markdown_editor';
-@import 'modal';
 @import 'range';
 @import 'range_draggable';
 @import 'range_highlight';
diff --git a/src/themes/amsterdam/overrides/_modal.scss b/src/themes/amsterdam/overrides/_modal.scss
deleted file mode 100644
index 623c2bec624..00000000000
--- a/src/themes/amsterdam/overrides/_modal.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.euiModal {
-  border: none;
-}
\ No newline at end of file
diff --git a/upcoming_changelogs/6321.md b/upcoming_changelogs/6321.md
new file mode 100644
index 00000000000..fb22d99762e
--- /dev/null
+++ b/upcoming_changelogs/6321.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiModal` to Emotion
\ No newline at end of file