Skip to content

Add USWDS Button and ButtonGroup components#358

Merged
MichaelCrawfordNava merged 3 commits into
mainfrom
cael/uswds-button-component
May 28, 2026
Merged

Add USWDS Button and ButtonGroup components#358
MichaelCrawfordNava merged 3 commits into
mainfrom
cael/uswds-button-component

Conversation

@MichaelCrawfordNava

Copy link
Copy Markdown
Contributor

Changes

  • Adds Strata::US::ButtonComponent — a USWDS-styled button rendered as either a <button> or an <a> (via href:). Supports variant:, size:, inverse:, disabled:, type:, plus the standard classes: / extra HTML attribute forwarding.
  • Adds Strata::US::ButtonGroupComponent<ul class="usa-button-group"> with each entry wrapped in <li class="usa-button-group__item">. Supports the segmented variant.
  • Lookbook previews for both components.
  • RSpec coverage: 31 examples for ButtonComponent, 12 for ButtonGroupComponent.
  • Refactors FormBuilder#submit to delegate to ButtonComponent.css_classes and gain a :variant option for non-primary submits. The existing :big option and margin-y-6 spacing are preserved.
  • Updates docs/uswds-components.md with Button and Button Group sections.

Context

Two new ViewComponents in the Strata::US namespace, following the existing one-module-per-component pattern (Alert, Breadcrumbs, Card, etc.).

ButtonComponent exposes 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:

  • the component itself,
  • FormBuilder#submit (this PR),
  • the strata_link_to / strata_button_to view helpers (follow-up PR),
  • any caller that needs to apply USWDS button styling to a Rails-rendered tag (button_to, link_to, form.button).

ButtonGroupComponent mirrors the structure of BreadcrumbsComponent — the parent renders a <ul>, each with_item slot produces a nested ItemComponent that renders as <li>.

The FormBuilder#submit refactor lives in this PR rather than the adoption PR because the component should land with at least one consumer — leaving submit on hand-written class strings would mean shipping an unused abstraction.

This PR is the base of a three-PR stack:

  1. This PR — components + FormBuilder#submit refactor
  2. cael/uswds-button-helpers — adds strata_link_to / strata_button_to view helpers
  3. cael/uswds-button-adoption — migrates every hand-written usa-button / usa-button-group call site to the new component + helpers

Testing

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

$ make test
1379 examples, 0 failures

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_classes class 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, and ArgumentError on unknown variants.
  • Browse Lookbook (make starthttp://localhost:3000/lookbook) and visually verify the Button and Button Group previews.

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>

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 via href:, variant/size/inverse/disabled/type options) with a .css_classes class method for non-component call sites (e.g., button_to, link_to, f.submit).
  • New ButtonGroupComponent rendering <ul class="usa-button-group"> with with_item slots and a segmented variant, following the BreadcrumbsComponent slot pattern.
  • FormBuilder#submit now delegates to ButtonComponent.css_classes and accepts a :variant option; :big and margin-y-6 spacing 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.

Comment thread docs/uswds-components.md Outdated
MichaelCrawfordNava and others added 2 commits May 27, 2026 14:50
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
@MichaelCrawfordNava MichaelCrawfordNava marked this pull request as ready for review May 27, 2026 23:38

@pcunnane-nava pcunnane-nava left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is really clean, looks great!

@lamroger-nava lamroger-nava left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No concerns from me 👍

@MichaelCrawfordNava MichaelCrawfordNava merged commit 3e34ee2 into main May 28, 2026
4 checks passed
@MichaelCrawfordNava MichaelCrawfordNava deleted the cael/uswds-button-component branch May 28, 2026 01:03
@MichaelCrawfordNava MichaelCrawfordNava linked an issue May 28, 2026 that may be closed by this pull request
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

USWDS Button Component

4 participants