feat(chrome)!: detect Footer automatically with Context (#1761)

geotrev · web-flow · commit 074840e2792b · 2024-03-29T14:27:06.000-05:00
diff --git a/docs/migration.md b/docs/migration.md
@@ -56,7 +56,9 @@ consider additional positioning prop support on a case-by-case basis.
 #### @zendeskgarden/react-chrome
 
 - Removed `PRODUCT` type export. Use `IHeaderItemProps['product']` instead.
+- Removed `hasFooter` prop for `Body` (no replacement needed)
 - The following React component types have changed:
+  - Removed `IBodyProps` type export.
   - Renamed `ICollapsibleSubNavItemProps` type export to `ISubNavCollapsibleItemProps`.
   - `Header.ItemIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
   - `Nav.ItemIcon`: `HTMLAttributes<HTMLElement>` -> `SVGAttributes<SVGElement>`
diff --git a/packages/chrome/demo/stories/ChromeStory.tsx b/packages/chrome/demo/stories/ChromeStory.tsx
@@ -195,7 +195,7 @@ export const ChromeStory: Story<IArgs> = ({
           )}
         </SubNav>
       )}
-      <Body hasFooter={hasFooter}>
+      <Body>
         {hasHeader && (
           <Header isStandalone={!(hasNav || hasSubNav)}>
             {hasLogo && (
diff --git a/packages/chrome/src/elements/body/Body.tsx b/packages/chrome/src/elements/body/Body.tsx
@@ -5,27 +5,27 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { useMemo } from 'react';
-import PropTypes from 'prop-types';
-import { IBodyProps } from '../../types';
+import React, { HTMLAttributes, useMemo, useState } from 'react';
 import { StyledBody } from '../../styled';
 import { BodyContext } from '../../utils/useBodyContext';
 
 /**
  * @extends HTMLAttributes<HTMLDivElement>
  */
-export const Body = React.forwardRef<HTMLDivElement, IBodyProps>(({ hasFooter, ...props }, ref) => {
-  const bodyContextValue = useMemo(() => ({ hasFooter: !!hasFooter }), [hasFooter]);
+export const Body = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  (props, ref) => {
+    const [hasFooter, setHasFooter] = useState(false);
+    const bodyContextValue = useMemo(
+      () => ({ hasFooter, setHasFooter }),
+      [hasFooter, setHasFooter]
+    );
 
-  return (
-    <BodyContext.Provider value={bodyContextValue}>
-      <StyledBody ref={ref} {...props} />
-    </BodyContext.Provider>
-  );
-});
+    return (
+      <BodyContext.Provider value={bodyContextValue}>
+        <StyledBody ref={ref} {...props} />
+      </BodyContext.Provider>
+    );
+  }
+);
 
 Body.displayName = 'Body';
-
-Body.propTypes = {
-  hasFooter: PropTypes.bool
-};
diff --git a/packages/chrome/src/elements/body/Content.spec.tsx b/packages/chrome/src/elements/body/Content.spec.tsx
@@ -8,12 +8,17 @@
 import React from 'react';
 import { render } from 'garden-test-utils';
 import { Content } from './Content';
+import { Body } from './Body';
 
 describe('Content', () => {
   it('passes ref to underlying DOM element', () => {
     const ref = React.createRef<HTMLDivElement>();
-    const { container } = render(<Content ref={ref} />);
+    const { queryByTestId } = render(
+      <Body>
+        <Content ref={ref} data-test-id="content" />
+      </Body>
+    );
 
-    expect(container.firstChild).toBe(ref.current);
+    expect(queryByTestId('content')).toBe(ref.current);
   });
 });
diff --git a/packages/chrome/src/elements/body/Content.tsx b/packages/chrome/src/elements/body/Content.tsx
@@ -14,7 +14,7 @@ import { useBodyContext } from '../../utils/useBodyContext';
  */
 export const Content = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   (props, ref) => {
-    const { hasFooter } = useBodyContext();
+    const { hasFooter } = useBodyContext() || {};
 
     return <StyledContent ref={ref} hasFooter={hasFooter} {...props} />;
   }
diff --git a/packages/chrome/src/elements/footer/Footer.tsx b/packages/chrome/src/elements/footer/Footer.tsx
@@ -5,15 +5,32 @@
  * found at http://www.apache.org/licenses/LICENSE-2.0.
  */
 
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useEffect } from 'react';
 import { StyledFooter } from '../../styled';
+import { useBodyContext } from '../../utils/useBodyContext';
 import { FooterItem } from './FooterItem';
 
 /**
  * @extends HTMLAttributes<HTMLElement>
  */
 export const FooterComponent = React.forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(
-  (props, ref) => <StyledFooter ref={ref} {...props} />
+  (props, ref) => {
+    const { hasFooter, setHasFooter } = useBodyContext() || {};
+
+    useEffect(() => {
+      if (!hasFooter && setHasFooter) {
+        setHasFooter(true);
+      }
+
+      return () => {
+        if (hasFooter && setHasFooter) {
+          setHasFooter(false);
+        }
+      };
+    }, [hasFooter, setHasFooter]);
+
+    return <StyledFooter ref={ref} {...props} />;
+  }
 );
 
 FooterComponent.displayName = 'Footer';
diff --git a/packages/chrome/src/index.ts b/packages/chrome/src/index.ts
@@ -33,7 +33,6 @@ export {
   PRODUCTS,
   type IChromeProps,
   type ISkipNavProps,
-  type IBodyProps,
   type IHeaderProps,
   type IHeaderItemProps,
   type IHeaderItemTextProps,
diff --git a/packages/chrome/src/types/index.ts b/packages/chrome/src/types/index.ts
@@ -35,11 +35,6 @@ export interface ISkipNavProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
   zIndex?: number;
 }
 
-export interface IBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /** Adjusts the body content height to allow space for a footer component */
-  hasFooter?: boolean;
-}
-
 export interface IHeaderProps extends HTMLAttributes<HTMLElement> {
   /** Displays logo for standlone usage  */
   isStandalone?: boolean;
diff --git a/packages/chrome/src/utils/useBodyContext.ts b/packages/chrome/src/utils/useBodyContext.ts
@@ -9,11 +9,10 @@ import React, { useContext } from 'react';
 
 interface IBodyContext {
   hasFooter: boolean;
+  setHasFooter: (footerPresent: boolean) => void;
 }
 
-export const BodyContext = React.createContext<IBodyContext>({
-  hasFooter: true
-});
+export const BodyContext = React.createContext<IBodyContext | undefined>(undefined);
 
 export const useBodyContext = () => {
   return useContext(BodyContext);

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ import { useBodyContext } from '../../utils/useBodyContext';`
`14`	`14`	`*/`
`15`	`15`	`export const Content = React.forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(`
`16`	`16`	`(props, ref) => {`
`17`		`- const { hasFooter } = useBodyContext();`
	`17`	`+ const { hasFooter } = useBodyContext() \|\| {};`
`18`	`18`
`19`	`19`	`return <StyledContent ref={ref} hasFooter={hasFooter} {...props} />;`
`20`	`20`	`}`