From b1f0f7358a179191ecfb155e97e90f6b1e7f7358 Mon Sep 17 00:00:00 2001
From: nuria1110 <nuria.torresramon@sage.com>
Date: Wed, 5 Mar 2025 18:10:22 +0000
Subject: [PATCH 1/3] fix(textbox): margin not applied to character count

Fixes issue where margin-bottom applied to Textbox based components would not be applied to
character count.
---
 src/components/textbox/textbox.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/textbox/textbox.component.tsx b/src/components/textbox/textbox.component.tsx
index 6e4f14290f..e0b5fe3830 100644
--- a/src/components/textbox/textbox.component.tsx
+++ b/src/components/textbox/textbox.component.tsx
@@ -393,8 +393,8 @@ export const Textbox = React.forwardRef(
             ) : (
               input
             )}
+            {characterCount}
           </FormField>
-          {characterCount}
         </InputBehaviour>
       </TooltipProvider>
     );

From b58a960df23facc43ab7ef0119682d3c8a835a71 Mon Sep 17 00:00:00 2001
From: nuria1110 <nuria.torresramon@sage.com>
Date: Wed, 5 Mar 2025 18:49:17 +0000
Subject: [PATCH 2/3] 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
---
 .../fieldset/fieldset.component.tsx           |   4 +-
 src/__internal__/fieldset/fieldset.style.ts   |   1 +
 .../form-field/form-field.component.tsx       |   4 +-
 .../form-field/form-field.style.ts            |   1 +
 .../form-spacing-provider.component.tsx       |  20 --
 .../form-spacing.context.ts                   |   9 -
 .../form-spacing-provider/index.ts            |   3 -
 .../checkbox-group.component.tsx              |   9 +-
 .../checkbox/checkbox.component.tsx           |   4 +-
 src/components/checkbox/checkbox.style.ts     |   1 +
 src/components/date-range/date-range.style.ts |   1 +
 src/components/date/date.component.tsx        |   8 +-
 src/components/date/date.style.ts             |   1 +
 .../fieldset/fieldset.component.tsx           |  13 +-
 src/components/fieldset/fieldset.style.ts     |   5 +
 src/components/form/form-test.stories.tsx     | 241 ++++++++++--------
 src/components/form/form.component.tsx        |   7 +-
 src/components/form/form.mdx                  |  11 +-
 src/components/form/form.stories.tsx          |   4 +-
 src/components/form/form.style.ts             |  36 ++-
 .../inline-inputs/inline-inputs.component.tsx |   9 +-
 .../inline-inputs/inline-inputs.style.ts      |   1 +
 .../numeral-date/numeral-date.component.tsx   |   1 +
 src/components/search/search.component.tsx    |   2 +-
 src/components/search/search.style.ts         |   1 +
 .../filterable-select.component.tsx           |   8 +-
 .../multi-select/multi-select.component.tsx   |   8 +-
 src/components/select/select.style.ts         |   1 +
 .../simple-select/simple-select.component.tsx |   8 +-
 src/components/switch/switch.component.tsx    |   4 +-
 src/components/switch/switch.style.ts         |   1 +
 .../text-editor/text-editor.style.ts          |   1 +
 .../textarea/textarea.component.tsx           |   5 +-
 src/components/textarea/textarea.style.ts     |   1 +
 src/components/time/time.component.tsx        |   4 +
 .../add-form-spacing/add-form-spacing.test.ts |  49 ----
 .../useFormSpacing/add-form-spacing/index.ts  |  27 --
 .../__internal__/useFormSpacing/index.ts      |  19 --
 .../useFormSpacing/useFormSpacing.test.tsx    |  95 -------
 39 files changed, 233 insertions(+), 395 deletions(-)
 delete mode 100644 src/__internal__/form-spacing-provider/form-spacing-provider.component.tsx
 delete mode 100644 src/__internal__/form-spacing-provider/form-spacing.context.ts
 delete mode 100644 src/__internal__/form-spacing-provider/index.ts
 delete mode 100644 src/hooks/__internal__/useFormSpacing/add-form-spacing/add-form-spacing.test.ts
 delete mode 100644 src/hooks/__internal__/useFormSpacing/add-form-spacing/index.ts
 delete mode 100644 src/hooks/__internal__/useFormSpacing/index.ts
 delete mode 100644 src/hooks/__internal__/useFormSpacing/useFormSpacing.test.tsx

diff --git a/src/__internal__/fieldset/fieldset.component.tsx b/src/__internal__/fieldset/fieldset.component.tsx
index 0c42b60678..31237ed05e 100644
--- a/src/__internal__/fieldset/fieldset.component.tsx
+++ b/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);
 
