QT/sure
1
0
Fork 0
mirror of https://github.com/we-promise/sure.git synced 2026-05-30 15:59:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(savings_goals/new): checkbox styling, visible stepper, DS::Disclosure for notes, drop redundant cancel

Browse Source 
Use Sure's .checkbox checkbox--light classes on the funding-account
check_box_tag — matches transactions / entries / settings pages.

Stepper line: 2px tall bg-secondary in resting state (was 1px bg-subdued
which disappeared in dark mode). Step 2 inactive circle: border-secondary
outline instead of bg-container-inset fill — visible in both themes.

Notes collapse switches from raw <details> to DS::Disclosure for
consistency with the rest of Sure's DS.

Drop the footer Cancel button — the close X in the modal header already
handles that, and double cancel was redundant. The footer-left slot now
only renders Back (with arrow-left icon) and only on step 2.
This commit is contained in:
Guillem Arias
2026-05-11 15:13:04 +02:00
parent c3bf6a157f
commit 27863882fe
2 changed files with 19 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/javascript/controllers/savings_goal_stepper_controller.js
View File

@@ -51,12 +51,7 @@ export default class extends Controller {
footerLeft(event) {
event.preventDefault();
if (this.currentStep === 1) {
const dialog = this.element.closest("dialog");
if (dialog) dialog.close();
} else {
this.back();
}
this.back();
}
footerRight(event) {
@@ -194,11 +189,13 @@ export default class extends Controller {
if (this.hasStep2CircleTarget) {
this.step2CircleTarget.classList.toggle("bg-inverse", this.currentStep === 2);
this.step2CircleTarget.classList.toggle("text-inverse", this.currentStep === 2);
this.step2CircleTarget.classList.toggle("bg-container-inset", this.currentStep < 2);
this.step2CircleTarget.classList.toggle("border", this.currentStep < 2);
this.step2CircleTarget.classList.toggle("border-secondary", this.currentStep < 2);
this.step2CircleTarget.classList.toggle("text-secondary", this.currentStep < 2);
}
if (this.hasStepperLineTarget) {
this.stepperLineTarget.classList.toggle("bg-inverse", this.currentStep > 1);
this.stepperLineTarget.classList.toggle("bg-secondary", this.currentStep === 1);
}
// Modal subtitle lives in the dialog header, outside this controller's
// DOM scope. Locate it by attribute and update directly.
@@ -211,11 +208,7 @@ export default class extends Controller {
updateFooter() {
if (this.hasFooterLeftButtonTarget) {
const labelSpan = this.footerLeftButtonTarget.querySelector("span");
if (labelSpan) {
labelSpan.textContent =
this.currentStep === 1 ? this.cancelLabelValue : this.backLabelValue;
}
this.footerLeftButtonTarget.classList.toggle("hidden", this.currentStep === 1);
}
if (this.hasFooterRightButtonTarget) {
const labelSpan = this.footerRightButtonTarget.querySelector("span");