-
Notifications
You must be signed in to change notification settings - Fork 4.1k
feat(module:color-picker): support nzPresets
#9341
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: master
Are you sure you want to change the base?
feat(module:color-picker): support nzPresets
#9341
Conversation
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #9341 +/- ##
==========================================
+ Coverage 92.12% 92.14% +0.01%
==========================================
Files 561 562 +1
Lines 19631 19670 +39
Branches 3000 3007 +7
==========================================
+ Hits 18086 18125 +39
+ Misses 1206 1205 -1
- Partials 339 340 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
@Laffery @HyperLife1119 ad the previous PR, I make the translation with google translate, I’m not sure if the documentation I’ve done is correct so feel free to tell me what I have to write if there are some mistakes :) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull Request Overview
This PR introduces support for color preset groups in the ng-zorro ColorPicker component. Users can now provide predefined color collections organized in collapsible groups for quick color selection.
Key changes include:
- Added
NzColorPickerPresetsItem
interface to define preset group structure with label, colors, and optional properties - Created
NgAntdColorPresetComponent
to render collapsible preset groups with color blocks - Enhanced color block component to show selection state and brightness-based styling for presets
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 |
---|---|
typings.ts |
Added interface definition for preset items |
style/index.less |
Added CSS styling for preset containers and color states |
ng-antd-color-preset.component.ts |
New component handling preset rendering and interaction |
ng-antd-color-preset.component.spec.ts |
Comprehensive test coverage for preset component |
ng-antd-color-picker.module.ts |
Added preset component to module exports |
ng-antd-color-picker.component.ts |
Integrated preset component with main picker |
ng-antd-color-picker.component.spec.ts |
Added tests for preset integration |
ng-antd-color-block.component.ts |
Enhanced block component with selection and brightness detection |
doc/index.*.md |
Updated documentation with preset property |
demo/presets.ts |
Demo showcasing preset functionality |
color-picker.component.ts |
Updated main component to support presets |
color-picker.component.spec.ts |
Added preset-related test cases |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
if (a !== undefined && a <= 0.5) return true; | ||
const brightness = r * 0.299 + g * 0.587 + b * 0.114; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The logic for determining brightness when alpha <= 0.5 always returns true regardless of the actual color brightness. This should consider the actual color brightness even for semi-transparent colors.
if (a !== undefined && a <= 0.5) return true; | |
const brightness = r * 0.299 + g * 0.587 + b * 0.114; | |
let blendedR = r, blendedG = g, blendedB = b; | |
if (a !== undefined && a < 1) { | |
blendedR = Math.round(r * a + 255 * (1 - a)); | |
blendedG = Math.round(g * a + 255 * (1 - a)); | |
blendedB = Math.round(b * a + 255 * (1 - a)); | |
} | |
const brightness = blendedR * 0.299 + blendedG * 0.587 + blendedB * 0.114; |
Copilot uses AI. Check for mistakes.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
basically LGTM, could you please take review on it @OriginRing
nzPresets
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Color picker supports preset options
Does this PR introduce a breaking change?
Other information