fix(ColorPicker): restrict HEX input to valid hex characters by treephesians · Pull Request #56752 · ant-design/ant-design

treephesians · 2026-01-27T01:31:57Z

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

Background

The HEX input in ColorPicker currently allows characters that are not valid hexadecimal digits (such as _ or /) during typing.
This behavior is caused by overly permissive input normalization, which results in invalid characters being displayed in the input field without triggering onChange.

This can be confusing for users, as the input visually accepts values that are not valid HEX colors.

Solution

The input normalization logic has been updated to strictly allow only valid hexadecimal characters (0-9, a-f, A-F).
This ensures that the HEX input value always stays within the valid character set during typing.

Additional test cases have been added to cover this behavior and prevent regressions.

No public API changes are introduced.

📝 Change Log

Language	Changelog
🇺🇸 English	Fix ColorPicker HEX input to prevent invalid hexadecimal characters during typing
🇨🇳 Chinese	修复 ColorPicker HEX 输入框在输入过程中允许非法十六进制字符的问题

bolt-new-by-stackblitz · 2026-01-27T01:32:01Z

Run & review this pull request in StackBlitz Codeflow.

gemini-code-assist · 2026-01-27T01:32:12Z

Summary of Changes

Hello @treephesians, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request resolves an issue in the ColorPicker component where its hexadecimal input field permitted the temporary display of non-hexadecimal characters, causing user confusion. The change enhances the input's robustness by implementing stricter validation, ensuring that only valid hex characters are processed and displayed, thereby improving the overall user experience and data integrity.

Highlights

HEX Input Validation: The ColorPicker component's HEX input now strictly enforces valid hexadecimal characters, preventing non-hex digits from being displayed during typing.
Regular Expression Update: The toHexFormat utility function has been updated with a more precise regular expression (/[^0-9a-f]/gi) to filter out invalid characters.
Test Case Adjustment: An existing test case for the ColorPicker component was modified to correctly assert that invalid HEX input now results in an empty string, aligning with the new stricter validation.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

github-actions · 2026-01-27T01:32:14Z

👁 Visual Regression Report for PR #56752 Passed ✅

🎯 Target branch: master (076c84b)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎

🎊 Congrats! No visual-regression diff found.

github-actions · 2026-01-27T01:32:18Z

coderabbitai · 2026-01-27T01:32:24Z

📝 Walkthrough

Summary by CodeRabbit

发布说明

错误修复
- 改进了颜色选择器的十六进制输入校验：仅接受有效十六进制字符（0-9、a-f），无效字符将被过滤并规范化显示。
测试
- 增加并调整了对无效输入序列的测试，确保输入在被过滤后显示正确且事件调用次数保持预期。

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

更新 ColorPicker 的十六进制输入规范化逻辑，正则由 /[^\w/]/g 改为 /[^0-9a-f]/gi，并相应调整单元测试以验证更严格的字符过滤行为，仅修改输入清洗逻辑及相关测试断言（不改动签名或外部接口）。

Changes

内聚关系 / 文件(s)	变更摘要
HEX 输入验证逻辑更新 `components/color-picker/color.ts`	将 `toHexFormat` 中的字符过滤正则由 `/[^\w/]/g` 改为 `/[^0-9a-f]/gi`，仅保留 0–9、a–f（不区分大小写），从而拒绝诸如 `_`、`/` 等非法字符。
测试用例更新 `components/color-picker/__tests__/components.test.tsx`	调整对无效 HEX 输入的断言：模拟额外的非法输入序列（如 `ff_00_gg`），断言输入被过滤为合法十六进制片段或为空，且 `onChange` 调用计数保持不变。

Sequence Diagram(s)

（无序列图 — 更改局限于单一输入过滤函数，未引入跨组件的新流程。）

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 分钟

Poem

🐰 我是修补的兔子，轻声忙，
把斜杠下划线挡在门外旁，
只留 0-9 与 a-f 的光，
十六进制整洁又亮堂，
颜色更准，心也暖洋洋。

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR标题清晰准确地描述了主要变更：限制HEX输入只允许有效的十六进制字符。
Description check	✅ Passed	PR描述详细说明了背景、解决方案和变更日志，完全相关于代码变更。
Linked Issues check	✅ Passed	代码变更完全满足issue `#56740的需求`：将HEX输入的正则表达式从允许所有非空格字符改为仅允许0-9和a-f字符，测试用例也覆盖了无效输入场景。
Out of Scope Changes check	✅ Passed	所有代码变更都在scope范围内：仅修改toHexFormat函数的过滤逻辑和添加相关测试用例，无额外或无关的变更。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

