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

fix(savings_goals/new): step 2 back button inline + form-field wrappers on initial-contribution inputs

Browse Source 
DS::Button treats "hidden" as a display override class — adding
class: "hidden" stripped the base inline-flex display, so when Stimulus
later removed the hidden class the icon and text stacked vertically.
Wrap the Back button in a hidden <div> and toggle the wrapper instead;
the button keeps its inline-flex base.

The Amount + From-account inputs in step 2 used label_tag +
number_field_tag / select_tag directly with no .form-field wrapper, so
they rendered as bare inputs (same issue Name had in step 1). Wrap
each in .form-field > .form-field__body with form-field__label and
form-field__input classes — matches the styled_form_with pattern used
by Target amount / Target date in step 1.
This commit is contained in:
Guillem Arias
2026-05-11 15:44:15 +02:00
parent 8b59d85380
commit a4db186f1f
1 changed files with 34 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/views/savings_goals/_form_stepper.html.erb
View File

@@ -132,44 +132,47 @@
<%= icon("chevron-down", size: "sm") %>
</summary>
<div class="px-4 pb-4 space-y-3">
<div>
<%= label_tag "savings_goal[initial_contribution_amount]",
t("savings_goals.form_stepper.step2.initial_amount"),
class: "block text-sm text-secondary mb-1" %>
<%= number_field_tag "savings_goal[initial_contribution_amount]",
nil,
step: "0.01", min: "0",
autocomplete: "off",
class: "w-full",
data: { savings_goal_stepper_target: "initialContributionAmount" } %>
<div class="form-field">
<div class="form-field__body">
<%= label_tag "savings_goal[initial_contribution_amount]",
t("savings_goals.form_stepper.step2.initial_amount"),
class: "form-field__label" %>
<%= number_field_tag "savings_goal[initial_contribution_amount]",
nil,
step: "0.01", min: "0",
autocomplete: "off",
class: "form-field__input",
data: { savings_goal_stepper_target: "initialContributionAmount" } %>
</div>
</div>
<div>
<%= label_tag "savings_goal[initial_contribution_account_id]",
t("savings_goals.form_stepper.step2.initial_account"),
class: "block text-sm text-secondary mb-1" %>
<%= select_tag "savings_goal[initial_contribution_account_id]",
options_for_select([]),
include_blank: t("savings_goals.form_stepper.step2.select_account"),
data: { savings_goal_stepper_target: "initialContributionAccountSelect" },
class: "w-full" %>
<div class="form-field">
<div class="form-field__body">
<%= label_tag "savings_goal[initial_contribution_account_id]",
t("savings_goals.form_stepper.step2.initial_account"),
class: "form-field__label" %>
<%= select_tag "savings_goal[initial_contribution_account_id]",
options_for_select([]),
include_blank: t("savings_goals.form_stepper.step2.select_account"),
data: { savings_goal_stepper_target: "initialContributionAccountSelect" },
class: "form-field__input" %>
</div>
</div>
</div>
</details>
</section>
<div class="flex items-center justify-between pt-2">
<%= render DS::Button.new(
variant: "ghost",
text: t("savings_goals.form_stepper.back"),
icon: "arrow-left",
icon_position: :left,
class: "hidden",
data: {
savings_goal_stepper_target: "footerLeftButton",
action: "click->savings-goal-stepper#footerLeft"
}
) %>
<span data-savings-goal-stepper-target="footerLeftPlaceholder"></span>
<div class="hidden" data-savings-goal-stepper-target="footerLeftButton">
<%= render DS::Button.new(
variant: "ghost",
text: t("savings_goals.form_stepper.back"),
icon: "arrow-left",
icon_position: :left,
data: {
action: "click->savings-goal-stepper#footerLeft"
}
) %>
</div>
<%= render DS::Button.new(
text: t("savings_goals.form_stepper.continue"),
variant: "primary",