[Emotion] Convert EuiModal

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

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);
-  }
-`;

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

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"

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

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>

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

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

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>
 `;