fix: Fix split panel height calculations when screen viewport is resi…

…zed (#479)
cloudscape-design · Nov 15, 2022 · 080546b · 080546b
1 parent 72548f0
commit 080546b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/src/app-layout/__integ__/app-layout-split-panel.test.ts b/src/app-layout/__integ__/app-layout-split-panel.test.ts
@@ -119,7 +119,18 @@ test(
     await expect(page.getPanelPosition()).resolves.toEqual('side');
   })
 );
+test(
+  'switches to bottom position when screen resizes to mobile',
+  setupTest(async page => {
+    await page.openPanel();
+    await page.switchPosition('side');
+    await expect(page.getPanelPosition()).resolves.toEqual('side');
 
+    await page.setWindowSize(viewports.mobile);
+    await expect(page.getPanelPosition()).resolves.toEqual('bottom');
+    await expect(page.getContentMarginBottom()).resolves.toEqual('160px');
+  })
+);
 test(
   'switches to bottom position when screen is too narrow and restores back on resize',
   setupTest(async page => {

diff --git a/src/app-layout/index.tsx b/src/app-layout/index.tsx
@@ -162,11 +162,15 @@ const OldAppLayout = React.forwardRef(
       footerSelector,
       disableBodyScroll
     );
+    const [isSplitpanelForcedPosition, setIsSplitpanelForcedPosition] = useState(false);
+
     const [notificationsHeight, notificationsRef] = useContainerQuery(rect => rect.height);
     const [splitPanelHeaderHeight, splitPanelHeaderMeasureRef] = useContainerQuery(
       rect => (splitPanel ? rect.height : 0),
-      [splitPanel]
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      [splitPanel, isSplitpanelForcedPosition]
     );
+
     const splitPanelHeaderRefObject = useRef(null);
     const splitPanelHeaderRef = useMergeRefs(splitPanelHeaderMeasureRef, splitPanelHeaderRefObject);
     const anyPanelOpen = navigationVisible || toolsVisible;
@@ -188,7 +192,7 @@ const OldAppLayout = React.forwardRef(
     const [splitPanelHeight, splitPanelRef] = useContainerQuery(
       rect => (splitPanel ? rect.height : 0),
       // eslint-disable-next-line react-hooks/exhaustive-deps
-      [splitPanel, splitPanelPosition]
+      [splitPanel, splitPanelPosition, isSplitpanelForcedPosition]
     );
 
     const closedDrawerWidth = 40;
@@ -273,8 +277,7 @@ const OldAppLayout = React.forwardRef(
       }
     });
 
-    const [isForcedPosition, setIsForcedPosition] = useState(false);
-    const finalSplitPanePosition = isForcedPosition ? 'bottom' : splitPanelPosition;
+    const finalSplitPanePosition = isSplitpanelForcedPosition ? 'bottom' : splitPanelPosition;
 
     const splitPaneAvailableOnTheSide = Boolean(splitPanel) && finalSplitPanePosition === 'side';
     const splitPanelOpenOnTheSide = splitPaneAvailableOnTheSide && splitPanelOpen;
@@ -293,7 +296,7 @@ const OldAppLayout = React.forwardRef(
 
     useEffect(() => {
       const contentWidth = contentWidthWithSplitPanel - splitPanelSize;
-      setIsForcedPosition(isMobile || (defaults.minContentWidth || 0) > contentWidth);
+      setIsSplitpanelForcedPosition(isMobile || (defaults.minContentWidth || 0) > contentWidth);
       // This is a workaround to avoid a forced position due to splitPanelSize, which is
       // user controlled variable.
       // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -329,7 +332,7 @@ const OldAppLayout = React.forwardRef(
       isOpen: splitPanelOpen,
       isMobile,
       isRefresh: false,
-      isForcedPosition,
+      isForcedPosition: isSplitpanelForcedPosition,
       lastInteraction: splitPanelLastInteraction,
       splitPanelRef,
       splitPanelHeaderRef,