Skip to content
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.

Sign up for GitHub

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

Jump to bottom

docs: Form add ColorPicker demo #42880

Merged
merged 14 commits into from Jul 12, 2023
Merged

docs: Form add ColorPicker demo #42880

merged 14 commits into from Jul 12, 2023

Conversation

RedJue
Copy link
Member

@RedJue RedJue commented Jun 7, 2023 •
edited

[中文版模板 / Chinese template]

🤔 This is a ...

  • New feature
  • Bug fix
  • Site / documentation update
  • Demo update
  • Component style update
  • TypeScript definition update
  • Bundle size optimization
  • Performance optimization
  • Enhancement feature
  • Internationalization
  • Refactoring
  • Code style optimization
  • Test Case
  • Branch merge
  • Workflow
  • Other (about what?)

🔗 Related issue link

💡 Background and solution

📝 Changelog

Language Changelog
🇺🇸 English Form component validation add ColorPicker example and fix ColorPicker not following Form validation state
🇨🇳 Chinese 表单组件校验添加颜色选择器示例，并且修复颜色选择器不跟随表单校验状态的问题

☑️ Self-Check before Merge

⚠️ Please check all items below before requesting a reviewing. ⚠️

  • Doc is updated/provided or not needed
  • Demo is updated/provided or not needed
  • TypeScript definition is updated/provided or not needed
  • Changelog is provided or not needed

🚀 Summary

🤖 Generated by Copilot at 5ef894e

Added a color picker option to the form demo. Used ColorPicker from @ant-design/colors and cleaned up components/form/demo/validate-other.tsx.

🔍 Walkthrough

🤖 Generated by Copilot at 5ef894e

  • Import and use ColorPicker component from @ant-design/colors in form demo (components/form/demo/validate-other.tsx, link, link)
  • Delete empty line for code readability and style consistency (components/form/demo/validate-other.tsx, link)

@afc163
Copy link
Member

afc163 commented Jun 7, 2023

需要更新 snapshot

@RedJue
Copy link
Member Author

RedJue commented Jun 7, 2023

需要更新 snapshot

ok

@github-actions
Copy link
Contributor

github-actions bot commented Jun 7, 2023 •
edited

@github-actions
Copy link
Contributor

github-actions bot commented Jun 7, 2023

Pull reviewers stats

Stats of the last 30 days for ant-design:

User Total reviews Time to review Total comments
afc163 103 1h 25m 91
li-jia-nan 94 2h 82
MadCcc 58 1d 22h 44m 125
kiner-tang 52 20m 28
yoyo837 33 42m 34
zombieJ 30 2h 32m 25
RedJue 10 3h 50m 15
heiyu4585 2 30m 0
RexSkz 2 48m 5
BoyYangzai 2 17m 6
vagusX 1 1h 36m 0
Wxh16144 1 21m 3
any1024 1 7h 10m 2
sawadyecma 1 1h 51m 2
bombillazo 1 23h 49m 1
lke-twh 1 2h 49m 0

@github-actions
Copy link
Contributor

github-actions bot commented Jun 7, 2023 •
edited

size-limit report 📦

Path Size
./dist/antd.min.js 381.22 KB (+151 B 🔺)
./dist/antd-with-locales.min.js 440.83 KB (+181 B 🔺)

@codecov
Copy link

codecov bot commented Jun 7, 2023 •
edited

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (5ce9818) 100.00% compared to head (62ef340) 100.00%.

Additional details and impacted files 
@@            Coverage Diff            @@
##            master    #42880   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          657       657           
  Lines        11041     11048    +7     
  Branches      2988      2990    +2     
=========================================
+ Hits         11041     11048    +7
Impacted Files Coverage Δ
components/color-picker/ColorPicker.tsx 100.00% <100.00%> (ø)
components/color-picker/color.ts 100.00% <100.00%> (ø)
components/color-picker/hooks/useColorState.ts 100.00% <100.00%> (ø)
components/color-picker/style/index.ts 100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

