feat: ColorPicker implement `showText` API #42865

RedJue · 2023-06-06T11:35:49Z

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

Light：

Dark:

📝 Changelog

Language	Changelog
🇺🇸 English	`ColorPicker` implement `showText` API
🇨🇳 Chinese	`颜色选择器` 实现 `showText` API

☑️ 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 2babb91`

This pull request adds a new feature to the ColorPicker component that allows showing the selected color as a text value in different formats. It updates the component logic, style, documentation, and tests to support this feature. It also adds a new demo file showValue.tsx and its corresponding markdown file showValue.md to showcase the feature.

🔍 Walkthrough

`🤖 Generated by Copilot at 2babb91`

Add a new prop showValue to the ColorPicker component, which controls whether to show the selected color as a string in the trigger component (link, link, link, link, link).

github-actions · 2023-06-06T11:36:05Z

github-actions · 2023-06-06T11:36:16Z

Pull reviewers stats

Stats of the last 30 days for ant-design:

User	Total reviews	Time to review	Total comments
afc163	93	1h 54m	80
li-jia-nan	90	2h 19m	79
MadCcc	55	1d 22h 44m	122
kiner-tang	51	20m	30
yoyo837	33	43m	33
zombieJ	30	2h 32m	25
RedJue	10	3h 50m	15
heiyu4585	2	30m	0
RexSkz	2	48m	5
PeachScript	1	29m	0
vagusX	1	1h 36m	0
Wxh16144	1	21m	3
any1024	1	7h 10m	2
sawadyecma	1	1h 51m	2
bombillazo	1	23h 49m	1
BoyYangzai	1	20m	2
lke-twh	1	2h 49m	0

github-actions · 2023-06-06T11:40:55Z

size-limit report 📦

Path	Size
`./dist/antd.min.js`	377.02 KB (+202 B 🔺)
`./dist/antd-with-locales.min.js`	436.47 KB (+231 B 🔺)

codecov · 2023-06-06T11:56:27Z

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (2c20dcd) 100.00% compared to head (0372c2f) 100.00%.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #42865   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          650       650           
  Lines        10956     10974   +18     
  Branches      2971      2979    +8     
=========================================
+ Hits         10956     10974   +18

Impacted Files	Coverage Δ
components/color-picker/style/index.ts	`100.00% <ø> (ø)`
components/color-picker/ColorPicker.tsx	`100.00% <100.00%> (ø)`
...omponents/color-picker/components/ColorTrigger.tsx	`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.

components/color-picker/index.en-US.md

afc163 · 2023-06-07T02:48:24Z

components/color-picker/index.zh-CN.md

+| disabled | 禁用颜色选择器 | boolean | - | |
+| placement | 弹出窗口的位置 | `top` \| `topLeft` \| `topRight` \| `bottom` \| `bottomLeft` \| `bottomRight` | `bottomLeft` | |
+| arrow | 配置弹出的箭头 | `boolean \| { pointAtCenter: boolean }` | true | |
+| showValue | 是否显示选定的颜色 | `boolean` | - | 5.7.0 |


这个 showValue 直观上看不出来是啥意思，是不是类似 DatePicker 一样给个 format 函数？

还能解决自定义的问题。

目前只是简单的根据 format 生成对应的颜色字符串，如果需要深度定制 format 格式确实需要一个函数，意下如何？ cc @MadCcc

函数吧，一步到位。

afc163 · 2023-06-07T05:50:40Z

components/color-picker/ColorPicker.tsx

@@ -39,6 +39,7 @@ export interface ColorPickerProps
  allowClear?: boolean;
  presets?: PresetsItem[];
  arrow?: boolean | { pointAtCenter: boolean };
+  showValue?: boolean;


我意思是不需要 showValue 这个属性了，这个命名不好，不容易理解。

直接用 format 取代掉。

format 已经有对应属性了，换一个?

确实，<ColorPicker inputRender={} /> 好了。

inputRender:( formatStr:string ) => string
or
inputRender:( formatStr:string, color:Color) => string ? @afc163

inputRender: (color: Color) => React.ReactNode

