refactor: only scroll content, never header

contentful · Sep 6, 2024 · 7988c7f · 7988c7f
1 parent c349394
commit 7988c7f
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 50 deletions.
diff --git a/packages/components/layout/src/Layout.styles.ts b/packages/components/layout/src/Layout.styles.ts
@@ -4,7 +4,7 @@ import type { LayoutProps } from './Layout';
 import type { LayoutContextType } from './LayoutContext';
 
 export const NAVBAR_HEIGHT = 60;
-export const HEADER_HEIGHT = 56;
+export const HEADER_HEIGHT = 57; // header plus border
 
 const getMainOffset = (withHeader: boolean) =>
   withHeader ? HEADER_HEIGHT + NAVBAR_HEIGHT + 'px' : NAVBAR_HEIGHT + 'px';
@@ -53,7 +53,7 @@ const getContentContainerGridTemplateColumns = ({
   }
 
   if (variant !== 'narrow' && withLeftSidebar && withRightSidebar) {
-    gridTemplateColumns = 'auto auto auto';
+    gridTemplateColumns = `${sidebarWidth} auto ${sidebarWidth}`;
   }
 
   return css({
@@ -72,12 +72,6 @@ export const getLayoutStyles = ({
   withLeftSidebar?: boolean;
   withRightSidebar?: boolean;
 }) => ({
-  // this container will scroll if the content is too long and there is no sidebar
-  layoutWrapper: css({
-    width: '100%',
-    height: '100vh',
-    overflowY: 'auto',
-  }),
   layoutMainContainer: css(
     getLayoutMaxWidthStyles({ variant, withBoxShadow }),
     {
@@ -99,21 +93,13 @@ export const getLayoutStyles = ({
   ),
 });
 
-export const getLayoutBodyStyles = (
-  variant: LayoutContextType['variant'],
-  withSidebars: boolean,
-  withHeader: boolean,
-) => ({
-  layoutBodyContainer: css(
-    {
-      width: '100%',
-      padding: `${tokens.spacingL} ${tokens.spacingL} 0`,
-    },
-    withSidebars && {
-      overflowY: 'auto',
-      height: `calc(100vh - ${getMainOffset(withHeader)})`,
-    },
-  ),
+export const getLayoutBodyStyles = (withHeader: boolean) => ({
+  layoutBodyContainer: css({
+    width: '100%',
+    padding: `${tokens.spacingL} ${tokens.spacingL} 0`,
+    overflowY: 'auto',
+    height: `calc(100vh - ${getMainOffset(withHeader)})`,
+  }),
   layoutBodyInner: css({
     maxWidth: '900px',
     margin: '0 auto',

diff --git a/packages/components/layout/src/Layout.tsx b/packages/components/layout/src/Layout.tsx
@@ -59,37 +59,32 @@ const _Layout = (props: LayoutProps, ref: Ref<HTMLDivElement>) => {
   const contextValue: LayoutContextType = useMemo(
     () => ({
       variant,
-      withSidebars: Boolean(leftSidebar || rightSidebar),
       withHeader: Boolean(header),
     }),
-    [variant, leftSidebar, rightSidebar, header],
+    [variant, header],
   );
 
   return (
     <LayoutContextProvider value={contextValue}>
-      <Box
+      <Flex
         ref={ref}
         testId={testId}
-        className={cx(styles.layoutWrapper, className)}
         as="section"
+        {...otherProps}
+        className={styles.layoutMainContainer}
+        flexDirection="column"
       >
-        <Flex
-          {...otherProps}
-          className={styles.layoutMainContainer}
-          flexDirection="column"
-        >
-          {header}
+        {header}
 
-          <Box
-            className={cx(styles.layoutContentContainer, contentClassName)}
-            testId={contentTestId}
-          >
-            {leftSidebar}
-            {children}
-            {rightSidebar}
-          </Box>
-        </Flex>
-      </Box>
+        <Box
+          className={cx(styles.layoutContentContainer, contentClassName)}
+          testId={contentTestId}
+        >
+          {leftSidebar}
+          {children}
+          {rightSidebar}
+        </Box>
+      </Flex>
     </LayoutContextProvider>
   );
 };

diff --git a/packages/components/layout/src/LayoutBody.tsx b/packages/components/layout/src/LayoutBody.tsx
@@ -16,8 +16,8 @@ const _LayoutBody = (props: LayoutBodyProps, ref: Ref<HTMLDivElement>) => {
     testId = 'cf-layout-body',
     ...otherProps
   } = props;
-  const { variant, withSidebars, withHeader } = useLayoutContext();
-  const styles = getLayoutBodyStyles(variant, withSidebars, withHeader);
+  const { variant, withHeader } = useLayoutContext();
+  const styles = getLayoutBodyStyles(withHeader);
 
   return (
     <Box

diff --git a/packages/components/layout/src/LayoutContext.ts b/packages/components/layout/src/LayoutContext.ts
@@ -3,7 +3,6 @@ import { LayoutProps } from './Layout';
 
 export type LayoutContextType = {
   variant: NonNullable<LayoutProps['variant']>;
-  withSidebars: boolean;
   withHeader: boolean;
 };
 

diff --git a/packages/components/layout/stories/Layout.stories.tsx b/packages/components/layout/stories/Layout.stories.tsx
@@ -28,8 +28,19 @@ const ExampleWrapper = ({ children }) => (
       height: '100vh',
       margin: '-1rem',
       backgroundColor: 'lavender',
+      flexDirection: 'column',
     })}
   >
+    <div
+      className={css({
+        width: '100vw',
+        height: '60px',
+        backgroundColor: 'lavender',
+      })}
+    >
+      Navbar
+    </div>
+
     {children}
   </div>
 );
@@ -58,15 +69,15 @@ const LayoutSidebarComp = ({ content }) => (
   </Layout.Sidebar>
 );
 
-export const withHeader: Story<LayoutProps> = (args) => {
+export const basic: Story<LayoutProps> = (args) => {
   return (
     <ExampleWrapper>
-      <Layout header={<LayoutHeaderComp />} {...args}>
+      <Layout {...args}>
         <LayoutBody>
           <Box
             className={css({
               width: '100%',
-              height: '400px',
+              height: '1200px',
               backgroundColor: 'lavenderblush',
             })}
           >
@@ -78,7 +89,7 @@ export const withHeader: Story<LayoutProps> = (args) => {
   );
 };
 
-export const withLongContent: Story<LayoutProps> = (args) => {
+export const withHeader: Story<LayoutProps> = (args) => {
   return (
     <ExampleWrapper>
       <Layout header={<LayoutHeaderComp />} {...args}>