carbon-react 140.0.0 → 140.1.0

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

@@ -83,7 +83,8 @@ export const ValidationIcon = ({
     isPartOfInput: isPartOfInput,
     inputSize: size,
     id: iconId,
-    focusable: tabIndex !== -1
+    focusable: tabIndex !== -1,
+    "data-role": `icon-${validationType}`
   }));
 };
 export default ValidationIcon;

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -30,11 +30,11 @@ export const DatePicker = ({
   setOpen,
   pickerTabGuardId
 }) => {
-  const l = useLocale();
+  const locale = useLocale();
   const {
     localize,
     options
-  } = l.date.dateFnsLocale();
+  } = locale.date.dateFnsLocale();
   const {
     weekStartsOn
   } = options || /* istanbul ignore next */{};
@@ -53,7 +53,7 @@ export const DatePicker = ({
     length: 7
   }).map((_, i) => localize?.day(i)), [localize]);
   const weekdaysShort = useMemo(() => {
-    const isGivenLocale = str => l.locale().includes(str);
+    const isGivenLocale = str => locale.locale().includes(str);
     return Array.from({
       length: 7
     }).map((_, i) => localize?.day(i, ["de", "pl"].some(isGivenLocale) ? {
@@ -61,7 +61,7 @@ export const DatePicker = ({
     } : {
       width: "abbreviated"
     }).substring(0, isGivenLocale("de") ? 2 : 3));
-  }, [l, localize]);
+  }, [locale, localize]);
   const ref = useRef(null);
   useEffect(() => {
     if (open) {
@@ -178,7 +178,7 @@ export const DatePicker = ({
     fixedWeeks: true,
     initialMonth: selectedDays || undefined,
     disabledDays: getDisabledDays(minDate, maxDate),
-    locale: l.locale(),
+    locale: locale.locale(),
     localeUtils: localeUtils,
     onDayKeyDown: handleOnDayKeyDown
   }, pickerProps))));

package/esm/components/date/__internal__/navbar/navbar.component.js

