fix(docs): Fix overflow in Editor Toolbar prototype opened in Portal (#…

…2053) * fix(docs): Fix overflow in Editor Toolbar prototype opened in Portal * changelog
microsoft · Oct 23, 2019 · 799653d · 799653d
1 parent 9be8eb1
commit 799653d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add `menu` prop on `ToolbarMenuItem` component @mnajdova ([#1984](https://github.com/stardust-ui/react/pull/1984))
 
+### Documentation
+- Editor Toolbar prototype: Fix overflow menu overflowing in Portal window @miroslavstastny ([#2053](https://github.com/stardust-ui/react/pull/2053))
+
 <!--------------------------------[ v0.40.1 ]------------------------------- -->
 ## [v0.40.1](https://github.com/stardust-ui/react/tree/v0.40.1) (2019-10-18)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.40.0...v0.40.1)

diff --git a/docs/src/prototypes/EditorToolbar/PortalWindow.tsx b/docs/src/prototypes/EditorToolbar/PortalWindow.tsx
@@ -18,7 +18,14 @@ const PortalWindow: React.FunctionComponent<PortalWindowProps> = ({ children, on
     externalWindow.current.document.documentElement.style.fontSize = getComputedStyle(
       document.documentElement,
     ).fontSize
+    externalWindow.current.document.documentElement.style.height = '100%'
+    externalWindow.current.document.documentElement.style.width = '100%'
+    externalWindow.current.document.body.style.height = '100%'
+    externalWindow.current.document.body.style.width = '100%'
+
     externalContainer.current = externalWindow.current.document.createElement('div')
+    externalContainer.current.style.height = 'inherit'
+    externalContainer.current.style.width = 'inherit'
 
     externalWindow.current.document.body.appendChild(externalContainer.current)
     if (onClose) externalWindow.current.onbeforeunload = onClose

diff --git a/docs/src/prototypes/EditorToolbar/index.tsx b/docs/src/prototypes/EditorToolbar/index.tsx
@@ -39,7 +39,12 @@ const EditorToolbarInWindowPrototype = () => {
       {open && (
         <PortalWindow onClose={() => setOpen(false)}>
           {externalDocument => (
-            <Provider rtl={rtl} theme={themes.teams} target={externalDocument}>
+            <Provider
+              rtl={rtl}
+              theme={themes.teams}
+              styles={{ overflow: 'hidden', height: 'inherit', width: 'inherit' }}
+              target={externalDocument}
+            >
               <EditorToolbar {...state} dispatch={dispatch} />
             </Provider>
           )}