From 7f2120f8a2448e3c872020058c0fd10deb8950ee Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Tue, 9 Jan 2024 14:23:00 +0100
Subject: [PATCH 1/2] add background color level 4 to Form

---
 src/lib/components/form/Form.component.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/form/Form.component.tsx b/src/lib/components/form/Form.component.tsx
index ace34160e2..3b8bccd506 100644
--- a/src/lib/components/form/Form.component.tsx
+++ b/src/lib/components/form/Form.component.tsx
@@ -50,6 +50,7 @@ const PageFormWrapper = styled.form<FormProps>`
   flex-direction: column;
   align-items: stretch;
   height: 100%;
+  background-color: ${(props) => props.theme.backgroundLevel4};
 `;
 
 const BasicPageLayout = styled.div<{ layoutKind: 'page' | 'tab' }>`

From 3981311330bec09c72ffbfab6e9c0bd363f3abef Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Wed, 10 Jan 2024 18:20:24 +0100
Subject: [PATCH 2/2] rename PageFormWrapper to StyledForm for clarity, add
 condition for background color

---
 src/lib/components/form/Form.component.tsx | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/form/Form.component.tsx b/src/lib/components/form/Form.component.tsx
index 3b8bccd506..e44526315d 100644
--- a/src/lib/components/form/Form.component.tsx
+++ b/src/lib/components/form/Form.component.tsx
@@ -45,12 +45,13 @@ type PageFormProps = {
 } & FormProps;
 type TabFormProps = { layout: { kind: 'tab' } } & FormProps;
 
-const PageFormWrapper = styled.form<FormProps>`
+const StyledForm = styled.form<PageFormProps | TabFormProps>`
   display: flex;
   flex-direction: column;
   align-items: stretch;
   height: 100%;
-  background-color: ${(props) => props.theme.backgroundLevel4};
+  background-color: ${(props) =>
+    props.layout.kind === 'page' && props.theme.backgroundLevel4};
 `;
 
 const BasicPageLayout = styled.div<{ layoutKind: 'page' | 'tab' }>`
@@ -289,7 +290,7 @@ const PageForm = forwardRef<HTMLFormElement, PageFormProps>(
     const requireMode = useContext(RequireModeContext);
     return (
       <ScrollbarWrapper>
-        <PageFormWrapper {...formProps} noValidate ref={ref}>
+        <StyledForm {...formProps} noValidate ref={ref} layout={layout}>
           <FixedHeader layoutKind="page">
             <PaddedForHeaderAndFooterContent>
               <Wrap>
@@ -343,7 +344,7 @@ const PageForm = forwardRef<HTMLFormElement, PageFormProps>(
               </Wrap>
             </PaddedForHeaderAndFooterContent>
           </FixedFooter>
-        </PageFormWrapper>
+        </StyledForm>
       </ScrollbarWrapper>
     );
   },
@@ -353,7 +354,7 @@ const TabForm = forwardRef<HTMLFormElement, TabFormProps>(
   ({ leftActions, rightActions, children, banner, ...formProps }, ref) => {
     return (
       <ScrollbarWrapper>
-        <PageFormWrapper {...formProps} noValidate ref={ref}>
+        <StyledForm {...formProps} noValidate ref={ref}>
           <FixedHeader layoutKind="tab">
             <Wrap>
               <div>{leftActions}</div>
@@ -369,7 +370,7 @@ const TabForm = forwardRef<HTMLFormElement, TabFormProps>(
               </Stack>
             </Stack>
           </ScrollArea>
-        </PageFormWrapper>
+        </StyledForm>
       </ScrollbarWrapper>
     );
   },