Skip to content

feat(button): migrate kol-button to Skeleton Blueprint architecture#9951

Draft
Copilot wants to merge 2 commits into
developfrom
copilot/migrate-button-web-component
Draft

feat(button): migrate kol-button to Skeleton Blueprint architecture#9951
Copilot wants to merge 2 commits into
developfrom
copilot/migrate-button-web-component

Conversation

Copilot AI commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

Migrates kol-button from the legacy dual-component pattern (shadow wrapper + internal WC) to the layered Skeleton Blueprint architecture, unifying it into a single shadow component with clean separation of concerns.

New files

src/internal/props/ — 13 new prop definitions

Each prop encapsulates normalization and validation via createPropDefinition:
access-key, alternative-button-link-role, aria-controls, aria-description, aria-expanded, aria-selected, button-type, button-variant, custom-class, disabled, inline, short-key, tab-index

src/internal/functional-components/button/

  • api.tsxbuttonPropsConfig (PropsConfigShape) + ButtonApi derived via ApiFromConfig; declares Callbacks, Methods, and Refs (including tooltipFloating for type-safe tooltip ref wiring)
  • controller.tsButtonController extends BaseController<ButtonApi>; receives StateAccess<ButtonApi>; delegates tooltip lifecycle to an internal TooltipController; exposes setTooltipFloatingRef to avoid unsafe prop hacks
  • component.tsx — stateless ButtonFC; extends FunctionalComponentProps<ButtonApi> with a local tooltipId?: string intersection to replace the previous Record<string, unknown> cast

Modified files

  • src/components/button/component.tsx — replaces both old files; extends BaseWebComponent<ButtonApi>; full prop triangle for all 18 props; form integration via AssociatedInputController
  • src/components/button/snapshot.spec.tsx — co-located (moved from test/); expanded from 8 to 19 test cases covering _accessKey, _shortKey, _inline, _hideLabel, _icons, _customClass/custom variant, and all _type values

Deleted files

  • src/components/button/shadow.tsx — legacy wrapper component; superseded by the unified shadow WC
  • src/components/button/test/ — replaced by co-located tests

Architecture at a glance

KolButton (WebComponent)
  └── ButtonController (BaseController)          ← validates/normalizes props, manages tooltip
        └── ButtonFC (stateless renderer)        ← pure JSX, BEM classes, no side-effects

Copilot AI linked an issue Apr 2, 2026 that may be closed by this pull request
@github-actions

github-actions Bot commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

Copilot AI changed the title [WIP] Migrate button with new web component feat(button): migrate kol-button to Skeleton Blueprint architecture Apr 2, 2026
@github-actions

github-actions Bot commented Apr 2, 2026

Copy link
Copy Markdown
Contributor

🚀 MCP preview deployed to Vercel: https://kolibri-it4h5sbvk-public-ui-kolibri-mcp.vercel.app

Copilot AI requested a review from deleonio April 2, 2026 18:21
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.

Skeleton - Button

2 participants