From c80c82f5b94fb3d12d1ea6e015471e653621be10 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Mon, 24 Oct 2022 19:31:05 +0100
Subject: [PATCH 01/24] [Emotion] Convert `modal`

---
 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    |   4 +-
 .../__snapshots__/modal_footer.test.tsx.snap  |   2 +-
 .../__snapshots__/modal_header.test.tsx.snap  |   2 +-
 .../modal_header_title.test.tsx.snap          |  10 +-
 src/components/modal/_index.scss              |   1 -
 src/components/modal/_modal.scss              | 154 ------------------
 src/components/modal/confirm_modal.tsx        |   9 +-
 src/components/modal/modal.styles.ts          |  92 +++++++++++
 src/components/modal/modal.tsx                |  12 +-
 src/components/modal/modal_body.styles.ts     |  43 +++++
 src/components/modal/modal_body.tsx           |  15 +-
 src/components/modal/modal_footer.styles.ts   |  46 ++++++
 src/components/modal/modal_footer.tsx         |  10 +-
 src/components/modal/modal_header.styles.ts   |  36 ++++
 src/components/modal/modal_header.tsx         |  10 +-
 src/components/modal/modal_header_title.tsx   |   7 +-
 src/themes/amsterdam/overrides/_index.scss    |   1 -
 src/themes/amsterdam/overrides/_modal.scss    |   3 -
 21 files changed, 300 insertions(+), 202 deletions(-)
 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

diff --git a/src/components/index.scss b/src/components/index.scss
index ced54713a92..8e7a83babab 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 6f4d9753a48..7ecb30b1330 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -21,13 +21,13 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
+      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2 emotion-euiModal-maxWidth-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
@@ -38,22 +38,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"
@@ -66,7 +64,7 @@ Array [
         </div>
       </div>
       <div
-        class="euiModalFooter"
+        class="euiModalFooter emotion-euiModalFooter"
       >
         <button
           class="euiButtonEmpty css-9t7nyf-empty-primary"
@@ -132,13 +130,13 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
+      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2 emotion-euiModal-maxWidth-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
@@ -149,19 +147,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 82305843b3e..d167771b47c 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -21,13 +21,13 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default testClass1 testClass2"
+      class="euiModal euiModal--maxWidth-default testClass1 testClass2 emotion-euiModal-maxWidth"
       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..a8870eacf00 100644
--- a/src/components/modal/__snapshots__/modal_body.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_body.test.tsx.snap
@@ -3,11 +3,11 @@
 exports[`renders EuiModalBody 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..0bceb72e908 100644
--- a/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders EuiModalFooter 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..d23592e5fff 100644
--- a/src/components/modal/__snapshots__/modal_header.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_header.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`renders EuiModalHeader 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..9f5aaa29254 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
+<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 de5f134a058..00000000000
--- a/src/components/modal/_modal.scss
+++ /dev/null
@@ -1,154 +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
-  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.tsx b/src/components/modal/confirm_modal.tsx
index 419b91c8c73..bb723a4fb80 100644
--- a/src/components/modal/confirm_modal.tsx
+++ b/src/components/modal/confirm_modal.tsx
@@ -20,6 +20,9 @@ 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';
@@ -105,6 +108,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 +133,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..6918b99dcf7
--- /dev/null
+++ b/src/components/modal/modal.styles.ts
@@ -0,0 +1,92 @@
+/*
+ * 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, keyframes } from '@emotion/react';
+import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
+import { euiCanAnimate, euiBreakpoint } from '../../global_styling';
+import { UseEuiTheme } from '../../services';
+import { euiFormVariables } from '../form/form.styles';
+
+const euiModalAppear = keyframes`
+ 0% {
+    opacity: 0;
+    transform: translateY(40px);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiModal: css`
+      // This mixin overwrites some of the border above
+      ${euiShadow(euiThemeContext, 'l')}
+      display: flex;
+      flex-direction: column;
+      max-block-size: 75vh; // We overflow the modal body based off this
+      overflow: hidden; // Ensure long, non-breaking text doesn't expand beyond the modal bounds
+
+      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});
+
+      ${euiCanAnimate} {
+        animation: ${euiModalAppear} ${euiTheme.animation.slow}
+          ${euiTheme.animation.bounce};
+      }
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        position: fixed;
+        inline-size: 100vw !important;
+        max-inline-size: none !important;
+        min-inline-size: 0 !important;
+        max-block-size: 100vh;
+        inset-inline-start: 0;
+        inset-inline-end: 0;
+        inset-block-end: 0;
+        inset-block-start: 0;
+        border-radius: 0;
+      }
+
+      // Remove the outline from the focusable container
+      &:focus {
+        outline: none;
+      }
+    `,
+    // Variants
+    maxWidth: css`
+      max-inline-size: min(
+        ${euiTheme.breakpoint.m},
+        calc(100vw - ${euiTheme.size.base})
+      );
+    `,
+    confirmation: css`
+      min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth};
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        ${euiShadow(euiThemeContext, 'l')}
+        inset-block-start: auto;
+      }
+    `,
+    euiModal__closeIcon: css`
+      background-color: transparentize(${euiTheme.colors.emptyShade}, 0.1);
+      position: absolute;
+      inset-inline-end: ${euiTheme.size.xs};
+      inset-block-start: ${euiTheme.size.xs};
+      z-index: 3;
+    `,
+  };
+};
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 84301fba62b..0e286f66532 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;
   /**
@@ -71,6 +73,12 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
 
   const classes = classnames('euiModal', widthClassName, className);
 
+  const euiTheme = useEuiTheme();
+  const styles = euiModalStyles(euiTheme);
+  const cssStyles = [styles.euiModal, maxWidth && styles.maxWidth];
+
+  const cssCloseStyles = [styles.euiModal__closeIcon];
+
   return (
     <EuiOverlayMask>
       <EuiFocusTrap initialFocus={initialFocus}>
@@ -79,6 +87,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           // fallbackFocus won't work.
         }
         <div
+          css={cssStyles}
           className={classes}
           onKeyDown={onKeyDown}
           tabIndex={0}
@@ -93,6 +102,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
               <EuiButtonIcon
                 iconType="cross"
                 onClick={onClose}
+                css={cssCloseStyles}
                 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..67f7bcc55ac
--- /dev/null
+++ b/src/components/modal/modal_body.styles.ts
@@ -0,0 +1,43 @@
+/*
+ * 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;
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        inline-size: 100%;
+      }
+
+      // 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.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..742859c6b85
--- /dev/null
+++ b/src/components/modal/modal_footer.styles.ts
@@ -0,0 +1,46 @@
+/*
+ * 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: ${euiTheme.size.base} ${euiTheme.size.l} ${euiTheme.size.l};
+      flex-grow: 0;
+      flex-shrink: 0; // ensure the height of the footer is based off its contents and doesn't squish
+
+      /* row-gap: ${euiTheme.size.base}; */
+
+      > * + * {
+        margin-inline-start: ${euiTheme.size.base};
+      }
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        inline-size: 100%;
+        background: $euiColorLightestShade;
+        padding: $euiSizeM $euiSizeL !important;
+        justify-content: stretch;
+
+        > * {
+          flex: 1;
+
+          + * {
+            margin-inline-start: 0;
+          }
+        }
+      }
+    `,
+  };
+};
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..b91b4843746
--- /dev/null
+++ b/src/components/modal/modal_header.styles.ts
@@ -0,0 +1,36 @@
+/*
+ * 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';
+import { euiBreakpoint } from '../../global_styling';
+
+export const euiModalHeaderStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiModalHeader: css`
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: ${euiTheme.size.l} ${euiTheme.size.xxl} ${euiTheme.size.base}
+        ${euiTheme.size.l};
+      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};
+      }
+
+      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
+        inline-size: 100%;
+      }
+    `,
+  };
+};
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.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/themes/amsterdam/overrides/_index.scss b/src/themes/amsterdam/overrides/_index.scss
index 721733fee48..1cae87336b6 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

From 5f8418ce1056972c8af969920ec3fcbb31f31071 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Wed, 26 Oct 2022 18:07:00 +0100
Subject: [PATCH 02/24] Fix weird bug in Chrome with parent `overflow: hidden`
 and children with `image-mask`

---
 src/components/modal/modal.styles.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index 6918b99dcf7..0863d89f760 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -34,8 +34,6 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
       display: flex;
       flex-direction: column;
       max-block-size: 75vh; // We overflow the modal body based off this
-      overflow: hidden; // Ensure long, non-breaking text doesn't expand beyond the modal bounds
-
       position: relative;
       background-color: ${euiTheme.colors.emptyShade};
       border-radius: ${euiTheme.border.radius.medium};

From ad14381eea38eca380060b3ab928216e702efe60 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Wed, 26 Oct 2022 19:16:29 +0100
Subject: [PATCH 03/24] Better styles and fixed `euiOverflowShadowStyles`

---
 .../__snapshots__/flyout_body.test.tsx.snap   |  2 +-
 src/components/modal/modal.styles.ts          |  8 +++-----
 src/components/modal/modal.tsx                |  4 ++--
 src/components/modal/modal_footer.styles.ts   | 20 +++++++------------
 src/components/modal/modal_header.styles.ts   |  5 +++--
 src/global_styling/mixins/_helpers.ts         |  3 ++-
 .../__snapshots__/utility.test.tsx.snap       |  8 ++++----
 7 files changed, 22 insertions(+), 28 deletions(-)

diff --git a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
index 21f973c4f0d..e3320aa1911 100644
--- a/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout_body.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`EuiFlyoutBody is rendered 1`] = `
   data-test-subj="test subject string"
 >
   <div
