carbon-react 114.17.5 → 114.18.0

package/lib/__internal__/form-field/form-field.component.js

@@ -11,8 +11,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _invariant = _interopRequireDefault(require("invariant"));
 
-var _utils = require("../../style/utils");
-
 var _formField = _interopRequireWildcard(require("./form-field.style"));
 
 var _label = _interopRequireDefault(require("../label"));
@@ -25,6 +23,8 @@ var _tab = require("../../components/tabs/tab");
 
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -84,6 +84,7 @@ const FormField = ({
     setWarning,
     setInfo
   } = (0, _react.useContext)(_tab.TabContext);
+  const marginProps = (0, _useFormSpacing.default)(rest);
   const isMounted = (0, _react.useRef)(false);
   (0, _react.useLayoutEffect)(() => {
     isMounted.current = true;
@@ -103,7 +104,6 @@ const FormField = ({
       }
     };
   }, [id, setError, setWarning, setInfo, error, warning, info]);
-  const marginProps = (0, _utils.filterStyledSystemMarginProps)(rest);
   const fieldHelp = fieldHelpContent ? /*#__PURE__*/_react.default.createElement(_fieldHelp.default, {
     labelInline: inlineLabel,
     labelWidth: labelWidth,

package/lib/__internal__/form-spacing-provider/form-spacing-context.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+export interface FormSpacingContextProps {
+    marginBottom?: string;
+}
+export declare const FormSpacingContext: React.Context<FormSpacingContextProps>;

package/lib/__internal__/form-spacing-provider/form-spacing-context.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FormSpacingContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FormSpacingContext = /*#__PURE__*/_react.default.createContext({});
+
+exports.FormSpacingContext = FormSpacingContext;

package/lib/__internal__/form-spacing-provider/form-spacing-provider.component.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import { FormSpacingContextProps } from "./form-spacing-context";
+interface FormSpacingProviderProps extends FormSpacingContextProps {
+    children: React.ReactNode;
+}
+declare const FormSpacingProvider: ({ marginBottom, children, }: FormSpacingProviderProps) => JSX.Element;
+export default FormSpacingProvider;

package/lib/__internal__/form-spacing-provider/form-spacing-provider.component.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _formSpacingContext = require("./form-spacing-context");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const FormSpacingProvider = ({
+  marginBottom,
+  children
+}) => /*#__PURE__*/_react.default.createElement(_formSpacingContext.FormSpacingContext.Provider, {
+  value: {
+    marginBottom
+  }
+}, children);
+
+FormSpacingProvider.propTypes = {
+  "children": _propTypes.default.node,
+  "marginBottom": _propTypes.default.string
+};
+var _default = FormSpacingProvider;
+exports.default = _default;

package/lib/__internal__/form-spacing-provider/index.d.ts

@@ -0,0 +1,3 @@
+export { FormSpacingContext } from "./form-spacing-context";
+export type { FormSpacingContextProps } from "./form-spacing-context";
+export { default } from "./form-spacing-provider.component";

package/lib/__internal__/form-spacing-provider/index.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "FormSpacingContext", {
+  enumerable: true,
+  get: function () {
+    return _formSpacingContext.FormSpacingContext;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _formSpacingProvider.default;
+  }
+});
+
+var _formSpacingContext = require("./form-spacing-context");
+
+var _formSpacingProvider = _interopRequireDefault(require("./form-spacing-provider.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/__internal__/form-spacing-provider/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../esm/__internal__/form-spacing-provider/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/checkbox/checkbox-group.component.js

@@ -19,6 +19,8 @@ var _utils = require("../../style/utils");
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
+
 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); }
@@ -64,7 +66,9 @@ const CheckboxGroup = props => {
       warning: !!warning,
       info: !!info
     }
-  }, children))));
+  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+    marginBottom: undefined
+  }, children)))));
 };
 
 exports.CheckboxGroup = CheckboxGroup;

package/lib/components/checkbox/checkbox.component.js

@@ -17,14 +17,14 @@ var _checkboxSvg = _interopRequireDefault(require("./checkbox-svg.component"));
 
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 
-var _utils = require("../../style/utils");
-
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _checkboxGroup = require("./checkbox-group.component");
 
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -68,15 +68,16 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
   "data-role": dataRole,
   helpAriaLabel,
   inputRef,
-  ...props
+  ...rest
 }, ref) => {
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
+  const checkboxGroupContext = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
   const {
     error: contextError,
     warning: contextWarning,
     info: contextInfo
-  } = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
+  } = checkboxGroupContext;
 
   if (!deprecateInputRefWarnTriggered && inputRef) {
     deprecateInputRefWarnTriggered = true;
@@ -111,8 +112,9 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
     labelWidth,
     tooltipPosition,
     ref: ref || inputRef,
-    ...props
+    ...rest
   };
