source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch feature into next-merge-feature

Browse Source
This commit is contained in:
lijianan
2025-11-21 03:05:35 +08:00
parent b3aa6fd5c7 d35f63244d
commit ae462125cf
14 changed files with 30 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
components/notification/style/index.ts
View File

@@ -156,20 +156,11 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => {
wordWrap: 'break-word',
borderRadius: borderRadiusLG,
overflow: 'hidden',
// Type-specific background colors
'&-success': {
background: colorSuccessBg,
},
'&-error': {
background: colorErrorBg,
},
'&-info': {
background: colorInfoBg,
},
'&-warning': {
background: colorWarningBg,
},
'&-success': colorSuccessBg ? { background: colorSuccessBg } : {},
'&-error': colorErrorBg ? { background: colorErrorBg } : {},
'&-info': colorInfoBg ? { background: colorInfoBg } : {},
'&-warning': colorWarningBg ? { background: colorWarningBg } : {},
},
[`${noticeCls}-title`]: {

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

@@ -100,7 +100,7 @@ Common props ref：[Common props](/docs/react/common-props)
| ~~popupClassName~~ | The className of dropdown menu, use `classNames.popup.root` instead | string | - | 4.23.0 |
| popupMatchSelectWidth | Determine whether the popup menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | 5.5.0 |
| ~~dropdownRender~~ | Customize dropdown content, use `popupRender` instead | (originNode: ReactNode) => ReactNode | - | |
| popupRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - | |
| popupRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - | 5.25.0 |
| ~~dropdownStyle~~ | The style of dropdown menu, use `styles.popup.root` instead | CSSProperties | - | |
| fieldNames | Customize node label, value, options，groupLabel field name | object | { label: `label`, value: `value`, options: `options`, groupLabel: `label` } | 4.17.0 (`groupLabel` added in 5.6.0) |
| ~~filterOption~~ | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | |

3
components/select/index.tsx
View File

@@ -164,6 +164,9 @@ const InternalSelect = <
maxCount,
prefix,
dropdownRender,
/**
* @since 5.25.0
*/
popupRender,
onDropdownVisibleChange,
onOpenChange,

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

@@ -101,7 +101,7 @@ return (
| ~~popupClassName~~ | 下拉菜单的 className 属性，使用 `classNames.popup.root` 替换 | string | - | 4.23.0 |
| popupMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | 5.5.0 |
| ~~dropdownRender~~ | 自定义下拉框内容，使用 `popupRender` 替换 | (originNode: ReactNode) => ReactNode | - | |
| popupRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - | |
| popupRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - | 5.25.0 |
| ~~dropdownStyle~~ | 下拉菜单的 style 属性，使用 `styles.popup.root` 替换 | CSSProperties | - | |
| fieldNames | 自定义节点 label、value、options、groupLabel 的字段 | object | { label: `label`, value: `value`, options: `options`, groupLabel: `label` } | 4.17.0（`groupLabel` 在 5.6.0 新增） |
| ~~filterOption~~ | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false。[示例](#select-demo-search) | boolean \| function(inputValue, option) | true | |

10
docs/react/compatible-style.en-US.md
View File

@@ -14,7 +14,9 @@ Ant Design supports the [last 2 versions of modern browsers](https://browsersl.i
| [:where Selector](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | `>=5.0.0` | [caniuse](https://caniuse.com/?search=%3Awhere) | Chrome 88 | `<StyleProvider hashPriority="high">` |
| [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) | `>=5.0.0` | [caniuse](https://caniuse.com/css-logical-props) | Chrome 89 | `<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>` |
If you need to support older browsers, please use [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) for degradation handling according to your actual requirements.
If you need to support older browsers, please use `@ant-design/cssinjs@1.x` [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) for degradation handling according to your actual requirements.
**🚨 Note: Please use `@ant-design/cssinjs` version 1.x for v5.**
## `:where` in selector
@@ -24,7 +26,7 @@ If you need to support older browsers, please use [StyleProvider](https://github
- Minimum Chrome Version Supported: 88
- Default Enabled: Yes
The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `@ant-design/cssinjs` to disable the default lowering of specificity (please ensure version consistency with antd).
The CSS-in-JS feature of Ant Design uses the ":where" selector by default to lower the CSS selector specificity, reducing the additional cost of adjusting custom styles when upgrading for users. However, the compatibility of the ":where" syntax is relatively poor in older browsers ([compatibility](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)). In certain scenarios, if you need to support older browsers, you can use `@ant-design/cssinjs@1.x` to disable the default lowering of specificity (please ensure version consistency with antd).
```tsx
import { StyleProvider } from '@ant-design/cssinjs';
@@ -70,7 +72,7 @@ Raise priority through plugin:
- Minimum Chrome Version Supported: 89
- Default Enabled: Yes
To unify LTR and RTL styles, Ant Design uses CSS logical properties. For example, the original `margin-left` is replaced by `margin-inline-start`, so that it is the starting position spacing under both LTR and RTL. If you need to be compatible with older browsers, you can configure `transformers` through the `StyleProvider` of `@ant-design/cssinjs`:
To unify LTR and RTL styles, Ant Design uses CSS logical properties. For example, the original `margin-left` is replaced by `margin-inline-start`, so that it is the starting position spacing under both LTR and RTL. If you need to be compatible with older browsers, you can configure `transformers` through the `StyleProvider` of `@ant-design/cssinjs@1.x`:
```tsx
import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
@@ -210,7 +212,7 @@ For more details, please refer to: [px2rem.ts#Options](https://github.com/ant-de
## Shadow DOM Usage
Since `<style />` tag insertion is different from normal DOM in Shadow DOM scenario, you need to use `StyleProvider` of `@ant-design/cssinjs` to configure the `container` property to set the insertion position:
Since `<style />` tag insertion is different from normal DOM in Shadow DOM scenario, you need to use `StyleProvider` of `@ant-design/cssinjs@1.x` to configure the `container` property to set the insertion position:
```tsx
import { StyleProvider } from '@ant-design/cssinjs';

10
docs/react/compatible-style.zh-CN.md
View File

@@ -14,7 +14,9 @@ Ant Design 5.x 支持[最近 2 个版本的现代浏览器](https://browsersl.is
| [:where 选择器](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) | `>=5.0.0` | [caniuse](https://caniuse.com/?search=%3Awhere) | Chrome 88 | `<StyleProvider hashPriority="high">` |
| [CSS 逻辑属性](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties) | `>=5.0.0` | [caniuse](https://caniuse.com/css-logical-props) | Chrome 89 | `<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>` |
如果你需要兼容旧版浏览器，请根据实际需求使用 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) 降级处理。
如果你需要兼容旧版浏览器，请根据实际需求使用 `@ant-design/cssinjs@1.x` 的 [StyleProvider](https://github.com/ant-design/cssinjs#styleprovider) 降级处理。
**🚨 注意：v5 请使用 `@ant-design/cssinjs` 1.x 版本。**
## `:where` 选择器
@@ -24,7 +26,7 @@ Ant Design 5.x 支持[最近 2 个版本的现代浏览器](https://browsersl.is
- Chrome 最低支持版本：88
- 默认启用：是
Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器，你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）：
Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器，你可以使用 `@ant-design/cssinjs@1.x` 取消默认的降权操作（请注意版本保持与 antd 一致）：
```tsx
import { StyleProvider } from '@ant-design/cssinjs';
@@ -70,7 +72,7 @@ export default () => (
- Chrome 最低支持版本：89
- 默认启用：是
为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 `margin-left` 使用 `margin-inline-start` 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `transformers` 将其转换：
为了统一 LTR 和 RTL 样式，Ant Design 使用了 CSS 逻辑属性。例如原 `margin-left` 使用 `margin-inline-start` 代替，使其在 LTR 和 RTL 下都为起始位置间距。如果你需要兼容旧版浏览器（如 360 浏览器、QQ 浏览器 等等），可以通过 `@ant-design/cssinjs@1.x` 的 `StyleProvider` 配置 `transformers` 将其转换：
```tsx | pure
import { legacyLogicalPropertiesTransformer, StyleProvider } from '@ant-design/cssinjs';
@@ -210,7 +212,7 @@ export default () => (
## Shadow DOM 场景
在 Shadow DOM 场景中，由于其添加 `<style />` 标签的方式与普通 DOM 不同，所以需要使用 `@ant-design/cssinjs` 的 `StyleProvider` 配置 `container` 属性用于设置插入位置：
在 Shadow DOM 场景中，由于其添加 `<style />` 标签的方式与普通 DOM 不同，所以需要使用 `@ant-design/cssinjs@1.x` 的 `StyleProvider` 配置 `container` 属性用于设置插入位置：
```tsx
import { StyleProvider } from '@ant-design/cssinjs';

2
docs/react/llms.en-US.md
View File

@@ -37,7 +37,7 @@ Reference the LLMs.txt files using `@` or in your `.windsurf/rules` files to enh
In Claude Code, add `LLMs.txt` to the workspace Knowledge Base (Docs / Context Files) configuration. This allows the file to be referenced during code completion and explanation, improving understanding of Ant Design components.
[Learn more about Claude Code document context configuration](https://claude.ai/docs)
[Learn more about Claude Code document context configuration](https://code.claude.com/docs)
### Gemini CLI

2
docs/react/llms.zh-CN.md
View File

@@ -37,7 +37,7 @@ tag: New
在 Claude Code 中，将 `LLMs.txt` 添加到工作区的知识库（Docs / Context Files）配置中，即可在代码补全与解释时引用其中的内容，从而提升对 Ant Design 组件的理解。
[详细了解 Claude Code 文档上下文配置](https://claude.ai/docs)
[详细了解 Claude Code 文档上下文配置](https://code.claude.com/docs)
### Gemini CLI

2
docs/react/server-side-rendering.en-US.md
View File

@@ -12,7 +12,7 @@ There are two options for server-side rendering styles, each with advantages and
## Inline Style
Use `@ant-design/cssinjs` to extract style:
Use `@ant-design/cssinjs@1.x` to extract style:
```tsx
import React from 'react';

2
docs/react/server-side-rendering.zh-CN.md
View File

@@ -12,7 +12,7 @@ title: 服务端渲染
## 内联样式
使用 `@ant-design/cssinjs` 将所需样式抽离：
使用 `@ant-design/cssinjs@1.x` 将所需样式抽离：
```tsx
import React from 'react';

2
docs/react/use-with-next.en-US.md
View File

@@ -86,7 +86,7 @@ For more detailed information, please refer to [with-nextjs-app-router-inline-st
If you are using the Pages Router in Next.js and using antd as your component library, to make the antd component library work better in your Next.js application and provide a better user experience, you can try using the following method to extract and inject antd's first-screen styles into HTML to avoid page flicker.
1. Install `@ant-design/cssinjs`
1. Install `@ant-design/cssinjs@1.x`
> Notes for developers
>

2
docs/react/use-with-next.zh-CN.md
View File

@@ -86,7 +86,7 @@ export default RootLayout;
如果你在 Next.js 当中使用了 Pages Router, 并使用 antd 作为页面组件库，为了让 antd 组件库在你的 Next.js 应用中能够更好的工作，提供更好的用户体验，你可以尝试使用下面的方式将 antd 首屏样式按需抽离并植入到 HTML 中，以避免页面闪动的情况。
1. 安装 `@ant-design/cssinjs`
1. 安装 `@ant-design/cssinjs@1.x`
> 开发者注意事项：
>

6
package.json
View File

@@ -177,7 +177,7 @@
"@emotion/server": "^11.11.0",
"@eslint-react/eslint-plugin": "^2.0.6",
"@ianvs/prettier-plugin-sort-imports": "^4.7.0",
"@inquirer/prompts": "^7.8.6",
"@inquirer/prompts": "^8.0.1",
"@madccc/duplicate-package-checker-webpack-plugin": "^1.0.0",
"@microflash/rehype-figure": "^2.1.4",
"@npmcli/run-script": "^10.0.0",
@@ -251,7 +251,7 @@
"fs-extra": "^11.3.2",
"gh-pages": "^6.3.0",
"github-slugger": "^2.0.0",
"glob": "^12.0.0",
"glob": "^13.0.0",
"hast-util-to-string": "^3.0.1",
"html2sketch": "^1.0.2",
"http-server": "^14.1.1",
@@ -326,7 +326,7 @@
"vanilla-jsoneditor": "^3.10.0",
"vanilla-tilt": "^1.8.1",
"webpack": "^5.102.0",
"webpack-bundle-analyzer": "^4.10.2",
"webpack-bundle-analyzer": "^5.0.1",
"xhr-mock": "^2.5.1"
},
"publishConfig": {

1
scripts/visual-regression/local.ts
View File

@@ -182,7 +182,6 @@ async function run() {
message: '📚 请选择需要测试的组件，不建议选择全部【全量快照生成需要耗费很长时间】\n',
pageSize: Math.floor(components.length / 4),
loop: false,
theme: { helpMode: 'always' },
choices: components.map((component) => ({
value: component,
checked: component.endsWith('components/button'), // 默认选中 button