Fix UI regressions (#59)

* Fix UI regressions
caraml-dev · Sep 20, 2022 · 86eadea · 86eadea
1 parent 93961d9
commit 86eadea
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/ui/packages/app/package.json b/ui/packages/app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mlp-ui",
-  "version": "1.5.5",
+  "version": "1.6.2",
   "private": true,
   "license": "Apache-2.0",
   "dependencies": {

diff --git a/ui/packages/lib/package.json b/ui/packages/lib/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gojek/mlp-ui",
-  "version": "1.5.5",
+  "version": "1.6.2",
   "license": "Apache-2.0",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

diff --git a/ui/packages/lib/src/components/Toast.js b/ui/packages/lib/src/components/Toast.js
@@ -5,6 +5,8 @@ import isEqual from "react-fast-compare";
 let addToastHandler;
 let removeAllToastsHandler;
 
+let toastId = 0;
+
 // Other components can add toasts directly
 export const addToast = toast => {
   addToastHandler(toast);
@@ -19,6 +21,8 @@ export const Toast = ({ toastLifeTimeMs = 15000 }) => {
   const [toasts, setToasts] = useState([]);
 
   const addToast = toast => {
+    // Toast id should be unique to prevent it from being cleared continuously
+    toast.id = `${toast.id}-${toastId++}`;
     !toasts.find(t => isEqual(t, toast)) && setToasts(toasts.concat(toast));
   };
 

diff --git a/ui/packages/lib/src/components/multi_steps_form/StepsWizardHorizontal.js b/ui/packages/lib/src/components/multi_steps_form/StepsWizardHorizontal.js
@@ -32,8 +32,12 @@ export const StepsWizardHorizontal = ({
           <EuiStepsHorizontal
             steps={steps.map((step, idx) => ({
               title: step.title,
-              isSelected: idx === currentStep,
-              isComplete: idx < currentStep,
+              status:
+                idx === currentStep
+                  ? "current"
+                  : idx < currentStep
+                  ? "complete"
+                  : "incomplete",
               onClick: () => {
                 idx < currentStep && setCurrentStep(idx);
               }