mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

Merge pull request #47771 from ant-design/master

Browse Source 
chore: merge master into feature
This commit is contained in:
lijianan 2024-03-08 11:38:43 +08:00 committed by GitHub
commit 5f1ac6c095
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
45 changed files with 603 additions and 467 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.dumi/theme/builtins/ResourceArticles/index.tsx
View File

@ -30,10 +30,6 @@ const useStyle = createStyles(({ token, css }) => {
}
}
${antCls}-tabs-nav::before {
display: none;
}
table {
width: 100%;
table-layout: fixed;
@ -121,6 +117,8 @@ const Articles: React.FC<{ data: Partial<SiteData> }> = ({ data }) => {
return (
<Tabs
centered
size="large"
items={yearList.map((year) => ({
key: year,
label: `${year}${isZhCN ? ' 年' : ''}`,

7
.dumi/theme/builtins/ResourceCards/index.tsx
View File

@ -15,13 +15,14 @@ const useStyle = createStyles(({ token, css }) => {
height: 100%;
color: inherit;
list-style: none;
border: 1px solid #e6e6e6;
border: 1px solid ${token.colorSplit};
border-radius: 2px;
cursor: pointer;
transition: box-shadow 0.3s;
&:hover {
box-shadow: ${boxShadowSecondary};
color: inherit;
}
`,
image: css`
@ -47,13 +48,13 @@ const useStyle = createStyles(({ token, css }) => {
`,
title: css`
margin: 16px 20px 8px;
color: #0d1a26;
opacity: 0.85;
font-size: 20px;
line-height: 28px;
`,
description: css`
margin: 0 20px 20px;
color: #697b8c;
opacity: 0.65;
font-size: 14px;
line-height: 22px;
`,

4
.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx
View File

@ -17,7 +17,7 @@ const useStyle = createStyles(({ token, css }) => {
top: 0;
right: 0;
left: 0;
z-index: 11;
z-index: 1001;
padding: 0 40px;
background: #fff;
box-shadow: ${boxShadowSecondary};
@ -122,6 +122,8 @@ const AffixTabs: React.FC = () => {
<div className={classNames(affixTabs, fixedId && affixTabsFixed)} ref={containerRef}>
<Tabs
activeKey={fixedId}
centered
size="large"
onChange={scrollToId}
items={idsRef.current.map((id) => ({
key: id,

188
.dumi/theme/layouts/ResourceLayout/index.tsx
View File

@ -4,6 +4,7 @@ import { ConfigProvider, Layout, Typography } from 'antd';
import { createStyles } from 'antd-style';
import { FormattedMessage, useRouteMeta } from 'dumi';
import useDark from '../../../hooks/useDark';
import CommonHelmet from '../../common/CommonHelmet';
import EditButton from '../../common/EditButton';
import Footer from '../../slots/Footer';
@ -15,125 +16,112 @@ const resourcePadding = 40;
const articleMaxWidth = 1208;
const resourcePaddingXS = 24;
const useStyle = createStyles(({ token, css }) => {
const { antCls } = token;
return {
resourcePage: css`
footer {
margin-top: 176px;
const useStyle = () => {
const isRootDark = useDark();
.rc-footer-container {
max-width: ${articleMaxWidth}px;
margin: 0 auto;
padding-right: 0;
padding-left: 0;
}
}
`,
resourceContent: css`
padding: 0 ${resourcePadding}px;
max-width: ${articleMaxWidth}px;
margin: 0 auto;
box-sizing: content-box;
min-height: 100vh;
return createStyles((config) => {
const { token, css } = config;
const { antCls } = token;
> .markdown {
> p {
margin-bottom: 56px;
}
return {
resourcePage: css`
footer {
margin-top: 176px;
h2 {
margin-top: 124px;
color: #314659;
font-weight: lighter;
font-size: 30px;
line-height: 38px;
&:first-child {
margin-top: 88px;
.rc-footer-container {
max-width: ${articleMaxWidth}px;
margin: 0 auto;
padding-right: 0;
padding-left: 0;
}
}
`,
resourceContent: css`
padding: 0 ${resourcePadding}px;
max-width: ${articleMaxWidth}px;
margin: 0 auto;
box-sizing: content-box;
min-height: 100vh;
h3 {
margin-top: 56px;
font-weight: 400;
font-size: 24px;
line-height: 32px;
@media only screen and (max-width: 767.99px) {
& {
article {
padding: 0 ${resourcePaddingXS}px;
}
${antCls}-col {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
}
`,
banner: css`
padding: 0 ${resourcePadding}px;
overflow: hidden;
${
isRootDark
? ``
: `background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');`
}
background-size: cover;
h1 {
box-sizing: content-box;
max-width: ${articleMaxWidth}px;
margin: 56px auto 16px;
}
p {
color: #697b8c;
section {
max-width: ${articleMaxWidth}px;
margin: 0 auto 56px;
font-weight: 200;
font-size: 16px;
line-height: 24px;
}
}
@media only screen and (max-width: 767.99px) {
& {
article {
@media only screen and (max-width: 767.99px) {
& {
margin: 0 -${resourcePaddingXS}px;
padding: 0 ${resourcePaddingXS}px;
}
${antCls}-col {
padding-top: 16px !important;
padding-bottom: 16px !important;
}
}
}
`,
banner: css`
padding: 0 ${resourcePadding}px;
overflow: hidden;
background: url('https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*y_r7RogIG1wAAAAAAAAAAABkARQnAQ');
background-size: cover;
h1 {
box-sizing: content-box;
max-width: ${articleMaxWidth}px;
margin: 56px auto 16px;
}
section {
max-width: ${articleMaxWidth}px;
margin: 0 auto 56px;
font-weight: 200;
font-size: 16px;
line-height: 24px;
}
@media only screen and (max-width: 767.99px) {
& {
margin: 0 -${resourcePaddingXS}px;
padding: 0 ${resourcePaddingXS}px;
}
}
`,
};
});
`,
};
})();
};
const ResourceLayout: React.FC<ResourceLayoutProps> = ({ children }) => {
const { styles } = useStyle();
const meta = useRouteMeta();
return (
<ConfigProvider theme={{ token: { colorBgLayout: '#fff' } }}>
<Layout>
<CommonHelmet />
<div id="resources-page" className={styles.resourcePage}>
<AffixTabs />
<div className={styles.banner}>
<Typography.Title style={{ fontSize: 30 }}>
{meta.frontmatter?.title}
<EditButton
title={<FormattedMessage id="app.content.edit-page" />}
filename={meta.frontmatter.filename}
/>
</Typography.Title>
<section>{meta.frontmatter.description}</section>
</div>
<div className={styles.resourceContent}>{children}</div>
<Footer />
const isRootDark = useDark();
const node = (
<Layout>
<CommonHelmet />
<div id="resources-page" className={styles.resourcePage}>
<AffixTabs />
<div className={styles.banner}>
<Typography.Title style={{ fontSize: 30 }}>
{meta.frontmatter?.title}
<EditButton
title={<FormattedMessage id="app.content.edit-page" />}
filename={meta.frontmatter.filename}
/>
</Typography.Title>
<section>{meta.frontmatter.description}</section>
</div>
</Layout>
</ConfigProvider>
<div className={styles.resourceContent}>{children}</div>
<Footer />
</div>
</Layout>
);
if (!isRootDark) {
return <ConfigProvider theme={{ token: { colorBgLayout: '#fff' } }}>{node}</ConfigProvider>;
}
return node;
};
export default ResourceLayout;

3
BUG_VERSIONS.json
View File

@ -51,5 +51,6 @@
"5.12.3": ["https://github.com/ant-design/ant-design/issues/46525"],
"5.12.6": ["https://github.com/ant-design/ant-design/issues/46719"],
"5.13.0": ["https://github.com/ant-design/ant-design/pull/46962"],
"5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"]
"5.14.0": ["https://github.com/ant-design/ant-design/issues/47354"],
"5.15.0": ["https://github.com/ant-design/ant-design/pull/47504#issuecomment-1980459433"]
}

40
CHANGELOG.en-US.md
View File

@ -16,6 +16,46 @@ tag: vVERSION
---
## 5.15.1
`2024-03-06`
- 🐞 Revert code that removed margin of Tag. [#47736](https://github.com/ant-design/ant-design/pull/47736)
- 🇷🇺 Improve DatePicker ru_RU locale. [#47705](https://github.com/ant-design/ant-design/pull/47705)
## 5.15.0
`2024-03-02`
- ConfigProvider
- 🆕 ConfigProvider support Input.TextArea `allowClear` `autoComplete` `className` `style` `classNames` `styles` props. [#47589](https://github.com/ant-design/ant-design/pull/47589)
- 🆕 ConfigProvider support Input `allowClear` props. [#47602](https://github.com/ant-design/ant-design/pull/47602)
- 🆕 ConfigProvider support Menu `expandIcon` props. [#47561](https://github.com/ant-design/ant-design/pull/47561)
- 🆕 ConfigProvider support Collapse `expandIcon` props. [#47473](https://github.com/ant-design/ant-design/pull/47473)
- 🆕 ConfigProvider support Tabs `removeIcon` props, when set `type="editable-card"`. [#47334](https://github.com/ant-design/ant-design/pull/47334)
- 🆕 Prefixes for CSS variables follow the `prefixCls` property of ConfigProvider by default. [#47481](https://github.com/ant-design/ant-design/pull/47481)
- 🤖 CardProps `styles` in ConfigProvider is set to optional. [#47601](https://github.com/ant-design/ant-design/pull/47601) [@Yawenina](https://github.com/Yawenina)
- 🆕 Select、Checkbox、Radio、DatePicker、TreeSelect、Cascader the `focus` supports passing `options`. [#47664](https://github.com/ant-design/ant-design/pull/47664)
- 🆕 Modal support configuring `aria-*` in `closable`. [#47650](https://github.com/ant-design/ant-design/pull/47650)
- 🆕 Alert support configuring `aria-*` in `closable`. [#47474](https://github.com/ant-design/ant-design/pull/47474)
- 🆕 Tabs support `removeIcon` props, when set `type="editable-card"`. [#47334](https://github.com/ant-design/ant-design/pull/47334)
- Drawer
- 🆕 Drawer support configuring `aria-*` in `closable`. [#47543](https://github.com/ant-design/ant-design/pull/47543)
- 🆕 Drawer support passing `aria-*` attributes to panel nodes. [#47387](https://github.com/ant-design/ant-design/pull/47387)
- Table
- 🆕 Table adds `filterOnClose` to specify whether to trigger filtering when the filter menu is closed. [#47451](https://github.com/ant-design/ant-design/pull/47451) [@xsjcTony](https://github.com/xsjcTony)
- 🆕 Table adds `components.header.table` to customize the header component when scrolling the column. [#47382](https://github.com/ant-design/ant-design/pull/47382)
- 🐞 Fix the issue where scroll bars would not be displayed during initial rendering under Table `sticky`. [#47382](https://github.com/ant-design/ant-design/pull/47382)
- 🐞 Fix the issue where the `th` element is not used in the column header when Table `column.title` is empty. [#47382](https://github.com/ant-design/ant-design/pull/47382)
- 🐞 Fix the issue where `prefixCls` is invalid when Table uses a virtual list. [#47639](https://github.com/ant-design/ant-design/pull/47639)
- 💄 Fix abnormal shadow display when Table fixed columns. [#47518](https://github.com/ant-design/ant-design/pull/47518)
- 🐞 Fix the issue where when using DirectoryTree in Tree, pressing shift for continuous multi-selection will report an error. [#47567](https://github.com/ant-design/ant-design/pull/47567) [@wkmyws](https://github.com/wkmyws)
- 🐞 Fix the issue where `isFieldsTouched(true)` always returns `false` when Form exists in Form.List. [#47629](https://github.com/ant-design/ant-design/pull/47629) [@lemonied](https://github.com/lemonied)
- 🐞 Fix the issue of Button being incompatible with v4 `type=''`. [#47612](https://github.com/ant-design/ant-design/pull/47612)
- 🛠 Refactor Typography to omit measurement logic to support dynamic row height scenarios. [#47597](https://github.com/ant-design/ant-design/pull/47597)
- 💄 Remove redundant margin styles from Tag. [#47504](https://github.com/ant-design/ant-design/pull/47504)
- 🤖 MISC: fix an issue that could not be compiled under pnpm configuration `hoist: false`. [#47587](https://github.com/ant-design/ant-design/pull/47587)
## 5.14.2
`2024-02-23`

40
CHANGELOG.zh-CN.md
View File

@ -16,6 +16,46 @@ tag: vVERSION
---
## 5.15.1
`2024-03-06`
- 🐞 回滚移除 Tag 默认间距的代码。[#47736](https://github.com/ant-design/ant-design/pull/47736)
- 🇷🇺 更新 DatePicker 的俄语文案。[#47705](https://github.com/ant-design/ant-design/pull/47705)
## 5.15.0
`2024-03-02`
- ConfigProvider
- 🆕 ConfigProvider 支持 Input.TextArea 组件 `allowClear`、`autoComplete`、`className`、`style`、`classNames`、`styles` 属性。[#47589](https://github.com/ant-design/ant-design/pull/47589)
- 🆕 ConfigProvider 支持 Input 组件 `allowClear` 属性。[#47602](https://github.com/ant-design/ant-design/pull/47602)
- 🆕 ConfigProvider 支持 Menu 组件 `expandIcon` 属性。[#47561](https://github.com/ant-design/ant-design/pull/47561)
- 🆕 ConfigProvider 支持 Collapse 组件 `expandIcon` 属性。[#47473](https://github.com/ant-design/ant-design/pull/47473)
- 🆕 ConfigProvider 支持 Tabs `removeIcon` 属性, 在设置 `type="editable-card"` 时有效。[#47334](https://github.com/ant-design/ant-design/pull/47334)
- 🆕 CSS 变量的前缀默认跟随 ConfigProvider 的 `prefixCls` 属性。[#47481](https://github.com/ant-design/ant-design/pull/47481)
- 🤖 ConfigProvider 中 CardProps `styles` 设为可选。[#47601](https://github.com/ant-design/ant-design/pull/47601) [@Yawenina](https://github.com/Yawenina)
- 🆕 Select、Checkbox、Radio、DatePicker、TreeSelect、Cascader 支持 `focus` 功能支持传递 `options`。[#47664](https://github.com/ant-design/ant-design/pull/47664)
- 🆕 Modal 支持在 `closable` 中配置 `aria-*`。[#47650](https://github.com/ant-design/ant-design/pull/47650)
- 🆕 Alert 支持在 `closable` 中配置 `aria-*`。[#47474](https://github.com/ant-design/ant-design/pull/47474)
- 🆕 Tabs 组件支持 `removeIcon` 属性，在设置 `type="editable-card"` 时有效。[#47334](https://github.com/ant-design/ant-design/pull/47334)
- Drawer
- 🆕 Drawer 支持在 `closable` 中配置 `aria-*`。[#47543](https://github.com/ant-design/ant-design/pull/47543)
- 🆕 Drawer 支持传递 `aria-*` 属性给 panel 节点。[#47387](https://github.com/ant-design/ant-design/pull/47387)
- Table
- 🆕 Table 新增 `filterOnClose` 用于指定是否在筛选菜单关闭时触发筛选。[#47451](https://github.com/ant-design/ant-design/pull/47451) [@xsjcTony](https://github.com/xsjcTony)
- 🆕 Table 新增 `components.header.table` 以自定义滚动列时的标题组件。[#47382](https://github.com/ant-design/ant-design/pull/47382)
- 🐞 修复 Table `sticky` 下，初次渲染不会显示滚动条的问题。[#47382](https://github.com/ant-design/ant-design/pull/47382)
- 🐞 修复 Table `column.title` 为空时列头没有使用 `th` 元素的问题。[#47382](https://github.com/ant-design/ant-design/pull/47382)
- 🐞 修复 Table 使用虚拟列表时 `prefixCls` 无效的问题。[#47639](https://github.com/ant-design/ant-design/pull/47639)
- 💄 修复 Table 固定列时阴影展示异常的问题。[#47518](https://github.com/ant-design/ant-design/pull/47518)
- 🐞 修复 Tree 使用 DirectoryTree 时，按住 shift 连续多选报错的问题。[#47567](https://github.com/ant-design/ant-design/pull/47567) [@wkmyws](https://github.com/wkmyws)
- 🐞 修复 Form 存在 Form.List 时，`isFieldsTouched(true)` 始终会返回 `false` 的问题。[#47629](https://github.com/ant-design/ant-design/pull/47629) [@lemonied](https://github.com/lemonied)
- 🐞 修复 Button 不兼容 v4 `type=''` 的问题。[#47612](https://github.com/ant-design/ant-design/pull/47612)
- 🛠 重构 Typography 省略测量逻辑以支持动态行高的场景。[#47597](https://github.com/ant-design/ant-design/pull/47597)
- 💄 移除 Tag 组件多余的 margin 样式。[#47504](https://github.com/ant-design/ant-design/pull/47504)
- 🤖 杂项：修复不能在 pnpm 配置 `hoist: false` 下编译的问题。[#47587](https://github.com/ant-design/ant-design/pull/47587)
## 5.14.2
`2024-02-23`

22
components/auto-complete/demo/options.tsx
View File

@ -1,22 +1,20 @@
import React, { useState } from 'react';
import React from 'react';
import { AutoComplete } from 'antd';
import type { DefaultOptionType } from 'antd/es/select';
const App: React.FC = () => {
const [options, setOptions] = useState<{ value: string; label: string }[]>([]);
const [options, setOptions] = React.useState<DefaultOptionType[]>([]);
const handleSearch = (value: string) => {
let res: { value: string; label: string }[] = [];
if (!value || value.indexOf('@') >= 0) {
res = [];
} else {
res = ['gmail.com', '163.com', 'qq.com'].map((domain) => ({
value: `${value}@${domain}`,
setOptions(() => {
if (!value || value.includes('@')) {
return [];
}
return ['gmail.com', '163.com', 'qq.com'].map<DefaultOptionType>((domain) => ({
label: `${value}@${domain}`,
value: `${value}@${domain}`,
}));
}
setOptions(res);
});
};
return (
<AutoComplete
style={{ width: 200 }}

9
components/color-picker/style/index.ts
View File

@ -55,7 +55,7 @@ const genClearStyle = (
size: number,
extraStyle?: CSSObject,
): CSSObject => {
const { componentCls, borderRadiusSM, lineWidth, colorSplit, red6 } = token;
const { componentCls, borderRadiusSM, lineWidth, colorSplit, colorBorder, red6 } = token;
return {
[`${componentCls}-clear`]: {
@ -65,6 +65,9 @@ const genClearStyle = (
border: `${unit(lineWidth)} solid ${colorSplit}`,
position: 'relative',
overflow: 'hidden',
cursor: 'pointer',
transition: `all ${token.motionDurationFast}`,
...extraStyle,
'&::after': {
content: '""',
@ -78,6 +81,10 @@ const genClearStyle = (
transform: 'rotate(-45deg)',
backgroundColor: red6,
},
'&:hover': {
borderColor: colorBorder,
},
},
};
};

2
components/date-picker/locale/ru_RU.ts
View File

@ -16,6 +16,8 @@ const locale: PickerLocale = {
rangeYearPlaceholder: ['Начальный год', 'Год окончания'],
rangeMonthPlaceholder: ['Начальный месяц', 'Конечный месяц'],
rangeWeekPlaceholder: ['Начальная неделя', 'Конечная неделя'],
shortWeekDays: ['Вс', 'Пн', 'Вт', 'Ср', 'Чт', 'Пт', 'Сб'],
shortMonths: ['Янв', 'Фев', 'Мар', 'Апр', 'Май', 'Июн', 'Июл', 'Авг', 'Сен', 'Окт', 'Ноя', 'Дек'],
...CalendarLocale,
},
timePickerLocale: {

2
components/descriptions/__tests__/index.test.tsx
View File

@ -357,7 +357,7 @@ describe('Descriptions', () => {
</Descriptions>,
);
const nestDesc = container.querySelectorAll('.ant-descriptions')?.[1];
const nestDesc = container.querySelectorAll('.ant-descriptions')[1];
const view = nestDesc.querySelector('.ant-descriptions-view');
expect(getComputedStyle(view!).border).toBeFalsy();
});

4
components/descriptions/style/index.ts
View File

@ -59,7 +59,6 @@ const genBorderedStyle = (token: DescriptionsToken): CSSObject => {
border: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
'> table': {
tableLayout: 'auto',
borderCollapse: 'collapse',
},
[`${componentCls}-row`]: {
borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
@ -140,6 +139,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
table: {
width: '100%',
tableLayout: 'fixed',
borderCollapse: 'collapse',
},
},
[`${componentCls}-row`]: {
@ -155,7 +155,7 @@ const genDescriptionStyles: GenerateStyle<DescriptionsToken> = (token) => {
fontWeight: 'normal',
fontSize: token.fontSize,
lineHeight: token.lineHeight,
textAlign: `start`,
textAlign: 'start',
'&::after': {
content: '":"',

18
components/form/demo/basic.tsx
View File

@ -1,13 +1,5 @@
import React from 'react';
import { Button, Checkbox, Form, Input } from 'antd';
const onFinish = (values: any) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo: any) => {
console.log('Failed:', errorInfo);
};
import { Button, Checkbox, Form, type FormProps, Input } from 'antd';
type FieldType = {
username?: string;
@ -15,6 +7,14 @@ type FieldType = {
remember?: string;
};
const onFinish: FormProps<FieldType>["onFinish"] = (values) => {
console.log('Success:', values);
};
const onFinishFailed: FormProps<FieldType>["onFinishFailed"] = (errorInfo) => {
console.log('Failed:', errorInfo);
};
const App: React.FC = () => (
<Form
name="basic"

66
components/locale/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -281867,7 +281867,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
tabindex="-1"
type="button"
>
сент.
Сен
</button>
<button
class="ant-picker-year-btn"
@ -281905,25 +281905,25 @@ exports[`Locale Provider should display the text as ru 1`] = `
<thead>
<tr>
<th>
пн
Пн
</th>
<th>
вт
Вт
</th>
<th>
ср
Ср
</th>
<th>
чт
Чт
</th>
<th>
пт
Пт
</th>
<th>
сб
Сб
</th>
<th>
вс
Вс
</th>
</tr>
</thead>
@ -284086,7 +284086,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
tabindex="-1"
type="button"
>
сент.
Сен
</button>
<button
class="ant-picker-year-btn"
@ -284126,25 +284126,25 @@ exports[`Locale Provider should display the text as ru 1`] = `
<thead>
<tr>
<th>
пн
Пн
</th>
<th>
вт
Вт
</th>
<th>
ср
Ср
</th>
<th>
чт
Чт
</th>
<th>
пт
Пт
</th>
<th>
сб
Сб
</th>
<th>
вс
Вс
</th>
</tr>
</thead>
@ -284624,7 +284624,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
tabindex="-1"
type="button"
>
окт.
Окт
</button>
<button
class="ant-picker-year-btn"
@ -284662,25 +284662,25 @@ exports[`Locale Provider should display the text as ru 1`] = `
<thead>
<tr>
<th>
пн
Пн
</th>
<th>
вт
Вт
</th>
<th>
ср
Ср
</th>
<th>
чт
Чт
</th>
<th>
пт
Пт
</th>
<th>
сб
Сб
</th>
<th>
вс
Вс
</th>
</tr>
</thead>
@ -285719,9 +285719,9 @@ exports[`Locale Provider should display the text as ru 1`] = `
</span>
<span
class="ant-select-selection-item"
title="сент."
title="Сен"
>
сент.
Сен
</span>
</div>
<span
@ -285811,25 +285811,25 @@ exports[`Locale Provider should display the text as ru 1`] = `
<thead>
<tr>
<th>
пн
Пн
</th>
<th>
вт
Вт
</th>
<th>
ср
Ср
</th>
<th>
чт
Чт
</th>
<th>
пт
Пт
</th>
<th>
сб
Сб
</th>
<th>
вс
Вс
</th>
</tr>
</thead>

2
components/modal/index.zh-CN.md
View File

@ -104,7 +104,7 @@ demo:
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` | |
| centered | 垂直居中展示 Modal | boolean | false | |
| className | 容器类名 | string | - | |
| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
| closable | 是否显示右上角的关闭按钮 | boolean | true | 4.9.0 |
| closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
| content | 内容 | ReactNode | - | |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer: null` | (params:[footerRenderParams](/components/modal-cn#footerrenderparams))=> React.ReactNode \| React.ReactNode | - | 5.9.0 |

65
components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -1522,7 +1522,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
<span>
<span
class="ant-tag ant-tag-gold"
style="margin-right: 3px;"
style="margin-inline-end: 4px;"
>
gold
<span
@ -1556,7 +1556,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx extend context cor
<span>
<span
class="ant-tag ant-tag-cyan"
style="margin-right: 3px;"
style="margin-inline-end: 4px;"
>
cyan
<span
@ -6880,9 +6880,9 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
</span>
<span
class="ant-select-selection-item"
title="Lucy"
title="lucy"
>
Lucy
lucy
</span>
</div>
<div
@ -6901,20 +6901,18 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
role="presentation"
/>
<div
aria-label="Jack"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
jack
Jack
</div>
<div
aria-label="Lucy"
aria-selected="true"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_2"
role="option"
>
lucy
Lucy
</div>
</div>
<div
@ -6932,19 +6930,22 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
>
<div
class="ant-select-item ant-select-item-group"
title="Manager"
title="manager"
>
Manager
<span>
manager
</span>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-grouped ant-select-item-option-active"
title="Jack"
>
<div
class="ant-select-item-option-content"
>
Jack
<span>
Jack
</span>
</div>
<span
aria-hidden="true"
@ -6954,14 +6955,15 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
/>
</div>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-grouped ant-select-item-option-selected"
title="Lucy"
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-grouped"
>
<div
class="ant-select-item-option-content"
>
Lucy
<span>
Lucy
</span>
</div>
<span
aria-hidden="true"
@ -6972,19 +6974,40 @@ exports[`renders components/select/demo/optgroup.tsx extend context correctly 1`
</div>
<div
class="ant-select-item ant-select-item-group"
title="Engineer"
title="engineer"
>
Engineer
<span>
engineer
</span>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-grouped"
title="yiminghe"
>
<div
class="ant-select-item-option-content"
>
yiminghe
<span>
Chloe
</span>
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option ant-select-item-option-grouped"
>
<div
class="ant-select-item-option-content"
>
<span>
Lucas
</span>
</div>
<span
aria-hidden="true"

8
components/select/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -718,7 +718,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
<span>
<span
class="ant-tag ant-tag-gold"
style="margin-right:3px"
style="margin-inline-end:4px"
>
gold
<span
@ -752,7 +752,7 @@ exports[`renders components/select/demo/custom-tag-render.tsx correctly 1`] = `
<span>
<span
class="ant-tag ant-tag-cyan"
style="margin-right:3px"
style="margin-inline-end:4px"
>
cyan
<span
@ -2186,9 +2186,9 @@ exports[`renders components/select/demo/optgroup.tsx correctly 1`] = `
</span>
<span
class="ant-select-selection-item"
title="Lucy"
title="lucy"
>
Lucy
lucy
</span>
</div>
<span

9
components/select/demo/custom-tag-render.tsx
View File

@ -4,7 +4,12 @@ import type { SelectProps } from 'antd';
type TagRender = SelectProps['tagRender'];
const options = [{ value: 'gold' }, { value: 'lime' }, { value: 'green' }, { value: 'cyan' }];
const options: SelectProps['options'] = [
{ value: 'gold' },
{ value: 'lime' },
{ value: 'green' },
{ value: 'cyan' },
];
const tagRender: TagRender = (props) => {
const { label, value, closable, onClose } = props;
@ -18,7 +23,7 @@ const tagRender: TagRender = (props) => {
onMouseDown={onPreventMouseDown}
closable={closable}
onClose={onClose}
style={{ marginRight: 3 }}
style={{ marginInlineEnd: 4 }}
>
{label}
</Tag>

15
components/select/demo/optgroup.tsx
View File

@ -12,15 +12,20 @@ const App: React.FC = () => (
onChange={handleChange}
options={[
{
label: 'Manager',
label: <span>manager</span>,
title: 'manager',
options: [
{ label: 'Jack', value: 'jack' },
{ label: 'Lucy', value: 'lucy' },
{ label: <span>Jack</span>, value: 'Jack' },
{ label: <span>Lucy</span>, value: 'Lucy' },
],
},
{
label: 'Engineer',
options: [{ label: 'yiminghe', value: 'Yiminghe' }],
label: <span>engineer</span>,
title: 'engineer',
options: [
{ label: <span>Chloe</span>, value: 'Chloe' },
{ label: <span>Lucas</span>, value: 'Lucas' },
],
},
]}
/>

10
components/select/index.en-US.md
View File

@ -154,10 +154,12 @@ Common props ref：[Common props](/docs/react/common-props)
### OptGroup props
| Property | Description | Type | Default | Version |
| -------- | ----------- | ----------------------- | ------- | ------- |
| key | Group key | string | - | |
| label | Group label | string \| React.Element | - | |
| Property | Description | Type | Default | Version |
| --------- | ---------------------------------- | --------------- | ------- | ------- |
| key | Group key | string | - | |
| label | Group label | React.ReactNode | - | |
| className | The additional class to option | string | - | |
| title | `title` attribute of Select Option | string | - | |
## Design Token

10
components/select/index.zh-CN.md
View File

@ -155,10 +155,12 @@ return (
### OptGroup props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----- | ---- | ----------------------- | ------ | ---- |
| key | Key | string | - | |
| label | 组名 | string \| React.Element | - | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ----------------------- | --------------- | ------ | ---- |
| key | Key | string | - | |
| label | 组名 | React.ReactNode | - | |
| className | Option 器类名 | string | - | |
| title | 选项上的原生 title 提示 | string | - | |
## 主题变量（Design Token）

20
components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -17451,14 +17451,14 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-green"
>
nice
NICE
</span>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-geekblue"
>
developer
DEVELOPER
</span>
</td>
<td
@ -17512,9 +17512,9 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-volcano"
>
loser
LOSER
</span>
</td>
<td
@ -17568,14 +17568,14 @@ exports[`renders components/table/demo/jsx.tsx extend context correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-green"
>
cool
COOL
</span>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-geekblue"
>
teacher
TEACHER
</span>
</td>
<td

20
components/table/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -14018,14 +14018,14 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-green"
>
nice
NICE
</span>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-geekblue"
>
developer
DEVELOPER
</span>
</td>
<td
@ -14081,9 +14081,9 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-volcano"
>
loser
LOSER
</span>
</td>
<td
@ -14139,14 +14139,14 @@ exports[`renders components/table/demo/jsx.tsx correctly 1`] = `
class="ant-table-cell"
>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-green"
>
cool
COOL
</span>
<span
class="ant-tag ant-tag-blue"
class="ant-tag ant-tag-geekblue"
>
teacher
TEACHER
</span>
</td>
<td

16
components/table/demo/jsx.tsx
View File

@ -53,11 +53,17 @@ const App: React.FC = () => (
key="tags"
render={(tags: string[]) => (
<>
{tags.map((tag) => (
<Tag color="blue" key={tag}>
{tag}
</Tag>
))}
{tags.map((tag) => {
let color = tag.length > 5 ? 'geekblue' : 'green';
if (tag === 'loser') {
color = 'volcano';
}
return (
<Tag color={color} key={tag}>
{tag.toUpperCase()}
</Tag>
);
})}
</>
)}
/>

196
components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -6,100 +6,96 @@ Array [
style="margin-bottom: 16px;"
>
<div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
<span
style="display: inline-block;"
>
<span
style="display: inline-block;"
class="ant-tag"
>
Tag 1
<span
class="ant-tag"
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
Tag 1
<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"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</span>
</span>
<span
style="display: inline-block;"
>
<span
style="display: inline-block;"
class="ant-tag"
>
Tag 2
<span
class="ant-tag"
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
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"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</span>
</span>
<span
style="display: inline-block;"
>
<span
style="display: inline-block;"
class="ant-tag"
>
Tag 3
<span
class="ant-tag"
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
Tag 3
<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"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</span>
</div>
</span>
</div>
</div>,
<span
@ -136,14 +132,12 @@ Array [
exports[`renders components/tag/demo/animation.tsx extend context correctly 2`] = `[]`;
exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
Array [
<span
class="ant-tag"
>
Tag 1
</span>
</span>,
<span
class="ant-tag"
>
@ -152,7 +146,7 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
>
Link
</a>
</span>
</span>,
<span
class="ant-tag"
>
@ -178,7 +172,7 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
/>
</svg>
</span>
</span>
</span>,
<span
class="ant-tag"
>
@ -207,8 +201,8 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 1`] = `
</svg>
</span>
</span>
</span>
</div>
</span>,
]
`;
exports[`renders components/tag/demo/basic.tsx extend context correctly 2`] = `[]`;
@ -216,7 +210,8 @@ exports[`renders components/tag/demo/basic.tsx extend context correctly 2`] = `[
exports[`renders components/tag/demo/borderless.tsx extend context correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-borderless"
@ -286,7 +281,8 @@ Array [
role="separator"
/>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-processing ant-tag-borderless"
@ -374,7 +370,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
style="background-color: rgb(245, 245, 245); padding: 16px;"
>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-borderless"
@ -444,7 +441,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
role="separator"
/>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-magenta ant-tag-borderless"
@ -509,7 +507,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx extend context correct
exports[`renders components/tag/demo/checkable.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-align-center ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap ant-flex-align-center"
style="gap: 4px 0;"
>
<span>
Categories:
@ -552,7 +551,8 @@ Array [
</span>
</div>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-magenta"
@ -621,7 +621,8 @@ Array [
</span>
</div>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-has-color"
@ -655,7 +656,8 @@ exports[`renders components/tag/demo/colorful.tsx extend context correctly 2`] =
exports[`renders components/tag/demo/colorful-inverse.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-magenta-inverse"
@ -719,7 +721,8 @@ exports[`renders components/tag/demo/colorful-inverse.tsx extend context correct
exports[`renders components/tag/demo/control.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag"
@ -824,7 +827,8 @@ exports[`renders components/tag/demo/control.tsx extend context correctly 2`] =
exports[`renders components/tag/demo/customize.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag"
@ -873,7 +877,8 @@ exports[`renders components/tag/demo/customize.tsx extend context correctly 2`]
exports[`renders components/tag/demo/draggable.tsx extend context correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag"
@ -916,7 +921,8 @@ exports[`renders components/tag/demo/draggable.tsx extend context correctly 2`]
exports[`renders components/tag/demo/icon.tsx extend context correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-has-color"
@ -1044,7 +1050,8 @@ Array [
</span>
</div>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-success"
@ -1083,7 +1090,8 @@ Array [
</span>
</div>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap: 4px 0;"
>
<span
class="ant-tag ant-tag-success"

196
components/tag/__tests__/__snapshots__/demo.test.ts.snap
View File

@ -6,100 +6,96 @@ Array [
style="margin-bottom:16px"
>
<div>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
<span
style="display:inline-block"
>
<span
style="display:inline-block"
class="ant-tag"
>
Tag 1
<span
class="ant-tag"
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
Tag 1
<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"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</span>
</span>
<span
style="display:inline-block"
>
<span
style="display:inline-block"
class="ant-tag"
>
Tag 2
<span
class="ant-tag"
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
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"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</span>
</span>
<span
style="display:inline-block"
>
<span
style="display:inline-block"
class="ant-tag"
>
Tag 3
<span
class="ant-tag"
aria-label="close"
class="anticon anticon-close ant-tag-close-icon"
role="img"
tabindex="-1"
>
Tag 3
<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"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<svg
aria-hidden="true"
data-icon="close"
fill="currentColor"
fill-rule="evenodd"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
<path
d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
/>
</svg>
</span>
</span>
</div>
</span>
</div>
</div>,
<span
@ -134,14 +130,12 @@ Array [
`;
exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
>
Array [
<span
class="ant-tag"
>
Tag 1
</span>
</span>,
<span
class="ant-tag"
>
@ -150,7 +144,7 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
>
Link
</a>
</span>
</span>,
<span
class="ant-tag"
>
@ -176,7 +170,7 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
/>
</svg>
</span>
</span>
</span>,
<span
class="ant-tag"
>
@ -205,14 +199,15 @@ exports[`renders components/tag/demo/basic.tsx correctly 1`] = `
</svg>
</span>
</span>
</span>
</div>
</span>,
]
`;
exports[`renders components/tag/demo/borderless.tsx correctly 1`] = `
Array [
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-borderless"
@ -282,7 +277,8 @@ Array [
role="separator"
/>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-processing ant-tag-borderless"
@ -368,7 +364,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
style="background-color:#f5f5f5;padding:16px"
>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-borderless"
@ -438,7 +435,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
role="separator"
/>
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-magenta ant-tag-borderless"
@ -501,7 +499,8 @@ exports[`renders components/tag/demo/borderlessLayout.tsx correctly 1`] = `
exports[`renders components/tag/demo/checkable.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-align-center ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap ant-flex-align-center"
style="gap:4px 0"
>
<span>
Categories:
@ -542,7 +541,8 @@ Array [
</span>
</div>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-magenta"
@ -611,7 +611,8 @@ Array [
</span>
</div>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-has-color"
@ -643,7 +644,8 @@ Array [
exports[`renders components/tag/demo/colorful-inverse.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-magenta-inverse"
@ -705,7 +707,8 @@ exports[`renders components/tag/demo/colorful-inverse.tsx correctly 1`] = `
exports[`renders components/tag/demo/control.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag"
@ -808,7 +811,8 @@ exports[`renders components/tag/demo/control.tsx correctly 1`] = `
exports[`renders components/tag/demo/customize.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag"
@ -854,7 +858,8 @@ exports[`renders components/tag/demo/customize.tsx correctly 1`] = `
exports[`renders components/tag/demo/draggable.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag"
@ -879,7 +884,8 @@ exports[`renders components/tag/demo/draggable.tsx correctly 1`] = `
exports[`renders components/tag/demo/icon.tsx correctly 1`] = `
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-has-color"
@ -1005,7 +1011,8 @@ Array [
</span>
</div>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-success"
@ -1044,7 +1051,8 @@ Array [
</span>
</div>,
<div
class="ant-flex ant-flex-wrap-wrap ant-flex-gap-small"
class="ant-flex ant-flex-wrap-wrap"
style="gap:4px 0"
>
<span
class="ant-tag ant-tag-success"

6
components/tag/demo/animation.tsx
View File

@ -1,7 +1,7 @@
import React, { useEffect, useRef, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import type { InputRef } from 'antd';
import { Flex, Input, Tag, theme } from 'antd';
import { Input, Tag, theme } from 'antd';
import { TweenOneGroup } from 'rc-tween-one';
const App: React.FC = () => {
@ -73,9 +73,7 @@ const App: React.FC = () => {
}
}}
>
<Flex gap="small" wrap="wrap">
{tagChild}
</Flex>
{tagChild}
</TweenOneGroup>
</div>
{inputVisible ? (

6
components/tag/demo/basic.tsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import { CloseCircleOutlined } from '@ant-design/icons';
import { Flex, Tag } from 'antd';
import { Tag } from 'antd';
const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
e.preventDefault();
@ -8,7 +8,7 @@ const preventDefault = (e: React.MouseEvent<HTMLElement>) => {
};
const App: React.FC = () => (
<Flex gap="small" wrap="wrap">
<>
<Tag>Tag 1</Tag>
<Tag>
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
@ -19,7 +19,7 @@ const App: React.FC = () => (
<Tag closeIcon={<CloseCircleOutlined />} onClose={console.log}>
Tag 2
</Tag>
</Flex>
</>
);
export default App;

4
components/tag/demo/borderless.tsx
View File

@ -3,7 +3,7 @@ import { Divider, Flex, Tag } from 'antd';
const App: React.FC = () => (
<>
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable>
@ -14,7 +14,7 @@ const App: React.FC = () => (
</Tag>
</Flex>
<Divider />
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag bordered={false} color="processing">
processing
</Tag>

4
components/tag/demo/borderlessLayout.tsx
View File

@ -5,7 +5,7 @@ const App: React.FC = () => {
const { token } = theme.useToken();
return (
<div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}>
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag bordered={false}>Tag 1</Tag>
<Tag bordered={false}>Tag 2</Tag>
<Tag bordered={false} closable>
@ -16,7 +16,7 @@ const App: React.FC = () => {
</Tag>
</Flex>
<Divider />
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag bordered={false} color="magenta">
magenta
</Tag>

2
components/tag/demo/checkable.tsx
View File

@ -14,7 +14,7 @@ const App: React.FC = () => {
};
return (
<Flex gap="small" wrap="wrap" align="center">
<Flex gap="4px 0" wrap="wrap" align="center">
<span>Categories:</span>
{tagsData.map<React.ReactNode>((tag) => (
<Tag.CheckableTag

2
components/tag/demo/colorful-inverse.tsx
View File

@ -2,7 +2,7 @@ import React from 'react';
import { Flex, Tag } from 'antd';
const App: React.FC = () => (
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag color="magenta-inverse">magenta</Tag>
<Tag color="red-inverse">red</Tag>
<Tag color="volcano-inverse">volcano</Tag>

4
components/tag/demo/colorful.tsx
View File

@ -4,7 +4,7 @@ import { Divider, Flex, Tag } from 'antd';
const App: React.FC = () => (
<>
<Divider orientation="left">Presets</Divider>
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag color="magenta">magenta</Tag>
<Tag color="red">red</Tag>
<Tag color="volcano">volcano</Tag>
@ -18,7 +18,7 @@ const App: React.FC = () => (
<Tag color="purple">purple</Tag>
</Flex>
<Divider orientation="left">Custom</Divider>
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag color="#f50">#f50</Tag>
<Tag color="#2db7f5">#2db7f5</Tag>
<Tag color="#87d068">#87d068</Tag>

2
components/tag/demo/component-token.tsx
View File

@ -6,7 +6,7 @@ const App: React.FC = () => (
<ConfigProvider
theme={{ components: { Tag: { defaultBg: '#f9f0ff', defaultColor: '#4b34d3' } } }}
>
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag>
<a href="https://github.com/ant-design/ant-design/issues/1862">Link</a>
</Tag>

2
components/tag/demo/control.tsx
View File

@ -71,7 +71,7 @@ const App: React.FC = () => {
};
return (
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
{tags.map<React.ReactNode>((tag, index) => {
if (editInputIndex === index) {
return (

2
components/tag/demo/customize.tsx
View File

@ -3,7 +3,7 @@ import { CloseCircleOutlined } from '@ant-design/icons';
import { Flex, Tag } from 'antd';
const App: React.FC = () => (
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag closable closeIcon="关 闭">
Tag1
</Tag>

2
components/tag/demo/draggable.tsx
View File

@ -68,7 +68,7 @@ const App: React.FC = () => {
return (
<DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>
<SortableContext items={items} strategy={horizontalListSortingStrategy}>
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
{items.map<React.ReactNode>((item) => (
<DraggableTag tag={item} key={item.id} />
))}

2
components/tag/demo/icon.tsx
View File

@ -8,7 +8,7 @@ import {
import { Flex, Tag } from 'antd';
const App: React.FC = () => (
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag icon={<TwitterOutlined />} color="#55acee">
Twitter
</Tag>

4
components/tag/demo/status.tsx
View File

@ -12,7 +12,7 @@ import { Divider, Flex, Tag } from 'antd';
const App: React.FC = () => (
<>
<Divider orientation="left">Without icon</Divider>
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag color="success">success</Tag>
<Tag color="processing">processing</Tag>
<Tag color="error">error</Tag>
@ -20,7 +20,7 @@ const App: React.FC = () => (
<Tag color="default">default</Tag>
</Flex>
<Divider orientation="left">With icon</Divider>
<Flex gap="small" wrap="wrap">
<Flex gap="4px 0" wrap="wrap">
<Tag icon={<CheckCircleOutlined />} color="success">
success
</Tag>

2
components/tag/style/index.ts
View File

@ -40,6 +40,8 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => {
...resetComponent(token),
display: 'inline-block',
height: 'auto',
// https://github.com/ant-design/ant-design/pull/47504
marginInlineEnd: token.marginXS,
paddingInline,
fontSize: token.tagFontSize,
lineHeight: token.tagLineHeight,

6
components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -2197,11 +2197,11 @@ Array [
</div>
</div>,
<div
aria-label="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
aria-label="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
title="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
>
To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
</div>,
]
`;

6
components/typography/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -1687,11 +1687,11 @@ Array [
/>
</div>,
<div
aria-label="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
aria-label="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life"
class="ant-typography ant-typography-ellipsis ant-typography-single-line"
title="To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
title="To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare"
>
To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life
To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life
<!-- -->
--William Shakespeare
</div>,

2
components/typography/demo/suffix.tsx
View File

@ -7,7 +7,7 @@ const App: React.FC = () => {
const [rows, setRows] = useState(1);
const article =
"To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";
"To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life";
return (
<>

6
docs/blog/virtual-table.zh-CN.md
View File

@ -55,7 +55,7 @@ antd 的 Table 底层使用了 `rc-table` 组件，我们的虚拟滚动功能
但是在测试时，我们发现一个奇怪的现象。表格在首次、再次渲染时，会有非常大的卡顿。在进行断点时，它来自于 `useFlattenRecords` hooks。而测试的代码本身并没有使用可展开树的功能，于是我们对其进行了排查。发现在 `useFlattenRecords` 中，存在大量的 GC 操作。而这些操作是由于一段不起眼的代码引起的：
```tsx
// Fake code. Not used in real word
// Fake code. Not used in real world
function flatten<T extends { children?: T[] }>(data: T[] = []) {
let tmpList: T[] = [];
@ -71,7 +71,7 @@ function flatten<T extends { children?: T[] }>(data: T[] = []) {
在遍历过程中，虽然 `children` 为空只会进入一次递归。但是在循环每个 Record 时都会创建一次临时的空数组。但是当 `dataSource` 数据巨大时，它们会不断触发 GC 清理这些临时数组。因而我们通过改造添加逻辑以避免不必要的消耗：
```tsx
// Fake code. Not used in real word
// Fake code. Not used in real world
function flatten<T extends { children?: T[] }>(data: T[] = [], list: T[] = []) {
for (let i = 0; i < data.length; i += 1) {
const record = data[i];
@ -132,7 +132,7 @@ const Demo = () => {
`rc-virtual-list` 提供了 `extraRender` 方法，它会提供当前虚拟滚动中所渲染的行号。我们只需要对这个范围内的 Record 执行一次 `onCell` 获取每个 `cell` 的 `rowSpan` 和 `colSpan` 信息。既可以知道当前行是否存在对外的 `rowSpan` 依赖：
```tsx
// Fake code. Not used in real word
// Fake code. Not used in real world
const extraRender = ({ start, end }) => {
// Start record
const startRecord = flattenData[start];

28
package.json
View File

@ -1,6 +1,6 @@
{
"name": "antd",
"version": "5.14.2",
"version": "5.15.1",
"description": "An enterprise-class UI design language and React components implementation",
"keywords": [
"ant",
@ -135,7 +135,7 @@
"rc-dialog": "~9.4.0",
"rc-drawer": "~7.1.0",
"rc-dropdown": "~4.1.0",
"rc-field-form": "~1.42.0",
"rc-field-form": "~1.42.1",
"rc-image": "~7.6.0",
"rc-input": "~1.4.3",
"rc-input-number": "~9.0.0",
@ -144,12 +144,12 @@
"rc-motion": "^2.9.0",
"rc-notification": "~5.4.0",
"rc-pagination": "~4.0.4",
"rc-picker": "~4.2.0",
"rc-picker": "~4.2.1",
"rc-progress": "~3.5.1",
"rc-rate": "~2.12.0",
"rc-resize-observer": "^1.4.0",
"rc-segmented": "~2.3.0",
"rc-select": "~14.12.0",
"rc-select": "~14.12.1",
"rc-slider": "~10.5.0",
"rc-steps": "~6.0.1",
"rc-switch": "~4.1.0",
@ -160,7 +160,7 @@
"rc-tree": "~5.8.5",
"rc-tree-select": "~5.18.0",
"rc-upload": "~4.5.2",
"rc-util": "^5.38.2",
"rc-util": "^5.39.1",
"scroll-into-view-if-needed": "^3.1.0",
"throttle-debounce": "^5.0.0"
},
@ -201,7 +201,7 @@
"@types/jsdom": "^21.1.6",
"@types/lodash": "^4.14.202",
"@types/minimist": "^1.2.5",
"@types/node": "^20.11.24",
"@types/node": "^20.11.25",
"@types/nprogress": "^0.2.3",
"@types/pixelmatch": "^5.2.6",
"@types/pngjs": "^6.0.4",
@ -210,15 +210,15 @@
"@types/qs": "^6.9.12",
"@types/react": "18.2.60",
"@types/react-copy-to-clipboard": "^5.0.7",
"@types/react-dom": "^18.2.19",
"@types/react-dom": "^18.2.21",
"@types/react-highlight-words": "^0.16.7",
"@types/react-resizable": "^3.0.7",
"@types/semver": "^7.5.8",
"@types/tar": "^6.1.11",
"@types/throttle-debounce": "^5.0.2",
"@types/warning": "^3.0.3",
"@typescript-eslint/eslint-plugin": "^7.1.0",
"@typescript-eslint/parser": "^7.1.0",
"@typescript-eslint/eslint-plugin": "^7.1.1",
"@typescript-eslint/parser": "^7.1.1",
"ali-oss": "^6.20.0",
"antd-img-crop": "^4.21.0",
"antd-style": "^3.6.1",
@ -243,7 +243,7 @@
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-lodash": "^7.4.0",
"eslint-plugin-markdown": "^3.0.1",
"eslint-plugin-react": "^7.33.2",
"eslint-plugin-react": "^7.34.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-unicorn": "^51.0.1",
"fast-glob": "^3.3.2",
@ -287,8 +287,8 @@
"pretty-format": "^29.7.0",
"prismjs": "^1.29.0",
"progress": "^2.0.3",
"puppeteer": "^22.3.0",
"qs": "^6.11.2",
"puppeteer": "^22.4.0",
"qs": "^6.12.0",
"rc-footer": "^0.6.8",
"rc-tween-one": "^3.0.6",
"rc-virtual-list": "^3.11.4",
@ -324,9 +324,9 @@
"sylvanas": "^0.6.1",
"tar": "^6.2.0",
"tar-fs": "^3.0.5",
"terser": "^5.28.1",
"terser": "^5.29.1",
"tsx": "^4.7.1",
"typedoc": "^0.25.9",
"typedoc": "^0.25.11",
"typescript": "~5.3.3",
"vanilla-jsoneditor": "^0.22.0",
"vanilla-tilt": "^1.8.1",