[EuiModal] Source order adjusted to annouce modal title before close

packages/eui/changelogs/upcoming/8233.md

@@ -0,0 +1,9 @@
+**Enhancement**
+
+- Updated `EuiModal`
+    - Introduced support for passing the onClose prop to child components dynamically.
+    - Enhanced flexibility by using React.Children.map and React.cloneElement to inject the onClose functionality into child elements where applicable.
+
+- Updated `EuiModalHeader`
+    - Added an accessible close button (EuiButtonIcon) integrated directly within the header.
+    - Introduced an optional onClose prop to enable parent-driven modal closing functionality.

packages/eui/i18ntokens.json

@@ -5634,7 +5634,7 @@
     "filepath": "src/components/markdown_editor/markdown_editor_toolbar.tsx"
   },
   {
-    "token": "euiModal.closeModal",
+    "token": "euiModalHeader.closeModal",
     "defString": "Closes this modal window",
     "highlighting": "string",
     "loc": {
@@ -5649,7 +5649,7 @@
         "index": 3276
       }
     },
-    "filepath": "src/components/modal/modal.tsx"
+    "filepath": "src/components/modal/modal_header.tsx"
   },
   {
     "token": "euiPaginationButtonArrow.firstPage",

packages/eui/i18ntokens_changelog.json

@@ -3810,7 +3810,7 @@
         "value": "App navigation"
       },
       {
-        "token": "euiModal.closeModal",
+        "token": "euiModalHeader.closeModal",
         "changeType": "added",
         "value": "Closes this modal window"
       },

packages/eui/src/components/modal/__snapshots__/confirm_modal.test.tsx.snap

@@ -18,18 +18,6 @@ exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
       role="alertdialog"
       tabindex="0"
     >
-      <button
-        aria-label="Closes this modal window"
-        class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
       <div
         class="euiModalHeader emotion-euiModalHeader"
       >
@@ -39,6 +27,18 @@ exports[`EuiConfirmModal renders EuiConfirmModal 1`] = `
         >
           A confirmation modal
         </h1>
+        <button
+          aria-label="Closes this modal window"
+          class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
       </div>
       <div
         class="euiModalBody emotion-euiModalBody"
@@ -118,18 +118,6 @@ exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty
       role="alertdialog"
       tabindex="0"
     >
-      <button
-        aria-label="Closes this modal window"
-        class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
       <div
         class="euiModalHeader emotion-euiModalHeader"
       >
@@ -139,6 +127,18 @@ exports[`EuiConfirmModal renders EuiConfirmModal without EuiModalBody, if empty
         >
           A confirmation modal
         </h1>
+        <button
+          aria-label="Closes this modal window"
+          class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
+          type="button"
+        >
+          <span
+            aria-hidden="true"
+            class="euiButtonIcon__icon"
+            color="inherit"
+            data-euiicon-type="cross"
+          />
+        </button>
       </div>
       <div
         class="euiModalFooter emotion-euiModalFooter"

packages/eui/src/components/modal/__snapshots__/modal.test.tsx.snap

@@ -24,18 +24,6 @@ exports[`EuiModal renders 1`] = `
         role="dialog"
         tabindex="0"
       >
-        <button
-          aria-label="Closes this modal window"
-          class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiButtonIcon__icon"
-            color="inherit"
-            data-euiicon-type="cross"
-          />
-        </button>
         children
       </div>
     </div>

packages/eui/src/components/modal/__snapshots__/modal_header.test.tsx.snap

@@ -7,5 +7,17 @@ exports[`EuiModalHeader is rendered 1`] = `
   data-test-subj="test subject string"
 >
   children
+  <button
+    aria-label="Closes this modal window"
+    class="euiButtonIcon euiModal__closeIcon emotion-euiButtonIcon-xs-empty-text-euiModal__closeIcon"
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="euiButtonIcon__icon"
+      color="inherit"
+      data-euiicon-type="cross"
+    />
+  </button>
 </div>
 `;

packages/eui/src/components/modal/confirm_modal.tsx

@@ -118,7 +118,7 @@ export const EuiConfirmModal: FunctionComponent<EuiConfirmModalProps> = ({
 
   if (title) {
     modalTitle = (
-      <EuiModalHeader>
+      <EuiModalHeader onClose={onCancel}>
         <EuiModalHeaderTitle
           data-test-subj="confirmModalTitleText"
           {...titleProps}

packages/eui/src/components/modal/modal.spec.tsx

@@ -38,7 +38,7 @@ const Modal = ({ content }: { content?: ReactNode }) => {
       <EuiButton onClick={showModal}>Show confirm modal</EuiButton>
       {isModalVisible && (
         <EuiModal {...modalProps}>
-          <EuiModalHeader>
+          <EuiModalHeader onClose={modalProps.onClose}>
             <EuiModalHeaderTitle>Title of modal</EuiModalHeaderTitle>
           </EuiModalHeader>
 

packages/eui/src/components/modal/modal.stories.tsx

@@ -48,7 +48,7 @@ export const Playground: Story = {
   args: {
     children: (
       <>
-        <EuiModalHeader>
+        <EuiModalHeader onClose={action('onClose')}>
           <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
 
@@ -66,7 +66,7 @@ export const ToggleExample: Story = {
   args: {
     children: (
       <>
-        <EuiModalHeader>
+        <EuiModalHeader onClose={action('onClose')}>
           <EuiModalHeaderTitle>Modal title</EuiModalHeaderTitle>
         </EuiModalHeader>
 
@@ -94,7 +94,7 @@ export const InitialFocus: Story = {
     };
     return (
       <StatefulModal aria-labelledby="modalTitleId" {...args}>
-        <EuiModalHeader>
+        <EuiModalHeader onClose={action('onClose')}>
           <EuiModalHeaderTitle id="modalTitleId">
             Modal title
           </EuiModalHeaderTitle>

packages/eui/src/components/modal/modal.styles.ts

@@ -73,11 +73,5 @@ export const euiModalStyles = (euiThemeContext: UseEuiTheme) => {
         inset-block-start: auto;
       }
     `,