@RedJue RedJue force-pushed the doc-form-add-color-picker branch 2 times, most recently from 0b7c575 to 7cd6fa9 Compare June 9, 2023 02:36
@kiner-tang
Copy link
Member

kiner-tang commented Jun 9, 2023 •
edited

https://codesandbox.io/s/xiao-yan-qi-ta-zu-jian-antd-5-6-1-forked-s9c5jw 看一下这个，ColorPicker 默认展示了一个 蓝色，但 form 还是认为没有值，感觉这个交互有点奇怪。
image

感觉默认情况是不是改为 无颜色 比较好，或者是在表单中默认无颜色，其他场景保持现状

image

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 9, 2023 •
edited

赞同, 默认蓝色有误导嫌疑

@RedJue
Copy link
Member Author

RedJue commented Jun 9, 2023

目前好像没有空颜色这种状态，可能需要单独加个API🤔？

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 9, 2023 •
edited

我个人建议这样干, 默认值为null ,value 接受到null或者 transparent, picker就显示一个空颜色状态, 至于长啥样, 可以按设计要求来. 非null或者 transparent的值就展示颜色

edit: 还有 undefined

@RedJue
Copy link
Member Author

RedJue commented Jun 9, 2023

或者可以优化下逻辑，如果支持清除的场景下没给初始值就默认展示空颜色。

@yoyo837
Copy link
Contributor

yoyo837 commented Jun 9, 2023

image image

这是我自己项目的, 仅参考

@kiner-tang
Copy link
Member

此外，建议 ColorPicker 跟 Input 一样，支持报错时边框变红，增强提示反馈的力度：
image

@RedJue
Copy link
Member Author

RedJue commented Jun 9, 2023

这个等大佬们度假归来讨论下，现在确实需要优化👌

@zombieJ
Copy link
Member

zombieJ commented Jun 12, 2023

此外，建议 ColorPicker 跟 Input 一样，支持报错时边框变红，增强提示反馈的力度： image

你这是正解~哈哈

kiner-tang
kiner-tang reviewed Jun 13, 2023
View reviewed changes
components/color-picker/index.zh-CN.md Outdated Show resolved Hide resolved
components/color-picker/index.zh-CN.md Outdated Show resolved Hide resolved
@RedJue RedJue force-pushed the doc-form-add-color-picker branch from ffc3d32 to 93b7e60 Compare June 13, 2023 09:09
@RedJue
Copy link
Member Author

RedJue commented Jun 13, 2023

先别合，还差个 size 的 feature，等那个合到 master 再合。

@afc163 afc163 marked this pull request as draft June 16, 2023 15:15
@RedJue RedJue marked this pull request as ready for review July 10, 2023 09:37
@zombieJ
Copy link
Member

zombieJ commented Jul 11, 2023

changelog 不对，这个其实不仅仅是添加示例。而是修复 ColorPicker 不跟随 Form 校验状态的问题。

@RedJue
Copy link
Member Author

RedJue commented Jul 11, 2023

changelog 不对，这个其实不仅仅是添加示例。而是修复 ColorPicker 不跟随 Form 校验状态的问题。

我更新下描述

@zombieJ
Copy link
Member

zombieJ commented Jul 11, 2023

Note all: 等 #43483 发布后再合这个 PR

@afc163
Copy link
Member

afc163 commented Jul 11, 2023

等 #43483 发布？是不是贴错 PR 链接了

@zombieJ
Copy link
Member

zombieJ commented Jul 11, 2023

等 #43483 发布？是不是贴错 PR 链接了

贴错了。 。 。等 minor 发布

@zombieJ zombieJ merged commit 3e5a392 into master Jul 12, 2023
88 checks passed
@zombieJ zombieJ deleted the doc-form-add-color-picker branch July 12, 2023 02:15
@afc163 afc163 mentioned this pull request Jul 17, 2023
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@afc163 afc163 afc163 left review comments

@kiner-tang kiner-tang kiner-tang left review comments

@MadCcc MadCcc MadCcc left review comments

@zombieJ zombieJ zombieJ approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
6 participants
@RedJue @afc163 @kiner-tang @yoyo837 @zombieJ @MadCcc