Adopt button component + helpers at existing call sites by MichaelCrawfordNava · Pull Request #360 · navapbc/strata-sdk-rails

MichaelCrawfordNava · 2026-05-26T17:21:23Z

Changes

Migrates every hand-written usa-button / usa-button-group call site in the engine and dummy app to the new Strata::US::ButtonComponent, Strata::US::ButtonGroupComponent, strata_link_to, and strata_button_to.

Net diff: 16 files changed, +72 / -67. Almost entirely mechanical.

Engine:

app/views/strata/shared/_form_buttons.html.erb
app/views/strata/tasks/index.html.erb
app/views/strata/application_forms/index.html.erb
app/components/strata/flows/task_section_component.rb
app/components/strata/flows/task_list_component.html.erb
app/components/strata/us/card_component.rb (doc-comment example)
app/previews/strata/us/card_component_preview.rb
app/previews/strata/us/card_group_component_preview.rb
docs/uswds-components.md (Card example)

Dummy app:

spec/dummy/app/views/tasks/details/_passport_verify_info_task.html.erb
spec/dummy/app/views/tasks/details/_passport_photo_task.html.erb
spec/dummy/app/views/tasks/show.html.erb
spec/dummy/app/views/passport_application_forms/show.html.erb
spec/dummy/app/views/sample_application_forms/review.html.erb
spec/dummy/app/views/sample_application_forms/_form_buttons.html.erb
spec/dummy/app/views/sample_application_forms/new.html.erb

Context

The final-state PR in the three-PR stack — stacks on #359 (cael/uswds-button-helpers), which stacks on #358 (cael/uswds-button-component).

Migration rules applied:

