diff --git a/packages/react/src/components/modal/modal-dialog.test.tsx.snap b/packages/react/src/components/modal/modal-dialog.test.tsx.snap index 3a51ed88bc..de367adfdd 100644 --- a/packages/react/src/components/modal/modal-dialog.test.tsx.snap +++ b/packages/react/src/components/modal/modal-dialog.test.tsx.snap @@ -360,7 +360,7 @@ exports[`Modal-Dialog Matches snapshot (custom button labels) 1`] = ` aria-describedby="modal-description" aria-labelledby="uuid1" aria-modal="true" - class="ReactModal__Content c1 " + class="ReactModal__Content c1" role="dialog" tabindex="-1" > @@ -623,7 +623,7 @@ exports[`Modal-Dialog Matches snapshot (custom footer content) 1`] = ` aria-describedby="modal-description" aria-labelledby="uuid1" aria-modal="true" - class="ReactModal__Content c1 " + class="ReactModal__Content c1" role="dialog" tabindex="-1" > @@ -1009,7 +1009,7 @@ exports[`Modal-Dialog Matches snapshot (only subtitle) 1`] = ` aria-describedby="modal-description" aria-labelledby="uuid1" aria-modal="true" - class="ReactModal__Content c1 " + class="ReactModal__Content c1" role="dialog" tabindex="-1" > @@ -1415,7 +1415,7 @@ exports[`Modal-Dialog Matches snapshot (opened, desktop) 1`] = ` aria-describedby="modal-description" aria-labelledby="uuid1" aria-modal="true" - class="ReactModal__Content c1 " + class="ReactModal__Content c1" role="dialog" tabindex="-1" > @@ -1763,7 +1763,7 @@ exports[`Modal-Dialog Matches snapshot (opened, mobile) 1`] = ` aria-describedby="modal-description" aria-labelledby="uuid1" aria-modal="true" - class="ReactModal__Content c1 " + class="ReactModal__Content c1" role="dialog" tabindex="-1" > diff --git a/packages/react/src/components/modal/modal-dialog.tsx b/packages/react/src/components/modal/modal-dialog.tsx index d5b0eaa220..a548d28e8b 100644 --- a/packages/react/src/components/modal/modal-dialog.tsx +++ b/packages/react/src/components/modal/modal-dialog.tsx @@ -1,5 +1,5 @@ import { Fragment, ReactElement, ReactNode, Ref, useMemo, useRef, VoidFunctionComponent } from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { useTranslation } from '../../i18n/use-translation'; import { v4 as uuid } from '../../utils/uuid'; import { Button } from '../buttons/button'; @@ -21,12 +21,6 @@ const ModalRoles: Record = { alert: 'alertdialog', }; -const StyledModal = styled(Modal)<{ $hasTitleIcon: boolean }>` - ${({ $hasTitleIcon }) => $hasTitleIcon && css` - padding-left: var(--spacing-4x); - `} -`; - const Subtitle = styled.h3` font-size: ${({ isMobile }) => (isMobile ? 1.125 : 1)}rem; font-weight: var(--font-normal); @@ -34,14 +28,10 @@ const Subtitle = styled.h3` margin: var(--spacing-3x) 0 0; `; -const ButtonContainer = styled.div` +const ButtonContainer = styled.div` display: flex; flex-direction: ${({ isMobile }) => (isMobile ? 'column' : 'unset')}; justify-content: end; - - ${({ isMobile, $hasTitleIcon }) => (isMobile && $hasTitleIcon) && css` - margin-left: calc(var(--spacing-4x) * -1); - `} `; const ConfirmButton = styled(Button)` @@ -62,7 +52,6 @@ const TitleIcon = styled(Icon)` const StyledHeadingWrapperComponent = styled(HeadingWrapper)` align-items: center; display: flex; - margin-left: calc(-1 * var(--spacing-4x)); `; export interface ModalDialogProps { @@ -161,7 +150,7 @@ export const ModalDialog: VoidFunctionComponent = ({ const confirmButtonType = dialogType === 'alert' ? 'destructive-primary' : 'primary'; return ( - + {dialogType !== 'information' && ( = ({ } return ( - = ({ isOpen={isOpen} appElement={appElement} shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} - $hasTitleIcon={hasTitleIcon} > {children} - + ); };