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

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 @@
 } 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 */
@@ -128,7 +128,7 @@
     return Object.keys(validationProps).find(
       (propName) => validationProps[propName],
     );
   }, [error, warning, info, disabled]);
 
   invariant(
     invalidValidationProp === undefined,
@@ -149,7 +149,7 @@
 
   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/components/checkbox/checkbox-group/checkbox-group.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/components/checkbox/checkbox.component.tsx

@@ -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/components/checkbox/checkbox.style.ts

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

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

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

src/components/date/date.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/date/date.style.ts

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

src/components/fieldset/fieldset.component.tsx

@@ -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/fieldset/fieldset.style.ts

@@ -11,13 +11,18 @@ export interface StyledFieldsetProps {
 
 const FieldsetStyle = styled.fieldset<StyledFieldsetProps>`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${margin}
   border: none;
   padding: 0;
 
   ${({ newValidation }) =>
     !newValidation &&
     css`
+      & * {
+        --fieldSpacing: 0;
+      }
+
       &&&& ${FormFieldStyle} {
         margin-top: 0;
         margin-bottom: -1px;