carbon-react 119.6.4 → 119.7.0

package/esm/__internal__/fieldset/fieldset.component.js

@@ -1,8 +1,9 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import { StyledFieldset, StyledLegend, StyledLegendContent } from "./fieldset.style";
 import ValidationIcon from "../validations/validation-icon.component";
+import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
 import { InputGroupBehaviour, InputGroupContext } from "../input-behaviour";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 const Fieldset = _ref => {
@@ -20,6 +21,9 @@ const Fieldset = _ref => {
     blockGroupBehaviour,
     ...rest
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const marginProps = useFormSpacing(rest);
   return /*#__PURE__*/React.createElement(InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
@@ -39,7 +43,7 @@ const Fieldset = _ref => {
       rightPadding: legendSpacing
     }, /*#__PURE__*/React.createElement(StyledLegendContent, {
       isRequired: isRequired
-    }, legend, /*#__PURE__*/React.createElement(ValidationIcon, {
+    }, legend, !validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationIcon, {
       error: error,
       warning: warning,
       info: info,

package/esm/components/checkbox/checkbox.component.js

@@ -9,6 +9,7 @@ import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import { CheckboxGroupContext } from "./checkbox-group.component";
 import Logger from "../../__internal__/utils/logger";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 let deprecateInputRefWarnTriggered = false;
 let deprecateUncontrolledWarnTriggered = false;
 const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
@@ -47,6 +48,9 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     inputRef,
     ...rest
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const largeScreen = useIsAboveBreakpoint(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
   const checkboxGroupContext = useContext(CheckboxGroupContext);
@@ -110,7 +114,8 @@ const Checkbox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     info: contextInfo || info,
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
-    size: size
+    size: size,
+    applyNewValidation: validationRedesignOptIn
   }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(CheckboxSvg, null))));
 });
 Checkbox.propTypes = {

package/esm/components/checkbox/checkbox.style.d.ts

@@ -8,6 +8,7 @@ export interface StyledCheckboxProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     reverse?: boolean;
     adaptiveSpacingSmallScreen?: boolean;
+    applyNewValidation?: boolean;
 }
 declare const StyledCheckbox: import("styled-components").StyledComponent<"div", any, StyledCheckboxProps, never>;
 export default StyledCheckbox;

package/esm/components/checkbox/checkbox.style.js

@@ -20,7 +20,8 @@ const StyledCheckbox = styled.div`
     inputWidth,
     reverse,
     size,
-    adaptiveSpacingSmallScreen
+    adaptiveSpacingSmallScreen,
+    applyNewValidation
   } = _ref;
   return css`
     ${adaptiveSpacingSmallScreen && "margin-left: 0;"}
@@ -41,6 +42,8 @@ const StyledCheckbox = styled.div`
         ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
         ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
         ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
+
+        ${warning && applyNewValidation && `border: 1px solid var(--colorsUtilityMajor300);`}
       `}
     }
 

package/esm/components/radio-button/radio-button-group.component.d.ts

@@ -14,6 +14,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     /** The content for the RadioGroup Legend */
     legend?: string;
+    /** The content for the hint text of the RadioGroup Legend */
+    legendHelp?: string;
     /** Text alignment of legend when inline */
     legendAlign?: "left" | "right";
     /** When true, legend is placed in line with the radiobuttons */

package/esm/components/radio-button/radio-button-group.component.js

@@ -1,20 +1,25 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import Fieldset from "../../__internal__/fieldset";
-import RadioButtonGroupStyle from "./radio-button-group.style";
+import RadioButtonGroupStyle, { StyledHintText } from "./radio-button-group.style";
 import RadioButtonMapper from "../../__internal__/radio-button-mapper/radio-button-mapper.component";
 import useIsAboveBreakpoint from "../../hooks/__internal__/useIsAboveBreakpoint";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import ValidationMessage from "../../__internal__/validation-message/validation-message.component";