+  const marginProps = (0, _useFormSpacing.default)(rest);
   return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     helpAriaLabel: helpAriaLabel,
     tooltipPosition: tooltipPosition
@@ -130,7 +132,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef(({
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
     size: size
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null))));
+  }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null))));
 });
 
 exports.Checkbox = Checkbox;

package/lib/components/date/date.component.js

@@ -33,6 +33,8 @@ var _useClickAwayListener = _interopRequireDefault(require("../../hooks/__intern
 
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 
+var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -324,6 +326,7 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
     return value;
   };
 
+  const marginProps = (0, _useFormSpacing.default)(rest);
   return /*#__PURE__*/_react.default.createElement(_date.default, _extends({
     ref: wrapperRef,
     role: "presentation",
@@ -332,7 +335,7 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
     "data-component": dataComponent || "date",
     "data-element": dataElement,
     "data-role": dataRole
-  }, (0, _utils2.filterStyledSystemMarginProps)(rest), {
+  }, marginProps, {
     applyDateRangeStyling: !!inputRefMap
   }), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, (0, _utils2.filterOutStyledSystemSpacingProps)(rest), {
     inputRef: inputRef,
@@ -354,7 +357,8 @@ const DateInput = /*#__PURE__*/_react.default.forwardRef(({
     autoFocus: autoFocus,
     size: size,
     disabled: disabled,
-    readOnly: readOnly
+    readOnly: readOnly,
+    m: 0
   })), /*#__PURE__*/_react.default.createElement(_datePicker.default, {
     disablePortal: disablePortal,
     inputElement: parentRef,

package/lib/components/date-range/date-range.component.js

@@ -243,14 +243,20 @@ const DateRange = ({
       inputRefMap,
       setInputRefMap: updateInputMap
     }
-  }, /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("start"), {
+  }, /*#__PURE__*/_react.default.createElement(_date.default, _extends({
+    my: 0 // prevents any form spacing being applied
+
+  }, dateProps("start"), {
     onFocus: () => handleFocus("end"),
     "data-element": "start-date",
     labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
     ,
     tooltipPosition: tooltipPosition,
     ref: startRef
-  })), /*#__PURE__*/_react.default.createElement(_date.default, _extends({}, dateProps("end"), {
+  })), /*#__PURE__*/_react.default.createElement(_date.default, _extends({
+    my: 0 // prevents any form spacing being applied
+
+  }, dateProps("end"), {
     onFocus: () => handleFocus("start"),
     "data-element": "end-date",
     labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true

package/lib/components/fieldset/fieldset.component.js

@@ -11,12 +11,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 
-var _utils = require("../../style/utils");
-
 var _fieldset = require("./fieldset.style");
 
 var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 
+var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
+
+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); }
@@ -37,16 +39,19 @@ const Fieldset = ({
     }, legend));
   };
 
+  const marginProps = (0, _useFormSpacing.default)(rest);
   return /*#__PURE__*/_react.default.createElement(_carbonProvider.NewValidationContext.Provider, {
     value: {
       validationRedesignOptIn: false
     }
   }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({}, (0, _tags.default)("fieldset", rest), rest, {
     m: 0
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
+  }, marginProps), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
     "data-component": "fieldset-style",
     inline: inline
-  }, getLegend(), children)));
+  }, getLegend(), /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+    marginBottom: undefined
+  }, children))));
 };
 
 exports.Fieldset = Fieldset;

package/lib/components/form/form.component.js

