✨ [Popover] Now observes overlay attributes

UNRELEASED.md

@@ -12,6 +12,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Added `ariaLabelledBy` props to `Navigation` component to allow a hidden label for accessibility ([#4343](https://github.com/Shopify/polaris-react/pull/4343))
 - Add `lastColumnSticky` prop to `IndexTable` to create a sticky last cell and optional sticky last heading on viewports larger than small ([#4150](https://github.com/Shopify/polaris-react/pull/4150))
 - Allow promoted actions to be rendered as a menu on the `BulkAction` component ([#4266](https://github.com/Shopify/polaris-react/pull/4266))
+- Added `attributes` to the mutation observer for `Popover > PositionedOverlay` “overlay” element ([#4372](https://github.com/Shopify/polaris-react/pull/4372))
 
 ### Bug fixes
 

src/components/PositionedOverlay/PositionedOverlay.tsx

@@ -57,7 +57,14 @@ interface State {
   lockPosition: boolean;
 }
 
-const OBSERVER_CONFIG = {
+export const OBSERVER_CONFIG_OVERLAY = {
+  childList: true,
+  subtree: true,
+  attributes: true,
+  characterData: true,
+};
+
+export const OBSERVER_CONFIG_ACTIVATOR = {
   childList: true,
   subtree: true,
   characterData: true,
@@ -281,8 +288,8 @@ export class PositionedOverlay extends PureComponent<
           },
           () => {
             if (!this.overlay) return;
-            this.observer.observe(this.overlay, OBSERVER_CONFIG);
-            this.observer.observe(activator, OBSERVER_CONFIG);
+            this.observer.observe(this.overlay, OBSERVER_CONFIG_OVERLAY);
+            this.observer.observe(activator, OBSERVER_CONFIG_ACTIVATOR);
           },
         );
       },

src/components/PositionedOverlay/tests/PositionedOverlay.test.tsx

@@ -3,7 +3,11 @@ import React from 'react';
 import {mountWithAppProvider} from 'test-utilities/legacy';
 
 import {EventListener} from '../../EventListener';
-import {PositionedOverlay} from '../PositionedOverlay';
+import {
+  PositionedOverlay,
+  OBSERVER_CONFIG_OVERLAY,
+  OBSERVER_CONFIG_ACTIVATOR,
+} from '../PositionedOverlay';
 import * as mathModule from '../utilities/math';
 import * as geometry from '../../../utilities/geometry';
 import styles from '../PositionedOverlay.scss';
@@ -38,7 +42,19 @@ describe('<PositionedOverlay />', () => {
       mutationObserverObserveSpy.mockRestore();
     });
 
-    it('observers the activator', () => {
+    it('observes the overlay', () => {
+      const positionedOverlay = mountWithAppProvider(
+        <PositionedOverlay {...mockProps} />,
+      );
+      const element = positionedOverlay.find('div').getDOMNode();
+
+      expect(mutationObserverObserveSpy).toHaveBeenCalledWith(
+        element,
+        OBSERVER_CONFIG_OVERLAY,
+      );
+    });
+
+    it('observes the activator', () => {
       const activator = document.createElement('button');
       mountWithAppProvider(
         <PositionedOverlay
@@ -48,11 +64,10 @@ describe('<PositionedOverlay />', () => {
         />,
       );
 
-      expect(mutationObserverObserveSpy).toHaveBeenCalledWith(activator, {
-        characterData: true,
-        childList: true,
-        subtree: true,
-      });
+      expect(mutationObserverObserveSpy).toHaveBeenCalledWith(
+        activator,
+        OBSERVER_CONFIG_ACTIVATOR,
+      );
     });
   });