refactor: Switch support css var #45867
Conversation
|
|
|
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit dee9f4e:
|
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
| @@ -401,29 +427,5 @@ export default genComponentStyleHook( | |||
| genSwitchSmallStyle(switchToken), | |||
There was a problem hiding this comment.
switchToken 里有个 switchLoadingIconSize 计算过
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature #45867 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 706 706
Lines 12084 12101 +17
Branches 3197 3197
=========================================
+ Hits 12084 12101 +17 ☔ View full report in Codecov by Sentry. |
|
点击时的动画没了 |
|
|
2023-11-14.16.38.53.mov |
|
@JarvisArt check-cssinjs 的 switch 去掉跑一下 lint 看看？ |
|
点击的时候有一个白球拉长的动画 |
确实 |
components/switch/style/index.ts
Outdated
| boxShadow: handleShadow, | ||
| transition: `all ${token.switchDuration} ease-in-out`, | ||
| content: '""', | ||
| }, | ||
| }, | ||
|
|
||
| [`&${componentCls}-checked ${switchHandleCls}`]: { | ||
| insetInlineStart: `calc(100% - ${handleSize + trackPadding}px)`, | ||
| insetInlineStart: `calc(100% - ${unit(calc(handleSize).add(trackPadding).equal())})`, | ||
| }, | ||
|
|
||
| [`&:not(${componentCls}-disabled):active`]: motion |
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
📝 Changelog
☑️ Self-Check before Merge
🚀 Summary
🤖 Generated by Copilot at 89f075f
This pull request enhances the Switch component with CSS variables support and style refactoring. It introduces a new
useCSSVarhook that registers and updates the CSS variables for the component. It also uses the@ant-design/cssinjspackage to simplify the style calculations and units.🔍 Walkthrough
🤖 Generated by Copilot at 89f075f
useCSSVarhook to enable the use of CSS variables for the Switch component (link, link, link, link)unitfunction and theGetDefaultTokentype to convert numeric values to CSS units and annotate theprepareComponentTokenfunction (link)calcfunction calls to simplify the arithmetic expressions and ensure valid CSS units in the Switch component styles (link, link, link, link, link, link, link, link, link, link, link, link, link, link, link, link)prepareComponentTokenfunction to calculate the token values for the Switch component from theuseSwitchStylehook incomponents/switch/style/index.ts(link, link)