@@ -17,6 +17,10 @@ var _formSummary = _interopRequireDefault(require("./__internal__/form-summary.c
 
 var _form = require("./form.style");
 
+var _form2 = require("./form.config");
+
+var _formSpacingProvider = _interopRequireDefault(require("../../__internal__/form-spacing-provider"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
@@ -68,7 +72,9 @@ const Form = ({
     className: stickyFooter ? "sticky" : "",
     stickyFooter: stickyFooter,
     isInModal: isInModal
-  }, children), !fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+    marginBottom: _form2.formSpacing[fieldSpacing]
+  }, children)), !fullWidthButtons && renderFooter && /*#__PURE__*/_react.default.createElement(_form.StyledFormFooter, _extends({
     "data-element": "form-footer",
     className: classNames,
     ref: formFooterRef,

package/lib/components/form/form.config.d.ts

@@ -1,2 +1,12 @@
 export declare const FORM_BUTTON_ALIGNMENTS: readonly ["left", "right"];
 export declare type FormButtonAlignment = typeof FORM_BUTTON_ALIGNMENTS[number];
+export declare const formSpacing: {
+    0: string;
+    1: string;
+    2: string;
+    3: string;
+    4: string;
+    5: string;
+    6: string;
+    7: string;
+};

package/lib/components/form/form.config.js

@@ -3,6 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FORM_BUTTON_ALIGNMENTS = void 0;
+exports.formSpacing = exports.FORM_BUTTON_ALIGNMENTS = void 0;
 const FORM_BUTTON_ALIGNMENTS = ["left", "right"];
-exports.FORM_BUTTON_ALIGNMENTS = FORM_BUTTON_ALIGNMENTS;
+exports.FORM_BUTTON_ALIGNMENTS = FORM_BUTTON_ALIGNMENTS;
+const formSpacing = {
+  0: "var(--spacing000)",
+  1: "var(--spacing100)",
+  2: "var(--spacing200)",
+  3: "var(--spacing300)",
+  4: "var(--spacing400)",
+  5: "var(--spacing500)",
+  6: "var(--spacing600)",
+  7: "var(--spacing700)"
+};
+exports.formSpacing = formSpacing;

package/lib/components/form/form.style.js

@@ -11,16 +11,10 @@ var _styledSystem = require("styled-system");
 
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
 
-var _fieldset = require("../../__internal__/fieldset/fieldset.style");
-
 var _button = _interopRequireDefault(require("../button/button.style"));
 
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 
-var _fieldset2 = require("../fieldset/fieldset.style");
-
-var _inlineInputs = _interopRequireDefault(require("../inline-inputs/inline-inputs.style"));
-
 var _search = _interopRequireDefault(require("../search/search.style"));
 
 var _textarea = _interopRequireDefault(require("../textarea/textarea.style"));
@@ -86,19 +80,7 @@ const StyledFormFooter = _styledComponents.default.div`
 exports.StyledFormFooter = StyledFormFooter;
 StyledFormFooter.defaultProps = {
   theme: _base.default
-};
-
-const formBottomMargins = fieldSpacing => ({
-  0: "var(--spacing000)",
-  1: "var(--spacing100)",
-  2: "var(--spacing200)",
-  3: "var(--spacing300)",
-  4: "var(--spacing400)",
-  5: "var(--spacing500)",
-  6: "var(--spacing600)",
-  7: "var(--spacing700)"
-})[fieldSpacing]; // Accounts for height of the header of Modal parent, the height form footer and some additional spacing
-
+}; // Accounts for height of the header of Modal parent, the height form footer and some additional spacing
 
 const HEIGHT_SPACING = 216;
 const StyledForm = _styledComponents.default.form`
@@ -113,29 +95,11 @@ const StyledForm = _styledComponents.default.form`
   ${({
   fieldSpacing
 }) => (0, _styledComponents.css)`
-      &
-        ${_textarea.default},
-        ${_formField.default},
-        ${_fieldset.StyledFieldset},
-        ${_fieldset2.FieldsetStyle},
-        > ${_button.default} {
-        margin-top: 0;
-        margin-bottom: ${formBottomMargins(fieldSpacing)};
-      }
-
       ${_textarea.default}
       ${_formField.default} {
         margin-bottom: 4px;
       }
-
-      ${_inlineInputs.default} {
-        ${_formField.default} {
-          margin-bottom: 0;
-        }
-
-        margin-bottom: ${formBottomMargins(fieldSpacing)};
-      }
-    `}  
+    `}
 
   ${_search.default} ${_formField.default} {
     margin-bottom: 0px;

package/lib/components/inline-inputs/inline-inputs.component.d.ts

@@ -1,9 +1,10 @@
 import React from "react";
+import { MarginProps } from "styled-system";
 import { StyledContentContainerProps, StyledInlineInputsProps } from "./inline-inputs.style";
 interface InlineInputsContextProps {
     ariaLabelledBy?: string;
 }
-export interface InlineInputsProps extends StyledContentContainerProps, StyledInlineInputsProps {
+export interface InlineInputsProps extends MarginProps, StyledContentContainerProps, StyledInlineInputsProps {
     /** Breakpoint for adaptive label (inline label change to top aligned). Enables the adaptive behaviour when set */
     adaptiveLabelBreakpoint?: number;
     /** Children elements */
@@ -19,7 +20,7 @@ export interface InlineInputsProps extends StyledContentContainerProps, StyledIn
 }
 export declare const InlineInputsContext: React.Context<InlineInputsContextProps>;
 declare const InlineInputs: {
-    ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, }: InlineInputsProps): JSX.Element;
+    ({ adaptiveLabelBreakpoint, label, htmlFor, children, className, gutter, inputWidth, labelInline, labelWidth, required, ...rest }: InlineInputsProps): JSX.Element;
     displayName: string;
 };
 export default InlineInputs;