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)}