carbon-react 104.55.0 → 104.58.0

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__/checkable-input/hidden-checkable-input.component.d.ts

@@ -1,5 +1,5 @@
 declare var _default: React.MemoExoticComponent<{
-    ({ name, checked, type, value, inputRef, onChange, autoFocus, ...props }: {
+    ({ name, checked, type, value, inputRef, onChange, autoFocus, role, ...props }: {
         [x: string]: any;
         name: any;
         checked: any;
@@ -8,6 +8,7 @@ declare var _default: React.MemoExoticComponent<{
         inputRef: any;
         onChange: any;
         autoFocus: any;
+        role: any;
     }): JSX.Element;
     propTypes: {
         /** Allows component to be focused on page load */
@@ -28,6 +29,8 @@ declare var _default: React.MemoExoticComponent<{
         onMouseEnter: PropTypes.Requireable<(...args: any[]) => any>;
         /** HTML type attribute of the input */
         type: PropTypes.Validator<string>;
+        /** Role attribute of the input */
+        role: PropTypes.Requireable<string>;
         /** Value of the input */
         value: PropTypes.Requireable<string>;
         /** A callback to retrieve the input reference */

package/lib/__internal__/checkable-input/hidden-checkable-input.component.js

@@ -29,6 +29,7 @@ const HiddenCheckableInput = ({
   inputRef,
   onChange,
   autoFocus,
+  role,
   ...props
 }) => {
   const {
@@ -73,7 +74,7 @@ const HiddenCheckableInput = ({
     "aria-checked": checked,
     checked: checked,
     name: name,
-    role: type,
+    role: role || type,
     type: type,
     value: value
   }, props, {
@@ -114,6 +115,9 @@ HiddenCheckableInput.propTypes = {
   /** HTML type attribute of the input */
   type: _propTypes.default.string.isRequired,
 
+  /** Role attribute of the input */
+  role: _propTypes.default.string,
+
   /** Value of the input */
   value: _propTypes.default.string,
 

package/lib/__internal__/checkable-input/hidden-checkable-input.d.ts

@@ -31,6 +31,8 @@ export interface HiddenCheckableInputProps
   extends CommonHiddenCheckableInputProps {
   /** HTML type attribute of the input */
   type: string;
+  /** Role attribute of the input */
+  role?: string;
 }
 
 declare function HiddenCheckableInput(

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>;

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

@@ -87,7 +87,8 @@ function stylingForValidations({
   error,
   warning,
   info,
-  disabled
+  disabled,
+  validationRedesignOptIn
 }) {
   let validationColor;
 
@@ -98,7 +99,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/lib/__internal__/validation-message/index.d.ts

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

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

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _validationMessage.default;
+  }
+});
+
+var _validationMessage = _interopRequireDefault(require("./validation-message.component"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/__internal__/validation-message/package.json

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

package/lib/__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/lib/__internal__/validation-message/validation-message.component.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _validationMessage = _interopRequireDefault(require("./validation-message.style"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ValidationMessage = ({
+  error,
+  warning
+}) => {
+  const validation = error || warning;
+  const isStringValidation = typeof validation === "string";
+  return isStringValidation ? /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    isWarning: !!(!error && warning)
+  }, validation) : null;
+};
+
+var _default = ValidationMessage;
+exports.default = _default;

package/lib/__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/lib/__internal__/validation-message/validation-message.style.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+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 StyledValidationMessage = _styledComponents.default.p`
+  ${({
+  isWarning
+}) => (0, _styledComponents.css)`
+    color: ${isWarning ? "var(--colorsSemanticCaution600)" : "var(--colorsSemanticNegative500)"};
+    font-weight: ${isWarning ? "regular" : "bold"};
+    margin-top: 0px;
+    margin-bottom: 8px;
+  `}
+`;
+var _default = StyledValidationMessage;
+exports.default = _default;

package/lib/__internal__/validations/validation-icon.component.js

@@ -77,10 +77,7 @@ const ValidationIcon = ({
   }
 
   return /*#__PURE__*/_react.default.createElement(_validationIcon.default, _extends({
-    id: iconId,
     validationType: validationType,
-    role: "tooltip",
-    "aria-label": validationMessage,
     onClick: onClick,
     onMouseOver: () => setTriggeredByIcon(true),
     onMouseLeave: () => setTriggeredByIcon(false),
@@ -104,8 +101,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/lib/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/lib/components/carbon-provider/carbon-provider.component.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.NewValidationContext = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -17,16 +17,29 @@ var _carbonScopedTokensProvider = _interopRequireDefault(require("../../style/de
 
 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 NewValidationContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.NewValidationContext = NewValidationContext;
+
 const CarbonProvider = ({
   children,
-  theme = _mint.default
+  theme = _mint.default,
+  validationRedesignOptIn = false
 }) => /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
   theme: theme
-}, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, children));
+}, /*#__PURE__*/_react.default.createElement(_carbonScopedTokensProvider.default, null, /*#__PURE__*/_react.default.createElement(NewValidationContext.Provider, {
+  value: {
+    validationRedesignOptIn
+  }
+}, children)));
 
 CarbonProvider.propTypes = {
   children: _propTypes.default.node.isRequired,
-  theme: _propTypes.default.object
+  theme: _propTypes.default.object,
+  validationRedesignOptIn: _propTypes.default.bool
 };
 var _default = CarbonProvider;
 exports.default = _default;

package/lib/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/lib/components/date-range/date-range.style.js

@@ -31,7 +31,7 @@ const StyledDateRange = _styledComponents.default.div`
   }
 
   & ${_date.default}:first-child {
-    margin-right: var(--spacing150);
+    margin-right: var(--spacing300);
   }
 
   ${_labelStyle.StyledLabelContainer} {

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

@@ -19,6 +19,8 @@ var _utils = require("../../style/utils");
 
 var _fieldset = require("./fieldset.style");
 
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -41,12 +43,16 @@ const Fieldset = props => {
     propTypes: Fieldset.propTypes,
     props
   });
-  return /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({}, (0, _tags.default)("fieldset", props), safeProps, {
+  return /*#__PURE__*/_react.default.createElement(_carbonProvider.NewValidationContext.Provider, {
+    value: {
+      validationRedesignOptIn: false
+    }
+  }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({}, (0, _tags.default)("fieldset", props), safeProps, {
     m: 0
   }, (0, _utils.filterStyledSystemMarginProps)(props)), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
     "data-component": "fieldset-style",
     inline: props.inline
-  }, legend(), props.children));
+  }, legend(), props.children)));
 };
 
 Fieldset.propTypes = {

package/lib/components/icon/icon.component.js

@@ -51,6 +51,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
   tooltipFlipOverrides,
   tooltipId,
   tabIndex,
+  id,
   isPartOfInput,
   inputSize,
   role,
@@ -111,6 +112,7 @@ const Icon = /*#__PURE__*/_react.default.forwardRef(({
     "aria-hidden": ariaHidden,
     ref: ref,
     key: "icon",
+    id: id,
     className: className || null,
     "data-element": iconType()
   }, (0, _tags.default)("icon", rest), styleProps, {
@@ -224,7 +226,10 @@ Icon.propTypes = { ...marginPropTypes,
   tabIndex: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
 
   /** @ignore @private */
-  focusable: _propTypes.default.bool
+  focusable: _propTypes.default.bool,
+
+  /** Id passed to the icon. */
+  id: _propTypes.default.string
 };
 Icon.defaultProps = {
   bgSize: "small",

package/lib/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/lib/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/lib/components/numeral-date/numeral-date-context.js

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

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

@@ -21,6 +21,10 @@ var _numeralDate = require("./numeral-date.style");
 
 var _textbox = _interopRequireDefault(require("../textbox"));
 
+var _textbox2 = require("../textbox/textbox.style");
+
+var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
+
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
 
 var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLocale"));
@@ -31,6 +35,10 @@ var _inputBehaviour = require("../../__internal__/input-behaviour");
 
 var _tooltipProvider = require("../../__internal__/tooltip-provider");
 
+var _carbonProvider = require("../carbon-provider/carbon-provider.component");
+
+var _numeralDateContext = _interopRequireDefault(require("./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; }
@@ -88,6 +96,9 @@ const NumeralDate = ({
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
+  const {
+    validationRedesignOptIn
+  } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
   const {
     current: uniqueId
   } = (0, _react.useRef)(id || (0, _guid.default)());
@@ -188,8 +199,12 @@ const NumeralDate = ({
     labelSpacing: labelSpacing,
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
-    isRequired: required
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), /*#__PURE__*/_react.default.createElement(_numeralDate.StyledNumeralDate, {
+    isRequired: required,
+    validationRedesignOptIn: validationRedesignOptIn
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox2.StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
+    error: internalError,
+    warning: internalWarning
+  }), /*#__PURE__*/_react.default.createElement(_numeralDate.StyledNumeralDate, {
     name: name,
     onKeyPress: onKeyPress,
     "data-component": "numeral-date"
@@ -199,7 +214,12 @@ const NumeralDate = ({
     const validation = error || warning || info;
     const isStringValidation = typeof validation === "string";
     const hasValidationIcon = isStringValidation && validation.length;
-    return /*#__PURE__*/_react.default.createElement(_numeralDate.StyledDateField, {
+    return /*#__PURE__*/_react.default.createElement(_numeralDateContext.default.Provider, {
+      value: {
+        disableErrorBorder: index !== 0
+      },
+      key: datePart
+    }, /*#__PURE__*/_react.default.createElement(_numeralDate.StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
       isMiddle: isMiddle,
@@ -222,14 +242,14 @@ const NumeralDate = ({
       info: !!info
     }, required && {
       required
-    }, isEnd && !validationOnLabel && {
+    }, isEnd && !validationRedesignOptIn && !validationOnLabel && {
       error: internalError,
       warning: internalWarning,
       info
     }, {
       size: size,
       tooltipPosition: tooltipPosition
-    })));
+    }))));
   })))));
 };
 

package/lib/components/switch/switch.component.js

@@ -118,6 +118,7 @@ const Switch = ({
     labelHelp,
     value,
     type: "checkbox",
+    role: "switch",
     reverse: !reverse,
     // switched to preserve backward compatibility
     validationOnLabel: shouldValidationBeOnLabel && !disabled,