Skip to content

feat(design-system): expand the foundational UI component library - #2526

Merged
kev1n77 merged 9 commits into
GCWing:1.0.0-explorefrom
kev1n77:fmy/ui-sys
Aug 26, 2026
Merged

feat(design-system): expand the foundational UI component library#2526
kev1n77 merged 9 commits into
GCWing:1.0.0-explorefrom
kev1n77:fmy/ui-sys

Conversation

@kev1n77

@kev1n77 kev1n77 commented Aug 26, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Add seven reusable UI primitives and compositions:
    • ActionItem
    • Field
    • IconButton
    • Input
    • KeyHint
    • PageHeader
    • SearchField
  • Add public exports, component metadata, registry entries, semantic styles, and focused contract tests for each component.
  • Expand Button with primary and text presentation variants while preserving the existing default behavior.
  • Extend Design Lab with localized documentation, state previews, inspector controls, and usage examples for the new components.
  • Fix preview matrix layouts so state samples remain horizontal and wide ActionItem compositions do not overlap.

Fixes #

Type and Areas

Type:

Feature / UI/UX / regression fix / test

Areas:

Design system UI package, Design Lab, component registry, component documentation and previews

Motivation / Impact

This expands the new component library with reusable action, form, keyboard-hint, search, and page-heading contracts. It provides a stronger foundation for gradually replacing legacy or locally implemented UI with consistent design-system components.

The new APIs keep semantics, presentation, state, and composition independently configurable. Existing Button behavior remains compatible because its default variant is unchanged.

There is no direct end-user change outside Design Lab in this PR because existing application call sites are not migrated yet. Developers can begin adopting the new components incrementally.

Verification

  • pnpm --filter @bitfun/design-lab test
    • Passed all Design Lab tests and TypeScript checks.
  • pnpm run design-system:check
    • Built design tokens, theme packages, the UI package, and Design Lab successfully.
    • Passed token-engine, design-token, theme, UI component, package-contract, and Design Lab test suites.
  • Manually checked the Design Lab state matrices:
    • Preview states render horizontally.
    • ActionItem preserves spacing between its leading content, label, shortcut, and trailing actions.
    • Narrow preview areas retain complete component anatomy through horizontal scrolling.

Reviewer Notes

  • This PR only establishes and documents design-system contracts; it does not migrate application call sites.
  • The added components are registered as stable public components and exported through @bitfun/ui.
  • Design Lab sizing rules are preview-only and do not alter component behavior in consuming applications.
  • The Button variant union is additive; existing outline and fill usages and the default outline behavior are preserved.
  • Rollback is isolated to the design-system package and Design Lab changes.

Checklist

  • This PR is focused and does not include secrets, temporary prompts, generated scratch files, or unrelated artifacts.
  • Relevant verification is recorded above, or skipped checks are explained.
  • User-facing strings, docs, and locales are updated where applicable.

@kev1n77
kev1n77 merged commit 68c70b0 into GCWing:1.0.0-explore Aug 26, 2026
12 checks passed
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