-    class="euiFlyoutBody__overflow css-1fk8opf-noBanner"
+    class="euiFlyoutBody__overflow css-18yrfj9-noBanner"
     tabindex="0"
   >
     <div
diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index 0863d89f760..d8a25f95fec 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -29,7 +29,6 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     euiModal: css`
-      // This mixin overwrites some of the border above
       ${euiShadow(euiThemeContext, 'l')}
       display: flex;
       flex-direction: column;
@@ -48,9 +47,9 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
 
       ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
         position: fixed;
-        inline-size: 100vw !important;
-        max-inline-size: none !important;
-        min-inline-size: 0 !important;
+        inline-size: 100vw;
+        min-inline-size: 0;
+        max-inline-size: none;
         max-block-size: 100vh;
         inset-inline-start: 0;
         inset-inline-end: 0;
@@ -80,7 +79,6 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     euiModal__closeIcon: css`
-      background-color: transparentize(${euiTheme.colors.emptyShade}, 0.1);
       position: absolute;
       inset-inline-end: ${euiTheme.size.xs};
       inset-block-start: ${euiTheme.size.xs};
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 0e286f66532..40122ae3b44 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -77,7 +77,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
   const styles = euiModalStyles(euiTheme);
   const cssStyles = [styles.euiModal, maxWidth && styles.maxWidth];
 
