Add custom color input component to FormKit #8003
Conversation
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
@halo-dev/api-client
@halo-dev/components
@halo-dev/richtext-editor
@halo-dev/ui-shared
@halo-dev/ui-plugin-bundler-kit
commit: |
There was a problem hiding this comment.
Pull request overview
This PR introduces a custom color picker component for FormKit to replace the native HTML color input, enabling alpha channel support and multiple color format options (rgb, hex, hex8). The implementation uses the @ckpack/vue-color library's Sketch component and includes automatic text color contrast calculation for better readability.
- Adds a new custom FormKit color input component with alpha channel support
- Introduces three color format options:
rgb,hex, andhex8 - Moves
@ckpack/vue-colordependency from the editor package to the main UI package (upgraded from 1.5.0 to 1.6.0)
Reviewed changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| ui/src/formkit/inputs/color/types.ts | Defines the ColorFormat type for the three supported formats |
| ui/src/formkit/inputs/color/index.ts | Registers the color input with FormKit using async component loading |
| ui/src/formkit/inputs/color/ColorInput.vue | Implements the color picker UI with dropdown and contrast-aware text display |
| ui/src/formkit/formkit.config.ts | Adds the new color input to FormKit's global configuration |
| ui/package.json | Adds @ckpack/vue-color@^1.6.0 dependency to main UI package |
| ui/packages/editor/package.json | Removes @ckpack/vue-color from editor-specific dependencies |
| ui/pnpm-lock.yaml | Updates lock file with new dependency locations and versions |
Files not reviewed (1)
- ui/pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8003 +/- ##
============================================
+ Coverage 59.55% 61.19% +1.63%
- Complexity 3812 3933 +121
============================================
Files 677 689 +12
Lines 23248 23507 +259
Branches 1500 1522 +22
============================================
+ Hits 13846 14385 +539
+ Misses 8764 8395 -369
- Partials 638 727 +89 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
What type of PR is this?
/area ui
/kind feature
/milestone 2.22.x
What this PR does / why we need it:
Replace the old FormKit native color input with a custom color picker. The native input color doesn’t support alpha channels, and switching to a custom component solves that. It also introduces a new
formatoption that supports rgb, hex, and hex8 (hex values with alpha).example:
Fixes #5804
Does this PR introduce a user-facing change?