carbon-react 102.21.0 → 103.1.0

package/lib/components/loader/loader.component.d.ts

@@ -1,23 +1,27 @@
 export default Loader;
-declare function Loader({ isInsideButton, isActive, size, ...rest }: {
+declare function Loader({ "aria-label": ariaLabel, isInsideButton, isActive, size, ...rest }: {
     [x: string]: any;
+    "aria-label": any;
     isInsideButton: any;
     isActive: any;
     size: any;
 }): JSX.Element;
 declare namespace Loader {
-    namespace defaultProps {
-        const size: string;
-        const isInsideButton: boolean;
-        const isActive: boolean;
-    }
-    namespace propTypes {
-        const size_1: PropTypes.Requireable<string>;
-        export { size_1 as size };
-        const isInsideButton_1: PropTypes.Requireable<boolean>;
-        export { isInsideButton_1 as isInsideButton };
-        const isActive_1: PropTypes.Requireable<boolean>;
-        export { isActive_1 as isActive };
-    }
+    const defaultProps: {
+        size: string;
+        isInsideButton: boolean;
+        isActive: boolean;
+        "aria-label": string;
+    };
+    const propTypes: {
+        /** Specify an aria-label for the Loader component */
+        "aria-label": PropTypes.Requireable<string>;
+        /** Size of the loader. */
+        size: PropTypes.Requireable<string>;
+        /** Applies white color. */
+        isInsideButton: PropTypes.Requireable<boolean>;
+        /** Applies slate color. Available only when isInsideButton is true. */
+        isActive: PropTypes.Requireable<boolean>;
+    };
 }
 import PropTypes from "prop-types";

package/lib/components/loader/loader.component.js

@@ -26,12 +26,16 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const Loader = ({
+  "aria-label": ariaLabel,
   isInsideButton,
   isActive,
   size,
   ...rest
 }) => {
-  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({}, rest, (0, _tags.default)("loader", rest)), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
+  return /*#__PURE__*/_react.default.createElement(_loader.default, _extends({
+    "aria-label": ariaLabel,
+    role: "progressbar"
+  }, (0, _tags.default)("loader", rest), rest), /*#__PURE__*/_react.default.createElement(_loaderSquare.default, {
     isInsideButton: isInsideButton,
     isActive: isActive,
     size: size
@@ -49,10 +53,14 @@ const Loader = ({
 Loader.defaultProps = {
   size: "medium",
   isInsideButton: false,
-  isActive: true
+  isActive: true,
+  "aria-label": "loader"
 };
 Loader.propTypes = { ...marginPropTypes,
 
+  /** Specify an aria-label for the Loader component */
+  "aria-label": _propTypes.default.string,
+
   /** Size of the loader. */
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 

package/lib/components/loader/loader.d.ts

@@ -1,6 +1,8 @@
 import { MarginProps } from "styled-system";
 
 export interface LoaderProps extends MarginProps {
+  /** Specify an aria-label for the Loader component */
+  "aria-label"?: string;
   /** Size of the loader. */
   size?: "small" | "medium" | "large";
   /** Applies white color. */

package/lib/components/progress-tracker/progress-tracker-test.stories.js

@@ -48,12 +48,6 @@ var _default = {
         type: "select"
       }
     },
-    variant: {
-      options: _progressTracker.PROGRESS_TRACKER_VARIANTS,
-      control: {
-        type: "select"
-      }
-    },
     orientation: {
       options: ["horizontal", "vertical"],
       control: {

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

@@ -1,27 +1,56 @@
 export default ProgressTracker;
-declare function ProgressTracker({ size, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, variant, orientation, direction, labelsPosition, ...rest }: {
+declare function ProgressTracker({ "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, "aria-valuenow": ariaValueNow, "aria-valuemin": ariaValueMin, "aria-valuemax": ariaValueMax, "aria-valuetext": ariaValueText, size, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
     [x: string]: any;
+    "aria-label"?: string | undefined;
+    "aria-describedby": any;
+    "aria-valuenow": any;
+    "aria-valuemin": any;
+    "aria-valuemax": any;
+    "aria-valuetext": any;
     size?: string | undefined;
     progress?: number | undefined;
     showDefaultLabels?: boolean | undefined;
     currentProgressLabel: any;
     maxProgressLabel: any;
-    variant?: string | undefined;
     orientation?: string | undefined;
     direction?: string | undefined;
     labelsPosition: any;
 }): JSX.Element;
 declare namespace ProgressTracker {
-    namespace propTypes {
-        const size: PropTypes.Requireable<string>;
-        const progress: PropTypes.Requireable<number>;
-        const showDefaultLabels: PropTypes.Requireable<boolean>;
-        const currentProgressLabel: PropTypes.Requireable<string>;
-        const maxProgressLabel: PropTypes.Requireable<string>;
-        const variant: PropTypes.Requireable<string>;
-        const orientation: PropTypes.Requireable<string>;
-        const direction: PropTypes.Requireable<string>;
-        const labelsPosition: PropTypes.Requireable<string>;
-    }
+    const propTypes: {
+        /** Specifies an aria label to the component */
+        "aria-label": PropTypes.Requireable<string>;
+        /** Specifies the aria describedby for the component */
+        "aria-describedby": PropTypes.Requireable<string>;
+        /** The value of progress to be read out to the user. */
+        "aria-valuenow": PropTypes.Requireable<number>;
+        /** The minimum value of the progress tracker */
+        "aria-valuemin": PropTypes.Requireable<number>;
+        /** The maximum value of the progress tracker */
+        "aria-valuemax": PropTypes.Requireable<number>;
+        /** Prop to define the human readable text alternative of aria-valuenow
+         * if aria-valuenow is not a number
+         */
+        "aria-valuetext": PropTypes.Requireable<string>;
+        /** Size of the progress bar. */
+        size: PropTypes.Requireable<string>;
+        /** Current progress (percentage). */
+        progress: PropTypes.Requireable<number>;
+        /** Flag to control whether the default value labels (as percentages) should be rendered. */
+        showDefaultLabels: PropTypes.Requireable<boolean>;
+        /** Value to display as current progress. */
+        currentProgressLabel: PropTypes.Requireable<string>;
+        /** Value to display as the maximum progress limit. */
+        maxProgressLabel: PropTypes.Requireable<string>;
+        /** The orientation of the component. */
+        orientation: PropTypes.Requireable<string>;
+        /** The direction the bar should move as progress increases, only applies in vertical orientation. */
+        direction: PropTypes.Requireable<string>;
+        /**
+         * The position the value label are rendered in.
+         * Top/bottom apply to horizontal and left/right to vertical orientation.
+         */
+        labelsPosition: PropTypes.Requireable<string>;
+    };
 }
 import PropTypes from "prop-types";

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

@@ -24,12 +24,17 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const marginPropTypes = (0, _utils.filterStyledSystemMarginProps)(_propTypes2.default.space);
 
 const ProgressTracker = ({
+  "aria-label": ariaLabel = "progress tracker",
+  "aria-describedby": ariaDescribedBy,
+  "aria-valuenow": ariaValueNow,
+  "aria-valuemin": ariaValueMin,
+  "aria-valuemax": ariaValueMax,
+  "aria-valuetext": ariaValueText,
   size = "medium",
   progress = 0,
   showDefaultLabels = false,
   currentProgressLabel,
   maxProgressLabel,
-  variant = "default",
   orientation = "horizontal",
   direction = "up",
   labelsPosition,
@@ -64,20 +69,47 @@ const ProgressTracker = ({
   return /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressTracker, _extends({
     size: size,
     isVertical: isVertical
-  }, rest, (0, _tags.default)("progress-bar", rest)), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
+  }, rest, (0, _tags.default)("progress-bar", rest), {
+    role: "progressbar",
+    "aria-label": ariaLabel,
+    "aria-describedby": ariaDescribedBy,
+    "aria-valuenow": ariaValueNow,
+    "aria-valuemin": ariaValueMin,
+    "aria-valuemax": ariaValueMax,
+    "aria-valuetext": ariaValueText
+  }), prefixLabels && renderValueLabels(), /*#__PURE__*/_react.default.createElement(_progressTracker.StyledProgressBar, {
     direction: isVertical ? direction : undefined,
     isVertical: isVertical,
     size: size
   }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
     isVertical: isVertical,
     size: size,
-    progress: progress,
-    variant: variant
+    progress: progress
   })), !prefixLabels && renderValueLabels());
 };
 
 ProgressTracker.propTypes = { ...marginPropTypes,
 
+  /** Specifies an aria label to the component */
+  "aria-label": _propTypes.default.string,
+
+  /** Specifies the aria describedby for the component */
+  "aria-describedby": _propTypes.default.string,
+
+  /** The value of progress to be read out to the user. */
+  "aria-valuenow": _propTypes.default.number,
+
+  /** The minimum value of the progress tracker */
+  "aria-valuemin": _propTypes.default.number,
+
+  /** The maximum value of the progress tracker */
+  "aria-valuemax": _propTypes.default.number,
+
+  /** Prop to define the human readable text alternative of aria-valuenow
+   * if aria-valuenow is not a number
+   */
+  "aria-valuetext": _propTypes.default.string,
+
   /** Size of the progress bar. */
   size: _propTypes.default.oneOf(["small", "medium", "large"]),
 
@@ -93,12 +125,6 @@ ProgressTracker.propTypes = { ...marginPropTypes,
   /** Value to display as the maximum progress limit. */
   maxProgressLabel: _propTypes.default.string,
 
-  /**
-   * Sets the colour of the bar that shows the current progress.
-   * The "traffic" variant changes the colour of status bar depending on current progress.
-   */
-  variant: _propTypes.default.oneOf(["default", "traffic"]),
-
   /** The orientation of the component. */
   orientation: _propTypes.default.oneOf(["horizontal", "vertical"]),
 

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

@@ -1,3 +1,2 @@
 export const OUTER_TRACKER_LENGTH: "256px";
 export const PROGRESS_TRACKER_SIZES: string[];
-export const PROGRESS_TRACKER_VARIANTS: string[];

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

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PROGRESS_TRACKER_VARIANTS = exports.PROGRESS_TRACKER_SIZES = exports.OUTER_TRACKER_LENGTH = void 0;
+exports.PROGRESS_TRACKER_SIZES = exports.OUTER_TRACKER_LENGTH = void 0;
 const OUTER_TRACKER_LENGTH = "256px";
 exports.OUTER_TRACKER_LENGTH = OUTER_TRACKER_LENGTH;
 const PROGRESS_TRACKER_SIZES = ["small", "medium", "large"];
-exports.PROGRESS_TRACKER_SIZES = PROGRESS_TRACKER_SIZES;
-const PROGRESS_TRACKER_VARIANTS = ["default", "traffic"];
-exports.PROGRESS_TRACKER_VARIANTS = PROGRESS_TRACKER_VARIANTS;
+exports.PROGRESS_TRACKER_SIZES = PROGRESS_TRACKER_SIZES;

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

@@ -1,6 +1,19 @@
 import { MarginProps } from "styled-system";
 
 export interface ProgressBarProps extends MarginProps {
+  /** Specifies an aria-label to the component */
+  "aria-label"?: string;
+  /** Specifies the aria-describedby for the component */
+  "aria-describedby"?: string;
+  /** The value of progress to be read out to the user. */
+  "aria-valuenow"?: number;
+  /** The minimum value of the progress tracker */
+  "aria-valuemin"?: number;
+  /** The maximum value of the progress tracker */
+  "aria-valueMax"?: number;
+  /** Prop to define the human readable text alternative of aria-valuenow
+   * if aria-valuenow is not a number */
+  "aria-valuetext"?: string;
   /** Size of the progressBar. */
   size?: "small" | "medium" | "large";
   /** Current progress (percentage). */
@@ -11,11 +24,6 @@ export interface ProgressBarProps extends MarginProps {
   currentProgressLabel?: string;
   /** Value to display as the maximum progress limit. */
   maxProgressLabel?: string;
-  /**
-   * Sets the colour of the bar that shows the current progress.
-   * The "traffic" variant changes the colour of status bar depending on current progress.
-   * */
-  variant?: "default" | "traffic";
   /** The orientation of the component. */
   orientation?: "horizontal" | "vertical";
   /** The direction the bar should move as progress increases, only applies in vertical orientation. */

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

@@ -43,12 +43,11 @@ const StyledProgressBar = _styledComponents.default.span`
   ${({
   direction,
   isVertical,
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     display: flex;
     position: relative;
-    background-color: ${theme.progressTracker.background};
+    background-color: var(--colorsSemanticNeutral200);
 
     ${!isVertical && (0, _styledComponents.css)`
       overflow-x: hidden;
@@ -68,16 +67,12 @@ const StyledProgressBar = _styledComponents.default.span`
 `;
 exports.StyledProgressBar = StyledProgressBar;
 const StyledValue = _styledComponents.default.span`
+  color: var(--colorsUtilityYin090);
   ${({
-  isMaxValue,
-  theme
+  isMaxValue
 }) => (0, _styledComponents.css)`
-    ${isMaxValue && `
-      color: ${theme.text.placeholder};
-    `}
-    ${!isMaxValue && `
-      font-weight: bold;
-    `}
+    ${isMaxValue && `color: var(--colorsUtilityYin055);`}
+    ${!isMaxValue && `font-weight: bold;`}
   `}
 `;
 exports.StyledValue = StyledValue;
@@ -121,13 +116,11 @@ const InnerBar = _styledComponents.default.span`
   ${({
   isVertical,
   progress,
-  size,
-  theme,
-  variant
+  size
 }) => (0, _styledComponents.css)`
     position: absolute;
     left: 0;
-    background-color: ${getInnerBarColour(variant, progress, theme)};
+    background-color: ${getInnerBarColour(progress)};
 
     ${!isVertical && (0, _styledComponents.css)`
       width: calc(${_progressTracker.OUTER_TRACKER_LENGTH} * ${progress / 100});
@@ -146,44 +139,49 @@ exports.InnerBar = InnerBar;
 function getHeight(size) {
   switch (size) {
     case "small":
-      return "4px";
+      return "var(--sizing050)";
 
     case "large":
-      return "16px";
+      return "var(--sizing200)";
 
     default:
-      return "8px";
+      return "var(--sizing100)";
   }
 }
 
-function getInnerBarColour(variant, progress, theme) {
-  if (progress >= 100) return theme.colors.success;
-  if (variant === "default") return theme.progressTracker.innerBackground;
-  if (progress < 20) return theme.colors.error;
-  return theme.progressTracker.trafficNeutral;
+function getInnerBarColour(progress) {
+  if (progress >= 100) return "var(--colorsSemanticPositive500)";
+  return "var(--colorsSemanticNeutral500)";
 }
 
 StyledProgressTracker.defaultProps = {
   theme: _base.default
 };
 StyledProgressBar.defaultProps = {
-  theme: _base.default,
+  size: "medium"
+};
+InnerBar.defaultProps = {
+  progress: 0,
   size: "medium"
 };
 InnerBar.propTypes = {
   size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES),
   progress: _propTypes.default.number,
-  variant: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_VARIANTS)
+  isVertical: _propTypes.default.bool
 };
-InnerBar.defaultProps = {
-  progress: 0,
-  theme: _base.default,
-  size: "medium",
-  variant: "default"
+StyledProgressTracker.propTypes = {
+  theme: _propTypes.default.object,
+  isVertical: _propTypes.default.bool
 };
-StyledValue.defaultProps = {
-  theme: _base.default
+StyledValuesLabel.propTypes = {
+  isVertical: _propTypes.default.bool,
+  position: _propTypes.default.oneOf(["top", "bottom", "left", "right"])
+};
+StyledValue.propTypes = {
+  isMaxValue: _propTypes.default.bool
 };
 StyledProgressBar.propTypes = {
+  direction: _propTypes.default.oneOf(["up", "down"]),
+  isVertical: _propTypes.default.bool,
   size: _propTypes.default.oneOf(_progressTracker.PROGRESS_TRACKER_SIZES)
 };

package/lib/components/split-button/split-button-children.style.js

@@ -22,28 +22,28 @@ const StyledSplitButtonChildrenContainer = _styledComponents.default.div`
   theme,
   align
 }) => (0, _styledComponents.css)`
-    background-color: ${theme.colors.secondary};
+    background-color: var(--colorsActionMajorYang100);
     min-width: ${({
   minWidth
 }) => minWidth}px;
     white-space: nowrap;
     z-index: ${theme.zIndex.popover};
+    box-shadow: var(--boxShadow100);
 
     ${_button.default} {
-      background-color: ${theme.colors.secondary};
-      border: 1px solid ${theme.colors.secondary};
-      color: ${theme.colors.white};
+      background-color: var(--colorsActionMajorYang100);
+      border: 1px solid var(--colorsActionMajorTransparent);
+      color: var(--colorsActionMajor500);
       display: block;
       margin-left: 0;
-      margin-top: 3px;
-      margin-bottom: 3px;
       min-width: 100%;
       text-align: ${align};
       z-index: ${theme.zIndex.overlay};
 
       &:focus,
       &:hover {
-        background-color: ${theme.colors.tertiary};
+        color: var(--colorsActionMajorYang100);
+        background-color: var(--colorsActionMajor600);
       }
 
       & + & {

package/lib/components/split-button/split-button-toggle.style.js

@@ -27,23 +27,32 @@ const StyledSplitButtonToggle = (0, _styledComponents.default)(_button.default)`
   buttonType,
   disabled,
   displayed,
-  size,
-  theme
+  size
 }) => (0, _styledComponents.css)`
     ${!disabled && displayed ? (0, _styledComponents.css)`
-          background-color: ${theme.colors.secondary};
-          border-color: ${theme.colors.secondary};
+          background-color: var(--colorsActionMajor500);
+          border-color: var(--colorsActionMajor500);
 
           &,
           ${_icon.default} {
-            color: ${theme.colors.white};
+            color: var(--colorsActionMajorYang100);
           }
 
           &:focus {
-            border-left-color: ${theme.colors.secondary};
+            border-left-color: var(--colorsSemanticFocus500);
           }
         ` : ""}
-    ${!disabled && buttonType === "primary" && `border-left-color: ${theme.colors.secondary};`}
+    ${!disabled && buttonType === "primary" && `position: relative;
+      &::before {
+        content: '';
+        width: 2px;
+        height: 100%;
+        background: var(--colorsActionMajorYang100);
+        position: absolute;
+        left: -2px;
+        z-index: 2;
+      }  
+    `}
     ${buttonType === "secondary" && "border-left-width: 0;"}
     padding: 0 ${horizontalPaddingSizes[size]}px;
 

package/lib/components/split-button/split-button.style.js

@@ -25,9 +25,7 @@ const StyledSplitButton = _styledComponents.default.div`
     margin: 0;
 
     &:focus {
-      border: 3px solid ${({
-  theme
-}) => theme.colors.focus};
+      border: 3px solid var(--colorsSemanticFocus500);
       outline: none;
       margin: -1px;
     }

package/package.json

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