Repository: Sage/carbon (ts)

Issue:
RadioButton:  FieldHelp not aligned correctly in a sidebar
### Description

In the sidebar the FieldHelp label is not aligned correctly  
It should be aligned like  https://carbon.sage.com/?path=/story/radio-button--with-field-help 

### Reproduction

https://stackblitz.com/edit/parsium-carbon-starter-uoxkbr?file=src%2FApp.tsx

### Steps to reproduce

_No response_

### JIRA ticket numbers (Sage only)

_No response_

### Suggested solution

_No response_

### Carbon version

Latest

### Design tokens version

_No response_

### Relevant browsers

Chrome

### Relevant OSs

MacOS

### Additional context

_No response_

### Confidentiality

- [X] I confirm there is no confidential or commercially sensitive information included.

Pull request:
fix(radio-button): incorrect spacing on fieldHelp with validationRedesignOptIn flag
fix #6985

### Proposed behaviour

<!--
A clear and concise description of what changes this PR makes. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->

When `validationRedesignOptIn` flag is true:
- FieldHelp has correct spacing
- Required asterisk appears only on `RadioButtonGroup` legend. 

### Current behaviour

<!--
A clear and concise description of the behaviour before this change. If applicable, include any UI screenshots to help explain your request. If you are a Sage contributor, please DO NOT share any commercially sensitive information, such as UI screenshots or code from Sage products.
-->
When `validationRedesignOptIn` flag is true:
- FieldHelp has incorrect spacing
- Required asterisk appears on all `RadioButton`s within a group. 

### Checklist

<!-- Each PR should include the following -->

- [x] Commits follow our style guide
- [x] Related issues linked in commit messages if required
- [ ] Screenshots are included in the PR if useful
- [ ] All themes are supported if required
- [ ] Unit tests added or updated if required
- [ ] Playwright automation tests added or updated if required
- [x] Storybook added or updated if required
- [ ] Translations added or updated (including creating or amending translation keys table in storybook) if required
- [ ] Typescript `d.ts` file added or updated if required
- [x] Related docs have been updated if required

#### QA

- [ ] Tested in provided StackBlitz sandbox/Storybook
- [ ] Add new Playwright test coverage if required
- [ ] Carbon implementation matches Design System/designs
- [ ] UI Tests GitHub check reviewed if required

### Additional context

<!-- Add any other context or links about the pull request here. -->

### Testing instructions

<!--
How can a reviewer test this PR?

If this PR addresses a pre-existing bug, please include a link to a sandbox that reproduces the original bug. A starter template has been provided to help you do this:
<https://stackblitz.com/fork/github/Parsium/carbon-starter>
-->

