diff --git a/src/components/form/form.component.tsx b/src/components/form/form.component.tsx index 6e1cb502e0..abe74f7720 100644 --- a/src/components/form/form.component.tsx +++ b/src/components/form/form.component.tsx @@ -107,6 +107,7 @@ export const Form = ({ {renderFooter && ( ( ) => { const locale = useLocale(); const { current: headerId } = useRef(createGuid()); - const hasStickyFooter = useMemo( - () => - React.Children.toArray(children).some( - (child) => - React.isValidElement(child) && child.props.stickyFooter - ), - [children] - ); const sidebarRef = useRef(null); @@ -184,7 +174,7 @@ export const Sidebar = React.forwardRef( )} {!header && closeIcon()} - ( px="var(--spacing400)" {...filterStyledSystemPaddingProps(rest)} scrollVariant="light" - overflow={hasStickyFooter ? undefined : "auto"} flex="1" > {children} - + ); diff --git a/src/components/sidebar/sidebar.style.ts b/src/components/sidebar/sidebar.style.ts index b70764d9d7..73eda379e7 100644 --- a/src/components/sidebar/sidebar.style.ts +++ b/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` `} `; +export const StyledSidebarContent = styled(Box)` + &:not(:has(${StyledFormFooter}.sticky)) { + overflow-y: auto; + } +`; + StyledSidebar.defaultProps = { theme: baseTheme, }; diff --git a/src/components/sidebar/sidebar.test.tsx b/src/components/sidebar/sidebar.test.tsx index 6db9038d4b..8209dd8d69 100644 --- a/src/components/sidebar/sidebar.test.tsx +++ b/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( -
+ foo} /> );