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.

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

feat: ColorPicker implement disabledAlpha API #43355

Merged
merged 8 commits into from Jul 12, 2023

Conversation

RedJue
Copy link
Member

@RedJue RedJue commented Jul 4, 2023

[中文版模板 / 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

image

📝 Changelog

Language Changelog
🇺🇸 English ColorPicker implement disabledAlpha API
🇨🇳 Chinese 颜色选择器实现 disabledAlpha 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 0f80144

Added a new feature to the ColorPicker component to allow disabling the alpha channel of the color picker. This feature is controlled by a new prop disabledAlpha that is passed to the ColorPicker and its subcomponents. Updated the documentation, demo, styles, and tests to reflect this change.

🔍 Walkthrough

🤖 Generated by Copilot at 0f80144

  • Add disabledAlpha prop to ColorPicker component and its subcomponents to allow users to disable the alpha channel of the color picker (link, link, link, link, link)
  • Pass disabledAlpha prop to RcColorPickerPanel and ColorInput components in PanelPicker component to disable the alpha slider and input in the panel and the input box (link, link)
  • Destructure disabledAlpha prop from the props object in ColorPicker, PanelPicker, and ColorInput components to use it later (link, link, link)
  • Add conditional rendering to ColorInput component to hide the ColorAlphaInput component if the disabledAlpha prop is true (link)
  • Add margin bottom styles to the hue slider and the slider group in the genPickerStyle function to avoid overlapping and create some space between the sliders and the input box (link, link)
  • Add a new style rule to the slider group with the disabledAlpha modifier to adjust the layout of the sliders when the alpha slider is disabled (link)
  • Add a new test case to check if the disabledAlpha prop works as expected in the ColorPicker component (link)
  • Add a new example link and a new API entry to the ColorPicker documentation in Chinese and English to describe the disabledAlpha prop (link, link, link, link)
  • Omit the disabledAlpha prop from the ColorPickerProps type to avoid passing it to the underlying RcColorPicker component, which does not support it (link)

@stackblitz
Copy link

stackblitz bot commented Jul 4, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Contributor

github-actions bot commented Jul 4, 2023

@RedJue RedJue requested a review from MadCcc July 4, 2023 10:37
@github-actions
Copy link
Contributor

github-actions bot commented Jul 4, 2023

size-limit report 📦

Path Size
./dist/antd.min.js 381.54 KB (+128 B 🔺)
./dist/antd-with-locales.min.js 441.17 KB (+132 B 🔺)

@kiner-tang
Copy link
Member

ci 挂了

@kiner-tang
Copy link
Member

好像是 cssinjs 那个问题搞挂的

@RedJue
Copy link
Member Author

RedJue commented Jul 4, 2023

好像是 cssinjs 那个问题搞挂的

在看了👌

@RedJue RedJue force-pushed the color-picker-disabled-alpha branch from 0f80144 to 8f0958a Compare July 7, 2023 03:17
@codecov
Copy link

codecov bot commented Jul 7, 2023

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (3e5a392) 100.00% compared to head (4931e18) 100.00%.

Additional details and impacted files
@@            Coverage Diff            @@
##           feature    #43355   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          657       657           
  Lines        11162     11077   -85     
  Branches      3029      2998   -31     
=========================================
- Hits         11162     11077   -85     
Impacted Files Coverage Δ
components/color-picker/components/PanelPicker.tsx 100.00% <ø> (ø)
components/color-picker/style/picker.ts 100.00% <ø> (ø)
components/modal/useModal/HookModal.tsx 100.00% <ø> (ø)
components/_util/ActionButton.tsx 100.00% <100.00%> (ø)
components/color-picker/ColorPicker.tsx 100.00% <100.00%> (ø)
components/color-picker/components/ColorInput.tsx 100.00% <100.00%> (ø)
components/color-picker/util.ts 100.00% <100.00%> (ø)
components/modal/ConfirmDialog.tsx 100.00% <100.00%> (ø)
components/modal/useModal/index.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.

@MadCcc
Copy link
Member

MadCcc commented Jul 7, 2023

如果用户传了一个带透明度的颜色,会不会帮用户把透明度去掉?

@RedJue
Copy link
Member Author

RedJue commented Jul 7, 2023

如果用户传了一个带透明度的颜色,会不会帮用户把透明度去掉?

代码里没做限制,感觉需要做一下限制,因为可能有复合使用的场景,我补充一下。

@li-jia-nan
Copy link
Member

Conflicting

@RedJue RedJue force-pushed the color-picker-disabled-alpha branch from 8f0958a to bb1f44f Compare July 10, 2023 05:54
@vagusX vagusX mentioned this pull request Jul 10, 2023
20 tasks
@MadCcc
Copy link
Member

MadCcc commented Jul 10, 2023

如果用户传了一个带透明度的颜色,会不会帮用户把透明度去掉?

代码里没做限制,感觉需要做一下限制,因为可能有复合使用的场景,我补充一下。

处理的时候应该把透明度变为 1,并且给出警告

@RedJue
Copy link
Member Author

RedJue commented Jul 10, 2023

如果用户传了一个带透明度的颜色,会不会帮用户把透明度去掉?

代码里没做限制,感觉需要做一下限制,因为可能有复合使用的场景,我补充一下。

处理的时候应该把透明度变为 1,并且给出警告

ok 我加一下

@RedJue RedJue force-pushed the color-picker-disabled-alpha branch from 7f6a40b to 7382b0f Compare July 10, 2023 08:57
@RedJue RedJue force-pushed the color-picker-disabled-alpha branch from 7382b0f to afbcb28 Compare July 11, 2023 03:29
@li-jia-nan
Copy link
Member

Conflicting

@RedJue RedJue changed the title feat: ColorPicker implement disabledAlpha API feat: ColorPicker implement disabledAlpha API Jul 12, 2023
@MadCcc MadCcc merged commit c377457 into feature Jul 12, 2023
90 checks passed
@MadCcc MadCcc deleted the color-picker-disabled-alpha branch July 12, 2023 11:42
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants