carbon-react 114.17.5 → 114.18.0

package/esm/components/inline-inputs/inline-inputs.component.js

@@ -1,9 +1,13 @@
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 import React, { useRef } from "react";
 import PropTypes from "prop-types";
 import Label from "../../__internal__/label";
 import StyledInlineInputs, { StyledContentContainer, StyledInlineInput } from "./inline-inputs.style";
+import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import createGuid from "../../__internal__/utils/helpers/guid";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 export const InlineInputsContext = /*#__PURE__*/React.createContext({});
 
 const columnWrapper = (children, gutter, labelId) => {
@@ -29,7 +33,8 @@ const InlineInputs = ({
   inputWidth,
   labelInline = true,
   labelWidth,
-  required
+  required,
+  ...rest
 }) => {
   const labelId = useRef(createGuid());
   const largeScreen = useIsAboveBreakpoint(adaptiveLabelBreakpoint);
@@ -49,17 +54,20 @@ const InlineInputs = ({
     }, label);
   }
 
-  return /*#__PURE__*/React.createElement(StyledInlineInputs, {
+  const marginProps = useFormSpacing(rest);
+  return /*#__PURE__*/React.createElement(StyledInlineInputs, _extends({
     gutter: gutter,
     "data-component": "inline-inputs",
     className: className,
     labelWidth: labelWidth,
     labelInline: inlineLabel
-  }, renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
+  }, marginProps), renderLabel(), /*#__PURE__*/React.createElement(StyledContentContainer, {
     gutter: gutter,
     "data-element": "inline-inputs-container",
     inputWidth: inputWidth
-  }, columnWrapper(children, gutter, label ? labelId.current : undefined)));
+  }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
+    marginBottom: undefined
+  }, columnWrapper(children, gutter, label ? labelId.current : undefined))));
 };
 
 InlineInputs.propTypes = {
@@ -72,6 +80,160 @@ InlineInputs.propTypes = {
   "label": PropTypes.string,
   "labelInline": PropTypes.bool,
   "labelWidth": PropTypes.number,
+  "m": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "margin": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginBottom": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginLeft": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginRight": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginTop": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginX": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "marginY": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mb": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "ml": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mr": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mt": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "mx": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
+  "my": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.oneOf([null]), PropTypes.number, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.shape({
+    "__@toStringTag": PropTypes.string.isRequired,
+    "description": PropTypes.string,
+    "toString": PropTypes.func.isRequired,
+    "valueOf": PropTypes.func.isRequired
+  }), PropTypes.string]),
   "required": PropTypes.bool
 };
 InlineInputs.displayName = "InlineInputs";

package/esm/components/inline-inputs/inline-inputs.style.js

@@ -1,4 +1,5 @@
 import styled, { css } from "styled-components";
+import { margin } from "styled-system";
 import InputPresentation from "../../__internal__/input/input-presentation.style";
 import { StyledLabelContainer } from "../../__internal__/label/label.style";
 import baseTheme from "../../style/themes/base";
@@ -42,6 +43,8 @@ const StyledContentContainer = styled.div`
     `}
 `;
 const StyledInlineInputs = styled.div`
+  ${margin}
+
   display: ${({
   labelInline
 }) => labelInline ? `flex` : `block`};

package/esm/components/multi-action-button/multi-action-button.component.js

@@ -117,6 +117,7 @@ const MultiActionButton = ({
     if (buttonRef.current === document.activeElement) return;
     setShowAdditionalButtons(false);
   }, []);
+  const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledMultiActionButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtonsIfTriggerNotFocused,
@@ -127,7 +128,7 @@ const MultiActionButton = ({
     "data-role": dataRole,
     displayed: showAdditionalButtons,
     width: width
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(Button, _extends({
+  }, marginProps), /*#__PURE__*/React.createElement(Button, _extends({
     "aria-haspopup": "true",
     "aria-expanded": showAdditionalButtons,
     "aria-label": "Show more",

package/esm/components/numeral-date/numeral-date.component.js

@@ -16,6 +16,7 @@ import { InputGroupBehaviour } from "../../__internal__/input-behaviour";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import NumeralDateContext from "./numeral-date-context";
+import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
 const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
 
@@ -222,6 +223,8 @@ const NumeralDate = ({
       isMiddle: isMiddle,
       isEnd: isEnd,
       hasValidationIcon: hasValidationIcon
+    }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
+      marginBottom: undefined
     }, /*#__PURE__*/React.createElement(Textbox, _extends({}, index === 0 && {
       id: uniqueId
     }, {
@@ -256,7 +259,7 @@ const NumeralDate = ({
     }, {
       size: size,
       tooltipPosition: tooltipPosition
-    }))));
+    })))));
   })))));
 };
 

