feat: Alert support cssVar (ant-design#45825)

* feat: Alert support cssVar * Apply suggestions from code review Signed-off-by: MadCcc <[email protected]> --------- Signed-off-by: MadCcc <[email protected]> Co-authored-by: MadCcc <[email protected]>
wanghui2021 · Nov 13, 2023 · 2cd9362 · 2cd9362
1 parent b61d769
commit 2cd9362
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 23 deletions.
diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx
@@ -12,8 +12,8 @@ import pickAttrs from 'rc-util/lib/pickAttrs';
 import { replaceElement } from '../_util/reactNode';
 import { devUseWarning } from '../_util/warning';
 import { ConfigContext } from '../config-provider';
-// CSSINJS
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export interface AlertProps {
   /** Type of Alert styles, options:`success`, `info`, `warning`, `error` */
@@ -127,7 +127,9 @@ const Alert: React.FC<AlertProps> = (props) => {
   const ref = React.useRef<HTMLDivElement>(null);
   const { getPrefixCls, direction, alert } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('alert', customizePrefixCls);
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const handleClose = (e: React.MouseEvent<HTMLButtonElement>) => {
     setClosed(true);
@@ -174,7 +176,7 @@ const Alert: React.FC<AlertProps> = (props) => {
 
   const restProps = pickAttrs(otherProps, { aria: true, data: true });
 
-  return wrapSSR(
+  return wrapCSSVar(
     <CSSMotion
       visible={!closed}
       motionName={`${prefixCls}-motion`}

diff --git a/components/alert/style/cssVar.ts b/components/alert/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { prepareComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister<'Alert'>('Alert', prepareComponentToken);
diff --git a/components/alert/style/index.ts b/components/alert/style/index.ts
@@ -1,7 +1,9 @@
-import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import type { CSSProperties } from 'react';
+import { unit } from '@ant-design/cssinjs';
+import type { CSSObject } from '@ant-design/cssinjs';
+
 import { resetComponent } from '../../style';
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -35,7 +37,7 @@ const genAlertTypeStyle = (
   alertCls: string,
 ): CSSObject => ({
   backgroundColor: bgColor,
-  border: `${token.lineWidth}px ${token.lineType} ${borderColor}`,
+  border: `${unit(token.lineWidth)} ${token.lineType} ${borderColor}`,
   [`${alertCls}-icon`]: {
     color: iconColor,
   },
@@ -113,7 +115,6 @@ export const genBaseStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSO
     [`${componentCls}-with-description`]: {
       alignItems: 'flex-start',
       padding: withDescriptionPadding,
-
       [`${componentCls}-icon`]: {
         marginInlineEnd: marginSM,
         fontSize: withDescriptionIconSize,
@@ -212,7 +213,7 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
         padding: 0,
         overflow: 'hidden',
         fontSize: fontSizeIcon,
-        lineHeight: `${fontSizeIcon}px`,
+        lineHeight: unit(fontSizeIcon),
         backgroundColor: 'transparent',
         border: 'none',
         outline: 'none',
@@ -238,22 +239,17 @@ export const genActionStyle: GenerateStyle<AlertToken> = (token: AlertToken): CS
   };
 };
 
-export const genAlertStyle: GenerateStyle<AlertToken> = (token: AlertToken): CSSInterpolation => [
-  genBaseStyle(token),
-  genTypeStyle(token),
-  genActionStyle(token),
-];
+export const prepareComponentToken: GetDefaultToken<'Alert'> = (token) => {
+  const paddingHorizontal = 12; // Fixed value here.
+  return {
+    withDescriptionIconSize: token.fontSizeHeading3,
+    defaultPadding: `${token.paddingContentVerticalSM}px ${paddingHorizontal}px`,
+    withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
+  };
+};
 
 export default genComponentStyleHook(
   'Alert',
-  (token) => [genAlertStyle(token)],
-  (token) => {
-    const paddingHorizontal = 12; // Fixed value here.
-
-    return {
-      withDescriptionIconSize: token.fontSizeHeading3,
-      defaultPadding: `${token.paddingContentVerticalSM}px ${paddingHorizontal}px`,
-      withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`,
-    };
-  },
+  (token) => [genBaseStyle(token), genTypeStyle(token), genActionStyle(token)],
+  prepareComponentToken,
 );