-  const cssCloseStyles = [styles.euiModal__closeIcon];
+  const cssCloseIconStyles = [styles.euiModal__closeIcon];
 
   return (
     <EuiOverlayMask>
@@ -102,7 +102,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
               <EuiButtonIcon
                 iconType="cross"
                 onClick={onClose}
-                css={cssCloseStyles}
+                css={cssCloseIconStyles}
                 className="euiModal__closeIcon"
                 color="text"
                 aria-label={closeModal}
diff --git a/src/components/modal/modal_footer.styles.ts b/src/components/modal/modal_footer.styles.ts
index 742859c6b85..e9efa5777a8 100644
--- a/src/components/modal/modal_footer.styles.ts
+++ b/src/components/modal/modal_footer.styles.ts
@@ -17,28 +17,22 @@ export const euiModalFooterStyles = (euiThemeContext: UseEuiTheme) => {
     euiModalFooter: css`
       display: flex;
       justify-content: flex-end;
-      padding: ${euiTheme.size.base} ${euiTheme.size.l} ${euiTheme.size.l};
+      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
-
-      /* row-gap: ${euiTheme.size.base}; */
-
-      > * + * {
-        margin-inline-start: ${euiTheme.size.base};
-      }
+      gap: ${euiTheme.size.base};
 
       ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
         inline-size: 100%;
-        background: $euiColorLightestShade;
-        padding: $euiSizeM $euiSizeL !important;
+        background: ${euiTheme.colors.lightestShade};
+        padding-block: ${euiTheme.size.m};
+        padding-inline: ${euiTheme.size.l};
         justify-content: stretch;
+        gap: ${euiTheme.size.s};
 
         > * {
           flex: 1;
-
-          + * {
-            margin-inline-start: 0;
-          }
         }
       }
     `,
diff --git a/src/components/modal/modal_header.styles.ts b/src/components/modal/modal_header.styles.ts
index b91b4843746..4b0293b33f2 100644
--- a/src/components/modal/modal_header.styles.ts
+++ b/src/components/modal/modal_header.styles.ts
@@ -18,8 +18,9 @@ export const euiModalHeaderStyles = (euiThemeContext: UseEuiTheme) => {
       display: flex;
       justify-content: space-between;
       align-items: center;
-      padding: ${euiTheme.size.l} ${euiTheme.size.xxl} ${euiTheme.size.base}
-        ${euiTheme.size.l};
+      padding-inline: ${euiTheme.size.l} ${euiTheme.size.xxl};
+      padding-block: ${euiTheme.size.l} ${euiTheme.size.base};
+      ${euiTheme.size.l};
       flex-grow: 0;
       flex-shrink: 0;
 
diff --git a/src/global_styling/mixins/_helpers.ts b/src/global_styling/mixins/_helpers.ts
index c5829a646e0..df8ff9700ee 100644
--- a/src/global_styling/mixins/_helpers.ts
+++ b/src/global_styling/mixins/_helpers.ts
@@ -87,13 +87,14 @@ interface EuiOverflowShadowStyles {
   direction?: 'y' | 'x';
   side?: 'both' | 'start' | 'end';
 }
+
 const euiOverflowShadowStyles = (
   { euiTheme: { size } }: UseEuiTheme,
   { direction: _direction, side: _side }: EuiOverflowShadowStyles = {}
 ) => {
   const direction = _direction || 'y';
   const side = _side || 'both';
-  const hideHeight = `calc(${size.base} * 0.75 * 1.25)`;
+  const hideHeight = size.s;
   const gradientStart = `
   ${transparentize('red', 0.1)} 0%,
   ${transparentize('red', 1)} ${hideHeight}
diff --git a/src/global_styling/utility/__snapshots__/utility.test.tsx.snap b/src/global_styling/utility/__snapshots__/utility.test.tsx.snap
index 226a500895e..0e4d34bc34c 100644
--- a/src/global_styling/utility/__snapshots__/utility.test.tsx.snap
+++ b/src/global_styling/utility/__snapshots__/utility.test.tsx.snap
@@ -178,9 +178,9 @@ exports[`global utility styles generates static global styles 1`] = `
 
   mask-image: linear-gradient(to bottom, 
   rgba(255,0,0,0.1) 0%,
-  rgb(255,0,0) calc(16px * 0.75 * 1.25)
+  rgb(255,0,0) 8px
   , 
-  rgb(255,0,0) calc(100% - calc(16px * 0.75 * 1.25)),
+  rgb(255,0,0) calc(100% - 8px),
   rgba(255,0,0,0.1) 100%
   );
 ;}
@@ -217,9 +217,9 @@ exports[`global utility styles generates static global styles 1`] = `
 
   mask-image: linear-gradient(to right, 
   rgba(255,0,0,0.1) 0%,
-  rgb(255,0,0) calc(16px * 0.75 * 1.25)
+  rgb(255,0,0) 8px
   , 
-  rgb(255,0,0) calc(100% - calc(16px * 0.75 * 1.25)),
+  rgb(255,0,0) calc(100% - 8px),
   rgba(255,0,0,0.1) 100%
   );
 ;}[class*='eui-showFor']{display:none!important;}

From d115136e2a705b80e7f642eae283749e69adafae Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Wed, 26 Oct 2022 19:27:05 +0100
Subject: [PATCH 04/24] Adding CL

---
 upcoming_changelogs/6321.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 upcoming_changelogs/6321.md

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

From a19dd986a962f0a32adbdd9d1aefb3e1a62df3c3 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Wed, 26 Oct 2022 19:51:33 +0100
Subject: [PATCH 05/24] Added `euiAnimSlideInUp`

---
 .../image/image_fullscreen_wrapper.styles.ts  | 17 +++----------
 src/components/modal/modal.styles.ts          | 24 +++++++------------
 src/global_styling/utility/animations.ts      | 12 ++++++++++
 3 files changed, 23 insertions(+), 30 deletions(-)

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/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index d8a25f95fec..16d5a0cf38e 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -6,24 +6,16 @@
  * Side Public License, v 1.
  */
 
-import { css, keyframes } from '@emotion/react';
+import { css } from '@emotion/react';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
-import { euiCanAnimate, euiBreakpoint } from '../../global_styling';
+import {
+  euiCanAnimate,
+  euiBreakpoint,
+  euiAnimSlideInUp,
+} from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 import { euiFormVariables } from '../form/form.styles';
 
-const euiModalAppear = keyframes`
- 0% {
-    opacity: 0;
-    transform: translateY(40px);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
-
 export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
 
@@ -41,8 +33,8 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
       max-inline-size: calc(100vw - ${euiTheme.size.base});
 
       ${euiCanAnimate} {
-        animation: ${euiModalAppear} ${euiTheme.animation.slow}
-          ${euiTheme.animation.bounce};
+        animation: ${euiAnimSlideInUp(euiTheme.size.xxl)}
+          ${euiTheme.animation.slow} ${euiTheme.animation.bounce};
       }
 
       ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
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);
+  }
+`;

From 1a6ac92e5017a0d16140925912826eb79b255469 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 27 Oct 2022 13:33:22 +0100
Subject: [PATCH 06/24] Removing unnecessary class name

---
 .../modal/__snapshots__/confirm_modal.test.tsx.snap    |  4 ++--
 src/components/modal/__snapshots__/modal.test.tsx.snap |  2 +-
 src/components/modal/modal.styles.ts                   |  2 +-
 src/components/modal/modal.tsx                         | 10 +++++-----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 7ecb30b1330..73b13402356 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -21,7 +21,7 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2 emotion-euiModal-maxWidth-confirmation"
+      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-maxWidthDefault-confirmation"
       data-test-subj="test subject string"
       tabindex="0"
     >
@@ -130,7 +130,7 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2 emotion-euiModal-maxWidth-confirmation"
+      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-maxWidthDefault-confirmation"
       data-test-subj="test subject string"
       tabindex="0"
     >
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index d167771b47c..ba18534fa72 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -21,7 +21,7 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default testClass1 testClass2 emotion-euiModal-maxWidth"
+      class="euiModal testClass1 testClass2 emotion-euiModal-maxWidthDefault"
       data-test-subj="test subject string"
       tabindex="0"
     >
diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index 16d5a0cf38e..b4bac12f551 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -56,7 +56,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     // Variants
-    maxWidth: css`
+    maxWidthDefault: css`
       max-inline-size: min(
         ${euiTheme.breakpoint.m},
         calc(100vw - ${euiTheme.size.base})
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 40122ae3b44..bf2e8d7d7a0 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -63,19 +63,19 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
   };
 
   let newStyle;
-  let widthClassName;
+
   if (maxWidth === true) {
-    widthClassName = 'euiModal--maxWidth-default';
+    newStyle = style;
   } else if (maxWidth !== false) {
     const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
     newStyle = { ...style, maxWidth: value };
   }
 
-  const classes = classnames('euiModal', widthClassName, className);
+  const classes = classnames('euiModal', className);
 
   const euiTheme = useEuiTheme();
   const styles = euiModalStyles(euiTheme);
-  const cssStyles = [styles.euiModal, maxWidth && styles.maxWidth];
+  const cssStyles = [styles.euiModal, maxWidth && styles.maxWidthDefault];
 
   const cssCloseIconStyles = [styles.euiModal__closeIcon];
 
@@ -91,7 +91,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           className={classes}
           onKeyDown={onKeyDown}
           tabIndex={0}
-          style={newStyle || style}
+          style={newStyle}
           {...rest}
         >
           <EuiI18n

From 999cd390c98aaf196add06b7e3e345c4fcabc340 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 27 Oct 2022 15:10:03 +0100
Subject: [PATCH 07/24] REVERT ME - To test bug with `mask-image`

---
 src-docs/src/views/modal/modal.js | 181 ++++++++++++++++++++++--------
 1 file changed, 137 insertions(+), 44 deletions(-)

diff --git a/src-docs/src/views/modal/modal.js b/src-docs/src/views/modal/modal.js
index e5df3006f6a..7379d7dddde 100644
--- a/src-docs/src/views/modal/modal.js
+++ b/src-docs/src/views/modal/modal.js
@@ -1,68 +1,161 @@
 import React, { useState } from 'react';
-
+import _times from 'lodash/times';
 import {
   EuiButton,
   EuiModal,
-  EuiModalBody,
-  EuiModalFooter,
   EuiModalHeader,
+  EuiModalBody,
   EuiModalHeaderTitle,
-  EuiCodeBlock,
+  EuiInMemoryTable,
+  EuiLink,
+  EuiHealth,
 } from '../../../../src/components';
-import { EuiSpacer } from '../../../../src/components/spacer';
+import { formatDate } from '../../../../src/services';
+
+const firstNames = [
+  'Very long first name that will wrap or be truncated',
+  'Another very long first name which will wrap or be truncated',
+  'Clinton',
+  'Igor',
+  undefined,
+  'Drew',
+  null,
+  'Rashid',
+  undefined,
+  'John',
+];
+
+const lastNames = [
+  'Very long last name that will wrap or be truncated',
+  'Another very long last name which will wrap or be truncated',
+  'Gormley',
+  'Motov',
+  'Minarik',
+  'Raines',
+  'Král',
+  'Khan',
+  'Sissel',
+  'Dorlus',
+];
+
+const github = [
+  'martijnvg',
+  'elissaw',
+  'clintongormley',
+  'imotov',
+  'karmi',
+  'drewr',
+  'HonzaKral',
+  'rashidkpc',
+  'jordansissel',
+  'silne30',
+];
+
+const createUsers = () => {
+  return _times(20, (index) => {
+    return {
+      id: index,
+      firstName: index < 10 ? firstNames[index] : firstNames[index - 10],
+      lastName: index < 10 ? lastNames[index] : lastNames[index - 10],
+      github: index < 10 ? github[index] : github[index - 10],
+      dateOfBirth: new Date(
+        1980,
+        Math.floor(Math.random() * 12),
+        Math.floor(Math.random() * 27) + 1
+      ),
+      nationality: 'nationality',
+      online: index % 2 === 0,
+    };
+  });
+};
+
+const MyTable = () => {
+  const columns = [
+    {
+      field: 'firstName',
+      name: 'First Name',
+      sortable: true,
+      truncateText: true,
+    },
+    {
+      field: 'lastName',
+      name: 'Last Name',
+      truncateText: true,
+    },
+    {
+      field: 'github',
+      name: 'Github',
+      render: (username) => (
+        <EuiLink href={`https://github.com/${username}`} target="_blank">
+          {username}
+        </EuiLink>
+      ),
+    },
+    {
+      field: 'dateOfBirth',
+      name: 'Date of Birth',
+      dataType: 'date',
+      render: (date) => formatDate(date, 'dobLong'),
+      sortable: true,
+    },
+    {
+      field: 'nationality',
+      name: 'Nationality',
+    },
+    {
+      field: 'online',
+      name: 'Online',
+      dataType: 'boolean',
+      render: (online) => {
+        const color = online ? 'success' : 'danger';
+        const label = online ? 'Online' : 'Offline';
+        return <EuiHealth color={color}>{label}</EuiHealth>;
+      },
+      sortable: true,
+    },
+  ];
+
+  const sorting = {
+    sort: {
+      field: 'dateOfBirth',
+      direction: 'desc',
+    },
+  };
+
+  return (
+    <EuiInMemoryTable
+      tableCaption="Demo of EuiInMemoryTable"
+      items={createUsers()}
+      columns={columns}
+      pagination={true}
+      sorting={sorting}
+    />
+  );
+};
 
 export default () => {
   const [isModalVisible, setIsModalVisible] = useState(false);
 
   const closeModal = () => setIsModalVisible(false);
   const showModal = () => setIsModalVisible(true);
-
-  let modal;
-
-  if (isModalVisible) {
-    modal = (
+  return isModalVisible ? (
+    <>
+      <EuiButton>Hello world!</EuiButton>
       <EuiModal onClose={closeModal}>
         <EuiModalHeader>
           <EuiModalHeaderTitle>
-            <h1>Modal title</h1>
+            <h1>title</h1>
           </EuiModalHeaderTitle>
         </EuiModalHeader>
 
         <EuiModalBody>
-          This modal has the following setup:
-          <EuiSpacer />
-          <EuiCodeBlock language="html" isCopyable>
-            {`<EuiModal onClose={closeModal}>
-  <EuiModalHeader>
-    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
-  </EuiModalHeader>
-
-  <EuiModalBody>
-    <!-- Modal body -->
-  </EuiModalBody>
-
-  <EuiModalFooter>
-    <EuiButton onClick={closeModal} fill>
-      Close
-    </EuiButton>
-  </EuiModalFooter>
-</EuiModal>`}
-          </EuiCodeBlock>
+          <MyTable />
         </EuiModalBody>
-
-        <EuiModalFooter>
-          <EuiButton onClick={closeModal} fill>
-            Close
-          </EuiButton>
-        </EuiModalFooter>
       </EuiModal>
-    );
-  }
-
-  return (
-    <div>
-      <EuiButton onClick={showModal}>Show modal</EuiButton>
-      {modal}
-    </div>
+    </>
+  ) : (
+    <>
+      <EuiButton onClick={showModal}>Show Modal</EuiButton>
+    </>
   );
 };

From 37bf45f32dc8229436d6857d97e9346cbaa6d08b Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 27 Oct 2022 15:23:24 +0100
Subject: [PATCH 08/24] Added `shouldRenderCustomStyles()` tests

---
 .../modal/__snapshots__/modal.test.tsx.snap   |  2 +-
 .../__snapshots__/modal_body.test.tsx.snap    |  2 +-
 .../__snapshots__/modal_footer.test.tsx.snap  |  2 +-
 .../__snapshots__/modal_header.test.tsx.snap  |  2 +-
 .../modal_header_title.test.tsx.snap          |  2 +-
 src/components/modal/confirm_modal.test.tsx   |  5 ++++
 src/components/modal/modal.test.tsx           | 23 +++++++++++--------
 src/components/modal/modal_body.test.tsx      | 11 ++++++---
 src/components/modal/modal_footer.test.tsx    | 15 ++++++++----
 src/components/modal/modal_header.test.tsx    | 14 +++++++----
 .../modal/modal_header_title.test.tsx         | 15 ++++++++----
 11 files changed, 61 insertions(+), 32 deletions(-)

diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index ba18534fa72..858f71e3c8d 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModal 1`] = `
+exports[`EuiModal is rendered 1`] = `
 Array [
   <div
     aria-hidden="true"
diff --git a/src/components/modal/__snapshots__/modal_body.test.tsx.snap b/src/components/modal/__snapshots__/modal_body.test.tsx.snap
index a8870eacf00..f73231daf79 100644
--- a/src/components/modal/__snapshots__/modal_body.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_body.test.tsx.snap
@@ -1,6 +1,6 @@
 // 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 emotion-euiModalBody"
diff --git a/src/components/modal/__snapshots__/modal_footer.test.tsx.snap b/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
index 0bceb72e908..db28b9cc812 100644
--- a/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
@@ -1,6 +1,6 @@
 // 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 emotion-euiModalFooter"
diff --git a/src/components/modal/__snapshots__/modal_header.test.tsx.snap b/src/components/modal/__snapshots__/modal_header.test.tsx.snap
index d23592e5fff..984b9cb20d5 100644
--- a/src/components/modal/__snapshots__/modal_header.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal_header.test.tsx.snap
@@ -1,6 +1,6 @@
 // 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 emotion-euiModalHeader"
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 9f5aaa29254..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,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalHeaderTitle 1`] = `
+exports[`EuiModalHeaderTitle is rendered 1`] = `
 <h1
   aria-label="aria-label"
   class="euiTitle euiModalHeader__title testClass1 testClass2 emotion-euiTitle-m"
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/modal.test.tsx b/src/components/modal/modal.test.tsx
index 8dec11a3b07..a4701a972f1 100644
--- a/src/components/modal/modal.test.tsx
+++ b/src/components/modal/modal.test.tsx
@@ -9,17 +9,22 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import { requiredProps, takeMountedSnapshot } from '../../test';
+import { shouldRenderCustomStyles } from '../../test/internal';
 
 import { EuiModal } from './modal';
 
