refactor: FloatButton support css var (ant-design#45861)

* refactor: FloatButton support css var * refactor: FloatButton support css var * refactor: FloatButton support css var
peter-boot · Nov 15, 2023 · 0de7f06 · 0de7f06
1 parent 67a3f1e
commit 0de7f06
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 60 deletions.
diff --git a/components/float-button/FloatButton.tsx b/components/float-button/FloatButton.tsx
@@ -18,6 +18,8 @@ import type {
   FloatButtonShape,
 } from './interface';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 export const floatButtonPrefixCls = 'float-btn';
 
@@ -37,12 +39,15 @@ const FloatButton = forwardRef<FloatButtonRef['nativeElement'], FloatButtonProps
   const { getPrefixCls, direction } = useContext<ConfigConsumerProps>(ConfigContext);
   const groupShape = useContext<FloatButtonShape | undefined>(FloatButtonGroupContext);
   const prefixCls = getPrefixCls(floatButtonPrefixCls, customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
 
   const mergeShape = groupShape || shape;
 
   const classString = classNames(
     hashId,
+    rootCls,
     prefixCls,
     className,
     rootClassName,
@@ -92,7 +97,7 @@ const FloatButton = forwardRef<FloatButtonRef['nativeElement'], FloatButtonProps
     );
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     props.href ? (
       <a ref={ref} {...restProps} className={classString}>
         {buttonNode}

diff --git a/components/float-button/FloatButtonGroup.tsx b/components/float-button/FloatButtonGroup.tsx
@@ -12,6 +12,8 @@ import { FloatButtonGroupProvider } from './context';
 import FloatButton, { floatButtonPrefixCls } from './FloatButton';
 import type { FloatButtonGroupProps, FloatButtonRef } from './interface';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
   const {
@@ -32,10 +34,12 @@ 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 rootCls = useCSSVarCls(prefixCls);
+  const wrapCSSVar = useCSSVar(rootCls);
   const groupPrefixCls = `${prefixCls}-group`;
 
-  const groupCls = classNames(groupPrefixCls, hashId, className, {
+  const groupCls = classNames(groupPrefixCls, hashId, rootCls, className, {
     [`${groupPrefixCls}-rtl`]: direction === 'rtl',
     [`${groupPrefixCls}-${shape}`]: shape,
     [`${groupPrefixCls}-${shape}-shadow`]: !trigger,
@@ -104,7 +108,7 @@ const FloatButtonGroup: React.FC<FloatButtonGroupProps> = (props) => {
     );
   }
 
-  return wrapSSR(
+  return wrapCSSVar(
     <FloatButtonGroupProvider value={shape}>
       <div ref={floatButtonGroupRef} className={groupCls} style={style} {...hoverAction}>
         {trigger && ['click', 'hover'].includes(trigger) ? (

diff --git a/components/float-button/style/cssVar.ts b/components/float-button/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('FloatButton', prepareComponentToken);
diff --git a/components/float-button/style/index.ts b/components/float-button/style/index.ts
@@ -1,15 +1,24 @@
 import type { CSSObject } from '@ant-design/cssinjs';
-import { Keyframes } from '@ant-design/cssinjs';
+import { Keyframes, unit } from '@ant-design/cssinjs';
 import { resetComponent } from '../../style';
 import { initFadeMotion } from '../../style/motion/fade';
 import { initMotion } from '../../style/motion/motion';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import getOffset from '../util';
 
 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
-  zIndexPopup: number;
+  /**
+   * Offset of the badge dot in a circular button
+   * @internal
+   */
+  dotOffsetInCircle: number;
+  /**
+   * Offset of the badge dot in a square button
+   * @internal
+   */
+  dotOffsetInSquare: number;
 }
 
 type FloatButtonToken = FullToken<'FloatButton'> & {
@@ -18,12 +27,10 @@ type FloatButtonToken = FullToken<'FloatButton'> & {
   floatButtonHoverBackgroundColor: string;
   floatButtonFontSize: number;
   floatButtonSize: number;
-  floatButtonIconSize: number;
-  floatButtonBodySize: number;
+  floatButtonIconSize: number | string;
+  floatButtonBodySize: number | string;
   floatButtonBodyPadding: number;
-  badgeOffset: number;
-  dotOffsetInCircle: number;
-  dotOffsetInSquare: number;
+  badgeOffset: number | string;
 
   // Position
   floatButtonInsetBlockEnd: number;
@@ -35,7 +42,7 @@ const initFloatButtonGroupMotion = (token: FloatButtonToken) => {
   const groupPrefixCls = `${componentCls}-group`;
   const moveDownIn = new Keyframes('antFloatButtonMoveDownIn', {
     '0%': {
-      transform: `translate3d(0, ${floatButtonSize}px, 0)`,
+      transform: `translate3d(0, ${unit(floatButtonSize)}, 0)`,
       transformOrigin: '0 0',
       opacity: 0,
     },
@@ -53,7 +60,7 @@ const initFloatButtonGroupMotion = (token: FloatButtonToken) => {
       opacity: 1,
     },
     '100%': {
-      transform: `translate3d(0, ${floatButtonSize}px, 0)`,
+      transform: `translate3d(0, ${unit(floatButtonSize)}, 0)`,
       transformOrigin: '0 0',
       opacity: 0,
     },
@@ -93,6 +100,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
     borderRadiusSM,
     badgeOffset,
     floatButtonBodyPadding,
+    calc,
   } = token;
   const groupPrefixCls = `${componentCls}-group`;
   return {
@@ -146,12 +154,12 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
           borderEndEndRadius: borderRadiusLG,
         },
         '&:not(:last-child)': {
-          borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+          borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
         },
         [`${antCls}-badge`]: {
           [`${antCls}-badge-count`]: {
-            top: -(floatButtonBodyPadding + badgeOffset),
-            insetInlineEnd: -(floatButtonBodyPadding + badgeOffset),
+            top: calc(calc(floatButtonBodyPadding).add(badgeOffset)).mul(-1).equal(),
+            insetInlineEnd: calc(calc(floatButtonBodyPadding).add(badgeOffset)).mul(-1).equal(),
           },
         },
       },
@@ -173,7 +181,7 @@ const floatButtonGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token
             borderEndEndRadius: borderRadiusLG,
           },
           '&:not(:last-child)': {
-            borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+            borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
           },
           [`${componentCls}-body`]: {
             width: token.floatButtonBodySize,
@@ -212,6 +220,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
     badgeOffset,
     dotOffsetInSquare,
     dotOffsetInCircle,
+    calc,
   } = token;
   return {
     [componentCls]: {
@@ -243,8 +252,8 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
         [`${antCls}-badge-count`]: {
           transform: 'translate(0, 0)',
           transformOrigin: 'center',
-          top: -badgeOffset,
-          insetInlineEnd: -badgeOffset,
+          top: calc(badgeOffset).mul(-1).equal(),
+          insetInlineEnd: calc(badgeOffset).mul(-1).equal(),
         },
       },
       [`${componentCls}-body`]: {
@@ -262,7 +271,9 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
           flexDirection: 'column',
           justifyContent: 'center',
           alignItems: 'center',
-          padding: `${floatButtonBodyPadding / 2}px ${floatButtonBodyPadding}px`,
+          padding: `${unit(calc(floatButtonBodyPadding).div(2).equal())} ${unit(
+            floatButtonBodyPadding,
+          )}`,
           [`${componentCls}-icon`]: {
             textAlign: 'center',
             margin: 'auto',
@@ -321,7 +332,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
           [`${componentCls}-description`]: {
             display: 'flex',
             alignItems: 'center',
-            lineHeight: `${token.fontSizeLG}px`,
+            lineHeight: unit(token.fontSizeLG),
             color: token.colorText,
             fontSize: token.fontSizeSM,
           },
@@ -343,7 +354,7 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
           [`${componentCls}-description`]: {
             display: 'flex',
             alignItems: 'center',
-            lineHeight: `${token.fontSizeLG}px`,
+            lineHeight: unit(token.fontSizeLG),
             color: token.colorTextLightSolid,
             fontSize: token.fontSizeSM,
           },
@@ -354,41 +365,48 @@ const sharedFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (toke
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook<'FloatButton'>('FloatButton', (token) => {
-  const {
-    colorTextLightSolid,
-    colorBgElevated,
-    controlHeightLG,
-    marginXXL,
-    marginLG,
-    fontSize,
-    fontSizeIcon,
-    controlItemBgHover,
-    paddingXXS,
-    borderRadiusLG,
-  } = token;
+export const prepareComponentToken: GetDefaultToken<'FloatButton'> = (token) => ({
+  dotOffsetInCircle: getOffset(token.controlHeightLG / 2),
+  dotOffsetInSquare: getOffset(token.borderRadiusLG),
+});
 
-  const floatButtonToken = mergeToken<FloatButtonToken>(token, {
-    floatButtonBackgroundColor: colorBgElevated,
-    floatButtonColor: colorTextLightSolid,
-    floatButtonHoverBackgroundColor: controlItemBgHover,
-    floatButtonFontSize: fontSize,
-    floatButtonIconSize: fontSizeIcon * 1.5,
-    floatButtonSize: controlHeightLG,
-    floatButtonInsetBlockEnd: marginXXL,
-    floatButtonInsetInlineEnd: marginLG,
-    floatButtonBodySize: controlHeightLG - paddingXXS * 2,
-    // 这里的 paddingXXS 是简写，完整逻辑是 (controlHeightLG - (controlHeightLG - paddingXXS * 2)) / 2,
-    floatButtonBodyPadding: paddingXXS,
-    badgeOffset: paddingXXS * 1.5,
-    dotOffsetInCircle: getOffset(controlHeightLG / 2),
-    dotOffsetInSquare: getOffset(borderRadiusLG),
-  });
+export default genComponentStyleHook<'FloatButton'>(
+  'FloatButton',
+  (token) => {
+    const {
+      colorTextLightSolid,
+      colorBgElevated,
+      controlHeightLG,
+      marginXXL,
+      marginLG,
+      fontSize,
+      fontSizeIcon,
+      controlItemBgHover,
+      paddingXXS,
+      calc,
+    } = token;
 
-  return [
-    floatButtonGroupStyle(floatButtonToken),
-    sharedFloatButtonStyle(floatButtonToken),
-    initFadeMotion(token),
-    initFloatButtonGroupMotion(floatButtonToken),
-  ];
-});
+    const floatButtonToken = mergeToken<FloatButtonToken>(token, {
+      floatButtonBackgroundColor: colorBgElevated,
+      floatButtonColor: colorTextLightSolid,
+      floatButtonHoverBackgroundColor: controlItemBgHover,
+      floatButtonFontSize: fontSize,
+      floatButtonIconSize: calc(fontSizeIcon).mul(1.5).equal(),
+      floatButtonSize: controlHeightLG,
+      floatButtonInsetBlockEnd: marginXXL,
+      floatButtonInsetInlineEnd: marginLG,
+      floatButtonBodySize: calc(controlHeightLG).sub(calc(paddingXXS).mul(2)).equal(),
+      // 这里的 paddingXXS 是简写，完整逻辑是 (controlHeightLG - (controlHeightLG - paddingXXS * 2)) / 2,
+      floatButtonBodyPadding: paddingXXS,
+      badgeOffset: calc(paddingXXS).mul(1.5).equal(),
+    });
+
+    return [
+      floatButtonGroupStyle(floatButtonToken),
+      sharedFloatButtonStyle(floatButtonToken),
+      initFadeMotion(token),
+      initFloatButtonGroupMotion(floatButtonToken),
+    ];
+  },
+  prepareComponentToken,
+);