See [bugs demo](https://stackblitz.com/edit/parsium-carbon-starter-cbcm1pah?file=src%2FApp.tsx,src%2Fmain.tsx)
See 'With New Validation' and 'With New Validation Group' test stories. 


Patch:
diff --git a/src/components/button/button.component.tsx b/src/components/button/button.component.tsx
index 9e95f1ff9..7a5b85fa3 100644
--- a/src/components/button/button.component.tsx
+++ b/src/components/button/button.component.tsx
@@ -54,9 +54,9 @@ export interface ButtonProps extends SpaceProps, TagProps {
   href?: string;
   /** Defines an Icon position related to the children: "before" | "after" */
   iconPosition?: ButtonIconPosition;
-  /** Provides a tooltip message when the icon is hovered. */
+  /** [Legacy] Provides a tooltip message when the icon is hovered. */
   iconTooltipMessage?: string;
-  /** Provides positioning when the tooltip is displayed. */
+  /** [Legacy] Provides positioning when the tooltip is displayed. */
   iconTooltipPosition?: TooltipPositions;
   /** Defines an Icon type within the button */
   iconType?: IconType;
diff --git a/src/components/checkbox/checkbox-group/checkbox-group.component.tsx b/src/components/checkbox/checkbox-group/checkbox-group.component.tsx
index db699e1a2..9f9a72eae 100644
--- a/src/components/checkbox/checkbox-group/checkbox-group.component.tsx
+++ b/src/components/checkbox/checkbox-group/checkbox-group.component.tsx
@@ -17,8 +17,8 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
   /** The content for the CheckboxGroup Legend */
   legend?: string;
   /**
-   * The content for the CheckboxGroup Help tooltip,
-   * will be rendered as hint text when `validationRedesignOptIn` is true.
+   * The content for the CheckboxGroup hint text,
+   * will only be rendered when `validationRedesignOptIn` is true.
    */
   legendHelp?: string;
   /** [Legacy] When true, legend is placed inline with the checkboxes */
@@ -39,7 +39,7 @@ export interface CheckboxGroupProps extends ValidationProps, MarginProps {
   isOptional?: boolean;
   /** [Legacy] Overrides the default tooltip */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** When true, Checkboxes are in line */
+  /** When true, Checkboxes are inline */
   inline?: boolean;
 }
 
@@ -74,7 +74,6 @@ export const CheckboxGroup = (props: CheckboxGroupProps) => {
           legendSpacing={legendSpacing}
           error={error}
           warning={warning}
-          info={info}
           isRequired={required}
           isOptional={isOptional}
           {...tagComponent("checkboxgroup", props)}
diff --git a/src/components/checkbox/checkbox.component.tsx b/src/components/checkbox/checkbox.component.tsx
index 5df4850a5..cad147160 100644
--- a/src/components/checkbox/checkbox.component.tsx
+++ b/src/components/checkbox/checkbox.component.tsx
@@ -24,13 +24,13 @@ export interface CheckboxProps extends CommonCheckableInputProps, MarginProps {
   "data-element"?: string;
   /** Identifier used for testing purposes, applied to the root element of the component. */
   "data-role"?: string;
-  /** Aria label for rendered help component */
+  /** [Legacy] Aria label for rendered help component */
   helpAriaLabel?: string;
   /** When true label is inline */
   labelInline?: boolean;
   /** Accepts a callback function which is triggered on click event */
   onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
-  /** Overrides the default tooltip position */
+  /** [Legacy] Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
   /** The value of the checkbox, passed on form submit */
   value?: string;
diff --git a/src/components/checkbox/checkbox.mdx b/src/components/checkbox/checkbox.mdx
index d632744d4..f7e086a4a 100644
--- a/src/components/checkbox/checkbox.mdx
+++ b/src/components/checkbox/checkbox.mdx
@@ -92,13 +92,13 @@ so therefore `8px` or `16px`. The default is `2` for this prop.
 
 ## Validations
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 For more information check our [Validations](../?path=/docs/documentation-validations--docs) documentation page.
 
 This is an example of `Checkbox` in a `CheckboxGroup` with validations passed as a string.
 
-**Note:** The `legendHelp` will be rendered as "Hint text".
+You can use the `legendHelp` prop to provide a hint text for the group.
 
 <Canvas of={ValidationStories.NewStringValidation} />
 
diff --git a/src/components/date-range/date-range.mdx b/src/components/date-range/date-range.mdx
index 89e3ed7e6..1489b9cf2 100644
--- a/src/components/date-range/date-range.mdx
+++ b/src/components/date-range/date-range.mdx
@@ -79,7 +79,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 #### New designs validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 Labels and validation strings that exceed the width of the input will wrap to a new line - inputs will remain aligned, however this may cause text to be misaligned.
 
diff --git a/src/components/date/date.mdx b/src/components/date/date.mdx
index 3c7952c1b..5f307d0a3 100644
--- a/src/components/date/date.mdx
+++ b/src/components/date/date.mdx
@@ -138,7 +138,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 #### New designs validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 <Canvas of={DateStories.ValidationsStringNewDesign} />
 
diff --git a/src/components/decimal/decimal.mdx b/src/components/decimal/decimal.mdx
index dd6ae6e6a..59077b91f 100644
--- a/src/components/decimal/decimal.mdx
+++ b/src/components/decimal/decimal.mdx
@@ -127,7 +127,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 #### New designs validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 <Canvas of={DecimalStories.ValidationsRedesign} />
 
diff --git a/src/components/form/form.stories.tsx b/src/components/form/form.stories.tsx
index 1d580cc6e..bbb264178 100644
--- a/src/components/form/form.stories.tsx
+++ b/src/components/form/form.stories.tsx
@@ -340,14 +340,14 @@ export const WithBothOptionalOrRequired: Story = () => (
         isOptional
       >
         <RadioButton
-          id="group-2-input-1"
-          value="group-2-input-1"
+          id="group-1-input-1"
+          value="group-1-input-1"
           label="Radio Option 1"
           labelWidth={10}
         />
         <RadioButton
-          id="group-2-input-2"
-          value="group-2-input-2"
+          id="group-1-input-2"
+          value="group-1-input-2"
           label="Radio Option 2"
           labelWidth={10}
         />
diff --git a/src/components/grouped-character/grouped-character.mdx b/src/components/grouped-character/grouped-character.mdx
index 6bfcd46b5..867a15144 100644
--- a/src/components/grouped-character/grouped-character.mdx
+++ b/src/components/grouped-character/grouped-character.mdx
@@ -120,7 +120,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 #### New designs validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 <Canvas of={GroupedCharacterStories.ValidationsRedesign} />
 
diff --git a/src/components/icon/icon.component.tsx b/src/components/icon/icon.component.tsx
index 29df7e4b6..299fe127f 100644
--- a/src/components/icon/icon.component.tsx
+++ b/src/components/icon/icon.component.tsx
@@ -31,19 +31,19 @@ export interface IconProps
   id?: string;
   /** The ARIA role to be applied to the Icon */
   role?: string;
-  /** The message to be displayed within the tooltip */
+  /** [Legacy] The message to be displayed within the tooltip */
   tooltipMessage?: React.ReactNode;
-  /** The position to display the tooltip */
+  /** [Legacy] The position to display the tooltip */
   tooltipPosition?: TooltipPositions;
-  /** Control whether the tooltip is visible */
+  /** [Legacy] Control whether the tooltip is visible */
   tooltipVisible?: boolean;
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipBgColor?: string;
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipFontColor?: string;
-  /** Overrides the default flip behaviour of the Tooltip */
+  /** [Legacy] Overrides the default flip behaviour of the Tooltip */
   tooltipFlipOverrides?: TooltipPositions[];
-  /** Id passed to the tooltip container, used for accessibility purposes */
+  /** [Legacy] Id passed to the tooltip container, used for accessibility purposes */
   tooltipId?: string;
   /**
    * Icon type
diff --git a/src/components/link/link.component.tsx b/src/components/link/link.component.tsx
index 34f436c94..3a010d0ae 100644
--- a/src/components/link/link.component.tsx
+++ b/src/components/link/link.component.tsx
@@ -36,9 +36,9 @@ export interface LinkProps extends StyledLinkProps, React.AriaAttributes {
       | React.MouseEvent<HTMLButtonElement>,
   ) => void;
 
-  /** A message to display as a tooltip to the link. */
+  /** [Legacy] A message to display as a tooltip to the link. */
   tooltipMessage?: string;
-  /** Positions the tooltip with the link. */
+  /** [Legacy] Positions the tooltip with the link. */
   tooltipPosition?: "bottom" | "left" | "right" | "top";
   /** Child content to render in the link. */
   children?: React.ReactNode;
diff --git a/src/components/loader/loader-square.style.ts b/src/components/loader/loader-square.style.ts
index c909a7d9d..ccd2c49f9 100644
--- a/src/components/loader/loader-square.style.ts
+++ b/src/components/loader/loader-square.style.ts
@@ -25,7 +25,7 @@ const loaderAnimation = keyframes`
 
 type RoundedCornersOptOut = boolean;
 
-const getDimentions = (
+const getDimensions = (
   size: StyledLoaderSquareProps["size"],
   roundedCornersOptOut: RoundedCornersOptOut,
 ) => {
@@ -59,7 +59,7 @@ const StyledLoaderSquare = styled.div<StyledLoaderSquareProps>`
     animation: ${loaderAnimation} 1s infinite ease-in-out both;
     background-color: ${backgroundColor};
     display: inline-block;
-    ${getDimentions(size, theme.roundedCornersOptOut)}
+    ${getDimensions(size, theme.roundedCornersOptOut)}
 
     ${isInsideButton &&
     css`
diff --git a/src/components/numeral-date/numeral-date.mdx b/src/components/numeral-date/numeral-date.mdx
index 507c343d8..f8ac8f9cc 100644
--- a/src/components/numeral-date/numeral-date.mdx
+++ b/src/components/numeral-date/numeral-date.mdx
@@ -53,9 +53,9 @@ For more information check our [Validations](../?path=/docs/documentation-valida
 
 #### New designs validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
-**Note:** The `legendHelp` will be rendered as "Hint text".
+You can use the `legendHelp` prop to provide a hint text for the group.
 
 <Canvas of={NumeralDateStories.NewValidation} />
 
diff --git a/src/components/password/password.mdx b/src/components/password/password.mdx
index e3a14bb6f..d753fdf7e 100644
--- a/src/components/password/password.mdx
+++ b/src/components/password/password.mdx
@@ -147,7 +147,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 #### New designs validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 <Canvas of={PasswordStories.NewDesignsValidation} />
 
diff --git a/src/components/portrait/portrait.component.tsx b/src/components/portrait/portrait.component.tsx
index 74cdac77c..11535793d 100644
--- a/src/components/portrait/portrait.component.tsx
+++ b/src/components/portrait/portrait.component.tsx
@@ -45,21 +45,21 @@ export interface PortraitProps extends MarginProps {
   darkBackground?: boolean;
   /** Prop for `onClick` events. */
   onClick?: (ev: React.MouseEvent<HTMLElement>) => void;
-  /** The message to be displayed within the tooltip */
+  /** [Legacy] The message to be displayed within the tooltip */
   tooltipMessage?: React.ReactNode;
-  /** The id attribute to use for the tooltip */
+  /** [Legacy] The id attribute to use for the tooltip */
   tooltipId?: string;
-  /** Whether to to show the Tooltip */
+  /** [Legacy] Whether to to show the Tooltip */
   tooltipIsVisible?: boolean;
-  /** Sets position of the tooltip */
+  /** [Legacy] Sets position of the tooltip */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Defines the message type */
+  /** [Legacy] Defines the message type */
   tooltipType?: string;
-  /** Defines the size of the tooltip content */
+  /** [Legacy] Defines the size of the tooltip content */
   tooltipSize?: "medium" | "large";
-  /** Override background color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** [Legacy] Override background color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipBgColor?: string;
-  /** Override font color of the Tooltip, provide any color from palette or any valid css color value. */
+  /** [Legacy] Override font color of the Tooltip, provide any color from palette or any valid css color value. */
   tooltipFontColor?: string;
 }
 
diff --git a/src/components/radio-button/radio-button-group/radio-button-group.component.tsx b/src/components/radio-button/radio-button-group/radio-button-group.component.tsx
index 9eab45fd1..3f5e2e36a 100644
--- a/src/components/radio-button/radio-button-group/radio-button-group.component.tsx
+++ b/src/components/radio-button/radio-button-group/radio-button-group.component.tsx
@@ -31,8 +31,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
   /** The content for the RadioGroup Legend */
   legend?: string;
   /**
-   * The content for the RadioButtonGroup Legend Help tooltip,
-   * will be rendered as hint text when `validationRedesignOptIn` is true.
+   * The content for the RadioButtonGroup hint text,
+   * will only be rendered when `validationRedesignOptIn` is true.
    */
   legendHelp?: string;
   /** [Legacy] Text alignment of legend when inline */
@@ -124,7 +124,6 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
           legend={legend}
           error={error}
           warning={warning}
-          info={info}
           inline={inlineLegend}
           legendWidth={legendWidth}
           legendAlign={legendAlign}
@@ -168,8 +167,6 @@ export const RadioButtonGroup = (props: RadioButtonGroupProps) => {
                     labelSpacing,
                     error: !!error,
                     warning: !!warning,
-                    info: !!info,
-                    required,
                     ...child.props,
                   });
                 })}
diff --git a/src/components/radio-button/radio-button.component.tsx b/src/components/radio-button/radio-button.component.tsx
index 039278d33..eae72bbfa 100644
--- a/src/components/radio-button/radio-button.component.tsx
+++ b/src/components/radio-button/radio-button.component.tsx
@@ -26,9 +26,9 @@ export interface RadioButtonProps
   onClick?: (ev: React.MouseEvent<HTMLInputElement>) => void;
   /** the value of the Radio Button, passed on form submit */
   value: string;
-  /** Overrides the default tooltip position */
+  /** [Legacy] Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
-  /** Aria label for rendered help component */
+  /** [Legacy] Aria label for rendered help component */
   helpAriaLabel?: string;
 }
 
@@ -86,8 +86,6 @@ export const RadioButton = React.forwardRef<
     );
 
     const validationProps = {
-      disabled,
-      inputWidth,
       error,
       warning,
       info,
@@ -95,14 +93,14 @@ export const RadioButton = React.forwardRef<
 
     const commonProps = {
       ...validationProps,
+      disabled,
+      inputWidth,
       fieldHelpInline,
       labelSpacing,
     };
 
     const inputProps = {
-      ...(validationRedesignOptIn
-        ? { ...validationProps }
-        : { ...commonProps }),
+      ...commonProps,
       autoFocus,
       checked,
       fieldHelp,
@@ -142,9 +140,7 @@ export const RadioButton = React.forwardRef<
         inline={inline}
         reverse={reverse}
         size={size}
-        {...(validationRedesignOptIn
-          ? { ...validationProps }
-          : { ...commonProps, fieldHelp })}
+        {...commonProps}
         {...marginProps}
       >
         <CheckableInput {...inputProps}>
diff --git a/src/components/radio-button/radio-button.mdx b/src/components/radio-button/radio-button.mdx
index 6989089f6..e9a427d08 100644
--- a/src/components/radio-button/radio-button.mdx
+++ b/src/components/radio-button/radio-button.mdx
@@ -117,7 +117,7 @@ Passing in `large` for the `size` prop on each radio button will increase the si
 
 ### With custom styled labels
 
-Labels could be customized using the Typography Component
+The `label` prop can be set to a ReactNode to allow for custom styling of the label.
 
 <Canvas of={RadioButtonStories.WithCustomStyledLabels} />
 
@@ -135,13 +135,13 @@ You can use the `IsOptional` prop to indicate if the fields are optional.
 
 ### Validations
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 For more information check our [Validations](../?path=/docs/documentation-validations--docs) documentation page.
 
 This is an example of `RadioButton` in a `RadioButtonGroup` with validations passed as a string.
 
-**Note:** The `legendHelp` will be rendered as "Hint text".
+You can use the `legendHelp` prop to provide a hint text for the group.
 
 <Canvas of={RadioButtonStories.NewValidationDefaultGroup} />
 
diff --git a/src/components/search/search.component.tsx b/src/components/search/search.component.tsx
index 69de4c49e..f96b55ba2 100644
--- a/src/components/search/search.component.tsx
+++ b/src/components/search/search.component.tsx
@@ -70,7 +70,7 @@ export interface SearchProps extends ValidationProps, MarginProps {
   variant?: "default" | "dark";
   /** Input tabindex */
   tabIndex?: number;
-  /** Overrides the default tooltip position */
+  /** [Legacy] Overrides the default tooltip position */
   tooltipPosition?: "top" | "bottom" | "left" | "right";
 }
 
diff --git a/src/components/select/filterable-select/filterable-select.mdx b/src/components/select/filterable-select/filterable-select.mdx
index 0e19830ab..e3efd7549 100644
--- a/src/components/select/filterable-select/filterable-select.mdx
+++ b/src/components/select/filterable-select/filterable-select.mdx
@@ -130,7 +130,7 @@ If there is no `id` prop specified on an object, then the exact objects will be
 
 ### New Validation Designs
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 For more information check our [Validations](../?path=/docs/documentation-validations--docs) documentation page.
 
diff --git a/src/components/select/multi-select/multi-select.mdx b/src/components/select/multi-select/multi-select.mdx
index b4cc95289..8e69e72bf 100644
--- a/src/components/select/multi-select/multi-select.mdx
+++ b/src/components/select/multi-select/multi-select.mdx
@@ -125,7 +125,7 @@ In this example the `maxWidth` prop is 50%.
 
 ### New Validation Designs
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 For more information check our [Validations](../?path=/docs/documentation-validations--docs) documentation page.
 
diff --git a/src/components/select/simple-select/simple-select.mdx b/src/components/select/simple-select/simple-select.mdx
index 7b24e11bf..a8af7a43c 100644
--- a/src/components/select/simple-select/simple-select.mdx
+++ b/src/components/select/simple-select/simple-select.mdx
@@ -159,7 +159,7 @@ The inline label can change to be top aligned at a breakpoint. Enable this by pa
 
 ### New Validation Designs
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 For more information check our [Validations](../?path=/docs/documentation-validations--docs) documentation page.
 
diff --git a/src/components/switch/switch.mdx b/src/components/switch/switch.mdx
index ad611564f..3f144a753 100644
--- a/src/components/switch/switch.mdx
+++ b/src/components/switch/switch.mdx
@@ -83,8 +83,6 @@ You can use the `isOptional` prop to indicate if the field is optional.
 
 ### With labelInline
 
-**Note:** The `labelInline` prop is not supported if the `validationRedesignOptIn` flag on the `CarbonProvider` is true.
-
 <Canvas of={SwitchStories.WithLabelInline} name="With labelInline" />
 
 ### With fieldHelp
@@ -125,7 +123,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 <Canvas
   of={SwitchStories.ValidationStringTooltip}
-  name="single switch - string validation - tooltipPosition overriden"
+  name="single switch - string validation - tooltipPosition overridden"
 />
 
 #### As a string with validationOnLabel
@@ -139,7 +137,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 <Canvas
   of={SwitchStories.ValidationStringLabelTooltip}
-  name="single switch - string validation - validationOnLabel - tooltipPosition overriden"
+  name="single switch - string validation - validationOnLabel - tooltipPosition overridden"
 />
 
 #### As a boolean
@@ -151,7 +149,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 ### New Validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 **Note:** The `legendHelp` will be rendered as "Hint text".
 
diff --git a/src/components/textarea/textarea.mdx b/src/components/textarea/textarea.mdx
index 64e4db189..dc7919986 100644
--- a/src/components/textarea/textarea.mdx
+++ b/src/components/textarea/textarea.mdx
@@ -163,7 +163,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 #### New designs validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 <Canvas of={TextareaStories.NewDesignValidationStory} />
 
diff --git a/src/components/textbox/textbox.mdx b/src/components/textbox/textbox.mdx
index 61f8e9dd8..c7e3cef4f 100644
--- a/src/components/textbox/textbox.mdx
+++ b/src/components/textbox/textbox.mdx
@@ -164,7 +164,7 @@ It is possible to use the `tooltipPosition` to override the default placement of
 
 #### New designs validation
 
-The folowing examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
+The following examples use the new validation pattern that is available by setting the `validationRedesignOptIn` flag on the `CarbonProvider` to true.
 
 <Canvas of={TextboxStories.NewDesignsValidation} />
 
diff --git a/src/components/tile/tile.style.ts b/src/components/tile/tile.style.ts
index 4597cd153..fa16dd200 100644
--- a/src/components/tile/tile.style.ts
+++ b/src/components/tile/tile.style.ts
@@ -54,7 +54,7 @@ const getBorderRadius = (roundness: TileProps["roundness"]) => {
   }
 };
 
-const getHeighlightVariant = (variant: TileProps["highlightVariant"]) => {
+const getHighlightVariant = (variant: TileProps["highlightVariant"]) => {
   switch (variant) {
     case "success":
       return "var(--colorsSemanticPositive500)";
@@ -141,7 +141,7 @@ export const StyledHighlight = styled.div<{
   height: 100%;
   width: 100%;
   position: relative;
-  background: ${({ variant }) => getHeighlightVariant(variant)};
+  background: ${({ variant }) => getHighlightVariant(variant)};
   border-radius: ${({ roundness }) => getBorderRadius(roundness)};
 
   ${StyledTile} {


Test patch:
diff --git a/src/__internal__/focus-trap/focus-trap.test.tsx b/src/__internal__/focus-trap/focus-trap.test.tsx
index 6a5d99670..10b2e1fac 100644
--- a/src/__internal__/focus-trap/focus-trap.test.tsx
+++ b/src/__internal__/focus-trap/focus-trap.test.tsx
@@ -1262,7 +1262,7 @@ test("when focusableSelectors is not used, preventDefault is not called upon tab
   expect(firstKeydownEvent.defaultPrevented).toBeFalsy();
 });
 
-test("when focusableSelectors is used, preventDefault is called when needed to prevent an undesired element becomed focused", async () => {
+test("when focusableSelectors is used, preventDefault is called when needed to prevent an undesired element becomes focused", async () => {
   render(
     <MockComponent focusableSelectors="button.focusable">
       <button type="button">One</button>
diff --git a/src/components/decimal/decimal.test.tsx b/src/components/decimal/decimal.test.tsx
index 0a64265bf..6daf96093 100644
--- a/src/components/decimal/decimal.test.tsx
+++ b/src/components/decimal/decimal.test.tsx
@@ -930,7 +930,7 @@ describe("when the component is uncontrolled", () => {
     expect(screen.getByTestId("hidden-input")).toHaveValue("1  0000,00");
   });
 
-  it("corretcly handles a value that has multiple groups with white-spaces when the `pt-PT` locale is set", async () => {
+  it("correctly handles a value that has multiple groups with white-spaces when the `pt-PT` locale is set", async () => {
     const user = userEvent.setup();
     render(<Decimal locale="pt-PT" />);
 
diff --git a/src/components/dialog/dialog-test.stories.tsx b/src/components/dialog/dialog-test.stories.tsx
index 83ddc4960..355bda330 100644
--- a/src/components/dialog/dialog-test.stories.tsx
+++ b/src/components/dialog/dialog-test.stories.tsx
@@ -166,7 +166,7 @@ export const Default = ({
           <TextEditor
             onChange={handleEditorChange}
             value={editorState}
-            labelText="Additonal notes"
+            labelText="Additional notes"
             mb={1}
           />
           <Checkbox name="checkbox" label="Do you like my Dog" />
diff --git a/src/components/radio-button/radio-button-test.stories.tsx b/src/components/radio-button/radio-button-test.stories.tsx
index 97e532cc6..a07f7c154 100644
--- a/src/components/radio-button/radio-button-test.stories.tsx
+++ b/src/components/radio-button/radio-button-test.stories.tsx
@@ -5,17 +5,17 @@ import { RadioButtonGroup, RadioButton } from ".";
 import { RadioButtonGroupProps } from "./radio-button-group/radio-button-group.component";
 import { RadioButtonProps } from "./radio-button.component";
 import CarbonProvider from "../carbon-provider";
-import Box from "../box";
 
 export default {
   title: "Radio Button/Test",
   includeStories: [
-    "Required",
+    "WithLabelHelp",
     "WithValidationsOnButtons",
     "WithValidationsOnRadioGroup",
     "WithTooltipPosition",
     "WithTooltipPositionOnRadioGroup",
-    "WithNewValidationLegendInline",
+    "WithNewValidation",
+    "WithNewValidationGroup",
   ],
   parameters: {
     info: { disable: true },
@@ -23,23 +23,52 @@ export default {
       disableSnapshot: true,
     },
   },
+  argTypes: {
+    labelSpacing: {
+      options: [1, 2],
+      control: {
+        type: "select",
+      },
+    },
+    size: {
+      options: ["small", "large"],
+      control: {
+        type: "select",
+      },
+    },
+  },
 };
 
-export const Required: StoryFn<typeof RadioButton> = () => (
-  <RadioButtonGroup name="required" legend="Radio group legend" required>
-    <RadioButton id="radio-1" value="radio1" label="Radio Option 1" />
-    <RadioButton id="radio-2" value="radio2" label="Radio Option 2" />
-    <RadioButton id="radio-3" value="radio3" label="Radio Option 3" />
+export const WithLabelHelp: StoryFn<typeof RadioButton> = () => (
+  <RadioButtonGroup name="labelHelp" legend="Radio group legend">
+    <RadioButton
+      id="radio-1"
+      value="radio1"
+      label="Radio Option 1"
+      labelHelp="Radio 1"
+    />
+    <RadioButton
+      id="radio-2"
+      value="radio2"
+      label="Radio Option 2"
+      labelHelp="Radio 2"
+    />
+    <RadioButton
+      id="radio-3"
+      value="radio3"
+      label="Radio Option 3"
+      labelHelp="Radio 3"
+    />
   </RadioButtonGroup>
 );
 
-Required.storyName = "required";
+WithLabelHelp.storyName = "with labelHelp";
 
-export const WithValidationsOnButtons: StoryFn<typeof RadioButton> = () => (
+export const WithValidationsOnButtons = ({ ...args }) => (
   <RadioButtonGroup
     name="validations-on-buttons-group"
     onChange={() => console.log("change")}
-    legend="Radio group legend"
+    {...args}
   >
     <RadioButton
       id="validations-on-buttons-radio-1"
@@ -64,13 +93,18 @@ export const WithValidationsOnButtons: StoryFn<typeof RadioButton> = () => (
 );
 
 WithValidationsOnButtons.storyName = "with validations on RadioButton";
+WithValidationsOnButtons.args = {
+  legend: "Radio group legend",
+  legendInline: false,
+  required: false,
+  inline: false,
+};
 
-export const WithValidationsOnRadioGroup: StoryFn<typeof RadioButton> = () => (
+export const WithValidationsOnRadioGroup = ({ ...args }) => (
   <RadioButtonGroup
     name="validations-on-group"
     onChange={() => console.log("change")}
-    legend="Radio group legend"
-    error="Error message"
+    {...args}
   >
     <RadioButton
       id="validations-on-group-radio-1"
@@ -91,6 +125,14 @@ export const WithValidationsOnRadioGroup: StoryFn<typeof RadioButton> = () => (
 );
 
 WithValidationsOnRadioGroup.storyName = "with validations on RadioGroup";
+WithValidationsOnRadioGroup.args = {
+  error: "Error message",
+  warning: "",
+  legend: "Radio group legend",
+  legendInline: false,
+  required: false,
+  inline: false,
+};
 
 export const WithTooltipPosition: StoryFn<typeof RadioButton> = () => (
   <RadioButtonGroup
@@ -141,111 +183,61 @@ export const WithTooltipPositionOnRadioGroup: StoryFn<
 WithTooltipPositionOnRadioGroup.storyName =
   "with tooltip position on RadioGroup";
 
-const radioContainerWidth = 400;
-
-export const RadioButtonComponent = (props: Partial<RadioButtonProps>) => {
-  const [isChecked, setIsChecked] = React.useState(false);
+export const WithNewValidation = (props: Partial<RadioButtonProps>) => {
   return (
-    <div
-      style={{
-        marginTop: "64px",
-        marginLeft: "64px",
-        width: radioContainerWidth,
-      }}
-    >
+    <CarbonProvider validationRedesignOptIn>
       <RadioButton
         id="radio-1"
         value="radio1"
         label="Radiobutton 1"
-        checked={isChecked}
-        onChange={(e) => setIsChecked(e.target.checked)}
         {...props}
       />
-    </div>
+    </CarbonProvider>
   );
 };
 
-export const RadioButtonGroupComponent = ({
-  children,
+WithNewValidation.args = {
+  error: true,
+  warning: false,
+  fieldHelp: "",
+  labelHelp: "",
+  required: false,
+  checked: false,
+  disabled: false,
+  labelSpacing: 1,
+};
+
+export const WithNewValidationGroup = ({
   ...props
 }: Partial<RadioButtonGroupProps>) => {
   return (
-    <div
-      style={{
-        marginTop: "64px",
-        marginLeft: "64px",
-      }}
-    >
+    <CarbonProvider validationRedesignOptIn>
       <RadioButtonGroup
-        name="radiobuttongroup"
+        name="radio-button-group"
         legend="Radio group legend"
         {...props}
       >
         <RadioButton id="radio-1" value="radio1" label="Yes" />
         <RadioButton id="radio-2" value="radio2" label="No" />
-        <RadioButton id="radio-3" value="radio3" label="Maybe" />
-
-        {children}
+        <RadioButton
+          id="radio-3"
+          value="radio3"
+          label="Maybe"
+          fieldHelp="fieldHelp text"
+        />
       </RadioButtonGroup>
-    </div>
+    </CarbonProvider>
   );
 };
 
-export const WithNewValidationLegendInline = () => {
-  return (
-    <Box m={2}>
-      <CarbonProvider validationRedesignOptIn>
-        <RadioButtonGroup
-          legend="Label"
-          legendHelp="Hint Text"
-          name="error-validations-group-inline"
-          error="Error Message (Fix is required)"
-          legendInline
-        >
-          <RadioButton
-            id="radio-one-1"
-            value="radioOne1"
-            label="Radio Option 1"
-          />
-          <RadioButton
-            id="radio-one-2"
-            value="radioOne2"
-            label="Radio Option 2"
-          />
-          <RadioButton
-            id="radio-one-3"
-            value="radioOne3"
-            label="Radio Option 3"
-          />
-        </RadioButtonGroup>
-
-        <RadioButtonGroup
-          mt={2}
-          legend="Label"
-          legendHelp="Hint Text"
-          name="warning-validations-group-inline"
-          warning="Warning Message (Fix is optional)"
-        >
-          <RadioButton
-            id="radio-two-1"
-            value="radioTwo1"
-            label="Radio Option 1"
-          />
-          <RadioButton
-            id="radio-two-2"
-            value="radioTwo2"
-            label="Radio Option 2"
-          />
-          <RadioButton
-            id="radio-two-3"
-            value="radioTwo3"
-            label="Radio Option 3"
-          />
-        </RadioButtonGroup>
-      </CarbonProvider>
-    </Box>
-  );
+WithNewValidationGroup.args = {
+  error: "Error message",
+  warning: "",
+  legendHelp: "Legend help text",
+  legendInline: false,
+  required: true,
+  inline: false,
+};
+WithNewValidationGroup.parameters = {
+  chromatic: { disableSnapshot: false },
 };
-
-WithNewValidationLegendInline.storyName =
-  "with new validation - legend inline ";
diff --git a/src/components/switch/switch.test.tsx b/src/components/switch/switch.test.tsx
index bb2040c18..1d68bffdc 100644
--- a/src/components/switch/switch.test.tsx
+++ b/src/components/switch/switch.test.tsx
@@ -25,8 +25,8 @@ test("should display deprecation warning once", () => {
 });
 
 testStyledSystemMargin(
-  (props) => <Switch data-role="swtich-wrapper" {...props} />,
-  () => screen.getByTestId("swtich-wrapper"),
+  (props) => <Switch data-role="switch-wrapper" {...props} />,
+  () => screen.getByTestId("switch-wrapper"),
 );
 
 test("accepts ref as a ref object", () => {