OverlayPanel: fix PopoverEducational positioning issues in footer (#3132

)
pinterest · Aug 17, 2023 · ce19b9e · ce19b9e
1 parent d036e4b
commit ce19b9e
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 46 deletions.
diff --git a/packages/gestalt/src/OverlayPanel/InternalOverlayPanel.js b/packages/gestalt/src/OverlayPanel/InternalOverlayPanel.js
@@ -259,23 +259,28 @@ export default function InternalOverlayPanel({
                   </Box>
                 )}
                 <ScrollBoundaryContainerProvider>
-                  <InternalScrollBoundaryContainer
-                    onScroll={updateShadows}
-                    padding={PADDING_BOINTS}
-                    ref={contentRef}
-                  >
-                    {buildDismissableSubcomponent(children)}
+                  <InternalScrollBoundaryContainer includesFooter>
+                    <ScrollBoundaryContainerProvider>
+                      <InternalScrollBoundaryContainer
+                        onScroll={updateShadows}
+                        padding={PADDING_BOINTS}
+                        ref={contentRef}
+                      >
+                        {buildDismissableSubcomponent(children)}
+                      </InternalScrollBoundaryContainer>
+                    </ScrollBoundaryContainerProvider>
+                    {Boolean(footer) && (
+                      <Box
+                        borderStyle={showBottomShadow ? 'raisedBottomShadow' : undefined}
+                        position="relative"
+                        fit
+                      >
+                        <Box padding={PADDING_BOINTS}>{buildDismissableSubcomponent(footer)}</Box>
+                      </Box>
+                    )}
                   </InternalScrollBoundaryContainer>
                 </ScrollBoundaryContainerProvider>