-test('renders EuiModal', () => {
-  const component = (
-    <EuiModal onClose={() => {}} {...requiredProps}>
-      children
-    </EuiModal>
-  );
+describe('EuiModal', () => {
+  shouldRenderCustomStyles(<EuiModal onClose={() => {}}>children</EuiModal>);
 
-  expect(
-    takeMountedSnapshot(mount(component), { hasArrayOutput: true })
-  ).toMatchSnapshot();
+  test('is rendered', () => {
+    const component = (
+      <EuiModal onClose={() => {}} {...requiredProps}>
+        children
+      </EuiModal>
+    );
+
+    expect(
+      takeMountedSnapshot(mount(component), { hasArrayOutput: true })
+    ).toMatchSnapshot();
+  });
 });
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_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_header.test.tsx b/src/components/modal/modal_header.test.tsx
index 72f3c78d985..ab9d3d6f84b 100644
--- a/src/components/modal/modal_header.test.tsx
+++ b/src/components/modal/modal_header.test.tsx
@@ -9,12 +9,16 @@
 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_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();
+  });
 });

From 17da1654c6bd9c172cfbacbcfdc0e26403298af8 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 27 Oct 2022 15:46:57 +0100
Subject: [PATCH 09/24] Cleaned up docs code and converted to TS

