feat: Added color picker component#1973
Draft
rkaraivanov wants to merge 23 commits into
Draft
Conversation
…I/igniteui-webcomponents into rkaraivanov/color-picker
Introduce an explicit "missing color" sentinel and surface it through the color picker. ColorModel: - Add `ColorModel.empty()` factory and an `isEmpty` getter representing a missing/undefined color. `default()` keeps returning black. - Clear the empty state when any channel (r/g/b/h/s/l/v/alpha) is modified. - `asString()` returns an empty string while empty; `clone()` preserves the empty state and `equals()` accounts for it. - `parse()` returns the empty sentinel for null/undefined/empty/whitespace input. Component: - Initialize the internal color as empty so an unset picker has an empty value. - Render the trigger anchor with a checkered background while the value is empty, via an `empty` shadow part token. - Validate the color value input on commit using the new `isValidColor` helper; empty or invalid input reverts the field to the current color. Styles: - Add a checkered pattern on `[part~='empty']::part(base)`, mirroring the alpha slider track. Add `isValidColor()` and update model, common and component unit tests to cover the empty sentinel, validation and revert behavior.
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
Some code reorganization and refactoring was done to support the new input mode. The color picker component now has an input mode that allows users to enter color values directly. The component will handle changes from the input field and update the color value accordingly.
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new igc-color-picker web component to the Ignite UI Web Components library, including its internal color model/converters, styles, Storybook story, and unit tests.
Changes:
- Introduces the
IgcColorPickerComponent(and supportingigc-picker-canvas) with theming and interactions (hue/SV selection, alpha, swatches, copy, eyedropper). - Adds a color parsing/model layer (
ColorModel, converters, validation helpers) plus unit tests. - Wires the component into the public exports and the “define all components” registration list, and adds a Storybook story.
Reviewed changes
Copilot reviewed 13 out of 14 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| tsconfig.json | Extends lit plugin global attributes (adds inert). |
| stories/color-picker.stories.ts | Adds Storybook coverage for the new color picker. |
| src/index.ts | Exports IgcColorPickerComponent from the package entry. |
| src/components/common/definitions/defineAllComponents.ts | Registers IgcColorPickerComponent in the “define all” list. |
| src/components/color-picker/themes/picker-canvas.base.scss | Styles for the SV picker canvas and marker. |
| src/components/color-picker/themes/color-picker.base.scss | Styles for the overall color picker UI (sliders, buttons, swatches). |
| src/components/color-picker/picker-canvas.ts | New SV picker surface with pointer + keyboard interactions and events. |
| src/components/color-picker/model.ts | ColorModel implementation and context helper for parsing. |
| src/components/color-picker/model.spec.ts | Unit tests for ColorModel. |
| src/components/color-picker/converters.ts | RGB/HSL/HSV conversion utilities. |
| src/components/color-picker/common.ts | Color parsing + validation helpers. |
| src/components/color-picker/common.spec.ts | Unit tests for parsing/validation helpers. |
| src/components/color-picker/color-picker.ts | Main igc-color-picker component implementation. |
| src/components/color-picker/color-picker.spec.ts | Component-level tests incl. a11y and form association. |
|
|
||
| let t3: number; | ||
| let val: number; | ||
| const t2 = l < 0.5 ? l * (1 + s) : 1 + s - 1 * s; |
Comment on lines
+10
to
+14
| hex: (rgb: RGB): string => { | ||
| const [r, g, b] = rgb.map((v) => Math.round(v) & 0xff); | ||
| const value = (r << 16) + (g << 8) + b; | ||
| return value.toString(16).padStart(6, '0'); | ||
| }, |
Comment on lines
+237
to
+240
| this._color.s = event.detail.x; | ||
| this._color.v = 100 - event.detail.y; | ||
| this._updateColor(); | ||
| } |
Comment on lines
+633
to
+635
| ${isDefaultMode | ||
| ? html`<label part="label" for="trigger">${this.label}</label>` | ||
| : nothing} |
| import type { Meta, StoryObj } from '@storybook/web-components'; | ||
| import { html } from 'lit'; | ||
|
|
||
| import { IgcColorPickerComponent, defineComponents } from '../src/index.js'; |
Comment on lines
+305
to
+307
| private _handleCopy(): void { | ||
| navigator.clipboard.writeText(this.value); | ||
| } |
Comment on lines
+292
to
+303
| private _handleEyeDropperClick(): void { | ||
| const eyeDropper = new (globalThis as any).EyeDropper(); | ||
|
|
||
| eyeDropper | ||
| .open() | ||
| .then((result: { sRGBHex: string }) => { | ||
| this.value = result.sRGBHex; | ||
| this._syncCanvasPosition(); | ||
| this._emitColorPickedEvent(); | ||
| }) | ||
| .catch(() => {}); | ||
| } |
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
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.
No description provided.