mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-18 14:13:37 +08:00
✨ feat: migrate less to token for Tag (#42053)
* 🔀 feat: rebase feature * 🔀 feat: rebase feature * 📝 feat: update doc * feat: clean up * ✨ feat: migrate less to token for Avatar * ✨ feat: migrate less to token for Tag * ✨ feat: migrate less to token for Tag * 🔀 feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update snap * 🔀 feat: rebase feature * 🔀 feat: rebase feature * 📝 feat: update doc * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * ✨ feat: update * chore: code clean * chore: code clean * chore: more suiltable line-height * chore: fix lint --------- Co-authored-by: MadCcc <1075746765@qq.com>
This commit is contained in:
黑雨
GitHub
parent
5bbd13d2c8
commit
023efaf976
@ -1003,6 +1003,143 @@ exports[`renders components/tag/demo/colorful-inverse.tsx extend context correct
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/tag/demo/component-token.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap: wrap; margin-bottom: -8px;"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
<a
|
||||
href="https://github.com/ant-design/ant-design/issues/1862"
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta"
|
||||
>
|
||||
Tag 2
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tag-close-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-error"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
|
||||
/>
|
||||
<path
|
||||
d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
error
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-red-inverse"
|
||||
>
|
||||
red
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right: 0px; padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta ant-tag-borderless"
|
||||
>
|
||||
magenta
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="padding-bottom: 8px;"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-processing"
|
||||
>
|
||||
<span
|
||||
aria-label="sync"
|
||||
class="anticon anticon-sync anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="sync"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
processing
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/tag/demo/control.tsx extend context correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
|
||||
@ -1003,6 +1003,143 @@ exports[`renders components/tag/demo/colorful-inverse.tsx correctly 1`] = `
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/tag/demo/component-token.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
style="flex-wrap:wrap;margin-bottom:-8px"
|
||||
>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag"
|
||||
>
|
||||
<a
|
||||
href="https://github.com/ant-design/ant-design/issues/1862"
|
||||
>
|
||||
Link
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta"
|
||||
>
|
||||
Tag 2
|
||||
<span
|
||||
aria-label="close"
|
||||
class="anticon anticon-close ant-tag-close-icon"
|
||||
role="img"
|
||||
tabindex="-1"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-error"
|
||||
>
|
||||
<span
|
||||
aria-label="close-circle"
|
||||
class="anticon anticon-close-circle"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="close-circle"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 .3L512 465.6l-99.3-118.4-66.1-.3c-4.4 0-8 3.5-8 8 0 1.9.7 3.7 1.9 5.2l130.1 155L340.5 670a8.32 8.32 0 00-1.9 5.2c0 4.4 3.6 8 8 8l66.1-.3L512 564.4l99.3 118.4 66 .3c4.4 0 8-3.5 8-8 0-1.9-.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z"
|
||||
/>
|
||||
<path
|
||||
d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
error
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-red-inverse"
|
||||
>
|
||||
red
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="margin-right:0;padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-magenta ant-tag-borderless"
|
||||
>
|
||||
magenta
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="ant-space-item"
|
||||
style="padding-bottom:8px"
|
||||
>
|
||||
<span
|
||||
class="ant-tag ant-tag-processing"
|
||||
>
|
||||
<span
|
||||
aria-label="sync"
|
||||
class="anticon anticon-sync anticon-spin"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
data-icon="sync"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<path
|
||||
d="M168 504.2c1-43.7 10-86.1 26.9-126 17.3-41 42.1-77.7 73.7-109.4S337 212.3 378 195c42.4-17.9 87.4-27 133.9-27s91.5 9.1 133.8 27A341.5 341.5 0 01755 268.8c9.9 9.9 19.2 20.4 27.8 31.4l-60.2 47a8 8 0 003 14.1l175.7 43c5 1.2 9.9-2.6 9.9-7.7l.8-180.9c0-6.7-7.7-10.5-12.9-6.3l-56.4 44.1C765.8 155.1 646.2 92 511.8 92 282.7 92 96.3 275.6 92 503.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8zm756 7.8h-60c-4.4 0-7.9 3.5-8 7.8-1 43.7-10 86.1-26.9 126-17.3 41-42.1 77.8-73.7 109.4A342.45 342.45 0 01512.1 856a342.24 342.24 0 01-243.2-100.8c-9.9-9.9-19.2-20.4-27.8-31.4l60.2-47a8 8 0 00-3-14.1l-175.7-43c-5-1.2-9.9 2.6-9.9 7.7l-.7 181c0 6.7 7.7 10.5 12.9 6.3l56.4-44.1C258.2 868.9 377.8 932 512.2 932c229.2 0 415.5-183.7 419.8-411.8a8 8 0 00-8-8.2z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
processing
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`renders components/tag/demo/control.tsx correctly 1`] = `
|
||||
<div
|
||||
class="ant-space ant-space-horizontal ant-space-align-center"
|
||||
|
||||
7
components/tag/demo/component-token.md
Normal file
7
components/tag/demo/component-token.md
Normal file
@ -0,0 +1,7 @@
|
||||
## zh-CN
|
||||
|
||||
Component Token Debug.
|
||||
|
||||
## en-US
|
||||
|
||||
Component Token Debug.
|
||||
35
components/tag/demo/component-token.tsx
Normal file
35
components/tag/demo/component-token.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { CloseCircleOutlined, SyncOutlined } from '@ant-design/icons';
|
||||
import { ConfigProvider, Space, Tag } from 'antd';
|
||||
import React from 'react';
|
||||
|
||||
export default () => (
|
||||
<ConfigProvider
|
||||
theme={{
|
||||
components: {
|
||||
Tag: {
|
||||
defaultBg: '#f9f0ff',
|
||||
defaultColor: '#4b34d3',
|
||||
},
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Space size={[0, 8]} wrap>
|
||||
<Tag>
|
||||
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
|
||||
</Tag>
|
||||
<Tag closable color="magenta">
|
||||
Tag 2
|
||||
</Tag>
|
||||
<Tag icon={<CloseCircleOutlined />} color="error">
|
||||
error
|
||||
</Tag>
|
||||
<Tag color="red-inverse">red</Tag>
|
||||
<Tag bordered={false} color="magenta">
|
||||
magenta
|
||||
</Tag>
|
||||
<Tag icon={<SyncOutlined spin />} color="processing">
|
||||
processing
|
||||
</Tag>
|
||||
</Space>
|
||||
</ConfigProvider>
|
||||
);
|
||||
@ -31,6 +31,7 @@ Tag for categorizing or markup.
|
||||
<code src="./demo/borderlessLayout.tsx" debug>borderless in layout</code>
|
||||
<code src="./demo/customize.tsx" debug>Customize close</code>
|
||||
<code src="./demo/draggable.tsx">Draggable Tag</code>
|
||||
<code src="./demo/component-token.tsx" debug>Component Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -31,6 +31,7 @@ demo:
|
||||
<code src="./demo/borderlessLayout.tsx" debug>深色背景中无边框</code>
|
||||
<code src="./demo/customize.tsx" debug>自定义关闭按钮</code>
|
||||
<code src="./demo/draggable.tsx">可拖拽标签</code>
|
||||
<code src="./demo/component-token.tsx" debug>组件 Token</code>
|
||||
|
||||
## API
|
||||
|
||||
|
||||
@ -5,13 +5,14 @@ import { resetComponent } from '../../style';
|
||||
import type { FullToken } from '../../theme/internal';
|
||||
import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal';
|
||||
|
||||
export interface ComponentToken {}
|
||||
export interface ComponentToken {
|
||||
defaultBg: string;
|
||||
defaultColor: string;
|
||||
}
|
||||
|
||||
interface TagToken extends FullToken<'Tag'> {
|
||||
tagFontSize: number;
|
||||
tagLineHeight: React.CSSProperties['lineHeight'];
|
||||
tagDefaultBg: string;
|
||||
tagDefaultColor: string;
|
||||
tagIconSize: number;
|
||||
tagPaddingHorizontal: number;
|
||||
tagBorderlessBg: string;
|
||||
@ -68,9 +69,9 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
marginInlineEnd: token.marginXS,
|
||||
paddingInline,
|
||||
fontSize: token.tagFontSize,
|
||||
lineHeight: `${token.tagLineHeight}px`,
|
||||
lineHeight: token.tagLineHeight,
|
||||
whiteSpace: 'nowrap',
|
||||
background: token.tagDefaultBg,
|
||||
background: token.defaultBg,
|
||||
border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
|
||||
borderRadius: token.borderRadiusSM,
|
||||
opacity: 1,
|
||||
@ -83,7 +84,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
},
|
||||
|
||||
'&, a, a:hover': {
|
||||
color: token.tagDefaultColor,
|
||||
color: token.defaultColor,
|
||||
},
|
||||
|
||||
[`${componentCls}-close-icon`]: {
|
||||
@ -149,21 +150,18 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
|
||||
};
|
||||
|
||||
// ============================== Export ==============================
|
||||
export default genComponentStyleHook('Tag', (token) => {
|
||||
const { fontSize, lineHeight, lineWidth, fontSizeIcon } = token;
|
||||
const tagHeight = Math.round(fontSize * lineHeight);
|
||||
export default genComponentStyleHook(
|
||||
'Tag',
|
||||
(token) => {
|
||||
const { lineWidth, fontSizeIcon } = token;
|
||||
|
||||
const tagFontSize = token.fontSizeSM;
|
||||
const tagLineHeight = tagHeight - lineWidth * 2;
|
||||
const tagDefaultBg = token.colorFillQuaternary;
|
||||
const tagDefaultColor = token.colorText;
|
||||
const tagLineHeight = `${token.lineHeightSM * tagFontSize}px`;
|
||||
|
||||
const tagToken = mergeToken<TagToken>(token, {
|
||||
tagFontSize,
|
||||
tagLineHeight,
|
||||
tagDefaultBg,
|
||||
tagDefaultColor,
|
||||
tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much more smaller
|
||||
tagIconSize: fontSizeIcon - 2 * lineWidth, // Tag icon is much smaller
|
||||
tagPaddingHorizontal: 8, // Fixed padding.
|
||||
tagBorderlessBg: token.colorFillTertiary,
|
||||
});
|
||||
@ -176,4 +174,9 @@ export default genComponentStyleHook('Tag', (token) => {
|
||||
genTagStatusStyle(tagToken, 'error', 'Error'),
|
||||
genTagStatusStyle(tagToken, 'warning', 'Warning'),
|
||||
];
|
||||
});
|
||||
},
|
||||
(token) => ({
|
||||
defaultBg: token.colorFillQuaternary,
|
||||
defaultColor: token.colorText,
|
||||
}),
|
||||
);
|
||||
|
||||
@ -302,7 +302,16 @@ This document contains the correspondence between all the less variables related
|
||||
|
||||
<!-- ### Tabs -->
|
||||
|
||||
<!-- ### Tag -->
|
||||
## Tag
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@tag-border-radius` | `borderRadiusSM` | Global Token |
|
||||
| `@tag-default-bg` | `defaultBg` | - |
|
||||
| `@tag-default-color` | `defaultColor` | - |
|
||||
| `@tag-font-size` | `fontSizeSM` | Global Token |
|
||||
| `@tag-line-height` | `lineHeightSM` | Global Token |
|
||||
|
||||
### Timeline
|
||||
|
||||
|
||||
@ -300,7 +300,16 @@ title: Less 变量迁移 Design Token
|
||||
|
||||
<!-- ### Tabs 标签页 -->
|
||||
|
||||
<!-- ### Tag 标签 -->
|
||||
## Tag 标签
|
||||
|
||||
<!-- prettier-ignore -->
|
||||
| less 变量 | Component Token | 备注 |
|
||||
| --- | --- | --- |
|
||||
| `@tag-border-radius` | `borderRadiusSM` | 全局 Token |
|
||||
| `@tag-default-bg` | `defaultBg` | - |
|
||||
| `@tag-default-color` | `defaultColor` | - |
|
||||
| `@tag-font-size` | `fontSizeSM` | 全局 Token |
|
||||
| `@tag-line-height` | `lineHeightSM` | 全局 Token |
|
||||
|
||||
### Timeline 时间轴
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user