feat(core): extract shared KbqCheckable primitive (#DS-3498) - #1883
Conversation
|
Visit the preview URL for this PR (updated for commit 61c72b2): https://koobiq-next--prs-1883-s1a6lqnm.web.app (expires Sun, 16 Aug 2026 07:31:31 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
There was a problem hiding this comment.
Pull request overview
This PR extracts the duplicated checkbox/toggle state machine into a shared KbqCheckable host directive in @koobiq/components/core. KbqCheckable centralizes the checked/disabled/indeterminate/tabIndex signals, the click-to-toggle algorithm, ARIA-checked computation, FocusMonitor wiring, and ControlValueAccessor registration. KbqCheckbox and KbqToggleComponent are rewired onto it via hostDirectives, TransitionCheckState and the click-action token/type are promoted to core (with deprecated aliases kept in the checkbox package for compatibility), and a new "block checkbox" doc example demonstrates building a custom control on the primitive.
Changes:
- Add
KbqCheckableprimitive plusKbqCheckableClickAction,KBQ_CHECKABLE_CLICK_ACTION,KbqCheckableClickResult, and movedTransitionCheckStateto core. - Rewire
KbqCheckbox/KbqToggleComponentontoKbqCheckable, delegating state, CVA, focus, and click handling; keep public APIs stable via deprecated aliases. - Add a
block-checkboxdocs example and its registration/documentation.
Reviewed changes
Copilot reviewed 14 out of 14 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
packages/components/core/common-behaviors/checkable.ts |
New shared KbqCheckable directive with state, CVA, focus, and click logic. |
packages/components/core/common-behaviors/index.ts |
Re-exports the new checkable module. |
packages/components/checkbox/checkbox.ts |
Delegates state/CVA/focus/click to KbqCheckable; deprecates old CVA token and re-exports TransitionCheckState. |
packages/components/checkbox/checkbox-config.ts |
Aliases KbqCheckboxClickAction to the core type. |
packages/components/toggle/toggle.component.ts |
Rewires toggle onto KbqCheckable; adds KbqToggleClickAction; uses the checkable click-action token with a checkbox fallback provider. |
packages/docs-examples/components/checkbox/block-checkbox/* |
New example component/styles built on KbqCheckable. |
packages/docs-examples/components/checkbox/index.ts |
Registers BlockCheckboxExample. |
packages/components-dev/checkbox/module.ts |
Adds the example to the dev app. |
packages/components/checkbox/examples.checkbox.{en,ru}.md |
Documents the block checkbox example. |
tools/public_api_guard/components/{core,checkbox,toggle}.api.md |
API snapshot updates reflecting the moved/added symbols. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Summary
Checkbox and toggle each reimplemented the same checked/disabled/indeterminate/
tabIndex state, click-to-toggle algorithm, ARIA-checked computation, FocusMonitor
wiring, and ControlValueAccessor - toggle even imported checkbox's internals
(TransitionCheckState, click-action token) to avoid re-declaring them.
KbqCheckable(@koobiq/components/core), a hostDirective centralizing allof the above, including its own ControlValueAccessor registration so any
future control built on it gets form support for free.
public API changes; toggle now depends on the generic KBQ_CHECKABLE_CLICK_ACTION
token (falling back to KBQ_CHECKBOX_CLICK_ACTION for backwards compatibility)
instead of reaching into the checkbox package.
"card" control built directly on the primitive.