Merge pull request #404 from IBM/fix-progress-indicator

fix(progress-indicator): allow currentIndex to be programmatically updated

COMPONENT_INDEX.md

@@ -2503,7 +2503,7 @@ None.
 | currentIndex         | <code>let</code> | Yes      | <code>number</code>  | <code>0</code>     | Specify the current step index                                                                 |
 | vertical             | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to use the vertical variant                                                      |
 | spaceEqually         | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to specify whether the progress steps should be split equally in size in the div |
-| preventChangeOnClick | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to prevent updating `currentIndex`                                               |
+| preventChangeOnClick | <code>let</code> | No       | <code>boolean</code> | <code>false</code> | Set to `true` to prevent `currentIndex` from updating                                          |
 
 ### Slots
 
@@ -2513,13 +2513,13 @@ None.
 
 ### Events
 
-| Event name | Type       | Detail |
-| :--------- | :--------- | :----- |
-| click      | forwarded  | --     |
-| mouseover  | forwarded  | --     |
-| mouseenter | forwarded  | --     |
-| mouseleave | forwarded  | --     |
-| change     | dispatched | --     |
+| Event name | Type       | Detail              |
+| :--------- | :--------- | :------------------ |
+| change     | dispatched | <code>number</code> |
+| click      | forwarded  | --                  |
+| mouseover  | forwarded  | --                  |
+| mouseenter | forwarded  | --                  |
+| mouseleave | forwarded  | --                  |
 
 ## `ProgressIndicatorSkeleton`
 

docs/src/COMPONENT_API.json

@@ -6697,7 +6697,7 @@
         {
           "name": "preventChangeOnClick",
           "kind": "let",
-          "description": "Set to `true` to prevent updating `currentIndex`",
+          "description": "Set to `true` to prevent `currentIndex` from updating",
           "type": "boolean",
           "value": "false",
           "isFunction": false,
@@ -6707,11 +6707,11 @@
       ],
       "slots": [{ "name": "__default__", "default": true, "slot_props": "{}" }],
       "events": [
+        { "type": "dispatched", "name": "change", "detail": "number" },
         { "type": "forwarded", "name": "click", "element": "ul" },
         { "type": "forwarded", "name": "mouseover", "element": "ul" },
         { "type": "forwarded", "name": "mouseenter", "element": "ul" },
-        { "type": "forwarded", "name": "mouseleave", "element": "ul" },
-        { "type": "dispatched", "name": "change" }
+        { "type": "forwarded", "name": "mouseleave", "element": "ul" }
       ],
       "typedefs": [],
       "rest_props": { "type": "Element", "name": "ul" }

docs/src/pages/components/ProgressIndicator.svx

@@ -53,6 +53,12 @@ Set `preventChangeOnClick` to `true` to prevent this behavior.
   />
 </ProgressIndicator>
 
+### Programmatic usage
+
+When programmatically updating the `currentIndex`, keep in mind that only completed steps should be selectable.
+
+<FileSource src="/framed/ProgressIndicator/ProgrammaticProgressIndicator" />
+
 ### Spaced-equally
 
 <ProgressIndicator spaceEqually>
@@ -89,4 +95,10 @@ Set `preventChangeOnClick` to `true` to prevent this behavior.
 
 ### Skeleton
 
-<ProgressIndicatorSkeleton count={3} />
+Use the `count` prop to specify the number of progress steps to render.
+
+<ProgressIndicatorSkeleton />
+
+### Skeleton (vertical)
+
+<ProgressIndicatorSkeleton vertical />

docs/src/pages/framed/ProgressIndicator/ProgrammaticProgressIndicator.svelte

@@ -0,0 +1,49 @@
+<script>
+  import {
+    ProgressIndicator,
+    ProgressStep,
+    Button,
+  } from "carbon-components-svelte";
+
+  let currentIndex = 1;
+  let thirdStepCurrent = false;
+</script>
+
+<ProgressIndicator bind:currentIndex>
+  <ProgressStep
+    complete
+    label="Step 1"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    complete
+    label="Step 2"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    complete
+    bind:current="{thirdStepCurrent}"
+    label="Step 3"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+  <ProgressStep
+    label="Step 4"
+    description="The progress indicator will listen for clicks on the steps"
+  />
+</ProgressIndicator>
+
+<div style="margin: var(--cds-layout-02) 0">
+  <Button
+    kind="{currentIndex === 2 ? 'secondary' : 'primary'}"
+    on:click="{() => {
+      currentIndex = currentIndex === 2 ? 0 : 2;
+    }}"
+  >
+    Set currentIndex to
+    {currentIndex === 2 ? 0 : 2}
+  </Button>
+</div>
+
+<h3>Current index: {currentIndex}</h3>
+
+<div>Is the third step currently selected? {thirdStepCurrent}</div>