color 是对象还是字符串

Co-authored-by: MadCcc <1075746765@qq.com>

li-jia-nan · 2023-06-19T03:04:35Z

components/color-picker/components/ColorTrigger.tsx

@@ -40,6 +42,9 @@ const ColorTrigger = forwardRef<HTMLDivElement, colorTriggerProps>((props, ref)
      {...rest}
    >
      {containerNode}
+      {typeof textRender === 'function' && (


这个在 ts 中已经约束了函数，这里不需要判断类型了吧

Suggested change

{typeof textRender === 'function' && (

{textRender && (

兜底也可以，可以保证 js 不会报错

我的想法是这种情况反而不需要兜底，如果用户传了不是函数，就让 js 把报错抛出去，兜底的话用户反而看不到错误，不知道为啥这里不显示 dom

如果值隐式转换成boolean ，可能会多一个空节点。

components/color-picker/components/ColorTrigger.tsx

Co-authored-by: MadCcc <1075746765@qq.com>

MadCcc · 2023-06-19T03:36:41Z

components/color-picker/style/index.ts

          alignItems: 'center',
          justifyContent: 'center',
          transition: `all ${motionDurationMid}`,
          background: colorBgElevated,
+          padding: paddingXXS - 1,


1 可以写成 lineWidth

MadCcc · 2023-06-19T03:37:22Z

components/color-picker/style/index.ts

@@ -142,6 +146,12 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
              borderColor: colorBgTextActive,
            },
          },
+          [`${componentCls}-trigger-text`]: {
+            marginInlineStart: marginXS,
+            marginInlineEnd: marginXS - 2,


尽量不要留魔法数字

这里改成 lineWidth * 2 ？

fuji221 · 2023-06-19T03:42:05Z

文字颜色如上

components/color-picker/style/index.ts

MadCcc · 2023-06-19T06:37:39Z

components/color-picker/style/index.ts

@@ -142,6 +146,12 @@ const genColorPickerStyle: GenerateStyle<ColorPickerToken> = (token) => {
              borderColor: colorBgTextActive,
            },
          },
+          [`${componentCls}-trigger-text`]: {
+            marginInlineStart: marginXS,
+            marginInlineEnd: marginXS - lineWidth * 2,


这里的 lineWidth*2 没什么道理，如果是两边对称应该是减去原有的 padding

MadCcc · 2023-06-19T06:41:17Z

components/color-picker/components/ColorTrigger.tsx

@@ -40,6 +42,9 @@ const ColorTrigger = forwardRef<HTMLDivElement, colorTriggerProps>((props, ref)
      {...rest}
    >
      {containerNode}
+      {typeof textRender === 'function' && (
+        <div className={`${colorTriggerPrefixCls}-text`}>{textRender(color)}</div>


感觉还是加个默认的 showText 好点，textRender 还是要写代码

showText 跟之前 showValue 是一个意思？

components/color-picker/ColorPicker.tsx

RedJue requested a review from MadCcc June 6, 2023 11:36

MadCcc reviewed Jun 6, 2023

View reviewed changes

components/color-picker/index.en-US.md Outdated Show resolved Hide resolved

afc163 reviewed Jun 7, 2023

View reviewed changes

RedJue and others added 4 commits June 19, 2023 10:05

feat: color-picker support showValue api

a0943c0

Update components/color-picker/index.en-US.md

eb2e60b

Co-authored-by: MadCcc <1075746765@qq.com>

docs: add version column

a73f11d

test: fix test coverage

32483ae

RedJue force-pushed the feature-color-picker-showvalue branch from bb68bbd to 32483ae Compare June 19, 2023 02:05

feat: replace showValue with textRender

fcfbd76

RedJue changed the title ~~feat: ColorPicker implement showValue API~~ feat: ColorPicker implement textRender API Jun 19, 2023

RedJue changed the title ~~feat: ColorPicker implement textRender API~~ feat: ColorPicker implement textRender API Jun 19, 2023

li-jia-nan reviewed Jun 19, 2023

View reviewed changes

MadCcc reviewed Jun 19, 2023

View reviewed changes

components/color-picker/components/ColorTrigger.tsx Outdated Show resolved Hide resolved

Update components/color-picker/components/ColorTrigger.tsx

95d5c0c

Co-authored-by: MadCcc <1075746765@qq.com>

MadCcc reviewed Jun 19, 2023

View reviewed changes

fix: style issue

6ef06aa

MadCcc reviewed Jun 19, 2023

View reviewed changes

components/color-picker/style/index.ts Outdated Show resolved Hide resolved

MadCcc reviewed Jun 19, 2023

View reviewed changes

RedJue added 2 commits June 19, 2023 16:54

feat: add showText prop and optimization code

91a4a3c

chore: merge feature

55656de

afc163 reviewed Jun 19, 2023

View reviewed changes

components/color-picker/ColorPicker.tsx Outdated Show resolved Hide resolved

fix: lint issue

53fd1db

RedJue added 3 commits June 19, 2023 17:43

test: fix coverage

75bc046

refactor: combine showText and textRender

adbdc16

fix: lint issue

0372c2f

RedJue changed the title ~~feat: ColorPicker implement textRender API~~ feat: ColorPicker implement showText API Jun 19, 2023

MadCcc approved these changes Jun 19, 2023

View reviewed changes

MadCcc merged commit 1fb8fc5 into feature Jun 19, 2023
92 of 93 checks passed

MadCcc deleted the feature-color-picker-showvalue branch June 19, 2023 11:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: ColorPicker implement `showText` API #42865

feat: ColorPicker implement `showText` API #42865

RedJue commented Jun 6, 2023 •

edited

github-actions bot commented Jun 6, 2023 •

edited

github-actions bot commented Jun 6, 2023

github-actions bot commented Jun 6, 2023 •

edited

codecov bot commented Jun 6, 2023 •

edited

afc163 Jun 7, 2023

afc163 Jun 7, 2023

RedJue Jun 7, 2023

afc163 Jun 7, 2023

afc163 Jun 7, 2023

RedJue Jun 7, 2023

afc163 Jun 7, 2023

RedJue Jun 7, 2023 •

edited

afc163 Jun 7, 2023 •

edited

RedJue Jun 7, 2023

afc163 Jun 7, 2023

li-jia-nan Jun 19, 2023

MadCcc Jun 19, 2023

li-jia-nan Jun 19, 2023

RedJue Jun 19, 2023

MadCcc Jun 19, 2023

RedJue Jun 19, 2023

MadCcc Jun 19, 2023

RedJue Jun 19, 2023

fuji221 commented Jun 19, 2023

MadCcc Jun 19, 2023

MadCcc Jun 19, 2023

RedJue Jun 19, 2023

feat: ColorPicker implement showText API #42865

feat: ColorPicker implement showText API #42865

Conversation

RedJue commented Jun 6, 2023 • edited

🤔 This is a ...

🔗 Related issue link

💡 Background and solution

📝 Changelog

☑️ Self-Check before Merge

🚀 Summary

🤖 Generated by Copilot at 2babb91

🔍 Walkthrough

🤖 Generated by Copilot at 2babb91

github-actions bot commented Jun 6, 2023 • edited

github-actions bot commented Jun 6, 2023

Pull reviewers stats

github-actions bot commented Jun 6, 2023 • edited

size-limit report 📦

codecov bot commented Jun 6, 2023 • edited

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RedJue Jun 7, 2023 • edited

Choose a reason for hiding this comment

afc163 Jun 7, 2023 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fuji221 commented Jun 19, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

feat: ColorPicker implement `showText` API #42865

feat: ColorPicker implement `showText` API #42865

RedJue commented Jun 6, 2023 •

edited

`🤖 Generated by Copilot at 2babb91`

`🤖 Generated by Copilot at 2babb91`

github-actions bot commented Jun 6, 2023 •

edited

github-actions bot commented Jun 6, 2023 •

edited

codecov bot commented Jun 6, 2023 •

edited

RedJue Jun 7, 2023 •

edited

afc163 Jun 7, 2023 •

edited