feat(savings_goals/new): drop required asterisks, hide currency, collapse notes, clean footer

P1 of modal refactor — visual fidelity baseline against the Claude
Design reference and refactoring-ui rules.

Drop required: true on name + target_amount (suppresses both the red `*`
indicator and the browser-default HTML5 validation tooltip). Client-side
validation moves into the Stimulus stepper in a follow-up commit.

Pass hide_currency: true on the money_field so single-currency families
don't see a redundant inline currency dropdown.

Wrap the Notes textarea in a <details> disclosure ("Add notes (optional)"
summary) so step 1 isn't padded with rarely-used fields.

Drop the footer top border-subdued divider so the action row floats
against the dialog's existing padding boundary.

Drop the view-layer SavingsGoal::COLORS.sample fallback on hidden color
field — the controller already seeds @savings_goal.color.
This commit is contained in:
Guillem Arias
2026-05-11 14:56:29 +02:00
parent f51e38f4fc
commit c04b306bfd
2 changed files with 21 additions and 10 deletions

View File

@@ -33,17 +33,18 @@
</span> </span>
<%= f.text_field :name, <%= f.text_field :name,
placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"), placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"),
required: true,
autofocus: true, autofocus: true,
label: "", label: false,
class: "flex-1" %> class: "flex-1",
data: { savings_goal_stepper_target: "nameInput", action: "input->savings-goal-stepper#nameChanged" } %>
</div> </div>
</div> </div>
<div class="grid grid-cols-2 gap-3"> <div class="grid grid-cols-2 gap-3">
<%= f.money_field :target_amount, <%= f.money_field :target_amount,
label: t("savings_goals.form_stepper.step1.fields.target_amount"), label: t("savings_goals.form_stepper.step1.fields.target_amount"),
required: true %> hide_currency: true,
amount_data: { savings_goal_stepper_target: "amountInput" } %>
<%= f.date_field :target_date, <%= f.date_field :target_date,
label: t("savings_goals.form_stepper.step1.fields.target_date") %> label: t("savings_goals.form_stepper.step1.fields.target_date") %>
</div> </div>
@@ -81,12 +82,20 @@
</div> </div>
</div> </div>
<%= f.text_area :notes, <details class="border border-subdued rounded-lg group">
label: t("savings_goals.form_stepper.step1.fields.notes"), <summary class="flex items-center justify-between gap-3 px-4 py-3 cursor-pointer list-none text-sm font-medium text-primary">
rows: 2 %> <span><%= t("savings_goals.form_stepper.step1.fields.notes_summary") %></span>
<%= icon("chevron-down", size: "sm", class: "group-open:rotate-180 transition-transform") %>
</summary>
<div class="px-4 pb-4">
<%= f.text_area :notes,
label: "",
rows: 2,
placeholder: t("savings_goals.form_stepper.step1.fields.notes_placeholder") %>
</div>
</details>
<%# Hidden color (random) %> <%= f.hidden_field :color %>
<%= f.hidden_field :color, value: savings_goal.color || SavingsGoal::COLORS.sample %>
</section> </section>
<section data-savings-goal-stepper-target="step2Panel" class="space-y-5 hidden"> <section data-savings-goal-stepper-target="step2Panel" class="space-y-5 hidden">
@@ -150,7 +159,7 @@
</details> </details>
</section> </section>
<div class="flex items-center justify-between pt-2 border-t border-subdued -mx-1 px-1"> <div class="flex items-center justify-between pt-2">
<button type="button" <button type="button"
class="text-sm font-medium text-secondary hover:text-primary px-2 py-2" class="text-sm font-medium text-secondary hover:text-primary px-2 py-2"
data-savings-goal-stepper-target="footerLeftButton" data-savings-goal-stepper-target="footerLeftButton"

View File

@@ -196,6 +196,8 @@ en:
target_date: Target date target_date: Target date
color: Color color: Color
notes: Notes (optional) notes: Notes (optional)
notes_summary: Add notes (optional)
notes_placeholder: A reminder for future you…
funding_accounts: Funding accounts funding_accounts: Funding accounts
subtypes: subtypes:
checking: Checking checking: Checking