QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-29 23:39:03 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(goals/stepper): inactive connector line uses border-subdued

Browse Source 
RUI audit: form-stepper progress line used `border-secondary` for
the inactive state — same weight as the active step's border, so
the active-step circle didn't visually pop against the line
connecting it to the inactive step. Recede passive states.

Swap to `border-subdued` (the DS's quieter divider) for the
inactive (step 1) line state. The active state stays `border-inverse`.
JS toggle in `goal_stepper_controller.js#updateStepperState` follows.
This commit is contained in:
Guillem Arias
2026-05-14 21:51:55 +02:00
parent 8e9a697b1f
commit ff98a9cee2
2 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/controllers/goal_stepper_controller.js
View File

@@ -186,7 +186,7 @@ export default class extends Controller {
}
if (this.hasStepperLineTarget) {
this.stepperLineTarget.classList.toggle("border-inverse", this.currentStep > 1);
this.stepperLineTarget.classList.toggle("border-secondary", this.currentStep === 1);
this.stepperLineTarget.classList.toggle("border-subdued", this.currentStep === 1);
}
// Modal subtitle lives in the dialog header, outside this controller's
// DOM scope. Locate it by attribute and update directly.

2
app/views/goals/_form_stepper.html.erb
View File

@@ -18,7 +18,7 @@
<span data-goal-stepper-target="step1Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center bg-inverse text-inverse text-xs font-medium">1</span>
<span class="text-sm font-medium text-primary"><%= t("goals.form_stepper.step1.label") %></span>
</div>
<div class="flex-1 border-t-2 border-secondary" data-goal-stepper-target="stepperLine"></div>
<div class="flex-1 border-t-2 border-subdued" data-goal-stepper-target="stepperLine"></div>
<div class="flex items-center gap-2" data-goal-stepper-target="step2Indicator">
<span data-goal-stepper-target="step2Circle" class="w-7 h-7 rounded-full inline-flex items-center justify-center border border-secondary text-secondary text-xs font-medium">2</span>
<span class="text-sm font-medium text-secondary"><%= t("goals.form_stepper.step2.label") %></span>