package/esm/components/select/filterable-select/filterable-select.component.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useState, useEffect, useRef, useCallback } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
-import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
 import SelectTextbox, { formInputPropTypes } from "../select-textbox/select-textbox.component";
 import guid from "../../../__internal__/utils/helpers/guid";
 import withFilter from "../utils/with-filter.hoc";
@@ -13,6 +13,7 @@ import isExpectedOption from "../utils/is-expected-option";
 import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
+import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const FilterableSelect = /*#__PURE__*/React.forwardRef(({
@@ -437,6 +438,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     enableVirtualScroll: enableVirtualScroll,
     virtualScrollOverscan: virtualScrollOverscan
   }, children);
+  const marginProps = useFormSpacing(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     hasTextCursor: true,
     readOnly: readOnly,
@@ -445,7 +447,7 @@ const FilterableSelect = /*#__PURE__*/React.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     isOpen: isOpen
-  }, filterStyledSystemMarginProps(textboxProps)), /*#__PURE__*/React.createElement("div", {
+  }, marginProps), /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
     activeDescendantId: activeDescendantId,

package/esm/components/select/multi-select/multi-select.component.js

@@ -3,7 +3,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
-import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
 import SelectTextbox, { formInputPropTypes } from "../select-textbox/select-textbox.component";
 import guid from "../../../__internal__/utils/helpers/guid";
 import withFilter from "../utils/with-filter.hoc";
@@ -15,6 +15,7 @@ import isExpectedValue from "../utils/is-expected-value";
 import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
 import useStableCallback from "../../../hooks/__internal__/useStableCallback";
