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

fix(savings_goals/new): name field uses .form-field wrapper for floating label

Browse Source 
Drop the outer <label>Name</label> heading + label: false on the
text_field, and pass label: t(...) + container_class: "flex-1" so
styled_form_builder wraps the name input in Sure's standard .form-field
component. Label now sits inside the input box, matching the new
transaction modal pattern (and every other styled_form_with form across
Sure).

The avatar still sits as a sibling outside the box, flex-aligned center.
This commit is contained in:
Guillem Arias
2026-05-11 15:23:33 +02:00
parent a7bec613c0
commit cc46effc16
1 changed files with 2 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -26,7 +26,6 @@
</div>
<div>
<label class="block text-sm font-medium text-primary mb-2"><%= t("savings_goals.form_stepper.step1.fields.name") %></label>
<div class="flex items-center gap-2">
<span class="shrink-0" data-savings-goal-stepper-target="avatarPreview">
<%= render Savings::GoalAvatarComponent.new(name: savings_goal.name, color: savings_goal.color, size: "md") %>
@@ -34,8 +33,8 @@
<%= f.text_field :name,
placeholder: t("savings_goals.form_stepper.step1.fields.name_placeholder"),
autofocus: true,
label: false,
class: "flex-1",
label: t("savings_goals.form_stepper.step1.fields.name"),
container_class: "flex-1",
data: { savings_goal_stepper_target: "nameInput", action: "input->savings-goal-stepper#nameChanged" } %>
</div>
<p class="hidden mt-1.5 text-xs text-destructive" data-savings-goal-stepper-target="nameError"><%= t("savings_goals.form_stepper.errors.name_required") %></p>