carbon-react 104.55.0 → 104.58.0

package/lib/components/textarea/textarea.component.js

@@ -35,6 +35,12 @@ var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility"));
 
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+
+var _textbox = require("../textbox/textbox.style");
+
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
+
 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; }
@@ -86,6 +92,12 @@ const Textarea = ({
   ...props
 }) => {
   const locale = (0, _react.useContext)(_i18nContext.default);
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
+
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
+
   const {
     current: id
   } = (0, _react.useRef)(idProp || (0, _guid.default)());
@@ -161,7 +173,7 @@ const Textarea = ({
     "data-role": dataRole,
     "data-element": dataElement
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_formField.default, {
-    fieldHelp: fieldHelp,
+    fieldHelp: computeLabelPropValues(fieldHelp),
     fieldHelpId: fieldHelpId,
     error: error,
     warning: warning,
@@ -170,15 +182,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.default.createElement(_input.InputPresentation, {
+    useValidationIcon: computeLabelPropValues(validationOnLabel),
+    adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    warning: warning
+  }), /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     size: size,
     disabled: disabled,
     readOnly: readOnly,
@@ -186,10 +202,12 @@ const Textarea = ({
     error: error,
     warning: warning,
     info: info
-  }, /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
+  }, validationRedesignOptIn && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/_react.default.createElement(_input2.default, _extends({
     "aria-invalid": !!error,
     "aria-labelledby": ariaLabelledBy,
-    "aria-describedby": ariaDescribedBy,
+    "aria-describedby": validationRedesignOptIn ? undefined : ariaDescribedBy,
     autoFocus: autoFocus,
     name: name,
     value: value,
@@ -212,8 +230,8 @@ const Textarea = ({
     error: error,
     warning: warning,
     info: info,
-    validationIconId: validationIconId,
-    useValidationIcon: !validationOnLabel
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    useValidationIcon: !(validationRedesignOptIn || validationOnLabel)
   }))), characterCount())));
 };
 

package/lib/components/textbox/textbox.component.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.OriginalTextbox = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -31,8 +31,20 @@ var _useCharacterCount = _interopRequireDefault(require("../../hooks/__internal_
 
 var _useInputAccessibility = _interopRequireDefault(require("../../hooks/__internal__/useInputAccessibility/useInputAccessibility"));
 
+var _textbox = require("./textbox.style");
+
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
+
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+
+var _numeralDateContext = _interopRequireDefault(require("../numeral-date/numeral-date-context"));
+
 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; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
@@ -92,6 +104,15 @@ const Textbox = ({
   ...props
 }) => {
   const [maxLength, characterCount] = (0, _useCharacterCount.default)(value, characterLimit, warnOverLimit, enforceCharacterLimit);
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
+  const {
+    disableErrorBorder
+  } = (0, _react.useContext)(_numeralDateContext.default);
+
+  const computeLabelPropValues = prop => validationRedesignOptIn ? undefined : prop;
+
   const {
     labelId: internalLabelId,
     validationIconId,
@@ -112,29 +133,35 @@ const Textbox = ({
     tooltipPosition: tooltipPosition
   }, /*#__PURE__*/_react.default.createElement(_inputBehaviour.InputBehaviour, null, /*#__PURE__*/_react.default.createElement(_formField.default, _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
-  }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
+    validationIconId: validationRedesignOptIn ? undefined : validationIconId,
+    validationRedesignOptIn: validationRedesignOptIn,
+    size: size,
+    readOnly: readOnly
+  }, (0, _utils.filterStyledSystemMarginProps)(props)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox.StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: error,
+    warning: warning
+  }), /*#__PURE__*/_react.default.createElement(_input.InputPresentation, {
     align: align,
     disabled: disabled,
     readOnly: readOnly,
@@ -144,15 +171,17 @@ const Textbox = ({
     info: info,
     inputWidth: inputWidth || 100 - labelWidth,
     positionedChildren: positionedChildren
-  }, leftChildren, prefix ? /*#__PURE__*/_react.default.createElement(_prefix.default, {
+  }, leftChildren, prefix && /*#__PURE__*/_react.default.createElement(_prefix.default, {
     "data-element": "textbox-prefix"
-  }, prefix) : null, /*#__PURE__*/_react.default.createElement(_input.Input, _extends({}, required && {
+  }, prefix), validationRedesignOptIn && !disableErrorBorder && (error || warning) && /*#__PURE__*/_react.default.createElement(_textbox.ErrorBorder, {
+    warning: !!(!error && warning)
+  }), /*#__PURE__*/_react.default.createElement(_input.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,
@@ -180,9 +209,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/lib/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/lib/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/lib/components/textbox/textbox.style.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBorder = exports.StyledHintText = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const ErrorBorder = _styledComponents.default.span`
+  ${({
+  warning
+}) => (0, _styledComponents.css)`
+      position: absolute;
+      z-index: 6;
+      width: 2px;
+      height: calc(100% + var(--spacing300));
+      background-color: ${warning ? "var(--colorsSemanticCaution500)" : "var(--colorsSemanticNegative500)"};
+      left: -12px;
+      bottom: 0px;
+    `}
+`;
+exports.ErrorBorder = ErrorBorder;
+const StyledHintText = _styledComponents.default.p`
+  margin-top: 0px;
+  margin-bottom: 8px;
+  color: var(--colorsUtilityYin055);
+  font-size: 14px;
+`;
+exports.StyledHintText = StyledHintText;
+StyledHintText.defaultProps = {
+  size: "medium"
+};
+ErrorBorder.propTypes = {
+  warning: _propTypes.default.bool,
+  size: _propTypes.default.string
+};
+ErrorBorder.defaultProps = {
+  warning: false,
+  size: "medium"
+};

package/lib/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/lib/style/themes/base/base-theme.config.js

@@ -31,9 +31,11 @@ var _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/lib/style/themes/base/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "104.55.0",
+  "version": "104.58.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {