Repository: dusk-network/rusk (language: rust)

Issue:
web-wallet: Labels in Stepper Not Displaying Properly
### Description
There is a problem with the labels in the `Stepper` component not being displayed as expected. By default, all step labels should be visible because `showStepLabelWhenInactive` is set to `true` by default. However, due to a bug, inactive step labels are not being displayed.

### Problematic Code
The issue seems to originate from the following code snippet:
```
<span
  class="dusk-stepper__step-label"
  class:dusk-stepper__step-label--invisible={showStepLabelWhenInactive &&
    idx !== activeStep}
  {id}
/>
```

### Expected Behavior
When `showStepLabelWhenInactive` is `true` (default behavior), all step labels should be displayed, regardless of whether the step is active or inactive.

### Actual Behavior
Inactive step labels are not displayed, even when `showStepLabelWhenInactive` is `true`.

Illustrated in the components showcase:

<img width="723" alt="Screenshot 2024-12-21 at 18 52 42" src="https://github.com/user-attachments/assets/574e1918-d7ea-469f-8396-47867d0aab30" />


### Steps to Reproduce

1. Use the `Stepper` component in a project.
2. Ensure `showStepLabelWhenInactive` is true (or leave it as default).
3. Observe that labels for inactive steps are not displayed.

### Suggested Fix
- Investigate and correct the logic in the `class:dusk-stepper__step-label--invisible` binding to ensure that labels are correctly displayed when `showStepLabelWhenInactive` is `true`.
- Additionally, update the default value of `showStepLabelWhenInactive` to `false`, as this aligns with the intended behavior defined in the designs. This change will prevent confusion and ensure consistency with design specifications.


Discussion / hints:

