Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Support overlays in react portals in different document (#12445)
### WHY are these changes introduced? Fix issues related to overlays not working correct in App Bridge modals as outlined in this [doc](https://docs.google.com/document/d/1eocCl07pk8xt7rvUaGDWZzfJxxeJ2yRi1ul0x0ezkDM/edit). These specific issues will be fixed - Shopify/shopify-app-bridge#316 - Shopify/shopify-app-bridge#264 (comment) - Shopify/shopify-app-bridge#238 (comment) - Shopify/shopify-app-bridge#301 ### WHAT is this pull request doing? Currently Overlays are broken when rendered using React portals. This PR fixes the issue by doing the following: - ensuring all references to `document` are updated to be `node.ownerDocument` instead so the positioning can be calculated correctly inside of iframes - ensuring wherever we do `instanceOf HTMLElement` we instead just check to see if the node is present or try to call the related methods (`getBoundingClientRect`) with a fallback as the `instanceof` check will fail when using React portals for iframe content since iframes have their own globals This PR only touches the related utils for Overlays but there are other references to `document` and `instanceOf HTMLElement` we should also update. Expected usage with App Bridge v4, note that you have to wrap the modal's content with the AppProvider from Polaris so that the portals are created in the correct place. For example, here's a modal with tooltips inside: ```jsx import {AppProvider} from '@shopify/polaris'; import {Modal} from '@shopify/app-bridge-react'; function App() { return ( <Modal> <AppProvider i18n={{}}> <div style={{padding: '75px 0'}}> <Tooltip content="This order has shipping labels."> <Text fontWeight="bold" as="span"> Order #1001 </Text> </Tooltip> <ButtonGroup variant="segmented" fullWidth> <Tooltip content="Bold" dismissOnMouseOut> <Button>B</Button> </Tooltip> <Tooltip content="Italic" dismissOnMouseOut> <Button>I</Button> </Tooltip> <Tooltip content="Underline" dismissOnMouseOut> <Button>U</Button> </Tooltip> <Tooltip content="Strikethrough" dismissOnMouseOut> <Button>S</Button> </Tooltip> </ButtonGroup> </div> </AppProvider> </Modal> ); } ``` **Before** https:/user-attachments/assets/f7b7a7df-f25f-422c-a5bc-d1a8d7f12167 **After** https:/user-attachments/assets/6c1bf97a-e8f4-4715-9960-9f5709222f75 https:/user-attachments/assets/ebc4755e-cc3b-413a-aaf5-9f39cc7b7ad0 ### How to 🎩 🖥 [Local development instructions](https:/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https:/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https:/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) 1. Open the App Bridge Playground: https://admin.shopify.com/store/trish-dev/apps/app-bridge-next-playground-4/react/index.html 2. Open all the custom content modals and do a smoke test to verify overlay components are rendered on top with correct sizing and click events are working ### 🎩 checklist - [X] Tested a [snapshot](https:/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [X] Tested on [mobile](https:/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [X] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) ~- [ ] Tested for [accessibility](https:/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)~ ~- [ ] Updated the component's `README.md` with documentation changes~ ~- [ ] [Tophatted documentation](https:/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide~
- Loading branch information