---
 .../{confirm_modal.js => confirm_modal.tsx}   |  2 +-
 ...l_loading.js => confirm_modal_loading.tsx} |  8 +++++---
 .../modal/{modal_form.js => modal_form.tsx}   | 20 +++++++++----------
 .../modal/{modal_width.js => modal_width.tsx} |  4 ++--
 src/components/modal/confirm_modal.tsx        |  5 +++++
 src/components/modal/modal.styles.ts          |  2 +-
 6 files changed, 24 insertions(+), 17 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_form.js => modal_form.tsx} (91%)
 rename src-docs/src/views/modal/{modal_width.js => modal_width.tsx} (93%)

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_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/modal/confirm_modal.tsx b/src/components/modal/confirm_modal.tsx
index bb723a4fb80..a0a40a81c07 100644
--- a/src/components/modal/confirm_modal.tsx
+++ b/src/components/modal/confirm_modal.tsx
@@ -62,6 +62,11 @@ export interface EuiConfirmModalProps
    * Passes `isLoading` prop to the confirm button
    */
   isLoading?: boolean;
+  /**
+   * Specifies what element should initially have focus.
+   * Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
+   */
+  initialFocus?: HTMLElement | (() => HTMLElement) | string;
 }
 
 export const CONFIRM_BUTTON = 'confirm';
diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index b4bac12f551..0629320ebbf 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -58,7 +58,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
     // Variants
     maxWidthDefault: css`
       max-inline-size: min(
-        ${euiTheme.breakpoint.m},
+        ${euiTheme.breakpoint.m}px,
         calc(100vw - ${euiTheme.size.base})
       );
     `,

From 05c6860b49e4e7210398b866fc8e8c5480cee39a Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 27 Oct 2022 15:53:46 +0100
Subject: [PATCH 10/24] Adding bug fix in CL

---
 upcoming_changelogs/6321.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/upcoming_changelogs/6321.md b/upcoming_changelogs/6321.md
index fb22d99762e..3902cbf0edc 100644
--- a/upcoming_changelogs/6321.md
+++ b/upcoming_changelogs/6321.md
@@ -1,3 +1,7 @@
 **CSS-in-JS conversions**
 
-- Converted `EuiModal` to Emotion
\ No newline at end of file
+- Converted `EuiModal` to Emotion
+
+**Bug fixes**
+
+- Fixed bug where `EuiModal` would get a red `image-mask` on top of the content
\ No newline at end of file

From 0dec04e564a6e7945b725c0f35f65c9ba3bf166f Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 27 Oct 2022 15:56:14 +0100
Subject: [PATCH 11/24] CL again

---
 upcoming_changelogs/6321.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/upcoming_changelogs/6321.md b/upcoming_changelogs/6321.md
index 3902cbf0edc..379ae87079c 100644
--- a/upcoming_changelogs/6321.md
+++ b/upcoming_changelogs/6321.md
@@ -4,4 +4,4 @@
 
 **Bug fixes**
 
-- Fixed bug where `EuiModal` would get a red `image-mask` on top of the content
\ No newline at end of file
+- Fixed bug where `EuiModal` would get a red `mask-image` on top of the content
\ No newline at end of file