+import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
 const FilterableSelectList = withFilter(SelectList);
 const MultiSelect = /*#__PURE__*/React.forwardRef(({
@@ -449,6 +450,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     enableVirtualScroll: enableVirtualScroll,
     virtualScrollOverscan: virtualScrollOverscan
   }, children);
+  const marginProps = useFormSpacing(textboxProps);
   return /*#__PURE__*/React.createElement(StyledSelectMultiSelect, _extends({
     disabled: disabled,
     readOnly: readOnly,
@@ -458,7 +460,7 @@ const MultiSelect = /*#__PURE__*/React.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     isOpen: isOpen
-  }, filterStyledSystemMarginProps(textboxProps)), /*#__PURE__*/React.createElement("div", {
+  }, marginProps), /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(StyledAccessibilityLabelContainer, {
     "data-element": "accessibility-label",

package/esm/components/select/select-textbox/select-textbox.component.js

@@ -145,7 +145,10 @@ const SelectTextbox = /*#__PURE__*/React.forwardRef(({
     onChange: onChange,
     value: selectedValue,
     placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
-  }, getInputAriaAttributes(), getTextboxProps()), !hasTextCursor && renderSelectText());
+  }, getInputAriaAttributes(), getTextboxProps(), {
+    my: 0 // prevents any form spacing being applied
+
+  }), !hasTextCursor && renderSelectText());
 });
 const formInputPropTypes = {
   /**

package/esm/components/select/simple-select/simple-select.component.js

@@ -4,7 +4,7 @@ import React, { useState, useEffect, useRef, useCallback, useMemo } from "react"
 import PropTypes from "prop-types";
 import propTypes from "@styled-system/prop-types";
 import invariant from "invariant";
-import { filterStyledSystemMarginProps, filterOutStyledSystemSpacingProps } from "../../../style/utils";
+import { filterOutStyledSystemSpacingProps } from "../../../style/utils";
 import StyledSelect from "../select.style";
 import SelectTextbox, { formInputPropTypes } from "../select-textbox/select-textbox.component";
 import SelectList from "../select-list/select-list.component";
@@ -13,6 +13,7 @@ import getNextChildByText from "../utils/get-next-child-by-text";
 import isExpectedOption from "../utils/is-expected-option";
 import isNavigationKey from "../utils/is-navigation-key";
 import Logger from "../../../__internal__/utils/logger";
+import useFormSpacing from "../../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
 const SimpleSelect = /*#__PURE__*/React.forwardRef(({
   value,
@@ -355,6 +356,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     enableVirtualScroll: enableVirtualScroll,
     virtualScrollOverscan: virtualScrollOverscan
   }, children);
+  const marginProps = useFormSpacing(props);
   return /*#__PURE__*/React.createElement(StyledSelect, _extends({
     transparent: transparent,
     disabled: disabled,
@@ -363,7 +365,7 @@ const SimpleSelect = /*#__PURE__*/React.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     isOpen: isOpen
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement("div", {
+  }, marginProps), /*#__PURE__*/React.createElement("div", {
     ref: containerRef
   }, /*#__PURE__*/React.createElement(SelectTextbox, _extends({
     "aria-controls": selectListId.current,

package/esm/components/split-button/split-button.component.js

@@ -173,12 +173,13 @@ const SplitButton = ({
   }
 
   const handleClick = useClickAwayListener(hideButtons);
+  const marginProps = filterStyledSystemMarginProps(rest);
   return /*#__PURE__*/React.createElement(StyledSplitButton, _extends({
     "aria-haspopup": "true",
     onMouseLeave: hideButtonsIfTriggerNotFocused,
     onClick: handleClick,
     ref: splitButtonNode
-  }, componentTags(), filterStyledSystemMarginProps(rest)), renderMainButton(), renderAdditionalButtons());
+  }, componentTags(), marginProps), renderMainButton(), renderAdditionalButtons());
 };
 
 SplitButton.propTypes = {

package/esm/components/switch/switch.component.js

@@ -5,8 +5,8 @@ import CheckableInput from "../../__internal__/checkable-input";
 import SwitchSlider from "./__internal__/switch-slider.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import Logger from "../../__internal__/utils/logger";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 let deprecateInputRefWarnTriggered = false;
 const Switch = /*#__PURE__*/React.forwardRef(({
   autoFocus,
@@ -60,6 +60,7 @@ const Switch = /*#__PURE__*/React.forwardRef(({
   }
 
   const shouldValidationBeOnLabel = labelInline && !reverse ? true : validationOnLabel;
+  const marginProps = useFormSpacing(rest);
   const switchStyleProps = {
     "data-component": dataComponent,
     "data-role": dataRole,
@@ -71,7 +72,7 @@ const Switch = /*#__PURE__*/React.forwardRef(({
     reverse: !reverse,
     // switched to preserve backward compatibility
     size,
-    ...filterStyledSystemMarginProps(rest)
+    ...marginProps
   };
   const switchSliderProps = {
     checked: isControlled ? checked : checkedInternal,

package/esm/components/textarea/textarea.component.js

@@ -7,7 +7,6 @@ import FormField from "../../__internal__/form-field";
 import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
 import Input from "../../__internal__/input/input.component";
 import { InputBehaviour } from "../../__internal__/input-behaviour";
-import { filterStyledSystemMarginProps } from "../../style/utils";
 import InputIconToggle from "../../__internal__/input-icon-toggle";
 import guid from "../../__internal__/utils/helpers/guid";
 import StyledTextarea, { MIN_HEIGHT } from "./textarea.style";
@@ -17,7 +16,8 @@ import { NewValidationContext } from "../carbon-provider/carbon-provider.compone
 import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import Box from "../box";
-import Logger from "../../__internal__/utils/logger"; // TODO: Change characterLimit type to number - batch with other breaking changes
+import Logger from "../../__internal__/utils/logger";
+import useFormSpacing from "../../hooks/__internal__/useFormSpacing"; // TODO: Change characterLimit type to number - batch with other breaking changes
 
 let deprecateInputRefWarnTriggered = false;
 const Textarea = /*#__PURE__*/React.forwardRef(({
@@ -58,7 +58,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
   "data-role": dataRole,
   helpAriaLabel,
   inputRef,
-  ...props
+  ...rest
 }, ref) => {
   const {
     validationRedesignOptIn
@@ -171,7 +171,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     id: id,
     as: "textarea",
     inputRef: inputRef
-  }, props)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
+  }, rest)), children, /*#__PURE__*/React.createElement(InputIconToggle, {
     disabled: disabled,
     readOnly: readOnly,
     inputIcon: inputIcon,
@@ -182,6 +182,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     validationIconId: validationRedesignOptIn ? undefined : validationIconId,
     useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }));
+  const marginProps = useFormSpacing(rest);
   return /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition,
     helpAriaLabel: helpAriaLabel
@@ -191,7 +192,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     "data-role": dataRole,
     "data-element": dataElement,
     hasIcon: hasIconInside
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FormField, {
+  }, marginProps), /*#__PURE__*/React.createElement(FormField, {
     fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,
     error: error,
@@ -206,7 +207,7 @@ const Textarea = /*#__PURE__*/React.forwardRef(({
     labelWidth: computeLabelPropValues(labelWidth),
     labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,
-    isRequired: props.required,
+    isRequired: rest.required,
     useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     validationRedesignOptIn: validationRedesignOptIn

package/esm/hooks/__internal__/useFormSpacing/add-form-spacing/index.d.ts

@@ -0,0 +1,3 @@
+import { MarginProps } from "styled-system";
+declare const _default: (marginProps: MarginProps, formMarginBottom?: string | undefined) => MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
+export default _default;

package/esm/hooks/__internal__/useFormSpacing/add-form-spacing/index.js

@@ -0,0 +1,30 @@
+export default ((marginProps, formMarginBottom) => {
+  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;
+});

package/esm/hooks/__internal__/useFormSpacing/index.d.ts

@@ -0,0 +1,3 @@
+import { MarginProps } from "styled-system";
+declare const _default: (props: Record<string, unknown> | MarginProps) => MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>;
+export default _default;

package/esm/hooks/__internal__/useFormSpacing/index.js

@@ -0,0 +1,11 @@
+import { useContext } from "react";
+import { filterStyledSystemMarginProps } from "../../../style/utils";
+import { FormSpacingContext } from "../../../__internal__/form-spacing-provider";
+import addFormSpacing from "./add-form-spacing";
+export default (props => {
+  const {
+    marginBottom
+  } = useContext(FormSpacingContext);
+  const marginProps = addFormSpacing(filterStyledSystemMarginProps(props), marginBottom);
+  return marginProps;
+});

package/lib/__internal__/checkable-input/checkable-input.component.js

@@ -27,6 +27,8 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
   ariaLabelledBy: externalAriaLabelledBy,
   autoFocus,
@@ -124,7 +126,9 @@ const CheckableInput = /*#__PURE__*/_react.default.forwardRef(({
     labelWidth: labelWidth,
     labelInline: labelInline,
     reverse: reverse
-  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, formFieldProps, /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInput, null, /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, inputProps), children))));
+  }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _extends({}, formFieldProps, {
+    my: 0
+  }), /*#__PURE__*/_react.default.createElement(_checkableInput.StyledCheckableInput, null, /*#__PURE__*/_react.default.createElement(_hiddenCheckableInput.default, inputProps), children))));
 });
 
 CheckableInput.propTypes = {

package/lib/__internal__/fieldset/fieldset.component.js

@@ -15,6 +15,8 @@ var _validationIcon = _interopRequireDefault(require("../validations/validation-
 
 var _inputBehaviour = require("../input-behaviour");
 
+var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -32,29 +34,32 @@ const Fieldset = ({
   isRequired,
   blockGroupBehaviour,
   ...rest
-}) => /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, {
-  blockGroupBehaviour: blockGroupBehaviour
-}, /*#__PURE__*/_react.default.createElement(_fieldset.StyledFieldset, _extends({
-  "data-component": "fieldset",
-  m: 0
-}, rest), legend && /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupContext.Consumer, null, ({
-  onMouseEnter,
-  onMouseLeave
-}) => /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, {
-  onMouseEnter: onMouseEnter,
-  onMouseLeave: onMouseLeave,
-  inline: inline,
-  width: legendWidth,
-  align: legendAlign,
-  rightPadding: legendSpacing
-}, /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
-  isRequired: isRequired
-}, legend, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
-  error: error,
-  warning: warning,
-  info: info,
-  tooltipFlipOverrides: ["top", "bottom"]
-})))), children));
+}) => {
+  const marginProps = (0, _useFormSpacing.default)(rest);
+  return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, {
+    blockGroupBehaviour: blockGroupBehaviour
+  }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledFieldset, _extends({
+    "data-component": "fieldset",
+    m: 0
+  }, marginProps, rest), legend && /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupContext.Consumer, null, ({
+    onMouseEnter,
+    onMouseLeave
+  }) => /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, {
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    inline: inline,
+    width: legendWidth,
+    align: legendAlign,
+    rightPadding: legendSpacing
+  }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
+    isRequired: isRequired
+  }, legend, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
+    error: error,
+    warning: warning,
+    info: info,
+    tooltipFlipOverrides: ["top", "bottom"]
+  })))), children));
+};
 
 Fieldset.propTypes = {
   "blockGroupBehaviour": _propTypes.default.bool,