feat(progress-bar): add status prop (#1560)

* ProgressBar status feature added

* ProgressBar: Removed the css variables and use carbon-css instead.
The way of assigning the ProgressBar value has change. It is now a style
variable and scale-x is calculated in the css. This way prevent the
override of carbon css.

* Removed an unessacery span.

* Removed an unnecessary span.

* Added the status for the ProgressBarUx

* Remove `style css` and update docs.

* - Fixed the `capped` variable for more readability
- Updated docs `label` and `helperText`
- Updated docs and css

* fix: finished/error states cannot be indeterminate

* Run "yarn build:css"

* Re-run "yarn build:docs"

* test(progress-bar): assert `status` prop

* chore: add aria-busy and set valuenow to 0 when not active

---------

Co-authored-by: Eric Liu <ericyl.us@gmail.com>
Co-authored-by: Enrico Sacchetti <enrico@theetrain.ca>

COMPONENT_INDEX.md

@@ -2819,6 +2819,7 @@ None.
 | value      | No       | <code>let</code> | No       | <code>number</code>                                      | <code>undefined</code>                           | Specify the current value                     |
 | max        | No       | <code>let</code> | No       | <code>number</code>                                      | <code>100</code>                                 | Specify the maximum value                     |
 | kind       | No       | <code>let</code> | No       | <code>"default" &#124; "inline" &#124; "indented"</code> | <code>"default"</code>                           | Specify the kind of progress bar              |
+| status     | No       | <code>let</code> | No       | <code>"active" &#124; "finished" &#124; "error"</code>   | <code>"active"</code>                            | Specify the status                            |
 | size       | No       | <code>let</code> | No       | <code>"sm" &#124; "md"</code>                            | <code>"md"</code>                                | Specify the size                              |
 | labelText  | No       | <code>let</code> | No       | <code>string</code>                                      | <code>""</code>                                  | Specify the label text                        |
 | hideLabel  | No       | <code>let</code> | No       | <code>boolean</code>                                     | <code>false</code>                               | Set to `true` to visually hide the label text |

docs/src/COMPONENT_API.json

@@ -8973,6 +8973,18 @@
           "constant": false,
           "reactive": false
         },
+        {
+          "name": "status",
+          "kind": "let",
+          "description": "Specify the status",
+          "type": "\"active\" | \"finished\" | \"error\"",
+          "value": "\"active\"",
+          "isFunction": false,
+          "isFunctionDeclaration": false,
+          "isRequired": false,
+          "constant": false,
+          "reactive": false
+        },
         {
           "name": "size",
           "kind": "let",

docs/src/pages/components/ProgressBar.svx

@@ -21,6 +21,18 @@ Specify a `value` for the progress bar to be determinate.
 
 <ProgressBar value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
+## Finished status
+
+Specify `status="finished"` for the progress bar.
+
+<ProgressBar value={100} status="finished" labelText="Upload file" helperText="Upload complete" />
+
+## Error status
+
+Specify `status="error"` for the progress bar.
+
+<ProgressBar value={0} status="error" labelText="Upload file" helperText="Invalid file format" />
+
 ## Custom max value
 
 The default `max` value is `100`.
@@ -45,6 +57,10 @@ The inline variant visually hides the `helperText`.
 
 <ProgressBar kind="indented" value={40} labelText="Upload status" helperText="40 MB of 100 MB" />
 
+## Indented status variant
+
+<ProgressBar kind="indented" status="finished" value={40} labelText="Upload file" helperText="Upload complete" />
+
 ## UX example
 
 This example shows how to animate the progress bar from 0 to 100% with start and end states.

docs/src/pages/framed/ProgressBar/ProgressBarUx.svelte

@@ -3,10 +3,14 @@
 
   let max = 328;
   let value = 0;
+  let status = "active";
 
   $: helperText =
     value > 0 ? value.toFixed(0) + "MB of " + max + "MB" : "Press start";
-  $: if (value === max) helperText = "Done";
+  $: if (value === max) {
+    helperText = "Done";
+    status = "finished";
+  }
 </script>
 
 <ProgressBar
@@ -14,6 +18,7 @@
   value="{value}"
   max="{max}"
   helperText="{helperText}"
+  status="{status}"
 />
 
 <ButtonSet style="margin-top: var(--cds-spacing-08)">
@@ -37,7 +42,10 @@
   <Button
     kind="tertiary"
     disabled="{value !== max}"
-    on:click="{() => (value = 0)}"
+    on:click="{() => {
+      value = 0;
+      status = 'active';
+    }}"
   >
     Reset
   </Button>

package.json

@@ -28,7 +28,7 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@tsconfig/svelte": "^3.0.0",
     "autoprefixer": "^10.4.8",
