✨ feat: popover Component Token (#42337)

* ✨ feat: popover Component Token * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update snap * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update
2 years ago · a17c4cb581
9 changed files with 228 additions and 10 deletions
--- a/components/popover/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/popover/tests/snapshots/demo-extend.test.ts.snap
@ -772,6 +772,79 @@ Array [
 ]
 `;

+exports[`renders components/popover/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-top"
+  >
+    <div
+      class="ant-popover-arrow"
+    />
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-title"
+        >
+          Title
+        </div>
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div>
+            <p>
+              Content
+            </p>
+            <p>
+              Content
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
+    style="width: 250px;"
+  >
+    <div
+      class="ant-popover-arrow"
+    />
+    <div
+      class="ant-popover-content"
+      style="width: 250px;"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-title"
+        >
+          Title
+        </div>
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div>
+            <p>
+              Content
+            </p>
+            <p>
+              Content
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/popover/demo/control.tsx extend context correctly 1`] = `
 Array [
  <button
--- a/components/popover/tests/snapshots/demo.test.tsx.snap
+++ b/components/popover/tests/snapshots/demo.test.tsx.snap
@ -225,6 +225,79 @@ exports[`renders components/popover/demo/basic.tsx correctly 1`] = `
 </button>
 `;

+exports[`renders components/popover/demo/component-token.tsx correctly 1`] = `
+Array [
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-top"
+  >
+    <div
+      class="ant-popover-arrow"
+    />
+    <div
+      class="ant-popover-content"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-title"
+        >
+          Title
+        </div>
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div>
+            <p>
+              Content
+            </p>
+            <p>
+              Content
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-popover ant-popover-pure ant-popover-placement-bottomLeft"
+    style="width:250px"
+  >
+    <div
+      class="ant-popover-arrow"
+    />
+    <div
+      class="ant-popover-content"
+      style="width:250px"
+    >
+      <div
+        class="ant-popover-inner"
+        role="tooltip"
+      >
+        <div
+          class="ant-popover-title"
+        >
+          Title
+        </div>
+        <div
+          class="ant-popover-inner-content"
+        >
+          <div>
+            <p>
+              Content
+            </p>
+            <p>
+              Content
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders components/popover/demo/control.tsx correctly 1`] = `
 <button
  class="ant-btn ant-btn-primary"
--- a/components/popover/demo/component-token.md
+++ b/components/popover/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/popover/demo/component-token.tsx
+++ b/components/popover/demo/component-token.tsx
@ -0,0 +1,33 @@
+import { ConfigProvider, Popover } from 'antd';
+import React from 'react';
+
+const { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;
+
+const content = (
+  <div>
+    <p>Content</p>
+    <p>Content</p>
+  </div>
+);
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Popover: {
+          minWidth: 40,
+        },
+      },
+    }}
+  >
+    <InternalPopover content={content} title="Title" />
+    <InternalPopover
+      content={content}
+      title="Title"
+      placement="bottomLeft"
+      style={{ width: 250 }}
+    />
+  </ConfigProvider>
+);
+
+export default App;
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@ -27,6 +27,7 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
 <code src="./demo/hover-with-click.tsx">Hover with click popover</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>

 ## API

--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@ -28,6 +28,7 @@ demo:
 <code src="./demo/hover-with-click.tsx">悬停点击弹出窗口</code>
 <code src="./demo/render-panel.tsx" debug>_InternalPanelDoNotUseOrYouWillBeFired</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>

 ## API

--- a/components/popover/style/index.tsx
+++ b/components/popover/style/index.tsx
@ -5,8 +5,9 @@ import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/inte
 import { PresetColors, genComponentStyleHook, mergeToken } from '../../theme/internal';

 export interface ComponentToken {
-  zIndexPopup: number;
  width: number;
+  minWidth: number;
+  zIndexPopup: number;
 }

 export type PopoverToken = FullToken<'Popover'> & {
@ -18,9 +19,8 @@ export type PopoverToken = FullToken<'Popover'> & {
 const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
  const {
    componentCls,
-    popoverBg,
    popoverColor,
-    width,
+    minWidth,
    fontWeightStrong,
    popoverPadding,
    boxShadowSecondary,
@ -29,6 +29,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
    zIndexPopup,
    marginXS,
    colorBgElevated,
+    popoverBg,
  } = token;

  return [
@ -72,7 +73,7 @@ const genBaseStyle: GenerateStyle<PopoverToken> = (token) => {
        },

        [`${componentCls}-title`]: {
-          minWidth: width,
+          minWidth,
          marginBottom: marginXS,
          color: colorTextHeading,
          fontWeight: fontWeightStrong,
@ -169,9 +170,9 @@ export default genComponentStyleHook(
    const { colorBgElevated, colorText, wireframe } = token;

    const popoverToken = mergeToken<PopoverToken>(token, {
+      popoverPadding: 12, // Fixed Value
      popoverBg: colorBgElevated,
      popoverColor: colorText,
-      popoverPadding: 12, // Fixed Value
    });

    return [
@ -181,8 +182,12 @@ export default genComponentStyleHook(
      initZoomMotion(popoverToken, 'zoom-big'),
    ];
  },
-  ({ zIndexPopupBase }) => ({
-    zIndexPopup: zIndexPopupBase + 30,
+  (token) => ({
    width: 177,
+    minWidth: 177,
+    zIndexPopup: token.zIndexPopupBase + 30,
  }),
+  {
+    deprecatedTokens: [['width', 'minWidth']],
+  },
 );
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -205,7 +205,20 @@ This document contains the correspondence between all the less variables related

 <!-- ### Pagination -->

-<!-- ### Popover -->
+### Popover>
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@popover-bg` | `colorBgContainer` | - |
+| `@popover-color` | `colorText` | GlobalToken |
+| `@popover-min-width` | `minWidth` | - |
+| `@popover-min-height` | - | Deprecated  for style change |
+| `@popover-arrow-width` | `sizePopupArrow` | GlobalToken |
+| `@popover-arrow-color` | - | Deprecated  for style change |
+| `@popover-arrow-outer-color` | - | Deprecated  for style change |
+| `@popover-distance` | `marginXXS` | Global Token |
+| `@popover-padding-horizontal` | - | Deprecated for style change |

 <!-- ### Progress -->

--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -203,7 +203,20 @@ title: Less 变量迁移 Design Token

 <!-- ### Pagination 分页 -->

-<!-- ### Popover 气泡卡片 -->
+### Popover 气泡卡片
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@popover-bg` | `colorBgElevated` | - |
+| `@popover-color` | `colorText` | 全局 Token |
+| `@popover-min-width` | `minWidth` | - |
+| `@popover-min-height` | - | 已废弃 |
+| `@popover-arrow-width` | `sizePopupArrow` | 全局 Token |
+| `@popover-arrow-color` | - | 已废弃 |
+| `@popover-arrow-outer-color`| - | 已废弃 |
+| `@popover-distance` | `marginXXS` | 全局 Token |
+| `@popover-padding-horizontal` | - | 已废弃 |

 <!-- ### Progress 进度条 -->

@ -224,7 +237,6 @@ title: Less 变量迁移 Design Token
 <!-- prettier-ignore -->
 | Less 变量 | Component Token | 备注 |
 | --- | --- | --- |
-| `@result-icon-font-size` | `iconFontSize` | - |
 | `@result-title-font-size` | `titleFontSize` | - |
 | `@result-subtitle-font-size` | `subtitleFontSize` | - |
 | `@result-extra-margin` | `extraMargin` | - |