carbon-react 102.22.1 → 103.0.0

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,12 +1,11 @@
 export default ProgressTracker;
-declare function ProgressTracker({ size, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, variant, orientation, direction, labelsPosition, ...rest }: {
+declare function ProgressTracker({ size, progress, showDefaultLabels, currentProgressLabel, maxProgressLabel, orientation, direction, labelsPosition, ...rest }: {
     [x: string]: 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;
@@ -18,7 +17,6 @@ declare namespace ProgressTracker {
         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>;

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

@@ -29,7 +29,6 @@ const ProgressTracker = ({
   showDefaultLabels = false,
   currentProgressLabel,
   maxProgressLabel,
-  variant = "default",
   orientation = "horizontal",
   direction = "up",
   labelsPosition,
@@ -71,8 +70,7 @@ const ProgressTracker = ({
   }, /*#__PURE__*/_react.default.createElement(_progressTracker.InnerBar, {
     isVertical: isVertical,
     size: size,
-    progress: progress,
-    variant: variant
+    progress: progress
   })), !prefixLabels && renderValueLabels());
 };
 
@@ -93,12 +91,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

@@ -11,11 +11,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/package.json

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