From 595f0b481a267a75b4dfd0cbc92db429139c8096 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Mon, 7 Oct 2024 11:32:16 +0300 Subject: [PATCH 1/3] feat(ModalFooterBase): allow passing all button props to primary and secondary --- .../ModalFooter/ModalFooterBase/ModalFooterBase.tsx | 10 +++++----- .../ModalFooterBase/ModalFooterBase.types.ts | 2 +- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx b/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx index 71a541f4e6..eaf4789cbb 100644 --- a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx +++ b/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx @@ -10,6 +10,8 @@ const ModalFooterBase = forwardRef( { primaryButton, secondaryButton, renderAction, id, className, "data-testid": dataTestId }: ModalFooterBaseProps, ref: React.ForwardedRef ) => { + const { text: primaryButtonText, ...primaryButtonProps } = primaryButton; + const { text: secondaryButtonText, ...secondaryButtonProps } = secondaryButton || {}; return ( - + {secondaryButton && ( - )} {renderAction} diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts b/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts index 9627288a69..c3f6469ad1 100644 --- a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts +++ b/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts @@ -2,7 +2,7 @@ import { ButtonProps } from "../../../Button"; import React from "react"; import { VibeComponentProps } from "../../../../types"; -export interface ModalFooterActionProps extends Pick { +export interface ModalFooterActionProps extends Omit { text: string; } From 336db9eb79f72dae29a45e5d4fbf309156e32558 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Mon, 7 Oct 2024 11:34:55 +0300 Subject: [PATCH 2/3] refactor(ModalFooterBase): move to footers folder --- .../ModalFooterBase/ModalFooterBase.module.scss | 0 .../{ModalFooter => footers}/ModalFooterBase/ModalFooterBase.tsx | 0 .../ModalFooterBase/ModalFooterBase.types.ts | 0 .../ModalFooterBase/__tests__/ModalFooterBase.test.tsx | 0 4 files changed, 0 insertions(+), 0 deletions(-) rename packages/core/src/components/ModalNew/{ModalFooter => footers}/ModalFooterBase/ModalFooterBase.module.scss (100%) rename packages/core/src/components/ModalNew/{ModalFooter => footers}/ModalFooterBase/ModalFooterBase.tsx (100%) rename packages/core/src/components/ModalNew/{ModalFooter => footers}/ModalFooterBase/ModalFooterBase.types.ts (100%) rename packages/core/src/components/ModalNew/{ModalFooter => footers}/ModalFooterBase/__tests__/ModalFooterBase.test.tsx (100%) diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.module.scss b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.module.scss similarity index 100% rename from packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.module.scss rename to packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.module.scss diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx similarity index 100% rename from packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.tsx rename to packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.tsx diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts b/packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts similarity index 100% rename from packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/ModalFooterBase.types.ts rename to packages/core/src/components/ModalNew/footers/ModalFooterBase/ModalFooterBase.types.ts diff --git a/packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/__tests__/ModalFooterBase.test.tsx b/packages/core/src/components/ModalNew/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx similarity index 100% rename from packages/core/src/components/ModalNew/ModalFooter/ModalFooterBase/__tests__/ModalFooterBase.test.tsx rename to packages/core/src/components/ModalNew/footers/ModalFooterBase/__tests__/ModalFooterBase.test.tsx From d355056923ee1facc5213be0962208fd062d6d7e Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Mon, 7 Oct 2024 16:21:21 +0300 Subject: [PATCH 3/3] feat(ModalFooter): basic modal footer --- .../ModalFooter/ModalFooter.module.scss | 12 +++++++ .../footers/ModalFooter/ModalFooter.tsx | 32 +++++++++++++++++++ .../footers/ModalFooter/ModalFooter.types.ts | 6 ++++ packages/core/src/tests/constants.ts | 1 + 4 files changed, 51 insertions(+) create mode 100644 packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss create mode 100644 packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx create mode 100644 packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss new file mode 100644 index 0000000000..081864ab77 --- /dev/null +++ b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.module.scss @@ -0,0 +1,12 @@ +.primary { + order: 2; + + &:only-child { + margin-left: auto; + } +} + +.secondary { + order: 1; + margin-left: auto; +} diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx new file mode 100644 index 0000000000..1ee139f4c8 --- /dev/null +++ b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.tsx @@ -0,0 +1,32 @@ +import React, { forwardRef } from "react"; +import cx from "classnames"; +import ModalFooterBase from "../ModalFooterBase/ModalFooterBase"; +import { getTestId } from "../../../../tests/test-ids-utils"; +import { ComponentDefaultTestId } from "../../../../tests/constants"; +import { ModalFooterProps } from "./ModalFooter.types"; +import styles from "./ModalFooter.module.scss"; + +const ModalFooter = forwardRef( + ( + { primaryButton, secondaryButton, renderSideAction, "data-testid": dataTestId, className, id }: ModalFooterProps, + ref: React.ForwardedRef + ) => { + const primary = { ...primaryButton, className: cx(primaryButton.className, styles.primary) }; + const secondary = secondaryButton + ? { ...secondaryButton, className: cx(secondaryButton.className, styles.secondary) } + : undefined; + return ( + + ); + } +); + +export default ModalFooter; diff --git a/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts new file mode 100644 index 0000000000..1ce64b56ca --- /dev/null +++ b/packages/core/src/components/ModalNew/footers/ModalFooter/ModalFooter.types.ts @@ -0,0 +1,6 @@ +import React from "react"; +import { ModalFooterBaseProps } from "../ModalFooterBase/ModalFooterBase.types"; + +export interface ModalFooterProps extends Omit { + renderSideAction?: React.ReactNode; +} diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts index f8c8a4e3b1..9a3fb2b760 100644 --- a/packages/core/src/tests/constants.ts +++ b/packages/core/src/tests/constants.ts @@ -107,6 +107,7 @@ export enum ComponentDefaultTestId { MODAL_NEXT_OVERLAY = "modal-overlay", MODAL_NEXT_HEADER = "modal-header", MODAL_NEXT_CONTENT = "modal-content", + MODAL_NEXT_FOOTER = "modal-footer", FORMATTED_NUMBER = "formatted-number", HIDDEN_TEXT = "hidden-text", DIALOG_CONTENT_CONTAINER = "dialog-content-container",