+import Box from "../../components/box";
+import { ErrorBorder } from "../../components/textbox/textbox.style";
 let deprecateUncontrolledWarnTriggered = false;
 export const RadioButtonGroup = props => {
   const {
     children,
     name,
     legend,
+    legendHelp,
     error,
     warning,
     info,
@@ -32,6 +37,9 @@ export const RadioButtonGroup = props => {
     required,
     tooltipPosition
   } = props;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     Logger.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -47,7 +55,51 @@ export const RadioButtonGroup = props => {
   if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
     marginLeft = undefined;
   }
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/React.createElement(Fieldset, _extends({
+    legend: legend,
+    error: error,
+    warning: warning,
+    info: info,
+    inline: inlineLegend,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
+    isRequired: required
+  }, tagComponent("radiogroup", props), marginProps, {
+    ml: marginLeft,
+    blockGroupBehaviour: !(error || warning)
+  }), legendHelp && /*#__PURE__*/React.createElement(StyledHintText, null, legendHelp), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    inline: inline,
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(RadioButtonGroupStyle, {
+    "data-component": "radio-button-group",
+    role: "radiogroup",
+    inline: inline,
+    legendInline: inlineLegend
+  }, /*#__PURE__*/React.createElement(RadioButtonMapper, {
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    value: value
+  }, React.Children.map(children, child => {
+    if (! /*#__PURE__*/React.isValidElement(child)) {
+      return child;
+    }
+    return /*#__PURE__*/React.cloneElement(child, {
+      inline,
+      labelSpacing,
+      error: !!error,
+      warning: !!warning,
+      info: !!info,
+      required,
+      ...child.props
+    });
+  }))))) : /*#__PURE__*/React.createElement(TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(Fieldset, _extends({
     legend: legend,
@@ -85,7 +137,7 @@ export const RadioButtonGroup = props => {
       required,
       ...child.props
     });
-  })))));
+  }))))));
 };
 RadioButtonGroup.displayName = "RadioButtonGroup";
 export default RadioButtonGroup;

package/esm/components/radio-button/radio-button-group.style.d.ts