@@ -22,7 +22,8 @@ export const Navbar = ({
     }
   };
   return /*#__PURE__*/React.createElement(StyledNavbar, {
-    className: className
+    className: className,
+    "data-role": "date-navbar"
   }, /*#__PURE__*/React.createElement(StyledButton, {
     "aria-label": previousMonthButton(),
     onClick: () => onPreviousClick?.(),

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

@@ -48,10 +48,10 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
   const alreadyFocused = useRef(false);
   const isBlurBlocked = useRef(false);
   const focusedViaPicker = useRef(false);
-  const l = useLocale();
+  const locale = useLocale();
   const {
     dateFnsLocale
-  } = l.date;
+  } = locale.date;
   const {
     format,
     formats

package/esm/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,17 +1,17 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ProgressTrackerProps extends MarginProps {
-    /** Specifies an aria label to the component */
+    /** (Deprecated) Specifies an aria label to the component */
     "aria-label"?: string;
-    /** Specifies the aria describedby for the component */
+    /** (Deprecated) Specifies the aria describedby for the component */
     "aria-describedby"?: string;
-    /** The value of progress to be read out to the user. */
+    /** (Deprecated) The value of progress to be read out to the user. */
     "aria-valuenow"?: number;
-    /** The minimum value of the progress tracker */
+    /** (Deprecated) The minimum value of the progress tracker */
     "aria-valuemin"?: number;
-    /** The maximum value of the progress tracker */
+    /** (Deprecated) The maximum value of the progress tracker */
     "aria-valuemax"?: number;
-    /** Prop to define the human readable text alternative of aria-valuenow
+    /** (Deprecated) Prop to define the human readable text alternative of aria-valuenow
      * if aria-valuenow is not a number
      */
     "aria-valuetext"?: string;

package/esm/components/progress-tracker/progress-tracker.component.js

@@ -5,12 +5,14 @@ import useLocale from "../../hooks/__internal__/useLocale";
 import tagComponent from "../../__internal__/utils/helpers/tags";
 import { StyledProgressBar, InnerBar, StyledValuesLabel, StyledProgressTracker, StyledValue, StyledDescription } from "./progress-tracker.style";
 import useResizeObserver from "../../hooks/__internal__/useResizeObserver";
+import Logger from "../../__internal__/utils/logger";
+let deprecatedAriaTagsWarnTriggered = false;
 const ProgressTracker = ({
-  "aria-label": ariaLabel = "progress tracker",
+  "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin = 0,
-  "aria-valuemax": ariaValueMax = 100,
+  "aria-valuemin": ariaValueMin,
+  "aria-valuemax": ariaValueMax,
   "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
@@ -25,6 +27,10 @@ const ProgressTracker = ({
   labelWidth,
   ...rest
 }) => {
+  if ((ariaLabel || ariaDescribedBy || ariaValueNow || ariaValueMax || ariaValueMin || ariaValueText) && !deprecatedAriaTagsWarnTriggered) {
+    deprecatedAriaTagsWarnTriggered = true;
+    Logger.deprecate("The 'aria-' attribute props in `ProgressTracker` have been deprecated and will soon be removed.");
+  }
   const l = useLocale();
   const barRef = useRef(null);
   const [barLength, setBarLength] = useState("0px");
@@ -64,12 +70,14 @@ const ProgressTracker = ({
       "data-element": "progress-tracker-description"
     }, description));
   };
-  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
+  const valueMin = ariaValueMin === undefined ? 0 : ariaValueMin;
+  const valueMax = ariaValueMax === undefined ? 100 : ariaValueMax;
+  const defaultValueNow = valueMin + (valueMax - valueMin) * progress / 100;
   return /*#__PURE__*/React.createElement(StyledProgressTracker, _extends({
     length: length
   }, rest, tagComponent("progress-bar", rest), {
     role: "progressbar",
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || "progress tracker",
     "aria-describedby": ariaDescribedBy,
     "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
     "aria-valuemin": ariaValueMin,

package/esm/components/progress-tracker/progress-tracker.style.js

@@ -60,8 +60,9 @@ const StyledProgressBar = styled.span`
 })};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     overflow-x: hidden;
-    height: ${getHeight(size)};
-    width: 100%;
+    width: 100%
+    min-height: fit-content;
+    box-sizing: border-box;
   `}
 `;
 const fontSizes = {

package/esm/components/tooltip/tooltip.component.js

@@ -161,6 +161,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(({
     ref: handleTargetRef
   }), showTooltip ? /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement(StyledTooltip, _extends({
     "data-element": "tooltip",
+    "data-role": "tooltip",
     role: "tooltip",
     tabIndex: -1,
     type: type,

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

@@ -92,7 +92,8 @@ const ValidationIcon = ({
     isPartOfInput: isPartOfInput,
     inputSize: size,
     id: iconId,
-    focusable: tabIndex !== -1
+    focusable: tabIndex !== -1,
+    "data-role": `icon-${validationType}`
   }));
 };
 exports.ValidationIcon = ValidationIcon;

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -38,11 +38,11 @@ const DatePicker = ({
   setOpen,
   pickerTabGuardId
 }) => {
-  const l = (0, _useLocale.default)();
+  const locale = (0, _useLocale.default)();
   const {
     localize,
     options
-  } = l.date.dateFnsLocale();
+  } = locale.date.dateFnsLocale();
   const {
     weekStartsOn
   } = options || /* istanbul ignore next */{};
@@ -61,7 +61,7 @@ const DatePicker = ({
     length: 7
   }).map((_, i) => localize?.day(i)), [localize]);
   const weekdaysShort = (0, _react.useMemo)(() => {
-    const isGivenLocale = str => l.locale().includes(str);
+    const isGivenLocale = str => locale.locale().includes(str);
     return Array.from({
       length: 7
     }).map((_, i) => localize?.day(i, ["de", "pl"].some(isGivenLocale) ? {
@@ -69,7 +69,7 @@ const DatePicker = ({
     } : {
       width: "abbreviated"
     }).substring(0, isGivenLocale("de") ? 2 : 3));
-  }, [l, localize]);
+  }, [locale, localize]);
   const ref = (0, _react.useRef)(null);
   (0, _react.useEffect)(() => {
     if (open) {
@@ -186,7 +186,7 @@ const DatePicker = ({
     fixedWeeks: true,
     initialMonth: selectedDays || undefined,
     disabledDays: (0, _utils.getDisabledDays)(minDate, maxDate),
-    locale: l.locale(),
+    locale: locale.locale(),
     localeUtils: localeUtils,
     onDayKeyDown: handleOnDayKeyDown
   }, pickerProps))));

package/lib/components/date/__internal__/navbar/navbar.component.js

@@ -29,7 +29,8 @@ const Navbar = ({
     }
   };
   return /*#__PURE__*/_react.default.createElement(_navbar.default, {
-    className: className
+    className: className,
+    "data-role": "date-navbar"
   }, /*#__PURE__*/_react.default.createElement(_button.default, {
     "aria-label": previousMonthButton(),
     onClick: () => onPreviousClick?.(),

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

@@ -57,10 +57,10 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
   const alreadyFocused = (0, _react.useRef)(false);
   const isBlurBlocked = (0, _react.useRef)(false);
   const focusedViaPicker = (0, _react.useRef)(false);
-  const l = (0, _useLocale.default)();
+  const locale = (0, _useLocale.default)();
   const {
     dateFnsLocale
-  } = l.date;
+  } = locale.date;
   const {
     format,
     formats

package/lib/components/progress-tracker/progress-tracker.component.d.ts

@@ -1,17 +1,17 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface ProgressTrackerProps extends MarginProps {
-    /** Specifies an aria label to the component */
+    /** (Deprecated) Specifies an aria label to the component */
     "aria-label"?: string;
-    /** Specifies the aria describedby for the component */
+    /** (Deprecated) Specifies the aria describedby for the component */
     "aria-describedby"?: string;
-    /** The value of progress to be read out to the user. */
+    /** (Deprecated) The value of progress to be read out to the user. */
     "aria-valuenow"?: number;
-    /** The minimum value of the progress tracker */
+    /** (Deprecated) The minimum value of the progress tracker */
     "aria-valuemin"?: number;
-    /** The maximum value of the progress tracker */
+    /** (Deprecated) The maximum value of the progress tracker */
     "aria-valuemax"?: number;
-    /** Prop to define the human readable text alternative of aria-valuenow
+    /** (Deprecated) Prop to define the human readable text alternative of aria-valuenow
      * if aria-valuenow is not a number
      */
     "aria-valuetext"?: string;

package/lib/components/progress-tracker/progress-tracker.component.js

@@ -10,16 +10,18 @@ var _useLocale = _interopRequireDefault(require("../../hooks/__internal__/useLoc
 var _tags = _interopRequireDefault(require("../../__internal__/utils/helpers/tags"));
 var _progressTracker = require("./progress-tracker.style");
 var _useResizeObserver = _interopRequireDefault(require("../../hooks/__internal__/useResizeObserver"));
+var _logger = _interopRequireDefault(require("../../__internal__/utils/logger"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 deprecatedAriaTagsWarnTriggered = false;
 const ProgressTracker = ({
-  "aria-label": ariaLabel = "progress tracker",
+  "aria-label": ariaLabel,
   "aria-describedby": ariaDescribedBy,
   "aria-valuenow": ariaValueNow,
-  "aria-valuemin": ariaValueMin = 0,
-  "aria-valuemax": ariaValueMax = 100,
+  "aria-valuemin": ariaValueMin,
+  "aria-valuemax": ariaValueMax,
   "aria-valuetext": ariaValueText,
   size = "medium",
   length = "256px",
@@ -34,6 +36,10 @@ const ProgressTracker = ({
   labelWidth,
   ...rest
 }) => {
+  if ((ariaLabel || ariaDescribedBy || ariaValueNow || ariaValueMax || ariaValueMin || ariaValueText) && !deprecatedAriaTagsWarnTriggered) {
+    deprecatedAriaTagsWarnTriggered = true;
+    _logger.default.deprecate("The 'aria-' attribute props in `ProgressTracker` have been deprecated and will soon be removed.");
+  }
   const l = (0, _useLocale.default)();
   const barRef = (0, _react.useRef)(null);
   const [barLength, setBarLength] = (0, _react.useState)("0px");
@@ -73,12 +79,14 @@ const ProgressTracker = ({
       "data-element": "progress-tracker-description"
     }, description));
   };
-  const defaultValueNow = ariaValueMin + (ariaValueMax - ariaValueMin) * progress / 100;
+  const valueMin = ariaValueMin === undefined ? 0 : ariaValueMin;
+  const valueMax = ariaValueMax === undefined ? 100 : ariaValueMax;
+  const defaultValueNow = valueMin + (valueMax - valueMin) * progress / 100;
   return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
     length: length
   }, rest, (0, _tags.default)("progress-bar", rest), {
     role: "progressbar",
-    "aria-label": ariaLabel,
+    "aria-label": ariaLabel || "progress tracker",
     "aria-describedby": ariaDescribedBy,
     "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
     "aria-valuemin": ariaValueMin,

package/lib/components/progress-tracker/progress-tracker.style.js

@@ -69,8 +69,9 @@ const StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.
 })};
     border-radius: ${theme.roundedCornersOptOut ? "25px" : "var(--borderRadius400)"};
     overflow-x: hidden;
-    height: ${getHeight(size)};
-    width: 100%;
+    width: 100%
+    min-height: fit-content;
+    box-sizing: border-box;
   `}
 `;
 const fontSizes = {

package/lib/components/tooltip/tooltip.component.js

@@ -170,6 +170,7 @@ const Tooltip = exports.Tooltip = /*#__PURE__*/_react.default.forwardRef(({
     ref: handleTargetRef
   }), showTooltip ? /*#__PURE__*/_react.default.createElement(_portal.default, null, /*#__PURE__*/_react.default.createElement(_tooltip.default, _extends({
     "data-element": "tooltip",
+    "data-role": "tooltip",
     role: "tooltip",
     tabIndex: -1,
     type: type,

package/package.json

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