From 8722ab85064c3781ac28561bd70bacc4b3bd8517 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 27 Oct 2022 16:10:53 +0100
Subject: [PATCH 12/24] =?UTF-8?q?CL=20again=20=F0=9F=98=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 upcoming_changelogs/6321.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/upcoming_changelogs/6321.md b/upcoming_changelogs/6321.md
index 379ae87079c..1677a4b1d60 100644
--- a/upcoming_changelogs/6321.md
+++ b/upcoming_changelogs/6321.md
@@ -4,4 +4,4 @@
 
 **Bug fixes**
 
-- Fixed bug where `EuiModal` would get a red `mask-image` on top of the content
\ No newline at end of file
+- Fixed a bug with `EuiModal` where the `mask-image` from the `.euiModalBody__overflow` was getting visible in Chrome
\ No newline at end of file

From ff338648f04a56d405a555f7fdb1e6b7b6fb00c2 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Thu, 27 Oct 2022 19:51:03 +0100
Subject: [PATCH 13/24] Changing examples source types to TSX

---
 src-docs/src/views/modal/modal_example.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

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,
         },
       ],

From 68d5c5fca8f4de291d2b074793d484ddafae6309 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Fri, 4 Nov 2022 13:36:59 +0000
Subject: [PATCH 14/24] Reverting example and renaming to `*.tsx`

---
 src-docs/src/views/modal/modal.js  | 161 -----------------------------
 src-docs/src/views/modal/modal.tsx |  68 ++++++++++++
 2 files changed, 68 insertions(+), 161 deletions(-)
 delete mode 100644 src-docs/src/views/modal/modal.js
 create mode 100644 src-docs/src/views/modal/modal.tsx

diff --git a/src-docs/src/views/modal/modal.js b/src-docs/src/views/modal/modal.js
deleted file mode 100644
index 7379d7dddde..00000000000
--- a/src-docs/src/views/modal/modal.js
+++ /dev/null
@@ -1,161 +0,0 @@
-import React, { useState } from 'react';
-import _times from 'lodash/times';
-import {
-  EuiButton,
-  EuiModal,
-  EuiModalHeader,
-  EuiModalBody,
-  EuiModalHeaderTitle,
-  EuiInMemoryTable,
-  EuiLink,
-  EuiHealth,
-} from '../../../../src/components';
-import { formatDate } from '../../../../src/services';
-
-const firstNames = [
-  'Very long first name that will wrap or be truncated',
-  'Another very long first name which will wrap or be truncated',
-  'Clinton',
-  'Igor',
-  undefined,
-  'Drew',
-  null,
-  'Rashid',
-  undefined,
-  'John',
-];
-
-const lastNames = [
-  'Very long last name that will wrap or be truncated',
-  'Another very long last name which will wrap or be truncated',
-  'Gormley',
-  'Motov',
-  'Minarik',
-  'Raines',
-  'Král',
-  'Khan',
-  'Sissel',
-  'Dorlus',
-];
-
-const github = [
-  'martijnvg',
-  'elissaw',
-  'clintongormley',
-  'imotov',
-  'karmi',
-  'drewr',
-  'HonzaKral',
-  'rashidkpc',
-  'jordansissel',
-  'silne30',
-];
-
-const createUsers = () => {
-  return _times(20, (index) => {
-    return {
-      id: index,
-      firstName: index < 10 ? firstNames[index] : firstNames[index - 10],
-      lastName: index < 10 ? lastNames[index] : lastNames[index - 10],
-      github: index < 10 ? github[index] : github[index - 10],
-      dateOfBirth: new Date(
-        1980,
-        Math.floor(Math.random() * 12),
-        Math.floor(Math.random() * 27) + 1
-      ),
-      nationality: 'nationality',
-      online: index % 2 === 0,
-    };
-  });
-};
-
-const MyTable = () => {
-  const columns = [
-    {
-      field: 'firstName',
-      name: 'First Name',
-      sortable: true,
-      truncateText: true,
-    },
-    {
-      field: 'lastName',
-      name: 'Last Name',
-      truncateText: true,
-    },
-    {
-      field: 'github',
-      name: 'Github',
-      render: (username) => (
-        <EuiLink href={`https://github.com/${username}`} target="_blank">
-          {username}
-        </EuiLink>
-      ),
-    },
-    {
-      field: 'dateOfBirth',
-      name: 'Date of Birth',
-      dataType: 'date',
-      render: (date) => formatDate(date, 'dobLong'),
-      sortable: true,
-    },
-    {
-      field: 'nationality',
-      name: 'Nationality',
-    },
-    {
-      field: 'online',
-      name: 'Online',
-      dataType: 'boolean',
-      render: (online) => {
-        const color = online ? 'success' : 'danger';
-        const label = online ? 'Online' : 'Offline';
-        return <EuiHealth color={color}>{label}</EuiHealth>;
-      },
-      sortable: true,
-    },
-  ];
-
-  const sorting = {
-    sort: {
-      field: 'dateOfBirth',
-      direction: 'desc',
-    },
-  };
-
-  return (
-    <EuiInMemoryTable
-      tableCaption="Demo of EuiInMemoryTable"
-      items={createUsers()}
-      columns={columns}
-      pagination={true}
-      sorting={sorting}
-    />
-  );
-};
-
-export default () => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
-
-  const closeModal = () => setIsModalVisible(false);
-  const showModal = () => setIsModalVisible(true);
-  return isModalVisible ? (
-    <>
-      <EuiButton>Hello world!</EuiButton>
-      <EuiModal onClose={closeModal}>
-        <EuiModalHeader>
-          <EuiModalHeaderTitle>
-            <h1>title</h1>
-          </EuiModalHeaderTitle>
-        </EuiModalHeader>
-
-        <EuiModalBody>
-          <MyTable />
-        </EuiModalBody>
-      </EuiModal>
-    </>
-  ) : (
-    <>
-      <EuiButton onClick={showModal}>Show Modal</EuiButton>
-    </>
-  );
-};
diff --git a/src-docs/src/views/modal/modal.tsx b/src-docs/src/views/modal/modal.tsx
new file mode 100644
index 00000000000..e5df3006f6a
--- /dev/null
+++ b/src-docs/src/views/modal/modal.tsx
@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+
+import {
+  EuiButton,
+  EuiModal,
+  EuiModalBody,
+  EuiModalFooter,
+  EuiModalHeader,
+  EuiModalHeaderTitle,
+  EuiCodeBlock,
+} from '../../../../src/components';
+import { EuiSpacer } from '../../../../src/components/spacer';
+
+export default () => {
+  const [isModalVisible, setIsModalVisible] = useState(false);
+
+  const closeModal = () => setIsModalVisible(false);
+  const showModal = () => setIsModalVisible(true);
+
+  let modal;
+
+  if (isModalVisible) {
+    modal = (
+      <EuiModal onClose={closeModal}>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>
+            <h1>Modal title</h1>
+          </EuiModalHeaderTitle>
+        </EuiModalHeader>
+
+        <EuiModalBody>
+          This modal has the following setup:
+          <EuiSpacer />
+          <EuiCodeBlock language="html" isCopyable>
+            {`<EuiModal onClose={closeModal}>
+  <EuiModalHeader>
+    <EuiModalHeaderTitle><h1><!-- Modal title --></h1></EuiModalHeaderTitle>
+  </EuiModalHeader>
+
+  <EuiModalBody>
+    <!-- Modal body -->
+  </EuiModalBody>
+
+  <EuiModalFooter>
+    <EuiButton onClick={closeModal} fill>
+      Close
+    </EuiButton>
+  </EuiModalFooter>
+</EuiModal>`}
+          </EuiCodeBlock>
+        </EuiModalBody>
+
+        <EuiModalFooter>
+          <EuiButton onClick={closeModal} fill>
+            Close
+          </EuiButton>
+        </EuiModalFooter>
+      </EuiModal>
+    );
+  }
+
+  return (
+    <div>
+      <EuiButton onClick={showModal}>Show modal</EuiButton>
+      {modal}
+    </div>
+  );
+};

