From 7618ad4ff53baa6332d45ee1bbf6de9d75e7bb90 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Wed, 31 Jan 2024 17:29:49 +0200 Subject: [PATCH 01/19] chore(deps): add @types/react-dom --- package-lock.json | 83 +++++++++++++++++++++++++++++------------------ package.json | 1 + 2 files changed, 52 insertions(+), 32 deletions(-) diff --git a/package-lock.json b/package-lock.json index 231a0d82e6..4ba1103127 100644 --- a/package-lock.json +++ b/package-lock.json @@ -83,6 +83,7 @@ "@types/lodash-es": "^4.17.6", "@types/react": "^18.0.25", "@types/react-dates": "^21.8.3", + "@types/react-dom": "^18.2.18", "@types/react-is": "^16.7.5", "@types/react-transition-group": "^4.4.5", "@types/react-virtualized-auto-sizer": "^1.0.1", @@ -11069,6 +11070,26 @@ } } }, + "node_modules/@testing-library/react/node_modules/@types/react": { + "version": "17.0.75", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.75.tgz", + "integrity": "sha512-MSA+NzEzXnQKrqpO63CYqNstFjsESgvJAdAyyJ1n6ZQq/GLgf6nOfIKwk+Twuz0L1N6xPe+qz5xRCJrbhMaLsw==", + "dev": true, + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@testing-library/react/node_modules/@types/react-dom": { + "version": "17.0.25", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz", + "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==", + "dev": true, + "dependencies": { + "@types/react": "^17" + } + }, "node_modules/@testing-library/user-event": { "version": "13.5.0", "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.5.0.tgz", @@ -11703,23 +11724,12 @@ } }, "node_modules/@types/react-dom": { - "version": "17.0.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz", - "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==", + "version": "18.2.18", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", + "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==", "dev": true, "dependencies": { - "@types/react": "^17" - } - }, - "node_modules/@types/react-dom/node_modules/@types/react": { - "version": "17.0.45", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz", - "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==", - "dev": true, - "dependencies": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" + "@types/react": "*" } }, "node_modules/@types/react-is": { @@ -44904,6 +44914,28 @@ "@babel/runtime": "^7.12.5", "@testing-library/dom": "^8.0.0", "@types/react-dom": "<18.0.0" + }, + "dependencies": { + "@types/react": { + "version": "17.0.75", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.75.tgz", + "integrity": "sha512-MSA+NzEzXnQKrqpO63CYqNstFjsESgvJAdAyyJ1n6ZQq/GLgf6nOfIKwk+Twuz0L1N6xPe+qz5xRCJrbhMaLsw==", + "dev": true, + "requires": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "@types/react-dom": { + "version": "17.0.25", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.25.tgz", + "integrity": "sha512-urx7A7UxkZQmThYA4So0NelOVjx3V4rNFVJwp0WZlbIK5eM4rNJDiN3R/E9ix0MBh6kAEojk/9YL+Te6D9zHNA==", + "dev": true, + "requires": { + "@types/react": "^17" + } + } } }, "@testing-library/react-hooks": { @@ -45517,25 +45549,12 @@ } }, "@types/react-dom": { - "version": "17.0.17", - "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.17.tgz", - "integrity": "sha512-VjnqEmqGnasQKV0CWLevqMTXBYG9GbwuE6x3VetERLh0cq2LTptFE73MrQi2S7GkKXCf2GgwItB/melLnxfnsg==", + "version": "18.2.18", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", + "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==", "dev": true, "requires": { - "@types/react": "^17" - }, - "dependencies": { - "@types/react": { - "version": "17.0.45", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.45.tgz", - "integrity": "sha512-YfhQ22Lah2e3CHPsb93tRwIGNiSwkuz1/blk4e6QrWS0jQzCSNbGLtOEYhPg02W0yGTTmpajp7dCTbBAMN3qsg==", - "dev": true, - "requires": { - "@types/prop-types": "*", - "@types/scheduler": "*", - "csstype": "^3.0.2" - } - } + "@types/react": "*" } }, "@types/react-is": { diff --git a/package.json b/package.json index ad31c5a5ef..1888b20f6c 100644 --- a/package.json +++ b/package.json @@ -178,6 +178,7 @@ "@types/lodash-es": "^4.17.6", "@types/react": "^18.0.25", "@types/react-dates": "^21.8.3", + "@types/react-dom": "^18.2.18", "@types/react-is": "^16.7.5", "@types/react-transition-group": "^4.4.5", "@types/react-virtualized-auto-sizer": "^1.0.1", From b66e154d26206a7b593196c5447b1a8370af04c7 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 4 Feb 2024 18:15:26 +0200 Subject: [PATCH 02/19] chore: deprecate old z-index usages in floating elements --- .storybook/preview-body.html | 1 - .storybook/preview-head.html | 6 ------ .../Dialog/DialogContent/DialogContent.tsx | 1 + src/components/Tooltip/Tooltip.tsx | 13 +++++++++++-- 4 files changed, 12 insertions(+), 9 deletions(-) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 83acea9cdc..54fe155a5f 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -1,2 +1 @@ -
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 2142ce016b..fb1712c1f3 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -21,12 +21,6 @@ body * { box-sizing: border-box; } - #tooltips-container { - position: relative; - white-space: pre-wrap; - z-index: 99999999; - max-width: 50%; - } .light-app-theme { background-color: var(--sb-primary-background-color); } diff --git a/src/components/Dialog/DialogContent/DialogContent.tsx b/src/components/Dialog/DialogContent/DialogContent.tsx index 6d439add13..4a73b1308c 100644 --- a/src/components/Dialog/DialogContent/DialogContent.tsx +++ b/src/components/Dialog/DialogContent/DialogContent.tsx @@ -124,6 +124,7 @@ export const DialogContent: VibeComponent = React.forwardRef } return ( element which wraps the children + * A Classname to be added to element which wraps the children */ referenceWrapperClassName?: string; /** @@ -111,6 +111,7 @@ interface TooltipBaseProps extends VibeComponentProps { * set the state of the tooltip - open/close - controlled component */ open?: boolean; + // TODO: remove next major /** * Overwrites z-index of the tooltip */ @@ -120,6 +121,10 @@ interface TooltipBaseProps extends VibeComponentProps { * Limit tooltip to 240px */ withMaxWidth?: boolean; + /** + * A classname for that dialog that opens the tooltip + * */ + dialogClassName?: string; } // When last tooltip was shown in the last 1.5 second - the next tooltip will be shown immediately const IMMEDIATE_SHOW_THRESHOLD_MS = 1500; @@ -149,6 +154,7 @@ export default class Tooltip extends PureComponent { disableDialogSlide: true, animationType: AnimationType.EXPAND, withoutDialog: false, + // TODO: remove in next major containerSelector: "#tooltips-container", tip: true, hideWhenReferenceHidden: false, @@ -171,6 +177,7 @@ export default class Tooltip extends PureComponent { } getContainer() { + // TODO: remove tooltips-container in next major return document.getElementById("tooltips-container") || document.querySelector("body"); } @@ -262,6 +269,7 @@ export default class Tooltip extends PureComponent { tip, arrowClassName, id, + dialogClassName, "data-testid": dataTestId } = this.props; @@ -290,7 +298,8 @@ export default class Tooltip extends PureComponent { animationType: AnimationType.EXPAND, onDialogDidHide: this.onTooltipHide, onDialogDidShow: this.onTooltipShow, - getDynamicShowDelay: this.getShowDelay + getDynamicShowDelay: this.getShowDelay, + wrapperClassName: dialogClassName || styles.tooltipDialog }; return {children}; } From f1786e43f95991b6ec1bac4f346554551a45079c Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 4 Feb 2024 18:16:06 +0200 Subject: [PATCH 03/19] feat: add LayerProvider --- src/components/LayerProvider/LayerContext.tsx | 11 ++++++++ .../LayerProvider/LayerProvider.tsx | 28 +++++++++++++++++++ 2 files changed, 39 insertions(+) create mode 100644 src/components/LayerProvider/LayerContext.tsx create mode 100644 src/components/LayerProvider/LayerProvider.tsx diff --git a/src/components/LayerProvider/LayerContext.tsx b/src/components/LayerProvider/LayerContext.tsx new file mode 100644 index 0000000000..b750e9f99a --- /dev/null +++ b/src/components/LayerProvider/LayerContext.tsx @@ -0,0 +1,11 @@ +import React from "react"; + +export type LayersContextType = { + layerRef: React.RefObject; +}; + +const LayerContext = React.createContext({ + layerRef: null +}); + +export default LayerContext; diff --git a/src/components/LayerProvider/LayerProvider.tsx b/src/components/LayerProvider/LayerProvider.tsx new file mode 100644 index 0000000000..33d9901222 --- /dev/null +++ b/src/components/LayerProvider/LayerProvider.tsx @@ -0,0 +1,28 @@ +import React, { FC, ReactElement, useRef, useEffect, Children } from "react"; +import LayerContext from "./LayerContext"; + +interface LayerProviderType { + children: ReactElement | ReactElement[]; +} + +const LayerProvider: FC = ({ children }) => { + const childrenRef = useRef(); + + useEffect(() => { + if (!childrenRef.current) { + console.error("LayerProvider: The child component does not forward its ref"); + } + }, []); + + const child = children && Children.only(children); + + if (!child) { + console.error("LayerProvider: The child component must be a single element"); + } + + const childrenWithRef = React.cloneElement(child, { ref: childrenRef }); + + return {childrenWithRef}; +}; + +export default LayerProvider; From dad1d93ab1ccc9760bca224c8a68b50a1f5ad974 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 4 Feb 2024 18:16:51 +0200 Subject: [PATCH 04/19] chore: update monday-ui-style (experimental version to test new layers) --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4ba1103127..279c6a67e4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -17,7 +17,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.1.209", + "monday-ui-style": "^0.1.210-layers-31801f539b.0", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^3.0.1", @@ -26944,9 +26944,9 @@ } }, "node_modules/monday-ui-style": { - "version": "0.1.209", - "resolved": "https://registry.npmjs.org/monday-ui-style/-/monday-ui-style-0.1.209.tgz", - "integrity": "sha512-Tv9JLCJY2lsRrze14Md9WVKLWAkrThkQOoEVL63CopUC/6uW5cKiJKZ1pYx0U1ubI/AKhlIWBnEQh62pSTJHPw==", + "version": "0.1.210-layers-31801f539b.0", + "resolved": "https://registry.npmjs.org/monday-ui-style/-/monday-ui-style-0.1.210-layers-31801f539b.0.tgz", + "integrity": "sha512-zneoOFuK1uv0T+ljRZr1IZfCJU6jTTOuhadMjkfaWdzZM++L8EPqRTRZGrN3oothoAKkY7qWOinxGVwzh1OKpA==", "dependencies": { "postcss": "8.4.31", "postcss-scss": "^4.0.9", @@ -57297,9 +57297,9 @@ "integrity": "sha512-5LC9SOxjSc2HF6vO2CyuTDNivEdoz2IvyJJGj6X8DJ0eFyfszE0QiEd+iXmBvUP3WHxSjFH/vIsA0EN00cgr8w==" }, "monday-ui-style": { - "version": "0.1.209", - "resolved": "https://registry.npmjs.org/monday-ui-style/-/monday-ui-style-0.1.209.tgz", - "integrity": "sha512-Tv9JLCJY2lsRrze14Md9WVKLWAkrThkQOoEVL63CopUC/6uW5cKiJKZ1pYx0U1ubI/AKhlIWBnEQh62pSTJHPw==", + "version": "0.1.210-layers-31801f539b.0", + "resolved": "https://registry.npmjs.org/monday-ui-style/-/monday-ui-style-0.1.210-layers-31801f539b.0.tgz", + "integrity": "sha512-zneoOFuK1uv0T+ljRZr1IZfCJU6jTTOuhadMjkfaWdzZM++L8EPqRTRZGrN3oothoAKkY7qWOinxGVwzh1OKpA==", "requires": { "postcss": "8.4.31", "postcss-scss": "^4.0.9", diff --git a/package.json b/package.json index 1888b20f6c..ccff1bcfac 100644 --- a/package.json +++ b/package.json @@ -112,7 +112,7 @@ "classnames": "^2.3.2", "framer-motion": "^6.5.1", "lodash-es": "^4.17.21", - "monday-ui-style": "0.1.209", + "monday-ui-style": "^0.1.210-layers-31801f539b.0", "prop-types": "^15.8.1", "react-dates": "21.8.0", "react-inlinesvg": "^3.0.1", From 9996217dd102461ca62473cbcfc0bdd253c771c4 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 4 Feb 2024 18:17:52 +0200 Subject: [PATCH 05/19] feat: use new layers --- src/components/Dialog/DialogContent/DialogContent.module.scss | 1 + src/components/Modal/Modal.module.scss | 3 ++- src/components/Tipseen/Tipseen.module.scss | 4 ++++ src/components/Tipseen/Tipseen.tsx | 1 + src/components/Tooltip/Tooltip.module.scss | 4 +++- 5 files changed, 11 insertions(+), 2 deletions(-) diff --git a/src/components/Dialog/DialogContent/DialogContent.module.scss b/src/components/Dialog/DialogContent/DialogContent.module.scss index 2d7be3db69..84823490e0 100644 --- a/src/components/Dialog/DialogContent/DialogContent.module.scss +++ b/src/components/Dialog/DialogContent/DialogContent.module.scss @@ -1,6 +1,7 @@ @import "~monday-ui-style/dist/mixins"; .contentWrapper { + z-index: var(--layer-popover); outline: 0; &.top, diff --git a/src/components/Modal/Modal.module.scss b/src/components/Modal/Modal.module.scss index 9fa16acbc1..d2f0c6c105 100644 --- a/src/components/Modal/Modal.module.scss +++ b/src/components/Modal/Modal.module.scss @@ -5,7 +5,8 @@ } .container { - --monday-modal-z-index: 10000; + --monday-modal-z-index: var(--layer-modal); + // TODO: use --modal-layer in next major z-index: var(--monday-modal-z-index); display: flex; justify-content: center; diff --git a/src/components/Tipseen/Tipseen.module.scss b/src/components/Tipseen/Tipseen.module.scss index edcdc4a022..38c6f02f6c 100644 --- a/src/components/Tipseen/Tipseen.module.scss +++ b/src/components/Tipseen/Tipseen.module.scss @@ -1,5 +1,9 @@ @import "../../styles/typography"; +.tipseenDialog { + z-index: var(--layer-popover); +} + .tipseenWrapper { min-width: 100px; min-height: 40px; diff --git a/src/components/Tipseen/Tipseen.tsx b/src/components/Tipseen/Tipseen.tsx index 4cbc457047..c80a416c7c 100644 --- a/src/components/Tipseen/Tipseen.tsx +++ b/src/components/Tipseen/Tipseen.tsx @@ -176,6 +176,7 @@ const Tipseen: VibeComponent & { modifiers={modifiers} open={defaultDelayOpen ? delayedOpen : undefined} forceRenderWithoutChildren={floating} + dialogClassName={styles.tipseenDialog} > {children} diff --git a/src/components/Tooltip/Tooltip.module.scss b/src/components/Tooltip/Tooltip.module.scss index 772d6fbe44..1421337ea0 100644 --- a/src/components/Tooltip/Tooltip.module.scss +++ b/src/components/Tooltip/Tooltip.module.scss @@ -1,6 +1,8 @@ @import "../../styles/typography"; -$tooltip-z-index: 9999999999999999; +.tooltipDialog { + z-index: var(--layer-tooltip); +} .tooltip { position: relative; From c8aa2217dc6df12e21df8a241d22afe57a60b530 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 4 Feb 2024 18:18:42 +0200 Subject: [PATCH 06/19] feat(Modal): wrap in LayerProvider --- src/components/Modal/Modal.tsx | 214 ++++++++++++++++++--------------- 1 file changed, 114 insertions(+), 100 deletions(-) diff --git a/src/components/Modal/Modal.tsx b/src/components/Modal/Modal.tsx index 82de4d4da1..b4d1484d43 100644 --- a/src/components/Modal/Modal.tsx +++ b/src/components/Modal/Modal.tsx @@ -1,4 +1,4 @@ -import React, { cloneElement, FC, ReactElement, useCallback, useMemo } from "react"; +import React, { cloneElement, FC, ReactElement, useCallback, useMemo, forwardRef, useRef, ForwardedRef } from "react"; import ReactDOM from "react-dom"; import cx from "classnames"; import { useA11yDialog } from "./a11yDialog"; @@ -12,6 +12,8 @@ import { withStaticProps } from "../../types"; import { getTestId } from "../../tests/test-ids-utils"; import { ComponentDefaultTestId } from "../../tests/constants"; import styles from "./Modal.module.scss"; +import LayerProvider from "../LayerProvider/LayerProvider"; +import useMergeRef from "../../hooks/useMergeRef"; interface ModalProps { /** @@ -72,123 +74,135 @@ interface ModalProps { * Dialog content */ children?: ReactElement | ReactElement[]; + // TODO: remove next major /** * z-index attribute of the container */ zIndex?: number; } -const Modal: FC & { width?: typeof ModalWidth } = ({ - classNames = { container: "", overlay: "", modal: "" }, - id, - show, - title = "", - description = "", - onClose = NOOP, - alertDialog = false, - children, - triggerElement, - width = ModalWidth.DEFAULT, - // TODO remove hideCloseButton on the next breaking changes - // eslint-disable-next-line - hideCloseButton = false, - closeButtonAriaLabel = "Close", - contentSpacing = false, - zIndex = 10000, - "data-testid": dataTestId -}) => { - const childrenArray: ReactElement[] = useMemo( - () => (children ? (React.Children.toArray(children) as ReactElement[]) : []), - [children] - ); - validateTitleProp(title, childrenArray); +const Modal: FC & { width?: typeof ModalWidth } = forwardRef( + ( + { + classNames = { container: "", overlay: "", modal: "" }, + id, + show, + title = "", + description = "", + onClose = NOOP, + alertDialog = false, + children, + triggerElement, + width = ModalWidth.DEFAULT, + // TODO remove hideCloseButton on the next breaking changes + // eslint-disable-next-line + hideCloseButton = false, + closeButtonAriaLabel = "Close", + contentSpacing = false, + zIndex = 10000, + "data-testid": dataTestId + }, + ref: ForwardedRef + ) => { + const componentRef = useRef(null); + const mergedRef = useMergeRef(ref, componentRef); + const childrenArray: ReactElement[] = useMemo( + () => (children ? (React.Children.toArray(children) as ReactElement[]) : []), + [children] + ); + validateTitleProp(title, childrenArray); - const [instance, attr] = useA11yDialog({ - id, - alertDialog - }); + const [instance, attr] = useA11yDialog({ + id, + alertDialog + }); - const closeIfNotAlertType = useCallback(() => { - if (!alertDialog) { - onClose?.(); - } - }, [alertDialog, onClose]); + const closeIfNotAlertType = useCallback(() => { + if (!alertDialog) { + onClose?.(); + } + }, [alertDialog, onClose]); - // lock body scroll when modal is open - useBodyScrollLock({ instance }); + // lock body scroll when modal is open + useBodyScrollLock({ instance }); - // show/hide and animate the modal - useShowHideModal({ - instance, - show, - triggerElement, - onClose, - alertDialog - }); + // show/hide and animate the modal + useShowHideModal({ + instance, + show, + triggerElement, + onClose, + alertDialog + }); - const header = useMemo(() => { - const { id } = attr.title; - const header = childrenArray.find(isModalHeader); - if (header) { - return cloneElement(header, { id, closeModal: onClose }); - } - return ( - - ); - }, [attr.title, childrenArray, title, description, onClose, closeButtonAriaLabel]); + const header = useMemo(() => { + const { id } = attr.title; + const header = childrenArray.find(isModalHeader); + if (header) { + return cloneElement(header, { id, closeModal: onClose }); + } + return ( + + ); + }, [attr.title, childrenArray, title, description, onClose, closeButtonAriaLabel]); - const content = useMemo(() => { - return ( - childrenArray.find(isModalContent) || ( - {childrenArray.filter(child => !isModalHeader(child) && !isModalFooter(child))} - ) - ); - }, [childrenArray]); + const content = useMemo(() => { + return ( + childrenArray.find(isModalContent) || ( + {childrenArray.filter(child => !isModalHeader(child) && !isModalFooter(child))} + ) + ); + }, [childrenArray]); - const footer = useMemo(() => { - return childrenArray.find(isModalFooter) || null; - }, [childrenArray]); + const footer = useMemo(() => { + return childrenArray.find(isModalFooter) || null; + }, [childrenArray]); - const customWidth = width !== ModalWidth.DEFAULT && width !== ModalWidth.FULL_WIDTH; + const customWidth = width !== ModalWidth.DEFAULT && width !== ModalWidth.FULL_WIDTH; - const dialog = ReactDOM.createPortal( -
- {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} + const dialog = ReactDOM.createPortal(
-
- {header} - {content} - {footer} -
-
, - document.body - ); + {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */} +
+ +
+ {header} + {content} + {footer} +
+ +
, + document.body + ); - return ReactDOM.createPortal(dialog, document.body); -}; + return ReactDOM.createPortal(dialog, document.body); + } +); export default withStaticProps(Modal, { width: ModalWidth From e2b24d278a4617f3d8a1c7858f778516c913c312 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 4 Feb 2024 18:18:58 +0200 Subject: [PATCH 07/19] feat(Dialog): use LayerContext --- src/components/Dialog/Dialog.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx index beffec3fe8..dec5b4ea2a 100644 --- a/src/components/Dialog/Dialog.tsx +++ b/src/components/Dialog/Dialog.tsx @@ -15,6 +15,7 @@ import { VibeComponentProps } from "../../types"; import * as PopperJS from "@popperjs/core"; import styles from "./Dialog.module.scss"; import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils"; +import LayerContext from "../LayerProvider/LayerContext"; export interface DialogProps extends VibeComponentProps { /** @@ -126,6 +127,7 @@ export interface DialogProps extends VibeComponentProps { * callback to be called when click on the content is being triggered */ onContentClick?: (event: React.MouseEvent) => void; + // TODO: remove in next major /** * z-index to add to the dialog */ @@ -199,6 +201,8 @@ export default class Dialog extends PureComponent { }; private showTimeout: NodeJS.Timeout; private hideTimeout: NodeJS.Timeout; + static contextType = LayerContext; + context!: React.ContextType; constructor(props: DialogProps) { super(props); @@ -282,10 +286,11 @@ export default class Dialog extends PureComponent { const containerElement = document.querySelector(containerSelector); if (!containerElement) { - // TODO add env check - if not jest env - trashing the logs - https://monday.monday.com/boards/3532714909/pulses/5570955392 - // console.error( - // `Dialog: Container element with selector "${containerSelector}" was not found. Dialog may not be correctly positioned.` - // ); + const { layerRef } = this.context; + if (layerRef?.current) { + // Use Vibe layers mechanism if containerElement was not provided, otherwise fallback to document.body + return layerRef.current; + } return document.body; } return containerElement; From 741fdc5548fef7909b31a787f74f657a8da5623d Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 4 Feb 2024 18:22:06 +0200 Subject: [PATCH 08/19] chore: export LayerProvider --- src/components/index.js | 1 + webpack/published-ts-components.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/index.js b/src/components/index.js index 10600235a1..46e793a9d0 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -105,3 +105,4 @@ export { default as TableCell } from "./Table/TableCell/TableCell"; export { default as TipseenMedia } from "./Tipseen/TipseenMedia/TipseenMedia"; export { default as ThemeProvider } from "./ThemeProvider/ThemeProvider"; export { default as EditableText } from "./EditableText/EditableText"; +export { default as LayerProvider } from "./LayerProvider/LayerProvider"; diff --git a/webpack/published-ts-components.js b/webpack/published-ts-components.js index 6f7aed4580..2f3fa7b4da 100644 --- a/webpack/published-ts-components.js +++ b/webpack/published-ts-components.js @@ -1,6 +1,7 @@ const publishedTSComponents = { // Don't remove next line // plop_marker:published-components + LayerProvider: "components/LayerProvider/LayerProvider", EditableText: "components/EditableText/EditableText", Badge: "components/Badge/Badge", Text: "components/Text/Text", From 556f4df5f5fe22cefe1ce5788d0a2b2f99e19706 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 4 Feb 2024 19:32:11 +0200 Subject: [PATCH 09/19] test: update snapshots --- .../slider-non-ranged-tests.jest.js.snap | 8 ++++---- .../slider-ranged-tests.jest.js.snap | 10 +++++----- .../__snapshots__/tipseen-tests.jest.js.snap | 10 +++++----- .../tooltip-snapshot-tests.jest.tsx.snap | 16 ++++++++-------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap b/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap index 4ee6b30264..38ed12c568 100644 --- a/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap +++ b/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap @@ -48,7 +48,7 @@ Snapshot Diff: tabindex="0" /> + - + - + + - + - , , , , , , , , , , , , Date: Wed, 28 Feb 2024 15:35:21 +0200 Subject: [PATCH 10/19] feat(layers): add layer variables --- packages/style/src/_layers.scss | 5 +++++ packages/style/src/index.scss | 1 + .../__tests__/props-to-allowed-vars.test.js | 3 ++- 3 files changed, 8 insertions(+), 1 deletion(-) create mode 100644 packages/style/src/_layers.scss diff --git a/packages/style/src/_layers.scss b/packages/style/src/_layers.scss new file mode 100644 index 0000000000..94456406c4 --- /dev/null +++ b/packages/style/src/_layers.scss @@ -0,0 +1,5 @@ +:root { + --layer-popover: 5000; + --layer-modal: 10000; + --layer-tooltip: 90000; +} diff --git a/packages/style/src/index.scss b/packages/style/src/index.scss index 91b8d14c26..e338ae815f 100644 --- a/packages/style/src/index.scss +++ b/packages/style/src/index.scss @@ -16,3 +16,4 @@ // Output @import "core"; @import "themes"; +@import "layers"; diff --git a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/props-to-allowed-vars.test.js b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/props-to-allowed-vars.test.js index 5b763f6410..80829064b1 100644 --- a/packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/props-to-allowed-vars.test.js +++ b/packages/style/stylelint-config/rules/use-defined-css-var-when-available/__tests__/props-to-allowed-vars.test.js @@ -10,7 +10,8 @@ const ALLOWED_CSS_VARS_PREFIX_WITHOUT_MAPPING = [ "--font-weight", "--font-size", "--font-line-height", - "--letter-spacing" + "--letter-spacing", + "--layer" ]; describe("props-to-allowed-vars", () => { From e0f0864c63a08433d20669e3781d5df97ccbbb9e Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Wed, 28 Feb 2024 15:40:25 +0200 Subject: [PATCH 11/19] chore: move files --- .../core/src}/components/LayerProvider/LayerContext.tsx | 0 .../core/src}/components/LayerProvider/LayerProvider.tsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename {src => packages/core/src}/components/LayerProvider/LayerContext.tsx (100%) rename {src => packages/core/src}/components/LayerProvider/LayerProvider.tsx (100%) diff --git a/src/components/LayerProvider/LayerContext.tsx b/packages/core/src/components/LayerProvider/LayerContext.tsx similarity index 100% rename from src/components/LayerProvider/LayerContext.tsx rename to packages/core/src/components/LayerProvider/LayerContext.tsx diff --git a/src/components/LayerProvider/LayerProvider.tsx b/packages/core/src/components/LayerProvider/LayerProvider.tsx similarity index 100% rename from src/components/LayerProvider/LayerProvider.tsx rename to packages/core/src/components/LayerProvider/LayerProvider.tsx From 102975b0aed152cdc778058b400c9f69ecccb894 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Wed, 28 Feb 2024 16:25:53 +0200 Subject: [PATCH 12/19] refactor: remove contextType --- packages/core/src/components/Dialog/Dialog.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/core/src/components/Dialog/Dialog.tsx b/packages/core/src/components/Dialog/Dialog.tsx index f4b69c9a8c..65ff0bf1d4 100644 --- a/packages/core/src/components/Dialog/Dialog.tsx +++ b/packages/core/src/components/Dialog/Dialog.tsx @@ -201,8 +201,7 @@ export default class Dialog extends PureComponent { }; private showTimeout: NodeJS.Timeout; private hideTimeout: NodeJS.Timeout; - static contextType = LayerContext; - context!: React.ContextType; + context: React.ContextType; constructor(props: DialogProps) { super(props); From a9be579930fa83e98702ae0e67d21a3b95ebf32b Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Sun, 3 Mar 2024 18:28:07 +0200 Subject: [PATCH 13/19] fix: type --- packages/core/src/components/LayerProvider/LayerProvider.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/core/src/components/LayerProvider/LayerProvider.tsx b/packages/core/src/components/LayerProvider/LayerProvider.tsx index 33d9901222..48613d0e8c 100644 --- a/packages/core/src/components/LayerProvider/LayerProvider.tsx +++ b/packages/core/src/components/LayerProvider/LayerProvider.tsx @@ -1,8 +1,8 @@ -import React, { FC, ReactElement, useRef, useEffect, Children } from "react"; +import React, { FC, useRef, useEffect, Children } from "react"; import LayerContext from "./LayerContext"; interface LayerProviderType { - children: ReactElement | ReactElement[]; + children: JSX.Element; } const LayerProvider: FC = ({ children }) => { From 76f6522048b5087b5b2ff10081ec47b3bcb26fa1 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Tue, 5 Mar 2024 17:26:24 +0200 Subject: [PATCH 14/19] refactor: layers --- .../core/src/components/Dialog/Dialog.tsx | 7 +- .../DialogContent/DialogContent.module.scss | 5 +- .../Dialog/DialogContent/DialogContent.tsx | 9 +- .../LayerProvider/LayerProvider.tsx | 20 +- packages/core/src/components/Modal/Modal.tsx | 207 +++++++++--------- .../components/Tipseen/Tipseen.module.scss | 2 +- .../core/src/components/Tipseen/Tipseen.tsx | 2 +- .../components/Tooltip/Tooltip.module.scss | 2 +- .../core/src/components/Tooltip/Tooltip.tsx | 9 +- 9 files changed, 137 insertions(+), 126 deletions(-) diff --git a/packages/core/src/components/Dialog/Dialog.tsx b/packages/core/src/components/Dialog/Dialog.tsx index 65ff0bf1d4..259bfe3784 100644 --- a/packages/core/src/components/Dialog/Dialog.tsx +++ b/packages/core/src/components/Dialog/Dialog.tsx @@ -93,6 +93,7 @@ export interface DialogProps extends VibeComponentProps { * Classname to be added to the content container */ wrapperClassName?: string; + layerClassName?: string; /** * Prevent Animation */ @@ -201,7 +202,7 @@ export default class Dialog extends PureComponent { }; private showTimeout: NodeJS.Timeout; private hideTimeout: NodeJS.Timeout; - context: React.ContextType; + context!: React.ContextType; constructor(props: DialogProps) { super(props); @@ -489,6 +490,7 @@ export default class Dialog extends PureComponent { render() { const { wrapperClassName, + layerClassName, content, startingEdge, children, @@ -607,6 +609,7 @@ export default class Dialog extends PureComponent { animationType={animationTypeCalculated} position={placement} wrapperClassName={wrapperClassName} + layerClassName={layerClassName} startingEdge={startingEdge} isOpen={this.isShown()} showDelay={showDelay} @@ -641,3 +644,5 @@ function chainOnPropsAndInstance(name: string, instance: Dialog, props: DialogPr // @ts-ignore return chainFunctions([props[name], instance[name]], true); } + +Dialog.contextType = LayerContext; diff --git a/packages/core/src/components/Dialog/DialogContent/DialogContent.module.scss b/packages/core/src/components/Dialog/DialogContent/DialogContent.module.scss index 84823490e0..a6f48d7415 100644 --- a/packages/core/src/components/Dialog/DialogContent/DialogContent.module.scss +++ b/packages/core/src/components/Dialog/DialogContent/DialogContent.module.scss @@ -1,7 +1,6 @@ @import "~monday-ui-style/dist/mixins"; .contentWrapper { - z-index: var(--layer-popover); outline: 0; &.top, @@ -40,6 +39,10 @@ } } +.dialogLayer { + z-index: var(--layer-popover); +} + .contentWrapper[data-popper-reference-hidden="true"] { visibility: hidden; pointer-events: none; diff --git a/packages/core/src/components/Dialog/DialogContent/DialogContent.tsx b/packages/core/src/components/Dialog/DialogContent/DialogContent.tsx index 4a73b1308c..ca483be269 100644 --- a/packages/core/src/components/Dialog/DialogContent/DialogContent.tsx +++ b/packages/core/src/components/Dialog/DialogContent/DialogContent.tsx @@ -22,6 +22,7 @@ export interface DialogContentProps extends VibeComponentProps { children?: ReactElement | ReactElement[]; position?: PopperJS.Placement; wrapperClassName?: string; + layerClassName?: string; isOpen?: boolean; // TODO breaking change convert to enum startingEdge?: any; @@ -54,6 +55,7 @@ export const DialogContent: VibeComponent = React.forwardRef children, position, wrapperClassName, + layerClassName, isOpen = false, startingEdge, animationType = "expand", @@ -126,7 +128,12 @@ export const DialogContent: VibeComponent = React.forwardRef | null; } -const LayerProvider: FC = ({ children }) => { +const LayerProvider: FC = ({ children, layerRef }) => { const childrenRef = useRef(); useEffect(() => { - if (!childrenRef.current) { - console.error("LayerProvider: The child component does not forward its ref"); + if (!childrenRef.current && !layerRef) { + console.warn( + "LayerProvider: The child component does not forward its ref. Use forwardRef, or alternatively use the `layerRef` prop to pass a ref to the child component." + ); } - }, []); + }, [layerRef]); + + if (layerRef?.current) { + return {children}; + } const child = children && Children.only(children); if (!child) { - console.error("LayerProvider: The child component must be a single element"); + console.warn("LayerProvider: The child component must be a single element"); } const childrenWithRef = React.cloneElement(child, { ref: childrenRef }); - return {childrenWithRef}; }; diff --git a/packages/core/src/components/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal.tsx index 46d942adac..7f258875ef 100644 --- a/packages/core/src/components/Modal/Modal.tsx +++ b/packages/core/src/components/Modal/Modal.tsx @@ -13,7 +13,6 @@ import { getTestId } from "../../tests/test-ids-utils"; import { ComponentDefaultTestId } from "../../tests/constants"; import styles from "./Modal.module.scss"; import LayerProvider from "../LayerProvider/LayerProvider"; -import useMergeRef from "../../hooks/useMergeRef"; export interface ModalProps { /** @@ -81,128 +80,122 @@ export interface ModalProps { zIndex?: number; } -const Modal: FC & { width?: typeof ModalWidth } = forwardRef( - ( - { - classNames = { container: "", overlay: "", modal: "" }, - id, - show, - title = "", - description = "", - onClose = NOOP, - alertDialog = false, - children, - triggerElement, - width = ModalWidth.DEFAULT, - // TODO remove hideCloseButton on the next breaking changes - // eslint-disable-next-line - hideCloseButton = false, - closeButtonAriaLabel = "Close", - contentSpacing = false, - zIndex = 10000, - "data-testid": dataTestId - }, - ref: ForwardedRef - ) => { - const componentRef = useRef(null); - const mergedRef = useMergeRef(ref, componentRef); - const childrenArray: ReactElement[] = useMemo( - () => (children ? (React.Children.toArray(children) as ReactElement[]) : []), - [children] - ); - validateTitleProp(title, childrenArray); +const Modal: FC & { width?: typeof ModalWidth } = ({ + classNames = { container: "", overlay: "", modal: "" }, + id, + show, + title = "", + description = "", + onClose = NOOP, + alertDialog = false, + children, + triggerElement, + width = ModalWidth.DEFAULT, + // TODO remove hideCloseButton on the next breaking changes + // eslint-disable-next-line + hideCloseButton = false, + closeButtonAriaLabel = "Close", + contentSpacing = false, + zIndex = 10000, + "data-testid": dataTestId +}) => { + const overlayRef = useRef(null); + const childrenArray: ReactElement[] = useMemo( + () => (children ? (React.Children.toArray(children) as ReactElement[]) : []), + [children] + ); + validateTitleProp(title, childrenArray); - const [instance, attr] = useA11yDialog({ - id, - alertDialog - }); + const [instance, attr] = useA11yDialog({ + id, + alertDialog + }); - const closeIfNotAlertType = useCallback(() => { - if (!alertDialog) { - onClose?.(); - } - }, [alertDialog, onClose]); + const closeIfNotAlertType = useCallback(() => { + if (!alertDialog) { + onClose?.(); + } + }, [alertDialog, onClose]); - // lock body scroll when modal is open - useBodyScrollLock({ instance }); + // lock body scroll when modal is open + useBodyScrollLock({ instance }); - // show/hide and animate the modal - useShowHideModal({ - instance, - show, - triggerElement, - onClose, - alertDialog - }); + // show/hide and animate the modal + useShowHideModal({ + instance, + show, + triggerElement, + onClose, + alertDialog + }); - const header = useMemo(() => { - const { id } = attr.title; - const header = childrenArray.find(isModalHeader); - if (header) { - return cloneElement(header, { id, closeModal: onClose }); - } - return ( - - ); - }, [attr.title, childrenArray, title, description, onClose, closeButtonAriaLabel]); + const header = useMemo(() => { + const { id } = attr.title; + const header = childrenArray.find(isModalHeader); + if (header) { + return cloneElement(header, { id, closeModal: onClose }); + } + return ( + + ); + }, [attr.title, childrenArray, title, description, onClose, closeButtonAriaLabel]); - const content = useMemo(() => { - return ( - childrenArray.find(isModalContent) || ( - {childrenArray.filter(child => !isModalHeader(child) && !isModalFooter(child))} - ) - ); - }, [childrenArray]); + const content = useMemo(() => { + return ( + childrenArray.find(isModalContent) || ( + {childrenArray.filter(child => !isModalHeader(child) && !isModalFooter(child))} + ) + ); + }, [childrenArray]); - const footer = useMemo(() => { - return childrenArray.find(isModalFooter) || null; - }, [childrenArray]); + const footer = useMemo(() => { + return childrenArray.find(isModalFooter) || null; + }, [childrenArray]); - const customWidth = width !== ModalWidth.DEFAULT && width !== ModalWidth.FULL_WIDTH; + const customWidth = width !== ModalWidth.DEFAULT && width !== ModalWidth.FULL_WIDTH; - const dialog = ReactDOM.createPortal( -
+ const dialog = ReactDOM.createPortal( +
+ {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events */}
- -
- {header} - {content} - {footer} -
- -
, - document.body - ); +
+ {header} + {content} + {footer} +
+ +
, + document.body + ); - return ReactDOM.createPortal(dialog, document.body); - } -); + return ReactDOM.createPortal(dialog, document.body); +}; export default withStaticProps(Modal, { width: ModalWidth diff --git a/packages/core/src/components/Tipseen/Tipseen.module.scss b/packages/core/src/components/Tipseen/Tipseen.module.scss index 62976f682c..f1292e0df7 100644 --- a/packages/core/src/components/Tipseen/Tipseen.module.scss +++ b/packages/core/src/components/Tipseen/Tipseen.module.scss @@ -1,6 +1,6 @@ @import "../../styles/typography"; -.tipseenDialog { +.tipseenLayer { z-index: var(--layer-popover); } diff --git a/packages/core/src/components/Tipseen/Tipseen.tsx b/packages/core/src/components/Tipseen/Tipseen.tsx index 607c32e579..3ec0b2dcda 100644 --- a/packages/core/src/components/Tipseen/Tipseen.tsx +++ b/packages/core/src/components/Tipseen/Tipseen.tsx @@ -176,7 +176,7 @@ const Tipseen: VibeComponent & { modifiers={modifiers} open={defaultDelayOpen ? delayedOpen : undefined} forceRenderWithoutChildren={floating} - dialogClassName={styles.tipseenDialog} + layerClassName={styles.tipseenLayer} > {children} diff --git a/packages/core/src/components/Tooltip/Tooltip.module.scss b/packages/core/src/components/Tooltip/Tooltip.module.scss index 1421337ea0..74e76b3962 100644 --- a/packages/core/src/components/Tooltip/Tooltip.module.scss +++ b/packages/core/src/components/Tooltip/Tooltip.module.scss @@ -1,6 +1,6 @@ @import "../../styles/typography"; -.tooltipDialog { +.tooltipLayer { z-index: var(--layer-tooltip); } diff --git a/packages/core/src/components/Tooltip/Tooltip.tsx b/packages/core/src/components/Tooltip/Tooltip.tsx index 08593d91a6..1411a3575c 100644 --- a/packages/core/src/components/Tooltip/Tooltip.tsx +++ b/packages/core/src/components/Tooltip/Tooltip.tsx @@ -121,10 +121,7 @@ interface TooltipBaseProps extends VibeComponentProps { * Limit tooltip to 240px */ withMaxWidth?: boolean; - /** - * A classname for that dialog that opens the tooltip - * */ - dialogClassName?: string; + layerClassName?: string; } // When last tooltip was shown in the last 1.5 second - the next tooltip will be shown immediately const IMMEDIATE_SHOW_THRESHOLD_MS = 1500; @@ -269,7 +266,7 @@ export default class Tooltip extends PureComponent { tip, arrowClassName, id, - dialogClassName, + layerClassName, "data-testid": dataTestId } = this.props; @@ -299,7 +296,7 @@ export default class Tooltip extends PureComponent { onDialogDidHide: this.onTooltipHide, onDialogDidShow: this.onTooltipShow, getDynamicShowDelay: this.getShowDelay, - wrapperClassName: dialogClassName || styles.tooltipDialog + layerClassName: layerClassName || styles.tooltipLayer }; return {children}; } From cf6ef2114fe0f0e55a68731ec76f640237588558 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Tue, 5 Mar 2024 17:56:36 +0200 Subject: [PATCH 15/19] chore: lint --- packages/core/src/components/Modal/Modal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/core/src/components/Modal/Modal.tsx b/packages/core/src/components/Modal/Modal.tsx index 7f258875ef..6df6f1561b 100644 --- a/packages/core/src/components/Modal/Modal.tsx +++ b/packages/core/src/components/Modal/Modal.tsx @@ -1,4 +1,4 @@ -import React, { cloneElement, FC, ReactElement, useCallback, useMemo, forwardRef, useRef, ForwardedRef } from "react"; +import React, { cloneElement, FC, ReactElement, useCallback, useMemo, useRef } from "react"; import ReactDOM from "react-dom"; import cx from "classnames"; import { useA11yDialog } from "./a11yDialog"; From b3f53812b1411db34ddd4426d3ea5775ad97a7e2 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Tue, 5 Mar 2024 17:57:05 +0200 Subject: [PATCH 16/19] test: snapshots --- .../slider-non-ranged-tests.jest.js.snap | 8 ++++---- .../slider-ranged-tests.jest.js.snap | 10 +++++----- .../__snapshots__/tipseen-tests.jest.js.snap | 10 +++++----- .../tooltip-snapshot-tests.jest.tsx.snap | 16 ++++++++-------- 4 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/core/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap b/packages/core/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap index 38ed12c568..e6778d63e4 100644 --- a/packages/core/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap +++ b/packages/core/src/components/Slider/__tests__/__snapshots__/slider-non-ranged-tests.jest.js.snap @@ -48,7 +48,7 @@ Snapshot Diff: tabindex="0" /> + - + - + + - + - , , , , , , , , , , , , Date: Tue, 5 Mar 2024 18:21:18 +0200 Subject: [PATCH 17/19] refactor: make LayerProvider leaner --- .../LayerProvider/LayerProvider.tsx | 27 +++---------------- 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/packages/core/src/components/LayerProvider/LayerProvider.tsx b/packages/core/src/components/LayerProvider/LayerProvider.tsx index 4e84445040..53d960c864 100644 --- a/packages/core/src/components/LayerProvider/LayerProvider.tsx +++ b/packages/core/src/components/LayerProvider/LayerProvider.tsx @@ -1,34 +1,13 @@ -import React, { FC, useRef, useEffect, Children } from "react"; +import React, { FC } from "react"; import LayerContext from "./LayerContext"; interface LayerProviderType { children: JSX.Element | JSX.Element[]; - layerRef?: React.RefObject | null; + layerRef: React.RefObject | null; } const LayerProvider: FC = ({ children, layerRef }) => { - const childrenRef = useRef(); - - useEffect(() => { - if (!childrenRef.current && !layerRef) { - console.warn( - "LayerProvider: The child component does not forward its ref. Use forwardRef, or alternatively use the `layerRef` prop to pass a ref to the child component." - ); - } - }, [layerRef]); - - if (layerRef?.current) { - return {children}; - } - - const child = children && Children.only(children); - - if (!child) { - console.warn("LayerProvider: The child component must be a single element"); - } - - const childrenWithRef = React.cloneElement(child, { ref: childrenRef }); - return {childrenWithRef}; + return {children}; }; export default LayerProvider; From 6d9dc09a4423631d4ea1e916aa1730166a429a46 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Tue, 5 Mar 2024 18:21:22 +0200 Subject: [PATCH 18/19] test: snapshots --- .../button-snapshot-tests.jest.js.snap | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/core/src/components/Button/__tests__/__snapshots__/button-snapshot-tests.jest.js.snap b/packages/core/src/components/Button/__tests__/__snapshots__/button-snapshot-tests.jest.js.snap index 5824a7a1cd..28c0139270 100644 --- a/packages/core/src/components/Button/__tests__/__snapshots__/button-snapshot-tests.jest.js.snap +++ b/packages/core/src/components/Button/__tests__/__snapshots__/button-snapshot-tests.jest.js.snap @@ -78,6 +78,23 @@ exports[`Button renders correctly renders Button color- fixed-light 1`] = ` `; +exports[`Button renders correctly renders Button color- inverted 1`] = ` + +`; + exports[`Button renders correctly renders Button color- negative 1`] = `