test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 12:09:14 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

✨ feat: popover Component Token (#42337)

Browse Source 
* ✨ 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
This commit is contained in:
黑雨 2023-05-25 20:09:48 +08:00 committed by GitHub
parent 8fb97df92c
commit a17c4cb581
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 228 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -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

73
components/popover/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -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"

7
components/popover/demo/component-token.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
Component Token Debug.
## en-US
Component Token Debug.

33
components/popover/demo/component-token.tsx Normal file
View File

@ -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;

1
components/popover/index.en-US.md
View File

@ -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

1
components/popover/index.zh-CN.md
View File

@ -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

19
components/popover/style/index.tsx
View File

@ -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']],
},
);

15
docs/react/migrate-less-variables.en-US.md
View File

@ -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 -->

16
docs/react/migrate-less-variables.zh-CN.md
View File

@ -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` | - |