gemini-code-assist

Code Review

This pull request correctly fixes an issue where the ColorPicker's HEX input allowed invalid characters. The change in color.ts to use a stricter regular expression is appropriate and effectively solves the problem, and the corresponding test update is also correct. While reviewing, I noticed a potential pre-existing issue in ColorHexInput.tsx regarding inconsistent handling of hex values with alpha, which could lead to a UI-state mismatch. I recommend addressing this in a separate PR as it's outside the scope of these changes.

components/color-picker/__tests__/components.test.tsx

pkg-pr-new · 2026-01-27T01:59:30Z

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@56752

commit: 7f8e8b1

codecov · 2026-01-27T02:06:48Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (076c84b) to head (7f8e8b1).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@            Coverage Diff            @@
##            master    #56752   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          807       807           
  Lines        14923     14923           
  Branches      3931      3931           
=========================================
  Hits         14923     14923

☔ 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.

codecov · 2026-01-27T07:53:22Z

Bundle Report

Changes will increase total bundle size by 8 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.86MB	8 bytes (0.0%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
`antd-with-locales.min.js`	4 bytes	2.12MB	0.0%
`antd.min.js`	4 bytes	1.73MB	0.0%

Files in antd-with-locales.min.js:

./components/color-picker/color.ts → Total Size: 3.21kB

Files in antd.min.js:

./components/color-picker/color.ts → Total Size: 3.21kB

zombieJ · 2026-01-28T07:23:18Z

@gemini-code-assist Pls help to CR again.

gemini-code-assist

Code Review

This pull request correctly fixes an issue where the ColorPicker's HEX input allowed invalid characters. The fix, which involves tightening a regular expression, is appropriate and effective. The accompanying test changes validate the new behavior. I have one suggestion to improve the readability and remove redundancy in the test code.

components/color-picker/__tests__/components.test.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

github-actions · 2026-01-28T07:38:58Z

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。

fix(color-picker): restrict HEX input to valid hex characters

2d6dc9e

gemini-code-assist bot reviewed Jan 27, 2026

View reviewed changes

components/color-picker/__tests__/components.test.tsx Show resolved Hide resolved

treephesians changed the title ~~fix(color-picker): restrict HEX input to valid hex characters~~ fix(ColorPicker): restrict HEX input to valid hex characters Jan 27, 2026

treephesians and others added 2 commits January 27, 2026 18:08

test(ColorPicker): add test invalid input like ff_00_gg

8f41aa1

Merge branch 'master' into fix/color-picker-hex-input

0506e10

gemini-code-assist bot reviewed Jan 28, 2026

View reviewed changes

components/color-picker/__tests__/components.test.tsx Show resolved Hide resolved

Update components/color-picker/__tests__/components.test.tsx

7f8e8b1

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

zombieJ approved these changes Jan 28, 2026

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Jan 28, 2026

zombieJ merged commit b2d14dd into ant-design:master Jan 28, 2026
39 checks passed

afc163 mentioned this pull request Jan 30, 2026

chore: bump version to 6.2.3 #56813

Merged

Uh oh!

Conversation

treephesians commented Jan 27, 2026

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Jan 27, 2026

Uh oh!

gemini-code-assist bot commented Jan 27, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

github-actions bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #56752 Passed ✅

Uh oh!

github-actions bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

发布说明

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Poem

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

pkg-pr-new bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

codecov bot commented Jan 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

zombieJ commented Jan 28, 2026

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 28, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Jan 27, 2026 •

edited

Loading

github-actions bot commented Jan 27, 2026 •

edited

Loading

coderabbitai bot commented Jan 27, 2026 •

edited

Loading

pkg-pr-new bot commented Jan 27, 2026 •

edited

Loading

codecov bot commented Jan 27, 2026 •

edited

Loading

codecov bot commented Jan 27, 2026 •

edited

Loading