diff --git a/src/__internal__/fieldset/fieldset.style.ts b/src/__internal__/fieldset/fieldset.style.ts
index 761ff799d9..de0f481e06 100644
--- a/src/__internal__/fieldset/fieldset.style.ts
+++ b/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;
diff --git a/src/__internal__/form-field/form-field.component.tsx b/src/__internal__/form-field/form-field.component.tsx
index 7d25cc9234..3f5118b7d1 100644
--- a/src/__internal__/form-field/form-field.component.tsx
+++ b/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(() => {
diff --git a/src/__internal__/form-field/form-field.style.ts b/src/__internal__/form-field/form-field.style.ts
index b7587a5981..2b50f1f993 100644
--- a/src/__internal__/form-field/form-field.style.ts
+++ b/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;
   }
diff --git a/src/__internal__/form-spacing-provider/form-spacing-provider.component.tsx b/src/__internal__/form-spacing-provider/form-spacing-provider.component.tsx
deleted file mode 100644
index a8438fe991..0000000000
--- a/src/__internal__/form-spacing-provider/form-spacing-provider.component.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import React from "react";
-import {
-  FormSpacingContext,
-  FormSpacingContextProps,
-} from "./form-spacing.context";
-
-interface FormSpacingProviderProps extends FormSpacingContextProps {
-  children: React.ReactNode;
-}
-
-const FormSpacingProvider = ({
-  marginBottom,
-  children,
-}: FormSpacingProviderProps) => (
-  <FormSpacingContext.Provider value={{ marginBottom }}>
-    {children}
-  </FormSpacingContext.Provider>
-);
-
-export default FormSpacingProvider;
diff --git a/src/__internal__/form-spacing-provider/form-spacing.context.ts b/src/__internal__/form-spacing-provider/form-spacing.context.ts
deleted file mode 100644
index db7e100943..0000000000
--- a/src/__internal__/form-spacing-provider/form-spacing.context.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-
-export interface FormSpacingContextProps {
-  marginBottom?: string;
-}
-
-export const FormSpacingContext = React.createContext<FormSpacingContextProps>(
-  {},
-);
diff --git a/src/__internal__/form-spacing-provider/index.ts b/src/__internal__/form-spacing-provider/index.ts
deleted file mode 100644
index 6ae1902dd9..0000000000
--- a/src/__internal__/form-spacing-provider/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export { FormSpacingContext } from "./form-spacing.context";
-export type { FormSpacingContextProps } from "./form-spacing.context";
-export { default } from "./form-spacing-provider.component";
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.component.tsx b/src/components/checkbox/checkbox-group/checkbox-group.component.tsx
index 31181598e9..2f0facd0b9 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.component.tsx
+++ b/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>
diff --git a/src/components/checkbox/checkbox.component.tsx b/src/components/checkbox/checkbox.component.tsx
index b38f3f7f1e..8311bf22fb 100644
--- a/src/components/checkbox/checkbox.component.tsx
+++ b/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
diff --git a/src/components/checkbox/checkbox.style.ts b/src/components/checkbox/checkbox.style.ts
index 48f39ad6d4..0fbd6811a4 100644
--- a/src/components/checkbox/checkbox.style.ts
+++ b/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,
diff --git a/src/components/date-range/date-range.style.ts b/src/components/date-range/date-range.style.ts
index bbc2718c1f..2299128bb2 100644
--- a/src/components/date-range/date-range.style.ts
+++ b/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} {
diff --git a/src/components/date/date.component.tsx b/src/components/date/date.component.tsx
index 0a2c8f4c12..93d5274efa 100644
--- a/src/components/date/date.component.tsx
+++ b/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
diff --git a/src/components/date/date.style.ts b/src/components/date/date.style.ts
index 5829e9fef2..3c83b5cfed 100644
--- a/src/components/date/date.style.ts
+++ b/src/components/date/date.style.ts
@@ -22,6 +22,7 @@ interface StyledDateInputProps
 }
 
 const StyledDateInput = styled.div<StyledDateInputProps>`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 
   & ${StyledInputPresentation} {
diff --git a/src/components/fieldset/fieldset.component.tsx b/src/components/fieldset/fieldset.component.tsx
index babdbf4d14..b1456fde51 100644
--- a/src/components/fieldset/fieldset.component.tsx
+++ b/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>
   );
 };
diff --git a/src/components/fieldset/fieldset.style.ts b/src/components/fieldset/fieldset.style.ts
index 4caeadcf0e..dc01227c06 100644
--- a/src/components/fieldset/fieldset.style.ts
+++ b/src/components/fieldset/fieldset.style.ts
@@ -11,6 +11,7 @@ export interface StyledFieldsetProps {
 
 const FieldsetStyle = styled.fieldset<StyledFieldsetProps>`
   margin: 0;
+  margin-bottom: var(--fieldSpacing);
   ${margin}
   border: none;
   padding: 0;
@@ -18,6 +19,10 @@ const FieldsetStyle = styled.fieldset<StyledFieldsetProps>`
   ${({ newValidation }) =>
     !newValidation &&
     css`
+      & * {
+        --fieldSpacing: 0;
+      }
+
       &&&& ${FormFieldStyle} {
         margin-top: 0;
         margin-bottom: -1px;
diff --git a/src/components/form/form-test.stories.tsx b/src/components/form/form-test.stories.tsx
index 067f3f982a..7b3912ccf8 100644
--- a/src/components/form/form-test.stories.tsx
+++ b/src/components/form/form-test.stories.tsx
@@ -27,6 +27,7 @@ import Password from "../password";
 import Search, { SearchProps } from "../search";
 import { Time } from "../time";
 import TextEditor from "../text-editor";
+import CarbonProvider from "../carbon-provider";
 
 export default {
   title: "Form/Test",
@@ -37,60 +38,141 @@ export default {
       disableSnapshot: true,
     },
   },
+  argTypes: {
+    fieldSpacing: {
+      options: ["0", "1", "2", "3", "4", "5", "6", "7"],
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
 type StoryType = StoryObj<typeof Form>;
 
-export const DefaultWithStickyFooter: StoryType = ({ ...props }) => (
-  <Form
-    onSubmit={() => console.log("submit")}
-    leftSideButtons={
-      <Button onClick={() => console.log("cancel")}>Cancel</Button>
-    }
-    saveButton={
-      <Button buttonType="primary" type="submit">
-        Save
-      </Button>
-    }
-    {...props}
-  >
-    <Tabs mb={2}>
-      <Tab
-        pl="3px"
-        customLayout={
-          <Box mx="16px" my="10px">
-            Tab1
-          </Box>
-        }
-        tabId="tab1"
+export const AllInputs: StoryType = ({ ...props }) => (
+  <CarbonProvider validationRedesignOptIn>
+    <Form
+      onSubmit={() => console.log("submit")}
+      leftSideButtons={
+        <Button onClick={() => console.log("cancel")}>Cancel</Button>
+      }
+      saveButton={
+        <Button buttonType="primary" type="submit">
+          Save
+        </Button>
+      }
+      {...props}
+    >
+      <Textbox label="Textbox" characterLimit={100} />
+      <Number label="Number" />
+      <Decimal label="Decimal" />
+      <GroupedCharacter
+        label="GroupedCharacter"
+        groups={[2, 3, 2]}
+        separator="-"
       />
-    </Tabs>
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-    <Time
-      value={{
-        hours: "",
-        minutes: "",
-      }}
-      onChange={() => {}}
-      label="Time"
-    />
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-  </Form>
+      <Password label="Password" characterLimit={100} />
+      <Fieldset legend="Fieldset">
+        <Textbox label="Textbox in Fieldset" />
+        <Checkbox label="Checkbox in Fieldset" />
+        <Select name="simple-select" id="simple-select" label="Simple Select">
+          <Option text="Amber" value="1" />
+          <Option text="Black" value="2" />
+          <Option text="Blue" value="3" />
+        </Select>
+      </Fieldset>
+      <Time
+        value={{
+          hours: "",
+          minutes: "",
+        }}
+        onChange={() => {}}
+        label="Time"
+      />
+      <NumeralDate label="Numeral Date" />
+      <RadioButtonGroup name="legend" legend="RadioButtonGroup">
+        <RadioButton
+          id="group-1-input-1"
+          value="group-1-input-1"
+          label="Radio Option 1"
+        />
+        <RadioButton
+          id="group-1-input-2"
+          value="group-1-input-2"
+          label="Radio Option 2"
+        />
+      </RadioButtonGroup>
+      <Checkbox label="Checkbox" />
+      <CheckboxGroup legend="Checkbox Group">
+        <Checkbox label="Checkbox-1" />
+        <Checkbox label="Checkbox-2" />
+      </CheckboxGroup>
+      <DateInput name="date" label="Date" value="" onChange={() => {}} />
+      <DateRange
+        name="date"
+        startLabel="Start Date"
+        endLabel="End Date"
+        value={["", ""]}
+        onChange={() => {}}
+      />
+      <InlineInputs label="Inline inputs">
+        <Textbox onChange={() => {}} />
+        <Textbox onChange={() => {}} />
+        <Textbox onChange={() => {}} />
+      </InlineInputs>
+      <Search value="" onChange={() => {}} />
+      <Select name="simple-select" id="simple-select" label="Simple Select">
+        <Option text="Amber" value="1" />
+        <Option text="Black" value="2" />
+        <Option text="Blue" value="3" />
+      </Select>
+      <FilterableSelect
+        name="filterable-select"
+        id="filterable-select"
+        label="Filterable Select"
+      >
+        <Option text="Amber" value="1" />
+        <Option text="Black" value="2" />
+        <Option text="Blue" value="3" />
+      </FilterableSelect>
+      <MultiSelect name="multi-select" id="multi-select" label="Multi Select">
+        <Option text="Amber" value="1" />
+        <Option text="Black" value="2" />
+        <Option text="Blue" value="3" />
+      </MultiSelect>
+      <Textarea label="Textarea" name="textarea" characterLimit={100} />
+      <TextEditor labelText="Text Editor" characterLimit={100} />
+      <SimpleColorPicker
+        name="simple-color-picker"
+        legend="Simple Color Picker"
+      >
+        {[
+          { color: "transparent", label: "transparent" },
+          { color: "#0073C1", label: "blue" },
+          { color: "#582C83", label: "purple" },
+        ].map(({ color, label }) => (
+          <SimpleColor
+            value={color}
+            key={color}
+            aria-label={label}
+            id={color}
+          />
+        ))}
+      </SimpleColorPicker>
+      <Switch name="switch" label="Switch" onChange={() => {}} />
+    </Form>
+  </CarbonProvider>
 );
 
-DefaultWithStickyFooter.storyName = "default";
-DefaultWithStickyFooter.args = {
-  stickyFooter: true,
+AllInputs.storyName = "all inputs";
+AllInputs.args = {
+  stickyFooter: false,
   errorCount: 0,
   warningCount: 0,
   buttonAlignment: "right",
 };
-DefaultWithStickyFooter.parameters = {
+AllInputs.parameters = {
   themeProvider: {
     chromatic: { theme: "sage" },
   },
@@ -98,17 +180,15 @@ DefaultWithStickyFooter.parameters = {
     disableSnapshot: false,
   },
 };
-DefaultWithStickyFooter.decorators = [
-  (Story) => (
-    <div style={{ height: "100vh", width: "97vw" }}>
-      <Story />
-    </div>
-  ),
-];
 
-export const FormAlignmentCustomMarginsTextInputs = () => {
+export const FormAlignmentCustomMarginsTextInputs = ({ ...props }) => {
   return (
-    <Form onSubmit={() => console.log("submit")} fieldSpacing={4} px="25%">
+    <Form
+      onSubmit={() => console.log("submit")}
+      fieldSpacing={4}
+      px="25%"
+      {...props}
+    >
       <Fieldset legend="Fieldset" mb={1}>
         <Textbox
           label="Textbox in Fieldset"
@@ -268,9 +348,14 @@ FormAlignmentCustomMarginsTextInputs.parameters = {
   themeProvider: { chromatic: { theme: "sage" } },
 };
 
-export const FormAlignmentCustomMarginNonTextInputs = () => {
+export const FormAlignmentCustomMarginNonTextInputs = ({ ...props }) => {
   return (
-    <Form onSubmit={() => console.log("submit")} fieldSpacing={4} px="25%">
+    <Form
+      onSubmit={() => console.log("submit")}
+      fieldSpacing={4}
+      px="25%"
+      {...props}
+    >
       <RadioButtonGroup
         name="legend"
         onChange={() => console.log("RADIO CHANGE")}
@@ -543,51 +628,3 @@ FullWidthWithLeftAndRight.parameters = {
   },
   themeProvider: { chromatic: { theme: "sage" }, viewports: [1200, 900, 320] },
 };
-
-export const DefaultWithNumeralDate: StoryType = ({ ...props }) => (
-  <Form
-    onSubmit={() => console.log("submit")}
-    leftSideButtons={
-      <Button onClick={() => console.log("cancel")}>Cancel</Button>
-    }
-    saveButton={
-      <Button buttonType="primary" type="submit">
-        Save
-      </Button>
-    }
-    {...props}
-  >
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-    <NumeralDate
-      defaultValue={{
-        dd: "01",
-        mm: "02",
-        yyyy: "2020",
-      }}
-      label="Numeral Date"
-    />
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-    <Textbox label="Textbox" />
-  </Form>
-);
-
-DefaultWithNumeralDate.storyName = "With NumeralDate";
-DefaultWithNumeralDate.parameters = {
-  themeProvider: {
-    chromatic: { theme: "sage" },
-  },
-  chromatic: {
-    disableSnapshot: false,
-  },
-};
-DefaultWithNumeralDate.decorators = [
-  (Story) => (
-    <div style={{ height: "100vh", width: "97vw" }}>
-      <Story />
-    </div>
-  ),
-];
diff --git a/src/components/form/form.component.tsx b/src/components/form/form.component.tsx
index 6c84019bd1..4f2c62afd7 100644
--- a/src/components/form/form.component.tsx
+++ b/src/components/form/form.component.tsx
@@ -11,7 +11,6 @@ import {
   StyledRightButtons,
 } from "./form.style";
 import { FormButtonAlignment, formSpacing } from "./form.config";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import ModalContext from "../modal/__internal__/modal.context";
 
 export interface FormProps extends SpaceProps, TagProps {
@@ -81,7 +80,6 @@ export const Form = ({
       stickyFooter={stickyFooter}
       onSubmit={onSubmit}
       data-component="form"
-      fieldSpacing={fieldSpacing}
       noValidate={noValidate}
       height={height}
       isInModal={isInModal}
@@ -94,10 +92,9 @@ export const Form = ({
         stickyFooter={stickyFooter}
         tabIndex={-1}
         isInModal={isInModal}
+        fieldSpacing={formSpacing[fieldSpacing]}
       >
-        <FormSpacingProvider marginBottom={formSpacing[fieldSpacing]}>
-          {children}
-        </FormSpacingProvider>
+        {children}
       </StyledFormContent>
       {renderFooter && (
         <StyledFormFooter
diff --git a/src/components/form/form.mdx b/src/components/form/form.mdx
index 649d9d638d..fdfb8de31e 100644
--- a/src/components/form/form.mdx
+++ b/src/components/form/form.mdx
@@ -37,15 +37,16 @@ When `stickyFooter` prop is set as true, footer becomes stickied to the bottom o
 
 <Canvas of={FormStories.WithFullWidthButtons} />
 
-### With different spacing
+### Field Spacing
 
-When `fieldSpacing` prop is given a value, the vertical spacing between the form fields is changed (margin bottom on each field), the value of the prop multiplied by the base theme `8px` spacing value. The default is value `3` which is therefore `24px`. This can be overriden on a specific field if needed.
+You can use the `fieldSpacing` prop to set the spacing between fields within `Form`, which will add a margin-bottom to supported input components. 
+The value is multiplied by the base theme `8px` spacing value, by default this is set to `3`.
 
-<Canvas of={FormStories.WithDifferentSpacing} />
+<Canvas of={FormStories.FieldSpacing} />
 
-### Override spacing on one field
+### Override spacing on a field
 
-A child component (which uses `FormField`) can be given a `mb` prop which overrides the bottom margin for that particular field. This uses the same base theme `8px` multiplier as the Form `fieldSpacing` prop.
+You can override the spacing of a field by using the `mb` prop on the specific input.
 
 <Canvas of={FormStories.OverrideFieldSpacing} />
 
diff --git a/src/components/form/form.stories.tsx b/src/components/form/form.stories.tsx
index 83bee887da..fdc3ab9529 100644
--- a/src/components/form/form.stories.tsx
+++ b/src/components/form/form.stories.tsx
@@ -116,7 +116,7 @@ WithFullWidthButtons.parameters = {
   themeProvider: { chromatic: { theme: "sage" } },
 };
 
-export const WithDifferentSpacing: Story = () => {
+export const FieldSpacing: Story = () => {
   const [state, setState] = useState("");
 
   const setValue = (ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -148,7 +148,7 @@ export const WithDifferentSpacing: Story = () => {
     </Form>
   );
 };
-WithDifferentSpacing.storyName = "With Different Spacing";
+FieldSpacing.storyName = "Field Spacing";
 
 export const OverrideFieldSpacing: Story = () => (
   <Form
diff --git a/src/components/form/form.style.ts b/src/components/form/form.style.ts
index 70c080a844..76b9017e9f 100644
--- a/src/components/form/form.style.ts
+++ b/src/components/form/form.style.ts
@@ -2,16 +2,17 @@ import styled, { css } from "styled-components";
 
 import { space, padding } from "styled-system";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
-
 import baseTheme from "../../style/themes/base";
 import { FormButtonAlignment } from "./form.config";
-import StyledSearch from "../search/search.style";
-import StyledTextarea from "../textarea/textarea.style";
-import { StyledNumeralDate } from "../numeral-date/numeral-date.style";
+import StyledInlineInputs from "../inline-inputs/inline-inputs.style";
+import StyledSelect from "../select/select.style";
+import { StyledSelectMultiSelect } from "../select/multi-select/multi-select.style";
+import StyledSwitch from "../switch/switch.style";
 
 interface StyledFormContentProps {
   stickyFooter?: boolean;
   isInModal?: boolean;
+  fieldSpacing?: string;
 }
 
 export const StyledFormContent = styled.div<StyledFormContentProps>(
@@ -23,6 +24,24 @@ export const StyledFormContent = styled.div<StyledFormContentProps>(
       min-height: 0;
       overflow-y: auto;
     `,
+
+  ({ fieldSpacing }) =>
+    fieldSpacing &&
+    css`
+      --fieldSpacing: ${fieldSpacing};
+
+      ${StyledFormField} {
+        margin-top: var(--spacing000);
+      }
+
+      // field spacing is also applied to form field here so we need to override
+      ${StyledInlineInputs} ${StyledFormField},
+      ${StyledInlineInputs} ${StyledSelect},
+      ${StyledInlineInputs} ${StyledSelectMultiSelect},
+      ${StyledSwitch} ${StyledFormField} {
+        margin-bottom: var(--spacing000);
+      }
+    `,
 );
 
 interface StyledFormFooterProps {
@@ -77,7 +96,6 @@ StyledFormFooter.defaultProps = {
 
 interface StyledFormProps extends StyledFormContentProps {
   height?: string;
-  fieldSpacing: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 }
 
 export const StyledForm = styled.form<StyledFormProps>`
@@ -89,14 +107,6 @@ export const StyledForm = styled.form<StyledFormProps>`
       height: ${height};
     `}
 
-  // field spacing is also applied to form field here so we need to override
-  ${StyledSearch} ${StyledFormField}, 
-  ${StyledTextarea} ${StyledFormField}, 
-  [data-component="time"] ${StyledFormField}, 
-  ${StyledNumeralDate} ${StyledFormField} {
-    margin-bottom: var(--spacing000);
-  }
-
   ${({ stickyFooter, isInModal }) =>
     stickyFooter &&
     css`
diff --git a/src/components/inline-inputs/inline-inputs.component.tsx b/src/components/inline-inputs/inline-inputs.component.tsx
index 02dcbfcf36..da849a6d56 100644
--- a/src/components/inline-inputs/inline-inputs.component.tsx
+++ b/src/components/inline-inputs/inline-inputs.component.tsx
@@ -7,10 +7,9 @@ import StyledInlineInputs, {
   StyledContentContainerProps,
   StyledInlineInputsProps,
 } from "./inline-inputs.style";
-import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import tagComponent, { TagProps } from "../../__internal__/utils/helpers/tags";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 type GutterOptions =
   | "none"
@@ -103,7 +102,7 @@ const InlineInputs = ({
     );
   }
 
-  const marginProps = useFormSpacing(rest);
+  const marginProps = filterStyledSystemMarginProps(rest);
 
   useEffect(() => {
     if (required) {
@@ -130,9 +129,7 @@ const InlineInputs = ({
         data-role="inline-inputs-container"
         inputWidth={inputWidth}
       >
-        <FormSpacingProvider marginBottom={undefined}>
-          {columnWrapper(children, gutter)}
-        </FormSpacingProvider>
+        {columnWrapper(children, gutter)}
       </StyledContentContainer>
     </StyledInlineInputs>
   );
diff --git a/src/components/inline-inputs/inline-inputs.style.ts b/src/components/inline-inputs/inline-inputs.style.ts
index c2f7e14fee..04a5d83cd5 100644
--- a/src/components/inline-inputs/inline-inputs.style.ts
+++ b/src/components/inline-inputs/inline-inputs.style.ts
@@ -91,6 +91,7 @@ const StyledContentContainer = styled.div<InlineInputsProps>`
 `;
 
 const StyledInlineInputs = styled.div<InlineInputsProps>`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 
   display: ${({ labelInline }) => (labelInline ? `flex` : `block`)};
diff --git a/src/components/numeral-date/numeral-date.component.tsx b/src/components/numeral-date/numeral-date.component.tsx
index 961bd91d34..5ffbdb53e6 100644
--- a/src/components/numeral-date/numeral-date.component.tsx
+++ b/src/components/numeral-date/numeral-date.component.tsx
@@ -491,6 +491,7 @@ export const NumeralDate = <DateType extends NumeralDateObject = FullDate>({
                     })}
                   tooltipPosition={tooltipPosition}
                   tooltipId={validationId}
+                  my={0} // prevents any form spacing being applied
                 />
               </StyledDateField>
             </NumeralDateContext.Provider>
diff --git a/src/components/search/search.component.tsx b/src/components/search/search.component.tsx
index a826c69de6..1b26a9c556 100644
--- a/src/components/search/search.component.tsx
+++ b/src/components/search/search.component.tsx
@@ -256,7 +256,6 @@ export const Search = React.forwardRef<SearchHandle, SearchProps>(
         searchHasValue={searchHasValue}
         showSearchButton={!!searchButton}
         variant={variant}
-        mb={0}
         {...filterStyledSystemMarginProps(rest)}
         id={id}
         name={name}
@@ -284,6 +283,7 @@ export const Search = React.forwardRef<SearchHandle, SearchProps>(
             !searchButton ? <Icon type="search" ml={1} /> : undefined
           }
           tooltipPosition={tooltipPosition}
+          my={0} // prevents any form spacing being applied
         />
         {searchButton && (
           <StyledSearchButton>
diff --git a/src/components/search/search.style.ts b/src/components/search/search.style.ts
index 7c2903c08d..9691fda645 100644
--- a/src/components/search/search.style.ts
+++ b/src/components/search/search.style.ts
@@ -34,6 +34,7 @@ const StyledSearch = styled.div<StyledSearchProps>`
       : "var(--colorsUtilityMajor300)";
 
     return css`
+      margin-bottom: var(--fieldSpacing);
       ${margin}
       width: ${searchWidth ? `${searchWidth}` : "100%"};
       max-width: ${maxWidth ? `${maxWidth}` : "100%"};
diff --git a/src/components/select/filterable-select/filterable-select.component.tsx b/src/components/select/filterable-select/filterable-select.component.tsx
index 25730ba63b..b0d8a4d0d9 100644
--- a/src/components/select/filterable-select/filterable-select.component.tsx
+++ b/src/components/select/filterable-select/filterable-select.component.tsx
@@ -2,7 +2,10 @@ import React, { useState, useEffect, useRef, useCallback } from "react";
 import invariant from "invariant";
 
 import { ButtonProps } from "../../button";
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import {
+  filterOutStyledSystemSpacingProps,
+  filterStyledSystemMarginProps,
+} from "../../../style/utils";
 import SelectTextbox, {
   FormInputPropTypes,
 } from "../__internal__/select-textbox";
@@ -18,7 +21,6 @@ import areObjectsEqual from "../__internal__/utils/are-objects-equal";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 import { CustomSelectChangeEvent } from "../simple-select";
 
@@ -721,7 +723,7 @@ export const FilterableSelect = React.forwardRef<
       </FilterableSelectList>
     );
 
-    const marginProps = useFormSpacing(textboxProps);
+    const marginProps = filterStyledSystemMarginProps(textboxProps);
 
     return (
       <StyledSelect
diff --git a/src/components/select/multi-select/multi-select.component.tsx b/src/components/select/multi-select/multi-select.component.tsx
index 5621234f54..2ac5301ef0 100644
--- a/src/components/select/multi-select/multi-select.component.tsx
+++ b/src/components/select/multi-select/multi-select.component.tsx
@@ -7,7 +7,10 @@ import React, {
 } from "react";
 import invariant from "invariant";
 
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import {
+  filterOutStyledSystemSpacingProps,
+  filterStyledSystemMarginProps,
+} from "../../../style/utils";
 import SelectTextbox, {
   FormInputPropTypes,
 } from "../__internal__/select-textbox";
@@ -28,7 +31,6 @@ import isExpectedValue from "../__internal__/utils/is-expected-value";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 import { CustomSelectChangeEvent } from "../simple-select";
 
@@ -716,7 +718,7 @@ export const MultiSelect = React.forwardRef<HTMLInputElement, MultiSelectProps>(
       </FilterableSelectList>
     );
 
-    const marginProps = useFormSpacing(textboxProps);
+    const marginProps = filterStyledSystemMarginProps(textboxProps);
 
     return (
       <StyledSelectMultiSelect
diff --git a/src/components/select/select.style.ts b/src/components/select/select.style.ts
index 31f8987b28..3cec71914f 100644
--- a/src/components/select/select.style.ts
+++ b/src/components/select/select.style.ts
@@ -16,6 +16,7 @@ export interface StyledSelectProps
 
 const StyledSelect = styled.div<StyledSelectProps>`
   ${({ hasTextCursor, disabled, readOnly, theme, transparent, isOpen }) => css`
+    margin-bottom: var(--fieldSpacing);
     ${margin}
 
     position: relative;
diff --git a/src/components/select/simple-select/simple-select.component.tsx b/src/components/select/simple-select/simple-select.component.tsx
index 763d8e0061..0d4484ce97 100644
--- a/src/components/select/simple-select/simple-select.component.tsx
+++ b/src/components/select/simple-select/simple-select.component.tsx
@@ -7,7 +7,10 @@ import React, {
 } from "react";
 import invariant from "invariant";
 
-import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import {
+  filterOutStyledSystemSpacingProps,
+  filterStyledSystemMarginProps,
+} from "../../../style/utils";
 import StyledSelect from "../select.style";
 import SelectTextbox, {
   FormInputPropTypes,
@@ -21,7 +24,6 @@ import getNextChildByText from "../__internal__/utils/get-next-child-by-text";
 import isExpectedOption from "../__internal__/utils/is-expected-option";
 import isNavigationKey from "../__internal__/utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
-import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 import useInputAccessibility from "../../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
 
 let deprecateUncontrolledWarnTriggered = false;
@@ -532,7 +534,7 @@ export const SimpleSelect = React.forwardRef<
       </SelectList>
     );
 
-    const marginProps = useFormSpacing(props);
+    const marginProps = filterStyledSystemMarginProps(props);
 
     return (
       <StyledSelect
diff --git a/src/components/switch/switch.component.tsx b/src/components/switch/switch.component.tsx
index 0f14b192f4..4dd9fe55c6 100644
--- a/src/components/switch/switch.component.tsx
+++ b/src/components/switch/switch.component.tsx
@@ -11,12 +11,12 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import NewValidationContext from "../carbon-provider/__internal__/new-validation.context";
 import Logger from "../../__internal__/utils/logger";
 import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import StyledSwitch, { ErrorBorder } from "./switch.style";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import guid from "../../__internal__/utils/helpers/guid";
 import HintText from "../../__internal__/hint-text";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 export interface SwitchProps
   extends CommonCheckableInputProps,
@@ -118,7 +118,7 @@ export const Switch = React.forwardRef(
     const shouldValidationBeOnLabel =
       labelInline && !reverse ? true : validationOnLabel;
 
-    const marginProps = useFormSpacing(rest);
+    const marginProps = filterStyledSystemMarginProps(rest);
 
     const switchStyleProps = {
       "data-component": "switch",
diff --git a/src/components/switch/switch.style.ts b/src/components/switch/switch.style.ts
index e26b1e212a..f220e3d32d 100644
--- a/src/components/switch/switch.style.ts
+++ b/src/components/switch/switch.style.ts
@@ -53,6 +53,7 @@ export const ErrorBorder = styled.span`
 
 const StyledSwitch = styled.div`
   ${({ fieldHelpInline, labelInline, reverse, size }: StyledSwitchProps) => css`
+    margin-bottom: var(--fieldSpacing);
     ${margin}
     ${FieldLineStyle} {
       display: flex;
diff --git a/src/components/text-editor/text-editor.style.ts b/src/components/text-editor/text-editor.style.ts
index 78c0e992d4..978381b0af 100644
--- a/src/components/text-editor/text-editor.style.ts
+++ b/src/components/text-editor/text-editor.style.ts
@@ -24,6 +24,7 @@ export const StyledTextEditor = styled(Box)`
 `;
 
 export const StyledTextEditorWrapper = styled.div<StyledTextEditorWrapperProps>`
+  margin-bottom: var(--fieldSpacing);
   ${margin}
 `;
 
diff --git a/src/components/textarea/textarea.component.tsx b/src/components/textarea/textarea.component.tsx
index 7417393030..ddc620cea7 100644
--- a/src/components/textarea/textarea.component.tsx
+++ b/src/components/textarea/textarea.component.tsx
@@ -26,9 +26,9 @@ import ErrorBorder from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";
 import Logger from "../../__internal__/utils/logger";
-import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 import { BorderRadiusType } from "../box/box.component";
 import HintText from "../../__internal__/hint-text";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 export interface TextareaProps
   extends ValidationProps,
@@ -391,7 +391,7 @@ export const Textarea = React.forwardRef(
       </InputPresentation>
     );
 
-    const marginProps = useFormSpacing(rest);
+    const marginProps = filterStyledSystemMarginProps(rest);
 
     return (
       <TooltipProvider
@@ -429,6 +429,7 @@ export const Textarea = React.forwardRef(
               useValidationIcon={computeLabelPropValues(validationOnLabel)}
               adaptiveLabelBreakpoint={adaptiveLabelBreakpoint}
               validationRedesignOptIn={validationRedesignOptIn}
+              my={0} // prevents any form spacing being applied
             >
               {(inputHint || (labelHelp && validationRedesignOptIn)) && (
                 <HintText
diff --git a/src/components/textarea/textarea.style.ts b/src/components/textarea/textarea.style.ts
index b71661f824..65d4c36cd9 100644
--- a/src/components/textarea/textarea.style.ts
+++ b/src/components/textarea/textarea.style.ts
@@ -17,6 +17,7 @@ export interface StyledTextAreaProps extends Pick<TextareaProps, "minHeight"> {
 }
 
 const StyledTextarea = styled.div<StyledTextAreaProps>`
+  margin-bottom: var(--fieldSpacing);
   ${margin};
 
   ${StyledInput} {
diff --git a/src/components/time/time.component.tsx b/src/components/time/time.component.tsx
index e9a96cace7..f91790b654 100644
--- a/src/components/time/time.component.tsx
+++ b/src/components/time/time.component.tsx
@@ -12,6 +12,7 @@ import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import { filterStyledSystemMarginProps } from "../../style/utils";
 
 import Fieldset from "../../__internal__/fieldset";
 import Box from "../box";
@@ -297,6 +298,7 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
         name={name}
         id={internalId.current}
         {...rest}
+        {...filterStyledSystemMarginProps(rest)}
         {...tagComponent("time", rest)}
         aria-describedby={inputHint ? combinedAriaDescribedBy : ariaDescribedBy}
       >
@@ -342,6 +344,7 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
                 warning={!!hoursWarning}
                 disabled={disabled}
                 readOnly={readOnly}
+                my={0} // prevents any form spacing being applied
               />
             </div>
             <Box
@@ -379,6 +382,7 @@ const Time = React.forwardRef<TimeHandle, TimeProps>(
                 warning={!!minutesWarning}
                 disabled={disabled}
                 readOnly={readOnly}
+                my={0} // prevents any form spacing being applied
               />
             </div>
             {showToggle && (
diff --git a/src/hooks/__internal__/useFormSpacing/add-form-spacing/add-form-spacing.test.ts b/src/hooks/__internal__/useFormSpacing/add-form-spacing/add-form-spacing.test.ts
deleted file mode 100644
index baff4b8ce2..0000000000
--- a/src/hooks/__internal__/useFormSpacing/add-form-spacing/add-form-spacing.test.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import addFormSpacing from ".";
-
-test("does not set mb and mt if passed props is empty object and no form spacing value is passed", () => {
-  expect(addFormSpacing({})).toEqual({});
-});
-
-test("sets mb and mt if passed props is empty object", () => {
-  expect(addFormSpacing({}, "5px")).toEqual({ mb: "5px", mt: 0 });
-});
-
-test.each(["mx", "marginX", "ml", "marginLeft", "mr", "marginRight"])(
-  "sets mb and mt if %s passed in props",
-  (marginProp) => {
-    expect(addFormSpacing({ [marginProp]: "10px" }, "5px")).toEqual({
-      [marginProp]: "10px",
-      mb: "5px",
-      mt: 0,
-    });
-  },
-);
-
-test.each(["mt", "marginTop"])(
-  "does not set mt if %s passed in props",
-  (marginProp) => {
-    expect(addFormSpacing({ [marginProp]: "10px" }, "5px")).toEqual({
-      [marginProp]: "10px",
-      mb: "5px",
-    });
-  },
-);
-
-test.each(["mb", "marginBottom"])(
-  "does not set mb if %s passed in props",
-  (marginProp) => {
-    expect(addFormSpacing({ [marginProp]: "10px" }, "5px")).toEqual({
-      [marginProp]: "10px",
-      mt: 0,
-    });
-  },
-);
-
-test.each(["my", "marginY", "m", "margin"])(
-  "does not set mb or mt if %s passed in props",
-  (marginProp) => {
-    expect(addFormSpacing({ [marginProp]: "10px" }, "5px")).toEqual({
-      [marginProp]: "10px",
-    });
-  },
-);
diff --git a/src/hooks/__internal__/useFormSpacing/add-form-spacing/index.ts b/src/hooks/__internal__/useFormSpacing/add-form-spacing/index.ts
deleted file mode 100644
index d058c3bee5..0000000000
--- a/src/hooks/__internal__/useFormSpacing/add-form-spacing/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { MarginProps } from "styled-system";
-
-export default (marginProps: MarginProps, formMarginBottom?: string) => {
-  if (!formMarginBottom) {
-    return marginProps;
-  }
-  const copiedProps = { ...marginProps };
-
-  const { mb, marginBottom, mt, marginTop, my, marginY, m, margin } =
-    copiedProps;
-  const hasCustomMarginBottom = [mb, marginBottom, my, marginY, m, margin].some(
-    (prop) => prop !== undefined,
-  );
-  const hasCustomMarginTop = [mt, marginTop, my, marginY, m, margin].some(
-    (prop) => prop !== undefined,
-  );
-
-  if (!hasCustomMarginBottom) {
-    copiedProps.mb = formMarginBottom;
-  }
-
-  if (!hasCustomMarginTop) {
-    copiedProps.mt = 0;
-  }
-
-  return copiedProps;
-};
diff --git a/src/hooks/__internal__/useFormSpacing/index.ts b/src/hooks/__internal__/useFormSpacing/index.ts
deleted file mode 100644
index 5dc6428633..0000000000
--- a/src/hooks/__internal__/useFormSpacing/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useContext } from "react";
-import { MarginProps } from "styled-system";
-import { filterStyledSystemMarginProps } from "../../../style/utils";
-import {
-  FormSpacingContextProps,
-  FormSpacingContext,
-} from "../../../__internal__/form-spacing-provider";
-import addFormSpacing from "./add-form-spacing";
-
-export default (props: Record<string, unknown> | MarginProps) => {
-  const { marginBottom } =
-    useContext<FormSpacingContextProps>(FormSpacingContext);
-  const marginProps = addFormSpacing(
-    filterStyledSystemMarginProps(props),
-    marginBottom,
-  );
-
-  return marginProps;
-};
diff --git a/src/hooks/__internal__/useFormSpacing/useFormSpacing.test.tsx b/src/hooks/__internal__/useFormSpacing/useFormSpacing.test.tsx
deleted file mode 100644
index 1252ee7b5e..0000000000
--- a/src/hooks/__internal__/useFormSpacing/useFormSpacing.test.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { margin } from "styled-system";
-import { render, screen } from "@testing-library/react";
-import useFormSpacing from ".";
-import FormSpacingProvider from "../../../__internal__/form-spacing-provider";
-
-const StyledDiv = styled.div`
-  ${margin}
-`;
-
-const MockComponent = (props: Record<string, unknown>) => {
-  const marginProps = useFormSpacing(props);
-  return <StyledDiv {...marginProps}>foo</StyledDiv>;
-};
-
-test("applies the form spacing when no custom value exists", () => {
-  render(
-    <FormSpacingProvider marginBottom="10px">
-      <MockComponent />
-    </FormSpacingProvider>,
-  );
-
-  expect(screen.getByText("foo")).toHaveStyle({
-    marginBottom: "10px",
-    marginTop: "0px",
-  });
-});
-
-test("applies the form spacing when custom values exist that don't override top or bottom margin", () => {
-  render(
-    <FormSpacingProvider marginBottom="10px">
-      <MockComponent mx="10px" />
-    </FormSpacingProvider>,
-  );
-
-  expect(screen.getByText("foo")).toHaveStyle({
-    marginBottom: "10px",
-    marginTop: "0px",
-    marginLeft: "10px",
-    marginRight: "10px",
-  });
-});
-
-test("does not apply the form spacing when custom `my` value exists", () => {
-  render(
-    <FormSpacingProvider marginBottom="10px">
-      <MockComponent my="5px" />
-    </FormSpacingProvider>,
-  );
-
-  expect(screen.getByText("foo")).toHaveStyle({
-    marginBottom: "5px",
-    marginTop: "5px",
-  });
-});
-
-test("does not apply the form spacing when custom `m` exists", () => {
-  render(
-    <FormSpacingProvider marginBottom="10px">
-      <MockComponent m="5px" />
-    </FormSpacingProvider>,
-  );
-
-  expect(screen.getByText("foo")).toHaveStyle({
-    marginBottom: "5px",
-    marginTop: "5px",
-  });
-});
-
-test("does not apply the form spacing for top margin when custom `mt` value exists", () => {
-  render(
-    <FormSpacingProvider marginBottom="10px">
-      <MockComponent mt="5px" />
-    </FormSpacingProvider>,
-  );
-
-  expect(screen.getByText("foo")).toHaveStyle({
-    marginBottom: "10px",
-    marginTop: "5px",
-  });
-});
-
-test("does not apply the form spacing for bottom margin when custom `mb` value exists", () => {
-  render(
-    <FormSpacingProvider marginBottom="10px">
-      <MockComponent mb="5px" />
-    </FormSpacingProvider>,
-  );
-
-  expect(screen.getByText("foo")).toHaveStyle({
-    marginBottom: "5px",
-    marginTop: "0px",
-  });
-});

From da2b52b6665b3a1704527475d10f49aab85f74f4 Mon Sep 17 00:00:00 2001
From: nuria1110 <nuria.torresramon@sage.com>
Date: Tue, 11 Mar 2025 13:50:11 +0000
Subject: [PATCH 3/3] chore: address comments

---
 src/components/form/form-test.stories.tsx | 194 ++++++++++++----------
 1 file changed, 102 insertions(+), 92 deletions(-)

diff --git a/src/components/form/form-test.stories.tsx b/src/components/form/form-test.stories.tsx
index 7b3912ccf8..bd3aa95bd8 100644
--- a/src/components/form/form-test.stories.tsx
+++ b/src/components/form/form-test.stories.tsx
@@ -52,6 +52,9 @@ type StoryType = StoryObj<typeof Form>;
 
 export const AllInputs: StoryType = ({ ...props }) => (
   <CarbonProvider validationRedesignOptIn>
+    <Textbox label="Outside of Form" characterLimit={100} />
+    <Textbox label="Outside of Form" characterLimit={100} />
+    <Hr />
     <Form
       onSubmit={() => console.log("submit")}
       leftSideButtons={
@@ -64,103 +67,110 @@ export const AllInputs: StoryType = ({ ...props }) => (
       }
       {...props}
     >
-      <Textbox label="Textbox" characterLimit={100} />
-      <Number label="Number" />
-      <Decimal label="Decimal" />
-      <GroupedCharacter
-        label="GroupedCharacter"
-        groups={[2, 3, 2]}
-        separator="-"
-      />
-      <Password label="Password" characterLimit={100} />
-      <Fieldset legend="Fieldset">
-        <Textbox label="Textbox in Fieldset" />
-        <Checkbox label="Checkbox in Fieldset" />
+      <Box>
+        <Textbox label="Textbox" characterLimit={100} />
+        <Number label="Number" />
+        <Decimal label="Decimal" />
+        <GroupedCharacter
+          label="GroupedCharacter"
+          groups={[2, 3, 2]}
+          separator="-"
+        />
+        <Password label="Password" characterLimit={100} />
+        <Fieldset legend="Fieldset">
+          <Textbox label="Textbox in Fieldset" />
+          <Checkbox label="Checkbox in Fieldset" />
+          <Select
+            name="simple-select"
+            id="simple-select"
+            label="Select in Fieldset"
+          >
+            <Option text="Amber" value="1" />
+            <Option text="Black" value="2" />
+            <Option text="Blue" value="3" />
+          </Select>
+        </Fieldset>
+        <Hr />
+        <Time
+          value={{
+            hours: "",
+            minutes: "",
+          }}
+          onChange={() => {}}
+          label="Time"
+        />
+        <NumeralDate label="Numeral Date" />
+        <RadioButtonGroup name="legend" legend="RadioButtonGroup">
+          <RadioButton
+            id="group-1-input-1"
+            value="group-1-input-1"
+            label="Radio Option 1"
+          />
+          <RadioButton
+            id="group-1-input-2"
+            value="group-1-input-2"
+            label="Radio Option 2"
+          />
+        </RadioButtonGroup>
+        <Checkbox label="Checkbox" />
+        <CheckboxGroup legend="Checkbox Group">
+          <Checkbox label="Checkbox-1" />
+          <Checkbox label="Checkbox-2" />
+        </CheckboxGroup>
+        <DateInput name="date" label="Date" value="" onChange={() => {}} />
+        <DateRange
+          name="date"
+          startLabel="Start Date"
+          endLabel="End Date"
+          value={["", ""]}
+          onChange={() => {}}
+        />
+        <InlineInputs label="Inline inputs">
+          <Textbox onChange={() => {}} />
+          <Textbox onChange={() => {}} />
+          <Textbox onChange={() => {}} />
+        </InlineInputs>
+        <Search value="" onChange={() => {}} />
         <Select name="simple-select" id="simple-select" label="Simple Select">
           <Option text="Amber" value="1" />
           <Option text="Black" value="2" />
           <Option text="Blue" value="3" />
         </Select>
-      </Fieldset>
-      <Time
-        value={{
-          hours: "",
-          minutes: "",
-        }}
-        onChange={() => {}}
-        label="Time"
-      />
-      <NumeralDate label="Numeral Date" />
-      <RadioButtonGroup name="legend" legend="RadioButtonGroup">
-        <RadioButton
-          id="group-1-input-1"
-          value="group-1-input-1"
-          label="Radio Option 1"
-        />
-        <RadioButton
-          id="group-1-input-2"
-          value="group-1-input-2"
-          label="Radio Option 2"
-        />
-      </RadioButtonGroup>
-      <Checkbox label="Checkbox" />
-      <CheckboxGroup legend="Checkbox Group">
-        <Checkbox label="Checkbox-1" />
-        <Checkbox label="Checkbox-2" />
-      </CheckboxGroup>
-      <DateInput name="date" label="Date" value="" onChange={() => {}} />
-      <DateRange
-        name="date"
-        startLabel="Start Date"
-        endLabel="End Date"
-        value={["", ""]}
-        onChange={() => {}}
-      />
-      <InlineInputs label="Inline inputs">
-        <Textbox onChange={() => {}} />
-        <Textbox onChange={() => {}} />
-        <Textbox onChange={() => {}} />
-      </InlineInputs>
-      <Search value="" onChange={() => {}} />
-      <Select name="simple-select" id="simple-select" label="Simple Select">
-        <Option text="Amber" value="1" />
-        <Option text="Black" value="2" />
-        <Option text="Blue" value="3" />
-      </Select>
-      <FilterableSelect
-        name="filterable-select"
-        id="filterable-select"
-        label="Filterable Select"
-      >
-        <Option text="Amber" value="1" />
-        <Option text="Black" value="2" />
-        <Option text="Blue" value="3" />
-      </FilterableSelect>
-      <MultiSelect name="multi-select" id="multi-select" label="Multi Select">
-        <Option text="Amber" value="1" />
-        <Option text="Black" value="2" />
-        <Option text="Blue" value="3" />
-      </MultiSelect>
-      <Textarea label="Textarea" name="textarea" characterLimit={100} />
-      <TextEditor labelText="Text Editor" characterLimit={100} />
-      <SimpleColorPicker
-        name="simple-color-picker"
-        legend="Simple Color Picker"
-      >
-        {[
-          { color: "transparent", label: "transparent" },
-          { color: "#0073C1", label: "blue" },
-          { color: "#582C83", label: "purple" },
-        ].map(({ color, label }) => (
-          <SimpleColor
-            value={color}
-            key={color}
-            aria-label={label}
-            id={color}
-          />
-        ))}
-      </SimpleColorPicker>
-      <Switch name="switch" label="Switch" onChange={() => {}} />
+        <FilterableSelect
+          name="filterable-select"
+          id="filterable-select"
+          label="Filterable Select"
+        >
+          <Option text="Amber" value="1" />
+          <Option text="Black" value="2" />
+          <Option text="Blue" value="3" />
+        </FilterableSelect>
+        <MultiSelect name="multi-select" id="multi-select" label="Multi Select">
+          <Option text="Amber" value="1" />
+          <Option text="Black" value="2" />
+          <Option text="Blue" value="3" />
+        </MultiSelect>
+        <Textarea label="Textarea" name="textarea" characterLimit={100} />
+        <TextEditor labelText="Text Editor" characterLimit={100} />
+        <SimpleColorPicker
+          name="simple-color-picker"
+          legend="Simple Color Picker"
+        >
+          {[
+            { color: "transparent", label: "transparent" },
+            { color: "#0073C1", label: "blue" },
+            { color: "#582C83", label: "purple" },
+          ].map(({ color, label }) => (
+            <SimpleColor
+              value={color}
+              key={color}
+              aria-label={label}
+              id={color}
+            />
+          ))}
+        </SimpleColorPicker>
+        <Switch name="switch" label="Switch" onChange={() => {}} />
+      </Box>
     </Form>
   </CarbonProvider>
 );