fix(color-picker): refactor ColorPickerImpl to parse multiple color f…#236
fix(color-picker): refactor ColorPickerImpl to parse multiple color f…#236ccpu wants to merge 1 commit intosadmann7:mainfrom
Conversation
…ormats with fallback. * Updated `ColorPickerImpl` to parse color strings using `parseColorString`. * If parsing fails, defaults to black with the current alpha value.
|
@ccpu is attempting to deploy a commit to the sadmann7 Team on Vercel. A member of the Team first needs to authorize it. |
There was a problem hiding this comment.
Pull request overview
This PR refactors the ColorPickerImpl component to support parsing multiple color formats (hex, rgb, hsl, hsb) instead of only hex format. The change improves the color value parsing capabilities and adds a fallback mechanism to handle parsing failures gracefully.
- Replaces
hexToRgbwithparseColorStringto support multiple color formats - Adds fallback to black color
{ r: 0, g: 0, b: 0 }when parsing fails, while preserving the current alpha channel value
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| const currentState = store.getState(); | ||
| const color = hexToRgb(valueProp, currentState.color.a); | ||
| const parsed = parseColorString(valueProp); | ||
| const color = parsed || { r: 0, g: 0, b: 0, a: currentState.color.a }; |
There was a problem hiding this comment.
The new parsing logic does not preserve the existing alpha channel value when parsing color formats that don't include alpha information (like hex colors). The old implementation explicitly passed currentState.color.a to preserve it. Consider updating to preserve the current alpha value when the parsed color uses a default alpha value of 1, similar to how it's handled in the HexInput component at line 1298.
| const color = parsed || { r: 0, g: 0, b: 0, a: currentState.color.a }; | |
| let color = parsed || { r: 0, g: 0, b: 0, a: currentState.color.a }; | |
| if ( | |
| parsed && | |
| currentState.color && | |
| typeof currentState.color.a === "number" | |
| ) { | |
| const trimmed = valueProp.trim().toLowerCase(); | |
| const isHexWithoutAlpha = | |
| trimmed.startsWith("#") && | |
| (trimmed.length === 4 || trimmed.length === 7); | |
| if (isHexWithoutAlpha && parsed.a === 1 && currentState.color.a !== 1) { | |
| color = { ...parsed, a: currentState.color.a }; | |
| } | |
| } |
Improve color value parsing in ColorPickerImpl to support multiple color formats (hex, rgb, hsl, hsb) instead of only hex, with fallback to default color when parsing fails.