fix(Workflow): ensure that resolved steps are rendered correctly in t…

…he presence of tooltip symbol
uzh-bf · Nov 8, 2024 · 0a6c520 · 0a6c520
1 parent 0f64b5a
commit 0a6c520
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/packages/design-system/src/Workflow.stories.tsx b/packages/design-system/src/Workflow.stories.tsx
@@ -231,11 +231,13 @@ export function Progress() {
     {
       title: 'Step 1',
       progress: 1,
+      tooltip: 'This is the first step',
     },
     {
       title: 'Step 2',
       progress: 1,
       completed: true,
+      tooltip: 'This is the second step',
     },
     {
       title: 'Step 3',
@@ -248,7 +250,7 @@ export function Progress() {
   ])
 
   return (
-    <div className="w-full">
+    <div className="flex w-full flex-col gap-3">
       <div>
         An enhanced version of the workflow component also allows to display the
         progress of a certain step on the corresponding button. If it is
@@ -273,6 +275,23 @@ export function Progress() {
           }
         }}
       />
+      <Workflow
+        showTooltipSymbols
+        items={itemsProgress}
+        onClick={(item, ix) => {
+          if (item.progress !== 1) {
+            setItemsProgress((prev) => {
+              const newItems = [...prev]
+              newItems[ix].progress += 0.1
+              if (newItems[ix].progress >= 0.999) {
+                newItems[ix].progress = 1
+                newItems[ix].completed = true
+              }
+              return newItems
+            })
+          }
+        }}
+      />
     </div>
   )
 }
diff --git a/packages/design-system/src/Workflow.tsx b/packages/design-system/src/Workflow.tsx
@@ -267,7 +267,7 @@ export function WorkflowItem({
             )}
           >
             {showTooltipSymbols && <div className="ml-2 w-3" />}
-            <div>
+            <div className="flex flex-row items-center gap-2">
               {(item.completed || item.progress === 1) && (
                 <FontAwesomeIcon className="mt-0.5" icon={faCheck} />
               )}