From a17c4cb581e31f2954351f39189b5771ec3ca072 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= Date: Thu, 25 May 2023 20:09:48 +0800 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat:=20popover=20Component=20Token?= =?UTF-8?q?=20(#42337)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * ✨ 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 --- .../__snapshots__/demo-extend.test.ts.snap | 73 +++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 73 +++++++++++++++++++ components/popover/demo/component-token.md | 7 ++ components/popover/demo/component-token.tsx | 33 +++++++++ components/popover/index.en-US.md | 1 + components/popover/index.zh-CN.md | 1 + components/popover/style/index.tsx | 19 +++-- docs/react/migrate-less-variables.en-US.md | 15 +++- docs/react/migrate-less-variables.zh-CN.md | 16 +++- 9 files changed, 228 insertions(+), 10 deletions(-) create mode 100644 components/popover/demo/component-token.md create mode 100644 components/popover/demo/component-token.tsx diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap index 2ab45827be..1030e6afd4 100644 --- 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 [ +
+
+
+ +
+
, +
+
+
+ +
+
, +] +`; + exports[`renders components/popover/demo/control.tsx extend context correctly 1`] = ` Array [
+); + +const App: React.FC = () => ( + + + + +); + +export default App; diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md index f7f6d2b8bb..793a7bf415 100644 --- 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 Hover with click popover _InternalPanelDoNotUseOrYouWillBeFired Wireframe +Component Token ## API diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 9db7598bac..5732a4f93d 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -28,6 +28,7 @@ demo: 悬停点击弹出窗口 _InternalPanelDoNotUseOrYouWillBeFired 线框风格 +组件 Token ## API diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index b48112cb73..54debb4737 100644 --- 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 = (token) => { const { componentCls, - popoverBg, popoverColor, - width, + minWidth, fontWeightStrong, popoverPadding, boxShadowSecondary, @@ -29,6 +29,7 @@ const genBaseStyle: GenerateStyle = (token) => { zIndexPopup, marginXS, colorBgElevated, + popoverBg, } = token; return [ @@ -72,7 +73,7 @@ const genBaseStyle: GenerateStyle = (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(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']], + }, ); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 944e996361..6dc2c325b4 100644 --- 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 - +### Popover> + + +| 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 | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 022368fb2f..fa597840f7 100644 --- 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 - +### Popover 气泡卡片 + + +| 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` | - | 已废弃 | @@ -224,7 +237,6 @@ title: Less 变量迁移 Design Token | Less 变量 | Component Token | 备注 | | --- | --- | --- | -| `@result-icon-font-size` | `iconFontSize` | - | | `@result-title-font-size` | `titleFontSize` | - | | `@result-subtitle-font-size` | `subtitleFontSize` | - | | `@result-extra-margin` | `extraMargin` | - |