-                {Boolean(footer) && (
-                  <Box
-                    borderStyle={showBottomShadow ? 'raisedBottomShadow' : undefined}
-                    position="relative"
-                    fit
-                  >
-                    <Box padding={PADDING_BOINTS}>{buildDismissableSubcomponent(footer)}</Box>
-                  </Box>
-                )}
+
                 {showPopover && (
                   <ConfirmationPopover
                     anchor={dismissButtonRef.current}

diff --git a/...ages/gestalt/src/ScrollBoundaryContainer/InternalScrollBoundaryContainerWithForwardRef.js b/...ages/gestalt/src/ScrollBoundaryContainer/InternalScrollBoundaryContainerWithForwardRef.js
@@ -15,6 +15,7 @@ type ScrollBoundaryContainerOverflow = 'scroll' | 'scrollX' | 'scrollY' | 'auto'
 
 type InternalProps = {|
   children?: Node,
+  includesFooter?: boolean,
   height?: Dimension,
   onScroll?: () => void,
   overflow?: ScrollBoundaryContainerOverflow,
@@ -25,7 +26,14 @@ type InternalProps = {|
 // It has an extended API with private props (onScroll, padding, and ref) to maintain border shadows in the component main content container.
 const ScrollBoundaryContainerWithForwardRef: AbstractComponent<InternalProps, HTMLElement> =
   forwardRef<InternalProps, HTMLElement>(function ScrollBoundaryContainer(
-    { children, onScroll, padding = 0, height = '100%', overflow = 'auto' }: InternalProps,
+    {
+      children,
+      onScroll,
+      includesFooter,
+      padding = 0,
+      height = '100%',
+      overflow = 'auto',
+    }: InternalProps,
     ref,
   ): Node {
     const { addRef } = useScrollBoundaryContainer();
@@ -41,13 +49,16 @@ const ScrollBoundaryContainerWithForwardRef: AbstractComponent<InternalProps, HT
     }, [addRef]);
     return (
       <Box
-        flex={onScroll ? 'grow' : undefined}
+        display={includesFooter ? 'flex' : undefined}
+        direction={includesFooter ? 'column' : undefined}
+        flex={onScroll || includesFooter ? 'grow' : undefined}
         height={height}
-        overflow={overflow}
+        overflow={includesFooter ? 'visible' : overflow}
         onScroll={onScroll}
         padding={padding}
         position="relative"
         ref={anchorRef}
+        width={includesFooter ? '100%' : undefined}
       >
         {children}
       </Box>

diff --git a/packages/gestalt/src/__snapshots__/OverlayPanel.jsdom.test.js.snap b/packages/gestalt/src/__snapshots__/OverlayPanel.jsdom.test.js.snap
@@ -62,10 +62,15 @@ exports[`OverlayPanel renders OverlayPanel with confirmation modal 1`] = `
             </div>
           </div>
           <div
-            class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
-            style="height: 100%;"
+            class="box flexGrow paddingX0 paddingY0 relative xsDirectionColumn xsDisplayFlex"
+            style="height: 100%; width: 100%;"
           >
-            <section />
+            <div
+              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              style="height: 100%;"
+            >
+              <section />
+            </div>
           </div>
           <div>
             <div
@@ -258,18 +263,23 @@ exports[`OverlayPanel should render all props with nodes 1`] = `
             <nav />
           </div>
           <div
-            class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
-            style="height: 100%;"
-          >
-            <section />
-          </div>
-          <div
-            class="box fit relative"
+            class="box flexGrow paddingX0 paddingY0 relative xsDirectionColumn xsDisplayFlex"
+            style="height: 100%; width: 100%;"
           >
             <div
-              class="box paddingX6 paddingY6"
+              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              style="height: 100%;"
             >
-              <footer />
+              <section />
+            </div>
+            <div
+              class="box fit relative"
+            >
+              <div
+                class="box paddingX6 paddingY6"
+              >
+                <footer />
+              </div>
             </div>
           </div>
         </div>
@@ -357,23 +367,28 @@ exports[`OverlayPanel should render all props with render props 1`] = `
             />
           </div>
           <div
-            class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
-            style="height: 100%;"
-          >
-            <button
-              type="submit"
-            />
-          </div>
-          <div
-            class="box fit relative"
+            class="box flexGrow paddingX0 paddingY0 relative xsDirectionColumn xsDisplayFlex"
+            style="height: 100%; width: 100%;"
           >
             <div
-              class="box paddingX6 paddingY6"
+              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              style="height: 100%;"
             >
               <button
                 type="submit"
               />
             </div>
+            <div
+              class="box fit relative"
+            >
+              <div
+                class="box paddingX6 paddingY6"
+              >
+                <button
+                  type="submit"
+                />
+              </div>
+            </div>
           </div>
         </div>
       </div>
@@ -445,10 +460,15 @@ exports[`OverlayPanel should render animation in 1`] = `
             </div>
           </div>
           <div
-            class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
-            style="height: 100%;"
+            class="box flexGrow paddingX0 paddingY0 relative xsDirectionColumn xsDisplayFlex"
+            style="height: 100%; width: 100%;"
           >
-            <section />
+            <div
+              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              style="height: 100%;"
+            >
+              <section />
+            </div>
           </div>
         </div>
       </div>
@@ -520,10 +540,15 @@ exports[`OverlayPanel should render animation out 1`] = `
             </div>
           </div>
           <div
-            class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
-            style="height: 100%;"
+            class="box flexGrow paddingX0 paddingY0 relative xsDirectionColumn xsDisplayFlex"
+            style="height: 100%; width: 100%;"
           >
-            <section />
+            <div
+              class="box flexGrow overflowAuto paddingX6 paddingY6 relative"
+              style="height: 100%;"
+            >
+              <section />
+            </div>
           </div>
         </div>
       </div>

diff --git a/packages/gestalt/src/__snapshots__/ScrollBoundaryContainer.test.js.snap b/packages/gestalt/src/__snapshots__/ScrollBoundaryContainer.test.js.snap
@@ -6,6 +6,7 @@ exports[`ScrollBoundaryContainer ScrollBoundaryContainer correctly sets height a
   style={
     Object {
       "height": 200,
+      "width": undefined,
     }
   }
 >
@@ -21,6 +22,7 @@ exports[`ScrollBoundaryContainer renders 1`] = `
   style={
     Object {
       "height": "100%",
+      "width": undefined,
     }
   }
 >

diff --git a/packages/gestalt/src/__snapshots__/SideNavigation.test.js.snap b/packages/gestalt/src/__snapshots__/SideNavigation.test.js.snap
@@ -6,6 +6,7 @@ exports[`SideNavigation renders Header + Footer 1`] = `
   style={
     Object {
       "height": "100%",
+      "width": undefined,
     }
   }
 >
@@ -173,6 +174,7 @@ exports[`SideNavigation renders Icon + Badge/Notification + Counter + Border 1`]
   style={
     Object {
       "height": "100%",
+      "width": undefined,
     }
   }
 >
@@ -500,6 +502,7 @@ exports[`SideNavigation renders Sections 1`] = `
   style={
     Object {
       "height": "100%",
+      "width": undefined,
     }
   }
 >
@@ -627,6 +630,7 @@ exports[`SideNavigation renders basic Item 1`] = `
   style={
     Object {
       "height": "100%",
+      "width": undefined,
     }
   }
 >
@@ -730,6 +734,7 @@ exports[`SideNavigation renders nested directory 1`] = `
   style={
     Object {
       "height": "100%",
+      "width": undefined,
     }
   }
 >