feat(@clayui/shared): Allow to pass className and/or id to the portal…

… root element
liferay · May 18, 2021 · 132ab1e · 132ab1e
1 parent fcc9e36
commit 132ab1e
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 2 deletions.
diff --git a/packages/clay-shared/src/Portal.tsx b/packages/clay-shared/src/Portal.tsx
@@ -24,7 +24,7 @@ export const ClayPortal: React.FunctionComponent<
 		 */
 		subPortalRef?: React.RefObject<Element>;
 	}
-> = ({children, containerRef, subPortalRef}) => {
+> = ({children, containerRef, subPortalRef, ...otherProps}) => {
 	const parentPortalRef = React.useContext(ClayPortalContext);
 	const portalRef = React.useRef(
 		typeof document !== 'undefined' ? document.createElement('div') : null
@@ -42,6 +42,13 @@ export const ClayPortal: React.FunctionComponent<
 				: closestParent;
 
 		if (elToMountTo && portalRef.current) {
+			if (otherProps?.className) {
+				portalRef.current.classList.add(otherProps.className);
+			}
+			if (otherProps?.id) {
+				portalRef.current.id = otherProps.id;
+			}
+
 			elToMountTo.appendChild(portalRef.current);
 		}
 

diff --git a/packages/clay-shared/src/__tests__/Portal.tsx b/packages/clay-shared/src/__tests__/Portal.tsx
@@ -139,4 +139,18 @@ describe('Portal', () => {
 				.contains(document.getElementById('portal'))
 		).toBeTruthy();
 	});
-});
+
+	it('pass className and id to the root element', () => {
+		const App = () => {
+			return (
+				<ClayPortal className="portalClass" id="portalId">
+					<div id="portal" />
+				</ClayPortal>
+			);
+		};
+
+		render(<App />);
+
+		expect(document.body).toMatchSnapshot();
+	});
+});
diff --git a/packages/clay-shared/src/__tests__/__snapshots__/Portal.tsx.snap b/packages/clay-shared/src/__tests__/__snapshots__/Portal.tsx.snap
@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Portal pass className and id to the root element 1`] = `
+<body>
+  <div />
+  <div
+    class="portalClass"
+    id="portalId"
+  >
+    <div
+      id="portal"
+    />
+  </div>
+</body>
+`;