-    "carbon-components": "10.56.0",
+    "carbon-components": "10.57.0",
     "carbon-icons-svelte": "^11.2.0",
     "postcss": "^8.4.16",
     "prettier": "^2.7.1",

src/ProgressBar/ProgressBar.svelte

@@ -14,6 +14,12 @@
    */
   export let kind = "default";
 
+  /**
+   * Specify the status
+   * @type {"active" | "finished" | "error"}
+   */
+  export let status = "active";
+
   /**
    * Specify the size
    * @type {"sm" | "md"}
@@ -32,10 +38,27 @@
   /** Set an id for the progress bar element */
   export let id = "ccs-" + Math.random().toString(36);
 
+  import CheckmarkFilled from "../icons/CheckmarkFilled.svelte";
+  import ErrorFilled from "../icons/ErrorFilled.svelte";
+
+  const statusIcons = {
+    error: ErrorFilled,
+    finished: CheckmarkFilled,
+  };
+
   let helperId = "ccs-" + Math.random().toString(36);
 
-  $: indeterminate = value === undefined;
-  $: capped = value > max ? max : value < 0 ? 0 : value;
+  $: indeterminate = value === undefined && status === "active";
+  let capped;
+  $: {
+    if (status === "error" || value < 0) {
+      capped = 0;
+    } else if (value > max) {
+      capped = max;
+    } else {
+      capped = value;
+    }
+  }
 </script>
 
 <div
@@ -45,6 +68,8 @@
   class:bx--progress-bar--small="{size === 'sm'}"
   class:bx--progress-bar--inline="{kind === 'inline'}"
   class:bx--progress-bar--indented="{kind === 'indented'}"
+  class:bx--progress-bar--error="{status === 'error'}"
+  class:bx--progress-bar--finished="{status === 'finished'}"
   {...$$restProps}
 >
   <label
@@ -55,11 +80,18 @@
     <slot name="labelText">
       {labelText}
     </slot>
+    {#if status === "error" || status === "finished"}
+      <svelte:component
+        this="{statusIcons[status]}"
+        class="bx--progress-bar__status-icon"
+      />
+    {/if}
   </label>
   <div
     role="progressbar"
     id="{id}"
     class:bx--progress-bar__track="{true}"
+    aria-busy="{status === 'active'}"
     aria-valuemin="{indeterminate ? undefined : 0}"
     aria-valuemax="{indeterminate ? undefined : max}"
     aria-valuenow="{indeterminate ? undefined : capped}"
@@ -67,7 +99,7 @@
   >
     <div
       class:bx--progress-bar__bar="{true}"
-      style="transform: scaleX({capped / max})"
+      style:transform="{status === "active" && `scaleX(${capped / max})`}"
     ></div>
   </div>
   {#if helperText}

tests/ProgressBar.test.svelte

@@ -12,4 +12,5 @@
   labelText="Upload status"
   hideLabel
   helperText="40 MB of 100 MB"
+  status="finished"
 />

types/ProgressBar/ProgressBar.svelte.d.ts

@@ -21,6 +21,12 @@ export interface ProgressBarProps
    */
   kind?: "default" | "inline" | "indented";
 
+  /**
+   * Specify the status
+   * @default "active"
+   */
+  status?: "active" | "finished" | "error";
+
   /**
    * Specify the size
    * @default "md"

yarn.lock

@@ -358,10 +358,10 @@ caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001373:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001382.tgz#4d37f0d0b6fffb826c8e5e1c0f4bf8ce592db949"
   integrity sha512-2rtJwDmSZ716Pxm1wCtbPvHtbDWAreTPxXbkc5RkKglow3Ig/4GNGazDI9/BVnXbG/wnv6r3B5FEbkfg9OcTGg==
 
-carbon-components@10.56.0:
-  version "10.56.0"
-  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.56.0.tgz#bb5890f00f81cebcddfa2dbae4794477deb539f4"
-  integrity sha512-GPLqHiu2SWvMxcQOi/CcgA/XA3aX/5HiEPSQjLwzjKAJsnkpzq043Jf7QwgLOVbTBzGSjFbFkJnE2lc73I2WBw==
+carbon-components@10.57.0:
+  version "10.57.0"
+  resolved "https://registry.yarnpkg.com/carbon-components/-/carbon-components-10.57.0.tgz#0583ad19e4366b9c2eff127b6dc811d8a210910e"
+  integrity sha512-wX0KyxUhFY6vkgR9f1sWGTyR+WRoXRxmtnOFLOG4lLkYbqXS2wy6uu1QmqXJW1vXp2dOL3S1NOM/z2xnjD6kvg==
   dependencies:
     "@carbon/telemetry" "0.1.0"
     flatpickr "4.6.1"