[CCUBE-2221][ZZ] feat: migrate ESignature to Modal v2

docs/component-catalog.json

@@ -478,7 +478,7 @@
         {
             "name": "ModalV2",
             "importPath": "@lifesg/react-design-system/modal-v2",
-            "description": "A composable modal dialog with slot-based content layout.  Use `ModalV2` when you need a controlled overlay dialog with structured content slots.  Sub-components: - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop that makes the card fill the viewport. - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback. - `ModalV2.Content` — container for the body content of the modal card. - `ModalV2.Footer` — footer area for primary and secondary action buttons.",
+            "description": "A composable modal dialog with slot-based content layout.  Use `ModalV2` when you need a controlled overlay dialog with structured content slots.  Sub-components: - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop that makes the card fill the viewport, and a `fillHeight` prop that stretches the slots to fill a size-constrained card. - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback. - `ModalV2.Content` — container for the body content of the modal card. - `ModalV2.Footer` — footer area for primary and secondary action buttons.",
             "keywords": ["dialog", "overlay", "popup"]
         },
         {

src/e-signature/e-signature.styles.ts

@@ -1,11 +1,7 @@
 import { css } from "@linaria/core";
 
-import * as modalStyles from "../modal/modal.styles";
-import { Border, Colour, Font, MediaQuery, Radius, Spacing } from "../theme";
-
-// =============================================================================
-// STYLING
-// =============================================================================
+import { headerTokens, slotSpacerTokens } from "../modal-v2/slots/slot-styles";
+import { Border, Colour, MediaQuery, Radius, Shadow, Spacing } from "../theme";
 
 // -----------------------------------------------------------------------------
 // MAIN FIELD
@@ -71,56 +67,69 @@ export const instructions = css`
 // SIGNATURE MODAL
 // -----------------------------------------------------------------------------
 
-export const scrollableModal = css`
-    /* increase specificity as the styles are overwritten */
-    && {
-        height: 100%;
-        overflow-y: auto;
-    }
-`;
-
-export const growContainer = css`
-    width: 100%;
-    margin: auto;
-    padding: ${Spacing["layout-xxl"]} ${Spacing["layout-sm"]};
-
-    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape="true"] {
-        padding: 0;
-        width: 100%;
-        height: 100%;
-    }
-`;
-
-export const modalBox = css`
+export const modalCard = css`
     width: 100%;
     height: 29rem;
     max-width: 672px;
     max-height: none;
     margin: 0 auto;
     padding: ${Spacing["spacing-16"]};
+    box-shadow: ${Shadow["lg-strong"]};
 
-    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape="true"] {
-        display: flex;
-        flex-direction: column;
-        max-width: none;
-        height: 100%;
-        border-radius: 0;
-        padding: 0;
+    ${slotSpacerTokens.contentLastChildMarginBottom}: 0;
+`;
+
+export const modalHeader = css`
+    ${headerTokens.padding}: 0 0 ${Spacing["spacing-16"]};
+    position: relative;
+
+    & > button {
+        position: absolute;
+        top: 0;
+        right: 0;
+    }
 
-        ${modalStyles.tokens.closeButton.topInset}: ${Spacing["spacing-8"]};
-        ${modalStyles.tokens.closeButton.rightInset}: ${Spacing["spacing-20"]};
+    & > div[aria-hidden] {
+        display: none;
+    }
+
+    ${MediaQuery.MaxWidth.sm} {
+        &[data-mobile-landscape] {
+            ${headerTokens.padding}: ${Spacing["spacing-12"]}
+                ${Spacing["spacing-20"]};
+        }
+
+        &[data-mobile-landscape] > button {
+            top: ${Spacing["spacing-8"]};
+            right: ${Spacing["spacing-20"]};
+        }
+    }
+
+    &[data-mobile-landscape="true"] {
+        ${headerTokens.padding}: ${Spacing["spacing-12"]}
+            ${Spacing["spacing-20"]};
+    }
+
+    &[data-mobile-landscape="true"] > button {
+        top: ${Spacing["spacing-8"]};
+        right: ${Spacing["spacing-20"]};
     }
 `;
 