@@ -1,3 +1,4 @@
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const RadioButtonGroupStyle: import("styled-components").StyledComponent<"div", any, {
     inline?: boolean | undefined;
     legendInline?: boolean | undefined;

package/esm/components/radio-button/radio-button-group.style.js

@@ -1,4 +1,10 @@
 import styled, { css } from "styled-components";
+export const StyledHintText = styled.div`
+  margin-top: -4px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+`;
 const RadioButtonGroupStyle = styled.div`
   ${_ref => {
   let {

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

@@ -1,5 +1,5 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : 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, { useCallback } from "react";
+import React, { useCallback, useContext } from "react";
 import PropTypes from "prop-types";
 import invariant from "invariant";
 import RadioButtonStyle from "./radio-button.style";
@@ -8,6 +8,7 @@ import RadioButtonSvg from "./radio-button-svg.component";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import Logger from "../../__internal__/utils/logger";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 let deprecateInputRefWarnTriggered = false;
 const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
@@ -43,6 +44,9 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     inputRef,
     ...props
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const marginProps = filterStyledSystemMarginProps(props);
   const handleChange = useCallback(event => {
     /* istanbul ignore else */
@@ -57,17 +61,24 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     deprecateInputRefWarnTriggered = true;
     Logger.deprecate("The `inputRef` prop in `RadioButton` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
-  const commonProps = {
+  const validationProps = {
     disabled,
-    fieldHelpInline,
     inputWidth,
-    labelSpacing,
     error,
     warning,
     info
   };
+  const commonProps = {
+    ...validationProps,
+    fieldHelpInline,
+    labelSpacing
+  };
   const inputProps = {
-    ...commonProps,
+    ...(validationRedesignOptIn ? {
+      ...validationProps
+    } : {
+      ...commonProps
+    }),
     autoFocus,
     checked,
     fieldHelp,
@@ -94,17 +105,24 @@ const RadioButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ...props
   };
   !!props.children ? process.env.NODE_ENV !== "production" ? invariant(false, "This component is meant to be used as a self-closing tag. " + "You should probably use the label prop instead.") : invariant(false) : void 0;
-  return /*#__PURE__*/React.createElement(TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/React.createElement(RadioButtonStyle, _extends({
+  const componentToRender = /*#__PURE__*/React.createElement(RadioButtonStyle, _extends({
+    applyNewValidation: validationRedesignOptIn,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
     inline: inline,
     reverse: reverse,
     size: size
-  }, commonProps, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null))));
+  }, validationRedesignOptIn ? {
+    ...validationProps
+  } : {
+    ...commonProps,
+    fieldHelp
+  }, marginProps), /*#__PURE__*/React.createElement(CheckableInput, inputProps, /*#__PURE__*/React.createElement(RadioButtonSvg, null)));
+  return /*#__PURE__*/React.createElement(React.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/React.createElement(TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
+    tooltipPosition: tooltipPosition
+  }, componentToRender));
 });
 RadioButton.propTypes = {
   "about": PropTypes.string,

package/esm/components/textbox/textbox.style.d.ts

@@ -1,5 +1,6 @@
 declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     warning: boolean;
+    inline?: boolean | undefined;
 }, never>;
 declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/esm/components/textbox/textbox.style.js

@@ -2,7 +2,8 @@ import styled, { css } from "styled-components";
 const ErrorBorder = styled.span`
   ${_ref => {
   let {
-    warning
+    warning,
+    inline
   } = _ref;
   return css`
       position: absolute;
@@ -10,7 +11,7 @@ const ErrorBorder = styled.span`
       width: 2px;
       background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
       left: -12px;
-      bottom: 0px;
+      bottom: ${inline ? "10px" : "0px"};
       top: 0px;
     `;
 }}

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

@@ -4,13 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _fieldset = require("./fieldset.style");
 var _validationIcon = _interopRequireDefault(require("../validations/validation-icon.component"));
+var _carbonProvider = require("../../components/carbon-provider/carbon-provider.component");
 var _inputBehaviour = require("../input-behaviour");
 var _useFormSpacing = _interopRequireDefault(require("../../hooks/__internal__/useFormSpacing"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ? Object.assign.bind() : 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 Fieldset = _ref => {
   let {
@@ -27,6 +30,9 @@ const Fieldset = _ref => {
     blockGroupBehaviour,
     ...rest
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const marginProps = (0, _useFormSpacing.default)(rest);
   return /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputGroupBehaviour, {
     blockGroupBehaviour: blockGroupBehaviour
@@ -46,7 +52,7 @@ const Fieldset = _ref => {
       rightPadding: legendSpacing
     }, /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegendContent, {
       isRequired: isRequired
-    }, legend, /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
+    }, legend, !validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationIcon.default, {
       error: error,
       warning: warning,
       info: info,

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

@@ -14,6 +14,7 @@ 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"));
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -56,6 +57,9 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inputRef,
     ...rest
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const largeScreen = (0, _useIsAboveBreakpoint.default)(adaptiveSpacingBreakpoint);
   const adaptiveSpacingSmallScreen = !!(adaptiveSpacingBreakpoint && !largeScreen);
   const checkboxGroupContext = (0, _react.useContext)(_checkboxGroup.CheckboxGroupContext);
@@ -119,7 +123,8 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     info: contextInfo || info,
     fieldHelpInline: fieldHelpInline,
     reverse: reverse,
-    size: size
+    size: size,
+    applyNewValidation: validationRedesignOptIn
   }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_checkboxSvg.default, null))));
 });
 exports.Checkbox = Checkbox;

package/lib/components/checkbox/checkbox.style.d.ts

@@ -8,6 +8,7 @@ export interface StyledCheckboxProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     reverse?: boolean;
     adaptiveSpacingSmallScreen?: boolean;
+    applyNewValidation?: boolean;
 }
 declare const StyledCheckbox: import("styled-components").StyledComponent<"div", any, StyledCheckboxProps, never>;
 export default StyledCheckbox;

package/lib/components/checkbox/checkbox.style.js

@@ -29,7 +29,8 @@ const StyledCheckbox = _styledComponents.default.div`
     inputWidth,
     reverse,
     size,
-    adaptiveSpacingSmallScreen
+    adaptiveSpacingSmallScreen,
+    applyNewValidation
   } = _ref;
   return (0, _styledComponents.css)`
     ${adaptiveSpacingSmallScreen && "margin-left: 0;"}
@@ -50,6 +51,8 @@ const StyledCheckbox = _styledComponents.default.div`
         ${info && `border: 1px solid var(--colorsSemanticInfo500);`}
         ${warning && `border: 1px solid var(--colorsSemanticCaution500);`}
         ${error && `border: 2px solid var(--colorsSemanticNegative500);`}
+
+        ${warning && applyNewValidation && `border: 1px solid var(--colorsUtilityMajor300);`}
       `}
     }
 

package/lib/components/radio-button/radio-button-group.component.d.ts

@@ -14,6 +14,8 @@ export interface RadioButtonGroupProps extends ValidationProps, MarginProps {
     labelSpacing?: 1 | 2;
     /** The content for the RadioGroup Legend */
     legend?: string;
+    /** The content for the hint text of the RadioGroup Legend */
+    legendHelp?: string;
     /** Text alignment of legend when inline */
     legendAlign?: "left" | "right";
     /** When true, legend is placed in line with the radiobuttons */

package/lib/components/radio-button/radio-button-group.component.js

@@ -4,17 +4,23 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.RadioButtonGroup = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags/tags"));
 var _fieldset = _interopRequireDefault(require("../../__internal__/fieldset"));
-var _radioButtonGroup = _interopRequireDefault(require("./radio-button-group.style"));
+var _radioButtonGroup = _interopRequireWildcard(require("./radio-button-group.style"));
 var _radioButtonMapper = _interopRequireDefault(require("../../__internal__/radio-button-mapper/radio-button-mapper.component"));
 var _useIsAboveBreakpoint = _interopRequireDefault(require("../../hooks/__internal__/useIsAboveBreakpoint"));
 var _utils = require("../../style/utils");
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message/validation-message.component"));
+var _box = _interopRequireDefault(require("../../components/box"));
+var _textbox = require("../../components/textbox/textbox.style");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 ? Object.assign.bind() : 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); }
 let deprecateUncontrolledWarnTriggered = false;
 const RadioButtonGroup = props => {
@@ -22,6 +28,7 @@ const RadioButtonGroup = props => {
     children,
     name,
     legend,
+    legendHelp,
     error,
     warning,
     info,
@@ -39,6 +46,9 @@ const RadioButtonGroup = props => {
     required,
     tooltipPosition
   } = props;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   if (!deprecateUncontrolledWarnTriggered && !onChange) {
     deprecateUncontrolledWarnTriggered = true;
     _logger.default.deprecate("Uncontrolled behaviour in `Radio Button` is deprecated and support will soon be removed. Please make sure all your inputs are controlled.");
@@ -54,7 +64,51 @@ const RadioButtonGroup = props => {
   if (adaptiveSpacingBreakpoint && !isAboveSpacingBreakpoint) {
     marginLeft = undefined;
   }
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
+    legend: legend,
+    error: error,
+    warning: warning,
+    info: info,
+    inline: inlineLegend,
+    legendWidth: legendWidth,
+    legendAlign: legendAlign,
+    legendSpacing: legendSpacing,
+    isRequired: required
+  }, (0, _tags.default)("radiogroup", props), marginProps, {
+    ml: marginLeft,
+    blockGroupBehaviour: !(error || warning)
+  }), legendHelp && /*#__PURE__*/_react.default.createElement(_radioButtonGroup.StyledHintText, null, legendHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    warning: warning
+  }), (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    inline: inline,
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/_react.default.createElement(_radioButtonGroup.default, {
+    "data-component": "radio-button-group",
+    role: "radiogroup",
+    inline: inline,
+    legendInline: inlineLegend
+  }, /*#__PURE__*/_react.default.createElement(_radioButtonMapper.default, {
+    name: name,
+    onBlur: onBlur,
+    onChange: onChange,
+    value: value
+  }, _react.default.Children.map(children, child => {
+    if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+      return child;
+    }
+    return /*#__PURE__*/_react.default.cloneElement(child, {
+      inline,
+      labelSpacing,
+      error: !!error,
+      warning: !!warning,
+      info: !!info,
+      required,
+      ...child.props
+    });
+  }))))) : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_fieldset.default, _extends({
     legend: legend,
@@ -92,7 +146,7 @@ const RadioButtonGroup = props => {
       required,
       ...child.props
     });
-  })))));
+  }))))));
 };
 exports.RadioButtonGroup = RadioButtonGroup;
 RadioButtonGroup.displayName = "RadioButtonGroup";

package/lib/components/radio-button/radio-button-group.style.d.ts

@@ -1,3 +1,4 @@
+export declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;
 declare const RadioButtonGroupStyle: import("styled-components").StyledComponent<"div", any, {
     inline?: boolean | undefined;
     legendInline?: boolean | undefined;

package/lib/components/radio-button/radio-button-group.style.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.StyledHintText = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
+const StyledHintText = _styledComponents.default.div`
+  margin-top: -4px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+`;
+exports.StyledHintText = StyledHintText;
 const RadioButtonGroupStyle = _styledComponents.default.div`
   ${_ref => {
   let {

package/lib/components/radio-button/radio-button.component.js

@@ -13,6 +13,7 @@ var _radioButtonSvg = _interopRequireDefault(require("./radio-button-svg.compone
 var _utils = require("../../style/utils");
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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; }
@@ -52,6 +53,9 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inputRef,
     ...props
   } = _ref;
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const marginProps = (0, _utils.filterStyledSystemMarginProps)(props);
   const handleChange = (0, _react.useCallback)(event => {
     /* istanbul ignore else */
@@ -66,17 +70,24 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     deprecateInputRefWarnTriggered = true;
     _logger.default.deprecate("The `inputRef` prop in `RadioButton` component is deprecated and will soon be removed. Please use `ref` instead.");
   }
-  const commonProps = {
+  const validationProps = {
     disabled,
-    fieldHelpInline,
     inputWidth,
-    labelSpacing,
     error,
     warning,
     info
   };
+  const commonProps = {
+    ...validationProps,
+    fieldHelpInline,
+    labelSpacing
+  };
   const inputProps = {
-    ...commonProps,
+    ...(validationRedesignOptIn ? {
+      ...validationProps
+    } : {
+      ...commonProps
+    }),
     autoFocus,
     checked,
     fieldHelp,
@@ -103,17 +114,24 @@ const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ...props
   };
   !!props.children ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, "This component is meant to be used as a self-closing tag. " + "You should probably use the label prop instead.") : (0, _invariant.default)(false) : void 0;
-  return /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
-    helpAriaLabel: helpAriaLabel,
-    tooltipPosition: tooltipPosition
-  }, /*#__PURE__*/_react.default.createElement(_radioButton.default, _extends({
+  const componentToRender = /*#__PURE__*/_react.default.createElement(_radioButton.default, _extends({
+    applyNewValidation: validationRedesignOptIn,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
     inline: inline,
     reverse: reverse,
     size: size
-  }, commonProps, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_radioButtonSvg.default, null))));
+  }, validationRedesignOptIn ? {
+    ...validationProps
+  } : {
+    ...commonProps,
+    fieldHelp
+  }, marginProps), /*#__PURE__*/_react.default.createElement(_checkableInput.default, inputProps, /*#__PURE__*/_react.default.createElement(_radioButtonSvg.default, null)));
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, validationRedesignOptIn ? componentToRender : /*#__PURE__*/_react.default.createElement(_tooltipProvider.TooltipProvider, {
+    helpAriaLabel: helpAriaLabel,
+    tooltipPosition: tooltipPosition
+  }, componentToRender));
 });
 exports.RadioButton = RadioButton;
 RadioButton.propTypes = {

package/lib/components/textbox/textbox.style.d.ts

@@ -1,5 +1,6 @@
 declare const ErrorBorder: import("styled-components").StyledComponent<"span", any, {
     warning: boolean;
+    inline?: boolean | undefined;
 }, never>;
 declare const StyledInputHint: import("styled-components").StyledComponent<"p", any, {}, never>;
 declare const StyledHintText: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/textbox/textbox.style.js

@@ -10,7 +10,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 const ErrorBorder = _styledComponents.default.span`
   ${_ref => {
   let {
-    warning
+    warning,
+    inline
   } = _ref;
   return (0, _styledComponents.css)`
       position: absolute;
@@ -18,7 +19,7 @@ const ErrorBorder = _styledComponents.default.span`
       width: 2px;
       background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
       left: -12px;
-      bottom: 0px;
+      bottom: ${inline ? "10px" : "0px"};
       top: 0px;
     `;
 }}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "119.6.4",
+  "version": "119.7.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",