carbon-react 104.56.0 → 104.58.1

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/__internal__/validations/validation-icon.component.js

@@ -57,10 +57,7 @@ const ValidationIcon = ({
   }
 
   return /*#__PURE__*/React.createElement(ValidationIconStyle, _extends({
-    id: iconId,
     validationType: validationType,
-    role: "tooltip",
-    "aria-label": validationMessage,
     onClick: onClick,
     onMouseOver: () => setTriggeredByIcon(true),
     onMouseLeave: () => setTriggeredByIcon(false),
@@ -84,8 +81,9 @@ const ValidationIcon = ({
     tooltipFlipOverrides: isPartOfInput && !tooltipFlipOverrides ? ["top", "bottom"] : tooltipFlipOverrides,
     isPartOfInput: isPartOfInput,
     inputSize: size,
-    "aria-hidden": "true",
-    focusable: false
+    id: iconId,
+    ariaLabel: validationMessage,
+    focusable: tabIndex !== -1
   }));
 };
 

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/icon/icon.component.js

@@ -28,6 +28,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
   tooltipFlipOverrides,
   tooltipId,
   tabIndex,
+  id,
   isPartOfInput,
   inputSize,
   role,
@@ -87,6 +88,7 @@ const Icon = /*#__PURE__*/React.forwardRef(({
     "aria-hidden": ariaHidden,
     ref: ref,
     key: "icon",
+    id: id,
     className: className || null,
     "data-element": iconType()
   }, tagComponent("icon", rest), styleProps, {
@@ -199,7 +201,10 @@ Icon.propTypes = { ...marginPropTypes,
   tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 
   /** @ignore @private */
-  focusable: PropTypes.bool
+  focusable: PropTypes.bool,
+
+  /** Id passed to the icon. */
+  id: PropTypes.string
 };
 Icon.defaultProps = {
   bgSize: "small",

package/esm/components/icon/icon.d.ts

@@ -237,6 +237,8 @@ export interface IconProps extends MarginProps {
   tooltipFlipOverrides?: TooltipPositions[];
   /** Id passed to the tooltip container, used for accessibility purposes */
   tooltipId?: string;
+  /** Id passed to the icon. */
+  id?: string;
 }
 
 declare function Icon(

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/select/__internal__/select-text/select-text.component.d.ts

@@ -1,7 +1,7 @@
 export default SelectText;
 declare function SelectText({ disabled, formattedValue, onClick, onKeyDown, onFocus, onBlur, onMouseDown, placeholder, readOnly, textId, transparent, }: {
     disabled: any;
-    formattedValue: any;
+    formattedValue?: string | undefined;
     onClick: any;
     onKeyDown: any;
     onFocus: any;

package/esm/components/select/__internal__/select-text/select-text.component.js

@@ -1,12 +1,11 @@
 import React, { useContext } from "react";
 import PropTypes from "prop-types";
 import StyledSelectText from "./select-text.style";
-import useLocale from "../../../../hooks/__internal__/useLocale";
 import { InputContext } from "../../../../__internal__/input-behaviour";
 
 const SelectText = ({
   disabled,
-  formattedValue,
+  formattedValue = "",
   onClick,
   onKeyDown,
   onFocus,
@@ -17,10 +16,8 @@ const SelectText = ({
   textId,
   transparent
 }) => {
-  const l = useLocale();
   const inputContext = useContext(InputContext);
   const hasPlaceholder = !disabled && !readOnly && !formattedValue;
-  const placeholderText = hasPlaceholder ? placeholder || l.select.placeholder() : "";
 
   function handleFocus(event) {
     inputContext.onFocus(event);
@@ -53,7 +50,7 @@ const SelectText = ({
     role: "button",
     tabIndex: "-1",
     transparent: transparent
-  }, formattedValue || placeholderText);
+  }, hasPlaceholder ? placeholder : formattedValue);
 };
 
 SelectText.propTypes = {

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

@@ -119,7 +119,6 @@ const SelectTextbox = ({
 
   function getTextboxProps() {
     return {
-      placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined,
       disabled,
       readOnly,
       required,
@@ -147,14 +146,11 @@ const SelectTextbox = ({
   }
 
   function renderSelectText() {
-    if (hasTextCursor) {
-      return null;
-    }
-
     return /*#__PURE__*/React.createElement(SelectText, _extends({
       textId: textId.current,
       transparent: transparent,
-      onKeyDown: handleSelectTextKeydown
+      onKeyDown: handleSelectTextKeydown,
+      placeholder: placeholder || l.select.placeholder()
     }, getTextboxProps()));
   }
 
@@ -174,8 +170,9 @@ const SelectTextbox = ({
     autoComplete: "off",
     size: size,
     onChange: onChange,
-    value: selectedValue
-  }, getInputAriaAttributes(), getTextboxProps()), renderSelectText());
+    value: selectedValue,
+    placeholder: hasTextCursor ? placeholder || l.select.placeholder() : undefined
+  }, getInputAriaAttributes(), getTextboxProps()), !hasTextCursor && renderSelectText());
 };
 
 const formInputPropTypes = {

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;