src/ProgressIndicator/ProgressIndicator.svelte

@@ -8,7 +8,7 @@
   /** Set to `true` to specify whether the progress steps should be split equally in size in the div */
   export let spaceEqually = false;
 
-  /** Set to `true` to prevent updating `currentIndex` */
+  /** Set to `true` to prevent `currentIndex` from updating */
   export let preventChangeOnClick = false;
 
   import { createEventDispatcher, setContext } from "svelte";
@@ -24,28 +24,40 @@
     steps,
     stepsById,
     add: (step) => {
-      steps.update((_) => [
-        ..._,
-        {
-          ...step,
-          index: _.length,
-          current: _.length === currentIndex,
-          complete: _.length <= currentIndex,
-        },
-      ]);
+      steps.update((_) => {
+        if (step.id in $stepsById) {
+          return _.map((_step) => {
+            if (_step.id === step.id) return { ..._step, ...step };
+            return _step;
+          });
+        }
+
+        return [
+          ..._,
+          {
+            ...step,
+            index: _.length,
+            current: _.length === currentIndex,
+            complete: step.complete,
+          },
+        ];
+      });
     },
     change: (index) => {
       if (preventChangeOnClick) return;
       currentIndex = index;
-      steps.update((_) =>
-        [..._].map((step, i) => ({
-          ...step,
-          current: i === index,
-        }))
-      );
+
+      /** @event {number} change */
       dispatch("change", index);
     },
   });
+
+  $: steps.update((_) =>
+    _.map((step, i) => ({
+      ...step,
+      current: i === currentIndex,
+    }))
+  );
 </script>
 
 <ul

src/ProgressIndicator/ProgressStep.svelte

@@ -23,19 +23,29 @@
   /** Set an id for the top-level element */
   export let id = "ccs-" + Math.random().toString(36);
 
-  import { getContext } from "svelte";
+  import { onMount, getContext } from "svelte";
   import CheckmarkOutline16 from "carbon-icons-svelte/lib/CheckmarkOutline16";
   import Warning16 from "carbon-icons-svelte/lib/Warning16";
 
+  let step = {};
+
   const { stepsById, add, change } = getContext("ProgressIndicator");
 
-  add({ id, disabled });
+  $: add({ id, complete, disabled });
 
-  $: step = $stepsById[id];
-  $: {
-    current = step.current;
-    complete = step.complete;
-  }
+  const unsubscribe = stepsById.subscribe((value) => {
+    if (value[id]) {
+      step = value[id];
+      current = step.current;
+      complete = step.complete;
+    }
+  });
+
+  onMount(() => {
+    return () => {
+      unsubscribe();
+    };
+  });
 </script>
 
 <li

types/ProgressIndicator/ProgressIndicator.d.ts

@@ -20,7 +20,7 @@ export interface ProgressIndicatorProps extends svelte.JSX.HTMLAttributes<HTMLEl
   spaceEqually?: boolean;
 
   /**
-   * Set to `true` to prevent updating `currentIndex`
+   * Set to `true` to prevent `currentIndex` from updating
    * @default false
    */
   preventChangeOnClick?: boolean;
@@ -32,10 +32,10 @@ export default class ProgressIndicator {
     default: {};
   };
 
+  $on(eventname: "change", cb: (event: CustomEvent<number>) => void): () => void;
   $on(eventname: "click", cb: (event: WindowEventMap["click"]) => void): () => void;
   $on(eventname: "mouseover", cb: (event: WindowEventMap["mouseover"]) => void): () => void;
   $on(eventname: "mouseenter", cb: (event: WindowEventMap["mouseenter"]) => void): () => void;
   $on(eventname: "mouseleave", cb: (event: WindowEventMap["mouseleave"]) => void): () => void;
-  $on(eventname: "change", cb: (event: CustomEvent<any>) => void): () => void;
   $on(eventname: string, cb: (event: Event) => void): () => void;
 }