Compare commits

...

24 Commits

Author SHA1 Message Date
afc163
20f8a9a9ed chore: bump version to 6.2.3 (#56813)
* chore: bump version to 6.2.3

* docs: update AGENTS.md with comprehensive development guidelines

* Update CHANGELOG.zh-CN.md

Co-authored-by: lijianan <574980606@qq.com>
Signed-off-by: afc163 <afc163@gmail.com>

* Update CHANGELOG.en-US.md

Signed-off-by: afc163 <afc163@gmail.com>

* Update CHANGELOG.zh-CN.md

Signed-off-by: afc163 <afc163@gmail.com>

---------

Signed-off-by: afc163 <afc163@gmail.com>
Co-authored-by: lijianan <574980606@qq.com>
2026-02-02 14:57:45 +08:00
dependabot[bot]
f20a3d6fba chore: bump eslint-plugin-react-refresh from 0.4.26 to 0.5.0 (#56828)
Bumps [eslint-plugin-react-refresh](https://github.com/ArnaudBarre/eslint-plugin-react-refresh) from 0.4.26 to 0.5.0.
- [Release notes](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/releases)
- [Changelog](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/blob/main/CHANGELOG.md)
- [Commits](https://github.com/ArnaudBarre/eslint-plugin-react-refresh/compare/v0.4.26...v0.5.0)

---
updated-dependencies:
- dependency-name: eslint-plugin-react-refresh
  dependency-version: 0.5.0
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
2026-02-02 09:15:08 +08:00
lijianan
191db91774 site(a11y): apply prefers-reduced-motion handling for transitions (#56823)
* site(a11y): apply prefers-reduced-motion handling for transitions

* site(a11y): apply prefers-reduced-motion handling for transitions
2026-02-01 17:52:13 +08:00
renovate[bot]
a28f8aa863 chore(deps): update dependency @types/react to v19.2.9 (#56819)
* chore(deps): update dependency @types/react to v19.2.10

* improve type

* update

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: thinkasany <480968828@qq.com>
2026-02-01 10:26:09 +08:00
renovate[bot]
4ab4a826c9 chore(deps): update dawidd6/action-download-artifact action to v13 (#56820)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2026-02-01 09:44:45 +08:00
Rain120
ffbf6e3024 docs: style issues in site design tabs (#56810)
Co-authored-by: 遇见同学 <1875694521@qq.com>
2026-01-30 17:27:22 +08:00
高艳兵
4b9085624b chore: merge duplicate debug demos (#56809)
* chore(Button): remove debug demo

* feat: update snap
2026-01-30 15:34:38 +08:00
ug
7dd385bb43 fix(Button): defaultBg, defaultColor, defaultHoverColor and defaultActiveColor token does not work (#56238)
* fix(Button): token does not work

* Update components/button/style/variant.ts

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: ug <62086147+ug-hero@users.noreply.github.com>

* update

* fix

* Update components/button/demo/component-token.tsx

Co-authored-by:  高艳兵 <66234749+QDyanbing@users.noreply.github.com>
Signed-off-by: thinkasany <480968828@qq.com>

* format

* Update components/button/style/variant.ts

Co-authored-by:  高艳兵 <66234749+QDyanbing@users.noreply.github.com>
Signed-off-by: thinkasany <480968828@qq.com>

* Update components/button/style/variant.ts

Co-authored-by:  高艳兵 <66234749+QDyanbing@users.noreply.github.com>
Signed-off-by: thinkasany <480968828@qq.com>

---------

Signed-off-by: ug <62086147+ug-hero@users.noreply.github.com>
Signed-off-by: thinkasany <480968828@qq.com>
Co-authored-by: liuqiang <qiang.liu@xinjifamily.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: thinkasany <480968828@qq.com>
Co-authored-by: 高艳兵 <66234749+QDyanbing@users.noreply.github.com>
2026-01-30 14:44:38 +08:00
二货爱吃白萝卜
44a4161dd8 fix: Textarea ref miss nativeElement (#56803)
* fix: Textarea miss nativeElement

* chore: update snap

---------

Co-authored-by: 遇见同学 <1875694521@qq.com>
2026-01-30 09:56:00 +08:00
github-actions[bot]
10e43e1405 chore: upgrade deps (#56805)
Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>
2026-01-30 07:00:34 +08:00
高艳兵
93fb6c35e2 chore(test): merge semantic tests into jest and drop dedicated config (#56795)
* chore(test): merge semantic tests into jest and drop dedicated config

* chore(test): simplify SKIP_SEMANTIC env check
2026-01-29 15:30:07 +08:00
thinkasany
3073cf188d docs: Why can't the Segmented be disabled? (#56786)
* docs: add Why can't Segmented be disabled

* Update components/form/index.en-US.md

Signed-off-by: thinkasany <480968828@qq.com>

* Update components/form/index.en-US.md

Signed-off-by: thinkasany <480968828@qq.com>

* Apply suggestion from @meet-student

Signed-off-by: 遇见同学 <1875694521@qq.com>

* Apply suggestion from @meet-student

Signed-off-by: 遇见同学 <1875694521@qq.com>

* docs: update faq

* Update components/form/__tests__/index.test.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

---------

Signed-off-by: thinkasany <480968828@qq.com>
Signed-off-by: 遇见同学 <1875694521@qq.com>
Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>
Co-authored-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2026-01-29 12:09:01 +08:00
Yingtao Mo
f78e800519 fix(Flex): default align when use orientation (#55950)
Co-authored-by: thinkasany <480968828@qq.com>
2026-01-29 11:14:33 +08:00
thinkasany
ebc17059de chore(test): turn off no-nested-component-definitions (#56793)
Co-authored-by: 遇见同学 <1875694521@qq.com>
2026-01-29 10:39:51 +08:00
github-actions[bot]
a93b4122ff chore: upgrade deps (#56791)
Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>
2026-01-29 08:09:09 +08:00
unknowntocka
ead5840d90 fix(Button): default button token (#56719)
* fix(Button): default button token

* feat(Button): add default button token with custom colors in debug demo

---------

Co-authored-by: lijianan <574980606@qq.com>
2026-01-28 17:57:18 +08:00
高艳兵
166e9c88e5 fix(Typography): lower link selector specificity (#56759)
* fix(Typography): lower link selector specificity and add danger debug demo

* fix(Typography): scope link styles and raise type color priority

* chore: update snap

* chore: update snap

* fix(Typography): scope link styles and ensure type colors win

---------

Co-authored-by: 遇见同学 <1875694521@qq.com>
2026-01-28 16:01:51 +08:00
Junbeom Park
b2d14dd478 fix(ColorPicker): restrict HEX input to valid hex characters (#56752)
* fix(color-picker): restrict HEX input to valid hex characters

* test(ColorPicker): add test invalid input like ff_00_gg

* Update components/color-picker/__tests__/components.test.tsx

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>

---------

Signed-off-by: 二货爱吃白萝卜 <smith3816@gmail.com>
Co-authored-by: 二货爱吃白萝卜 <smith3816@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
2026-01-28 15:38:43 +08:00
github-actions[bot]
076c84b181 chore: upgrade deps (#56773)
Co-authored-by: afc163 <507615+afc163@users.noreply.github.com>
2026-01-28 08:49:49 +08:00
thinkasany
50a3f30a72 chore: lock @types/react 19.2.7 (#56770) 2026-01-27 22:53:59 +08:00
afc163
5629062ba1 docs: remove community link from resources docs (#56760)
Co-authored-by: 遇见同学 <1875694521@qq.com>
2026-01-27 20:35:29 +08:00
遇见同学
63e4d29760 docs: fix token table title style issue (#56766) 2026-01-27 18:30:58 +08:00
遇见同学
94fe19feef chore: fix ci update snap (#56761)
* chore: fix ci update snap

* up

* chore up
2026-01-27 17:24:56 +08:00
Anton Cherniavskyi
9df0d7656f fix(Button): solid variant borders inside Space Compact (#56486)
* fix(Button): solid variant borders inside Space Compact

* refactor(Button): use genCssVar hook to generate CSS variables

* chore: adjust logic of compact

* test: update demo

---------

Co-authored-by: 遇见同学 <1875694521@qq.com>
Co-authored-by: afc163 <afc163@gmail.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>
2026-01-27 14:29:34 +08:00
91 changed files with 1009 additions and 1014 deletions

View File

@@ -1,6 +1,15 @@
// FIXME: workaround for avoid searchbar styles be extracted to async chunk
@import 'dumi/theme-default/slots/SearchBar/index.less';
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation: none;
transition: none;
}
}
.demo-logo {
width: 120px;
min-width: 120px;

View File

@@ -1,7 +1,7 @@
import React, { useMemo, useState } from 'react';
import { LinkOutlined, QuestionCircleOutlined, RightOutlined } from '@ant-design/icons';
import { ConfigProvider, Flex, Popover, Table, Typography } from 'antd';
import { createStaticStyles, css, useTheme } from 'antd-style';
import { createStyles, css, useTheme } from 'antd-style';
import { getDesignToken } from 'antd-token-previewer';
import tokenMeta from 'antd/es/version/token-meta.json';
import tokenData from 'antd/es/version/token.json';
@@ -53,7 +53,7 @@ const locales = {
},
};
const styles = createStaticStyles(({ cssVar }) => ({
const useStyle = createStyles(({ cssVar }) => ({
tableTitle: css`
cursor: pointer;
position: relative;
@@ -104,6 +104,8 @@ const SubTokenTable: React.FC<SubTokenTableProps> = (props) => {
const [open, setOpen] = useState<boolean>(defaultOpen ?? process.env.NODE_ENV !== 'production');
const { styles } = useStyle();
if (!tokens.length) {
return null;
}

View File

@@ -27,7 +27,7 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
position: relative;
border: 1px solid ${cssVar.colorBorderSecondary};
border-radius: ${cssVar.borderRadius};
padding: ${cssVar.paddingMD} ${cssVar.paddingLG} ${cssVar.paddingMD * 2};
padding: ${cssVar.paddingMD} ${cssVar.paddingLG} calc(${cssVar.paddingMD} * 2);
margin-bottom: ${cssVar.marginLG};
`,
title: css`
@@ -67,7 +67,7 @@ const styles = createStaticStyles(({ cssVar, css }) => ({
`,
tip: css`
color: ${cssVar.colorTextTertiary};
margin-top: ${cssVar.marginMD * 2};
margin-top: calc(${cssVar.marginMD} * 2);
`,
}));

View File

@@ -63,7 +63,7 @@ jobs:
steps:
# We need get PR id first
- name: download pr artifact
uses: dawidd6/action-download-artifact@v12
uses: dawidd6/action-download-artifact@v13
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
@@ -83,7 +83,7 @@ jobs:
# Download site artifact
- name: download site artifact
if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
uses: dawidd6/action-download-artifact@v12
uses: dawidd6/action-download-artifact@v13
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}

View File

@@ -34,6 +34,7 @@ jobs:
shard: [1/2, 2/2]
env:
REACT: ${{ matrix.react }}
SKIP_SEMANTIC: '1'
runs-on: blacksmith-4vcpu-ubuntu-2404
steps:
- uses: actions/checkout@v6
@@ -52,15 +53,6 @@ jobs:
- run: ut
- run: ut test:node
test-semantic:
name: test-semantic
runs-on: blacksmith-4vcpu-ubuntu-2404
steps:
- uses: actions/checkout@v6
- uses: utooland/setup-utoo@v1
- run: ut
- run: ut test:semantic
test-react-latest:
name: test-react-latest
strategy:

View File

@@ -70,7 +70,7 @@ jobs:
# We need get persist-index first
- name: download image snapshot artifact
uses: dawidd6/action-download-artifact@v12
uses: dawidd6/action-download-artifact@v13
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
@@ -92,7 +92,7 @@ jobs:
- name: download report artifact
id: download_report
if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
uses: dawidd6/action-download-artifact@v12
uses: dawidd6/action-download-artifact@v13
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}

View File

@@ -67,7 +67,7 @@ jobs:
# We need get persist key first
- name: Download Visual Regression Ref
uses: dawidd6/action-download-artifact@v12
uses: dawidd6/action-download-artifact@v13
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}
@@ -81,7 +81,7 @@ jobs:
- name: Download Visual-Regression Artifact
if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
uses: dawidd6/action-download-artifact@v12
uses: dawidd6/action-download-artifact@v13
with:
workflow: ${{ github.event.workflow_run.workflow_id }}
run_id: ${{ github.event.workflow_run.id }}

View File

@@ -34,6 +34,10 @@ function getTestRegex(libDir) {
return '.*\\.test\\.(j|t)sx?$';
}
const shouldIgnoreSemantic =
['dist', 'lib', 'es', 'dist-min'].includes(process.env.LIB_DIR) ||
['1', 'true'].includes(process.env.SKIP_SEMANTIC);
module.exports = {
verbose: true,
testEnvironment: 'jsdom',
@@ -54,7 +58,7 @@ module.exports = {
'node',
'image.test.js',
'image.test.ts',
'demo-semantic.test',
...(shouldIgnoreSemantic ? ['demo-semantic.test'] : []),
],
transform: {
'\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',

View File

@@ -1,30 +0,0 @@
const { moduleNameMapper, transformIgnorePatterns } = require('./.jest');
// jest config for semantic demo snapshots
// Semantic tests don't need to run in React 18, 19, lib, es, dist repeatedly
module.exports = {
verbose: true,
testEnvironment: 'jsdom',
setupFiles: ['./tests/setup.ts', 'jest-canvas-mock'],
setupFilesAfterEnv: ['./tests/setupAfterEnv.ts'],
moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'md'],
modulePathIgnorePatterns: ['/_site/'],
moduleNameMapper,
testPathIgnorePatterns: ['/node_modules/'],
transform: {
'\\.tsx?$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.(m?)js$': './node_modules/@ant-design/tools/lib/jest/codePreprocessor',
'\\.md$': './node_modules/@ant-design/tools/lib/jest/demoPreprocessor',
},
testRegex: 'demo-semantic\\.test\\.(j|t)sx?$',
transformIgnorePatterns,
globals: {
'ts-jest': {
tsConfig: './tsconfig.test.json',
},
},
testEnvironmentOptions: {
url: 'http://localhost',
},
testTimeout: 10000,
};

645
AGENTS.md
View File

@@ -1,92 +1,166 @@
# AGENTS.md
> Ant Design 项目开发指南 - 为 AI 编程助手提供项目上下文和开发规范
## 📑 目录
- [项目背景](#项目背景)
- [快速开始](#快速开始)
- [代码规范](#代码规范)
- [基本编码规范](#基本编码规范)
- [命名规范](#命名规范)
- [TypeScript 规范](#typescript-规范)
- [样式规范](#样式规范)
- [开发指南](#开发指南)
- [测试指南](#测试指南)
- [演示代码规范](#演示代码规范)
- [国际化规范](#国际化规范)
- [文档和 Changelog](#文档和-changelog-规范)
- [Git 和 Pull Request](#git-和-pull-request-规范)
- [质量保证](#质量保证)
- [工具链和环境](#工具链和环境)
---
## 项目背景
这是 ant-design/ant-designantd的源代码仓库是一个 React 组件库,发布为 npm 包 antd。
这是 [ant-design/ant-design](https://github.com/ant-design/ant-design)antd的源代码仓库是一个 React 组件库,发布为 npm 包 `antd`
### 核心特性
- 使用 TypeScript 和 React 开发
- 兼容 React 18 ~ 19 版本
- 组件库设计精美,功能完善,广泛应用于企业级中后台产品
- 遵循 Ant Design 设计规范
- 支持国际化
- 支持国际化i18n
- 支持主题定制和暗色模式
- 支持 RTL从右到左布局
## 安装和设置
---
## 快速开始
### 开发环境要求
- Node.js 版本 >= 16
- 推荐使用 npm 或 yarn
- Chrome 80+ 浏览器兼容性
- **Node.js**: >= 16
- **包管理器**: npm 或 utoo
- **浏览器兼容性**: Chrome 80+
- **编辑器**: VS Code推荐或其他支持 TypeScript 的编辑器
### 安装依赖
```bash
npm install
# 或
yarn install
utoo install
```
### 开发命令
### 常用开发命令
```bash
npm start # 启动开发服务器
npm run build # 构建项目
npm test # 运行测试
npm run lint # 代码检查
# 启动开发服务器(访问 http://127.0.0.1:8001
npm start
# 编译 TypeScript 代码到 lib 和 es 目录
npm run compile
# 构建 UMD 格式的构建产物
npm run build
# 运行所有测试
npm test
# 监听模式运行测试
npm test -- --watch
# 生成测试覆盖率报告
npm run test:coverage
# 代码检查(包括 TypeScript、ESLint、Biome、Markdown、Changelog
npm run lint
# 格式化代码
npm run format
# 生成 Changelog交互式
npm run changelog
# 清理构建产物
npm run clean
```
## 代码风格指南
### 项目结构
```
ant-design/
├── components/ # 组件源代码
│ └── [component]/ # 单个组件目录
│ ├── demo/ # 演示代码
│ ├── style/ # 样式文件
│ ├── index.tsx # 组件入口
│ └── index.zh-CN.md # 组件文档
├── scripts/ # 构建和工具脚本
├── tests/ # 测试文件
├── CHANGELOG.zh-CN.md # 中文更新日志
├── CHANGELOG.en-US.md # 英文更新日志
└── package.json # 项目配置
```
---
## 代码规范
### 基本编码规范
- 使用 TypeScript 和 React 书写
- 使用函数式组件和 hooks避免类组件
- 使用提前返回early returns提高代码可读性
- 避免引入新依赖,严控打包体积
- 兼容 Chrome 80+ 浏览器
- 支持服务端渲染
- 保持向下兼容,避免 breaking change
- 组件名使用大驼峰PascalCase
- 属性名使用小驼峰camelCase
- 合理使用 React.memouseMemo 和 useCallback 优化性能
### 命名规范
Antd 命名要求使用**完整名称**而非缩写。
- 使用 TypeScript 和 React 书写
- 使用函数式组件和 Hooks**避免类组件**
- 使用提前返回early returns提高代码可读性
- 避免引入新依赖,严控打包体积
- 兼容 Chrome 80+ 浏览器
- 支持服务端渲染SSR
- 保持向下兼容,避免 breaking change
- 组件名使用大驼峰PascalCase,如 `Button``DatePicker`
- 属性名使用小驼峰camelCase,如 `onClick``defaultValue`
- 合理使用 `React.memo``useMemo``useCallback` 优化性能
#### Props 命名
- 初始化属性:`default` + `PropName`
- 强制渲染:`forceRender`
- 子组件强制渲染:`force` + `Sub Component Name` + `Render`
- 子组件渲染:`Sub Component Name` + `Render`
- 数据源:`dataSource`
- 面板开启:使用 `open`,避免使用 `visible`
- 显示相关:`show` + `PropName`
- 功能性:`PropName` + `able`
- 禁用:`disabled`
- 额外内容:`extra`
- 图标:`icon`
- 触发器:`trigger`
- 类名:`className`
| 用途 | 命名规则 | 示例 |
| -------------- | --------------------------------------- | ----------------------------- |
| 初始化属性 | `default` + `PropName` | `defaultValue``defaultOpen` |
| 强制渲染 | `forceRender` | `forceRender` |
| 子组件强制渲染 | `force` + `SubComponentName` + `Render` | `forcePanelRender` |
| 子组件渲染 | `SubComponentName` + `Render` | `titleRender``footerRender` |
| 数据源 | `dataSource` | `dataSource` |
| 面板开启 | 使用 `open`,避免使用 `visible` | `open``defaultOpen` |
| 显示相关 | `show` + `PropName` | `showSearch``showHeader` |
| 功能性 | `PropName` + `able` | `disabled``readable` |
| 禁用 | `disabled` | `disabled` |
| 额外内容 | `extra` | `extra` |
| 图标 | `icon` | `icon``prefixIcon` |
| 触发器 | `trigger` | `trigger` |
| 类名 | `className` | `className` |
#### 事件命名
- 触发事件:`on` + `EventName`
- 子组件事件:`on` + `SubComponentName` + `EventName`
- 前置事件:`before` + `EventName`
- 后置事件:`after` + `EventName`
- 连续动作完成:`on` + `EventName` + `Complete`
| 类型 | 命名规则 | 示例 |
| ------------ | --------------------------------------- | --------------------- |
| 触发事件 | `on` + `EventName` | `onClick``onChange` |
| 子组件事件 | `on` + `SubComponentName` + `EventName` | `onPanelChange` |
| 前置事件 | `before` + `EventName` | `beforeUpload` |
| 后置事件 | `after` + `EventName` | `afterClose` |
| 连续动作完成 | `on` + `EventName` + `Complete` | `onUploadComplete` |
#### 组件引用
#### 组件引用Ref
组件应提供 `ref` 属性,结构如下:
```tsx
ComponentRef {
interface ComponentRef {
nativeElement: HTMLElement;
focus: VoidFunction;
// 其他函数
blur: VoidFunction;
// 其他方法...
}
```
@@ -94,54 +168,99 @@ ComponentRef {
格式:`variant (optional)` + `semantic part` + `semantic part variant (optional)` + `css property` + `size/disabled (optional)`
示例:
- `buttonPrimaryColor` - Button 主色
- `inputPaddingBlock` - Input 垂直内边距
- `menuItemActiveBg` - Menu 激活项背景色
### API 文档规范
| Property | Description | Type | Default |
| --------- | ----------- | ---------------------------- | ------------ |
| htmlType | xxx | string | `button ` |
| type | xxx | `horizontal ` \| `vertical ` | `horizontal` |
| disabled | xxx | boolean | false |
| minLength | xxx | number | 0 |
| style | xxx | CSSProperties | - |
#### API 表格格式
| Property | Description | Type | Default |
| --------- | --------------- | ------------------------------------------------------ | --------- |
| htmlType | Button 原生类型 | string | `button` |
| type | 按钮类型 | `primary` \| `default` \| `dashed` \| `link` \| `text` | `default` |
| disabled | 是否禁用 | boolean | false |
| minLength | 最小长度 | number | 0 |
| style | 自定义样式 | CSSProperties | - |
#### API 文档要求
- 字符串类型的默认值使用反引号
- 布尔类型直接使用 true 或 false
- 数字类型直接使用数字
- 函数类型使用箭头函数表达式
- 无默认值使用 `-`
- 描述首字母大写,结尾无句号
- API 按字母顺序排列
- 字符串类型的默认值使用反引号包裹,如 `` `button` ``
- 布尔类型直接使用 `true``false`
- 数字类型直接使用数字,如 `0``100`
- 函数类型使用箭头函数表达式,如 `(e: Event) => void`
- 无默认值使用 `-`
- 描述首字母大写,结尾无句号
- API 按字母顺序排列
---
## TypeScript 规范
### 基本原则
- 所有组件和函数必须提供准确的类型定义
- 避免使用 `any` 类型,尽可能精确地定义类型
- 使用接口而非类型别名定义对象结构
- 导出所有公共接口类型,方便用户使用
- 严格遵循 TypeScript 类型设计原则,确保类型安全
- 确保编译无任何类型错误或警告
- 所有组件和函数必须提供准确的类型定义
- 避免使用 `any` 类型,尽可能精确地定义类型
- 使用接口interface而非类型别名type定义对象结构
- 导出所有公共接口类型,方便用户使用
- 严格遵循 TypeScript 类型设计原则,确保类型安全
- 确保编译无任何类型错误或警告
### 组件类型定义
- 组件 props 应使用 interface 定义,便于扩展
- 组件 props 接口命名应为 `ComponentNameProps`
- 为组件状态定义专门的接口,如 `ComponentNameState`
- 复杂的数据结构应拆分为多个接口定义
- 组件的 ref 类型应该明确定义,使用 `React.ForwardRefRenderFunction`
- 所有回调函数类型应明确定义参数和返回值
```tsx
// ✅ 正确:使用 interface 定义 Props
interface ButtonProps {
type?: 'primary' | 'default' | 'dashed';
onClick?: (e: React.MouseEvent) => void;
}
// ❌ 错误:避免使用 type 定义对象结构
type ButtonProps = {
type?: 'primary' | 'default';
};
// ✅ 正确:组件 Props 接口命名
interface ComponentNameProps {
// ...
}
// ✅ 正确:组件状态接口命名
interface ComponentNameState {
// ...
}
// ✅ 正确:使用 ForwardRefRenderFunction 定义 ref
const Component = React.forwardRef<ComponentRef, ComponentProps>((props, ref) => {
// ...
});
```
### 类型使用最佳实践
- 适当使用泛型增强类型灵活性
- 使用交叉类型(&)合并多个类型
- 使用字面量联合类型定义有限的选项集合
- 避免使用 `enum`,优先使用联合类型和 `as const`
- 尽可能依赖 TypeScript 的类型推断
- 只在必要时使用类型断言(as
- 适当使用泛型增强类型灵活性
- 使用交叉类型(&)合并多个类型
- 使用字面量联合类型定义有限的选项集合
- 避免使用 `enum`,优先使用联合类型和 `as const`
- 尽可能依赖 TypeScript 的类型推断
- 只在必要时使用类型断言(`as`
```tsx
// ✅ 推荐:使用联合类型和 as const
const ButtonTypes = ['primary', 'default', 'dashed'] as const;
type ButtonType = (typeof ButtonTypes)[number];
// ❌ 不推荐:使用 enum
enum ButtonType {
Primary = 'primary',
Default = 'default',
}
```
---
## 样式规范
@@ -165,17 +284,17 @@ ComponentRef {
### 响应式和主题支持
- 组件应支持在不同屏幕尺寸下良好展示
- 所有组件必须支持暗色模式
- 组件应支持从右到左RTL的阅读方向
- 使用 CSS 逻辑属性(如 margin-inline-start替代方向性属性如 margin-left
- 支持通过 ConfigProvider 进行主题定制
- 组件应支持在不同屏幕尺寸下良好展示
- 所有组件必须支持暗色模式
- 组件应支持从右到左RTL的阅读方向
- 使用 CSS 逻辑属性(如 `margin-inline-start`)替代方向性属性(如 `margin-left`
- 支持通过 `ConfigProvider` 进行主题定制
### 动画效果
- 使用 CSS 过渡实现简单动画
- 复杂动画使用 @rc-component/motion 实现
- 尊重用户的减少动画设置prefers-reduced-motion
- 复杂动画使用 `@rc-component/motion` 实现
- 尊重用户的减少动画设置(`prefers-reduced-motion`
- 动画时长和缓动函数应保持一致性
- 动画不应干扰用户的操作和阅读体验
@@ -188,67 +307,108 @@ ComponentRef {
- 支持用户放大页面至 200% 时的正常布局
- 避免使用会导致闪烁的动画
## 测试指南
---
### 测试框架和工具
## 开发指南
### 测试指南
#### 测试框架和工具
- 使用 Jest 和 React Testing Library 编写单元测试
- 对 UI 组件使用快照测试 (Snapshot Testing)
- 测试覆盖率要求 100%
- 测试文件放在 **tests** 目录命名格式为index.test.tsx 或 xxx.test.tsx
- 对 UI 组件使用快照测试Snapshot Testing
- 测试覆盖率要求 **100%**
- 测试文件放在 `tests/` 目录,命名格式为:`index.test.tsx``xxx.test.tsx`
### 运行测试
#### 运行测试
```bash
npm test # 运行所有测试
npm test -- --watch # 监听模式
npm run test:coverage # 生成覆盖率报告
npm test -- --watch # 监听模式
npm run test:coverage # 生成覆盖率报告
npm run test:image # UI 快照测试(需要 Docker
```
## 演示代码规范
#### 测试最佳实践
### Demo 基本要求
- ✅ 测试用户行为而非实现细节
- ✅ 使用有意义的测试描述
- ✅ 每个测试用例应该独立,不依赖其他测试
- ✅ 测试边界情况和错误处理
- demo 代码尽可能简洁
- 避免冗余代码,方便用户复制到项目直接使用
- 每个 demo 聚焦展示一个功能点
- 提供中英文两个版本的说明
- 遵循展示优先原则,确保视觉效果良好
- 展示组件的主要使用场景
- 按照由简到繁的顺序排列 demo
### 演示代码规范
### 文件组织
#### Demo 基本要求
- ✅ demo 代码尽可能简洁
- ✅ 避免冗余代码,方便用户复制到项目直接使用
- ✅ 每个 demo 聚焦展示一个功能点
- ✅ 提供中英文两个版本的说明
- ✅ 遵循展示优先原则,确保视觉效果良好
- ✅ 展示组件的主要使用场景
- ✅ 按照由简到繁的顺序排列 demo
#### 文件组织
- 每个组件演示包含 `.md`(说明文档)和 `.tsx`(实际代码)两个文件
- 位置:组件目录下的 `demo` 子目录,如 `components/button/demo/`
- 命名:短横线连接的小写英文单词,如 `basic.tsx``custom-filter.tsx`
- 文件名应简洁地描述示例内容
### TSX 代码规范
#### TSX 代码规范
```tsx
// ✅ 正确的导入顺序
import React, { useState } from 'react';
import { Button, Space } from 'antd';
import type { ButtonProps } from 'antd';
import './custom.css';
// ✅ 使用函数式组件和 Hooks
const Demo: React.FC = () => {
const [loading, setLoading] = useState(false);
const handleClick = () => {
setLoading(true);
// ...
};
return (
<Space>
<Button loading={loading} onClick={handleClick}>
Click me
</Button>
</Space>
);
};
export default Demo;
```
**规范要点**
- 导入顺序React → 依赖库 → 组件库 → 自定义组件 → 类型 → 样式
- 类型:为复杂数据定义清晰接口,避免 `any`
- 使用函数式组件和 Hooks
- 2空格缩进箭头函数驼峰命名
- 2 空格缩进,箭头函数,驼峰命名
- 优先使用 antd 内置组件,减少外部依赖
- 性能优化:适当使用 `useMemo`/`useCallback`,清理副作用
## 国际化规范
### 国际化规范
### 类型定义
#### 类型定义
antd 的本地化配置的类型定义的入口文件是 `components/locale/index.tsx`,当需要添加新的本地化配置时,需要检查对应组件或全局配置的类型是否存在,如果不存在,则需要增加相应的类型描述。
### 本地化配置
#### 本地化配置
- 本地化配置文件命名规则:`*_*.ts`,如:`zh_CN.ts`
- 通常在为 antd 添加修改某一项本地化配置时,如无特殊说明,需要同时修改所有语言的本地化配置
- 本地化配置文件命名规则:`*_*.ts`,如:`zh_CN.ts``en_US.ts`
- 通常在为 antd 添加修改某一项本地化配置时,如无特殊说明,需要同时修改所有语言的本地化配置
- 本地化配置的内容通常是纯字符串
- 带有 `${}` 的变量将在实际使用的地方被实时替换成对应的变量内容
### 使用本地化
使用 `components/locale/index.tsx` 文件中导出的 `useLocale` 获取全局上下文中配置的本地化:
#### 使用本地化
```tsx
import { useLocale } from '../locale';
@@ -256,7 +416,7 @@ import enUS from '../locale/en_US';
export function TestComp(props) {
const { locale: propLocale } = props;
const [contextLocale] = useLocale('TestComp', enUs);
const [contextLocale] = useLocale('TestComp', enUS);
const locale = { ...contextLocale, ...propLocale };
@@ -264,162 +424,105 @@ export function TestComp(props) {
}
```
---
## 文档和 Changelog 规范
### 基本要求
- 提供中英文两个版本
- 新的属性需要声明可用的版本号
- 属性命名符合 antd 的 API 命名规则
- 提供中英文两个版本
- 新的属性需要声明可用的版本号
- 属性命名符合 antd 的 API 命名规则
### 文档锚点 ID 规范
- 针对 Markdown 文件中的标题(# 到 ######)自动生成锚点 ID
- 所有中文标题H1-H6必须手动指定一个简洁、有意义的英文锚点
- 格式: ## 中文标题 {#english-anchor-id}
- 英文标题通常不需要手动指定锚点,但如果需要,可以使用相同的格式
- 锚点 ID 必须符合正则表达式 `^[a-zA-Z][\w-:\.]*$`, 且长度不应超过 32 个字符
- 用于演示demo且包含 `-demo-` 的 id 不受前面的长度限制
- FAQ 章节下的所有标题锚点必须以 `faq-` 作为前缀
- 为确保在不同语言间切换时锚点依然有效,同一问题的中英文锚点应保持完全一致
- 例如:
- 中文标题:`### 如何使用组件 {#how-to-use-component}`
- 英文标题:`### How to Use the Component {#how-to-use-component}`
- 所有中文标题H1-H6必须手动指定一个简洁、有意义的英文锚点
- 格式: `## 中文标题 {#english-anchor-id}`
- 英文标题通常不需要手动指定锚点,但如果需要,可以使用相同的格式
- 锚点 ID 必须符合正则表达式 `^[a-zA-Z][\w-:\.]*$`且长度不应超过 32 个字符
- 用于演示demo且包含 `-demo-` 的 id 不受前面的长度限制
- FAQ 章节下的所有标题锚点必须以 `faq-` 作为前缀
- 为确保在不同语言间切换时锚点依然有效,同一问题的中英文锚点应保持完全一致
**示例**
- 中文标题:`### 如何使用组件 {#how-to-use-component}`
- 英文标题:`### How to Use the Component {#how-to-use-component}`
### Changelog 规范
- 在 CHANGELOG.en-US.md 和 CHANGELOG.zh-CN.md 书写每个版本的变更
- 对用户使用上无感知的改动建议不要提及,保持 CHANGELOG 的内容有效性
- 用面向开发者的角度和叙述方式撰写 CHANGELOG
- 描述用户的原始问题,而非解决方式
- 尽量给出原始的 PR 链接,社区提交的 PR 改动加上提交者的链接
#### 🎯 核心原则
### 🎯 核心原则
1. **文件位置**:在 `CHANGELOG.en-US.md``CHANGELOG.zh-CN.md` 书写每个版本的变更
- 有效性过滤:忽略用户无感知的改动(如文档网站改进、纯测试用例更新、内部重构、工具链优化等),除非其对开发者有直接影响。
- 开发者视角:描述“用户的原始问题”和“对开发者的影响”,而非“具体的解决代码”。
- ❌ 修复 Typography 的 DOM 结构问题。
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构,修复了内容空格丢失的问题。
- 版本与命名:
- 新增属性必须符合 antd API 命名规则。
- 新增属性建议在描述中暗示或明确声明可用版本号。
- 双语输出:每次处理必须同时提供 **中文版****英文版**
2. **有效性过滤**:忽略用户无感知的改动(如文档网站改进、纯测试用例更新、内部重构、工具链优化等),除非其对开发者有直接影响。保持 CHANGELOG 的内容有效性。
### 🎨 格式与结构规范
3. **开发者视角**:用面向开发者的角度和叙述方式撰写 CHANGELOG描述"用户的原始问题"和"对开发者的影响",而非"具体的解决代码"。
- ❌ 修复 Typography 的 DOM 结构问题。
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构,修复了内容空格丢失的问题。
- 单条条目结构:`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
- 组件名\*需加粗,后接英文冒号和空格。
- 分组逻辑:
- 多项改动:同一组件有 2 条及以上改动时,使用 `- 组件名` 作为分类标题(不加粗),具体条目缩进排列。
- 单项改动:直接编写单行条目,不设分类标题。
- 文本细节:
- 代码包裹所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 ` ` 包裹。
- 中英空格:中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**
4. **版本与命名**
- 新增属性必须符合 antd API 命名规则
- 新增属性建议在描述中暗示或明确声明可用版本号
### 🏷️ Emoji 规范 (严格执行)
5. **双语输出**:每次处理必须同时提供 **中文版****英文版**
- 🐞 修复 Bug
- 💄 样式更新或 token 更新
- 🆕 新增特性 / 新增属性
- 🔥 极其值得关注的新增特性
- 🇺🇸🇨🇳🇬🇧 国际化改动
- 📖 📝 文档或网站改进
- ✅ 新增或更新测试用例
- 🛎 更新警告/提示信息
- ⌨️ ♿ 可访问性增强
- 🗑 废弃或移除
- 🛠 重构或工具链优化
- ⚡️ 性能提升
6. **PR 链接**:尽量给出原始的 PR 链接,社区提交的 PR 改动加上提交者的链接
---
#### 🎨 格式与结构规范
### 💡 输出示例参考
```md
#### 中文
- 🐞 Drawer: 修复 Drawer.PurePanel 无法响应鼠标交互的问题。[#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
- 🐞 Select: 修复 Select options 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
#### English
- 🐞 Drawer: Fix Drawer.PurePanel failing to respond to mouse interactions. [#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
- 🐞 Select: Fix Select `options` props leaking to DOM elements and causing React unknown-prop warnings. [#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
```
### 提示词
```md
### 🤖 角色定义
你是一位 Ant Design 核心维护者,负责编写 `CHANGELOG.zh-CN.md``CHANGELOG.en-US.md`。你需要将原始 PR 列表转化为专业、简洁、面向开发者的发布日志。
### 🎯 核心原则
1. **有效性过滤**:忽略用户无感知的改动(如文档网站改进、纯测试用例更新、内部重构、工具链优化等),除非其对开发者有直接影响。
2. **开发者视角**:描述“用户的原始问题”和“对开发者的影响”,而非“具体的解决代码”。
- ❌ 修复 Typography 的 DOM 结构问题。
- ✅ Typography: 💄 重构并简化了 Typography 的 DOM 结构,修复了内容空格丢失的问题。
3. **版本与命名**
- 新增属性必须符合 antd API 命名规则。
- 新增属性建议在描述中暗示或明确声明可用版本号。
### 🎨 格式与结构规范
1. **单条条目结构**`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
- 组件名**无需加粗**,后接英文冒号和空格。
1. **单条条目结构**`组件名称: 图标 描述内容 [#PR号](链接) [@贡献者]`
- 组件名**无需加粗**,后接英文冒号和空格
2. **分组逻辑**
- **项改动**同一组件有 2 条及以上改动时,使用 `- 组件名` 作为分类标题(不加粗),具体条目缩进排列。
- **单项改动**:直接编写单行条目,不设分类标题。
- **多项改动**:同一组件有 2 条及以上改动时,使用 `- 组件名` 作为分类标题(不加粗),具体条目缩进排列
- **项改动**直接编写单行条目,不设分类标题
3. **文本细节**
- **代码包裹**所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 `` ` `` 包裹
- **中英空格**:中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**
- **代码包裹**所有属性名、方法名、API、`role`/`aria` 属性必须使用反引号 ` ` 包裹。
- **中英空格**:中文与英文、数字、链接、`@` 用户名之间必须保留 **一个空格**
#### 🏷️ Emoji 规范(严格执行)
### 🏷️ Emoji 规范 (严格执行)
| Emoji | 用途 |
| ------ | ---------------------- |
| 🐞 | 修复 Bug |
| 💄 | 样式更新或 token 更新 |
| 🆕 | 新增特性 / 新增属性 |
| 🔥 | 极其值得关注的新增特性 |
| 🇺🇸🇨🇳🇬🇧 | 国际化改动 |
| 📖 📝 | 文档或网站改进 |
| ✅ | 新增或更新测试用例 |
| 🛎 | 更新警告/提示信息 |
| ⌨️ ♿ | 可访问性增强 |
| 🗑 | 废弃或移除 |
| 🛠 | 重构或工具链优化 |
| ⚡️ | 性能提升 |
- 🐞 修复 Bug
- 💄 样式更新或 token 更新
- 🆕 新增特性 / 新增属性
- 🔥 极其值得关注的新增特性
- 🇺🇸🇨🇳🇬🇧 国际化改动
- 📖 📝 文档或网站改进
- ✅ 新增或更新测试用例
- 🛎 更新警告/提示信息
- ⌨️ ♿ 可访问性增强
- 🗑 废弃或移除
- 🛠 重构或工具链优化
- ⚡️ 性能提升
#### 💡 输出示例参考
---
### 🏗️ 任务执行:请处理以下 PR 数据
#### 💡 输出示例参考:
**中文版:**
**中文版**
```markdown
- 🐞 Drawer: 修复 Drawer.PurePanel 无法响应鼠标交互的问题。[#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
- 🐞 Select: 修复 Select options 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
- 🐞 Select: 修复 Select `options` 属性透传至原生 DOM 导致 React 未知属性警告的问题。[#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
```
**English Version:**
**English Version**
```markdown
- 🐞 Drawer: Fix Drawer.PurePanel failing to respond to mouse interactions. [#56387](https://github.com/ant-design/ant-design/pull/56387) [@wanpan11](https://github.com/wanpan11)
- 🐞 Select: Fix Select `options` props leaking to DOM elements and causing React unknown-prop warnings. [#56341](https://github.com/ant-design/ant-design/pull/56341) [@afc163](https://github.com/afc163)
```
---
## Git 和 Pull Request 规范
### 分支管理
禁止直接提交到以下保护分支:
**禁止直接提交到以下保护分支**
- `master`:主分支,用于发布
- `feature`:特性分支,用于开发新版本
@@ -435,18 +538,20 @@ export function TestComp(props) {
### 分支命名规范
- 功能开发:`feat/description-of-feature`
- 问题修复:`fix/issue-number-or-description`
- 文档更新:`docs/what-is-changed`
- 代码重构:`refactor/what-is-changed`
- 样式修改:`style/what-is-changed`
- 测试相关:`test/what-is-changed`
- 构建相关:`build/what-is-changed`
- 持续集成:`ci/what-is-changed`
- 性能优化:`perf/what-is-changed`
- 依赖升级:`deps/package-name-version`
| 类型 | 格式 | 示例 |
| -------- | --------------------------------- | ----------------------------- |
| 功能开发 | `feat/description-of-feature` | `feat/add-dark-mode` |
| 问题修复 | `fix/issue-number-or-description` | `fix/button-style-issue` |
| 文档更新 | `docs/what-is-changed` | `docs/update-api-docs` |
| 代码重构 | `refactor/what-is-changed` | `refactor/button-component` |
| 样式修改 | `style/what-is-changed` | `style/fix-button-padding` |
| 测试相关 | `test/what-is-changed` | `test/add-button-tests` |
| 构建相关 | `build/what-is-changed` | `build/update-webpack-config` |
| 持续集成 | `ci/what-is-changed` | `ci/add-github-actions` |
| 性能优化 | `perf/what-is-changed` | `perf/optimize-render` |
| 依赖升级 | `deps/package-name-version` | `deps/upgrade-react-19` |
### 分支命名注意事项
**分支命名注意事项**
1. 使用小写字母
2. 使用连字符(-)分隔单词
@@ -460,8 +565,9 @@ export function TestComp(props) {
- PR 标题始终使用英文
- 遵循格式:`类型: 简短描述`
- 例如:`fix: fix button style issues in Safari browser`
- 例如:`feat: add dark mode support`
- 示例:
- `fix: fix button style issues in Safari browser`
- `feat: add dark mode support`
#### PR 内容
@@ -473,8 +579,8 @@ export function TestComp(props) {
提交 PR 时请使用项目中提供的模板:
- 英文模板推荐PULL_REQUEST_TEMPLATE.md
- 中文模板PULL_REQUEST_TEMPLATE_CN.md
- 英文模板(推荐):`PULL_REQUEST_TEMPLATE.md`
- 中文模板:`PULL_REQUEST_TEMPLATE_CN.md`
#### PR 提交注意事项
@@ -496,7 +602,7 @@ export function TestComp(props) {
4. **工具标注**
- 如果是用 Cursor 提交的代码,请在 PR body 末尾进行标注:`> Submitted by Cursor`
### PR 改动类型
#### PR 改动类型
- 🆕 新特性提交
- 🐞 Bug 修复
@@ -508,31 +614,35 @@ export function TestComp(props) {
- ⚡️ 性能优化
- 🌐 国际化改进
---
## 质量保证
### 代码质量要求
- 确保代码运行正常,无控制台错误
- 适配常见浏览器
- 避免过时 API及时更新到新推荐用法
- 测试覆盖率达到 100%
- 通过所有 ESLint 和 TypeScript 检查
- 确保代码运行正常,无控制台错误
- 适配常见浏览器
- 避免过时 API及时更新到新推荐用法
- 测试覆盖率达到 100%
- 通过所有 ESLint 和 TypeScript 检查
### 性能要求
- 避免不必要的重新渲染
- 合理使用 React.memouseMemo 和 useCallback
- 样式计算应当高效,避免重复计算
- 图片和资源应当优化
- 支持 Tree Shaking
- 避免不必要的重新渲染
- 合理使用 `React.memo``useMemo``useCallback`
- 样式计算应当高效,避免重复计算
- 图片和资源应当优化
- 支持 Tree Shaking
### 兼容性要求
- 支持 React 18 ~ 19 版本
- 兼容 Chrome 80+ 浏览器
- 支持服务端渲染
- 保持向下兼容,避免 breaking change
- 支持 TypeScript 4.0+
- 支持 React 18 ~ 19 版本
- 兼容 Chrome 80+ 浏览器
- 支持服务端渲染SSR
- 保持向下兼容,避免 breaking change
- 支持 TypeScript 4.0+
---
## 工具链和环境
@@ -557,12 +667,11 @@ export function TestComp(props) {
- 自动化发布流程
- 支持多环境部署
---
## 参考资料
- [API Naming Rules](https://github.com/ant-design/ant-design/wiki/API-Naming-rules)
- [#16048](https://github.com/ant-design/ant-design/issues/16048) - Current listing api & Chinese version
- [#25066](https://github.com/ant-design/ant-design/issues/25066) - API standard in the document
## 特别说明
如果使用 AI 编程助手(如 Cursor进行开发请在提交 PR 时在末尾标注:`> Submitted by Cursor`
- [Development Guide](https://github.com/ant-design/ant-design/wiki/Development)

View File

@@ -15,6 +15,19 @@ tag: vVERSION
---
## 6.2.3
`2026-02-01`
- Button
- 🐞 Fix Button `defaultBg`, `defaultColor`, `defaultHoverColor` and `defaultActiveColor` tokens not taking effect. [#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
- 🐞 Fix Button default tokens not taking effect. [#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
- 🐞 Fix Button `variant="solid"` borders displaying incorrectly inside Space.Compact. [#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
- 🐞 Fix Input.TextArea ref missing `nativeElement` property. [#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
- 🐞 Fix Flex default `align` not taking effect when using `orientation`. [#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
- 🐞 Fix Typography link selector specificity being too low causing styles to be overridden. [#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
- 🐞 Fix ColorPicker HEX input allowing invalid characters. [#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
## 6.2.2
`2026-01-26`

View File

@@ -15,6 +15,19 @@ tag: vVERSION
---
## 6.2.3
`2026-02-02`
- Button
- 🐞 修复 Button `defaultBg``defaultColor``defaultHoverColor``defaultActiveColor` token 不生效的问题。[#56238](https://github.com/ant-design/ant-design/pull/56238) [@ug-hero](https://github.com/ug-hero)
- 🐞 修复 Button 默认 token 不生效的问题。[#56719](https://github.com/ant-design/ant-design/pull/56719) [@unknowntocka](https://github.com/unknowntocka)
- 🐞 修复 Button `variant="solid"` 在 Space.Compact 中边框显示异常的问题。[#56486](https://github.com/ant-design/ant-design/pull/56486) [@Pareder](https://github.com/Pareder)
- 🐞 修复 Input.TextArea ref 缺少 `nativeElement` 属性的问题。[#56803](https://github.com/ant-design/ant-design/pull/56803) [@smith3816](https://github.com/smith3816)
- 🐞 修复 Flex 使用 `orientation` 时默认 `align` 不生效的问题。[#55950](https://github.com/ant-design/ant-design/pull/55950) [@YingtaoMo](https://github.com/YingtaoMo)
- 🐞 修复 Typography 链接选择器特异性过低导致样式被覆盖的问题。[#56759](https://github.com/ant-design/ant-design/pull/56759) [@QDyanbing](https://github.com/QDyanbing)
- 🐞 修复 ColorPicker HEX 输入框可以输入无效字符的问题。[#56752](https://github.com/ant-design/ant-design/pull/56752) [@treephesians](https://github.com/treephesians)
## 6.2.2
`2026-01-26`

View File

@@ -968,18 +968,6 @@ exports[`renders components/button/demo/debug-color-variant.tsx extend context c
</span>
</button>
</div>
<div
class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
type="button"
>
<span>
type="text" (Default)
</span>
</button>
</div>
</div>
`;

View File

@@ -952,18 +952,6 @@ exports[`renders components/button/demo/debug-color-variant.tsx correctly 1`] =
</span>
</button>
</div>
<div
class="ant-flex css-var-test-id ant-flex-wrap-wrap ant-flex-gap-small"
>
<button
class="ant-btn css-var-test-id ant-btn-text ant-btn-color-default ant-btn-variant-text"
type="button"
>
<span>
type="text" (Default)
</span>
</button>
</div>
</div>
`;

View File

@@ -103,6 +103,29 @@ const App: React.FC = () => (
</Button>
</Flex>
</ConfigProvider>
<ConfigProvider
theme={{
components: {
Button: {
defaultBg: 'red',
defaultColor: 'blue',
defaultHoverColor: 'green',
defaultActiveColor: 'yellow',
textTextColor: 'purple',
textTextHoverColor: 'orange',
textTextActiveColor: 'pink',
textHoverBg: 'brown',
},
},
}}
>
<Flex gap="small" align="start">
<Button>Default Button</Button>
<Button type="dashed">Dashed Button</Button>
<Button type="text">Text Button</Button>
</Flex>
</ConfigProvider>
</Flex>
);

View File

@@ -114,22 +114,6 @@ const App: React.FC = () => {
<Button type="dashed">Dashed</Button>
</ConfigProvider>
</Flex>
<Flex gap="small" wrap>
<ConfigProvider
theme={{
components: {
Button: {
textTextColor: '#f60',
textTextHoverColor: '#722ed1',
textTextActiveColor: '#0f0',
textHoverBg: '#000',
},
},
}}
>
<Button type="text">type="text" (Default)</Button>
</ConfigProvider>
</Flex>
</Flex>
);
};

View File

@@ -5,38 +5,67 @@ import { genCompactItemStyle } from '../../style/compact-item';
import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical';
import type { GenerateStyle } from '../../theme/internal';
import { genSubStyleComponent } from '../../theme/internal';
import { genCssVar } from '../../theme/util/genStyleUtils';
import type { ButtonToken } from './token';
import { prepareComponentToken, prepareToken } from './token';
const genButtonCompactStyle: GenerateStyle<ButtonToken> = (token) => {
const { componentCls, colorPrimaryHover, lineWidth, calc } = token;
const { antCls, componentCls, lineWidth, calc, colorBgContainer } = token;
const solidSelector = `${componentCls}-variant-solid:not([disabled])`;
const insetOffset = calc(lineWidth).mul(-1).equal();
const getCompactBorderStyle = (vertical?: boolean) => {
const [varName, varRef] = genCssVar(antCls, 'btn');
const getCompactBorderStyle = (vertical?: boolean): CSSObject => {
const itemCls = `${componentCls}-compact${vertical ? '-vertical' : ''}-item`;
const selector = `${itemCls}${componentCls}-primary:not([disabled])`;
return {
// TODO: Border color transition should be not cover when has color.
[itemCls]: {
transition: `none`,
},
[varName('compact-connect-border-color')]: varRef('bg-color-hover'),
[`${selector} + ${selector}::before`]: {
position: 'absolute',
top: vertical ? insetOffset : 0,
insetInlineStart: vertical ? 0 : insetOffset,
backgroundColor: colorPrimaryHover,
content: '""',
width: vertical ? '100%' : lineWidth,
height: vertical ? lineWidth : '100%',
} as CSSObject,
[`&${solidSelector}`]: {
transition: `none`,
[`& + ${solidSelector}:before`]: [
{
position: 'absolute',
backgroundColor: varRef('compact-connect-border-color'),
content: '""',
},
vertical
? {
top: insetOffset,
insetInline: insetOffset,
height: lineWidth,
}
: {
insetBlock: insetOffset,
insetInlineStart: insetOffset,
width: lineWidth,
},
],
'&:hover:before': {
display: 'none',
},
},
},
};
};
// Special styles for Primary Button
return {
...getCompactBorderStyle(),
...getCompactBorderStyle(true),
};
// Special styles for solid Button
return [
getCompactBorderStyle(),
getCompactBorderStyle(true),
{
[`${solidSelector}${componentCls}-color-default`]: {
[varName('compact-connect-border-color')]:
`color-mix(in srgb, ${varRef('bg-color-hover')} 75%, ${colorBgContainer})`,
},
},
];
};
// ============================== Export ==============================

View File

@@ -218,9 +218,9 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
[varName('color-light-hover')]: token.colorFillSecondary,
[varName('color-light-active')]: token.colorFill,
[varName('text-color')]: token.colorText,
[varName('text-color-hover')]: token.defaultHoverBorderColor,
[varName('text-color-active')]: token.defaultActiveBorderColor,
[varName('text-color')]: token.defaultColor,
[varName('text-color-hover')]: token.defaultHoverColor,
[varName('text-color-active')]: token.defaultActiveColor,
[varName('shadow')]: token.defaultShadow,
[`&${componentCls}-variant-solid`]: {
@@ -235,7 +235,11 @@ const genVariantStyle: GenerateStyle<ButtonToken> = (token) => {
},
[`&${componentCls}-variant-outlined, &${componentCls}-variant-dashed`]: {
[varName('bg-color-hover')]: token.defaultHoverBg,
[varName('text-color')]: token.defaultColor,
[varName('text-color-hover')]: token.defaultHoverColor,
[varName('text-color-active')]: token.defaultActiveColor,
[varName('bg-color-container')]: token.defaultBg,
[varName('bg-color-hover')]: token.defaultHoverBg,
[varName('bg-color-active')]: token.defaultActiveBg,
},

View File

@@ -15,7 +15,6 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -431,7 +430,6 @@ exports[`renders components/calendar/demo/basic.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -1555,7 +1553,6 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -1971,7 +1968,6 @@ exports[`renders components/calendar/demo/card.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -3094,7 +3090,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -3510,7 +3505,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -4627,7 +4621,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -5043,7 +5036,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -6227,7 +6219,6 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -6683,7 +6674,6 @@ exports[`renders components/calendar/demo/customize-header.tsx extend context co
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -7772,7 +7762,6 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -8188,7 +8177,6 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -9722,7 +9710,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2017"
>
2017
@@ -10138,7 +10125,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Jan"
>
Jan
@@ -11264,7 +11250,6 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -11680,7 +11665,6 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -12797,7 +12781,6 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -13213,7 +13196,6 @@ exports[`renders components/calendar/demo/style-class.tsx extend context correct
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -14336,7 +14318,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -14752,7 +14733,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov
@@ -15930,7 +15910,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -16346,7 +16325,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov

View File

@@ -24,7 +24,6 @@ exports[`renders components/calendar/demo/_semantic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2016"
>
2016
@@ -74,7 +73,6 @@ exports[`renders components/calendar/demo/_semantic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Nov"
>
Nov

View File

@@ -15,7 +15,6 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -65,7 +64,6 @@ exports[`renders components/calendar/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -949,7 +947,6 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -999,7 +996,6 @@ exports[`renders components/calendar/demo/card.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -1882,7 +1878,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -1932,7 +1927,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -2811,7 +2805,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -2861,7 +2854,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -3805,7 +3797,6 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -3855,7 +3846,6 @@ exports[`renders components/calendar/demo/customize-header.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -4688,7 +4678,6 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -4738,7 +4727,6 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -6032,7 +6020,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2017"
>
2017
@@ -6082,7 +6069,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Jan"
>
Jan
@@ -6968,7 +6954,6 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -7018,7 +7003,6 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -7897,7 +7881,6 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -7947,7 +7930,6 @@ exports[`renders components/calendar/demo/style-class.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -8830,7 +8812,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -8880,7 +8861,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov
@@ -9820,7 +9800,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="2016"
>
2016
@@ -9870,7 +9849,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Nov"
>
Nov

View File

@@ -15,7 +15,6 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2019"
>
2019
@@ -65,7 +64,6 @@ exports[`Calendar Calendar MonthSelect should display correct label 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Jan"
>
Jan
@@ -946,7 +944,6 @@ exports[`Calendar Calendar should support locale 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2018年"
>
2018年
@@ -996,7 +993,6 @@ exports[`Calendar Calendar should support locale 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10月"
>
10月
@@ -1877,7 +1873,6 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -1927,7 +1922,6 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Sep"
>
Sep
@@ -2808,7 +2802,6 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -2858,7 +2851,6 @@ exports[`Calendar support Calendar.generateCalendar 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Jan"
>
Jan

View File

@@ -601,7 +601,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
>
<span>
Zhejiang /
@@ -880,7 +879,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake

View File

@@ -216,7 +216,6 @@ exports[`renders components/cascader/demo/custom-render.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
>
<span>
Zhejiang
@@ -320,7 +319,6 @@ exports[`renders components/cascader/demo/default-value.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake

View File

@@ -1165,7 +1165,6 @@ exports[`Cascader popup correctly with defaultValue RTL 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang / Hangzhou"
>
Zhejiang / Hangzhou
@@ -1454,7 +1453,6 @@ exports[`Cascader support controlled mode 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake

View File

@@ -1102,7 +1102,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="start"
>
start

View File

@@ -1090,7 +1090,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="start"
>
start

View File

@@ -144,7 +144,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -518,7 +517,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -897,7 +895,6 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -1268,7 +1265,6 @@ exports[`renders components/color-picker/demo/controlled.tsx extend context corr
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -1648,7 +1644,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -2000,7 +1995,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -2314,7 +2308,6 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -2700,7 +2693,6 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HSB"
>
HSB
@@ -3292,7 +3284,6 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="RGB"
>
RGB
@@ -3984,7 +3975,6 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -4409,7 +4399,6 @@ exports[`renders components/color-picker/demo/line-gradient.tsx extend context c
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -4810,7 +4799,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -5767,7 +5755,6 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -6145,7 +6132,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -6948,7 +6934,6 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -7334,7 +7319,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -7705,7 +7689,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -8076,7 +8059,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -8460,7 +8442,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -8836,7 +8817,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -9212,7 +9192,6 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -9590,7 +9569,6 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -9957,7 +9935,6 @@ exports[`renders components/color-picker/demo/style-class.tsx extend context cor
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -10350,7 +10327,6 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -10728,7 +10704,6 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -11123,7 +11098,6 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -11495,7 +11469,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -11869,7 +11842,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX

View File

@@ -148,7 +148,6 @@ exports[`renders components/color-picker/demo/_semantic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX

View File

@@ -147,7 +147,6 @@ exports[`ColorPicker Should panelRender work 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -421,7 +420,6 @@ exports[`ColorPicker Should panelRender work 2`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX

View File

@@ -149,9 +149,15 @@ describe('ColorPicker Components test', () => {
fireEvent.change(input, { target: { value: 'xyz' } });
// Verify input value has been updated but formatted as valid hex format
expect(input.getAttribute('value')).toEqual('xyz');
expect(input.getAttribute('value')).toEqual('');
// onChange should not be called because the input is invalid
// Simulate another invalid input
fireEvent.change(input, { target: { value: 'ff_00_gg' } });
// Verify input value is filtered
expect(input.getAttribute('value')).toEqual('ff00');
// onChange should not be called for invalid inputs
expect(onChange).toHaveBeenCalledTimes(1);
});
});

View File

@@ -3,7 +3,7 @@ import { Color as RcColor } from '@rc-component/color-picker';
import type { ColorGenInput, Colors } from './interface';
export const toHexFormat = (value?: string, alpha?: boolean) =>
value?.replace(/[^\w/]/g, '').slice(0, alpha ? 8 : 6) || '';
value?.replace(/[^0-9a-f]/gi, '').slice(0, alpha ? 8 : 6) || '';
export const getHex = (value?: string, alpha?: boolean) => (value ? toHexFormat(value, alpha) : '');

View File

@@ -1602,7 +1602,6 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -1652,7 +1651,6 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Sep"
>
Sep
@@ -2530,7 +2528,6 @@ exports[`ConfigProvider components Calendar configProvider 1`] = `
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -2874,7 +2871,6 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -2925,7 +2921,6 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Sep"
>
Sep
@@ -3806,7 +3801,6 @@ exports[`ConfigProvider components Calendar configProvider componentDisabled 1`]
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -4153,7 +4147,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -4203,7 +4196,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Sep"
>
Sep
@@ -5081,7 +5073,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize large 1
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -5425,7 +5416,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -5475,7 +5465,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Sep"
>
Sep
@@ -6353,7 +6342,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize middle
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -6697,7 +6685,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -6747,7 +6734,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Sep"
>
Sep
@@ -7625,7 +7611,6 @@ exports[`ConfigProvider components Calendar configProvider componentSize small 1
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -7969,7 +7954,6 @@ exports[`ConfigProvider components Calendar normal 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -8019,7 +8003,6 @@ exports[`ConfigProvider components Calendar normal 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Sep"
>
Sep
@@ -8897,7 +8880,6 @@ exports[`ConfigProvider components Calendar normal 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -9241,7 +9223,6 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -9291,7 +9272,6 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Sep"
>
Sep
@@ -10169,7 +10149,6 @@ exports[`ConfigProvider components Calendar prefixCls 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="2000"
>
2000
@@ -18395,7 +18374,6 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -18528,7 +18506,6 @@ exports[`ConfigProvider components Pagination configProvider 1`] = `
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -18666,7 +18643,6 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -18800,7 +18776,6 @@ exports[`ConfigProvider components Pagination configProvider componentDisabled 1
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -18939,7 +18914,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -19072,7 +19046,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -19210,7 +19183,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -19343,7 +19315,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize middl
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -19481,7 +19452,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -19614,7 +19584,6 @@ exports[`ConfigProvider components Pagination configProvider componentSize small
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -19752,7 +19721,6 @@ exports[`ConfigProvider components Pagination normal 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -19885,7 +19853,6 @@ exports[`ConfigProvider components Pagination normal 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -20023,7 +19990,6 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -20156,7 +20122,6 @@ exports[`ConfigProvider components Pagination prefixCls 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -23751,7 +23716,6 @@ exports[`ConfigProvider components Select configProvider 1`] = `
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Light"
>
Light
@@ -23807,7 +23771,6 @@ exports[`ConfigProvider components Select configProvider componentDisabled 1`] =
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Light"
>
Light
@@ -23861,7 +23824,6 @@ exports[`ConfigProvider components Select configProvider componentSize large 1`]
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Light"
>
Light
@@ -23917,7 +23879,6 @@ exports[`ConfigProvider components Select configProvider componentSize middle 1`
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Light"
>
Light
@@ -23973,7 +23934,6 @@ exports[`ConfigProvider components Select configProvider componentSize small 1`]
>
<div
class="config-select-content-value"
style="visibility: visible;"
title="Light"
>
Light
@@ -24029,7 +23989,6 @@ exports[`ConfigProvider components Select normal 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Light"
>
Light
@@ -24085,7 +24044,6 @@ exports[`ConfigProvider components Select prefixCls 1`] = `
>
<div
class="prefix-Select-content-value"
style="visibility: visible;"
title="Light"
>
Light

View File

@@ -309,7 +309,10 @@ export type FloatButtonGroupConfig = ComponentStyleConfig &
Pick<FloatButtonGroupProps, 'closeIcon' | 'classNames' | 'styles'>;
export type PaginationConfig = ComponentStyleConfig &
Pick<PaginationProps, 'showSizeChanger' | 'totalBoundaryShowSizeChanger' | 'classNames' | 'styles'>;
Pick<
PaginationProps,
'showSizeChanger' | 'totalBoundaryShowSizeChanger' | 'classNames' | 'styles'
>;
export type ProgressConfig = ComponentStyleConfig & Pick<ProgressProps, 'classNames' | 'styles'>;

View File

@@ -88094,7 +88094,6 @@ exports[`renders components/date-picker/demo/switchable.tsx extend context corre
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Time"
>
Time

View File

@@ -7670,7 +7670,6 @@ exports[`renders components/date-picker/demo/switchable.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Time"
>
Time

View File

@@ -93,7 +93,7 @@ exports[`renders components/drawer/demo/_semantic.tsx correctly 1`] = `
class="ant-drawer-footer semantic-mark-footer"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Footer
</a>

View File

@@ -7118,7 +7118,7 @@ exports[`renders components/dropdown/demo/render-panel.tsx extend context correc
exports[`renders components/dropdown/demo/selectable.tsx extend context correctly 1`] = `
Array [
<a
class="ant-typography ant-dropdown-trigger css-var-test-id"
class="ant-typography ant-typography-link ant-dropdown-trigger css-var-test-id"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"

View File

@@ -1262,7 +1262,7 @@ exports[`renders components/dropdown/demo/render-panel.tsx correctly 1`] = `
exports[`renders components/dropdown/demo/selectable.tsx correctly 1`] = `
<a
class="ant-typography ant-dropdown-trigger css-var-test-id"
class="ant-typography ant-typography-link ant-dropdown-trigger css-var-test-id"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small css-var-test-id"

View File

@@ -45,7 +45,7 @@ const Flex = React.forwardRef<HTMLElement, React.PropsWithChildren<FlexProps>>((
prefixCls,
hashId,
cssVarCls,
createFlexClassNames(prefixCls, props),
createFlexClassNames(prefixCls, { ...props, vertical: mergedVertical }),
{
[`${prefixCls}-rtl`]: ctxDirection === 'rtl',
[`${prefixCls}-gap-${gap}`]: isPresetSize(gap),

View File

@@ -93,7 +93,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -346,7 +345,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -2158,7 +2156,6 @@ exports[`renders components/form/demo/customized-form-controls.tsx extend contex
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="RMB"
>
RMB
@@ -5304,7 +5301,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -11354,7 +11350,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake
@@ -11554,7 +11549,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="+86"
>
+86
@@ -11796,7 +11790,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="$"
>
$
@@ -12077,7 +12070,6 @@ exports[`renders components/form/demo/register.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Male"
>
Male
@@ -24531,7 +24523,6 @@ exports[`renders components/form/demo/validate-other.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -29165,7 +29156,6 @@ exports[`renders components/form/demo/validate-static.tsx extend context correct
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Option 1"
>
Option 1

View File

@@ -93,7 +93,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -268,7 +267,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong"
>
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong
@@ -1666,7 +1664,6 @@ exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="RMB"
>
RMB
@@ -7659,7 +7656,6 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake
@@ -7771,7 +7767,6 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="+86"
>
+86
@@ -7935,7 +7930,6 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="$"
>
$
@@ -8126,7 +8120,6 @@ exports[`renders components/form/demo/register.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Male"
>
Male
@@ -12882,7 +12875,6 @@ exports[`renders components/form/demo/validate-static.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Option 1"
>
Option 1

View File

@@ -28,6 +28,7 @@ import Select from '../../select';
import Slider from '../../slider';
import Switch from '../../switch';
import Popover from '../../popover';
import Segmented from '../../segmented';
import TreeSelect from '../../tree-select';
import Upload from '../../upload';
import type { NamePath } from '../interface';
@@ -1378,6 +1379,20 @@ describe('Form', () => {
expect(container.firstChild).toMatchSnapshot();
});
// https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096
it('Segmented should not be disabled even Form is disabled', () => {
const { container } = render(
<Form disabled>
<Form.Item name="segmented">
<Segmented options={['Daily', 'Weekly', 'Monthly']} />
</Form.Item>
</Form>,
);
expect(container.querySelector('.ant-segmented')).not.toHaveClass(
'ant-segmented-disabled',
);
});
it('form.item should support layout', () => {
const App: React.FC = () => (
<Form layout="horizontal">

View File

@@ -578,6 +578,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
## FAQ
### Why can't Segmented be disabled by Form `disabled`? {#faq-segmented-cannot-disabled}
Segmented is designed as a data display component, not a form control component. Although it can be used as a form control similar to Radio, it was not designed for this purpose. Therefore, its behavior is more similar to the Tabs component and will not be disabled by Form's `disabled` prop. For related discussions, see [#54749](https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096).
### Why can't Switch, Checkbox bind data? {#faq-switch-checkbox-binding}
Form.Item default bind value to `value` prop, but Switch or Checkbox value prop is `checked`. You can use `valuePropName` to change bind value prop.

View File

@@ -577,6 +577,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
## FAQ
### Segmented 为什么不能被 Form `disabled` 禁用? {#faq-segmented-cannot-disabled}
Segmented 设计上为数据展示类组件,而非表单控件组件。虽然它可以作为类似 Radio 的表单控件使用,但并非为此设计。因而行为上更类似于 Tabs 组件,不会被 Form 的 `disabled` 所禁用。相关讨论参考 [#54749](https://github.com/ant-design/ant-design/pull/54749#issuecomment-3797737096)。
### Switch、Checkbox 为什么不能绑定数据? {#faq-switch-checkbox-binding}
Form.Item 默认绑定值属性到 `value` 上,而 Switch、Checkbox 等组件的值属性为 `checked`。你可以通过 `valuePropName` 来修改绑定的值属性。

View File

@@ -110,7 +110,6 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="+"
>
+
@@ -313,7 +312,6 @@ exports[`renders components/input-number/demo/addon.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="$"
>
$

View File

@@ -110,7 +110,6 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="+"
>
+
@@ -235,7 +234,6 @@ exports[`renders components/input-number/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="$"
>
$

View File

@@ -23,6 +23,7 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
// ========================== Ref ===========================
const inputRef = React.useRef<InputRef>(null);
React.useImperativeHandle(ref, () => inputRef.current!);
// ========================= Input ==========================
@@ -40,7 +41,7 @@ const OTPInput = React.forwardRef<InputRef, OTPInputProps>((props, ref) => {
});
};
const onInternalFocus = (e: React.FocusEvent<HTMLInputElement>) => {
const onInternalFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {
onFocus?.(e);
syncSelection();
};

View File

@@ -67,6 +67,7 @@ export interface TextAreaRef {
focus: (options?: InputFocusOptions) => void;
blur: () => void;
resizableTextArea?: RcTextAreaRef['resizableTextArea'];
nativeElement: HTMLElement | null;
}
const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
@@ -134,6 +135,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
triggerFocus(innerRef.current?.resizableTextArea?.textArea, option);
},
blur: () => innerRef.current?.blur(),
nativeElement: innerRef.current?.nativeElement || null,
}));
const prefixCls = getPrefixCls('input', customizePrefixCls);

View File

@@ -51,7 +51,6 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="http://"
>
http://
@@ -188,7 +187,6 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title=".com"
>
.com
@@ -3032,7 +3030,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Jack"
>
Jack
@@ -3161,7 +3158,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title=""
/>
<input
@@ -3521,7 +3517,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake
@@ -5778,7 +5773,6 @@ exports[`renders components/input/demo/compact-style.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang"
>
Zhejiang
@@ -6720,7 +6714,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang"
>
Zhejiang
@@ -7024,7 +7017,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Option1"
>
Option1
@@ -9070,7 +9062,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Option1-1"
>
Option1-1
@@ -9198,7 +9189,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Option2-2"
>
Option2-2
@@ -9331,7 +9321,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Between"
>
Between
@@ -9487,7 +9476,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Sign Up"
>
Sign Up
@@ -9716,7 +9704,6 @@ exports[`renders components/input/demo/group.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Home"
>
Home
@@ -12173,6 +12160,33 @@ Array [
</span>
</span>
</span>,
<br />,
<textarea
aria-describedby="test-id"
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var"
placeholder="TextArea wrapped in Tooltip for debugging"
style="margin-top: 16px;"
/>,
<div
class="ant-tooltip ant-zoom-big-fast-appear ant-zoom-big-fast-appear-prepare ant-zoom-big-fast ant-tooltip-css-var css-var-test-id ant-tooltip-placement-top"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; right: auto; bottom: auto; box-sizing: border-box;"
>
<div
class="ant-tooltip-arrow"
style="position: absolute; bottom: 0px; left: 0px;"
>
<span
class="ant-tooltip-arrow-content"
/>
</div>
<div
class="ant-tooltip-container"
id="test-id"
role="tooltip"
>
Debug TextArea with Tooltip
</div>
</div>,
]
`;

View File

@@ -51,7 +51,6 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="http://"
>
http://
@@ -110,7 +109,6 @@ exports[`renders components/input/demo/addon.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title=".com"
>
.com
@@ -648,7 +646,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Jack"
>
Jack
@@ -699,7 +696,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title=""
/>
<input
@@ -843,7 +839,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Zhejiang / Hangzhou / West Lake"
>
Zhejiang / Hangzhou / West Lake
@@ -1669,7 +1664,6 @@ exports[`renders components/input/demo/compact-style.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Zhejiang"
>
Zhejiang
@@ -2495,7 +2489,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Zhejiang"
>
Zhejiang
@@ -2705,7 +2698,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Option1"
>
Option1
@@ -2985,7 +2977,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Option1-1"
>
Option1-1
@@ -3035,7 +3026,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Option2-2"
>
Option2-2
@@ -3090,7 +3080,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Between"
>
Between
@@ -3168,7 +3157,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Sign Up"
>
Sign Up
@@ -3250,7 +3238,6 @@ exports[`renders components/input/demo/group.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Home"
>
Home
@@ -5490,6 +5477,12 @@ Array [
</span>
</span>
</span>,
<br />,
<textarea
class="ant-input ant-input-outlined css-var-test-id ant-input-css-var"
placeholder="TextArea wrapped in Tooltip for debugging"
style="margin-top:16px"
/>,
]
`;

View File

@@ -605,4 +605,18 @@ describe('TextArea allowClear', () => {
fireEvent.mouseUp(container.querySelector('textarea')!);
expect(container.querySelector('.ant-input-mouse-active')).toBeFalsy();
});
describe('ref.nativeElement should be the root div', () => {
it('basic', () => {
const ref = React.createRef<TextAreaRef>();
const { container } = render(<TextArea ref={ref} />);
expect(ref.current?.nativeElement).toBe(container.firstChild);
});
it('with showCount', () => {
const ref = React.createRef<TextAreaRef>();
const { container } = render(<TextArea ref={ref} showCount />);
expect(ref.current?.nativeElement).toBe(container.firstChild);
});
});
});

View File

@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { Button, Input } from 'antd';
import React, { useRef, useState } from 'react';
import { Button, Input, Tooltip } from 'antd';
import type { TextAreaRef } from 'antd/es/input/TextArea';
const { TextArea } = Input;
@@ -8,6 +9,7 @@ const defaultValue =
const App: React.FC = () => {
const [autoResize, setAutoResize] = useState(false);
const textAreaRef = useRef<TextAreaRef>(null);
return (
<>
@@ -23,6 +25,15 @@ const App: React.FC = () => {
}}
showCount
/>
<br />
<Tooltip title="Debug TextArea with Tooltip">
<TextArea
ref={textAreaRef}
placeholder="TextArea wrapped in Tooltip for debugging"
style={{ marginTop: 16 }}
onFocus={() => console.log('nativeElement:', textAreaRef.current?.nativeElement)}
/>
</Tooltip>
</>
);
};

View File

@@ -317,7 +317,6 @@ exports[`List.pagination should default work 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="3 / page"
>
3 / page

File diff suppressed because it is too large Load Diff

View File

@@ -1052,7 +1052,7 @@ exports[`renders components/modal/demo/render-panel.tsx extend context correctly
class="ant-typography css-var-test-id"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="https://github.com/ant-design/ant-design/pull/44318"
>
Feature #44318

View File

@@ -1014,7 +1014,7 @@ exports[`renders components/modal/demo/render-panel.tsx correctly 1`] = `
class="ant-typography css-var-test-id"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="https://github.com/ant-design/ant-design/pull/44318"
>
Feature #44318

View File

@@ -566,7 +566,6 @@ exports[`renders components/pagination/demo/all.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -1039,7 +1038,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -1368,7 +1366,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -1665,7 +1662,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -2005,7 +2001,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -2425,7 +2420,6 @@ exports[`renders components/pagination/demo/itemRender.tsx extend context correc
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -2759,7 +2753,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -3099,7 +3092,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -3539,7 +3531,6 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -3962,7 +3953,6 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -4393,7 +4383,6 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -4816,7 +4805,6 @@ exports[`renders components/pagination/demo/mini.tsx extend context correctly 1`
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -5212,7 +5200,6 @@ exports[`renders components/pagination/demo/more.tsx extend context correctly 1`
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -5816,7 +5803,6 @@ exports[`renders components/pagination/demo/style-class.tsx extend context corre
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -6152,7 +6138,6 @@ exports[`renders components/pagination/demo/style-class.tsx extend context corre
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -6443,7 +6428,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="20 / page"
>
20 / page
@@ -6728,7 +6712,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="20 / page"
>
20 / page
@@ -7063,7 +7046,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -7392,7 +7374,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -7722,7 +7703,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -8051,7 +8031,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page

View File

@@ -564,7 +564,6 @@ exports[`renders components/pagination/demo/all.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -931,7 +930,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -1158,7 +1156,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -1351,7 +1348,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -1589,7 +1585,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -1903,7 +1898,6 @@ exports[`renders components/pagination/demo/itemRender.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -2133,7 +2127,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -2371,7 +2364,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -2707,7 +2699,6 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -3028,7 +3019,6 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -3357,7 +3347,6 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -3678,7 +3667,6 @@ exports[`renders components/pagination/demo/mini.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -3970,7 +3958,6 @@ exports[`renders components/pagination/demo/more.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -4468,7 +4455,6 @@ exports[`renders components/pagination/demo/style-class.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -4702,7 +4688,6 @@ exports[`renders components/pagination/demo/style-class.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -4889,7 +4874,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="20 / page"
>
20 / page
@@ -5072,7 +5056,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="20 / page"
>
20 / page
@@ -5303,7 +5286,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -5530,7 +5512,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -5758,7 +5739,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -5985,7 +5965,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page

View File

@@ -260,7 +260,6 @@ exports[`Pagination ConfigProvider should be rendered correctly when componentSi
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page

View File

@@ -1781,7 +1781,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx extend context co
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy

View File

@@ -1696,7 +1696,6 @@ exports[`renders components/segmented/demo/size-consistent.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy

View File

@@ -388,7 +388,6 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -553,7 +552,6 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -663,7 +661,6 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -772,7 +769,6 @@ exports[`renders components/select/demo/basic.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -915,7 +911,6 @@ exports[`renders components/select/demo/coordinate.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang"
>
Zhejiang
@@ -1048,7 +1043,6 @@ exports[`renders components/select/demo/coordinate.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Hangzhou"
>
Hangzhou
@@ -1394,7 +1388,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
>
<span>
No option match
@@ -4140,7 +4133,6 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -4458,7 +4450,6 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -4801,7 +4792,6 @@ exports[`renders components/select/demo/filled-debug.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -5279,7 +5269,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy (101)"
>
Lucy (101)
@@ -6649,7 +6638,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="lucy"
>
lucy
@@ -6847,7 +6835,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="long, long, long piece of text"
>
long, long, long piece of text
@@ -7178,7 +7165,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
>
<div>
normal
@@ -8634,7 +8620,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Bamboo"
>
Bamboo
@@ -8816,7 +8801,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Bamboo"
>
Bamboo
@@ -9023,7 +9007,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Bamboo"
>
Bamboo
@@ -9584,7 +9567,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Bamboo"
>
Bamboo
@@ -10855,7 +10837,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HangZhou #310000"
>
HangZhou #310000
@@ -13568,7 +13549,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="a1"
>
a1
@@ -15640,7 +15620,6 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -15828,7 +15807,6 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy
@@ -15993,7 +15971,6 @@ exports[`renders components/select/demo/suffix.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Lucy"
>
Lucy

View File

@@ -77,7 +77,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -132,7 +131,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -188,7 +186,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -243,7 +240,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -447,7 +443,6 @@ exports[`renders components/select/demo/coordinate.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Zhejiang"
>
Zhejiang
@@ -502,7 +497,6 @@ exports[`renders components/select/demo/coordinate.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Hangzhou"
>
Hangzhou
@@ -611,7 +605,6 @@ exports[`renders components/select/demo/custom-label-render.tsx correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility:visible"
>
<span>
No option match
@@ -1126,7 +1119,6 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -1247,7 +1239,6 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -1393,7 +1384,6 @@ exports[`renders components/select/demo/filled-debug.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -1576,7 +1566,6 @@ exports[`renders components/select/demo/label-in-value.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy (101)"
>
Lucy (101)
@@ -1981,7 +1970,6 @@ exports[`renders components/select/demo/optgroup.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="lucy"
>
lucy
@@ -2043,7 +2031,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="long, long, long piece of text"
>
long, long, long piece of text
@@ -2176,7 +2163,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
>
<div>
normal
@@ -2802,7 +2788,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Bamboo"
>
Bamboo
@@ -2885,7 +2870,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Bamboo"
>
Bamboo
@@ -2993,7 +2977,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Bamboo"
>
Bamboo
@@ -3264,7 +3247,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Bamboo"
>
Bamboo
@@ -3885,7 +3867,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="HangZhou #310000"
>
HangZhou #310000
@@ -4721,7 +4702,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="a1"
>
a1
@@ -5329,7 +5309,6 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -5407,7 +5386,6 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy
@@ -5462,7 +5440,6 @@ exports[`renders components/select/demo/suffix.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Lucy"
>
Lucy

View File

@@ -468,7 +468,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Zhejiang"
>
Zhejiang
@@ -1011,7 +1010,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Option1"
>
Option1
@@ -4281,7 +4279,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Option1-1"
>
Option1-1
@@ -4409,7 +4406,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Option2-2"
>
Option2-2
@@ -4545,7 +4541,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Between"
>
Between
@@ -4704,7 +4699,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Sign Up"
>
Sign Up
@@ -8240,7 +8234,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="leaf1"
>
leaf1
@@ -8912,7 +8905,6 @@ exports[`renders components/space/demo/compact.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX
@@ -9278,6 +9270,38 @@ exports[`renders components/space/demo/compact-button-vertical.tsx extend contex
</button>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact ant-space-compact-vertical"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item"
type="button"
>
<span>
Button 1
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item"
type="button"
>
<span>
Button 2
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-last-item"
type="button"
>
<span>
Button 3
</span>
</button>
</div>
</div>
</div>
`;
@@ -10383,7 +10407,6 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="http://"
>
http://
@@ -10520,7 +10543,6 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title=".com"
>
.com
@@ -12375,7 +12397,6 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Sign Up"
>
Sign Up
@@ -13956,7 +13977,9 @@ exports[`renders components/space/demo/compact-debug.tsx extend context correctl
`;
exports[`renders components/space/demo/compact-nested.tsx extend context correctly 1`] = `
Array [
<div
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<div
class="ant-space-compact ant-space-compact-block"
>
@@ -14083,7 +14106,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="Opt1"
>
Opt1
@@ -14305,8 +14327,7 @@ Array [
</button>
</div>
</div>
</div>,
<br />,
</div>
<div
class="ant-space-compact ant-space-compact-block"
>
@@ -15879,6 +15900,22 @@ Array [
</span>
</button>
</div>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
type="button"
>
<span>
~
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
type="button"
>
<span>
~
</span>
</button>
<div
class="ant-space-compact"
>
@@ -16028,8 +16065,44 @@ Array [
</span>
</button>
</div>
</div>,
]
</div>
<div
class="ant-space-compact"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
Button 1
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item"
type="button"
>
<span>
Button 2
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item"
type="button"
>
<span>
Button 3
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
type="button"
>
<span>
Button 4
</span>
</button>
</div>
</div>
`;
exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`;
@@ -16340,7 +16413,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
class="ant-space-item"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Link
</a>
@@ -16357,7 +16430,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
class="ant-space-item"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Link
</a>
@@ -16374,7 +16447,7 @@ exports[`renders components/space/demo/separator.tsx extend context correctly 1`
class="ant-space-item"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Link
</a>

View File

@@ -359,7 +359,6 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Zhejiang"
>
Zhejiang
@@ -731,7 +730,6 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Option1"
>
Option1
@@ -1122,7 +1120,6 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Option1-1"
>
Option1-1
@@ -1172,7 +1169,6 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Option2-2"
>
Option2-2
@@ -1230,7 +1226,6 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Between"
>
Between
@@ -1311,7 +1306,6 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Sign Up"
>
Sign Up
@@ -1582,7 +1576,6 @@ exports[`renders components/space/demo/compact.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="leaf1"
>
leaf1
@@ -1974,6 +1967,38 @@ exports[`renders components/space/demo/compact-button-vertical.tsx correctly 1`]
</button>
</div>
</div>
<div
class="ant-space-item"
>
<div
class="ant-space-compact ant-space-compact-vertical"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-first-item"
type="button"
>
<span>
Button 1
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item"
type="button"
>
<span>
Button 2
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-compact-vertical-item ant-btn-compact-vertical-last-item"
type="button"
>
<span>
Button 3
</span>
</button>
</div>
</div>
</div>
`;
@@ -2569,7 +2594,6 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="http://"
>
http://
@@ -2628,7 +2652,6 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title=".com"
>
.com
@@ -3381,7 +3404,6 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Sign Up"
>
Sign Up
@@ -3673,7 +3695,9 @@ exports[`renders components/space/demo/compact-debug.tsx correctly 1`] = `
`;
exports[`renders components/space/demo/compact-nested.tsx correctly 1`] = `
Array [
<div
class="ant-flex css-var-test-id ant-flex-align-stretch ant-flex-gap-middle ant-flex-vertical"
>
<div
class="ant-space-compact ant-space-compact-block"
>
@@ -3800,7 +3824,6 @@ Array [
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="Opt1"
>
Opt1
@@ -3944,8 +3967,7 @@ Array [
</button>
</div>
</div>
</div>,
<br />,
</div>
<div
class="ant-space-compact ant-space-compact-block"
>
@@ -4002,6 +4024,22 @@ Array [
</span>
</button>
</div>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
type="button"
>
<span>
~
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-primary ant-btn-color-primary ant-btn-variant-solid ant-btn-compact-item"
type="button"
>
<span>
~
</span>
</button>
<div
class="ant-space-compact"
>
@@ -4063,8 +4101,44 @@ Array [
</span>
</button>
</div>
</div>,
]
</div>
<div
class="ant-space-compact"
>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-first-item"
type="button"
>
<span>
Button 1
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-default ant-btn-variant-solid ant-btn-compact-item"
type="button"
>
<span>
Button 2
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item"
type="button"
>
<span>
Button 3
</span>
</button>
<button
class="ant-btn css-var-test-id ant-btn-default ant-btn-color-dangerous ant-btn-variant-solid ant-btn-compact-item ant-btn-compact-last-item"
type="button"
>
<span>
Button 4
</span>
</button>
</div>
</div>
`;
exports[`renders components/space/demo/debug.tsx correctly 1`] = `
@@ -4201,7 +4275,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
class="ant-space-item"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Link
</a>
@@ -4218,7 +4292,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
class="ant-space-item"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Link
</a>
@@ -4235,7 +4309,7 @@ exports[`renders components/space/demo/separator.tsx correctly 1`] = `
class="ant-space-item"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Link
</a>

View File

@@ -18,6 +18,11 @@ const App: React.FC = () => (
<Button type="primary">Button 2</Button>
<Button type="primary">Button 3</Button>
</Space.Compact>
<Space.Compact orientation="vertical">
<Button variant="outlined">Button 1</Button>
<Button variant="outlined">Button 2</Button>
<Button variant="outlined">Button 3</Button>
</Space.Compact>
</Space>
);

View File

@@ -1,9 +1,9 @@
import React from 'react';
import { CopyOutlined, SearchOutlined } from '@ant-design/icons';
import { Button, Cascader, Input, InputNumber, Select, Space, TimePicker } from 'antd';
import { Button, Cascader, Flex, Input, InputNumber, Select, Space, TimePicker } from 'antd';
const App: React.FC = () => (
<>
<Flex vertical gap="middle">
<Space.Compact block>
<Space.Compact>
<Space.Compact>
@@ -33,12 +33,14 @@ const App: React.FC = () => (
</Space.Compact>
</Space.Compact>
</Space.Compact>
<br />
<Space.Compact block>
<Space.Compact>
<TimePicker />
<Button type="primary">Submit</Button>
</Space.Compact>
<Button type="primary">~</Button>
<Button type="primary">~</Button>
<Space.Compact>
<Cascader
options={[
@@ -80,7 +82,22 @@ const App: React.FC = () => (
<Button type="primary">Submit</Button>
</Space.Compact>
</Space.Compact>
</>
<Space.Compact>
<Button color="default" variant="solid">
Button 1
</Button>
<Button color="default" variant="solid">
Button 2
</Button>
<Button color="danger" variant="solid">
Button 3
</Button>
<Button color="danger" variant="solid">
Button 4
</Button>
</Space.Compact>
</Flex>
);
export default App;

View File

@@ -8550,7 +8550,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8579,7 +8579,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8608,7 +8608,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8637,7 +8637,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8666,7 +8666,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8695,7 +8695,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8724,7 +8724,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8753,7 +8753,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8782,7 +8782,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -8811,7 +8811,7 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -9004,7 +9004,6 @@ exports[`renders components/table/demo/edit-row.tsx extend context correctly 1`]
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -13635,7 +13634,6 @@ exports[`renders components/table/demo/fixed-header.tsx extend context correctly
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="50 / page"
>
50 / page
@@ -15060,7 +15058,6 @@ exports[`renders components/table/demo/grouping-columns.tsx extend context corre
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page
@@ -18867,7 +18864,6 @@ exports[`renders components/table/demo/narrow.tsx extend context correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="10 / page"
>
10 / page

View File

@@ -7504,7 +7504,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7533,7 +7533,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7562,7 +7562,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7591,7 +7591,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7620,7 +7620,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7649,7 +7649,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7678,7 +7678,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7707,7 +7707,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7736,7 +7736,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7765,7 +7765,7 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
class="ant-table-cell"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
>
Edit
</a>
@@ -7958,7 +7958,6 @@ exports[`renders components/table/demo/edit-row.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -12652,7 +12651,6 @@ exports[`renders components/table/demo/fixed-columns-header.tsx correctly 1`] =
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -14658,7 +14656,6 @@ exports[`renders components/table/demo/fixed-header.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="50 / page"
>
50 / page
@@ -15800,7 +15797,6 @@ exports[`renders components/table/demo/grouping-columns.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -17960,7 +17956,6 @@ exports[`renders components/table/demo/narrow.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page
@@ -28333,7 +28328,6 @@ exports[`renders components/table/demo/sticky.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="10 / page"
>
10 / page

View File

@@ -39,7 +39,7 @@ Common props ref[Common props](/docs/react/common-props)
| closeIcon | Customize close icon | `React.ReactNode` | `true` | 5.9.0 |
| disabledInteraction | Disable interaction on highlighted area. | `boolean` | `false` | 5.13.0 |
| gap | Control the radius of the highlighted area and the offset between highlighted area and the element. | `{ offset?: number \| [number, number]; radius?: number }` | `{ offset?: 6 ; radius?: 2 }` | 5.0.0 (array type `offset`: 5.9.0) |
| keyboard | Whether to enable keyboard shortcuts | boolean | true | 6.2.0 |
| keyboard | Whether to enable keyboard shortcuts | boolean | true | 6.2.0 |
| placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | |
| onClose | Callback function on shutdown | `Function` | - | |
| mask | Whether to enable masking, change mask style and fill color by pass custom props | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | |

View File

@@ -2250,7 +2250,6 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="lucy"
>
lucy

View File

@@ -594,7 +594,6 @@ exports[`renders components/tree-select/demo/render-panel.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="lucy"
>
lucy

View File

@@ -3545,7 +3545,6 @@ exports[`renders components/tree/demo/line.tsx extend context correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="True"
>
True

View File

@@ -3530,7 +3530,6 @@ exports[`renders components/tree/demo/line.tsx correctly 1`] = `
>
<div
class="ant-select-content-value"
style="visibility:visible"
title="True"
>
True

View File

@@ -440,6 +440,7 @@ const Base = React.forwardRef<HTMLElement, BlockProps>((props, ref) => {
[`${prefixCls}-ellipsis`]: enableEllipsis,
[`${prefixCls}-ellipsis-single-line`]: cssTextOverflow,
[`${prefixCls}-ellipsis-multiple-line`]: cssLineClamp,
[`${prefixCls}-link`]: component === 'a',
},
className,
)}

View File

@@ -59,7 +59,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
<ul>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/proximity"
>
Principles
@@ -67,7 +67,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/overview"
>
Patterns
@@ -75,7 +75,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/resources"
>
Resource Download
@@ -163,7 +163,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
<ul>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/proximity-cn"
>
设计原则
@@ -171,7 +171,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/overview-cn"
>
设计模式
@@ -179,7 +179,7 @@ exports[`renders components/typography/demo/basic.tsx extend context correctly 1
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/resources-cn"
>
设计资源
@@ -272,7 +272,7 @@ Array [
<ul>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/proximity"
>
Principles
@@ -280,7 +280,7 @@ Array [
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/overview"
>
Patterns
@@ -288,7 +288,7 @@ Array [
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/resources"
>
Resource Download
@@ -371,7 +371,7 @@ Array [
<ul>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/proximity-cn"
>
设计原则
@@ -379,7 +379,7 @@ Array [
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/overview-cn"
>
设计模式
@@ -387,7 +387,7 @@ Array [
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/resources-cn"
>
设计资源
@@ -2233,6 +2233,47 @@ exports[`renders components/typography/demo/ellipsis-middle.tsx extend context c
exports[`renders components/typography/demo/ellipsis-middle.tsx extend context correctly 2`] = `[]`;
exports[`renders components/typography/demo/link-danger-debug.tsx extend context correctly 1`] = `
<article
class="ant-typography css-var-test-id"
>
<span
class="ant-typography css-var-test-id"
>
Typography.Link 的 type="danger" 颜色应为 error 文本色。
</span>
<br />
<a
class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
href="https://ant.design"
>
Danger Link
</a>
<div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-rail"
role="separator"
/>
<span
class="ant-typography css-var-test-id"
>
Button 以 a 标签渲染时,不应被 Typography 链接样式影响。
</span>
<br />
<a
aria-disabled="false"
class="ant-btn css-var-test-id ant-btn-link ant-btn-color-link ant-btn-variant-link"
href="https://ant.design"
tabindex="0"
>
<span>
Button Link
</span>
</a>
</article>
`;
exports[`renders components/typography/demo/link-danger-debug.tsx extend context correctly 2`] = `[]`;
exports[`renders components/typography/demo/paragraph-debug.tsx extend context correctly 1`] = `
Array [
<h1
@@ -2635,7 +2676,7 @@ exports[`renders components/typography/demo/text.tsx extend context correctly 1`
class="ant-space-item"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="https://ant.design"
rel="noopener noreferrer"
target="_blank"

View File

@@ -60,7 +60,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
<ul>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/proximity"
>
Principles
@@ -68,7 +68,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/overview"
>
Patterns
@@ -76,7 +76,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/resources"
>
Resource Download
@@ -164,7 +164,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
<ul>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/proximity-cn"
>
设计原则
@@ -172,7 +172,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/overview-cn"
>
设计模式
@@ -180,7 +180,7 @@ exports[`renders components/typography/demo/basic.tsx correctly 1`] = `
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/resources-cn"
>
设计资源
@@ -272,7 +272,7 @@ Array [
<ul>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/proximity"
>
Principles
@@ -280,7 +280,7 @@ Array [
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/overview"
>
Patterns
@@ -288,7 +288,7 @@ Array [
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/resources"
>
Resource Download
@@ -371,7 +371,7 @@ Array [
<ul>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/proximity-cn"
>
设计原则
@@ -379,7 +379,7 @@ Array [
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/spec/overview-cn"
>
设计模式
@@ -387,7 +387,7 @@ Array [
</li>
<li>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="/docs/resources-cn"
>
设计资源
@@ -1586,6 +1586,45 @@ exports[`renders components/typography/demo/ellipsis-middle.tsx correctly 1`] =
</span>
`;
exports[`renders components/typography/demo/link-danger-debug.tsx correctly 1`] = `
<article
class="ant-typography css-var-test-id"
>
<span
class="ant-typography css-var-test-id"
>
Typography.Link 的 type="danger" 颜色应为 error 文本色。
</span>
<br />
<a
class="ant-typography ant-typography-danger ant-typography-link css-var-test-id"
href="https://ant.design"
>
Danger Link
</a>
<div
class="ant-divider css-var-test-id ant-divider-horizontal ant-divider-rail"
role="separator"
/>
<span
class="ant-typography css-var-test-id"
>
Button 以 a 标签渲染时,不应被 Typography 链接样式影响。
</span>
<br />
<a
aria-disabled="false"
class="ant-btn css-var-test-id ant-btn-link ant-btn-color-link ant-btn-variant-link"
href="https://ant.design"
tabindex="0"
>
<span>
Button Link
</span>
</a>
</article>
`;
exports[`renders components/typography/demo/paragraph-debug.tsx correctly 1`] = `
Array [
<h1
@@ -1964,7 +2003,7 @@ exports[`renders components/typography/demo/text.tsx correctly 1`] = `
class="ant-space-item"
>
<a
class="ant-typography css-var-test-id"
class="ant-typography ant-typography-link css-var-test-id"
href="https://ant.design"
rel="noopener noreferrer"
target="_blank"

View File

@@ -20,6 +20,6 @@ exports[`Typography rtl render component should be rendered correctly in RTL dir
exports[`Typography rtl render component should be rendered correctly in RTL direction 4`] = `
<a
class="ant-typography ant-typography-rtl css-var-root"
class="ant-typography ant-typography-rtl ant-typography-link css-var-root"
/>
`;

View File

@@ -0,0 +1,7 @@
## zh-CN
Typography.Link 的 danger 颜色与 Button Link 的样式隔离。
## en-US
Typography.Link danger color and isolation from Button link styles.

View File

@@ -0,0 +1,22 @@
import React from 'react';
import { Button, Divider, Typography } from 'antd';
const { Text, Link } = Typography;
const App: React.FC = () => (
<Typography>
<Text>Typography.Link type="danger" error </Text>
<br />
<Link href="https://ant.design" type="danger">
Danger Link
</Link>
<Divider />
<Text>Button a Typography </Text>
<br />
<Button type="link" href="https://ant.design">
Button Link
</Button>
</Typography>
);
export default App;

View File

@@ -27,6 +27,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
<code src="./demo/ellipsis-debug.tsx" debug>Ellipsis Debug</code>
<code src="./demo/suffix.tsx">suffix</code>
<code src="./demo/componentToken-debug.tsx" debug>Component Token</code>
<code src="./demo/link-danger-debug.tsx" debug>Link danger Debug</code>
## API

View File

@@ -28,6 +28,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
<code src="./demo/ellipsis-debug.tsx" debug>省略号 Debug</code>
<code src="./demo/suffix.tsx">后缀</code>
<code src="./demo/componentToken-debug.tsx" debug>组件 Token</code>
<code src="./demo/link-danger-debug.tsx" debug>Link danger Debug</code>
## API

View File

@@ -34,24 +34,24 @@ const genTypographyStyle: GenerateStyle<TypographyToken> = (token) => {
color: token.colorText,
wordBreak: 'break-word',
lineHeight: token.lineHeight,
[`&${componentCls}-secondary`]: {
[`&${componentCls}-secondary, &${componentCls}-link${componentCls}-secondary`]: {
color: token.colorTextDescription,
},
[`&${componentCls}-success`]: {
[`&${componentCls}-success, &${componentCls}-link${componentCls}-success`]: {
color: token.colorSuccessText,
},
[`&${componentCls}-warning`]: {
[`&${componentCls}-warning, &${componentCls}-link${componentCls}-warning`]: {
color: token.colorWarningText,
},
[`&${componentCls}-danger`]: {
[`&${componentCls}-danger, &${componentCls}-link${componentCls}-danger`]: {
color: token.colorErrorText,
'a&:active, a&:focus': {
[`&${componentCls}-link:active, &${componentCls}-link:focus`]: {
color: token.colorErrorTextActive,
},
'a&:hover': {
[`&${componentCls}-link:hover`]: {
color: token.colorErrorTextHover,
},
},

View File

@@ -54,14 +54,13 @@ export const getTitleStyles: GenerateStyle<TypographyToken, CSSObject> = (token)
};
export const getLinkStyles: GenerateStyle<TypographyToken, CSSObject> = (token) => {
const { componentCls, antCls } = token;
const btnCls = `${antCls}-btn`;
const { componentCls } = token;
const linkCls = `${componentCls}-link`;
return {
// fix issue: https://github.com/ant-design/ant-design/issues/56606
// exclude ant-btn to avoid style conflicts with Button component when it renders as <a></a> tag (variant='link' with href)
[`a&:not(${btnCls}), a:not(${btnCls})`]: {
[`&${linkCls}`]: {
...operationUnit(token),
userSelect: 'text',
[`&[disabled], &${componentCls}-disabled`]: {
color: token.colorTextDisabled,

View File

@@ -257,7 +257,6 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1
>
<div
class="ant-select-content-value"
style="visibility: visible;"
title="HEX"
>
HEX

View File

@@ -45,7 +45,6 @@ Please find below some of the design resources and tools about Ant Design that w
- https://www.antuikit.com/antuikit.svg
- Figma Design System, Blocks, Flows & Templates
- https://www.antuikit.com
- Community
- Figma Resources
- https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg
- Always up-to-date Ant Design Figma resources

View File

@@ -45,7 +45,6 @@ description: 这里汇总了与 Ant Design 相关的所有资源。
- https://www.antuikit.com/antuikit.svg
- Figma 设计系统、模块、流程和模板
- https://www.antuikit.com
- 社区
- Figma 组件包
- https://gw.alipayobjects.com/zos/basement_prod/7b9ed3f2-6f05-4ddb-bac3-d55feb71e0ac.svg
- 在 Figma 使用 Ant Design 进行设计

View File

@@ -85,6 +85,7 @@ export default antfu(
'react-hooks/immutability': 'off',
'test/prefer-lowercase-title': 'off',
'react/no-create-ref': 'off',
'react/no-nested-component-definitions': 'off',
'react/no-nested-components': 'off',
'react/no-useless-fragment': 'off',
'no-console': 'off',

View File

@@ -1,6 +1,6 @@
{
"name": "antd",
"version": "6.2.2",
"version": "6.2.3",
"description": "An enterprise-class UI design language and React components implementation",
"license": "MIT",
"funding": {
@@ -88,12 +88,10 @@
"test:dekko": "tsx ./tests/dekko/index.test.ts",
"test:image": "cross-env MOCK_USE_ID=false jest --config .jest.image.js --no-cache -i -u --forceExit",
"test:node": "npm run version && jest --config .jest.node.js --no-cache",
"test:semantic": "npm run version && jest --config .jest.semantic.js --no-cache",
"test:package-diff": "antd-tools run package-diff",
"test:site": "jest --config .jest.site.js --no-cache",
"test:site-update": "npm run site && npm run test:site -- -u",
"test:update": "jest --config .jest.js --no-cache -u",
"test:semantic:update": "npm run version && jest --config .jest.semantic.js --no-cache -u",
"test:visual-regression": "tsx scripts/visual-regression/build.ts",
"test:visual-regression:local": "tsx scripts/visual-regression/local.ts",
"token:meta": "tsx scripts/generate-token-meta.ts",
@@ -121,8 +119,8 @@
"@rc-component/checkbox": "~1.0.1",
"@rc-component/collapse": "~1.2.0",
"@rc-component/color-picker": "~3.0.3",
"@rc-component/dialog": "~1.8.0",
"@rc-component/drawer": "~1.4.0",
"@rc-component/dialog": "~1.8.2",
"@rc-component/drawer": "~1.4.1",
"@rc-component/dropdown": "~1.0.2",
"@rc-component/form": "~1.6.2",
"@rc-component/image": "~1.6.0",
@@ -140,7 +138,7 @@
"@rc-component/rate": "~1.0.1",
"@rc-component/resize-observer": "^1.1.1",
"@rc-component/segmented": "~1.3.0",
"@rc-component/select": "~1.5.1",
"@rc-component/select": "~1.5.2",
"@rc-component/slider": "~1.0.1",
"@rc-component/steps": "~1.2.2",
"@rc-component/switch": "~1.0.3",
@@ -153,7 +151,7 @@
"@rc-component/tree-select": "~1.6.0",
"@rc-component/trigger": "^3.9.0",
"@rc-component/upload": "~1.1.0",
"@rc-component/util": "^1.7.0",
"@rc-component/util": "^1.8.1",
"clsx": "^2.1.1",
"dayjs": "^1.11.11",
"scroll-into-view-if-needed": "^3.1.0",
@@ -214,7 +212,7 @@
"@types/pngjs": "^6.0.5",
"@types/prismjs": "^1.26.5",
"@types/progress": "^2.0.7",
"@types/react": "^19.2.7",
"@types/react": "19.2.9",
"@types/react-dom": "^19.2.3",
"@types/react-highlight-words": "^0.20.0",
"@types/semver": "^7.7.1",
@@ -247,7 +245,7 @@
"eslint-plugin-jest": "^29.12.0",
"eslint-plugin-jsx-a11y": "^6.10.2",
"eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-react-refresh": "^0.4.26",
"eslint-plugin-react-refresh": "^0.5.0",
"fast-glob": "^3.3.3",
"father": "4.6.13",
"fs-extra": "^11.3.2",

View File

@@ -4,7 +4,6 @@ import { input, select } from '@inquirer/prompts';
import chalk from 'chalk';
import fs from 'fs-extra';
import fetch from 'isomorphic-fetch';
import jQuery from 'jquery';
import jsdom from 'jsdom';
import openWindow from 'open';
import simpleGit from 'simple-git';
@@ -14,8 +13,11 @@ const { window } = new JSDOM();
const { document } = new JSDOM('').window;
global.document = document;
global.window = window as any;
const $ = jQuery<jsdom.DOMWindow>(window) as unknown as JQueryStatic;
const jQuery = require('jquery');
const $ = jQuery(window) as unknown as JQueryStatic;
const QUERY_TITLE = '.gh-header-title .js-issue-title';
const QUERY_DESCRIPTION_LINES = '.comment-body table tbody tr';