refactor: refactor Popover wireframe token (#45891)

components/popover/style/index.tsx

@@ -18,13 +18,13 @@ export interface ComponentToken extends ArrowToken, ArrowOffsetToken {
    * @desc 气泡卡片宽度
    * @descEN Width of Popover
    */
-  width: number;
+  width?: number;
   /**
    * @deprecated Please use `titleMinWidth` instead
    * @desc 气泡卡片最小宽度
    * @descEN Min width of Popover
    */
-  minWidth: number;
+  minWidth?: number;
   /**
    * @desc 气泡卡片标题最小宽度
    * @descEN Min width of Popover title
@@ -35,12 +35,21 @@ export interface ComponentToken extends ArrowToken, ArrowOffsetToken {
    * @descEN z-index of Popover
    */
   zIndexPopup: number;
+  /** @internal */
+  innerPadding: number;
+  /** @internal */
+  titlePadding: number | string;
+  /** @internal */
+  titleMarginBottom: number;
+  /** @internal */
+  titleBorderBottom: string;
+  /** @internal */
+  innerContentPadding: number | string;
 }
 
 export type PopoverToken = FullToken<'Popover'> & {
   popoverBg: string;
   popoverColor: string;
-  popoverPadding: number | string;
 };
 
 const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
@@ -49,14 +58,17 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
     popoverColor,
     titleMinWidth,
     fontWeightStrong,
-    popoverPadding,
+    innerPadding,
     boxShadowSecondary,
     colorTextHeading,
-    borderRadiusLG: borderRadius,
+    borderRadiusLG,
     zIndexPopup,
-    marginXS,
+    titleMarginBottom,
     colorBgElevated,
     popoverBg,
+    titleBorderBottom,
+    innerContentPadding,
+    titlePadding,
   } = token;
 
   return [
@@ -94,20 +106,23 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
         [`${componentCls}-inner`]: {
           backgroundColor: popoverBg,
           backgroundClip: 'padding-box',
-          borderRadius,
+          borderRadius: borderRadiusLG,
           boxShadow: boxShadowSecondary,
-          padding: popoverPadding,
+          padding: innerPadding,
         },
 
         [`${componentCls}-title`]: {
           minWidth: titleMinWidth,
-          marginBottom: marginXS,
+          marginBottom: titleMarginBottom,
           color: colorTextHeading,
           fontWeight: fontWeightStrong,
+          borderBottom: titleBorderBottom,
+          padding: titlePadding,
         },
 
         [`${componentCls}-inner-content`]: {
           color: popoverColor,
+          padding: innerContentPadding,
         },
       },
     },
@@ -152,62 +167,52 @@ const genColorStyle: GenerateStyle<PopoverToken> = (token) => {
   };
 };
 
-const genWireframeStyle: GenerateStyle<PopoverToken> = (token) => {
+export const prepareComponentToken: GetDefaultToken<'Popover'> = (token) => {
   const {
-    componentCls,
     lineWidth,
+    controlHeight,
+    fontHeight,
+    padding,
+    wireframe,
+    zIndexPopupBase,
+    borderRadiusLG,
+    marginXS,
     lineType,
     colorSplit,
     paddingSM,
-    controlHeight,
-    fontSize,
-    lineHeight,
-    padding,
   } = token;
 
-  const titlePaddingBlockDist = controlHeight - Math.round(fontSize * lineHeight);
+  const titlePaddingBlockDist = controlHeight - fontHeight;
   const popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
   const popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
   const popoverPaddingHorizontal = padding;
 
   return {
-    [componentCls]: {
-      [`${componentCls}-inner`]: {
-        padding: 0,
-      },
+    titleMinWidth: 177,
+    zIndexPopup: zIndexPopupBase + 30,
+    ...getArrowToken(token),
+    ...getArrowOffsetToken({
+      contentRadius: borderRadiusLG,
+      limitVerticalRadius: true,
+    }),
 
-      [`${componentCls}-title`]: {
-        margin: 0,
-        padding: `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`,
-        borderBottom: `${lineWidth}px ${lineType} ${colorSplit}`,
-      },
-
-      [`${componentCls}-inner-content`]: {
-        padding: `${paddingSM}px ${popoverPaddingHorizontal}px`,
-      },
-    },
+    // internal
+    innerPadding: wireframe ? 0 : 12,
+    titleMarginBottom: wireframe ? 0 : marginXS,
+    titlePadding: wireframe
+      ? `${popoverTitlePaddingBlockTop}px ${popoverPaddingHorizontal}px ${popoverTitlePaddingBlockBottom}px`
+      : 0,
+    titleBorderBottom: wireframe ? `${lineWidth}px ${lineType} ${colorSplit}` : 'none',
+    innerContentPadding: wireframe ? `${paddingSM}px ${popoverPaddingHorizontal}px` : 0,
   };
 };
 
-export const prepareComponentToken: GetDefaultToken<'Popover'> = (token) => ({
-  width: 177,
-  minWidth: 177,
-  titleMinWidth: 177,
-  zIndexPopup: token.zIndexPopupBase + 30,
-  ...getArrowToken(token),
-  ...getArrowOffsetToken({
-    contentRadius: token.borderRadiusLG,
-    limitVerticalRadius: true,
-  }),
-});
-
 export default genComponentStyleHook(
   'Popover',
   (token) => {
-    const { colorBgElevated, colorText, wireframe } = token;
+    const { colorBgElevated, colorText } = token;
 
     const popoverToken = mergeToken<PopoverToken>(token, {
-      popoverPadding: 12, // Fixed Value
       popoverBg: colorBgElevated,
       popoverColor: colorText,
     });
@@ -215,7 +220,6 @@ export default genComponentStyleHook(
     return [
       genBaseStyle(popoverToken),
       genColorStyle(popoverToken),
-      wireframe && genWireframeStyle(popoverToken),
       initZoomMotion(popoverToken, 'zoom-big'),
     ];
   },