From d33112d7f51906e1fd339eb61e64dff7c476b5a8 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Tue, 9 Jan 2024 11:13:15 -0500
Subject: [PATCH] style(ComposedModal): add new classes to ComposedModal to fix
 alignment

---
 .../ComposedModal/ComposedModal.tsx           |  1 -
 .../components/ComposedModal/ModalHeader.tsx  | 25 +++++++++++++------
 .../styles/scss/components/modal/_modal.scss  |  1 +
 3 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/react/src/components/ComposedModal/ComposedModal.tsx b/packages/react/src/components/ComposedModal/ComposedModal.tsx
index 8a44f827ef73..35d3f4ab4dfe 100644
--- a/packages/react/src/components/ComposedModal/ComposedModal.tsx
+++ b/packages/react/src/components/ComposedModal/ComposedModal.tsx
@@ -13,7 +13,6 @@ import { isElement } from 'react-is';
 import PropTypes, { ReactNodeLike } from 'prop-types';
 import { ModalHeader, type ModalHeaderProps } from './ModalHeader';
 import { ModalFooter, type ModalFooterProps } from './ModalFooter';
-
 import cx from 'classnames';
 
 import toggleClass from '../../tools/toggleClass';
diff --git a/packages/react/src/components/ComposedModal/ModalHeader.tsx b/packages/react/src/components/ComposedModal/ModalHeader.tsx
index 1ddbc044454f..0f57c94ba9a2 100644
--- a/packages/react/src/components/ComposedModal/ModalHeader.tsx
+++ b/packages/react/src/components/ComposedModal/ModalHeader.tsx
@@ -14,6 +14,7 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
 import { usePrefix } from '../../internal/usePrefix';
+import { IconButton } from '../IconButton';
 
 type DivProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
 export interface ModalHeaderProps extends DivProps {
@@ -127,14 +128,22 @@ export const ModalHeader = React.forwardRef<HTMLDivElement, ModalHeaderProps>(
 
         {children}
 
-        <button
-          onClick={handleCloseButtonClick}
-          className={closeClass}
-          title={iconDescription}
-          aria-label={iconDescription}
-          type="button">
-          <Close size={20} className={closeIconClass} />
-        </button>
+        <div className={`${prefix}--modal-close-button`}>
+          <IconButton
+            className={closeClass}
+            label={iconDescription}
+            onClick={handleCloseButtonClick}
+            title={iconDescription}
+            aria-label={iconDescription}
+            align="left">
+            <Close
+              size={20}
+              aria-hidden="true"
+              tabIndex="-1"
+              className={closeIconClass}
+            />
+          </IconButton>
+        </div>
       </div>
     );
   }
diff --git a/packages/styles/scss/components/modal/_modal.scss b/packages/styles/scss/components/modal/_modal.scss
index 5b917710f651..a5a45e7f1b09 100644
--- a/packages/styles/scss/components/modal/_modal.scss
+++ b/packages/styles/scss/components/modal/_modal.scss
@@ -440,6 +440,7 @@
     inset-block-start: 0;
     inset-inline-end: 0;
   }
+
   .#{$prefix}--modal-close {
     padding: convert.to-rem(12px);
     border: 2px solid transparent;