carbon-react 124.4.1 → 124.6.0

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../__internal__/validations";
-export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
+export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
 export interface DayMonthDate {
     dd: string;
     mm: string;

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

@@ -6,7 +6,9 @@ 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 Box from "../box";
+import Typography from "../typography";
+import { ErrorBorder, StyledHintText } from "../textbox/textbox.style";
 import ValidationMessage from "../../__internal__/validation-message";
 import guid from "../../__internal__/utils/helpers/guid";
 import useLocale from "../../hooks/__internal__/useLocale";
@@ -18,8 +20,8 @@ import NumeralDateContext from "./numeral-date-context";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import Logger from "../../__internal__/utils/logger";
 let deprecateUncontrolledWarnTriggered = false;
-export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
-const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
+export const ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["yyyy", "mm", "dd"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
+const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['yyyy', 'mm', 'dd'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
 const isDayValid = day => day ? +day > 0 && +day < 32 : true;
 const isMonthValid = month => month ? +month > 0 && +month < 13 : true;
 const isYearValid = year => year ? +year > 1799 && +year < 2201 : true;
@@ -28,6 +30,16 @@ const validations = {
   mm: isMonthValid,
   yyyy: isYearValid
 };
+const getDateLabel = (datePart, locale) => {
+  switch (datePart) {
+    case "mm":
+      return locale.numeralDate.labels.month();
+    case "yyyy":
+      return locale.numeralDate.labels.year();
+    default:
+      return locale.numeralDate.labels.day();
+  }
+};
 export const NumeralDate = ({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
@@ -64,7 +76,7 @@ export const NumeralDate = ({
   yearRef,
   ...rest
 }) => {
-  const l = useLocale();
+  const locale = useLocale();
   const {
     validationRedesignOptIn
   } = useContext(NewValidationContext);
@@ -74,6 +86,7 @@ export const NumeralDate = ({
   const isControlled = useRef(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = useRef(dateFormat.map(() => null));
+  const labelIds = useRef([guid(), guid(), guid()]);
   const [internalMessages, setInternalMessages] = useState({
     ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
@@ -87,9 +100,9 @@ export const NumeralDate = ({
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? invariant(false, modeSwitchedMessage) : invariant(false) : void 0;
   }, [value]);
   const validationMessages = {
-    dd: l.numeralDate.validation.day(),
-    mm: l.numeralDate.validation.month(),
-    yyyy: l.numeralDate.validation.year()
+    dd: locale.numeralDate.validation.day(),
+    mm: locale.numeralDate.validation.month(),
+    yyyy: locale.numeralDate.validation.year()
   };
   const [dateValue, setDateValue] = useState({
     ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
@@ -101,7 +114,7 @@ export const NumeralDate = ({
       value: newValue
     }
   });
-  const onKeyPress = event => {
+  const onKeyDown = event => {
     const isValidKey = Events.isNumberKey(event) || Events.isTabKey(event) || event.key === "Delete" || event.key === "Backspace";
     if (!isValidKey) {
       event.preventDefault();
@@ -166,24 +179,27 @@ export const NumeralDate = ({
     labelInline: labelInline,
     labelWidth: labelWidth,
     labelAlign: labelAlign,
-    labelHelp: labelHelp,
+    labelHelp: !validationRedesignOptIn && labelHelp,
     labelSpacing: labelSpacing,
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     isRequired: required,
     validationRedesignOptIn: validationRedesignOptIn
-  }, filterStyledSystemMarginProps(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), validationRedesignOptIn && /*#__PURE__*/React.createElement(ValidationMessage, {
+  }, filterStyledSystemMarginProps(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/React.createElement(StyledHintText, null, labelHelp), /*#__PURE__*/React.createElement(Box, {
+    position: "relative"
+  }, validationRedesignOptIn && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ValidationMessage, {
     error: internalError,
     warning: internalWarning
-  }), /*#__PURE__*/React.createElement(StyledNumeralDate, {
+  }), (internalError || internalWarning) && /*#__PURE__*/React.createElement(ErrorBorder, {
+    warning: !!(!internalError && internalWarning)
+  })), /*#__PURE__*/React.createElement(StyledNumeralDate, {
     name: name,
-    onKeyPress: onKeyPress,
+    onKeyDown: onKeyDown,
     "data-component": "numeral-date"
   }, dateFormat.map((datePart, index) => {
-    const isStart = index === 0;
     const isEnd = index === dateFormat.length - 1;
-    const isMiddle = index === 1;
-    const validation = error || warning || info;
+    const labelId = labelIds.current[index];
+    const validation = internalError || internalWarning || info;
     const isStringValidation = typeof validation === "string";
     const hasValidationIcon = isStringValidation && !!validation.length;
     let inputRef;
@@ -203,24 +219,24 @@ export const NumeralDate = ({
     }
     return /*#__PURE__*/React.createElement(NumeralDateContext.Provider, {
       value: {
-        disableErrorBorder: index !== 0
+        disableErrorBorder: true
       },
       key: datePart
     }, /*#__PURE__*/React.createElement(StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
-      isStart: isStart,
-      isMiddle: isMiddle,
       isEnd: isEnd,
-      hasValidationIcon: hasValidationIcon
+      hasValidationIconInField: hasValidationIcon && !validationOnLabel && !validationRedesignOptIn
     }, /*#__PURE__*/React.createElement(FormSpacingProvider, {
       marginBottom: undefined
-    }, /*#__PURE__*/React.createElement(Textbox, _extends({}, index === 0 && {
+    }, /*#__PURE__*/React.createElement(Typography, {
+      mb: "4px",
+      id: labelId
+    }, getDateLabel(datePart, locale)), /*#__PURE__*/React.createElement(Textbox, _extends({}, index === 0 && {
       id: uniqueId
     }, {
       disabled: disabled,
       readOnly: readOnly,
-      placeholder: datePart,
       value: dateValue[datePart],
       onChange: e => handleChange(e, datePart),
       ref: element => {
@@ -246,8 +262,9 @@ export const NumeralDate = ({
       info
     }, {
       size: size,
-      tooltipPosition: tooltipPosition
+      tooltipPosition: tooltipPosition,
+      "aria-labelledby": labelId
     })))));
-  })))));
+  }))))));
 };
 export default NumeralDate;

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

@@ -1,9 +1,7 @@
 interface StyledDateFieldProps {
-    isStart?: boolean;
     isEnd?: boolean;
-    isMiddle?: boolean;
     isYearInput?: boolean;
-    hasValidationIcon?: boolean;
+    hasValidationIconInField?: boolean;
 }
 export declare const StyledNumeralDate: import("styled-components").StyledComponent<"div", any, {
     name?: string | undefined;

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

@@ -1,47 +1,44 @@
 import styled, { css } from "styled-components";
 import StyledValidationIcon from "../../__internal__/validations/validation-icon.style";
 import StyledIconSpan from "../../__internal__/input-icon-toggle/input-icon-toggle.style";
-import StyledInputPresentantion from "../../__internal__/input/input-presentation.style";
+import StyledInputPresentation from "../../__internal__/input/input-presentation.style";
+import StyledInput from "../../__internal__/input/input.style";
 import StyledFormField from "../../__internal__/form-field/form-field.style";
+import StyledLabel from "../../__internal__/label/label.style";
+import { StyledHintText } from "../textbox/textbox.style";
 export const StyledNumeralDate = styled.div`
   display: inline-flex;
-  height: 40px;
   font-size: 14px;
   font-weight: 400;
 
   ${StyledFormField} {
     margin-top: 0px;
   }
+  ${StyledLabel} {
+    font-weight: 400;
+  }
+
+  ${StyledHintText} {
+    color: var(--colorsUtilityYin090);
+  }
 `;
 export const StyledDateField = styled.div`
   ${({
-  isStart,
   isYearInput,
   isEnd,
-  hasValidationIcon,
-  isMiddle
+  hasValidationIconInField
 }) => {
-  const yearInputOrError = isYearInput || isEnd && hasValidationIcon;
   return css`
-      ${StyledInputPresentantion} {
+      ${StyledInputPresentation} {
         position: relative;
-        width: ${yearInputOrError ? "78px;" : "58px;"};
-        text-align: center;
-        border-radius: var(--borderRadius000);
+        margin-right: ${isEnd ? "0" : "12px"};
+        min-width: ${isYearInput ? "80px" : "55px"};
 
-        ${isStart && css`
-            border-top-left-radius: var(--borderRadius050);
-            border-bottom-left-radius: var(--borderRadius050);
-          `}
-
-        ${isEnd && css`
-            border-top-right-radius: var(--borderRadius050);
-            border-bottom-right-radius: var(--borderRadius050);
-          `}
-
-        ${(isMiddle || isEnd) && css`
-            margin-left: -1px;
-          `}
+        ${StyledInput} {
+          text-align: center;
+          padding: 0 12px;
+          ${hasValidationIconInField && isEnd && "padding-right: 0"}
+        }
 
         ${StyledIconSpan} {
           width: 32px;
@@ -51,6 +48,7 @@ export const StyledDateField = styled.div`
         ${StyledValidationIcon} {
           z-index: 9000;
         }
-      `;
+      }
+    `;
 }}
 `;

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

@@ -17,7 +17,7 @@ export interface ProgressTrackerProps extends MarginProps {
     "aria-valuetext"?: string;
     /** Size of the progress bar. */
     size?: "small" | "medium" | "large";
-    /** Length of the progress bar, any valid css string. */
+    /** Length of the component, any valid css string. */
     length?: string;
     /** Current progress (percentage). */
     progress?: number;
@@ -35,12 +35,14 @@ export interface ProgressTrackerProps extends MarginProps {
     customValuePreposition?: string;
     /**
      * The position the value label are rendered in.
-     * Top/bottom apply to horizontal and left/right to vertical orientation.
+     * Top/bottom apply to horizontal and left applies to vertical orientation.
      */
-    labelsPosition?: "top" | "bottom";
+    labelsPosition?: "top" | "bottom" | "left";
+    /** Label width */
+    labelWidth?: string;
 }
 declare const ProgressTracker: {
-    ({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, error, progress, description, showDefaultLabels, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, ...rest }: ProgressTrackerProps): React.JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, error, progress, description, showDefaultLabels, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
     displayName: string;
 };
 export default ProgressTracker;

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

@@ -21,7 +21,8 @@ const ProgressTracker = ({
   currentProgressLabel,
   customValuePreposition,
   maxProgressLabel,
-  labelsPosition,
+  labelsPosition = "top",
+  labelWidth,
   ...rest
 }) => {
   const l = useLocale();
@@ -51,7 +52,8 @@ const ProgressTracker = ({
     const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
     return /*#__PURE__*/React.createElement(StyledValuesLabel, {
       labelsPosition: labelsPosition,
-      size: size
+      size: size,
+      labelWidth: labelWidth
     }, displayedCurrentProgressLabel && /*#__PURE__*/React.createElement(StyledValue, {
       "data-element": "current-progress-label"
     }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
@@ -72,7 +74,8 @@ const ProgressTracker = ({
     "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
     "aria-valuemin": ariaValueMin,
     "aria-valuemax": ariaValueMax,
-    "aria-valuetext": ariaValueText
+    "aria-valuetext": ariaValueText,
+    labelsPosition: labelsPosition
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/React.createElement(StyledProgressBar, {
     size: size,
     ref: barRef,

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

@@ -1,8 +1,8 @@
 import { ProgressTrackerProps } from "./progress-tracker.component";
-declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin">, never>;
+declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin" | "labelsPosition">, never>;
 declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "size">, never>;
 declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
-declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "size" | "labelsPosition">, never>;
+declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "labelWidth" | "size" | "labelsPosition">, never>;
 declare const InnerBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "length" | "size">, never>;
 export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };

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

@@ -37,6 +37,12 @@ const StyledProgressTracker = styled.div`
 }) => css`
       width: ${length};
     `};
+  ${({
+  labelsPosition
+}) => labelsPosition === "left" && css`
+      display: flex;
+      align-items: center;
+    `}
 `;
 const StyledProgressBar = styled.span`
   ${({
@@ -71,6 +77,11 @@ const StyledDescription = styled.span`
   color: var(--colorsUtilityYin055);
   margin-left: 4px;
 `;
+const labelsPositionMargin = {
+  top: "bottom",
+  bottom: "top",
+  left: "right"
+};
 const StyledValuesLabel = styled.span`
   text-align: start;
   display: flex;
@@ -79,12 +90,19 @@ const StyledValuesLabel = styled.span`
   font-size: ${({
   size
 }) => size && fontSizes[size]};
+
   ${({
   labelsPosition
-}) => labelsPosition === "bottom" && "margin-top: 8px"};
+}) => labelsPosition && `
+      margin-${labelsPositionMargin[labelsPosition]}: var(--spacing100);
+    `};
+
   ${({
-  labelsPosition
-}) => labelsPosition !== "bottom" && "margin-bottom: 8px"};
+  labelWidth
+}) => labelWidth && css`
+      width: ${labelWidth};
+      flex-shrink: 0;
+    `};
 `;
 const InnerBar = styled.span`
   ${({

package/esm/locales/en-gb.js

@@ -94,6 +94,11 @@ const enGB = {
       day: () => "Day should be a number within a 1-31 range.",
       month: () => "Month should be a number within a 1-12 range.",
       year: () => "Year should be a number within a 1800-2200 range."
+    },
+    labels: {
+      day: () => "Day",
+      month: () => "Month",
+      year: () => "Year"
     }
   },
   pager: {

package/esm/locales/locale.d.ts

@@ -78,6 +78,11 @@ interface Locale {
             month: () => string;
             year: () => string;
         };
+        labels: {
+            day: () => string;
+            month: () => string;
+            year: () => string;
+        };
     };
     pager: {
         show: () => string;

package/esm/locales/pl-pl.js

@@ -129,6 +129,11 @@ const plPL = {
       day: () => "Dzień musi być liczbą w zakresie 1-31.",
       month: () => "Miesiąć musi być liczbą w zakresie 1-12.",
       year: () => "Rok musi być liczbą w zakresie 1800-2200."
+    },
+    labels: {
+      day: () => "Dzień",
+      month: () => "Miesiąć",
+      year: () => "Rok"
     }
   },
   pager: {

package/lib/components/numeral-date/numeral-date.component.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 import { ValidationProps } from "../../__internal__/validations";
-export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
+export declare const ALLOWED_DATE_FORMATS: readonly [readonly ["dd", "mm", "yyyy"], readonly ["mm", "dd", "yyyy"], readonly ["yyyy", "mm", "dd"], readonly ["dd", "mm"], readonly ["mm", "dd"], readonly ["mm", "yyyy"]];
 export interface DayMonthDate {
     dd: string;
     mm: string;

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

@@ -11,6 +11,8 @@ var _utils = require("../../style/utils");
 var _events = _interopRequireDefault(require("../../__internal__/utils/helpers/events"));
 var _numeralDate = require("./numeral-date.style");
 var _textbox = _interopRequireDefault(require("../textbox"));
+var _box = _interopRequireDefault(require("../box"));
+var _typography = _interopRequireDefault(require("../typography"));
 var _textbox2 = require("../textbox/textbox.style");
 var _validationMessage = _interopRequireDefault(require("../../__internal__/validation-message"));
 var _guid = _interopRequireDefault(require("../../__internal__/utils/helpers/guid"));
@@ -27,8 +29,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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 && Object.prototype.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 deprecateUncontrolledWarnTriggered = false;
-const ALLOWED_DATE_FORMATS = exports.ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
-const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
+const ALLOWED_DATE_FORMATS = exports.ALLOWED_DATE_FORMATS = [["dd", "mm", "yyyy"], ["mm", "dd", "yyyy"], ["yyyy", "mm", "dd"], ["dd", "mm"], ["mm", "dd"], ["mm", "yyyy"]];
+const incorrectDateFormatMessage = "Forbidden prop dateFormat supplied to NumeralDate. " + "Only one of these date formats is allowed: " + "['dd', 'mm', 'yyyy'], " + "['mm', 'dd', 'yyyy'], " + "['yyyy', 'mm', 'dd'], " + "['dd', 'mm'], " + "['mm', 'dd'], " + "['mm', 'yyyy']";
 const isDayValid = day => day ? +day > 0 && +day < 32 : true;
 const isMonthValid = month => month ? +month > 0 && +month < 13 : true;
 const isYearValid = year => year ? +year > 1799 && +year < 2201 : true;
@@ -37,6 +39,16 @@ const validations = {
   mm: isMonthValid,
   yyyy: isYearValid
 };
+const getDateLabel = (datePart, locale) => {
+  switch (datePart) {
+    case "mm":
+      return locale.numeralDate.labels.month();
+    case "yyyy":
+      return locale.numeralDate.labels.year();
+    default:
+      return locale.numeralDate.labels.day();
+  }
+};
 const NumeralDate = ({
   dateFormat = ["dd", "mm", "yyyy"],
   defaultValue,
@@ -73,7 +85,7 @@ const NumeralDate = ({
   yearRef,
   ...rest
 }) => {
-  const l = (0, _useLocale.default)();
+  const locale = (0, _useLocale.default)();
   const {
     validationRedesignOptIn
   } = (0, _react.useContext)(_carbonProvider.NewValidationContext);
@@ -83,6 +95,7 @@ const NumeralDate = ({
   const isControlled = (0, _react.useRef)(value !== undefined);
   const initialValue = isControlled.current ? value : defaultValue;
   const refs = (0, _react.useRef)(dateFormat.map(() => null));
+  const labelIds = (0, _react.useRef)([(0, _guid.default)(), (0, _guid.default)(), (0, _guid.default)()]);
   const [internalMessages, setInternalMessages] = (0, _react.useState)({
     ...Object.fromEntries(dateFormat.map(datePart => [datePart, ""]))
   });
@@ -96,9 +109,9 @@ const NumeralDate = ({
     !(isControlled.current === (value !== undefined)) ? process.env.NODE_ENV !== "production" ? (0, _invariant.default)(false, modeSwitchedMessage) : (0, _invariant.default)(false) : void 0;
   }, [value]);
   const validationMessages = {
-    dd: l.numeralDate.validation.day(),
-    mm: l.numeralDate.validation.month(),
-    yyyy: l.numeralDate.validation.year()
+    dd: locale.numeralDate.validation.day(),
+    mm: locale.numeralDate.validation.month(),
+    yyyy: locale.numeralDate.validation.year()
   };
   const [dateValue, setDateValue] = (0, _react.useState)({
     ...(initialValue || Object.fromEntries(dateFormat.map(datePart => [datePart, ""])))
@@ -110,7 +123,7 @@ const NumeralDate = ({
       value: newValue
     }
   });
-  const onKeyPress = event => {
+  const onKeyDown = event => {
     const isValidKey = _events.default.isNumberKey(event) || _events.default.isTabKey(event) || event.key === "Delete" || event.key === "Backspace";
     if (!isValidKey) {
       event.preventDefault();
@@ -175,24 +188,27 @@ const NumeralDate = ({
     labelInline: labelInline,
     labelWidth: labelWidth,
     labelAlign: labelAlign,
-    labelHelp: labelHelp,
+    labelHelp: !validationRedesignOptIn && labelHelp,
     labelSpacing: labelSpacing,
     fieldHelp: fieldHelp,
     adaptiveLabelBreakpoint: adaptiveLabelBreakpoint,
     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, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), validationRedesignOptIn && labelHelp && /*#__PURE__*/_react.default.createElement(_textbox2.StyledHintText, null, labelHelp), /*#__PURE__*/_react.default.createElement(_box.default, {
+    position: "relative"
+  }, validationRedesignOptIn && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_validationMessage.default, {
     error: internalError,
     warning: internalWarning
-  }), /*#__PURE__*/_react.default.createElement(_numeralDate.StyledNumeralDate, {
+  }), (internalError || internalWarning) && /*#__PURE__*/_react.default.createElement(_textbox2.ErrorBorder, {
+    warning: !!(!internalError && internalWarning)
+  })), /*#__PURE__*/_react.default.createElement(_numeralDate.StyledNumeralDate, {
     name: name,
-    onKeyPress: onKeyPress,
+    onKeyDown: onKeyDown,
     "data-component": "numeral-date"
   }, dateFormat.map((datePart, index) => {
-    const isStart = index === 0;
     const isEnd = index === dateFormat.length - 1;
-    const isMiddle = index === 1;
-    const validation = error || warning || info;
+    const labelId = labelIds.current[index];
+    const validation = internalError || internalWarning || info;
     const isStringValidation = typeof validation === "string";
     const hasValidationIcon = isStringValidation && !!validation.length;
     let inputRef;
@@ -212,24 +228,24 @@ const NumeralDate = ({
     }
     return /*#__PURE__*/_react.default.createElement(_numeralDateContext.default.Provider, {
       value: {
-        disableErrorBorder: index !== 0
+        disableErrorBorder: true
       },
       key: datePart
     }, /*#__PURE__*/_react.default.createElement(_numeralDate.StyledDateField, {
       key: datePart,
       isYearInput: datePart.length === 4,
-      isStart: isStart,
-      isMiddle: isMiddle,
       isEnd: isEnd,
-      hasValidationIcon: hasValidationIcon
+      hasValidationIconInField: hasValidationIcon && !validationOnLabel && !validationRedesignOptIn
     }, /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
       marginBottom: undefined
-    }, /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, index === 0 && {
+    }, /*#__PURE__*/_react.default.createElement(_typography.default, {
+      mb: "4px",
+      id: labelId
+    }, getDateLabel(datePart, locale)), /*#__PURE__*/_react.default.createElement(_textbox.default, _extends({}, index === 0 && {
       id: uniqueId
     }, {
       disabled: disabled,
       readOnly: readOnly,
-      placeholder: datePart,
       value: dateValue[datePart],
       onChange: e => handleChange(e, datePart),
       ref: element => {
@@ -255,9 +271,10 @@ const NumeralDate = ({
       info
     }, {
       size: size,
-      tooltipPosition: tooltipPosition
+      tooltipPosition: tooltipPosition,
+      "aria-labelledby": labelId
     })))));
-  })))));
+  }))))));
 };
 exports.NumeralDate = NumeralDate;
 var _default = exports.default = NumeralDate;

package/lib/components/numeral-date/numeral-date.style.d.ts

@@ -1,9 +1,7 @@
 interface StyledDateFieldProps {
-    isStart?: boolean;
     isEnd?: boolean;
-    isMiddle?: boolean;
     isYearInput?: boolean;
-    hasValidationIcon?: boolean;
+    hasValidationIconInField?: boolean;
 }
 export declare const StyledNumeralDate: import("styled-components").StyledComponent<"div", any, {
     name?: string | undefined;

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

@@ -8,49 +8,46 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
 var _inputIconToggle = _interopRequireDefault(require("../../__internal__/input-icon-toggle/input-icon-toggle.style"));
 var _inputPresentation = _interopRequireDefault(require("../../__internal__/input/input-presentation.style"));
+var _input = _interopRequireDefault(require("../../__internal__/input/input.style"));
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
+var _label = _interopRequireDefault(require("../../__internal__/label/label.style"));
+var _textbox = require("../textbox/textbox.style");
 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 && Object.prototype.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; }
 const StyledNumeralDate = exports.StyledNumeralDate = _styledComponents.default.div`
   display: inline-flex;
-  height: 40px;
   font-size: 14px;
   font-weight: 400;
 
   ${_formField.default} {
     margin-top: 0px;
   }
+  ${_label.default} {
+    font-weight: 400;
+  }
+
+  ${_textbox.StyledHintText} {
+    color: var(--colorsUtilityYin090);
+  }
 `;
 const StyledDateField = exports.StyledDateField = _styledComponents.default.div`
   ${({
-  isStart,
   isYearInput,
   isEnd,
-  hasValidationIcon,
-  isMiddle
+  hasValidationIconInField
 }) => {
-  const yearInputOrError = isYearInput || isEnd && hasValidationIcon;
   return (0, _styledComponents.css)`
       ${_inputPresentation.default} {
         position: relative;
-        width: ${yearInputOrError ? "78px;" : "58px;"};
-        text-align: center;
-        border-radius: var(--borderRadius000);
+        margin-right: ${isEnd ? "0" : "12px"};
+        min-width: ${isYearInput ? "80px" : "55px"};
 
-        ${isStart && (0, _styledComponents.css)`
-            border-top-left-radius: var(--borderRadius050);
-            border-bottom-left-radius: var(--borderRadius050);
-          `}
-
-        ${isEnd && (0, _styledComponents.css)`
-            border-top-right-radius: var(--borderRadius050);
-            border-bottom-right-radius: var(--borderRadius050);
-          `}
-
-        ${(isMiddle || isEnd) && (0, _styledComponents.css)`
-            margin-left: -1px;
-          `}
+        ${_input.default} {
+          text-align: center;
+          padding: 0 12px;
+          ${hasValidationIconInField && isEnd && "padding-right: 0"}
+        }
 
         ${_inputIconToggle.default} {
           width: 32px;
@@ -60,6 +57,7 @@ const StyledDateField = exports.StyledDateField = _styledComponents.default.div`
         ${_validationIcon.default} {
           z-index: 9000;
         }
-      `;
+      }
+    `;
 }}
 `;

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

@@ -17,7 +17,7 @@ export interface ProgressTrackerProps extends MarginProps {
     "aria-valuetext"?: string;
     /** Size of the progress bar. */
     size?: "small" | "medium" | "large";
-    /** Length of the progress bar, any valid css string. */
+    /** Length of the component, any valid css string. */
     length?: string;
     /** Current progress (percentage). */
     progress?: number;
@@ -35,12 +35,14 @@ export interface ProgressTrackerProps extends MarginProps {
     customValuePreposition?: string;
     /**
      * The position the value label are rendered in.
-     * Top/bottom apply to horizontal and left/right to vertical orientation.
+     * Top/bottom apply to horizontal and left applies to vertical orientation.
      */
-    labelsPosition?: "top" | "bottom";
+    labelsPosition?: "top" | "bottom" | "left";
+    /** Label width */
+    labelWidth?: string;
 }
 declare const ProgressTracker: {
-    ({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, error, progress, description, showDefaultLabels, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, ...rest }: ProgressTrackerProps): React.JSX.Element;
+    ({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, length, error, progress, description, showDefaultLabels, currentProgressLabel, customValuePreposition, maxProgressLabel, labelsPosition, labelWidth, ...rest }: ProgressTrackerProps): React.JSX.Element;
     displayName: string;
 };
 export default ProgressTracker;

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

@@ -30,7 +30,8 @@ const ProgressTracker = ({
   currentProgressLabel,
   customValuePreposition,
   maxProgressLabel,
-  labelsPosition,
+  labelsPosition = "top",
+  labelWidth,
   ...rest
 }) => {
   const l = (0, _useLocale.default)();
@@ -60,7 +61,8 @@ const ProgressTracker = ({
     const displayedMaxProgressLabel = label(maxProgressLabel, "100%");
     return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValuesLabel, {
       labelsPosition: labelsPosition,
-      size: size
+      size: size,
+      labelWidth: labelWidth
     }, displayedCurrentProgressLabel && /*#__PURE__*/_react.default.createElement(_progressTracker.StyledValue, {
       "data-element": "current-progress-label"
     }, displayedCurrentProgressLabel), displayedMaxProgressLabel && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
@@ -81,7 +83,8 @@ const ProgressTracker = ({
     "aria-valuenow": ariaValueNow === undefined ? defaultValueNow : ariaValueNow,
     "aria-valuemin": ariaValueMin,
     "aria-valuemax": ariaValueMax,
-    "aria-valuetext": ariaValueText
+    "aria-valuetext": ariaValueText,
+    labelsPosition: labelsPosition
   }), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
     size: size,
     ref: barRef,

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

@@ -1,8 +1,8 @@
 import { ProgressTrackerProps } from "./progress-tracker.component";
-declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin">, never>;
+declare const StyledProgressTracker: import("styled-components").StyledComponent<"div", any, Pick<ProgressTrackerProps, "length" | "margin" | "labelsPosition">, never>;
 declare const StyledProgressBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "size">, never>;
 declare const StyledValue: import("styled-components").StyledComponent<"span", any, {}, never>;
 declare const StyledDescription: import("styled-components").StyledComponent<"span", any, {}, never>;
-declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "size" | "labelsPosition">, never>;
+declare const StyledValuesLabel: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "labelWidth" | "size" | "labelsPosition">, never>;
 declare const InnerBar: import("styled-components").StyledComponent<"span", any, Pick<ProgressTrackerProps, "error" | "progress" | "length" | "size">, never>;
 export { StyledProgressBar, InnerBar, StyledProgressTracker, StyledValuesLabel, StyledValue, StyledDescription, };

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

@@ -46,6 +46,12 @@ const StyledProgressTracker = exports.StyledProgressTracker = _styledComponents.
 }) => (0, _styledComponents.css)`
       width: ${length};
     `};
+  ${({
+  labelsPosition
+}) => labelsPosition === "left" && (0, _styledComponents.css)`
+      display: flex;
+      align-items: center;
+    `}
 `;
 const StyledProgressBar = exports.StyledProgressBar = _styledComponents.default.span`
   ${({
@@ -80,6 +86,11 @@ const StyledDescription = exports.StyledDescription = _styledComponents.default.
   color: var(--colorsUtilityYin055);
   margin-left: 4px;
 `;
+const labelsPositionMargin = {
+  top: "bottom",
+  bottom: "top",
+  left: "right"
+};
 const StyledValuesLabel = exports.StyledValuesLabel = _styledComponents.default.span`
   text-align: start;
   display: flex;
@@ -88,12 +99,19 @@ const StyledValuesLabel = exports.StyledValuesLabel = _styledComponents.default.
   font-size: ${({
   size
 }) => size && fontSizes[size]};
+
   ${({
   labelsPosition
-}) => labelsPosition === "bottom" && "margin-top: 8px"};
+}) => labelsPosition && `
+      margin-${labelsPositionMargin[labelsPosition]}: var(--spacing100);
+    `};
+
   ${({
-  labelsPosition
-}) => labelsPosition !== "bottom" && "margin-bottom: 8px"};
+  labelWidth
+}) => labelWidth && (0, _styledComponents.css)`
+      width: ${labelWidth};
+      flex-shrink: 0;
+    `};
 `;
 const InnerBar = exports.InnerBar = _styledComponents.default.span`
   ${({

package/lib/locales/en-gb.js

@@ -100,6 +100,11 @@ const enGB = {
       day: () => "Day should be a number within a 1-31 range.",
       month: () => "Month should be a number within a 1-12 range.",
       year: () => "Year should be a number within a 1800-2200 range."
+    },
+    labels: {
+      day: () => "Day",
+      month: () => "Month",
+      year: () => "Year"
     }
   },
   pager: {

package/lib/locales/locale.d.ts

@@ -78,6 +78,11 @@ interface Locale {
             month: () => string;
             year: () => string;
         };
+        labels: {
+            day: () => string;
+            month: () => string;
+            year: () => string;
+        };
     };
     pager: {
         show: () => string;

package/lib/locales/pl-pl.js

@@ -136,6 +136,11 @@ const plPL = {
       day: () => "Dzień musi być liczbą w zakresie 1-31.",
       month: () => "Miesiąć musi być liczbą w zakresie 1-12.",
       year: () => "Rok musi być liczbą w zakresie 1800-2200."
+    },
+    labels: {
+      day: () => "Dzień",
+      month: () => "Miesiąć",
+      year: () => "Rok"
     }
   },
   pager: {

package/package.json

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