design and product feedbacks addressed

frontend/src/AppBuilder/RightSideBar/Inspector/Components/Steps.jsx

@@ -63,14 +63,14 @@ export function Steps({ componentMeta, darkMode, ...restProps }) {
     let currentNumber = options.length + 1;
     while (!found) {
       label = `step ${currentNumber}`;
-      if (options.find((option) => option.label === label) === undefined) {
+      if (options.find((option) => option.name === label) === undefined) {
         found = true;
       }
       currentNumber += 1;
     }
     return {
       name: label,
-      id: Number((Math.random() * 1000).toFixed(0)),
+      id: currentNumber - 1,
       tooltip: label,
       visible: { value: '{{true}}' },
       disabled: { value: '{{false}}' },

frontend/src/AppBuilder/WidgetManager/widgets/steps.js

@@ -10,7 +10,7 @@ export const stepsConfig = {
       validation: { schema: { type: 'string' }, defaultValue: 'titles' },
       options: [
         { displayName: 'Label', value: 'titles' },
-        { displayName: 'Numbers', value: 'numbers' },
+        { displayName: 'Number', value: 'numbers' },
         { displayName: 'Plain', value: 'plain' },
       ],
       accordian: 'label',
@@ -36,18 +36,18 @@ export const stepsConfig = {
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
     },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: { schema: { type: 'boolean' } },
+      section: 'additionalActions',
+    },
     visibility: {
       type: 'toggle',
       displayName: 'Visibility',
       validation: { schema: { type: 'boolean' }, defaultValue: true },
       section: 'additionalActions',
     },
-    // disabledState: {
-    //   type: 'toggle',
-    //   displayName: 'Disable',
-    //   validation: { schema: { type: 'boolean' }, defaultValue: true },
-    //   section: 'additionalActions',
-    // },
     advanced: {
       type: 'toggle',
       displayName: 'Dynamic options',
@@ -226,11 +226,11 @@ export const stepsConfig = {
       schema: {
         value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`,
       },
+      disabledState: { value: '{{false}}' },
       variant: { value: 'titles' },
       currentStep: { value: '{{3}}' },
       stepsSelectable: { value: true },
       advanced: { value: `{{false}}` },
-      // disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
     },
     events: [],

frontend/src/Editor/Components/Steps.jsx

@@ -3,7 +3,7 @@ import { isExpectedDataType } from '@/_helpers/utils';
 import { ToolTip } from '@/_components/ToolTip';
 
 export const Steps = function Button({ properties, styles, fireEvent, setExposedVariable, height, darkMode, dataCy }) {
-  const { stepsSelectable: disabledState } = properties;
+  const { stepsSelectable, disabledState } = properties;
   const visibility = isExpectedDataType(properties.visibility, 'boolean');
   const currentStepId = isExpectedDataType(properties.currentStep, 'number');
   const isDynamicStepsEnabled = isExpectedDataType(properties.advanced, 'boolean');
@@ -13,7 +13,7 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
   const { completedAccent, incompletedAccent, incompletedLabel, completedLabel, currentStepLabel } = styles;
   const [stepsArr, setStepsArr] = useState(steps);
   const [isVisible, setIsVisible] = useState(visibility);
-  const [isDisabled, setIsDisabled] = useState(!disabledState);
+  const [isDisabled, setIsDisabled] = useState(disabledState);
   const [activeStepId, setActiveStepId] = useState(currentStepId);
   const filteredSteps = (stepsArr || []).filter((step) => step.visible);
   const currentStepIndex = filteredSteps.findIndex((step) => step.id == activeStepId);
@@ -58,20 +58,14 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
     setExposedVariable('isDisabled', isDisabled);
   }, [isDisabled]);
 
-  useEffect(() => {
-    setIsDisabled(!disabledState);
-  }, [disabledState]);
-
-  useEffect(() => {
-    setExposedVariable('setStep', (stepId) => setActiveStepId(stepId));
-    setExposedVariable('setVisibility', (visibility) => setIsVisible(visibility));
-    setExposedVariable('setDisabled', (disabled) => setIsDisabled(disabled));
-  }, []);
-
   useEffect(() => {
     setExposedVariable('currentStepId', activeStepId);
   }, [activeStepId]);
 
+  useEffect(() => {
+    setIsDisabled(disabledState);
+  }, [disabledState]);
+
   useEffect(() => {
     setActiveStepId(currentStepId);
   }, [currentStepId]);
@@ -107,6 +101,15 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
     });
   }, [JSON.stringify(steps), JSON.stringify(stepsArr)]);
 
+  useEffect(() => {
+    setExposedVariable('setStep', (stepId) => {
+      if (disabledState) return;
+      setActiveStepId(stepId);
+    });
+    setExposedVariable('setVisibility', (visibility) => setIsVisible(visibility));
+    setExposedVariable('setDisable', (disabled) => setIsDisabled(disabled));
+  }, []);
+
   return (
     isVisible && (
       <div
@@ -116,9 +119,15 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
           height,
           boxShadow,
           opacity: isDisabled ? 0.5 : 1,
-          ...(theme === 'plain' && {
-            alignItems: 'center',
-          }),
+          ...(theme === 'numbers'
+            ? {
+                paddingTop: 4,
+              }
+            : theme === 'plain'
+            ? {
+                paddingTop: 10,
+              }
+            : {}),
         }}
         data-cy={dataCy}
       >
@@ -142,10 +151,26 @@ export const Steps = function Button({ properties, styles, fireEvent, setExposed
                 }`}
                 data-bs-toggle="tooltip"
                 title={item?.tooltip}
-                onClick={() => !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
-                style={dynamicStyle}
+                onClick={() => stepsSelectable && !isDisabled && !isStepDisabled && activeStepHandler(item.id)}
+                style={{
+                  ...dynamicStyle,
+                  overflow: 'visible',
+                  minWidth: 0,
+                  flex: 1,
+                }}
               >
-                {theme == 'titles' && (item.name?.length > 12 ? item.name.slice(0, 12) + '...' : item.name)}
+                <div
+                  style={{
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    maxWidth: '100%',
+                    paddingLeft: index >= 0 ? 5 : 0,
+                    paddingRight: index < filteredSteps.length - 1 ? 5 : 0,
+                  }}
+                >
+                  {theme == 'titles' && item.name}
+                </div>
               </a>
             </ToolTip>
           );

frontend/src/_styles/tabler.scss

@@ -7664,29 +7664,33 @@ fieldset:disabled .btn {
 }
 
 .rounded {
-    border-radius: 4px ;
+    border-radius: 4px;
 }
 
 .rounded-0 {
     border-radius: 0 !important
 }
 
-.rounded-top-left{
+.rounded-top-left {
     border-top-left-radius: 4px;
 }
 
-.rounded-top-left-0{
+.rounded-top-left-0 {
     border-top-left-radius: 0 !important;
 }
-.rounded-top-right-0{
+
+.rounded-top-right-0 {
     border-top-right-radius: 0 !important;
 }
-.rounded-bottom-left-0{
+
+.rounded-bottom-left-0 {
     border-bottom-left-radius: 0 !important;
 }
-.rounded-bottom-right-0{
+
+.rounded-bottom-right-0 {
     border-bottom-right-radius: 0 !important;
 }
+
 .rounded-1 {
     border-radius: 2px !important
 }
@@ -17499,8 +17503,8 @@ a.step-item:hover {
     }
 }
 
-.step-item.active {
-    font-weight: 600
+.step-item {
+    font-weight: 500;
 }
 
 .step-item.active:before {
@@ -17517,7 +17521,7 @@ a.step-item:hover {
 }
 
 .step-item.active~.step-item:before {
-    color: #656d77 !important
+    color: var(--incompletedLabel) !important
 }
 
 .steps-counter {
@@ -17545,7 +17549,8 @@ a.step-item:hover {
 .steps-counter .step-item:before {
     font-size: .75rem;
     line-height: 1.5rem;
-    content: counter(steps)
+    content: counter(steps);
+    font-weight: 500 !important;
 }
 
 .steps-counter .step-item.active~.step-item:before {
@@ -19152,4 +19157,4 @@ img {
         background: #1f2936;
         border-color: #dadcde
     }
-}
+}

frontend/src/_styles/theme.scss

@@ -6524,7 +6524,7 @@ a.step-item-disabled {
 }
 
 .step-item.active:before {
-  background: #ffffff !important;
+  background: transparent !important;
 }
 
 .steps .step-item.active:before {

server/src/modules/apps/services/widget-config/steps.js

@@ -10,7 +10,7 @@ export const stepsConfig = {
       validation: { schema: { type: 'string' }, defaultValue: 'titles' },
       options: [
         { displayName: 'Label', value: 'titles' },
-        { displayName: 'Numbers', value: 'numbers' },
+        { displayName: 'Number', value: 'numbers' },
         { displayName: 'Plain', value: 'plain' },
       ],
       accordian: 'label',
@@ -36,18 +36,18 @@ export const stepsConfig = {
         defaultValue: `[{ name: 'step 1'}, {name: 'step 2'}]`,
       },
     },
+    disabledState: {
+      type: 'toggle',
+      displayName: 'Disable',
+      validation: { schema: { type: 'boolean' } },
+      section: 'additionalActions',
+    },
     visibility: {
       type: 'toggle',
       displayName: 'Visibility',
       validation: { schema: { type: 'boolean' }, defaultValue: true },
       section: 'additionalActions',
     },
-    // disabledState: {
-    //   type: 'toggle',
-    //   displayName: 'Disable',
-    //   validation: { schema: { type: 'boolean' }, defaultValue: true },
-    //   section: 'additionalActions',
-    // },
     advanced: {
       type: 'toggle',
       displayName: 'Dynamic options',
@@ -226,11 +226,11 @@ export const stepsConfig = {
       schema: {
         value: `{{ [{ name: 'step 1', tooltip: 'some tooltip', id: 1,visible: true, disabled: false},{ name: 'step 2', tooltip: 'some tooltip', id: 2,visible: true, disabled: false},{ name: 'step 3', tooltip: 'some tooltip', id: 3,visible: true, disabled: false},{ name: 'step 4', tooltip: 'some tooltip', id: 4,visible: true, disabled: false},{ name: 'step 5', tooltip: 'some tooltip', id: 5,visible: true, disabled: false}]}}`,
       },
+      disabledState: { value: '{{false}}' },
       variant: { value: 'titles' },
       currentStep: { value: '{{3}}' },
       stepsSelectable: { value: true },
       advanced: { value: `{{false}}` },
-      // disabledState: { value: '{{false}}' },
       visibility: { value: '{{true}}' },
     },
     events: [],