From c6758062deb4343b4f8b6be38310b84c3c471d9f Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Wed, 11 Sep 2024 16:14:45 +0300 Subject: [PATCH 01/15] feat(ModalHeader): header component to be used in modal (#2413) --- .../ModalHeader/ModalHeader.module.scss | 14 +++++ .../ModalNew/ModalHeader/ModalHeader.tsx | 52 ++++++++++++++++ .../ModalNew/ModalHeader/ModalHeader.types.ts | 19 ++++++ .../__tests__/ModalHeader.test.tsx | 59 +++++++++++++++++++ packages/core/src/tests/constants.ts | 1 + 5 files changed, 145 insertions(+) create mode 100644 packages/core/src/components/ModalNew/ModalHeader/ModalHeader.module.scss create mode 100644 packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx create mode 100644 packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts create mode 100644 packages/core/src/components/ModalNew/ModalHeader/__tests__/ModalHeader.test.tsx diff --git a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.module.scss b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.module.scss new file mode 100644 index 0000000000..2da14a609b --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.module.scss @@ -0,0 +1,14 @@ +.header { + width: 100%; + align-self: flex-start; + + .title { + width: 100%; + } + + .descriptionIcon { + flex-shrink: 0; + margin-inline-end: var(--spacing-xs); + color: var(--icon-color); + } +} diff --git a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx new file mode 100644 index 0000000000..e10a9207f8 --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.tsx @@ -0,0 +1,52 @@ +import React, { forwardRef } from "react"; +import cx from "classnames"; +import { getTestId } from "../../../tests/test-ids-utils"; +import { ComponentDefaultTestId } from "../../../tests/constants"; +import styles from "./ModalHeader.module.scss"; +import { ModalHeaderProps } from "./ModalHeader.types"; +import Flex from "../../Flex/Flex"; +import Heading from "../../Heading/Heading"; +import Text from "../../Text/Text"; +import Icon from "../../Icon/Icon"; + +const ModalHeader = forwardRef( + ( + { title, description, descriptionIcon, className, id, "data-testid": dataTestId }: ModalHeaderProps, + ref: React.ForwardedRef + ) => { + return ( + + + {title} + + {description && ( + + {descriptionIcon && ( + + )} + {typeof description === "string" ? ( + + {description} + + ) : ( + description + )} + + )} + + ); + } +); + +export default ModalHeader; diff --git a/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts new file mode 100644 index 0000000000..8e5f9a750f --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalHeader/ModalHeader.types.ts @@ -0,0 +1,19 @@ +import React from "react"; +import { SubIcon, VibeComponentProps } from "../../../types"; + +interface WithoutDescription { + description?: never; + descriptionIcon?: never; +} + +interface WithDescription { + description: string | React.ReactNode; + descriptionIcon?: + | SubIcon + | { + name: SubIcon; + className?: string; + }; +} + +export type ModalHeaderProps = { title: string } & (WithoutDescription | WithDescription) & VibeComponentProps; diff --git a/packages/core/src/components/ModalNew/ModalHeader/__tests__/ModalHeader.test.tsx b/packages/core/src/components/ModalNew/ModalHeader/__tests__/ModalHeader.test.tsx new file mode 100644 index 0000000000..2ef1c295ed --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalHeader/__tests__/ModalHeader.test.tsx @@ -0,0 +1,59 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import ModalHeader from "../ModalHeader"; +import { Text as TextIcon } from "../../../Icon/Icons"; + +describe("ModalHeader", () => { + const title = "Test Modal Header"; + const simpleDescription = "This is a description"; + const descriptionIcon = TextIcon; + + it("renders the title correctly", () => { + const { getByText } = render(); + + expect(getByText(title)).toBeInTheDocument(); + }); + + it("renders the description correctly", () => { + const { getByText } = render(); + + expect(getByText(simpleDescription)).toBeInTheDocument(); + }); + + it("renders the description icon when provided", () => { + const { getByText, getByTestId } = render( + + ); + + expect(getByText(simpleDescription)).toBeInTheDocument(); + expect(getByTestId("icon")).toBeInTheDocument(); + }); + + it("renders custom description node", () => { + const customDescription = Custom description content; + + const { getByTestId } = render(); + + expect(getByTestId("custom-description")).toBeInTheDocument(); + }); + + it("does not render description when not provided", () => { + const { queryByText } = render(); + + expect(queryByText(simpleDescription)).not.toBeInTheDocument(); + }); + + it("renders with description icon when descriptionIcon is an object", () => { + const descriptionIconObject = { + name: TextIcon, + className: "with-custom-icon-class" + }; + + const { getByTestId } = render( + + ); + + const icon = getByTestId("icon"); + expect(icon).toHaveClass(descriptionIconObject.className); + }); +}); diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts index 33cdfa8488..02edd008a2 100644 --- a/packages/core/src/tests/constants.ts +++ b/packages/core/src/tests/constants.ts @@ -103,6 +103,7 @@ export enum ComponentDefaultTestId { MODAL_CONTENT = "modal-content", MODAL_HEADER = "modal-header", MODAL_FOOTER_BUTTONS = "modal-footer-buttons", + MODAL_NEXT_HEADER = "modal-header", FORMATTED_NUMBER = "formatted-number", HIDDEN_TEXT = "hidden-text", DIALOG_CONTENT_CONTAINER = "dialog-content-container", From 66d900cf28651853d16e4f78b4a210317ee279cb Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Wed, 11 Sep 2024 16:41:23 +0300 Subject: [PATCH 02/15] feat(ModalContent): content component to be used in modal by consumers (#2414) --- .../ModalContent/ModalContent.module.scss | 7 +++++ .../ModalNew/ModalContent/ModalContent.tsx | 26 +++++++++++++++++++ .../ModalContent/ModalContent.types.ts | 6 +++++ .../__tests__/ModalContent.test.tsx | 17 ++++++++++++ packages/core/src/tests/constants.ts | 1 + 5 files changed, 57 insertions(+) create mode 100644 packages/core/src/components/ModalNew/ModalContent/ModalContent.module.scss create mode 100644 packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx create mode 100644 packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts create mode 100644 packages/core/src/components/ModalNew/ModalContent/__tests__/ModalContent.test.tsx diff --git a/packages/core/src/components/ModalNew/ModalContent/ModalContent.module.scss b/packages/core/src/components/ModalNew/ModalContent/ModalContent.module.scss new file mode 100644 index 0000000000..f463fb3e05 --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalContent/ModalContent.module.scss @@ -0,0 +1,7 @@ +@import "~monday-ui-style/dist/mixins"; + +.content { + padding-block-end: var(--spacing-xl); + overflow: auto; + @include scroller; +} diff --git a/packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx b/packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx new file mode 100644 index 0000000000..a3182d13dd --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalContent/ModalContent.tsx @@ -0,0 +1,26 @@ +import React, { forwardRef } from "react"; +import cx from "classnames"; +import { getTestId } from "../../../tests/test-ids-utils"; +import { ComponentDefaultTestId } from "../../../tests/constants"; +import styles from "./ModalContent.module.scss"; +import { ModalContentProps } from "./ModalContent.types"; + +const ModalContent = forwardRef( + ( + { children, className, id, "data-testid": dataTestId }: ModalContentProps, + ref: React.ForwardedRef + ) => { + return ( +
+ {children} +
+ ); + } +); + +export default ModalContent; diff --git a/packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts b/packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts new file mode 100644 index 0000000000..d50def5bd6 --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalContent/ModalContent.types.ts @@ -0,0 +1,6 @@ +import React from "react"; +import { VibeComponentProps } from "../../../types"; + +export interface ModalContentProps extends VibeComponentProps { + children?: React.ReactNode; +} diff --git a/packages/core/src/components/ModalNew/ModalContent/__tests__/ModalContent.test.tsx b/packages/core/src/components/ModalNew/ModalContent/__tests__/ModalContent.test.tsx new file mode 100644 index 0000000000..e2a5e534b3 --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalContent/__tests__/ModalContent.test.tsx @@ -0,0 +1,17 @@ +import React from "react"; +import { render } from "@testing-library/react"; +import ModalContent from "../ModalContent"; + +describe("ModalContent", () => { + const childrenContent = My content; + + it("renders the children correctly", () => { + const { getByText } = render({childrenContent}); + expect(getByText("My content")).toBeInTheDocument(); + }); + + it("renders when no children are provided", () => { + const { container } = render(); + expect(container.firstChild).toBeInTheDocument(); + }); +}); diff --git a/packages/core/src/tests/constants.ts b/packages/core/src/tests/constants.ts index 02edd008a2..8200b0966f 100644 --- a/packages/core/src/tests/constants.ts +++ b/packages/core/src/tests/constants.ts @@ -104,6 +104,7 @@ export enum ComponentDefaultTestId { MODAL_HEADER = "modal-header", MODAL_FOOTER_BUTTONS = "modal-footer-buttons", MODAL_NEXT_HEADER = "modal-header", + MODAL_NEXT_CONTENT = "modal-content", FORMATTED_NUMBER = "formatted-number", HIDDEN_TEXT = "hidden-text", DIALOG_CONTENT_CONTAINER = "dialog-content-container", From 3e6faca0b16ee92f6f3f802bc94fadf74f608047 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 24 Sep 2024 14:35:18 +0300 Subject: [PATCH 03/15] feat(ModalTopActions): top actions component for internal use (#2415) --- .../ModalTopActions.module.scss | 5 ++ .../ModalTopActions/ModalTopActions.tsx | 32 +++++++++ .../ModalTopActions/ModalTopActions.types.ts | 23 ++++++ .../__tests__/ModalTopActions.test.tsx | 72 +++++++++++++++++++ 4 files changed, 132 insertions(+) create mode 100644 packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.module.scss create mode 100644 packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx create mode 100644 packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts create mode 100644 packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.module.scss b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.module.scss new file mode 100644 index 0000000000..25b099037a --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.module.scss @@ -0,0 +1,5 @@ +.actions { + position: absolute; + right: var(--spacing-large); + top: var(--spacing-large); +} diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx new file mode 100644 index 0000000000..0e44cf7b09 --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.tsx @@ -0,0 +1,32 @@ +import React from "react"; +import styles from "./ModalTopActions.module.scss"; +import { ModalTopActionsButtonColor, ModalTopActionsColor, ModalTopActionsProps } from "./ModalTopActions.types"; +import Flex from "../../Flex/Flex"; +import IconButton from "../../IconButton/IconButton"; +import { CloseSmall } from "../../Icon/Icons"; +import { ButtonColor } from "../../Button/ButtonConstants"; + +const colorToButtonColor: Record = { + dark: ButtonColor.ON_INVERTED_BACKGROUND, + light: ButtonColor.ON_PRIMARY_COLOR +}; + +const ModalTopActions = ({ renderAction, color, closeButtonAriaLabel, onClose }: ModalTopActionsProps) => { + const buttonColor = colorToButtonColor[color] || ButtonColor.PRIMARY; + + return ( + + {typeof renderAction === "function" ? renderAction(buttonColor) : renderAction} + + + ); +}; + +export default ModalTopActions; diff --git a/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts new file mode 100644 index 0000000000..a5a85c863f --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalTopActions/ModalTopActions.types.ts @@ -0,0 +1,23 @@ +import React from "react"; +import MenuButton from "../../MenuButton/MenuButton"; +import IconButton from "../../IconButton/IconButton"; +import { ButtonColor } from "../../Button/ButtonConstants"; + +export type ModalTopActionsColor = "light" | "dark"; +export type ModalTopActionsButtonColor = + | ButtonColor.PRIMARY + | ButtonColor.ON_PRIMARY_COLOR + | ButtonColor.ON_INVERTED_BACKGROUND; + +export interface ModalTopActionsProps { + /** + * action can be passed either as a function or direct + * it allows passing back to consumer the color he chose, so he won't have to define it twice + */ + renderAction?: + | React.ReactElement + | ((color?: ModalTopActionsButtonColor) => React.ReactElement); + color?: ModalTopActionsColor; + closeButtonAriaLabel?: string; + onClose?: React.MouseEventHandler; +} diff --git a/packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx b/packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx new file mode 100644 index 0000000000..b1919f4105 --- /dev/null +++ b/packages/core/src/components/ModalNew/ModalTopActions/__tests__/ModalTopActions.test.tsx @@ -0,0 +1,72 @@ +import React from "react"; +import { render, fireEvent, within } from "@testing-library/react"; +import ModalTopActions from "../ModalTopActions"; +import IconButton from "../../../IconButton/IconButton"; +import { Feedback as FeedbackIcon } from "../../../Icon/Icons"; +import { ButtonColor } from "../../../Button/ButtonConstants"; +import { camelCase } from "lodash-es"; + +describe("ModalTopActions", () => { + const closeButtonAriaLabel = "Close modal"; + + it("renders the close button with the correct aria-label", () => { + const { getByLabelText } = render(); + + expect(getByLabelText(closeButtonAriaLabel)).toBeInTheDocument(); + }); + + it("calls onClose when the close button is clicked", () => { + const mockOnClose = jest.fn(); + + const { getByLabelText } = render( + + ); + + fireEvent.click(getByLabelText(closeButtonAriaLabel)); + expect(mockOnClose).toHaveBeenCalled(); + }); + + it("does not fail when onClose is not provided", () => { + const { getByLabelText } = render(); + fireEvent.click(getByLabelText(closeButtonAriaLabel)); + expect(() => getByLabelText(closeButtonAriaLabel)).not.toThrow(); + }); + + it("renders the action button using the renderAction prop as a function", () => { + const renderAction = jest.fn(color => ); + const { getByTestId } = render(); + + expect(within(getByTestId("extra-action")).getByTestId("icon")).toBeInTheDocument(); + }); + + it("calls renderAction with correct color argument", () => { + const renderAction = jest.fn(color => ); + render(); + + expect(renderAction).toHaveBeenCalledWith(ButtonColor.ON_INVERTED_BACKGROUND); + }); + + it("renders the action button using the renderAction prop directly", () => { + const renderAction = ( + + ); + const { getByTestId } = render(); + + expect(within(getByTestId("extra-action")).getByTestId("icon")).toBeInTheDocument(); + }); + + it("applies the correct color when 'dark' is passed", () => { + const { getByLabelText } = render(); + expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(camelCase("color-" + ButtonColor.ON_INVERTED_BACKGROUND)); + }); + + it("applies the correct color when 'light' is passed", () => { + const { getByLabelText } = render(); + expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(camelCase("color-" + ButtonColor.ON_PRIMARY_COLOR)); + }); + + it("applies the default color when no color is passed", () => { + const { getByLabelText } = render(); + expect(getByLabelText(closeButtonAriaLabel)).toHaveClass(camelCase("color-" + ButtonColor.PRIMARY)); + }); +}); From 7c8207a01cde41bf43e143affbb5dda73171b48a Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 24 Sep 2024 14:52:05 +0300 Subject: [PATCH 04/15] feat(Modal): modal component with basic functionality (#2417) --- .../ModalNew/Modal/Modal.module.scss | 12 ++++ .../src/components/ModalNew/Modal/Modal.tsx | 54 ++++++++++++++++++ .../components/ModalNew/Modal/Modal.types.tsx | 15 +++++ .../ModalNew/Modal/__tests__/Modal.test.tsx | 56 +++++++++++++++++++ 4 files changed, 137 insertions(+) create mode 100644 packages/core/src/components/ModalNew/Modal/Modal.module.scss create mode 100644 packages/core/src/components/ModalNew/Modal/Modal.tsx create mode 100644 packages/core/src/components/ModalNew/Modal/Modal.types.tsx create mode 100644 packages/core/src/components/ModalNew/Modal/__tests__/Modal.test.tsx diff --git a/packages/core/src/components/ModalNew/Modal/Modal.module.scss b/packages/core/src/components/ModalNew/Modal/Modal.module.scss new file mode 100644 index 0000000000..dc85357ca8 --- /dev/null +++ b/packages/core/src/components/ModalNew/Modal/Modal.module.scss @@ -0,0 +1,12 @@ +.overlay { + position: fixed; + inset: 0; + background-color: rgba(41, 47, 76, 0.7); +} + +.modal { + position: relative; + display: flex; + flex-direction: column; + background-color: var(--primary-background-color); +} diff --git a/packages/core/src/components/ModalNew/Modal/Modal.tsx b/packages/core/src/components/ModalNew/Modal/Modal.tsx new file mode 100644 index 0000000000..edd1eb486e --- /dev/null +++ b/packages/core/src/components/ModalNew/Modal/Modal.tsx @@ -0,0 +1,54 @@ +import React, { forwardRef } from "react"; +import cx from "classnames"; +import { getTestId } from "../../../tests/test-ids-utils"; +import { ComponentDefaultTestId } from "../../../tests/constants"; +import styles from "./Modal.module.scss"; +import { ModalProps } from "./Modal.types"; +import ModalTopActions from "../ModalTopActions/ModalTopActions"; + +const Modal = forwardRef( + ( + { + // Would be implemented in a later PR + // eslint-disable-next-line @typescript-eslint/no-unused-vars + show, + // Would be implemented in a later PR + // eslint-disable-next-line @typescript-eslint/no-unused-vars + size = "medium", + renderHeaderAction, + closeButtonTheme, + closeButtonAriaLabel, + onClose, + children, + className, + id, + "data-testid": dataTestId + }: ModalProps, + ref: React.ForwardedRef + ) => { + return ( +
+ +
+ ); + } +); + +export default Modal; diff --git a/packages/core/src/components/ModalNew/Modal/Modal.types.tsx b/packages/core/src/components/ModalNew/Modal/Modal.types.tsx new file mode 100644 index 0000000000..633549eeb4 --- /dev/null +++ b/packages/core/src/components/ModalNew/Modal/Modal.types.tsx @@ -0,0 +1,15 @@ +import { VibeComponentProps } from "../../../types"; +import React from "react"; +import { ModalTopActionsProps } from "../ModalTopActions/ModalTopActions.types"; + +export type ModalSize = "small" | "medium" | "large"; + +export interface ModalProps extends VibeComponentProps { + show: boolean; + size?: ModalSize; + closeButtonTheme?: ModalTopActionsProps["color"]; + closeButtonAriaLabel?: ModalTopActionsProps["closeButtonAriaLabel"]; + onClose?: ModalTopActionsProps["onClose"]; + renderHeaderAction?: ModalTopActionsProps["renderAction"]; + children: React.ReactNode; +} diff --git a/packages/core/src/components/ModalNew/Modal/__tests__/Modal.test.tsx b/packages/core/src/components/ModalNew/Modal/__tests__/Modal.test.tsx new file mode 100644 index 0000000000..559b192f17 --- /dev/null +++ b/packages/core/src/components/ModalNew/Modal/__tests__/Modal.test.tsx @@ -0,0 +1,56 @@ +import React from "react"; +import { render, fireEvent } from "@testing-library/react"; +import Modal from "../Modal"; + +describe("Modal", () => { + const closeButtonAriaLabel = "Close modal"; + const childrenContent = My content; + + it("renders the modal with the correct role", () => { + const { getByTestId } = render( + + {childrenContent} + + ); + + expect(getByTestId("modal")).toHaveAttribute("role", "dialog"); + }); + + it("renders the modal with the correct aria-modal", () => { + const { getByTestId } = render( + + {childrenContent} + + ); + + expect(getByTestId("modal")).toHaveAttribute("aria-modal", "true"); + }); + + it("renders the children content correctly", () => { + const { getByText } = render( + + {childrenContent} + + ); + + expect(getByText("My content")).toBeInTheDocument(); + }); + + it("calls onClose when the close button is clicked", () => { + const mockOnClose = jest.fn(); + const { getByLabelText } = render( + + {childrenContent} + + ); + + fireEvent.click(getByLabelText(closeButtonAriaLabel)); + expect(mockOnClose).toHaveBeenCalled(); + }); + + it.todo("does not render when 'show' is false"); + + it.todo("renders the correct aria-labelledby"); + + it.todo("renders the correct aria-describedby"); +}); From 8d717034c51b8b80c318caeadc0038a728c53057 Mon Sep 17 00:00:00 2001 From: Yossi Saadi Date: Tue, 24 Sep 2024 15:14:00 +0300 Subject: [PATCH 05/15] feat(Modal): implement size prop and responsiveness (#2419) --- .../ModalNew/Modal/Modal.module.scss | 68 ++++++++++++++++++- .../src/components/ModalNew/Modal/Modal.tsx | 6 +- .../ModalNew/Modal/__tests__/Modal.test.tsx | 16 +++++ 3 files changed, 86 insertions(+), 4 deletions(-) diff --git a/packages/core/src/components/ModalNew/Modal/Modal.module.scss b/packages/core/src/components/ModalNew/Modal/Modal.module.scss index dc85357ca8..d8573abf69 100644 --- a/packages/core/src/components/ModalNew/Modal/Modal.module.scss +++ b/packages/core/src/components/ModalNew/Modal/Modal.module.scss @@ -5,8 +5,74 @@ } .modal { - position: relative; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; flex-direction: column; + width: var(--modal-width, 50%); + max-height: var(--modal-max-height, 80%); background-color: var(--primary-background-color); + overflow: hidden; + border-radius: var(--border-radius-big); + box-shadow: var(--box-shadow-large); + + &.sizeSmall { + --modal-max-height: 50%; + --modal-width: 45%; + } + + &.sizeMedium { + --modal-max-height: 80%; + --modal-width: 50%; + } + + &.sizeLarge { + --modal-max-height: 80%; + --modal-width: 70%; + } + + @media (min-width: 1280px) { + &.sizeSmall { + --modal-width: 40%; + } + + &.sizeMedium { + --modal-width: 44%; + } + + &.sizeLarge { + --modal-width: 66%; + } + } + + @media (min-width: 1440px) { + &.sizeSmall { + --modal-width: 35%; + } + + &.sizeMedium { + --modal-width: 38%; + } + + &.sizeLarge { + --modal-width: 60%; + } + } + + @media (min-width: 1720px) { + &.sizeSmall { + --modal-width: 34%; + } + + &.sizeMedium { + --modal-width: 36%; + } + + &.sizeLarge { + --modal-width: 58%; + } + } } diff --git a/packages/core/src/components/ModalNew/Modal/Modal.tsx b/packages/core/src/components/ModalNew/Modal/Modal.tsx index edd1eb486e..de1372fb1d 100644 --- a/packages/core/src/components/ModalNew/Modal/Modal.tsx +++ b/packages/core/src/components/ModalNew/Modal/Modal.tsx @@ -5,6 +5,8 @@ import { ComponentDefaultTestId } from "../../../tests/constants"; import styles from "./Modal.module.scss"; import { ModalProps } from "./Modal.types"; import ModalTopActions from "../ModalTopActions/ModalTopActions"; +import { getStyle } from "../../../helpers/typesciptCssModulesHelper"; +import { camelCase } from "lodash-es"; const Modal = forwardRef( ( @@ -12,8 +14,6 @@ const Modal = forwardRef( // Would be implemented in a later PR // eslint-disable-next-line @typescript-eslint/no-unused-vars show, - // Would be implemented in a later PR - // eslint-disable-next-line @typescript-eslint/no-unused-vars size = "medium", renderHeaderAction, closeButtonTheme, @@ -30,7 +30,7 @@ const Modal = forwardRef(