Before	After
`link_to ..., class: "usa-button ..."`	`strata_link_to ..., as: :button, variant: ...`
`button_to ..., class: "usa-button ..."`	`strata_button_to ..., variant: ...`
`form.button` or non-Strata `f.submit` with `class: "usa-button"`	`class: Strata::US::ButtonComponent.css_classes(...)` (Rails owns the tag; no helper fits)
`f.submit "...", class: "usa-button"` inside `strata_form_with`	drop the redundant `class:` — FormBuilder already adds `usa-button`
`<ul class="usa-button-group">…</ul>`	`render Strata::US::ButtonGroupComponent.new do
Inline `<button class="usa-button">` in card previews	kept as HTML string with interpolated `css_classes` (Lookbook nested-render limitation — `render` inside a slot block doesn't work in Lookbook previews; see the existing comment in `list_component_preview.rb`)

Drive-by fix: a few <li> wrappers inside button groups were missing the usa-button-group__item class (_form_buttons.html.erb in both engine and dummy app). The component now guarantees the correct structure.

No new specs in this PR — adoption is verified by the existing test suite continuing to pass.

Testing

$ make lint-ci
355 files inspected, no offenses detected

$ make test
1401 examples, 0 failures

Test plan:

make test passes — the existing test suite exercises the migrated views and components.
make start and browse the dummy app — touched flows include the sample application form (/sample_application_forms/new, /sample_application_forms/:id/review), passport application form (/passport_application_forms/:id), task index/show pages, and the embedded passport task details. Confirm buttons render visually unchanged.
Browse Lookbook (http://localhost:3000/lookbook) — Card, Card Group, and Button Group previews still render correctly after the inline-button update.

Introduces two new ViewComponents in the Strata::US namespace: - Strata::US::ButtonComponent renders a USWDS-styled <button> or, when given an href:, an <a>. Supports variant, size, inverse, disabled, and type. Exposes a .css_classes class method that returns the bare USWDS class string for use at call sites where Rails owns the element rendering (button_to, link_to, form.button, f.submit). - Strata::US::ButtonGroupComponent renders <ul class="usa-button-group"> with each entry wrapped in <li class="usa-button-group__item">. Supports the segmented variant. Refactors FormBuilder#submit to delegate to ButtonComponent.css_classes and gain a :variant option for non-primary submit buttons; the existing :big option and margin-y-6 spacing are preserved. Includes Lookbook previews, specs, and docs/uswds-components.md sections for both components. Follow-up PRs will add view helpers (strata_link_to / strata_button_to) and migrate existing call sites. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Introduces two view helpers in Strata::ApplicationHelper that wrap Rails' link_to / button_to and apply USWDS styling via Strata::US::ButtonComponent: - strata_link_to (in Strata::LinksHelper) defaults to a pure passthrough to link_to. Pass `as: :button` to opt into button styling, with the same :variant, :size, :inverse keywords as the component. Raises ArgumentError if :variant/:size/:inverse are passed without `as: :button` (catches "forgot to opt in" mistakes) or on an unrecognized :as value. - strata_button_to (in Strata::ButtonsHelper) wraps Rails' button_to and always applies USWDS button styling — button_to is unambiguously about producing a CSRF-protected form-wrapped button. Includes new docs/strata-view-helpers.md, registers it in docs/README.md and CLAUDE.md, and cross-links from the Button section in docs/uswds-components.md. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Migrates every hand-written usa-button / usa-button-group call site in the engine and dummy app to use the new Strata::US::ButtonComponent, Strata::US::ButtonGroupComponent, strata_link_to, and strata_button_to. - link_to with usa-button class → strata_link_to ..., as: :button - button_to with usa-button class → strata_button_to - form.button / non-Strata f.submit → class: Strata::US::ButtonComponent.css_classes(...) - f.submit "...", class: "usa-button" inside strata_form_with → drop the redundant class (FormBuilder adds it) - <ul class="usa-button-group"> blocks → render Strata::US::ButtonGroupComponent - Inline <button class="usa-button"> in card previews → interpolated ButtonComponent.css_classes (Lookbook nested-render limitation) - Doc-comment examples in card_component.rb updated to reference the new component Also fixes a small markup bug at a few sites that were missing the usa-button-group__item class on the <li> wrappers — the component now guarantees the correct structure. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Copilot

Pull request overview

Migrates existing USWDS button and button-group call sites across the Strata engine and dummy app to use the centralized Strata::US::ButtonComponent / Strata::US::ButtonGroupComponent and the strata_link_to / strata_button_to helpers, reducing repeated class strings and standardizing markup.

Changes:

Replaces hand-written usa-button / usa-button-group markup with strata_link_to, strata_button_to, and Strata::US::ButtonGroupComponent usages.
Updates card docs/comments and Lookbook previews to reference the new button component styling source of truth (ButtonComponent.css_classes).
Normalizes button group structure so items are consistently wrapped with usa-button-group__item.

Reviewed changes

Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
app/views/strata/shared/_form_buttons.html.erb	Moves form navigation buttons into `ButtonGroupComponent` + `strata_link_to`.
app/views/strata/tasks/index.html.erb	Migrates “Pick up next task” to `strata_button_to`.
app/views/strata/application_forms/index.html.erb	Migrates “New” action to `strata_link_to(..., as: :button)`.
app/components/strata/flows/task_section_component.rb	Uses `helpers.strata_link_to` for task action buttons.
app/components/strata/flows/task_list_component.html.erb	Migrates review/submit action to `strata_button_to`.
app/components/strata/us/card_component.rb	Updates doc-comment example to use `ButtonComponent`.
app/previews/strata/us/card_component_preview.rb	Updates preview footer button markup to use `ButtonComponent.css_classes`.
app/previews/strata/us/card_group_component_preview.rb	Updates preview footer button markup to use `ButtonComponent.css_classes`.
docs/uswds-components.md	Updates Card example to render `ButtonComponent` directly.
spec/dummy/app/views/tasks/details/_passport_verify_info_task.html.erb	Replaces manual `<ul>/<li>` button group with `ButtonGroupComponent` + `css_classes`.
spec/dummy/app/views/tasks/details/_passport_photo_task.html.erb	Replaces manual `<ul>/<li>` button group with `ButtonGroupComponent` + `css_classes`.
spec/dummy/app/views/tasks/show.html.erb	Migrates “Assign to me” button-styled link to `strata_link_to`.
spec/dummy/app/views/passport_application_forms/show.html.erb	Migrates “Edit application” to `strata_link_to(..., as: :button)`.
spec/dummy/app/views/sample_application_forms/review.html.erb	Replaces ad-hoc button group container with `ButtonGroupComponent` and consistent button classes.
spec/dummy/app/views/sample_application_forms/_form_buttons.html.erb	Migrates shared form buttons to `ButtonGroupComponent` + `strata_link_to`.
spec/dummy/app/views/sample_application_forms/new.html.erb	Migrates initial form buttons to `ButtonGroupComponent` + `strata_link_to`.

MichaelCrawfordNava · 2026-05-28T01:44:27Z

@claude Please merge main into this branch and resolve conflicts, as needed

claude · 2026-05-28T01:45:47Z

Claude finished @MichaelCrawfordNava's task in 3m 48s —— View job

Merged `main` into `cael/uswds-button-adoption`

Fetched latest main
Ran merge (--allow-unrelated-histories was required — main was squash-merged into a single commit, so git saw no common ancestor)
Resolved 18 add/add conflicts
Verified merge result matches the PR's expected 16-file diff
Pushed merge commit 24b4c17

How the conflicts were resolved

The merge produced "add/add" conflicts on every file the prior two PRs in the stack touched, because squash-merging on main rewrote the history. Resolution strategy:

Took our branch's version (16 files) — these are the files modified by the adoption commit (d6f999c); our HEAD already contains the helpers content + the adoption changes:

app/components/strata/flows/{task_list_component.html.erb,task_section_component.rb} · app/components/strata/us/card_component.rb · app/previews/strata/us/{card_component_preview.rb,card_group_component_preview.rb} · app/views/strata/application_forms/index.html.erb · app/views/strata/shared/_form_buttons.html.erb · app/views/strata/tasks/index.html.erb · spec/dummy/app/views/passport_application_forms/show.html.erb · spec/dummy/app/views/sample_application_forms/{_form_buttons.html.erb,new.html.erb,review.html.erb} · spec/dummy/app/views/tasks/details/{_passport_photo_task.html.erb,_passport_verify_info_task.html.erb} · spec/dummy/app/views/tasks/show.html.erb

Took main's version (2 files) — these are refinements made on the helpers PR after our branch was cut and weren't touched by the adoption commit:

app/previews/strata/us/button_group_component_preview.rb — refactored to use sibling .html.erb templates (new files default.html.erb and segmented.html.erb came along)
docs/strata-view-helpers.md — section heading renamed "Components" → "Helpers"

Hand-merged 1 file — modified by both sides:

docs/uswds-components.md — main added a new "Helpers and css_classes" section explaining f.submit and form builder integration; adoption updated the Card example's footer to render Strata::US::ButtonComponent.new. Started from main's version, then re-applied the Card example change so both refinements are present.

Verification

Diff vs origin/main after the merge:

16 files changed, 72 insertions(+), 67 deletions(-)

Exactly the adoption commit's net diff — confirms no stack content was lost and no foreign changes leaked in.

I didn't re-run make test / make lint since this CI job doesn't have the DB/toolchain set up; the existing PR CI run will exercise that against the new merge commit.
• Branch: cael/uswds-button-adoption

…ption # Conflicts: # app/components/strata/flows/task_list_component.html.erb # app/components/strata/flows/task_section_component.rb # app/components/strata/us/card_component.rb # app/previews/strata/us/button_group_component_preview.rb # app/previews/strata/us/card_component_preview.rb # app/previews/strata/us/card_group_component_preview.rb # app/views/strata/application_forms/index.html.erb # app/views/strata/shared/_form_buttons.html.erb # app/views/strata/tasks/index.html.erb # docs/strata-view-helpers.md # docs/uswds-components.md # spec/dummy/app/views/passport_application_forms/show.html.erb # spec/dummy/app/views/sample_application_forms/_form_buttons.html.erb # spec/dummy/app/views/sample_application_forms/new.html.erb # spec/dummy/app/views/sample_application_forms/review.html.erb # spec/dummy/app/views/tasks/details/_passport_photo_task.html.erb # spec/dummy/app/views/tasks/details/_passport_verify_info_task.html.erb # spec/dummy/app/views/tasks/show.html.erb

Copilot

Pull request overview

Copilot reviewed 16 out of 16 changed files in this pull request and generated 1 comment.

MichaelCrawfordNava and others added 3 commits May 26, 2026 12:02

MichaelCrawfordNava requested a review from Copilot May 27, 2026 19:42

Copilot started reviewing on behalf of MichaelCrawfordNava May 27, 2026 19:42 View session

Copilot AI reviewed May 27, 2026

View reviewed changes

Comment thread app/views/strata/tasks/index.html.erb

MichaelCrawfordNava marked this pull request as ready for review May 27, 2026 23:44

lamroger-nava approved these changes May 28, 2026

View reviewed changes

Base automatically changed from cael/uswds-button-helpers to main May 28, 2026 01:42

MichaelCrawfordNava requested a review from Copilot May 28, 2026 02:11

Copilot started reviewing on behalf of MichaelCrawfordNava May 28, 2026 02:11 View session

Copilot AI reviewed May 28, 2026

View reviewed changes

Comment thread app/views/strata/tasks/index.html.erb

MichaelCrawfordNava added 4 commits May 28, 2026 12:14

Convert to use sibling templates

9f0a1c7

Add helpers call

c3745e4

Revise documentation regarding helpers prefix

5c503c3

Fix button group known issue

8713dce

MichaelCrawfordNava merged commit ae09781 into main May 28, 2026
2 checks passed

MichaelCrawfordNava deleted the cael/uswds-button-adoption branch May 28, 2026 23:16

MichaelCrawfordNava linked an issue May 28, 2026 that may be closed by this pull request

USWDS Button Component #362

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Adopt button component + helpers at existing call sites#360

Adopt button component + helpers at existing call sites#360
MichaelCrawfordNava merged 8 commits into
mainfrom
cael/uswds-button-adoption

MichaelCrawfordNava commented May 26, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

MichaelCrawfordNava commented May 28, 2026

Uh oh!

claude Bot commented May 28, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

MichaelCrawfordNava commented May 26, 2026

Changes

Context

Testing

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

MichaelCrawfordNava commented May 28, 2026

Uh oh!

claude Bot commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Merged main into cael/uswds-button-adoption

How the conflicts were resolved

Verification

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

claude Bot commented May 28, 2026 •

edited

Loading

Merged `main` into `cael/uswds-button-adoption`