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.
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
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