Add USWDS Button and ButtonGroup components#358
Merged
Conversation
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>
This was referenced May 26, 2026
There was a problem hiding this comment.
Pull request overview
Introduces two new USWDS ViewComponents — Strata::US::ButtonComponent and Strata::US::ButtonGroupComponent — and refactors FormBuilder#submit to delegate styling to the new component's css_classes class method, which becomes the single source of truth for USWDS button class strings.
Changes:
- New
ButtonComponent(button/anchor switch viahref:, variant/size/inverse/disabled/type options) with a.css_classesclass method for non-component call sites (e.g.,button_to,link_to,f.submit). - New
ButtonGroupComponentrendering<ul class="usa-button-group">withwith_itemslots and a segmented variant, following theBreadcrumbsComponentslot pattern. FormBuilder#submitnow delegates toButtonComponent.css_classesand accepts a:variantoption;:bigandmargin-y-6spacing behavior preserved. Lookbook previews, docs, and RSpec coverage added.
Reviewed changes
Copilot reviewed 11 out of 11 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| app/components/strata/us/button_component.rb | New ButtonComponent class with variant/size/inverse validation and shared css_classes helper. |
| app/components/strata/us/button_component.html.erb | Renders <button> or <a> via content_tag. |
| app/components/strata/us/button_group_component.rb | New ButtonGroupComponent with nested ItemComponent slot. |
| app/components/strata/us/button_group_component.html.erb | Renders <ul class="usa-button-group"> with item slots. |
| app/previews/strata/us/button_component_preview.rb | Lookbook previews for each button variant/state. |
| app/previews/strata/us/button_group_component_preview.rb | Lookbook previews for default and segmented button groups. |
| app/helpers/strata/form_builder.rb | #submit now uses ButtonComponent.css_classes and supports :variant. |
| spec/components/strata/us/button_component_spec.rb | 31 examples covering all options and the .css_classes helper. |
| spec/components/strata/us/button_group_component_spec.rb | 12 examples covering structure, segmented variant, item options, and escaping. |
| spec/helpers/strata/form_builder_spec.rb | New regression specs for :variant, :big, combination, and unknown-variant error. |
| docs/uswds-components.md | Adds Button and Button Group sections plus updated ToC. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
pcunnane-nava
approved these changes
May 27, 2026
pcunnane-nava
left a comment
There was a problem hiding this comment.
This is really clean, looks great!
lamroger-nava
approved these changes
May 27, 2026
lamroger-nava
left a comment
Contributor
There was a problem hiding this comment.
No concerns from me 👍
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Changes
Strata::US::ButtonComponent— a USWDS-styled button rendered as either a<button>or an<a>(viahref:). Supportsvariant:,size:,inverse:,disabled:,type:, plus the standardclasses:/ extra HTML attribute forwarding.Strata::US::ButtonGroupComponent—<ul class="usa-button-group">with each entry wrapped in<li class="usa-button-group__item">. Supports the segmented variant.ButtonComponent, 12 forButtonGroupComponent.FormBuilder#submitto delegate toButtonComponent.css_classesand gain a:variantoption for non-primary submits. The existing:bigoption andmargin-y-6spacing are preserved.docs/uswds-components.mdwith Button and Button Group sections.Context
Two new ViewComponents in the
Strata::USnamespace, following the existing one-module-per-component pattern (Alert, Breadcrumbs, Card, etc.).ButtonComponentexposes a class method,.css_classes(variant:, size:, inverse:), that returns just the bare USWDS class string. This is intentionally the single source of truth used by:FormBuilder#submit(this PR),strata_link_to/strata_button_toview helpers (follow-up PR),button_to,link_to,form.button).ButtonGroupComponentmirrors the structure ofBreadcrumbsComponent— the parent renders a<ul>, eachwith_itemslot produces a nestedItemComponentthat renders as<li>.The
FormBuilder#submitrefactor lives in this PR rather than the adoption PR because the component should land with at least one consumer — leavingsubmiton hand-written class strings would mean shipping an unused abstraction.This PR is the base of a three-PR stack:
FormBuilder#submitrefactorcael/uswds-button-helpers— addsstrata_link_to/strata_button_toview helperscael/uswds-button-adoption— migrates every hand-writtenusa-button/usa-button-groupcall site to the new component + helpersTesting
Test plan:
bundle exec rspec spec/components/strata/us/button_component_spec.rb— 31 examples cover defaults, every variant, sizes, inverse, type, href switch, disabled (button vs anchor), extra classes/HTML attributes, content escaping, and the.css_classesclass method.bundle exec rspec spec/components/strata/us/button_group_component_spec.rb— 12 examples cover structural markup, the segmented variant, item-level classes/attributes, and content rendering/escaping.bundle exec rspec spec/helpers/strata/form_builder_spec.rb -e submit— regression specs covering default styling,:big,:variant,:big + :variant, andArgumentErroron unknown variants.make start→ http://localhost:3000/lookbook) and visually verify the Button and Button Group previews.