From efae0490201f6f1301972a511ddc87230a5d1c42 Mon Sep 17 00:00:00 2001
From: Elizabet Oliveira <elizabet.oliveira@elastic.co>
Date: Fri, 4 Nov 2022 14:13:09 +0000
Subject: [PATCH 15/24] Remove bug fix entry from CL

---
 upcoming_changelogs/6321.md | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/upcoming_changelogs/6321.md b/upcoming_changelogs/6321.md
index 1677a4b1d60..fb22d99762e 100644
--- a/upcoming_changelogs/6321.md
+++ b/upcoming_changelogs/6321.md
@@ -1,7 +1,3 @@
 **CSS-in-JS conversions**
 
-- Converted `EuiModal` to Emotion
-
-**Bug fixes**
-
-- Fixed a bug with `EuiModal` where the `mask-image` from the `.euiModalBody__overflow` was getting visible in Chrome
\ No newline at end of file
+- Converted `EuiModal` to Emotion
\ No newline at end of file

From 5709a77e89b117419743c7e18354cfddbc8cef80 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 11:32:21 -0800
Subject: [PATCH 16/24] DRY out `initialFocus` types/prop docs + add
 `defaultFocusedButton` prop docs

---
 src/components/modal/confirm_modal.tsx | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/components/modal/confirm_modal.tsx b/src/components/modal/confirm_modal.tsx
index a0a40a81c07..bfca07a31cf 100644
--- a/src/components/modal/confirm_modal.tsx
+++ b/src/components/modal/confirm_modal.tsx
@@ -28,10 +28,7 @@ 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
    */
@@ -47,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
@@ -62,11 +63,6 @@ export interface EuiConfirmModalProps
    * Passes `isLoading` prop to the confirm button
    */
   isLoading?: boolean;
-  /**
-   * Specifies what element should initially have focus.
-   * Can be a DOM node, or a selector string (which will be passed to document.querySelector() to find the DOM node), or a function that returns a DOM node.
-   */
-  initialFocus?: HTMLElement | (() => HTMLElement) | string;
 }
 
 export const CONFIRM_BUTTON = 'confirm';

From d51d28beaf776c8968949e2e6d9bcc7594ed8778 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 12:12:49 -0800
Subject: [PATCH 17/24] [EuiModalHeader] misc cleanup

---
 src/components/modal/modal_header.styles.ts | 6 ------
 src/components/modal/modal_header.test.tsx  | 1 +
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/components/modal/modal_header.styles.ts b/src/components/modal/modal_header.styles.ts
index 4b0293b33f2..8bf75ec86df 100644
--- a/src/components/modal/modal_header.styles.ts
+++ b/src/components/modal/modal_header.styles.ts
@@ -8,7 +8,6 @@
 
 import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
-import { euiBreakpoint } from '../../global_styling';
 
 export const euiModalHeaderStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
