fix(ModalDialog): align text with icon (#943)

* fix(ModalDialog): align text with icon * fix(ModalDialog): rmv margin mobile * fix(ModalDialog): rmv margin mobile
kronostechnologies · Jul 18, 2024 · 8d11142 · 8d11142
1 parent 6ed27f3
commit 8d11142
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 22 deletions.
diff --git 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
@@ -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,27 +21,17 @@ const ModalRoles: Record<DialogType, string> = {
     alert: 'alertdialog',
 };
 
-const StyledModal = styled(Modal)<{ $hasTitleIcon: boolean }>`
-    ${({ $hasTitleIcon }) => $hasTitleIcon && css`
-        padding-left: var(--spacing-4x);
-    `}
-`;
-
 const Subtitle = styled.h3<MobileDeviceContextProps>`
     font-size: ${({ isMobile }) => (isMobile ? 1.125 : 1)}rem;
     font-weight: var(--font-normal);
     line-height: ${({ isMobile }) => (isMobile ? 1.75 : 1.375)}rem;
     margin: var(--spacing-3x) 0 0;
 `;
 
-const ButtonContainer = styled.div<MobileDeviceContextProps & { $hasTitleIcon: boolean }>`
+const ButtonContainer = styled.div<MobileDeviceContextProps>`
     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)<MobileDeviceContextProps>`
@@ -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<ModalDialogProps> = ({
         const confirmButtonType = dialogType === 'alert' ? 'destructive-primary' : 'primary';
 
         return (
-            <ButtonContainer isMobile={isMobile} $hasTitleIcon={hasTitleIcon}>
+            <ButtonContainer isMobile={isMobile}>
                 {dialogType !== 'information' && (
                     <CancelButton
                         data-testid="cancel-button"
@@ -182,7 +171,7 @@ export const ModalDialog: VoidFunctionComponent<ModalDialogProps> = ({
     }
 
     return (
-        <StyledModal
+        <Modal
             ariaDescribedby={ariaDescribedby}
             ariaHideApp={ariaHideApp}
             ariaLabelledBy={titleId}
@@ -197,9 +186,8 @@ export const ModalDialog: VoidFunctionComponent<ModalDialogProps> = ({
             isOpen={isOpen}
             appElement={appElement}
             shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
-            $hasTitleIcon={hasTitleIcon}
         >
             {children}
-        </StyledModal>
+        </Modal>
     );
 };