feat(ui): polish core components with additive variants - #157
Merged
Conversation
- Dialog: add size variants (sm/default/lg/xl/full); modules can drop hardcoded sm:max-w-lg overrides. - Button: add isLoading + loadingText props with inline spinner; size gains an icon variant; add focus-visible ring. - Input: add prefix/suffix slots that auto-pad the field and merge cleanly with existing variants. - Card: extract cardVariants with variant (default/flat/elevated/ghost) and padding (none/sm/default/lg) options. - AppLayout: extract sidebar nav classes into theme as .sidebar-nav-link-active / -inactive (with focus-visible ring) so styling is themable rather than hardcoded in tsx. - Theme: add .focus-ring and .focus-ring-danger utilities for consistent focus treatment across custom interactive elements. All changes are backwards-compatible - existing call sites use the default variant and need no updates.
Deploying simplemodule-website with |
| Latest commit: | 56279c9 |
| Status: | ✅ Deploy successful! |
| Preview URL: | https://fab16643.simplemodule-website.pages.dev |
| Branch Preview URL: | https://claude-improve-design-system.simplemodule-website.pages.dev |
Reconcile #155 (Card m-2 margin) with this branch's CVA-based Card refactor by adding `m-2` to the cardVariants base classes so the default visual is preserved across all variant/padding combinations. Also fix a TS2430 conflict surfaced by `npm run typecheck` after the merge: HTMLInputElement has a built-in `prefix?: string` (RDFa) attribute, which collided with our new `prefix?: ReactNode` slot. Resolved by `Omit<..., 'prefix'>` on the InputProps base interface.
antosubash
marked this pull request as ready for review
May 11, 2026 15:24
Uh oh!
There was an error while loading. Please reload this page.
3 tasks
antosubash added a commit
that referenced
this pull request
May 20, 2026
Catches the site up with PRs since the last sync (#119): - Adds guides for Notifications (#194), Rate Limiting (#206), Broadcasting (#193), and Identity & Sessions (#187/#188/#185/#198). - Documents signed URLs (#195) in the File Storage guide. - Replaces the "not a durable queue" warning in events.md with the actual Wolverine inbox/outbox story (#192). - Refreshes Button variants in the components reference (#157). - Rewrites docs/missing-cross-cutting-modules.md to mark the now- covered modules done and trim the open backlog. - Sidebar updated; pre-existing `<T>` parse error in soft-delete.md fixed so the build is green.
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 freeto join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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.
Summary
Additive polish to the core UI primitives in
@simplemodule/uiand@simplemodule/theme-default. All changes are backwards-compatible — existing call sites use the default variant and need no updates.What changed
Dialog—sizeprop withsm | default | lg | xl | fullso modules can drop hardcodedsm:max-w-lgoverrides.Button—isLoading+loadingTextprops that render an inline spinner and setaria-busy; newsize="icon"variant; standardfocus-visiblering on the base.Input—prefix/suffixslots that absolute-position adornments inside the field with auto-padding, and awrapperClassNamefor outer customization.Card— extractedcardVariantswithvariant(default/flat/elevated/ghost) andpadding(none/sm/default/lg). Default behaviour unchanged.AppLayout— sidebar nav classes moved from inline TSX constants into theme as.sidebar-nav-link-active/-inactivewith focus-visible ring, so styling is themable..focus-ringand.focus-ring-dangerutilities for consistent focus treatment across custom interactive elements.Why
The base library had high adoption (97 import sites) but a few rough edges showed up repeatedly: dialogs with hardcoded widths in module pages, no
isLoadingbutton state, no input adornment slots, and nav classes hardcoded inapp-layout.tsx. These additions cover the common asks without touching any consumer.Test plan
npm run check:fix(biome) cleannpm run validate-pagescleannpm run build(all module Vite library builds + ClientApp) succeedsdotnet buildsucceeds with 0 warnings / 0 errors<Dialog><DialogContent size="lg">and<Button isLoading>Save</Button>in a module pageGenerated by Claude Code