refactor(Modal): use string instead of enums (v3 way)

mondaycom · Dec 4, 2024 · 05b6ba4 · 05b6ba4
1 parent ea4c54a
commit 05b6ba4
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 23 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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)}