Skip to content

Conversation

Nicoss54
Copy link
Collaborator

PR Checklist

Please check if your PR fulfills the following requirements:

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting, local variables)
  • Refactoring (no functional changes, no api changes)
  • Build related changes
  • CI related changes
  • Documentation content changes
  • Application (the showcase website) / infrastructure changes
  • Other... Please describe:

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?

  • Yes
  • No

Other information

@Nicoss54 Nicoss54 self-assigned this Aug 21, 2025
@Nicoss54 Nicoss54 requested a review from OriginRing as a code owner August 21, 2025 23:05
@Nicoss54 Nicoss54 changed the title feat(module:colorpicker): add presets feat(module:colorpicker): support nzPresets Aug 21, 2025
Copy link

codecov bot commented Aug 21, 2025

Codecov Report

❌ Patch coverage is 89.74359% with 4 lines in your changes missing coverage. Please review.
✅ Project coverage is 92.14%. Comparing base (ddefc7f) to head (25c5cc2).
⚠️ Report is 29 commits behind head on master.

Files with missing lines Patch % Lines
...color-picker/src/ng-antd-color-preset.component.ts 82.60% 2 Missing and 2 partials ⚠️
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.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Nicoss54
Copy link
Collaborator Author

@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 :)

@Nicoss54 Nicoss54 linked an issue Aug 22, 2025 that may be closed by this pull request
@Nicoss54 Nicoss54 requested a review from Copilot August 23, 2025 15:08
Copy link

@Copilot Copilot AI left a 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.

Comment on lines +41 to +42
if (a !== undefined && a <= 0.5) return true;
const brightness = r * 0.299 + g * 0.587 + b * 0.114;
Copy link
Preview

Copilot AI Aug 23, 2025

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.

Suggested change
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.

Copy link
Collaborator

@Laffery Laffery left a 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

@Laffery Laffery changed the title feat(module:colorpicker): support nzPresets feat(module:color-picker): support nzPresets Sep 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants