From 05b6ba4e1ffc8d62a2b442f8ff777c28e8e99d30 Mon Sep 17 00:00:00 2001
From: Yossi Saadi <yossisa@monday.com>
Date: Wed, 4 Dec 2024 16:12:10 +0200
Subject: [PATCH] refactor(Modal): use string instead of enums (v3 way)

---
 .../ModalNew/ModalHeader/ModalHeader.tsx        | 17 +++++------------
 .../ModalTopActions/ModalTopActions.tsx         |  4 ++--
 .../footers/ModalFooterBase/ModalFooterBase.tsx |  6 +++---
 .../ModalBasicLayout/ModalBasicLayout.tsx       |  4 ++--
 .../components/ModalNew/layouts/ModalMedia.tsx  |  4 ++--
 .../ModalMediaLayout/ModalMediaLayout.tsx       |  4 ++--
 6 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx
index 0362ed07cf..5ac973b5eb 100644
--- a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx
+++ b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx
@@ -28,22 +28,15 @@ const ModalHeader = forwardRef(
 
     return (
       <Flex
-        gap={Flex.gaps.XS}
-        direction={Flex.directions.COLUMN}
-        align={Flex.align.START}
+        gap="xs"
+        direction="column"
+        align="start"
         ref={ref}
         className={cx(styles.header, className)}
         id={id}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_HEADER, id)}
       >
-        <Heading
-          id={titleId}
-          align={Text.align.INHERIT}
-          type={Heading.types.H2}
-          weight={Heading.weights.MEDIUM}
-          maxLines={2}
-          className={styles.title}
-        >
+        <Heading id={titleId} align="inherit" type="h2" weight="medium" maxLines={2} className={styles.title}>
           {title}
         </Heading>
         {description && (
@@ -55,7 +48,7 @@ const ModalHeader = forwardRef(
               />
             )}
             {typeof description === "string" ? (
-              <Text element="span" align={Text.align.INHERIT} type={Text.types.TEXT1}>
+              <Text element="span" align="inherit" type="text1">
                 {description}
               </Text>
             ) : (
diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx
index 5a06ca4e3e..e44eddac2d 100644
--- a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx
+++ b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx
@@ -19,8 +19,8 @@ const ModalTopActions = ({ renderAction, color, closeButtonAriaLabel, onClose }:
       <IconButton
         icon={CloseMedium}
         onClick={onClose}
-        size={IconButton.sizes.SMALL}
-        kind={IconButton.kinds.TERTIARY}
+        size="small"
+        kind="tertiary"
         color={buttonColor}
         ariaLabel={closeButtonAriaLabel}
       />
diff --git a/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx
index eaf4789cbb..dda0c58b1a 100644
--- a/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx
+++ b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx
@@ -16,14 +16,14 @@ const ModalFooterBase = forwardRef(
       <Flex
         ref={ref}
         id={id}
-        justify={Flex.justify.SPACE_BETWEEN}
-        gap={Flex.gaps.SMALL}
+        justify="space-between"
+        gap="small"
         className={cx(styles.footer, className)}
         data-testid={dataTestId}
       >
         <Button {...primaryButtonProps}>{primaryButtonText}</Button>
         {secondaryButton && (
-          <Button {...secondaryButtonProps} kind={Button.kinds.TERTIARY}>
+          <Button {...secondaryButtonProps} kind="tertiary">
             {secondaryButtonText}
           </Button>
         )}
diff --git a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.tsx b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.tsx
index 86b33b4ec6..87879e9716 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.tsx
+++ b/packages/core/src/components/ModalNew/layouts/ModalBasicLayout/ModalBasicLayout.tsx
@@ -21,8 +21,8 @@ const ModalBasicLayout = forwardRef(
     return (
       <>
         <Flex
-          direction={Flex.directions.COLUMN}
-          align={Flex.align.START}
+          direction="column"
+          align="start"
           ref={ref}
           className={cx(styles.layout, className)}
           id={id}
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMedia.tsx b/packages/core/src/components/ModalNew/layouts/ModalMedia.tsx
index 933af0bcfe..efc0523b54 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalMedia.tsx
+++ b/packages/core/src/components/ModalNew/layouts/ModalMedia.tsx
@@ -14,8 +14,8 @@ const ModalMedia = forwardRef(
       <Flex
         id={id}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_MEDIA, id)}
-        justify={Flex.justify.CENTER}
-        align={Flex.align.STRETCH}
+        justify="center"
+        align="stretch"
         ref={ref}
         className={cx(styles.media, className)}
       >
diff --git a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.tsx b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.tsx
index e11a792264..dfda9dd9ef 100644
--- a/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.tsx
+++ b/packages/core/src/components/ModalNew/layouts/ModalMediaLayout/ModalMediaLayout.tsx
@@ -16,8 +16,8 @@ const ModalMediaLayout = forwardRef(
     return (
       <Flex
         ref={ref}
-        direction={Flex.directions.COLUMN}
-        align={Flex.align.START}
+        direction="column"
+        align="start"
         className={cx(styles.layout, className)}
         id={id}
         data-testid={dataTestId || getTestId(ComponentDefaultTestId.MODAL_NEXT_MEDIA_LAYOUT, id)}