Fix patch:
diff --git a/web-wallet/CHANGELOG.md b/web-wallet/CHANGELOG.md
index 8428c17f4b..65ee2c3eb7 100644
--- a/web-wallet/CHANGELOG.md
+++ b/web-wallet/CHANGELOG.md
@@ -26,6 +26,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fix wallet not waiting for the Wasm to load at startup [#3238]
 - Fix Public address icon in Receive flow [#3259]
 - Fix Public account icon hover text (Balance component) [#3259]
+- Fix labels in Stepper not displaying properly [#3265]
 
 ## [0.10.1] - 2024-12-18
 
@@ -478,6 +479,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 [#3238]: https://github.com/dusk-network/rusk/issues/3238
 [#3245]: https://github.com/dusk-network/rusk/issues/3245
 [#3259]: https://github.com/dusk-network/rusk/issues/3259
+[#3265]: https://github.com/dusk-network/rusk/issues/3265
 
 <!-- VERSIONS -->
 
diff --git a/web-wallet/src/lib/components/Send/Send.svelte b/web-wallet/src/lib/components/Send/Send.svelte
index fea27e89d7..8ead5944a5 100644
--- a/web-wallet/src/lib/components/Send/Send.svelte
+++ b/web-wallet/src/lib/components/Send/Send.svelte
@@ -158,7 +158,7 @@
 <div class="operation">
   <Wizard steps={steps.length} let:key>
     <div slot="stepper">
-      <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
+      <Stepper {activeStep} {steps} />
     </div>
     <!-- Address Step -->
     <WizardStep
diff --git a/web-wallet/src/lib/components/Stake/Stake.svelte b/web-wallet/src/lib/components/Stake/Stake.svelte
index e9cbfd9092..3946609cde 100644
--- a/web-wallet/src/lib/components/Stake/Stake.svelte
+++ b/web-wallet/src/lib/components/Stake/Stake.svelte
@@ -158,7 +158,7 @@
 <div class="operation">
   <Wizard steps={hideStakingNotice ? 3 : 4} let:key>
     <div slot="stepper">
-      <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
+      <Stepper {activeStep} {steps} />
     </div>
 
     {#if !hideStakingNotice}
diff --git a/web-wallet/src/lib/components/Stake/Unstake.svelte b/web-wallet/src/lib/components/Stake/Unstake.svelte
index b90c75b67e..df16d06c47 100644
--- a/web-wallet/src/lib/components/Stake/Unstake.svelte
+++ b/web-wallet/src/lib/components/Stake/Unstake.svelte
@@ -81,7 +81,7 @@
 <div class="operation">
   <Wizard steps={2} let:key>
     <div slot="stepper">
-      <Stepper {activeStep} {steps} showStepLabelWhenInactive={false} />
+      <Stepper {activeStep} {steps} />
     </div>
 
     <!-- OPERATION OVERVIEW STEP  -->
diff --git a/web-wallet/src/lib/dusk/components/Stepper/Stepper.svelte b/web-wallet/src/lib/dusk/components/Stepper/Stepper.svelte
index 251abd44c2..bb88add2b7 100644
--- a/web-wallet/src/lib/dusk/components/Stepper/Stepper.svelte
+++ b/web-wallet/src/lib/dusk/components/Stepper/Stepper.svelte
@@ -26,7 +26,7 @@
    * Whether to show the step label when the step is inactive.
    * @type {boolean}
    */
-  export let showStepLabelWhenInactive = true;
+  export let showStepLabelWhenInactive = false;
 
   /**
    * The number of steps, greater or equal to two,
@@ -91,7 +91,7 @@
 
         <span
           class="dusk-stepper__step-label"
-          class:dusk-stepper__step-label--invisible={showStepLabelWhenInactive ||
+          class:dusk-stepper__step-label--invisible={!showStepLabelWhenInactive &&
             idx !== activeStep}
           {id}
         >
@@ -104,8 +104,9 @@
           class="dusk-stepper__step"
           class:dusk-stepper__step--processed={idx <= activeStep}
           aria-current={idx === activeStep ? "step" : undefined}
-          >{showStepNumbers ? idx + 1 : ""}</span
         >
+          {showStepNumbers ? idx + 1 : ""}
+        </span>
       {/each}
     {/if}
   </div>
diff --git a/web-wallet/src/routes/components-showcase/Steppers.svelte b/web-wallet/src/routes/components-showcase/Steppers.svelte
index 2e36cfdb65..a7e257de68 100644
--- a/web-wallet/src/routes/components-showcase/Steppers.svelte
+++ b/web-wallet/src/routes/components-showcase/Steppers.svelte
@@ -93,7 +93,7 @@
   </div>
 
   <div class="steppers__container">
-    <Stepper activeStep={stepB} steps={stepsB} />
+    <Stepper activeStep={stepB} steps={stepsB} showStepLabelWhenInactive />
 
     <div class="steppers__buttons">
       <Button on:click={handleStepChange} text="Previous" size="small" />
@@ -143,7 +143,7 @@
     }
 
     .steppers__container {
-      width: 80%;
+      width: 100%;
       padding: 2rem;
       background-color: var(--surface-color);
       border-radius: var(--control-border-radius-size);


Test patch:
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
index 4630d1063d..ca0c20d9ad 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
@@ -57,6 +57,13 @@ describe("Stepper", () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  it("should render the `Stepper` with all step labels being displayed, if the right flag is provided ", async () => {
+    const props = { ...baseProps, showStepLabelWhenInactive: true, steps: 5 };
+    const { container } = render(Stepper, { ...baseOptions, props });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
   it("should pass additional class names and attributes to the rendered element", () => {
     const props = {
       ...baseProps,
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
index edcd5fc5e1..1272c66a0f 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
@@ -42,7 +42,7 @@ exports[`Stepper > should add the proper class name for the desired variant 1`]
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     baz
@@ -131,7 +131,7 @@ exports[`Stepper > should allow to hide the step numbers 1`] = `
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     baz
@@ -221,7 +221,7 @@ exports[`Stepper > should pass additional class names and attributes to the rend
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     baz
@@ -277,27 +277,32 @@ exports[`Stepper > should render the \`Stepper\` component accepting a number as
     class="dusk-stepper__step dusk-stepper__step--processed"
   >
     1
+     
   </span>
   <span
     class="dusk-stepper__step dusk-stepper__step--processed"
   >
     2
+     
   </span>
   <span
     aria-current="step"
     class="dusk-stepper__step dusk-stepper__step--processed"
   >
     3
+     
   </span>
   <span
     class="dusk-stepper__step"
   >
     4
+     
   </span>
   <span
     class="dusk-stepper__step"
   >
     5
+     
   </span>
   
 </div>
@@ -359,7 +364,7 @@ exports[`Stepper > should render the \`Stepper\` component accepting a number as
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     qux
@@ -434,7 +439,7 @@ exports[`Stepper > should render the \`Stepper\` component accepting an array of
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     baz
@@ -537,7 +542,7 @@ exports[`Stepper > should render the \`Stepper\` component accepting an array of
   </span>
    
   <span
-    class="dusk-stepper__step-label dusk-stepper__step-label--invisible"
+    class="dusk-stepper__step-label"
     id="step-some-generated-id"
   >
     qux
@@ -569,3 +574,43 @@ exports[`Stepper > should render the \`Stepper\` component accepting an array of
   
 </div>
 `;
+
+exports[`Stepper > should render the \`Stepper\` with all step labels being displayed, if the right flag is provided  1`] = `
+<div
+  class="dusk-stepper dusk-stepper--variant--primary"
+  style="--columns: 5; --progress-width: 40%;"
+>
+  <span
+    class="dusk-stepper__step dusk-stepper__step--processed"
+  >
+    1
+     
+  </span>
+  <span
+    class="dusk-stepper__step dusk-stepper__step--processed"
+  >
+    2
+     
+  </span>
+  <span
+    aria-current="step"
+    class="dusk-stepper__step dusk-stepper__step--processed"
+  >
+    3
+     
+  </span>
+  <span
+    class="dusk-stepper__step"
+  >
+    4
+     
+  </span>
+  <span
+    class="dusk-stepper__step"
+  >
+    5
+     
+  </span>
+  
+</div>
+`;
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index 52e5e996bb..742791db0a 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -27,37 +27,44 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -267,37 +274,44 @@ exports[`Create > correctly renders the Mnemonic Verification page 1`] = `
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -679,37 +693,44 @@ exports[`Create > doesn't let the user proceed if they have entered mismatching
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -1128,37 +1149,44 @@ exports[`Create > ensures that the Undo button on the Mnemonic Validate step wor
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -1558,37 +1586,44 @@ exports[`Create > ensures the All Done step renders as expected 1`] = `
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       6
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       7
+       
     </span>
     
   </div>
@@ -1698,37 +1733,44 @@ exports[`Create > ensures the Network Syncing step renders as expected 1`] = `
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       5
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -1915,37 +1957,44 @@ exports[`Create > ensures the Password step renders as expected 1`] = `
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -2116,37 +2165,44 @@ exports[`Create > ensures the Password step renders as expected 2`] = `
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -2355,37 +2411,44 @@ exports[`Create > ensures the Swap To Native Dusk step renders as expected 1`] =
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       4
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -2507,37 +2570,44 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       2
+       
     </span>
     <span
       aria-current="step"
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
@@ -2926,36 +2996,43 @@ exports[`Create > should render the \`Securely store your mnemonic phrase!\` agr
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       2
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       6
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       7
+       
     </span>
     
   </div>
diff --git a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
index cc60846e1d..39bf475718 100644
--- a/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/restore/__tests__/__snapshots__/page.spec.js.snap
@@ -109,26 +109,31 @@ exports[`Restore > should render the Mnemonic Authenticate step after accepting
       class="dusk-stepper__step dusk-stepper__step--processed"
     >
       1
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       2
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       3
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       4
+       
     </span>
     <span
       class="dusk-stepper__step"
     >
       5
+       
     </span>
     
   </div>