refactor: Tag migrate to genComponentStyleHook (#34914)

components/_util/theme/interface.ts

@@ -56,6 +56,7 @@ export interface OverrideToken {
   Popover?: {};
   Select?: SelectComponentToken;
   Slider?: SliderComponentToken;
+  Tag?: {};
   Tree?: {};
   TreeSelect?: {};
   Typography?: TypographyComponentToken;

components/tag/CheckableTag.tsx

@@ -25,7 +25,7 @@ const CheckableTag: React.FC<CheckableTagProps> = ({
   onClick,
   ...restProps
 }) => {
-  const { getPrefixCls, iconPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls } = React.useContext(ConfigContext);
 
   const handleClick = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
     onChange?.(!checked);
@@ -34,7 +34,7 @@ const CheckableTag: React.FC<CheckableTagProps> = ({
 
   const prefixCls = getPrefixCls('tag', customizePrefixCls);
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const cls = classNames(
     prefixCls,

components/tag/index.tsx

@@ -53,7 +53,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
   },
   ref,
 ) => {
-  const { getPrefixCls, direction, iconPrefixCls } = React.useContext(ConfigContext);
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const [visible, setVisible] = React.useState(true);
 
   React.useEffect(() => {
@@ -77,7 +77,7 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
   const presetColor = isPresetColor();
   const prefixCls = getPrefixCls('tag', customizePrefixCls);
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
+  const [wrapSSR, hashId] = useStyle(prefixCls);
 
   const tagClassName = classNames(
     prefixCls,

components/tag/style/index.tsx

@@ -3,15 +3,13 @@ import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
 import capitalize from '../../_util/capitalize';
 import {
   PresetColorType,
-  DerivativeToken,
-  useStyleRegister,
-  useToken,
   resetComponent,
-  UseComponentStyleResult,
   PresetColors,
+  FullToken,
+  genComponentStyleHook,
 } from '../../_util/theme';
 
-interface TagToken extends DerivativeToken {
+interface TagToken extends FullToken<'Tag'> {
   tagFontSize: number;
   tagLineHeight: React.CSSProperties['lineHeight'];
   tagDefaultBg: string;
@@ -23,14 +21,13 @@ interface TagToken extends DerivativeToken {
 type CssVariableType = 'Success' | 'Info' | 'Error' | 'Warning';
 
 const genTagStatusStyle = (
-  prefixCls: string,
   token: TagToken,
   status: 'success' | 'processing' | 'error' | 'warning',
   cssVariableType: CssVariableType,
 ): CSSInterpolation => {
   const capitalizedCssVariableType = capitalize<CssVariableType>(cssVariableType);
   return {
-    [`.${prefixCls}-${status}`]: {
+    [`${token.componentCls}-${status}`]: {
       color: token[`color${cssVariableType}`],
       background: token[`colorBg${capitalizedCssVariableType}`],
       borderColor: token[`color${capitalizedCssVariableType}Secondary`],
@@ -39,7 +36,7 @@ const genTagStatusStyle = (
 };
 
 // FIXME: special preset colors
-const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation =>
+const genTagColorStyle = (token: TagToken): CSSInterpolation =>
   PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
     const lightColor = token[`${colorKey}-1`];
     const lightBorderColor = token[`${colorKey}-3`];
@@ -47,12 +44,12 @@ const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation
     const textColor = token[`${colorKey}-7`];
     return {
       ...prev,
-      [`.${prefixCls}-${colorKey}`]: {
+      [`${token.componentCls}-${colorKey}`]: {
         color: textColor,
         background: lightColor,
         borderColor: lightBorderColor,
       },
-      [`.${prefixCls}-${colorKey}-inverse`]: {
+      [`${token.componentCls}-${colorKey}-inverse`]: {
         color: token.colorTextLightSolid,
         background: darkColor,
         borderColor: darkColor,
@@ -60,17 +57,13 @@ const genTagColorStyle = (prefixCls: string, token: TagToken): CSSInterpolation
     };
   }, {} as CSSObject);
 
-const genBaseStyle = (
+const genBaseStyle = (token: TagToken): CSSInterpolation => ({
-  prefixCls: string,
-  iconPrefixCls: string,
-  token: TagToken,
-): CSSInterpolation => ({
   // Result
-  [`.${prefixCls}`]: {
+  [token.componentCls]: {
     ...resetComponent(token),
     display: 'inline-block',
     height: 'auto',
-    marginInlineStart: token.marginXS,
+    marginInlineEnd: token.marginXS,
     // FIXME: hard code
     padding: '0 7px',
     fontSize: token.tagFontSize,
@@ -93,7 +86,7 @@ const genBaseStyle = (
       color: token.tagDefaultColor,
     },
 
-    [`.${prefixCls}-close-icon`]: {
+    [`${token.componentCls}-close-icon`]: {
       // FIXME: hard code
       marginInlineStart: 3,
       color: token.colorTextSecondary,
@@ -110,7 +103,7 @@ const genBaseStyle = (
     [`&&-has-color`]: {
       borderColor: 'transparent',
 
-      [`&, a, a:hover, .${iconPrefixCls}-close, .${iconPrefixCls}-close:hover`]: {
+      [`&, a, a:hover, ${token.iconCls}-close, ${token.iconCls}-close:hover`]: {
         color: token.colorTextLightSolid,
       },
     },
@@ -142,18 +135,15 @@ const genBaseStyle = (
     },
 
     // To ensure that a space will be placed between character and `Icon`.
-    [`> .${iconPrefixCls} + span, > span + .${iconPrefixCls}`]: {
+    [`> ${token.iconCls} + span, > span + ${token.iconCls}`]: {
       // FIXME: hard code
       marginInlineStart: 7,
     },
   },
 });
 
-export const genTagStyle = (
+// ============================== Export ==============================
-  prefixCls: string,
+export default genComponentStyleHook('Tag', token => {
-  iconPrefixCls: string,
-  token: DerivativeToken,
-): CSSInterpolation => {
   const tagFontSize = token.fontSizeSM;
   // FIXME: hard code
   const tagLineHeight = '18px';
@@ -169,30 +159,11 @@ export const genTagStyle = (
   };
 
   return [
-    genBaseStyle(prefixCls, iconPrefixCls, tagToken),
+    genBaseStyle(tagToken),
-    genTagColorStyle(prefixCls, tagToken),
+    genTagColorStyle(tagToken),
-    genTagStatusStyle(prefixCls, tagToken, 'success', 'Success'),
+    genTagStatusStyle(tagToken, 'success', 'Success'),
-    genTagStatusStyle(prefixCls, tagToken, 'processing', 'Info'),
+    genTagStatusStyle(tagToken, 'processing', 'Info'),
-    genTagStatusStyle(prefixCls, tagToken, 'error', 'Error'),
+    genTagStatusStyle(tagToken, 'error', 'Error'),
-    genTagStatusStyle(prefixCls, tagToken, 'warning', 'Warning'),
+    genTagStatusStyle(tagToken, 'warning', 'Warning'),
   ];
-};
+});
-
-// ============================== Export ==============================
-export function getStyle(prefixCls: string, iconPrefixCls: string, token: DerivativeToken) {
-  return [genTagStyle(prefixCls, iconPrefixCls, token)];
-}
-
-export default function useStyle(
-  prefixCls: string,
-  iconPrefixCls: string,
-): UseComponentStyleResult {
-  const [theme, token, hashId] = useToken();
-
-  return [
-    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () =>
-      getStyle(prefixCls, iconPrefixCls, token),
-    ),
-    hashId,
-  ];
-}