@@ -20,7 +19,6 @@ export const euiModalHeaderStyles = (euiThemeContext: UseEuiTheme) => {
       align-items: center;
       padding-inline: ${euiTheme.size.l} ${euiTheme.size.xxl};
       padding-block: ${euiTheme.size.l} ${euiTheme.size.base};
-      ${euiTheme.size.l};
       flex-grow: 0;
       flex-shrink: 0;
 
@@ -28,10 +26,6 @@ export const euiModalHeaderStyles = (euiThemeContext: UseEuiTheme) => {
       & + .euiModalFooter {
         padding-block-start: ${euiTheme.size.s};
       }
-
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
-        inline-size: 100%;
-      }
     `,
   };
 };
diff --git a/src/components/modal/modal_header.test.tsx b/src/components/modal/modal_header.test.tsx
index ab9d3d6f84b..e210531873a 100644
--- a/src/components/modal/modal_header.test.tsx
+++ b/src/components/modal/modal_header.test.tsx
@@ -15,6 +15,7 @@ import { EuiModalHeader } from './modal_header';
 
 describe('EuiModalHeader', () => {
   shouldRenderCustomStyles(<EuiModalHeader>children</EuiModalHeader>);
+
   test('is rendered', () => {
     const component = (
       <EuiModalHeader {...requiredProps}>children</EuiModalHeader>

From 92b406783514e46e3c152016c36815129377af04 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 12:37:41 -0800
Subject: [PATCH 18/24] Clean up unnecessary width CSS

---
 src/components/modal/modal_body.styles.ts   | 4 ----
 src/components/modal/modal_footer.styles.ts | 1 -
 2 files changed, 5 deletions(-)

diff --git a/src/components/modal/modal_body.styles.ts b/src/components/modal/modal_body.styles.ts
index 67f7bcc55ac..1330ca9a5c5 100644
--- a/src/components/modal/modal_body.styles.ts
+++ b/src/components/modal/modal_body.styles.ts
@@ -21,10 +21,6 @@ export const euiModalBodyStyles = (euiThemeContext: UseEuiTheme) => {
       display: flex;
       flex-direction: column;
 
-      ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
-        inline-size: 100%;
-      }
-
       // 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};
diff --git a/src/components/modal/modal_footer.styles.ts b/src/components/modal/modal_footer.styles.ts
index e9efa5777a8..a0523bd5d7b 100644
--- a/src/components/modal/modal_footer.styles.ts
+++ b/src/components/modal/modal_footer.styles.ts
@@ -24,7 +24,6 @@ export const euiModalFooterStyles = (euiThemeContext: UseEuiTheme) => {
       gap: ${euiTheme.size.base};
 
       ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
-        inline-size: 100%;
         background: ${euiTheme.colors.lightestShade};
         padding-block: ${euiTheme.size.m};
         padding-inline: ${euiTheme.size.l};

From 334ce8cec81760016309020094a701ceda24c148 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 12:57:48 -0800
Subject: [PATCH 19/24] Simplify `style` logic + switch to logical property

---
 src/components/modal/modal.tsx | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 03589f37a70..93dd1eb320c 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -62,13 +62,10 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
     }
   };
 
-  let newStyle;
+  let newStyle = style;
 
-  if (maxWidth === true) {
-    newStyle = style;
-  } else if (maxWidth !== false) {
-    const value = typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth;
-    newStyle = { ...style, maxWidth: value };
+  if (typeof maxWidth !== 'boolean') {
+    newStyle = { ...newStyle, maxInlineSize: maxWidth };
   }
 
   const classes = classnames('euiModal', className);
@@ -87,7 +84,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           className={classes}
           onKeyDown={onKeyDown}
           tabIndex={0}
-          style={newStyle || style}
+          style={newStyle}
           {...rest}
         >
           <EuiI18n

From 16ecde8ef5aa56f7cf018667ad125a09df01b19a Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 13:12:41 -0800
Subject: [PATCH 20/24] [opinionated] Rename `defaultMaxWidth` class modifier

- to match `defaultMinWidth` modifier, used in EuiButtonDisplay (#6373)
---
 .../modal/__snapshots__/confirm_modal.test.tsx.snap           | 4 ++--
 src/components/modal/__snapshots__/modal.test.tsx.snap        | 2 +-
 src/components/modal/modal.styles.ts                          | 2 +-
 src/components/modal/modal.tsx                                | 2 +-
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
index 55ec4b44f6c..ab79a4d4291 100644
--- a/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap
@@ -12,7 +12,7 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-maxWidthDefault-confirmation"
+      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation"
       data-test-subj="test subject string"
       tabindex="0"
     >
@@ -110,7 +110,7 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-maxWidthDefault-confirmation"
+      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation"
       data-test-subj="test subject string"
       tabindex="0"
     >
diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
index a6737a2ac50..c992006b697 100644
--- a/src/components/modal/__snapshots__/modal.test.tsx.snap
+++ b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiModal renders 1`] = `
     >
       <div
         aria-label="aria-label"
-        class="euiModal testClass1 testClass2 emotion-euiModal-maxWidthDefault"
+        class="euiModal testClass1 testClass2 emotion-euiModal-defaultMaxWidth"
         data-test-subj="test subject string"
         tabindex="0"
       >
diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index b94e007295a..ce1b6c1abd3 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -58,7 +58,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     // Variants
-    maxWidthDefault: css`
+    defaultMaxWidth: css`
       max-inline-size: min(
         ${euiTheme.breakpoint.m}px,
         calc(100vw - ${euiTheme.size.base})
diff --git a/src/components/modal/modal.tsx b/src/components/modal/modal.tsx
index 93dd1eb320c..a9d7167fa23 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -72,7 +72,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
 
   const euiTheme = useEuiTheme();
   const styles = euiModalStyles(euiTheme);
-  const cssStyles = [styles.euiModal, maxWidth && styles.maxWidthDefault];
+  const cssStyles = [styles.euiModal, maxWidth && styles.defaultMaxWidth];
 
   const cssCloseIconStyles = [styles.euiModal__closeIcon];
 

From 2f46f294c2f63a7deb7f3d9a3a470155c42ab4ac Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 13:13:27 -0800
Subject: [PATCH 21/24] Fix `maxWidth` conditional class logic + write unit
 tests

---
 src/components/modal/modal.test.tsx | 56 ++++++++++++++++++++++++++++-
 src/components/modal/modal.tsx      |  5 ++-
 2 files changed, 59 insertions(+), 2 deletions(-)

diff --git a/src/components/modal/modal.test.tsx b/src/components/modal/modal.test.tsx
index cb289af7b84..d2843fdef27 100644
--- a/src/components/modal/modal.test.tsx
+++ b/src/components/modal/modal.test.tsx
@@ -7,7 +7,7 @@
  */
 
 import React from 'react';
-import { render } from '../../test/rtl';
+import { render, screen } from '../../test/rtl';
 import { requiredProps } from '../../test';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
@@ -26,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 a9d7167fa23..18090f91a08 100644
--- a/src/components/modal/modal.tsx
+++ b/src/components/modal/modal.tsx
@@ -72,7 +72,10 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
 
   const euiTheme = useEuiTheme();
   const styles = euiModalStyles(euiTheme);
-  const cssStyles = [styles.euiModal, maxWidth && styles.defaultMaxWidth];
+  const cssStyles = [
+    styles.euiModal,
+    maxWidth === true && styles.defaultMaxWidth,
+  ];
 
   const cssCloseIconStyles = [styles.euiModal__closeIcon];
 

From 3d0a9294f290c67b027e02defe3310dd17c231ca Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 13:19:39 -0800
Subject: [PATCH 22/24] Use `inset` shorthand

---
 src/components/modal/modal.styles.ts | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index ce1b6c1abd3..b795904c9b8 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -45,10 +45,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
         min-inline-size: 0;
         max-inline-size: none;
         max-block-size: 100vh;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-        inset-block-end: 0;
-        inset-block-start: 0;
+        inset: 0;
         border-radius: 0;
       }
 

From 95c5d69a96f60d173c92d88191742c8d634b5a15 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 13:27:12 -0800
Subject: [PATCH 23/24] [EuiModal] Fix box-shadows

---
 src/components/modal/modal.styles.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index b795904c9b8..9853f74196b 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -7,7 +7,7 @@
  */
 
 import { css } from '@emotion/react';
-import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
+import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
 import {
   euiCanAnimate,
   euiBreakpoint,
@@ -21,7 +21,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     euiModal: css`
-      ${euiShadow(euiThemeContext, 'l')}
+      ${euiShadowXLarge(euiThemeContext)}
       display: flex;
       flex-direction: column;
       max-block-size: 75vh; // We overflow the modal body based off this
@@ -65,7 +65,7 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
       min-inline-size: ${euiFormVariables(euiThemeContext).maxWidth};
 
       ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
-        ${euiShadow(euiThemeContext, 'l')}
+        ${euiShadowXLarge(euiThemeContext, { reverse: true })}
         inset-block-start: auto;
       }
     `,

From d73eaf2080d8bcd1aa864655fc1363b24d140d3f Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Fri, 18 Nov 2022 13:38:15 -0800
Subject: [PATCH 24/24] Restore `!important`s required for style.width
 overrides

---
 src/components/modal/modal.styles.ts | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/modal/modal.styles.ts b/src/components/modal/modal.styles.ts
index 9853f74196b..d7ac17fda5c 100644
--- a/src/components/modal/modal.styles.ts
+++ b/src/components/modal/modal.styles.ts
@@ -41,12 +41,14 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
 
       ${euiBreakpoint(euiThemeContext, ['xs', 's'])} {
         position: fixed;
-        inline-size: 100vw;
-        min-inline-size: 0;
-        max-inline-size: none;
-        max-block-size: 100vh;
         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