refactor: FloatButton support css var #45861
Conversation
|
|
|
|
| @@ -32,7 +33,8 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => { | |||
|
|
|||
| const { direction, getPrefixCls } = useContext<ConfigConsumerProps>(ConfigContext); | |||
| const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls); | |||
| const [wrapSSR, hashId] = useStyle(prefixCls); | |||
| const [, hashId] = useStyle(prefixCls); | |||
| const wrapCSSVar = useCSSVar(prefixCls); | |||
There was a problem hiding this comment.
用 useCSSVarCls 取一个 roolCls 吧，FloatButton 那里也是。
这里 prefixCls 不是最外层，不会作用到最外层元素
|
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 de38f31:
|
| /** | ||
| * @desc 圆形按钮中徽章点的偏移量 | ||
| * @descEN Offset of the badge dot in a circular button | ||
| */ | ||
| dotOffsetInCircle: number; | ||
| /** | ||
| * @desc 方形按钮中徽章点的偏移量 | ||
| * @descEN Offset of the badge dot in a square button | ||
| */ | ||
| dotOffsetInSquare: number; |
There was a problem hiding this comment.
这两个打上 @internal 或者直接移到 FloatButtonToken 里吧，不对外透出
There was a problem hiding this comment.
只能放ComponentToken了，因为涉及到的计算在css实现不了
|
The latest updates on your projects. Learn more about Argos notifications ↗︎
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## feature #45861 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 706 706
Lines 12052 12083 +31
Branches 3197 3197
=========================================
+ Hits 12052 12083 +31 ☔ View full report in Codecov by Sentry. |
| } = token; | ||
| return { | ||
| [componentCls]: { | ||
| ...resetComponent(token), | ||
| border: 'none', | ||
| position: 'fixed', | ||
| cursor: 'pointer', | ||
| zIndex: 99, | ||
| zIndex: token.zIndexPopup, |
There was a problem hiding this comment.
要不把 zIndexPopup 删了？因为现在这个token也没用到。
[中文版模板 / Chinese template]
🤔 This is a ...
🔗 Related issue link
💡 Background and solution
📝 Changelog
☑️ Self-Check before Merge
🚀 Summary
🤖 Generated by Copilot at 808dbd3
This pull request refactors the float button component and its group variant to use CSS variables for styling and customization. It introduces a new hook
useCSSVarand a new functionwrapCSSVarto register and apply the CSS variables. It also enhances the style and customization of the component by using the@ant-design/cssinjslibrary and thezIndexPopuptoken value. It adds a new filecomponents/float-button/style/cssVar.tsto export theuseCSSVarhook.🔍 Walkthrough
🤖 Generated by Copilot at 808dbd3
wrapSSRfunction withwrapCSSVarfunction and destructurehashIdfromuseStylehook inFloatButtonandFloatButtonGroupcomponents to use CSS variables (link,link,link,link)useCSSVarhook from./style/cssVarinFloatButtonandFloatButtonGroupcomponents to register and use CSS variables (link,link)components/float-button/style/cssVar.tsfile to exportuseCSSVarhook that usesgenCSSVarRegisterandprepareComponentTokenfunctions to create a CSS variable provider and consumer for the float button component (link)unitfunction from@ant-design/cssinjsto convert numeric token values to CSS unit strings ininitFloatButtonGroupMotionandsharedFloatButtonStylefunctions (link,link,link,link,link,link,link)calcfunction from@ant-design/cssinjsto create CSScalcexpressions for token values that accept custom CSS units or expressions infloatButtonGroupStyle,sharedFloatButtonStyle, and default export functions (link,link,link,link)zIndexPopuptoken value instead of hard-coded99value forzIndexproperty ofFloatButtonandFloatButtonGroupcomponents (link,link)ComponentTokeninterface to describe the meaning and usage of each token value (link)FloatButtonTokeninterface to make some token values accept either a number or a string, such asfloatButtonIconSize,floatButtonBodySize, andbadgeOffset(link)