refactor: popover cssinjs (#34607)

* refactor: popover cssinjs

* fix cls

* fix cls

* fix overlay

* fix: token

* fix: util

* fix: block -> line

* fix: interface

components/_util/theme/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { CSSInterpolation, Theme, useCacheToken, useStyleRegister } from '@ant-design/cssinjs';
 import defaultSeedToken, { derivative as defaultDerivative } from './themes/default';
 import version from '../../version';
-import { resetComponent, resetIcon, clearFix } from './util';
+import { resetComponent, resetIcon, clearFix, roundedArrow } from './util';
 import formatToken from './util/alias';
 import {
   initSlideMotion,
@@ -29,6 +29,7 @@ export {
   resetComponent,
   resetIcon,
   clearFix,
+  roundedArrow,
   initSlideMotion,
   slideUpIn,
   slideUpOut,

components/_util/theme/interface.ts

@@ -87,6 +87,7 @@ export interface SeedToken extends PresetColorType {
   // zIndex
   /** Base zIndex of component like BackTop, Affix which can be cover by large popup */
   zIndexBase: number;
+  zIndexPopover: number;
   /** Base popup component zIndex */
   zIndexPopup: number;
 }
@@ -253,6 +254,7 @@ export interface AliasToken extends Omit<DerivativeToken, OmitDerivativeKey> {
   paddingXXS: number;
   paddingLG: number;
   marginXS: number;
+  marginSM: number;
   marginLG: number;
   marginXXS: number;
 }

components/_util/theme/themes/default.ts

@@ -194,6 +194,7 @@ const seedToken: SeedToken = {
 
   // zIndex
   zIndexBase: 0,
+  zIndexPopover: 1030,
   zIndexPopup: 1000,
 };
 

components/_util/theme/util/alias.ts

@@ -110,7 +110,7 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken
 
     marginXXS: 2,
     marginXS: 4,
-    // marginSM: 8,
+    marginSM: 8,
     marginLG: 32,
 
     boxShadow: `

components/_util/theme/util/index.tsx

@@ -2,6 +2,8 @@
 import { CSSObject } from '@ant-design/cssinjs';
 import type { DerivativeToken } from '..';
 
+export { roundedArrow } from './roundedArrow';
+
 export const resetComponent = (token: DerivativeToken): CSSObject => ({
   boxSizing: 'border-box',
   margin: 0,

components/_util/theme/util/roundedArrow.tsx

@@ -0,0 +1,41 @@
+/* eslint-disable import/prefer-default-export */
+import { CSSObject } from '@ant-design/cssinjs';
+import seedToken from '../themes/default';
+
+export const roundedArrow = (
+  width: number,
+  outerRadius: number,
+  bgColor: string,
+): CSSObject => {
+  const cornerHeight = outerRadius * (1 - 1 / Math.sqrt(2));
+  const { radiusBase } = seedToken;
+
+  const ax = width - cornerHeight;
+  const ay = 2 * width + cornerHeight;
+  const bx = ax + outerRadius * (1 / Math.sqrt(2));
+  const by = 2 * width;
+  const cx = 2 * width - radiusBase;
+  const cy = 2 * width;
+  const dx = 2 * width;
+  const dy = 2 * width - radiusBase;
+  const fx = 2 * width + cornerHeight;
+  const fy = width - cornerHeight;
+  const ex = 2 * width;
+  const ey = fy + outerRadius * (1 / Math.sqrt(2));
+
+  return {
+    borderRadius: `0 0 ${radiusBase}px 0`,
+    pointerEvents: 'none',
+
+    '&::before': {
+      position: 'absolute',
+      top: -width,
+      insetInlineStart: -width,
+      width: width * 3,
+      height: width * 3,
+      background: `linear-gradient(to left, ${bgColor} 50%, ${bgColor} 50%) no-repeat ${Math.ceil(-width + 1)}px ${Math.ceil(-width + 1)}px`,
+      content: '""',
+      clipPath: `path('M ${ax} ${ay} A ${outerRadius} ${outerRadius} 0 0 1 ${bx} ${by} L ${cx} ${cy} A ${radiusBase} ${radiusBase} 0 0 0 ${dx} ${dy} L ${ex} ${ey} A ${outerRadius} ${outerRadius} 0 0 1 ${fx} ${fy} Z')`,
+    },
+  };
+}

components/popover/index.tsx

@@ -1,17 +1,21 @@
 import * as React from 'react';
+import classNames from 'classnames';
 import Tooltip, { AbstractTooltipProps, TooltipPlacement } from '../tooltip';
 import { ConfigContext } from '../config-provider';
 import { getRenderPropValue, RenderFunction } from '../_util/getRenderPropValue';
 import { getTransitionName } from '../_util/motion';
 
+// CSSINJS
+import useStyle from './style';
+
 export interface PopoverProps extends AbstractTooltipProps {
   title?: React.ReactNode | RenderFunction;
   content?: React.ReactNode | RenderFunction;
 }
 
 const Popover = React.forwardRef<unknown, PopoverProps>(
-  ({ prefixCls: customizePrefixCls, title, content, ...otherProps }, ref) => {
+  ({ prefixCls: customizePrefixCls, title, content, overlayClassName, ...otherProps }, ref) => {
-    const { getPrefixCls } = React.useContext(ConfigContext);
+    const { getPrefixCls, iconPrefixCls } = React.useContext(ConfigContext);
 
     const getOverlay = (prefixCls: string) => {
       if (!title && !content) return undefined;
@@ -24,16 +28,23 @@ const Popover = React.forwardRef<unknown, PopoverProps>(
     };
 
     const prefixCls = getPrefixCls('popover', customizePrefixCls);
+    const [wrapSSR, hashId] = useStyle(prefixCls, iconPrefixCls);
     const rootPrefixCls = getPrefixCls();
 
-    return (
+    const overlayCls = classNames(
+      overlayClassName,
+      hashId,
+    );
+
+    return wrapSSR(
       <Tooltip
         {...otherProps}
         prefixCls={prefixCls}
+        overlayClassName={overlayCls}
         ref={ref as any}
         overlay={getOverlay(prefixCls)}
         transitionName={getTransitionName(rootPrefixCls, 'zoom-big', otherProps.transitionName)}
-      />
+      />,
     );
   },
 );

components/popover/style/index.less

@@ -1,258 +1,258 @@
-@import '../../style/themes/index';
+// @import '../../style/themes/index';
-@import '../../style/mixins/index';
+// @import '../../style/mixins/index';
 
-@popover-prefix-cls: ~'@{ant-prefix}-popover';
+// @popover-prefix-cls: ~'@{ant-prefix}-popover';
 
-@popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
+// @popover-arrow-rotate-width: sqrt(@popover-arrow-width * @popover-arrow-width * 2);
 
-@popover-arrow-offset-vertical: 12px;
+// @popover-arrow-offset-vertical: 12px;
-@popover-arrow-offset-horizontal: 16px;
+// @popover-arrow-offset-horizontal: 16px;
 
-.@{popover-prefix-cls} {
+// .@{popover-prefix-cls} {
-  .reset-component();
+//   .reset-component();
 
-  position: absolute;
+//   position: absolute;
-  top: 0;
+//   top: 0;
-  left: 0;
+//   left: 0;
-  z-index: @zindex-popover;
+//   z-index: @zindex-popover;
-  font-weight: normal;
+//   font-weight: normal;
-  white-space: normal;
+//   white-space: normal;
-  text-align: left;
+//   text-align: left;
-  cursor: auto;
+//   cursor: auto;
-  user-select: text;
+//   user-select: text;
 
-  &::after {
+//   &::after {
-    position: absolute;
+//     position: absolute;
-    background: fade(@white, 1%);
+//     background: fade(@white, 1%);
-    content: '';
+//     content: '';
-  }
+//   }
 
-  &-hidden {
+//   &-hidden {
-    display: none;
+//     display: none;
-  }
+//   }
 
-  // Offset the popover to account for the popover arrow
+//   // Offset the popover to account for the popover arrow
-  &-placement-top,
+//   &-placement-top,
-  &-placement-topLeft,
+//   &-placement-topLeft,
-  &-placement-topRight {
+//   &-placement-topRight {
-    padding-bottom: @popover-distance;
+//     padding-bottom: @popover-distance;
-  }
+//   }
 
-  &-placement-right,
+//   &-placement-right,
-  &-placement-rightTop,
+//   &-placement-rightTop,
-  &-placement-rightBottom {
+//   &-placement-rightBottom {
-    padding-left: @popover-distance;
+//     padding-left: @popover-distance;
-  }
+//   }
 
-  &-placement-bottom,
+//   &-placement-bottom,
-  &-placement-bottomLeft,
+//   &-placement-bottomLeft,
-  &-placement-bottomRight {
+//   &-placement-bottomRight {
-    padding-top: @popover-distance;
+//     padding-top: @popover-distance;
-  }
+//   }
 
-  &-placement-left,
+//   &-placement-left,
-  &-placement-leftTop,
+//   &-placement-leftTop,
-  &-placement-leftBottom {
+//   &-placement-leftBottom {
-    padding-right: @popover-distance;
+//     padding-right: @popover-distance;
-  }
+//   }
 
-  &-inner {
+//   &-inner {
-    background-color: @popover-bg;
+//     background-color: @popover-bg;
-    background-clip: padding-box;
+//     background-clip: padding-box;
-    border-radius: @border-radius-base;
+//     border-radius: @border-radius-base;
-    box-shadow: @box-shadow-base;
+//     box-shadow: @box-shadow-base;
-    box-shadow: ~'0 0 8px @{shadow-color} \9';
+//     box-shadow: ~'0 0 8px @{shadow-color} \9';
-  }
+//   }
 
-  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
+//   @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-    /* IE10+ */
+//     /* IE10+ */
-    &-inner {
+//     &-inner {
-      box-shadow: @box-shadow-base;
+//       box-shadow: @box-shadow-base;
-    }
+//     }
-  }
+//   }
 
-  &-title {
+//   &-title {
-    min-width: @popover-min-width;
+//     min-width: @popover-min-width;
-    min-height: @popover-min-height;
+//     min-height: @popover-min-height;
-    margin: 0; // reset heading margin
+//     margin: 0; // reset heading margin
-    padding: 5px @popover-padding-horizontal 4px;
+//     padding: 5px @popover-padding-horizontal 4px;
-    color: @heading-color;
+//     color: @heading-color;
-    font-weight: 500;
+//     font-weight: 500;
-    border-bottom: 1px solid @border-color-split;
+//     border-bottom: 1px solid @border-color-split;
-  }
+//   }
 
-  &-inner-content {
+//   &-inner-content {
-    padding: @padding-sm @popover-padding-horizontal;
+//     padding: @padding-sm @popover-padding-horizontal;
-    color: @popover-color;
+//     color: @popover-color;
-  }
+//   }
 
-  &-message {
+//   &-message {
-    position: relative;
+//     position: relative;
-    padding: 4px 0 12px;
+//     padding: 4px 0 12px;
-    color: @popover-color;
+//     color: @popover-color;
-    font-size: @font-size-base;
+//     font-size: @font-size-base;
-    > .@{iconfont-css-prefix} {
+//     > .@{iconfont-css-prefix} {
-      position: absolute;
+//       position: absolute;
-      top: (
+//       top: (
-        4px + ((@line-height-base * @font-size-base - @font-size-base) / 2)
+//         4px + ((@line-height-base * @font-size-base - @font-size-base) / 2)
-      ); // 4px for padding-top, 4px for vertical middle
+//       ); // 4px for padding-top, 4px for vertical middle
-      color: @warning-color;
+//       color: @warning-color;
-      font-size: @font-size-base;
+//       font-size: @font-size-base;
-    }
+//     }
 
-    &-title {
+//     &-title {
-      padding-left: @font-size-base + 8px;
+//       padding-left: @font-size-base + 8px;
-    }
+//     }
-  }
+//   }
 
-  &-buttons {
+//   &-buttons {
-    margin-bottom: 4px;
+//     margin-bottom: 4px;
-    text-align: right;
+//     text-align: right;
 
-    button {
+//     button {
-      margin-left: 8px;
+//       margin-left: 8px;
-    }
+//     }
-  }
+//   }
 
-  // Arrows
+//   // Arrows
-  &-arrow {
+//   &-arrow {
-    position: absolute;
+//     position: absolute;
-    display: block;
+//     display: block;
-    width: @popover-arrow-rotate-width;
+//     width: @popover-arrow-rotate-width;
-    height: @popover-arrow-rotate-width;
+//     height: @popover-arrow-rotate-width;
-    overflow: hidden;
+//     overflow: hidden;
-    background: transparent;
+//     background: transparent;
-    pointer-events: none;
+//     pointer-events: none;
 
-    &-content {
+//     &-content {
-      position: absolute;
+//       position: absolute;
-      top: 0;
+//       top: 0;
-      right: 0;
+//       right: 0;
-      bottom: 0;
+//       bottom: 0;
-      left: 0;
+//       left: 0;
-      display: block;
+//       display: block;
-      width: @popover-arrow-width;
+//       width: @popover-arrow-width;
-      height: @popover-arrow-width;
+//       height: @popover-arrow-width;
-      margin: auto;
+//       margin: auto;
-      background-color: @popover-bg;
+//       background-color: @popover-bg;
-      content: '';
+//       content: '';
-      pointer-events: auto;
+//       pointer-events: auto;
-      .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
+//       .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
-    }
+//     }
-  }
+//   }
 
-  &-placement-top &-arrow,
+//   &-placement-top &-arrow,
-  &-placement-topLeft &-arrow,
+//   &-placement-topLeft &-arrow,
-  &-placement-topRight &-arrow {
+//   &-placement-topRight &-arrow {
-    bottom: @popover-distance - @popover-arrow-rotate-width;
+//     bottom: @popover-distance - @popover-arrow-rotate-width;
 
-    &-content {
+//     &-content {
-      box-shadow: 3px 3px 7px fade(@black, 7%);
+//       box-shadow: 3px 3px 7px fade(@black, 7%);
-      transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
+//       transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
-    }
+//     }
-  }
+//   }
 
-  &-placement-top &-arrow {
+//   &-placement-top &-arrow {
-    left: 50%;
+//     left: 50%;
-    transform: translateX(-50%);
+//     transform: translateX(-50%);
-  }
+//   }
 
-  &-placement-topLeft &-arrow {
+//   &-placement-topLeft &-arrow {
-    left: @popover-arrow-offset-horizontal;
+//     left: @popover-arrow-offset-horizontal;
-  }
+//   }
 
-  &-placement-topRight &-arrow {
+//   &-placement-topRight &-arrow {
-    right: @popover-arrow-offset-horizontal;
+//     right: @popover-arrow-offset-horizontal;
-  }
+//   }
 
-  &-placement-right &-arrow,
+//   &-placement-right &-arrow,
-  &-placement-rightTop &-arrow,
+//   &-placement-rightTop &-arrow,
-  &-placement-rightBottom &-arrow {
+//   &-placement-rightBottom &-arrow {
-    left: @popover-distance - @popover-arrow-rotate-width;
+//     left: @popover-distance - @popover-arrow-rotate-width;
 
-    &-content {
+//     &-content {
-      box-shadow: 3px 3px 7px fade(@black, 7%);
+//       box-shadow: 3px 3px 7px fade(@black, 7%);
-      transform: translateX((@popover-arrow-rotate-width / 2)) rotate(135deg);
+//       transform: translateX((@popover-arrow-rotate-width / 2)) rotate(135deg);
-    }
+//     }
-  }
+//   }
 
-  &-placement-right &-arrow {
+//   &-placement-right &-arrow {
-    top: 50%;
+//     top: 50%;
-    transform: translateY(-50%);
+//     transform: translateY(-50%);
-  }
+//   }
 
-  &-placement-rightTop &-arrow {
+//   &-placement-rightTop &-arrow {
-    top: @popover-arrow-offset-vertical;
+//     top: @popover-arrow-offset-vertical;
-  }
+//   }
 
-  &-placement-rightBottom &-arrow {
+//   &-placement-rightBottom &-arrow {
-    bottom: @popover-arrow-offset-vertical;
+//     bottom: @popover-arrow-offset-vertical;
-  }
+//   }
 
-  &-placement-bottom &-arrow,
+//   &-placement-bottom &-arrow,
-  &-placement-bottomLeft &-arrow,
+//   &-placement-bottomLeft &-arrow,
-  &-placement-bottomRight &-arrow {
+//   &-placement-bottomRight &-arrow {
-    top: @popover-distance - @popover-arrow-rotate-width;
+//     top: @popover-distance - @popover-arrow-rotate-width;
 
-    &-content {
+//     &-content {
-      box-shadow: 2px 2px 5px fade(@black, 6%);
+//       box-shadow: 2px 2px 5px fade(@black, 6%);
-      transform: translateY((@popover-arrow-rotate-width / 2)) rotate(-135deg);
+//       transform: translateY((@popover-arrow-rotate-width / 2)) rotate(-135deg);
-    }
+//     }
-  }
+//   }
 
-  &-placement-bottom &-arrow {
+//   &-placement-bottom &-arrow {
-    left: 50%;
+//     left: 50%;
-    transform: translateX(-50%);
+//     transform: translateX(-50%);
-  }
+//   }
 
-  &-placement-bottomLeft &-arrow {
+//   &-placement-bottomLeft &-arrow {
-    left: @popover-arrow-offset-horizontal;
+//     left: @popover-arrow-offset-horizontal;
-  }
+//   }
 
-  &-placement-bottomRight &-arrow {
+//   &-placement-bottomRight &-arrow {
-    right: @popover-arrow-offset-horizontal;
+//     right: @popover-arrow-offset-horizontal;
-  }
+//   }
 
-  &-placement-left &-arrow,
+//   &-placement-left &-arrow,
-  &-placement-leftTop &-arrow,
+//   &-placement-leftTop &-arrow,
-  &-placement-leftBottom &-arrow {
+//   &-placement-leftBottom &-arrow {
-    right: @popover-distance - @popover-arrow-rotate-width;
+//     right: @popover-distance - @popover-arrow-rotate-width;
 
-    &-content {
+//     &-content {
-      box-shadow: 3px 3px 7px fade(@black, 7%);
+//       box-shadow: 3px 3px 7px fade(@black, 7%);
-      transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(-45deg);
+//       transform: translateX((-@popover-arrow-rotate-width / 2)) rotate(-45deg);
-    }
+//     }
-  }
+//   }
 
-  &-placement-left &-arrow {
+//   &-placement-left &-arrow {
-    top: 50%;
+//     top: 50%;
-    transform: translateY(-50%);
+//     transform: translateY(-50%);
-  }
+//   }
 
-  &-placement-leftTop &-arrow {
+//   &-placement-leftTop &-arrow {
-    top: @popover-arrow-offset-vertical;
+//     top: @popover-arrow-offset-vertical;
-  }
+//   }
 
-  &-placement-leftBottom &-arrow {
+//   &-placement-leftBottom &-arrow {
-    bottom: @popover-arrow-offset-vertical;
+//     bottom: @popover-arrow-offset-vertical;
-  }
+//   }
-}
+// }
 
-.generator-popover-preset-color(@i: length(@preset-colors)) when (@i > 0) {
+// .generator-popover-preset-color(@i: length(@preset-colors)) when (@i > 0) {
-  .generator-popover-preset-color(@i - 1);
+//   .generator-popover-preset-color(@i - 1);
-  @color: extract(@preset-colors, @i);
+//   @color: extract(@preset-colors, @i);
-  @lightColor: '@{color}-6';
+//   @lightColor: '@{color}-6';
-  .@{popover-prefix-cls}-@{color} {
+//   .@{popover-prefix-cls}-@{color} {
-    .@{popover-prefix-cls}-inner {
+//     .@{popover-prefix-cls}-inner {
-      background-color: @@lightColor;
+//       background-color: @@lightColor;
-    }
+//     }
-    .@{popover-prefix-cls}-arrow {
+//     .@{popover-prefix-cls}-arrow {
-      &-content {
+//       &-content {
-        background-color: @@lightColor;
+//         background-color: @@lightColor;
-      }
+//       }
-    }
+//     }
-  }
+//   }
-}
+// }
-.generator-popover-preset-color();
+// .generator-popover-preset-color();
 
-@import './rtl';
+// @import './rtl';

components/popover/style/index.tsx

@@ -1,5 +1,398 @@
-import '../../style/index.less';
+// import '../../style/index.less';
-import './index.less';
+// import './index.less';
 
 // style dependencies
 // deps-lint-skip: tooltip
+
+// deps-lint-skip-all
+import { TinyColor } from '@ctrl/tinycolor';
+import { CSSInterpolation, CSSObject } from '@ant-design/cssinjs';
+import {
+  PresetColors,
+  PresetColorType,
+  DerivativeToken,
+  useStyleRegister,
+  useToken,
+  UseComponentStyleResult,
+  GenerateStyle,
+  resetComponent,
+  roundedArrow,
+} from '../../_util/theme';
+
+// FIXME
+type PopoverToken = DerivativeToken & {
+  popoverCls: string;
+  iconPrefixCls: string,
+  popoverBg: string;
+  popoverColor: string;
+  popoverMinWidth: number;
+  popoverMinHeight: number;
+  popoverArrowWidth: number;
+  popoverArrowColor: string;
+  popoverArrowOuterColor: string;
+  popoverDistance: number;
+  popoverPaddingHorizonta: number;
+  popoverArrowRotateWidth: number;
+  popoverArrowOffsetVertical: number;
+  popoverArrowOffsetHorizontal: number;
+};
+
+
+const genBaseStyle: GenerateStyle<PopoverToken> = token => {
+  const {
+    popoverCls,
+    iconPrefixCls,
+    popoverBg,
+    popoverColor,
+    popoverMinWidth,
+    popoverMinHeight,
+    popoverArrowWidth,
+    popoverPaddingHorizonta,
+    popoverArrowRotateWidth,
+
+    boxShadow,
+    colorSplit,
+    colorTextHeading,
+    colorWarning,
+    fontSize,
+    marginSM,
+    marginXS,
+    lineHeight,
+    radiusBase: borderRadius,
+    paddingSM,
+    zIndexPopover,
+  } = token;
+
+  return {
+    [popoverCls]: {
+      ...resetComponent(token),
+      position: 'absolute',
+      top: 0,
+      insetInlineStart: 0,
+      zIndex: zIndexPopover,
+      fontWeight: 'normal',
+      whiteSpace: 'normal',
+      textAlign: 'start',
+      cursor: 'auto',
+      userSelect: 'text',
+
+      '&::after': {
+        position: 'absolute',
+        // FIXME
+        background: new TinyColor('#fff').setAlpha(0.01).toRgbString(),
+        content: '""',
+      },
+
+      '&-rtl': {
+        direction: 'rtl',
+      },
+
+      '&-hidden': {
+        display: 'none',
+      },
+
+      [`${popoverCls}-inner`]: {
+        backgroundColor: popoverBg,
+        backgroundClip: 'padding-box',
+        borderRadius,
+        boxShadow,
+      },
+
+      [`${popoverCls}-title`]: {
+        minWidth: popoverMinWidth,
+        minHeight: popoverMinHeight,
+        margin: 0,
+        // FIXME
+        padding: `5px ${popoverPaddingHorizonta}px 4px`,
+        color: colorTextHeading,
+        fontWeight: 500,
+        // FIXME
+        borderBottom: `1px solid ${colorSplit}`,
+      },
+
+      [`${popoverCls}-inner-content`]: {
+        padding: `${paddingSM}px ${popoverPaddingHorizonta}px`,
+        color: popoverColor,
+      },
+
+      // FIXME 没找到使用地方，先保留
+      '&-message': {
+        position: 'relative',
+        // FIXME
+        padding: '4px 0 12px',
+        color: popoverColor,
+        fontSize,
+
+        [`> .${iconPrefixCls}`]: {
+          position: 'absolute',
+          // FIXME
+          top: 4 + ((lineHeight * fontSize - fontSize) / 2),
+          color: colorWarning,
+          fontSize,
+        },
+
+        '&-title': {
+          // FIXME
+          paddingInlineStart: fontSize + 8,
+        },
+      },
+
+      // FIXME 没找到使用地方，先保留
+      '&-buttons': {
+        marginBottom: marginXS,
+        textAlign: 'end',
+
+        'button': {
+          marginInlineStart: marginSM,
+        },
+      },
+
+      [`${popoverCls}-arrow`]: {
+        position: 'absolute',
+        display: 'block',
+        width: popoverArrowRotateWidth,
+        height: popoverArrowRotateWidth,
+        overflow: 'hidden',
+        background: 'transparent',
+        pointerEvents: 'none',
+
+        '&-content': {
+          position: 'absolute',
+          top: 0,
+          insetInlineEnd: 0,
+          bottom: 0,
+          insetInlineStart: 0,
+          display: 'block',
+          width: popoverArrowWidth,
+          height: popoverArrowWidth,
+          margin: 'auto',
+          backgroundColor: popoverBg,
+          content: '""',
+          pointerEvents: 'auto',
+          ...roundedArrow(popoverArrowWidth, 5, popoverBg),
+        },
+      },
+
+    },
+  }
+};
+
+const genPlacementStyle: GenerateStyle<PopoverToken> = token => {
+  const {
+    popoverCls,
+    popoverDistance,
+    popoverArrowRotateWidth,
+    popoverArrowOffsetHorizontal,
+    popoverArrowOffsetVertical,
+  } = token;
+
+  return {
+    [popoverCls]: {
+      [`
+        &-placement-top,
+        &-placement-topLeft,
+        &-placement-topRight
+      `]: {
+        paddingBottom: popoverDistance,
+      },
+
+      [`
+        &-placement-right,
+        &-placement-rightTop,
+        &-placement-rightBottom
+      `]: {
+        paddingLeft: popoverDistance,
+      },
+
+      [`
+        &-placement-bottom,
+        &-placement-bottomLeft,
+        &-placement-bottomRight
+      `]: {
+        paddingTop: popoverDistance,
+      },
+
+      [`
+        &-placement-left,
+        &-placement-leftTop,
+        &-placement-leftBottom
+      `]: {
+        paddingRight: popoverDistance,
+      },
+
+      [`
+        &-placement-top ${popoverCls}-arrow,
+        &-placement-topLeft ${popoverCls}-arrow,
+        &-placement-topRight ${popoverCls}-arrow
+      `]: {
+        bottom: popoverDistance - popoverArrowRotateWidth,
+
+        '&-content': {
+          // FIXME
+          boxShadow: `3px 3px 7px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
+          transform: `translateY(-${popoverArrowRotateWidth / 2}px) rotate(45deg)`,
+        },
+      },
+
+      [`&-placement-top ${popoverCls}-arrow`]: {
+        insetInlineStart : '50%',
+        transform: 'translateX(-50%)',
+      },
+
+      [`&-placement-topLeft ${popoverCls}-arrow`]: {
+        insetInlineStart: popoverArrowOffsetHorizontal,
+      },
+
+      [`&-placement-topRight ${popoverCls}-arrow`]: {
+        insetInlineEnd: popoverArrowOffsetHorizontal,
+      },
+
+      [`
+        &-placement-right ${popoverCls}-arrow,
+        &-placement-rightTop ${popoverCls}-arrow,
+        &-placement-rightBottom ${popoverCls}-arrow
+      `]: {
+        insetInlineStart: popoverDistance - popoverArrowRotateWidth,
+
+        '&-content': {
+          // FIXME
+          boxShadow: `3px 3px 7px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
+          transform: `translateX(${popoverArrowRotateWidth / 2}px) rotate(135deg)`,
+        },
+      },
+
+      [`&-placement-right ${popoverCls}-arrow`]: {
+        top: '50%',
+        transform: 'translateY(-50%)',
+      },
+
+      [`&-placement-rightTop ${popoverCls}-arrow`]: {
+        top: popoverArrowOffsetVertical,
+      },
+
+      [`&-placement-rightBottom ${popoverCls}-arrow`]: {
+        bottom: popoverArrowOffsetVertical,
+      },
+
+      [`
+        &-placement-bottom ${popoverCls}-arrow,
+        &-placement-bottomLeft ${popoverCls}-arrow,
+        &-placement-bottomRight ${popoverCls}-arrow
+      `]: {
+        top: popoverDistance - popoverArrowRotateWidth,
+
+        '&-content': {
+          // FIXME
+          boxShadow: `2px 2px 5px ${new TinyColor('#000').setAlpha(0.06).toRgbString()}`,
+          transform: `translateY(${popoverArrowRotateWidth / 2}px) rotate(-135deg)`,
+        },
+      },
+
+      [`&-placement-bottom ${popoverCls}-arrow`]: {
+        insetInlineStart: '50%',
+        transform: 'translateX(-50%)',
+      },
+
+      [`&-placement-bottomLeft ${popoverCls}-arrow`]: {
+        insetInlineStart: popoverArrowOffsetHorizontal,
+      },
+
+      [`&-placement-bottomRight ${popoverCls}-arrow`]: {
+        insetInlineEnd: popoverArrowOffsetHorizontal,
+      },
+
+      [`
+        &-placement-left ${popoverCls}-arrow,
+        &-placement-leftTop ${popoverCls}-arrow,
+        &-placement-leftBottom ${popoverCls}-arrow
+      `]: {
+        insetInlineEnd: popoverDistance - popoverArrowRotateWidth,
+
+        '&-content': {
+          // FIXME
+          boxShadow: `3px 3px 7px ${new TinyColor('#000').setAlpha(0.07).toRgbString()}`,
+          transform: `translateX(-${popoverArrowRotateWidth / 2}px) rotate(-45deg)`,
+        },
+      },
+
+      [`&-placement-left ${popoverCls}-arrow`]: {
+        top: '50%',
+        transform: 'translateY(-50%)',
+      },
+
+      [`&-placement-leftTop ${popoverCls}-arrow`]: {
+        top: popoverArrowOffsetVertical,
+      },
+
+      [`&-placement-leftBottom ${popoverCls}-arrow`]: {
+        bottom: popoverArrowOffsetVertical,
+      },
+    },
+  }
+};
+
+// FIXME: special preset colors
+const genColorStyle: GenerateStyle<PopoverToken> = token => {
+  const { popoverCls } = token;
+
+  return PresetColors.reduce((prev: CSSObject, colorKey: keyof PresetColorType) => {
+    const lightColor = token[`${colorKey}-6`];
+    return {
+      ...prev,
+      [`${popoverCls}-${colorKey}`]: {
+        [`${popoverCls}-inner`]: {
+          backgroundColor: lightColor,
+        },
+        [`${popoverCls}-arrow`]: {
+          '&-content': {
+            backgroundColor: lightColor,
+          },
+        },
+      },
+    };
+  }, {} as CSSObject);
+};
+
+export const genPopoverStyle: GenerateStyle<PopoverToken> = (token: PopoverToken): CSSInterpolation => [
+  genBaseStyle(token),
+  genPlacementStyle(token),
+  genColorStyle(token),
+];
+
+export default function useStyle(
+  prefixCls: string,
+  iconPrefixCls: string,
+): UseComponentStyleResult {
+  const [theme, token, hashId] = useToken();
+
+  const popoverBg = token.colorBg;
+  // FIXME
+  const popoverArrowWidth = 8 * Math.sqrt(2);
+
+  const popoverToken = {
+    ...token,
+    popoverCls: `.${prefixCls}`,
+    iconPrefixCls,
+    popoverBg,
+    popoverColor: token.colorText,
+    // FIXME
+    popoverMinWidth: 177,
+    popoverMinHeight: 32,
+    popoverArrowWidth,
+    popoverArrowColor: popoverBg,
+    popoverArrowOuterColor: popoverBg,
+    popoverDistance: popoverArrowWidth + 4,
+    popoverPaddingHorizonta: token.padding,
+    popoverArrowRotateWidth: Math.sqrt(popoverArrowWidth * popoverArrowWidth * 2),
+    // FIXME
+    popoverArrowOffsetVertical: 12,
+    popoverArrowOffsetHorizontal: 16,
+  };
+
+  return [
+    useStyleRegister({ theme, token, hashId, path: [prefixCls] }, () => [
+      genPopoverStyle(popoverToken),
+    ]),
+    hashId,
+  ];
+}