-export const modalTitle = css`
-    ${Font["body-baseline-semibold"]}
-    color: ${Colour["text"]};
-    margin-bottom: ${Spacing["spacing-16"]};
-    text-align: center;
+export const modalContent = css`
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
 
-    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape="true"] {
-        ${Font["body-md-semibold"]}
-        margin: ${Spacing["spacing-12"]} 0;
+    ${MediaQuery.MaxWidth.sm} {
+        &[data-mobile-landscape] {
+            flex: 1;
+        }
+    }
+
+    &[data-mobile-landscape="true"] {
+        flex: 1;
     }
 `;
 
@@ -130,12 +139,16 @@ export const eSignatureContainer = css`
     border-radius: ${Radius["lg"]};
     overflow: hidden;
 
-    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape="true"] {
-        border-radius: 0;
-        flex: 1;
+    ${MediaQuery.MaxWidth.sm} {
+        &[data-mobile-landscape] {
+            border-radius: 0;
+            flex: 1;
+        }
     }
 
     &[data-mobile-landscape="true"] {
+        height: auto;
+        flex: 1;
         background: ${Colour["bg-strong"]};
     }
 `;
@@ -184,28 +197,26 @@ export const modalButtons = css`
     justify-content: space-between;
     margin-top: ${Spacing["spacing-16"]};
 
-    ${MediaQuery.MaxWidth.sm} {
-        flex-direction: column-reverse;
-        margin: ${Spacing["spacing-16"]} ${Spacing["spacing-24"]}
-            ${Spacing["spacing-48"]};
-        gap: ${Spacing["spacing-16"]};
+    & > button {
+        width: 8.5rem;
     }
 
-    &[data-mobile-landscape="true"] {
-        flex-direction: row;
-        margin: ${Spacing["spacing-16"]} ${Spacing["spacing-20"]};
-    }
-`;
-
-export const modalActionButton = css`
-    width: 8.5rem;
-
     ${MediaQuery.MaxWidth.sm} {
-        width: 100%;
+        &[data-mobile-landscape] {
+            flex-direction: column-reverse;
+            margin: ${Spacing["spacing-16"]} ${Spacing["spacing-24"]}
+                ${Spacing["spacing-48"]};
+            gap: ${Spacing["spacing-16"]};
+        }
+
+        &[data-mobile-landscape] > button {
+            width: 100%;
+        }
     }
 
     &[data-mobile-landscape="true"] {
-        height: 2.5rem;
+        flex-direction: row;
+        margin: ${Spacing["spacing-16"]} ${Spacing["spacing-20"]};
     }
 `;
 

src/e-signature/e-signature.tsx

@@ -3,7 +3,7 @@ import { lazy, Suspense, useEffect, useRef, useState } from "react";
 
 import { Button } from "../button";
 import { DashedBorder } from "../dashed-border";
-import { Modal } from "../modal";
+import { ModalV2 } from "../modal-v2";
 import { ProgressBar } from "../shared/progress-bar";
 import {
     Border,
@@ -142,26 +142,37 @@ export const ESignature = (props: EsignatureProps) => {
 
     const renderModal = () => {
         return (
-            <Modal
-                className={styles.scrollableModal}
+            <ModalV2
                 data-testid="signature-modal"
                 show={showModal}
+                onClose={() => setShowModal(false)}
             >
-                <div
-                    className={styles.growContainer}
+                <ModalV2.Card
+                    className={styles.modalCard}
                     data-mobile-landscape={isMobileLandscape}
+                    fullscreen={isMobile || isMobileLandscape}
+                    fillHeight
                 >
-                    <Modal.Box
-                        className={styles.modalBox}
+                    <ModalV2.Header
+                        title={
+                            isMobile || isMobileLandscape ? (
+                                <Typography.BodyMD weight="semibold">
+                                    Signature
+                                </Typography.BodyMD>
+                            ) : (
+                                <Typography.BodyBL weight="semibold">
+                                    Signature
+                                </Typography.BodyBL>
+                            )
+                        }
+                        closeButtonPosition="right"
+                        className={styles.modalHeader}
+                        data-mobile-landscape={isMobileLandscape}
+                    />
+                    <ModalV2.Content
+                        className={styles.modalContent}
                         data-mobile-landscape={isMobileLandscape}
-                        onClose={() => setShowModal(false)}
                     >
-                        <h2
-                            className={styles.modalTitle}
-                            data-mobile-landscape={isMobileLandscape}
-                        >
-                            Signature
-                        </h2>
                         <div
                             className={styles.eSignatureContainer}
                             data-mobile-landscape={isMobileLandscape}
@@ -189,8 +200,6 @@ export const ESignature = (props: EsignatureProps) => {
                             data-mobile-landscape={isMobileLandscape}
                         >
                             <Button
-                                className={styles.modalActionButton}
-                                data-mobile-landscape={isMobileLandscape}
                                 sizeType={
                                     isMobileLandscape ? "small" : "default"
                                 }
@@ -206,8 +215,6 @@ export const ESignature = (props: EsignatureProps) => {
                                 Clear
                             </Button>
                             <Button
-                                className={styles.modalActionButton}
-                                data-mobile-landscape={isMobileLandscape}
                                 sizeType={
                                     isMobileLandscape ? "small" : "default"
                                 }
@@ -217,9 +224,9 @@ export const ESignature = (props: EsignatureProps) => {
                                 Save
                             </Button>
                         </div>
-                    </Modal.Box>
-                </div>
-            </Modal>
+                    </ModalV2.Content>
+                </ModalV2.Card>
+            </ModalV2>
         );
     };
 

src/modal-v2/modal-v2.tsx

@@ -138,14 +138,14 @@ const Base = ({
  * content slots.
  *
  * Sub-components:
- * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop that makes the card fill the viewport.
+ * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop that makes the card fill the viewport, and a `fillHeight` prop that stretches the slots to fill a size-constrained card.
  * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.
  * - `ModalV2.Content` — container for the body content of the modal card.
  * - `ModalV2.Footer` — footer area for primary and secondary action buttons.
  * @keywords dialog, overlay, popup
  */
 export const ModalV2 = Object.assign(Base, {
-    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports a `fullscreen` prop. */
+    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. Supports `fullscreen` and `fillHeight` props. */
     Card,
     /** Renders an accessible close button that invokes the modal's `onClose` callback. */
     CloseButton,

src/modal-v2/slots/card.tsx

@@ -19,6 +19,7 @@ function CardInner(
         className,
         elementRef,
         fullscreen,
+        fillHeight,
         ...otherProps
     }: ModalCardProps,
     ref: React.ForwardedRef<HTMLDivElement>
@@ -62,6 +63,7 @@ function CardInner(
             ref={mergeRefs(ref, elementRef)}
             id={id}
             data-testid={testId}
+            data-fullscreen={fullscreen || undefined}
             {...otherProps}
             onClick={handleOnClick}
             className={clsx(
@@ -74,7 +76,7 @@ function CardInner(
                 data-has-close-button={!!hasHeader}
                 className={clsx(
                     styles.slotSpacer,
-                    fullscreen && styles.fullscreenSlotSpacer
+                    (fullscreen || fillHeight) && styles.fillHeightSlotSpacer
                 )}
             >
                 {ContentSlot}

src/modal-v2/slots/header.tsx

@@ -33,7 +33,7 @@ export const Header = ({
             >
                 <CrossIcon aria-hidden />
             </ClickableIcon>
-            {title && <span className={styles.headerTitle}>{title}</span>}
+            {title && <div className={styles.headerTitle}>{title}</div>}
             {title && <div className={styles.headerSpacer} aria-hidden />}
         </div>
     );