Skip to content

feat(component): always emit variant suffix in uiButton class#5

Merged
bpamiri merged 1 commit intomainfrom
peter/uibutton-emit-btn-primary
May 1, 2026
Merged

feat(component): always emit variant suffix in uiButton class#5
bpamiri merged 1 commit intomainfrom
peter/uibutton-emit-btn-primary

Conversation

@bpamiri
Copy link
Copy Markdown
Contributor

@bpamiri bpamiri commented May 1, 2026

Summary

  • uiButton now always emits the variant suffix in its compound class, including the default primary variant
  • Bare uiButton(text=\"Save\")<button class=\"btn-primary\"> (was class=\"btn\")
  • Sized primary follows the rule: size=\"sm\"class=\"btn-sm-primary\" (was class=\"btn-sm\"); same for lg and icon-only

Why

Rendered HTML now self-documents the variant. Inspecting class=\"btn\" in DevTools could previously mean either "explicit primary" or "author forgot to set the variant" — those should be visually distinguishable. basecoat-css ships matching selectors for every size×variant combination (.btn-primary, .btn-sm-primary, .btn-lg-primary, .btn-icon-primary), so visual rendering is identical to bare btn.

Source

Discovered during a Wheels Tutorial fresh-VM bake. The chapter-8 "Bonus: wheels-basecoat" checkpoint asserted class=\"btn btn-primary\" against rendered output; the silent-skip behavior made the assertion impossible to satisfy. The companion chapter doc fix lands separately in wheels-dev/wheels.

Wheels Tutorial Finding #5.

Test plan

  • Tag 1.0.5 and verify the wheels-packages registry picks it up
  • On a fresh wheels packages add wheels-basecoat, confirm chapter 8 checkpoint fix(component): $uiBuildId / $uiLucideIcon must be public for PackageLoader #3 (`grep -oE '<button[^>]class="btn[^\"]"[^>]*>Post comment'`) returns a match including btn-primary
  • Confirm visual rendering is unchanged in a real browser (basecoat.css .btn-primary rule == .btn rule)
  • Updated unit tests pass (`renders primary button with btn-primary class`, `renders small size with primary variant`, `renders icon-only primary button`)

🤖 Generated with Claude Code

A bare `uiButton(text="Save")` previously rendered `<button class="btn">`;
it now renders `<button class="btn-primary">`. Sized primary buttons follow
the same rule (`size="sm"` → `class="btn-sm-primary"` instead of
`class="btn-sm"`).

Why: the rendered HTML now self-documents the variant. Inspecting
`class="btn"` in DevTools could previously mean either "explicit primary
variant" or "the author forgot to set the variant" — those should be
visually distinguishable. basecoat-css ships matching selectors for every
size×variant combination (`.btn-primary`, `.btn-sm-primary`,
`.btn-lg-primary`, `.btn-icon-primary`), so visual rendering is identical
to bare `btn`.

Discovered during a Wheels Tutorial fresh-VM bake — chapter 8 checkpoint
asserted `class="btn btn-primary"` against rendered output, and the
silent-skip behavior made the assertion impossible to satisfy. The
companion chapter doc fix lands separately in wheels-dev/wheels.

Wheels Tutorial Finding #5.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
@bpamiri bpamiri merged commit 63ade51 into main May 1, 2026
@bpamiri bpamiri deleted the peter/uibutton-emit-btn-primary branch May 1, 2026 01:44
bpamiri added a commit to wheels-dev/wheels-packages that referenced this pull request May 1, 2026
uiButton now always emits the variant suffix in its CSS class
(`btn-primary` instead of bare `btn` for the default variant).
Sized primary follows the same rule. basecoat-css ships matching
selectors so visual rendering is unchanged.

Source: wheels-dev/wheels-basecoat#5
Tag: v1.0.5

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.

1 participant