-    euiModal__closeIcon: css`
-      position: absolute;
-      inset-inline-end: ${euiTheme.size.xs};
-      inset-block-start: ${euiTheme.size.xs};
-      z-index: 3;
-    `,
   };
 };

packages/eui/src/components/modal/modal.tsx

@@ -12,11 +12,8 @@ import classnames from 'classnames';
 import { keys, useEuiTheme } from '../../services';
 import { isDOMNode } from '../../utils';
 
-import { EuiButtonIcon } from '../button';
-
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiOverlayMask } from '../overlay_mask';
-import { EuiI18n } from '../i18n';
 
 import { euiModalStyles } from './modal.styles';
 
@@ -51,6 +48,14 @@ export interface EuiModalProps extends HTMLAttributes<HTMLDivElement> {
   role?: 'dialog' | 'alertdialog';
 }
 
+type ChildWithOnClose = React.ReactElement<{
+  onClose: (
+    event?:
+      | React.KeyboardEvent<HTMLDivElement>
+      | React.MouseEvent<HTMLButtonElement>
+  ) => void;
+}>;
+
 export const EuiModal: FunctionComponent<EuiModalProps> = ({
   className,
   children,
@@ -89,7 +94,12 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
     maxWidth === true && styles.defaultMaxWidth,
   ];
 
-  const cssCloseIconStyles = [styles.euiModal__closeIcon];
+  const enhancedChildren = React.Children.map(children, (child) => {
+    if (React.isValidElement(child)) {
+      return React.cloneElement(child as ChildWithOnClose, { onClose });
+    }
+    return child;
+  });
 
   return (
     <EuiOverlayMask>
@@ -104,22 +114,7 @@ export const EuiModal: FunctionComponent<EuiModalProps> = ({
           aria-modal={true}
           {...rest}
         >
-          <EuiI18n
-            token="euiModal.closeModal"
-            default="Closes this modal window"
-          >
-            {(closeModal: string) => (
-              <EuiButtonIcon
-                iconType="cross"
-                onClick={onClose}
-                css={cssCloseIconStyles}
-                className="euiModal__closeIcon"
-                color="text"
-                aria-label={closeModal}
-              />
-            )}
-          </EuiI18n>
-          {children}
+          {enhancedChildren}
         </div>
       </EuiFocusTrap>
     </EuiOverlayMask>

packages/eui/src/components/modal/modal_header.styles.ts

@@ -30,5 +30,11 @@ export const euiModalHeaderStyles = (euiThemeContext: UseEuiTheme) => {
         padding-block-start: ${euiTheme.size.s};
       }
     `,
+    euiModal__closeIcon: css`
+      position: absolute;
+      inset-inline-end: ${euiTheme.size.xs};
+      inset-block-start: ${euiTheme.size.xs};
+      z-index: 3;
+    `,
   };
 };

packages/eui/src/components/modal/modal_header.test.tsx

@@ -13,12 +13,18 @@ import { render } from '../../test/rtl';
 
 import { EuiModalHeader } from './modal_header';
 
+const onClose = jest.fn;
+
 describe('EuiModalHeader', () => {
-  shouldRenderCustomStyles(<EuiModalHeader>children</EuiModalHeader>);
+  shouldRenderCustomStyles(
+    <EuiModalHeader onClose={onClose}>children</EuiModalHeader>
+  );
 
   test('is rendered', () => {
     const { container } = render(
-      <EuiModalHeader {...requiredProps}>children</EuiModalHeader>
+      <EuiModalHeader onClose={onClose} {...requiredProps}>
+        children
+      </EuiModalHeader>
     );
     expect(container.firstChild).toMatchSnapshot();
   });

packages/eui/src/components/modal/modal_header.tsx

@@ -13,24 +13,50 @@ import { CommonProps } from '../common';
 import { useEuiTheme } from '../../services';
 import { euiModalHeaderStyles } from './modal_header.styles';
 
+import { EuiButtonIcon } from '../button';
+import { EuiI18n } from '../i18n';
 export type EuiModalHeaderProps = FunctionComponent<
-  HTMLAttributes<HTMLDivElement> & CommonProps
+  HTMLAttributes<HTMLDivElement> &
+    CommonProps & {
+      onClose?: (
+        event:
+          | React.KeyboardEvent<HTMLDivElement>
+          | React.MouseEvent<HTMLButtonElement>
+      ) => void;
+    }
 >;
 
 export const EuiModalHeader: EuiModalHeaderProps = ({
   className,
   children,
+  onClose,
   ...rest
 }) => {
   const classes = classnames('euiModalHeader', className);
 
   const euiTheme = useEuiTheme();
   const styles = euiModalHeaderStyles(euiTheme);
   const cssStyles = [styles.euiModalHeader];
+  const cssCloseIconStyles = [styles.euiModal__closeIcon];
 
   return (
     <div css={cssStyles} className={classes} {...rest}>
       {children}
+      <EuiI18n
+        token="euiModalHeader.closeModal"
+        default="Closes this modal window"
+      >
+        {(closeModal: string) => (
+          <EuiButtonIcon
+            iconType="cross"
+            css={cssCloseIconStyles}
+            className="euiModal__closeIcon"
+            color="text"
+            onClick={onClose}
+            aria-label={closeModal}
+          />
+        )}
+      </EuiI18n>
     </div>
   );
 };