[Emotion] Convert EuiModal (#6321)

* [Emotion] Convert `modal` * Fix weird bug in Chrome with parent `overflow: hidden` and children with `image-mask` * Better styles and fixed `euiOverflowShadowStyles` * Adding CL * Added `euiAnimSlideInUp` * Removing unnecessary class name * REVERT ME - To test bug with `mask-image` * Added `shouldRenderCustomStyles()` tests * Cleaned up docs code and converted to TS * Adding bug fix in CL * CL again * CL again 😭 * Changing examples source types to TSX * Reverting example and renaming to `*.tsx` * Remove bug fix entry from CL * DRY out `initialFocus` types/prop docs + add `defaultFocusedButton` prop docs * [EuiModalHeader] misc cleanup * Clean up unnecessary width CSS * Simplify `style` logic + switch to logical property * [opinionated] Rename `defaultMaxWidth` class modifier - to match `defaultMinWidth` modifier, used in EuiButtonDisplay (#6373) * Fix `maxWidth` conditional class logic + write unit tests * Use `inset` shorthand * [EuiModal] Fix box-shadows * Restore `!important`s required for style.width overrides Co-authored-by: Constance Chen <[email protected]>
elastic · Nov 18, 2022 · 9efedf2 · 9efedf2
1 parent f753bc7
commit 9efedf2
Show file tree

Hide file tree

Showing 36 changed files with 433 additions and 275 deletions.
diff --git a/src-docs/src/views/modal/confirm_modal.js → src-docs/src/views/modal/confirm_modal.tsx b/src-docs/src/views/modal/confirm_modal.js → 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/views/modal/confirm_modal_loading.js → ...src/views/modal/confirm_modal_loading.tsx b/.../src/views/modal/confirm_modal_loading.js → ...src/views/modal/confirm_modal_loading.tsx
@@ -5,16 +5,18 @@ import {
   EuiConfirmModal,
   EuiFormRow,
   EuiFieldText,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [isLoading, setIsLoading] = useState(false);
-  clearTimeout(searchTimeout);
+
   const searchTimeout = setTimeout(() => {
     // Simulate a remotely-executed search.
     setIsLoading(false);
   }, 1200);
 
+  clearTimeout(searchTimeout);
+
   const [isModalVisible, setIsModalVisible] = useState(false);
   const showModal = () => {
     setIsModalVisible(true);
@@ -27,7 +29,7 @@ export default () => {
   };
 
   const [value, setValue] = useState('');
-  const onChange = (e) => {
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     setValue(e.target.value);
   };
 

diff --git a/src-docs/src/views/modal/modal.js → src-docs/src/views/modal/modal.tsx b/src-docs/src/views/modal/modal.js → src-docs/src/views/modal/modal.tsx
diff --git a/src-docs/src/views/modal/modal_example.js b/src-docs/src/views/modal/modal_example.js
@@ -131,7 +131,7 @@ export const ModalExample = {
     {
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: modalSource,
         },
       ],
@@ -167,7 +167,7 @@ export const ModalExample = {
       title: 'Forms in a modal',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: modalFormSource,
         },
       ],
@@ -192,7 +192,7 @@ export const ModalExample = {
       title: 'Confirm modal',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: confirmModalSource,
         },
       ],
@@ -214,7 +214,7 @@ export const ModalExample = {
       title: 'Loading and disabling confirm button',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: confirmModalLoadingSource,
         },
       ],
@@ -236,7 +236,7 @@ export const ModalExample = {
       title: 'Widths',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: modalWidthSource,
         },
       ],

