feat(progress-bar): port support for statuses from v10 to v11

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -5149,6 +5149,16 @@ Map {
         ],
         "type": "oneOf",
       },
+      "status": Object {
+        "args": Array [
+          Array [
+            "active",
+            "finished",
+            "error",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "type": Object {
         "args": Array [
           Array [

packages/react/src/components/ProgressBar/ProgressBar-test.js

@@ -24,7 +24,9 @@ describe('ProgressBar', () => {
   describe('renders as expected', () => {
     it('progress bar and label ids match', () => {
       const bar = wrapper.getByRole('progressbar');
-      const label = wrapper.container.querySelector('span');
+      const label = wrapper.container.querySelector(
+        `.${prefix}--progress-bar__label`
+      );
       expect(bar.getAttribute('aria-labelledby')).toBe(label.id);
     });
 
@@ -41,9 +43,11 @@ describe('ProgressBar', () => {
       ).toBe(helperText.id);
     });
 
-    it('still renders accessible when hideLabel is passed', () => {
+    it('still renders accessible label when hideLabel is passed', () => {
       wrapper.rerender(<ProgressBar {...props} hideLabel />);
-      const label = wrapper.container.querySelector('span');
+      const label = wrapper.container.querySelector(
+        `.${prefix}--progress-bar__label`
+      );
 
       expect(label.textContent).toBe(props.label);
       expect(label.classList.contains(`${prefix}--visually-hidden`)).toBe(true);
@@ -90,6 +94,38 @@ describe('ProgressBar', () => {
           .classList.contains(className)
       ).toBe(true);
     });
+
+    it('supports finished status', () => {
+      wrapper.rerender(<ProgressBar {...props} status="finished" />);
+
+      expect(
+        wrapper.container
+          .querySelector(`.${prefix}--progress-bar`)
+          .classList.contains(`${prefix}--progress-bar--finished`)
+      ).toBe(true);
+
+      expect(
+        wrapper.getByRole('progressbar').getAttribute('aria-valuenow')
+      ).toBe('100');
+    });
+
+    it('supports error status', () => {
+      wrapper.rerender(<ProgressBar {...props} status="error" />);
+
+      expect(
+        wrapper.container
+          .querySelector(`.${prefix}--progress-bar`)
+          .classList.contains(`${prefix}--progress-bar--error`)
+      ).toBe(true);
+
+      expect(
+        wrapper.getByRole('progressbar').getAttribute('aria-valuenow')
+      ).toBe('0');
+
+      expect(
+        wrapper.getByRole('progressbar').getAttribute('aria-invalid')
+      ).toBe('true');
+    });
   });
 
   describe('behaves as expected', () => {

packages/react/src/components/ProgressBar/ProgressBar.js

@@ -8,6 +8,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
+import { CheckmarkFilled, ErrorFilled } from '@carbon/icons-react';
 import { useId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
 
@@ -18,14 +19,19 @@ function ProgressBar({
   label,
   max = 100,
   size = 'big',
+  status = 'active',
   type = 'default',
   value,
 }) {
   const labelId = useId('progress-bar');
   const helperId = useId('progress-bar-helper');
   const prefix = usePrefix();
 
-  const indeterminate = value === null || value === undefined;
+  const isFinished = status === 'finished';
+  const isError = status === 'error';
+
+  const indeterminate =
+    !isFinished && !isError && (value === null || value === undefined);
 
   let cappedValue = value;
   if (cappedValue > max) {
@@ -34,6 +40,11 @@ function ProgressBar({
   if (cappedValue < 0) {
     cappedValue = 0;
   }
+  if (isError) {
+    cappedValue = 0;
+  } else if (isFinished) {
+    cappedValue = max;
+  }
 
   const percentage = cappedValue / max;
 
@@ -43,6 +54,8 @@ function ProgressBar({
     `${prefix}--progress-bar--${type}`,
     {
       [`${prefix}--progress-bar--indeterminate`]: indeterminate,
+      [`${prefix}--progress-bar--finished`]: isFinished,
+      [`${prefix}--progress-bar--error`]: isError,
     },
     className
   );
@@ -51,22 +64,43 @@ function ProgressBar({
     [`${prefix}--visually-hidden`]: hideLabel,
   });
 
+  let StatusIcon = null;
+
+  if (isError) {
+    StatusIcon = React.forwardRef(function ErrorFilled16(props, ref) {
+      return <ErrorFilled ref={ref} size={16} {...props} />;
+    });
+  } else if (isFinished) {
+    StatusIcon = React.forwardRef(function CheckmarkFilled16(props, ref) {
+      return <CheckmarkFilled ref={ref} size={16} {...props} />;
+    });
+  }
+
   return (
     <div className={wrapperClasses}>
-      <span className={labelClasses} id={labelId}>
-        {label}
-      </span>
+      <div className={labelClasses} id={labelId}>
+        <span className={`${prefix}--progress-bar__label-text`}>{label}</span>
+        {StatusIcon && (
+          <StatusIcon className={`${prefix}--progress-bar__status-icon`} />
+        )}
+      </div>
+      {/* eslint-disable-next-line jsx-a11y/role-supports-aria-props */}
       <div
         className={`${prefix}--progress-bar__track`}
         role="progressbar"
+        aria-invalid={isError}
         aria-labelledby={labelId}
         aria-describedby={helperText ? helperId : null}
         aria-valuemin={!indeterminate ? 0 : null}
         aria-valuemax={!indeterminate ? max : null}
         aria-valuenow={!indeterminate ? cappedValue : null}>
         <div
           className={`${prefix}--progress-bar__bar`}
-          style={{ transform: `scaleX(${percentage})` }}
+          style={
+            !isFinished && !isError
+              ? { transform: `scaleX(${percentage})` }
+              : null
+          }
         />
       </div>
       {helperText && (
@@ -109,6 +143,11 @@ ProgressBar.propTypes = {
    */
   size: PropTypes.oneOf(['small', 'big']),
 
+  /**
+   * Specify the status.
+   */
+  status: PropTypes.oneOf(['active', 'finished', 'error']),
+
   /**
    * Defines the alignment variant of the progress bar.
    */

packages/react/src/components/ProgressBar/next/ProgressBar.stories.js

@@ -22,6 +22,23 @@ export const _ProgressBar = () => (
   />
 );
 
+const PlaygroundStory = (args) => (
+  <ProgressBar
+    label="Progress bar label"
+    helperText="Optional helper text"
+    {...args}
+  />
+);
+
+export const Playground = PlaygroundStory.bind({});
+
+Playground.argTypes = {
+  status: {
+    options: ['active', 'finished', 'error'],
+    control: { type: 'select' },
+  },
+};
+
 export const Indeterminate = () => (
   <ProgressBar label="Progress bar label" helperText="Optional helper text" />
 );
@@ -59,6 +76,7 @@ export const Example = () => {
     <ProgressBar
       value={running ? progress : null}
       max={size}
+      status={progress === size ? 'finished' : 'active'}
       label="Export data"
       helperText={helperText}
     />

packages/styles/scss/components/progress-bar/_progress-bar.scss

@@ -20,14 +20,23 @@
   .#{$prefix}--progress-bar__label {
     @include type-style('body-compact-01');
 
-    display: block;
+    display: flex;
+    min-width: rem(48px);
+    justify-content: space-between;
     margin-bottom: $spacing-03;
     color: $text-primary;
   }
 
+  .#{$prefix}--progress-bar__label-text {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .#{$prefix}--progress-bar__track {
     position: relative;
     width: 100%;
+    min-width: rem(48px);
     height: rem(8px);
     background-color: $layer;
   }
@@ -44,7 +53,8 @@
     display: block;
     width: 100%;
     height: 100%;
-    background-color: $interactive;
+    background-color: currentColor;
+    color: $interactive;
     transform: scaleX(0);
     transform-origin: 0 center #{'/*rtl:100% center*/'};
     transition: transform $duration-fast-02 motion(standard, productive);
@@ -74,10 +84,47 @@
   .#{$prefix}--progress-bar__helper-text {
     @include type-style('helper-text-01');
 
-    margin-top: $spacing-02;
+    margin-top: $spacing-03;
     color: $text-secondary;
   }
 
+  .#{$prefix}--progress-bar__status-icon {
+    flex-shrink: 0;
+    margin-left: $spacing-05;
+  }
+
+  .#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__bar,
+  .#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__status-icon {
+    color: $support-success;
+  }
+
+  .#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__bar,
+  .#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__status-icon,
+  .#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__helper-text {
+    color: $support-error;
+  }
+
+  .#{$prefix}--progress-bar--finished .#{$prefix}--progress-bar__bar,
+  .#{$prefix}--progress-bar--error .#{$prefix}--progress-bar__bar {
+    transform: scaleX(1);
+  }
+
+  .#{$prefix}--progress-bar--finished.#{$prefix}--progress-bar--inline
+    .#{$prefix}--progress-bar__track,
+  .#{$prefix}--progress-bar--error.#{$prefix}--progress-bar--inline
+    .#{$prefix}--progress-bar__track {
+    @include visually-hidden;
+  }
+
+  .#{$prefix}--progress-bar--finished.#{$prefix}--progress-bar--inline
+    .#{$prefix}--progress-bar__label,
+  .#{$prefix}--progress-bar--error.#{$prefix}--progress-bar--inline
+    .#{$prefix}--progress-bar__label {
+    flex-shrink: 1;
+    justify-content: flex-start;
+    margin-right: 0;
+  }
+
   @keyframes progress-bar-indeterminate {
     0% {
       background-position-x: 25%;
@@ -100,6 +147,11 @@
     margin-inline-end: $spacing-05;
   }
 
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__track {
+    flex-basis: 0;
+    flex-grow: 1;
+  }
+
   .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__helper-text {
     @include visually-hidden;
   }