carbon-react 104.56.0 → 104.57.0

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

@@ -67,9 +67,9 @@ const FormField = ({
     labelId: labelId,
     align: labelAlign,
     disabled: disabled,
-    error: error,
-    warning: warning,
-    info: info,
+    error: !rest.validationRedesignOptIn && error,
+    warning: !rest.validationRedesignOptIn && warning,
+    info: !rest.validationRedesignOptIn && info,
     help: labelHelp,
     tooltipId: tooltipId,
     helpTabIndex: helpTabIndex,

package/esm/__internal__/input/input-presentation.component.js

@@ -2,6 +2,7 @@ import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import InputPresentationStyle, { StyledInputPresentationContainer } from "./input-presentation.style";
 import { InputContext, InputGroupContext } from "../input-behaviour";
+import { NewValidationContext } from "../../components/carbon-provider/carbon-provider.component";
 
 const InputPresentation = ({
   children,
@@ -21,6 +22,9 @@ const InputPresentation = ({
     onMouseEnter,
     onMouseLeave
   } = useContext(InputContext);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const {
     onMouseEnter: onGroupMouseEnter,
     onMouseLeave: onGroupMouseLeave
@@ -50,7 +54,8 @@ const InputPresentation = ({
     size: size,
     warning: warning,
     error: error,
-    info: info
+    info: info,
+    validationRedesignOptIn: validationRedesignOptIn
   }, children));
 };
 

package/esm/__internal__/input/input-presentation.style.d.ts

@@ -5,4 +5,5 @@ declare const InputPresentationStyle: import("styled-components").StyledComponen
     warning: any;
     info: any;
     disabled: any;
+    validationRedesignOptIn: any;
 }, never>;

package/esm/__internal__/input/input-presentation.style.js

@@ -70,7 +70,8 @@ function stylingForValidations({
   error,
   warning,
   info,
-  disabled
+  disabled,
+  validationRedesignOptIn
 }) {
   let validationColor;
 
@@ -81,7 +82,7 @@ function stylingForValidations({
   if (error) {
     validationColor = "var(--colorsSemanticNegative500)";
   } else if (warning) {
-    validationColor = "var(--colorsSemanticCaution500)";
+    validationColor = validationRedesignOptIn ? "var(--colorsUtilityMajor300)" : "var(--colorsSemanticCaution500)";
   } else if (info) {
     validationColor = "var(--colorsSemanticInfo500)";
   } else {

package/esm/__internal__/validation-message/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./validation-message.component";

package/esm/__internal__/validation-message/index.js

@@ -0,0 +1 @@
+export { default } from "./validation-message.component";

package/esm/__internal__/validation-message/validation-message.component.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ValidationMessageProps {
+    /** Indicate that error has occurred
+    Pass string to display hint with error */
+    error?: boolean | string;
+    /** Indicate that warning has occurred
+    Pass string to display hint with warning */
+    warning?: boolean | string;
+}
+declare const ValidationMessage: ({ error, warning }: ValidationMessageProps) => JSX.Element | null;
+export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.component.js

@@ -0,0 +1,15 @@
+import React from "react";
+import StyledValidationMessage from "./validation-message.style";
+
+const ValidationMessage = ({
+  error,
+  warning
+}) => {
+  const validation = error || warning;
+  const isStringValidation = typeof validation === "string";
+  return isStringValidation ? /*#__PURE__*/React.createElement(StyledValidationMessage, {
+    isWarning: !!(!error && warning)
+  }, validation) : null;
+};
+
+export default ValidationMessage;

package/esm/__internal__/validation-message/validation-message.style.d.ts

@@ -0,0 +1,5 @@
+interface StyledValidationMessageProps {
+    isWarning?: boolean;
+}
+declare const StyledValidationMessage: import("styled-components").StyledComponent<"p", any, StyledValidationMessageProps, never>;
+export default StyledValidationMessage;

package/esm/__internal__/validation-message/validation-message.style.js

@@ -0,0 +1,12 @@
+import styled, { css } from "styled-components";
+const StyledValidationMessage = styled.p`
+  ${({
+  isWarning
+}) => css`
+    color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
+    font-weight: ${isWarning ? "regular" : "bold"};
+    margin-top: 0px;
+    margin-bottom: 8px;
+  `}
+`;
+export default StyledValidationMessage;

package/esm/components/carbon-provider/carbon-provider.component.d.ts

@@ -1,12 +1,16 @@
+export const NewValidationContext: React.Context<{}>;
 export default CarbonProvider;
-declare function CarbonProvider({ children, theme }: {
+import React from "react";
+declare function CarbonProvider({ children, theme, validationRedesignOptIn, }: {
     children: any;
     theme?: import("../../style/themes/base").ThemeObject | undefined;
+    validationRedesignOptIn?: boolean | undefined;
 }): JSX.Element;
 declare namespace CarbonProvider {
     namespace propTypes {
         const children: PropTypes.Validator<string | number | boolean | {} | PropTypes.ReactElementLike | PropTypes.ReactNodeArray>;
         const theme: PropTypes.Requireable<object>;
+        const validationRedesignOptIn: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from "prop-types";

package/esm/components/carbon-provider/carbon-provider.component.js

@@ -1,18 +1,25 @@
-import React from "react";
+import React, { createContext } from "react";
 import PropTypes from "prop-types";
 import { ThemeProvider } from "styled-components";
 import mintTheme from "../../style/themes/mint";
 import CarbonScopedTokensProvider from "../../style/design-tokens/carbon-scoped-tokens-provider";
+export const NewValidationContext = /*#__PURE__*/createContext({});
 
 const CarbonProvider = ({
   children,
-  theme = mintTheme
+  theme = mintTheme,
+  validationRedesignOptIn = false
 }) => /*#__PURE__*/React.createElement(ThemeProvider, {
   theme: theme
-}, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, children));
+}, /*#__PURE__*/React.createElement(CarbonScopedTokensProvider, null, /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
+  value: {
+    validationRedesignOptIn
+  }
+}, children)));
 
 CarbonProvider.propTypes = {
   children: PropTypes.node.isRequired,
-  theme: PropTypes.object
+  theme: PropTypes.object,
+  validationRedesignOptIn: PropTypes.bool
 };
 export default CarbonProvider;

package/esm/components/carbon-provider/carbon-provider.d.ts

@@ -5,6 +5,7 @@ import { ThemeObject } from "../../style/themes/base";
 export interface CarbonProviderProps {
   theme?: ThemeObject;
   children: React.ReactNode;
+  validationRedesignOptIn?: boolean;
 }
 
 declare function CarbonProvider(props: CarbonProviderProps): JSX.Element;

package/esm/components/date-range/date-range.style.js

@@ -16,7 +16,7 @@ const StyledDateRange = styled.div`
   }
 
   & ${StyledDateInput}:first-child {
-    margin-right: var(--spacing150);
+    margin-right: var(--spacing300);
   }
 
   ${StyledLabelContainer} {

package/esm/components/fieldset/fieldset.component.js

@@ -7,6 +7,7 @@ import { validProps } from "../../__internal__/utils/ether";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
 import { filterStyledSystemMarginProps } from "../../style/utils";
 import { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle } from "./fieldset.style";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Fieldset = props => {
@@ -25,12 +26,16 @@ const Fieldset = props => {
     propTypes: Fieldset.propTypes,
     props
   });
-  return /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", props), safeProps, {
+  return /*#__PURE__*/React.createElement(NewValidationContext.Provider, {
+    value: {
+      validationRedesignOptIn: false
+    }
+  }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({}, tagComponent("fieldset", props), safeProps, {
     m: 0
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
     "data-component": "fieldset-style",
     inline: props.inline
-  }, legend(), props.children));
+  }, legend(), props.children)));
 };
 
 Fieldset.propTypes = {

package/esm/components/numeral-date/numeral-date-context.d.ts

@@ -0,0 +1,3 @@
+declare var _default: React.Context<{}>;
+export default _default;
+import React from "react";

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

@@ -0,0 +1,2 @@
+import React from "react";
+export default /*#__PURE__*/React.createContext({});

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

@@ -1,6 +1,6 @@
 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, { useState, useEffect, useRef } from "react";
+import React, { useContext, useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import invariant from "invariant";
@@ -8,11 +8,15 @@ import { filterStyledSystemMarginProps } from "../../style/utils";
 import Events from "../../__internal__/utils/helpers/events";
 import { StyledNumeralDate, StyledDateField } from "./numeral-date.style";
 import Textbox from "../textbox";
+import { StyledHintText } from "../textbox/textbox.style";
+import ValidationMessage from "../../__internal__/validation-message";
 import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
 import FormField from "../../__internal__/form-field";
 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";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
 
@@ -62,6 +66,9 @@ const NumeralDate = ({
   ...rest
 }) => {
   const l = useLocale();
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
   const {
     current: uniqueId
   } = useRef(id || guid());
@@ -162,8 +169,12 @@ const NumeralDate = ({
     labelSpacing: labelSpacing,
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    isRequired: required
-  }, filterStyledSystemMarginProps(rest)), /*#__PURE__*/React.createElement(StyledNumeralDate, {
+    isRequired: required,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, filterStyledSystemMarginProps(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: internalError,
+    warning: internalWarning
+  }), /*#__PURE__*/React.createElement(StyledNumeralDate, {
     name: name,
     onKeyPress: onKeyPress,
     "data-component": "numeral-date"
@@ -173,7 +184,12 @@ const NumeralDate = ({
     const validation = error || warning || info;
     const isStringValidation = typeof validation === "string";
     const hasValidationIcon = isStringValidation && validation.length;
-    return /*#__PURE__*/React.createElement(StyledDateField, {
+    return /*#__PURE__*/React.createElement(NumeralDateContext.Provider, {
+      value: {
+        disableErrorBorder: index !== 0
+      },
+      key: datePart
+    }, /*#__PURE__*/React.createElement(StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
       isMiddle: isMiddle,
@@ -196,14 +212,14 @@ const NumeralDate = ({
       info: !!info
     }, required && {
       required
-    }, isEnd && !validationOnLabel && {
+    }, isEnd && !validationRedesignOptIn && !validationOnLabel && {
       error: internalError,
       warning: internalWarning,
       info
     }, {
       size: size,
       tooltipPosition: tooltipPosition
-    })));
+    }))));
   })))));
 };
 

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

@@ -15,6 +15,9 @@ import StyledTextarea from "./textarea.style";
 import LocaleContext from "../../__internal__/i18n-context";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
+import ValidationMessage from "../../__internal__/validation-message";
 
 const getFormatNumber = (value, locale) => new Intl.NumberFormat(locale).format(value);
 
@@ -59,6 +62,12 @@ const Textarea = ({
   ...props
 }) => {
   const locale = useContext(LocaleContext);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
+
   const {
     current: id
   } = useRef(idProp || guid());
@@ -134,7 +143,7 @@ const Textarea = ({
     "data-role": dataRole,
     "data-element": dataElement
   }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(FormField, {
-    fieldHelp: fieldHelp,
+    fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,
     error: error,
     warning: warning,
@@ -143,15 +152,19 @@ const Textarea = ({
     labelId: labelId,
     disabled: disabled,
     id: id,
-    labelInline: labelInline,
-    labelAlign: labelAlign,
-    labelWidth: labelWidth,
-    labelHelp: labelHelp,
+    labelInline: computeLabelPropValues(labelInline),
+    labelAlign: computeLabelPropValues(labelAlign),
+    labelWidth: computeLabelPropValues(labelWidth),
+    labelHelp: computeLabelPropValues(labelHelp),
     labelSpacing: labelSpacing,
     isRequired: props.required,
-    useValidationIcon: validationOnLabel,
-    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint
-  }, /*#__PURE__*/React.createElement(InputPresentation, {
+    useValidationIcon: computeLabelPropValues(validationOnLabel),
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), /*#__PURE__*/React.createElement(InputPresentation, {
     size: size,
     disabled: disabled,
     readOnly: readOnly,
@@ -159,10 +172,12 @@ const Textarea = ({
     error: error,
     warning: warning,
     info: info
-  }, /*#__PURE__*/React.createElement(Input, _extends({
+  }, validationRedesignOptIn && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(Input, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,
@@ -185,8 +200,8 @@ const Textarea = ({
     error: error,
     warning: warning,
     info: info,
-    validationIconId: validationIconId,
-    useValidationIcon: !validationOnLabel
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }))), characterCount())));
 };
 

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

@@ -1,6 +1,6 @@
 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 from "react";
+import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import styledSystemPropTypes from "@styled-system/prop-types";
 import { filterStyledSystemMarginProps } from "../../style/utils";
@@ -13,6 +13,10 @@ import StyledPrefix from "./__internal__/prefix.style";
 import { TooltipProvider } from "../../__internal__/tooltip-provider";
 import useCharacterCount from "../../hooks/__internal__/useCharacterCount";
 import useInputAccessibility from "../../hooks/__internal__/useInputAccessibility/useInputAccessibility";
+import { ErrorBorder, StyledHintText } from "./textbox.style";
+import ValidationMessage from "../../__internal__/validation-message";
+import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
+import NumeralDateContext from "../numeral-date/numeral-date-context";
 const marginPropTypes = filterStyledSystemMarginProps(styledSystemPropTypes.space);
 
 const Textbox = ({
@@ -70,6 +74,15 @@ const Textbox = ({
   ...props
 }) => {
   const [maxLength, characterCount] = useCharacterCount(value, characterLimit, warnOverLimit, enforceCharacterLimit);
+  const {
+    validationRedesignOptIn
+  } = useContext(NewValidationContext);
+  const {
+    disableErrorBorder
+  } = useContext(NumeralDateContext);
+
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
+
   const {
     labelId: internalLabelId,
     validationIconId,
@@ -90,29 +103,35 @@ const Textbox = ({
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/React.createElement(InputBehaviour, null, /*#__PURE__*/React.createElement(FormField, _extends({
     disabled: disabled,
-    fieldHelp: fieldHelp,
     fieldHelpId: fieldHelpId,
+    fieldHelp: computeLabelPropValues(fieldHelp),
     error: error,
     warning: warning,
     info: info,
     label: label,
     labelId: labelId,
-    labelAlign: labelAlign,
-    labelHelp: labelHelp,
-    labelInline: labelInline,
+    labelAlign: computeLabelPropValues(labelAlign),
+    labelHelp: computeLabelPropValues(labelHelp),
+    labelInline: computeLabelPropValues(labelInline),
     labelSpacing: labelSpacing,
-    labelWidth: labelWidth,
+    labelWidth: computeLabelPropValues(labelWidth),
     id: id,
-    reverse: reverse,
+    reverse: computeLabelPropValues(reverse),
     isOptional: isOptional,
-    useValidationIcon: validationOnLabel,
+    useValidationIcon: computeLabelPropValues(validationOnLabel),
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
     "data-component": dataComponent,
     "data-role": dataRole,
     "data-element": dataElement,
-    validationIconId: validationIconId
-  }, filterStyledSystemMarginProps(props)), /*#__PURE__*/React.createElement(InputPresentation, {
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationRedesignOptIn: validationRedesignOptIn,
+    size: size,
+    readOnly: readOnly
+  }, filterStyledSystemMarginProps(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
+    error: error,
+    warning: warning
+  }), /*#__PURE__*/React.createElement(InputPresentation, {
     align: align,
     disabled: disabled,
     readOnly: readOnly,
@@ -122,15 +141,17 @@ const Textbox = ({
     info: info,
     inputWidth: inputWidth || 100 - labelWidth,
     positionedChildren: positionedChildren
-  }, leftChildren, prefix ? /*#__PURE__*/React.createElement(StyledPrefix, {
+  }, leftChildren, prefix && /*#__PURE__*/React.createElement(StyledPrefix, {
     "data-element": "textbox-prefix"
-  }, prefix) : null, /*#__PURE__*/React.createElement(Input, _extends({}, required && {
+  }, prefix), validationRedesignOptIn && !disableErrorBorder && (error || warning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/React.createElement(Input, _extends({}, required && {
     required
   }, {
     align: align,
     "aria-invalid": !!error,
     "aria-labelledby": labelId,
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
     autoFocus: autoFocus,
     deferTimeout: deferTimeout,
     disabled: disabled,
@@ -158,9 +179,9 @@ const Textbox = ({
     onMouseDown: iconOnMouseDown || onMouseDown,
     readOnly: readOnly,
     size: size,
-    useValidationIcon: !validationOnLabel,
+    useValidationIcon: !(validationRedesignOptIn || validationOnLabel),
     warning: warning,
-    validationIconId: validationIconId
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId
   }))), characterCount));
 };
 

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

@@ -20,7 +20,7 @@ export interface CommonTextboxProps
   "data-role"?: string;
   /** Breakpoint for adaptive label (inline labels change to top aligned). Enables the adaptive behaviour when set */
   adaptiveLabelBreakpoint?: number;
-  /** Integer to determine a timeout for the defered callback */
+  /** Integer to determine a timeout for the deferred callback */
   deferTimeout?: number;
   /** If true, the component will be disabled */
   disabled?: boolean;

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

@@ -0,0 +1,2 @@
+export const StyledHintText: import("styled-components").StyledComponent<"p", any, {}, never>;
+export const ErrorBorder: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,33 @@
+import styled, { css } from "styled-components";
+import PropTypes from "prop-types";
+const ErrorBorder = styled.span`
+  ${({
+  warning
+}) => css`
+      position: absolute;
+      z-index: 6;
+      width: 2px;
+      height: calc(100% + var(--spacing300));
+      background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
+      left: -12px;
+      bottom: 0px;
+    `}
+`;
+const StyledHintText = styled.p`
+  margin-top: 0px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+`;
+StyledHintText.defaultProps = {
+  size: "medium"
+};
+ErrorBorder.propTypes = {
+  warning: PropTypes.bool,
+  size: PropTypes.string
+};
+ErrorBorder.defaultProps = {
+  warning: false,
+  size: "medium"
+};
+export { StyledHintText, ErrorBorder };

package/esm/style/themes/base/base-theme.config.d.ts

@@ -14,9 +14,11 @@ declare function _default(palette: any): {
         focus: any;
         info: any;
         warning: any;
+        warningText: any;
         destructive: {
             hover: any;
         };
+        placeholder: any;
     };
     disabled: {
         background: any;

package/esm/style/themes/base/base-theme.config.js

@@ -19,9 +19,11 @@ export default (palette => {
       focus: palette.gold,
       info: palette.productBlueShade(3),
       warning: palette.carrotOrange,
+      warningText: palette.carrotOrangeShade(20),
       destructive: {
         hover: palette.errorRedShade(20)
-      }
+      },
+      placeholder: palette.blackOpacity(0.55)
     },
     disabled: {
       background: palette.slateTint(90)

package/esm/style/themes/base/index.d.ts

@@ -27,6 +27,8 @@ export interface Colors {
   destructive: {
     hover: string;
   };
+  warningText: string;
+  placeholder: string;
 }
 
 export interface ThemeObject {

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

@@ -90,9 +90,9 @@ const FormField = ({
     labelId: labelId,
     align: labelAlign,
     disabled: disabled,
-    error: error,
-    warning: warning,
-    info: info,
+    error: !rest.validationRedesignOptIn && error,
+    warning: !rest.validationRedesignOptIn && warning,
+    info: !rest.validationRedesignOptIn && info,
     help: labelHelp,
     tooltipId: tooltipId,
     helpTabIndex: helpTabIndex,

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

@@ -13,6 +13,8 @@ var _inputPresentation = _interopRequireWildcard(require("./input-presentation.s
 
 var _inputBehaviour = require("../input-behaviour");
 
+var _carbonProvider = require("../../components/carbon-provider/carbon-provider.component");
+
 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; }
@@ -37,6 +39,9 @@ const InputPresentation = ({
     onMouseEnter,
     onMouseLeave
   } = (0, _react.useContext)(_inputBehaviour.InputContext);
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const {
     onMouseEnter: onGroupMouseEnter,
     onMouseLeave: onGroupMouseLeave
@@ -66,7 +71,8 @@ const InputPresentation = ({
     size: size,
     warning: warning,
     error: error,
-    info: info
+    info: info,
+    validationRedesignOptIn: validationRedesignOptIn
   }, children));
 };
 

package/lib/__internal__/input/input-presentation.style.d.ts

@@ -5,4 +5,5 @@ declare const InputPresentationStyle: import("styled-components").StyledComponen
     warning: any;
     info: any;
     disabled: any;
+    validationRedesignOptIn: any;
 }, never>;