diff --git a/src-docs/src/views/modal/modal_form.js → src-docs/src/views/modal/modal_form.tsx b/src-docs/src/views/modal/modal_form.js → 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 → src-docs/src/views/modal/modal_width.tsx b/src-docs/src/views/modal/modal_width.js → src-docs/src/views/modal/modal_width.tsx
@@ -8,8 +8,8 @@ import {
   EuiModalHeader,
   EuiModalHeaderTitle,
   EuiCodeBlock,
-} from '../../../../src/components';
-import { EuiSpacer } from '../../../../src/components/spacer';
+  EuiSpacer,
+} from '../../../../src';
 
 export default () => {
   const [isModalVisible, setIsModalVisible] = useState(false);

diff --git a/src/components/image/image_fullscreen_wrapper.styles.ts b/src/components/image/image_fullscreen_wrapper.styles.ts
@@ -6,11 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { css, keyframes } from '@emotion/react';
+import { css } from '@emotion/react';
 import {
   logicalCSS,
   logicalTextAlignCSS,
   euiCanAnimate,
+  euiAnimSlideInUp,
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
@@ -28,7 +29,7 @@ export const euiImageFullscreenWrapperStyles = (
       line-height: 0; // Fixes cropping when image is resized by forcing its height to be determined by the image not line-height
 
       ${euiCanAnimate} {
-        animation: ${euiImageFullScreen(euiTheme.size.xxxxl)}
+        animation: ${euiAnimSlideInUp(euiTheme.size.xxxxl)}
           ${euiTheme.animation.extraSlow} ${euiTheme.animation.bounce};
       }
 
@@ -42,15 +43,3 @@ export const euiImageFullscreenWrapperStyles = (
     `,
   };
 };
-
-const euiImageFullScreen = (size: string) => keyframes`
-  0% {
-    opacity: 0;
-    transform: translateY(${size});
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-`;
diff --git a/src/components/index.scss b/src/components/index.scss
@@ -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
@@ -12,13 +12,13 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
+      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation"
       data-test-subj="test subject string"
       tabindex="0"
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles"
+        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
         type="button"
       >
         <span
@@ -29,22 +29,20 @@ Array [
         />
       </button>
       <div
-        class="euiModalHeader"
+        class="euiModalHeader emotion-euiModalHeader"
       >
-        <div
-          class="euiModalHeader__title"
+        <h1
+          class="euiTitle euiModalHeader__title emotion-euiTitle-m"
           data-test-subj="confirmModalTitleText"
         >
-          <h1>
-            A confirmation modal
-          </h1>
-        </div>
+          A confirmation modal
+        </h1>
       </div>
       <div
-        class="euiModalBody"
+        class="euiModalBody emotion-euiModalBody"
       >
         <div
-          class="euiModalBody__overflow"
+          class="euiModalBody__overflow emotion-euiModalBody__overflow"
         >
           <div
             class="euiText emotion-euiText-m"
@@ -57,7 +55,7 @@ Array [
         </div>
       </div>
       <div
-        class="euiModalFooter"
+        class="euiModalFooter emotion-euiModalFooter"
       >
         <button
           class="euiButtonEmpty css-9t7nyf-empty-primary"
@@ -112,13 +110,13 @@ Array [
   >
     <div
       aria-label="aria-label"
-      class="euiModal euiModal--maxWidth-default euiModal--confirmation testClass1 testClass2"
+      class="euiModal euiModal--confirmation testClass1 testClass2 emotion-euiModal-defaultMaxWidth-confirmation"
       data-test-subj="test subject string"
       tabindex="0"
     >
       <button
         aria-label="Closes this modal window"
-        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles"
+        class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
         type="button"
       >
         <span
@@ -129,19 +127,17 @@ Array [
         />
       </button>
       <div
-        class="euiModalHeader"
+        class="euiModalHeader emotion-euiModalHeader"
       >
-        <div
-          class="euiModalHeader__title"
+        <h1
+          class="euiTitle euiModalHeader__title emotion-euiTitle-m"
           data-test-subj="confirmModalTitleText"
         >
-          <h1>
-            A confirmation modal
-          </h1>
-        </div>
+          A confirmation modal
+        </h1>
       </div>
       <div
-        class="euiModalFooter"
+        class="euiModalFooter emotion-euiModalFooter"
       >
         <button
           class="euiButtonEmpty css-9t7nyf-empty-primary"

diff --git a/src/components/modal/__snapshots__/modal.test.tsx.snap b/src/components/modal/__snapshots__/modal.test.tsx.snap
@@ -18,13 +18,13 @@ exports[`EuiModal renders 1`] = `
     >
       <div
         aria-label="aria-label"
-        class="euiModal euiModal--maxWidth-default testClass1 testClass2"
+        class="euiModal testClass1 testClass2 emotion-euiModal-defaultMaxWidth"
         data-test-subj="test subject string"
         tabindex="0"
       >
         <button
           aria-label="Closes this modal window"
-          class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles"
+          class="euiButtonIcon euiButtonIcon--xSmall euiModal__closeIcon emotion-euiButtonIcon-empty-text-hoverStyles-euiModal__closeIcon"
           type="button"
         >
           <span

diff --git a/src/components/modal/__snapshots__/modal_body.test.tsx.snap b/src/components/modal/__snapshots__/modal_body.test.tsx.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalBody 1`] = `
+exports[`EuiModalBody is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiModalBody testClass1 testClass2"
+  class="euiModalBody testClass1 testClass2 emotion-euiModalBody"
   data-test-subj="test subject string"
 >
   <div
-    class="euiModalBody__overflow"
+    class="euiModalBody__overflow emotion-euiModalBody__overflow"
   >
     children
   </div>

diff --git a/src/components/modal/__snapshots__/modal_footer.test.tsx.snap b/src/components/modal/__snapshots__/modal_footer.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalFooter 1`] = `
+exports[`EuiModalFooter is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiModalFooter testClass1 testClass2"
+  class="euiModalFooter testClass1 testClass2 emotion-euiModalFooter"
   data-test-subj="test subject string"
 >
   children

diff --git a/src/components/modal/__snapshots__/modal_header.test.tsx.snap b/src/components/modal/__snapshots__/modal_header.test.tsx.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalHeader 1`] = `
+exports[`EuiModalHeader is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiModalHeader testClass1 testClass2"
+  class="euiModalHeader testClass1 testClass2 emotion-euiModalHeader"
   data-test-subj="test subject string"
 >
   children

diff --git a/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap b/src/components/modal/__snapshots__/modal_header_title.test.tsx.snap
@@ -1,13 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders EuiModalHeaderTitle 1`] = `
-<div
+exports[`EuiModalHeaderTitle is rendered 1`] = `
+<h1
   aria-label="aria-label"
-  class="euiModalHeader__title testClass1 testClass2"
+  class="euiTitle euiModalHeader__title testClass1 testClass2 emotion-euiTitle-m"
   data-test-subj="test subject string"
 >
-  <h1>
-    children
-  </h1>
-</div>
+  children
+</h1>
 `;
diff --git a/src/components/modal/_index.scss b/src/components/modal/_index.scss