refactor(sidebar): use CSS solution for overflow on sidebar content when no sticky footer detected FE-6642

src/components/form/form.component.tsx

@@ -107,6 +107,7 @@ export const Form = ({
       </StyledFormContent>
       {renderFooter && (
         <StyledFormFooter
+          data-component="form-footer"
           data-element="form-footer"
           data-role="form-footer"
           className={classNames}

src/components/sidebar/sidebar.component.tsx

@@ -1,14 +1,12 @@
-import React, { useCallback, useRef, useMemo } from "react";
+import React, { useCallback, useRef } from "react";
 import { PaddingProps, WidthProps } from "styled-system";
 
 import Modal, { ModalProps } from "../modal";
-import StyledSidebar from "./sidebar.style";
+import StyledSidebar, { StyledSidebarContent } from "./sidebar.style";
 import IconButton from "../icon-button";
 import Icon from "../icon";
-import { FormProps } from "../form";
 import FocusTrap from "../../__internal__/focus-trap";
 import SidebarHeader from "./__internal__/sidebar-header";
-import Box from "../box";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import { filterStyledSystemPaddingProps } from "../../style/utils";
@@ -119,14 +117,6 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
   ) => {
     const locale = useLocale();
     const { current: headerId } = useRef<string>(createGuid());
-    const hasStickyFooter = useMemo(
-      () =>
-        React.Children.toArray(children).some(
-          (child) =>
-            React.isValidElement<FormProps>(child) && child.props.stickyFooter
-        ),
-      [children]
-    );
 
     const sidebarRef = useRef<HTMLDivElement | null>(null);
 
@@ -184,21 +174,20 @@ export const Sidebar = React.forwardRef<HTMLDivElement, SidebarProps>(
           </SidebarHeader>
         )}
         {!header && closeIcon()}
-        <Box
+        <StyledSidebarContent
           data-element="sidebar-content"
           data-role="sidebar-content"
           pt="var(--spacing300)"
           pb="var(--spacing400)"
           px="var(--spacing400)"
           {...filterStyledSystemPaddingProps(rest)}
           scrollVariant="light"
-          overflow={hasStickyFooter ? undefined : "auto"}
           flex="1"
         >
           <SidebarContext.Provider value={{ isInSidebar: true }}>
             {children}
           </SidebarContext.Provider>
-        </Box>
+        </StyledSidebarContent>
       </StyledSidebar>
     );
 

src/components/sidebar/sidebar.style.ts

@@ -11,6 +11,7 @@ import {
 } from "../../style/utils/form-style-utils";
 import { StyledFormContent, StyledFormFooter } from "../form/form.style";
 import { SIDEBAR_SIZES_CSS } from "./sidebar.config";
+import Box from "../box";
 
 type StyledSidebarProps = Pick<
   SidebarProps,
@@ -70,6 +71,12 @@ const StyledSidebar = styled.div<StyledSidebarProps>`
   `}
 `;
 
+export const StyledSidebarContent = styled(Box)`
+  &:not(:has(${StyledFormFooter}.sticky)) {
+    overflow-y: auto;
+  }
+`;
+
 StyledSidebar.defaultProps = {
   theme: baseTheme,
 };

src/components/sidebar/sidebar.test.tsx

@@ -294,7 +294,7 @@ test("ensures overflowing content is scrollable", () => {
 test("does not control styling of overflowing content when there is a child Form with a sticky footer", () => {
   render(
     <Sidebar open>
-      <Form stickyFooter />
+      <Form stickyFooter rightSideButtons={<span>foo</span>} />
     </Sidebar>
   );