style(ComposedModal): add new classes to ComposedModal to fix alignment

carbon-design-system · Jan 9, 2024 · d33112d · d33112d
1 parent a77afec
commit d33112d
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 9 deletions.
diff --git 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
@@ -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
@@ -440,6 +440,7 @@
     inset-block-start: 0;
     inset-inline-end: 0;
   }
+
   .#{$prefix}--modal-close {
     padding: convert.to-rem(12px);
     border: 2px solid transparent;