portal container

Author: dleroux

src/components/Portal/Portal.tsx

@@ -68,7 +68,9 @@ export class Portal extends PureComponent<PortalProps, State> {
     if (this.portalTargetEl && this.context != null) {
       const {cssCustomProperties, textColor} = this.context;
       if (cssCustomProperties != null) {
-        const style = `${cssCustomProperties};color:${textColor};`;
+        const style = textColor
+          ? `${cssCustomProperties};color:${textColor};`
+          : `${cssCustomProperties}`;
         this.portalTargetEl.setAttribute('style', style);
       } else {
         this.portalTargetEl.removeAttribute('style');

src/components/Portal/tests/Portal.test.tsx

@@ -1,9 +1,9 @@
 import React, {createRef} from 'react';
-import {mount} from 'test-utilities';
+import {mount, mountWithApp} from 'test-utilities';
 // eslint-disable-next-line no-restricted-imports
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
-import {Portal} from '../Portal';
+import {Portal, UNIQUE_CONTAINER_ID} from '../Portal';
 import {portal} from '../../shared';
 
 jest.mock('react-dom', () => ({
@@ -28,6 +28,41 @@ describe('<Portal />', () => {
     createPortalSpy.mockRestore();
   });
 
+  describe('container', () => {
+    it('creates a portal container with the UNIQUE_CONTAINER_ID', () => {
+      const appendChildSpy = jest.spyOn(document.body, 'appendChild');
+      mountWithApp(<Portal />);
+      expect(appendChildSpy).toHaveBeenLastCalledWith(
+        expect.objectContaining({
+          id: UNIQUE_CONTAINER_ID,
+        }),
+      );
+      appendChildSpy.mockReset();
+    });
+
+    it('sets CSS custom properties on the portal node', () => {
+      const setSpy = jest.spyOn(Element.prototype, 'setAttribute');
+      const portal = mountWithAppProvider(<Portal />, {
+        features: {newDesignLanguage: true},
+        theme: {
+          colors: {surface: '#000000'},
+        },
+      });
+
+      expect(setSpy).toHaveBeenLastCalledWith(
+        'style',
+        portal.context().cssCustomProperties,
+      );
+      setSpy.mockRestore();
+    });
+
+    it('removes CSS custom properties from the portal node', () => {
+      const removeSpy = jest.spyOn(Element.prototype, 'removeAttribute');
+      mountWithAppProvider(<Portal />);
+      expect(removeSpy).toHaveBeenCalledWith('style');
+    });
+  });
+
   describe('children', () => {
     it('get passed into the portal creation method', () => {
       const children = <div />;
@@ -104,25 +139,4 @@ describe('<Portal />', () => {
       mount(<Portal />);
     }).not.toThrow();
   });
-
-  it('sets CSS custom properties on the portal node', () => {
-    const setSpy = jest.spyOn(Element.prototype, 'setAttribute');
-    const portal = mountWithAppProvider(<Portal />, {
-      features: {newDesignLanguage: true},
-      theme: {
-        colors: {surface: '#000000'},
-      },
-    });
-
-    expect(setSpy).toHaveBeenCalledWith(
-      'style',
-      portal.context().cssCustomProperties,
-    );
-  });
-
-  it('removes CSS custom properties from the portal node', () => {
-    const removeSpy = jest.spyOn(Element.prototype, 'removeAttribute');
-    mountWithAppProvider(<Portal />);
-    expect(removeSpy).toHaveBeenCalledWith('style');
-  });
 });