fix(form): replace use of context to apply field spacing

The use of form spacing context to apply spacing to our inputs within Form has caused issues for
consumers using it in exported components in different projects using Carbon. This fix replaces
context with a pure css solution to ensure margins are applied and consistent across projects.

fix #7058

Author: nuria1110

src/__internal__/fieldset/fieldset.component.tsx

@@ -11,9 +11,9 @@ import {
 import ValidationIcon from "../validations/validation-icon.component";
 import NewValidationContext from "../../components/carbon-provider/__internal__/new-validation.context";
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import Help from "../../components/help";
 import Typography from "../../components/typography";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 export interface FieldsetProps extends MarginProps {
   /** Role */
@@ -84,7 +84,7 @@ const Fieldset = ({
   ...rest
 }: FieldsetProps) => {
   const { validationRedesignOptIn } = useContext(NewValidationContext);
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const [ref, setRef] = useState<HTMLFieldSetElement | null>(null);
   const [isFocused, setFocus] = useState(false);
 

src/__internal__/fieldset/fieldset.style.ts

@@ -8,6 +8,7 @@ type StyledFieldsetProps = {
 
 const StyledFieldset = styled.fieldset<StyledFieldsetProps>`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${margin}
   border: none;
   padding: 0;

src/__internal__/form-field/form-field.component.tsx

@@ -19,7 +19,7 @@ import TabContext, {
 } from "../../components/tabs/tab/__internal__/tab.context";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { IconType } from "../../components/icon";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 interface CommonFormFieldProps extends MarginProps, ValidationProps {
   /** If true, the component will be disabled */
@@ -149,7 +149,7 @@ const FormField = ({
 
   const { setError, setWarning, setInfo } =
     useContext<TabContextProps>(TabContext);
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const isMounted = useRef(false);
 
   useLayoutEffect(() => {

src/__internal__/form-field/form-field.style.ts

@@ -3,6 +3,7 @@ import { space } from "styled-system";
 import { baseTheme } from "../../style/themes";
 
 const FormFieldStyle = styled.div`
+  margin-bottom: var(--fieldSpacing);
   & + & {
     margin-top: 16px;
   }

src/__internal__/form-spacing-provider/form-spacing-provider.component.tsx

@@ -8,7 +8,6 @@ import Fieldset from "../../../__internal__/fieldset";
 import { filterStyledSystemMarginProps } from "../../../style/utils";
 import { TooltipProvider } from "../../../__internal__/tooltip-provider";
 import { ValidationProps } from "../../../__internal__/validations";
-import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
 import NewValidationContext from "../../carbon-provider/__internal__/new-validation.context";
 import ValidationMessage from "../../../__internal__/validation-message/validation-message.component";
 import Box from "../../box";
@@ -134,9 +133,7 @@ export const CheckboxGroup = ({
                   warning: !!warning,
                 }}
               >
-                <FormSpacingProvider marginBottom={undefined}>
-                  {children}
-                </FormSpacingProvider>
+                {children}
               </CheckboxGroupContext.Provider>
             </StyledCheckboxGroup>
           </Box>
@@ -173,9 +170,7 @@ export const CheckboxGroup = ({
                   info: !!info,
                 }}
               >
-                <FormSpacingProvider marginBottom={undefined}>
-                  {children}
-                </FormSpacingProvider>
+                {children}
               </CheckboxGroupContext.Provider>
             </StyledCheckboxGroup>
           </Fieldset>

src/__internal__/form-spacing-provider/form-spacing.context.ts

@@ -11,8 +11,8 @@ import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint"
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import CheckboxGroupContext from "./checkbox-group/__internal__/checkbox-group.context";
 import Logger from "../../__internal__/utils/logger";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 export interface CheckboxProps
   extends CommonCheckableInputProps,
@@ -131,7 +131,7 @@ export const Checkbox = React.forwardRef(
         : { info: contextInfo || info }),
     };
 
-    const marginProps = useFormSpacing(rest);
+    const marginProps = filterStyledSystemMarginProps(rest);
 
     const componentToRender = (
       <CheckboxStyle

src/__internal__/form-spacing-provider/index.ts

@@ -25,6 +25,7 @@ export interface StyledCheckboxProps extends ValidationProps, MarginProps {
 }
 
 const StyledCheckbox = styled.div<StyledCheckboxProps>`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
   ${({
     disabled,

src/components/checkbox/checkbox-group/checkbox-group.component.tsx

@@ -10,6 +10,7 @@ export interface StyledDateRangeProps {
   labelsInline?: boolean;
 }
 const StyledDateRange = styled.div<StyledDateRangeProps>`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 
   & ${StyledDateInput} {

src/components/checkbox/checkbox.component.tsx

@@ -22,7 +22,10 @@ import {
 import useLocale from "../../hooks/__internal__/useLocale";
 import Logger from "../../__internal__/utils/logger";
 import Events from "../../__internal__/utils/helpers/events";
-import { filterOutStyledSystemSpacingProps } from "../../style/utils";
+import {
+  filterOutStyledSystemSpacingProps,
+  filterStyledSystemMarginProps,
+} from "../../style/utils";
 import getFormatData from "./__internal__/date-formats";
 import StyledDateInput from "./date.style";
 import Textbox, { TextboxProps } from "../textbox";
@@ -31,7 +34,6 @@ import DateRangeContext, {
   InputName,
 } from "../date-range/__internal__/date-range.context";
 import useClickAwayListener from "../../hooks/__internal__/useClickAwayListener";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import guid from "../../__internal__/utils/helpers/guid";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 
@@ -492,7 +494,7 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
       return value;
     };
 
-    const marginProps = useFormSpacing(rest);
+    const marginProps = filterStyledSystemMarginProps(rest);
 
     return (
       <StyledDateInput

src/components/checkbox/checkbox.style.ts

@@ -22,6 +22,7 @@ interface StyledDateInputProps
 }
 
 const StyledDateInput = styled.div<StyledDateInputProps>`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 
   & ${StyledInputPresentation} {

src/components/date-range/date-range.style.ts

@@ -4,8 +4,7 @@ import tagComponent, { TagProps } from "../../__internal__/utils/helpers/tags";
 
 import { FieldsetStyle, StyledLegend } from "./fieldset.style";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 export interface FieldsetProps extends MarginProps, TagProps {
   /** Child elements */
@@ -26,7 +25,7 @@ export const Fieldset = ({
   ...rest
 }: FieldsetProps) => {
   const [ref, setRef] = useState<HTMLFieldSetElement | null>(null);
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
   const { validationRedesignOptIn } = useContext(NewValidationContext);
 
   useEffect(() => {
@@ -56,13 +55,7 @@ export const Fieldset = ({
           {legend}
         </StyledLegend>
       )}
-      {validationRedesignOptIn ? (
-        children
-      ) : (
-        <FormSpacingProvider marginBottom={undefined}>
-          {children}
-        </FormSpacingProvider>
-      )}
+      {children}
     </FieldsetStyle>
   );
 };

src/components/date/date.component.tsx

@@ -11,6 +11,7 @@ export interface StyledFieldsetProps {
 
 const FieldsetStyle = styled.fieldset<StyledFieldsetProps>`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${margin}
   border: none;
   padding: 0;