chore: auto merge branches (#50459)

chore: merge master into feature
This commit is contained in:
github-actions[bot] 2024-08-16 14:22:08 +00:00 committed by GitHub
commit af11acf1b4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
47 changed files with 191 additions and 493 deletions

View File

@ -37,7 +37,6 @@ const GlobalStyle: React.FC = () => {
.markdown p > img {
margin: 34px auto;
box-shadow: 0 8px 20px rgba(143, 168, 191, 0.35);
max-width: 1024px;
display: block;
}

View File

@ -40,6 +40,7 @@ Thank you!
### 📝 Change Log
> - Read [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) like a cat tracks a laser pointer.
> - Describe the impact of the changes on developers, not the solution approach.
> - Reference: https://ant.design/changelog

View File

@ -40,6 +40,7 @@
### 📝 更新日志
> - 郑重地阅读 [如何维护更新日志](https://keepachangelog.com/zh-CN/1.1.0/)
> - 描述改动对开发者有哪些影响,而非解决方式
> - 可参考https://ant.design/changelog-cn

View File

@ -38,15 +38,15 @@ jobs:
filter-start: '|'
require-include: '🇺🇸 English, 🇨🇳 Chinese, 🇺🇸 英文, 🇨🇳 中文'
comment-body: |
- 🚨 @${{ github.event.pull_request.user.login }}, Please fill changelog in the PR
- Use a developer-oriented tone
- Describe the impact on developers, rather than your solution
- Refer to: https://ant.design/changelog#501
- 🚨 @${{ github.event.pull_request.user.login }}, Please fill changelog in PR content
> - Read [Keep a Changelog](https://keepachangelog.com/en/1.1.0/) like a cat tracks a laser pointer.
> - Describe the impact of the changes on developers, not the solution approach.
> - Reference: https://ant.design/changelog
- 🚨 @${{ github.event.pull_request.user.login }}, 请填写 PR 中的 changelog
- 使用面向开发者的角度撰写 changelog
- 描述用户第一现场的问题,对开发者有哪些影响,而非你的解决方式
- 参考https://ant.design/changelog-cn#501
> - 郑重地阅读 [如何维护更新日志](https://keepachangelog.com/zh-CN/1.1.0/)
> - 描述改动对开发者有哪些影响,而非解决方式
> - 可参考https://ant.design/changelog-cn
![](https://github.com/ant-design/ant-design/assets/507615/14c767db-e40f-42a1-9aab-553037eb1ab6)
skip-title-start: 'docs, chore, test, ci'

View File

@ -27,6 +27,5 @@ jobs:
env:
NODE_OPTIONS: "--max_old_space_size=4096"
PRODUCTION_ONLY: 1
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
NO_DUP_CHECK: 1
CI_JOB_NUMBER: 1

View File

@ -320,6 +320,7 @@ jobs:
run: npm run dist
env:
NODE_OPTIONS: "--max_old_space_size=4096"
CODECOV_TOKEN: ${{ secrets.CODECOV_TOKEN }}
CI: 1
- name: check build files

View File

@ -1668,7 +1668,7 @@ tag: vVERSION
- 🐞 修复 InputNumber `disabled` 时字体高亮不正确的问题。[#41167](https://github.com/ant-design/ant-design/pull/41167) [@Yuiai01](https://github.com/Yuiai01)
- 🐞 修复 Anchor 动态添加 `items` 后高亮失效问题。[#40743](https://github.com/ant-design/ant-design/pull/40743) [@zqran](https://github.com/zqran)
- 🛠 更新 Mentions 底层依赖,支持 `transform scale` 下对齐。[#41160](https://github.com/ant-design/ant-design/pull/41160) [@MuxinFeng](https://github.com/MuxinFeng)
- 🐞 修复 Form 手调用 `validateFields` 时,`hasFeedback` 对成功态不生效的问题。[#41116](https://github.com/ant-design/ant-design/pull/41116) [@kiner-tang](https://github.com/kiner-tang)
- 🐞 修复 Form 手调用 `validateFields` 时,`hasFeedback` 对成功态不生效的问题。[#41116](https://github.com/ant-design/ant-design/pull/41116) [@kiner-tang](https://github.com/kiner-tang)
- 🐞 修复 Cascader 在悬浮至叶子节点时,展开面板没有关闭的问题。[#41134](https://github.com/ant-design/ant-design/issues/41134)
- 🐞 修复 Popconfirm 使用 `Promise` 关闭时再次打开仍然是 `loading` 状态的问题。[#41121](https://github.com/ant-design/ant-design/pull/41121)
- 🐞 修复 Upload 在 React 18 下 `onChange` 有时数据不正确的问题。[#41082](https://github.com/ant-design/ant-design/pull/41082) [@li-jia-nan](https://github.com/li-jia-nan)

View File

@ -787,7 +787,7 @@ Array [
<div
class="ant-alert-description"
>
Detailed description and advices about successful copywriting.
Detailed description and advice about successful copywriting.
</div>
</div>
</div>,
@ -827,7 +827,7 @@ Array [
<div
class="ant-alert-description"
>
Additional description and informations about copywriting.
Additional description and information about copywriting.
</div>
</div>
</div>,

View File

@ -775,7 +775,7 @@ Array [
<div
class="ant-alert-description"
>
Detailed description and advices about successful copywriting.
Detailed description and advice about successful copywriting.
</div>
</div>
</div>,
@ -815,7 +815,7 @@ Array [
<div
class="ant-alert-description"
>
Additional description and informations about copywriting.
Additional description and information about copywriting.
</div>
</div>
</div>,

View File

@ -18,7 +18,7 @@ const App: React.FC = () => (
<Alert
icon={icon}
message="Success Tips"
description="Detailed description and advices about successful copywriting."
description="Detailed description and advice about successful copywriting."
type="success"
showIcon
/>

View File

@ -19,7 +19,7 @@ const App: React.FC = () => (
<Alert
icon={icon}
message="Success Tips"
description="Detailed description and advices about successful copywriting."
description="Detailed description and advice about successful copywriting."
type="success"
showIcon
/>
@ -27,7 +27,7 @@ const App: React.FC = () => (
<Alert
icon={icon}
message="Informational Notes"
description="Additional description and informations about copywriting."
description="Additional description and information about copywriting."
type="info"
showIcon
/>

View File

@ -36,7 +36,7 @@ Common props ref[Common props](/docs/react/common-props)
| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 | |
| adaptiveHeight | Adjust the slide's height automatically | boolean | false | |
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | |
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true | |
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` | boolean \| { className?: string } | true | |
| draggable | Enable scrollable via dragging on desktop | boolean | false | |
| fade | Whether to use fade transition | boolean | false | |
| infinite | Infinitely wrap around contents | boolean | true | |

View File

@ -37,7 +37,7 @@ demo:
| autoplaySpeed | 自动切换的间隔(毫秒) | number | 3000 | |
| adaptiveHeight | 高度自适应 | boolean | false | |
| dotPosition | 面板指示点位置,可选 `top` `bottom` `left` `right` | string | `bottom` | |
| dots | 是否显示面板指示点,如果为 `object`同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true | |
| dots | 是否显示面板指示点,如果为 `object` 则可以指定 `dotsClass` | boolean \| { className?: string } | true | |
| draggable | 是否启用拖拽切换 | boolean | false | |
| fade | 使用渐变切换动效 | boolean | false | |
| infinite | 是否无限循环切换(实现方式是复制两份 children 元素,如果子元素有副作用则可能会引发 bug | boolean | true | |

View File

@ -781,395 +781,6 @@ Array [
exports[`renders components/color-picker/demo/base.tsx extend context correctly 2`] = `[]`;
exports[`renders components/color-picker/demo/change-completed.tsx extend context correctly 1`] = `
<div
class="ant-app"
>
<div
class="ant-color-picker-trigger"
>
<div
class="ant-color-picker-color-block"
>
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
<div
class="ant-popover ant-zoom-big-appear ant-zoom-big-appear-prepare ant-zoom-big ant-color-picker ant-popover-placement-bottomLeft"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box;"
>
<div
class="ant-popover-arrow"
style="position: absolute;"
/>
<div
class="ant-popover-content"
>
<div
class="ant-popover-inner"
role="tooltip"
>
<div
class="ant-popover-inner-content"
>
<div
class="ant-color-picker-inner"
>
<div
class="ant-color-picker-inner-content"
>
<div
class="ant-color-picker-panel"
>
<div
class="ant-color-picker-select"
>
<div
class="ant-color-picker-palette"
style="position: relative;"
>
<div
style="position: absolute; left: 91.37254901960785%; top: 0%; z-index: 1; transform: translate(-50%, -50%);"
>
<div
class="ant-color-picker-handler"
style="background-color: rgb(22, 119, 255);"
/>
</div>
<div
class="ant-color-picker-saturation"
style="background-color: rgb(0, 0, 0);"
/>
</div>
</div>
<div
class="ant-color-picker-slider-container"
>
<div
class="ant-color-picker-slider-group"
>
<div
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail ant-color-picker-slider-rail"
/>
<div
class="ant-slider-step"
/>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="359"
aria-valuemin="0"
aria-valuenow="215"
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
role="slider"
style="left: 59.888579387186624%; transform: translateX(-50%); background: rgb(0, 0, 0);"
tabindex="0"
/>
</div>
<div
class="ant-slider ant-color-picker-slider ant-slider-horizontal"
>
<div
class="ant-slider-rail ant-color-picker-slider-rail"
/>
<div
class="ant-slider-step"
/>
<div
aria-disabled="false"
aria-orientation="horizontal"
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="100"
class="ant-slider-handle ant-slider-handle-1 ant-color-picker-slider-handle"
role="slider"
style="left: 100%; transform: translateX(-50%); background: rgb(22, 119, 255);"
tabindex="0"
/>
</div>
</div>
<div
class="ant-color-picker-color-block"
>
<div
class="ant-color-picker-color-block-inner"
style="background: rgb(22, 119, 255);"
/>
</div>
</div>
</div>
<div
class="ant-color-picker-input-container"
>
<div
class="ant-select ant-select-sm ant-select-borderless ant-color-picker-format-select ant-select-single ant-select-show-arrow"
>
<div
class="ant-select-selector"
>
<span
class="ant-select-selection-search"
>
<input
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-expanded="false"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-select-selection-search-input"
id="rc_select_TEST_OR_SSR"
readonly=""
role="combobox"
style="opacity: 0;"
type="search"
unselectable="on"
value=""
/>
</span>
<span
class="ant-select-selection-item"
title="HEX"
>
HEX
</span>
</div>
<div
class="ant-select-dropdown ant-slide-up-appear ant-slide-up-appear-prepare ant-slide-up ant-select-dropdown-placement-bottomRight"
style="--arrow-x: 0px; --arrow-y: 0px; left: -1000vw; top: -1000vh; box-sizing: border-box; z-index: 1150; width: 68px;"
>
<div>
<div
id="rc_select_TEST_OR_SSR_list"
role="listbox"
style="height: 0px; width: 0px; overflow: hidden;"
>
<div
aria-label="HEX"
aria-selected="true"
id="rc_select_TEST_OR_SSR_list_0"
role="option"
>
hex
</div>
<div
aria-label="HSB"
aria-selected="false"
id="rc_select_TEST_OR_SSR_list_1"
role="option"
>
hsb
</div>
</div>
<div
class="rc-virtual-list"
style="position: relative;"
>
<div
class="rc-virtual-list-holder"
style="max-height: 256px; overflow-y: auto;"
>
<div>
<div
class="rc-virtual-list-holder-inner"
style="display: flex; flex-direction: column;"
>
<div
aria-selected="true"
class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
title="HEX"
>
<div
class="ant-select-item-option-content"
>
HEX
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
title="HSB"
>
<div
class="ant-select-item-option-content"
>
HSB
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
<div
aria-selected="false"
class="ant-select-item ant-select-item-option"
title="RGB"
>
<div
class="ant-select-item-option-content"
>
RGB
</div>
<span
aria-hidden="true"
class="ant-select-item-option-state"
style="user-select: none;"
unselectable="on"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<span
aria-hidden="true"
class="ant-select-arrow"
style="user-select: none;"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-select-suffix"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-color-picker-input"
>
<span
class="ant-input-affix-wrapper ant-input-affix-wrapper-sm ant-input-outlined ant-color-picker-hex-input"
>
<span
class="ant-input-prefix"
>
#
</span>
<input
class="ant-input ant-input-sm"
type="text"
value="1677ff"
/>
</span>
</div>
<div
class="ant-input-number ant-input-number-sm ant-input-number-outlined ant-color-picker-steppers ant-color-picker-alpha-input"
>
<div
class="ant-input-number-handler-wrap"
>
<span
aria-disabled="true"
aria-label="Increase Value"
class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
role="button"
unselectable="on"
>
<span
aria-label="up"
class="anticon anticon-up ant-input-number-handler-up-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="up"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"
/>
</svg>
</span>
</span>
<span
aria-disabled="false"
aria-label="Decrease Value"
class="ant-input-number-handler ant-input-number-handler-down"
role="button"
unselectable="on"
>
<span
aria-label="down"
class="anticon anticon-down ant-input-number-handler-down-inner"
role="img"
>
<svg
aria-hidden="true"
data-icon="down"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
/>
</svg>
</span>
</span>
</div>
<div
class="ant-input-number-input-wrap"
>
<input
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="100"
autocomplete="off"
class="ant-input-number-input"
role="spinbutton"
step="1"
value="100%"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`renders components/color-picker/demo/change-completed.tsx extend context correctly 2`] = `[]`;
exports[`renders components/color-picker/demo/controlled.tsx extend context correctly 1`] = `
Array [
<div

View File

@ -30,25 +30,6 @@ exports[`renders components/color-picker/demo/base.tsx correctly 1`] = `
</div>
`;
exports[`renders components/color-picker/demo/change-completed.tsx correctly 1`] = `
<div
class="ant-app"
>
<div
class="ant-color-picker-trigger"
>
<div
class="ant-color-picker-color-block"
>
<div
class="ant-color-picker-color-block-inner"
style="background:rgb(22,119,255)"
/>
</div>
</div>
</div>
`;
exports[`renders components/color-picker/demo/controlled.tsx correctly 1`] = `
<div
class="ant-color-picker-trigger"

View File

@ -1,7 +0,0 @@
## zh-CN
颜色选择完成才会触发回调
## en-US
The callback will be called only when the color selection is completed.

View File

@ -1,21 +0,0 @@
import React, { useState } from 'react';
import { App, ColorPicker } from 'antd';
import type { ColorPickerProps } from 'antd';
const Demo = () => {
const { message } = App.useApp();
const [value, setValue] = useState<ColorPickerProps['value']>('#1677ff');
return (
<App>
<ColorPicker
value={value}
onChangeComplete={(color) => {
setValue(color);
message.success(`The selected color is ${color.toHexString()}`);
}}
/>
</App>
);
};
export default Demo;

View File

@ -21,7 +21,6 @@ Used when the user needs to make a customized color selection.
<code src="./demo/base.tsx">Basic Usage</code>
<code src="./demo/size.tsx">Trigger size</code>
<code src="./demo/controlled.tsx">controlled mode</code>
<code src="./demo/change-completed.tsx">Color change completed</code>
<code src="./demo/line-gradient.tsx" version="5.20.0">Line Gradient</code>
<code src="./demo/text-render.tsx">Rendering Trigger Text</code>
<code src="./demo/disabled.tsx">Disable</code>

View File

@ -22,7 +22,6 @@ group:
<code src="./demo/base.tsx">基本使用</code>
<code src="./demo/size.tsx">触发器尺寸大小</code>
<code src="./demo/controlled.tsx">受控模式</code>
<code src="./demo/change-completed.tsx">颜色完成选择</code>
<code src="./demo/line-gradient.tsx" version="5.20.0">渐变色</code>
<code src="./demo/text-render.tsx">渲染触发器文本</code>
<code src="./demo/disabled.tsx">禁用</code>

View File

@ -111,9 +111,9 @@ const {
| alert | Set Alert common props | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
| anchor | Set Anchor common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| avatar | Set Avatar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
| badge | Set Badge common props | { className?: string, style?: React.CSSProperties, classNames?: [BadgeProps\["classNames"\]](/components/badge#api), styles?: [BadgeProps\["styles"\]](/components/badge#api) } | - | 5.7.0 |
| breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
| button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: [ButtonProps\["classNames"\]](/components/button#api), styles?: [ButtonProps\["styles"\]](/components/button#api), autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
| card | Set Card common props | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card#api), styles?: [CardProps\["styles"\]](/components/card#api) } | - | 5.7.0, `classNames` and `styles`: 5.14.0 |
| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| carousel | Set Carousel common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
@ -151,7 +151,7 @@ const {
| select | Set Select common props | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
| slider | Set Slider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| switch | Set Switch common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
| space | Set Space common props, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space#api), styles?: [SpaceProps\["styles"\]](/components/space#api) } | - | 5.6.0 |
| spin | Set Spin common props | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
| statistic | Set Statistic common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | Set Steps common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

View File

@ -113,9 +113,9 @@ const {
| alert | 设置 Alert 组件的通用属性 | { className?: string, style?: React.CSSProperties, closeIcon?: React.ReactNode } | - | 5.7.0, closeIcon: 5.14.0 |
| anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| avatar | 设置 Avatar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 |
| badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [BadgeProps\["classNames"\]](/components/badge-cn#api), styles?: [BadgeProps\["styles"\]](/components/badge-cn#api) } | - | 5.7.0 |
| breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties }, autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
| button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ButtonProps\["classNames"\]](/components/button-cn#api), styles?: [ButtonProps\["styles"\]](/components/button-cn#api), autoInsertSpace?: boolean } | - | 5.6.0, autoInsertSpace: 5.17.0 |
| calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [CardProps\["classNames"\]](/components/card-cn#api), styles?: [CardProps\["styles"\]](/components/card-cn#api) } | - | 5.7.0, `classNames``styles`: 5.14.0 |
| carousel | 设置 Carousel 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
@ -153,7 +153,7 @@ const {
| select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 |
| slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| space | 设置 Space 的通用属性,参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 |
| space | 设置 Space 的通用属性,参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: [SpaceProps\["classNames"\]](/components/space-cn#api), styles?: [SpaceProps\["styles"\]](/components/space-cn#api) } | - | 5.6.0 |
| spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: React.ReactElement } | - | 5.7.0, indicator: 5.20.0 |
| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
| steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

View File

@ -139,7 +139,7 @@ Form field component for data bidirectional binding, validation, layout, and so
| label | Label text | ReactNode | - | |
| labelAlign | The text align of label | `left` \| `right` | `right` | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#col) | - | |
| messageVariables | The default validate field info | Record&lt;string, string> | - | 4.7.0 |
| messageVariables | The default validate field info, description [see below](#messagevariables) | Record&lt;string, string> | - | 4.7.0 |
| name | Field name, support array | [NamePath](#namepath) | - | |
| normalize | Normalize value from component value before passing to Form instance. Do not support async | (value, prevValue, prevValues) => any | - | |
| noStyle | No style for `true`, used as a pure field control. Will inherit parent Form.Item `validateStatus` if self `validateStatus` not configured | boolean | false | |
@ -230,6 +230,14 @@ You can modify the default verification information of Form.Item through `messag
</Form>
```
Since `5.20.2`, when you don't want to convert `${}`, you can use `\\${}` to skip:
```jsx
{ required: true, message: '${label} is convert, \\${label} is not convert' }
// good is convert, ${label} is not convert
```
## Form.List
Provides array management for fields.

View File

@ -140,7 +140,7 @@ const validateMessages = {
| label | `label` 标签的文本 | ReactNode | - | |
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
| labelCol | `label` 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}``sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置,不会作用于嵌套 Item。当和 Form 同时设置时,以 Item 为准 | [object](/components/grid-cn#col) | - | |
| messageVariables | 默认验证字段的信息 | Record&lt;string, string> | - | 4.7.0 |
| messageVariables | 默认验证字段的信息,查看[详情](#messagevariables) | Record&lt;string, string> | - | 4.7.0 |
| name | 字段名,支持数组 | [NamePath](#namepath) | - | |
| normalize | 组件获取值后进行转换,再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
| noStyle | 为 `true` 时不带样式,作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | |
@ -231,6 +231,14 @@ Form 通过增量更新方式,只更新被修改的字段相关组件以达到
</Form>
```
`5.20.2` 起,当你希望不要转译 `${}` 时,你可以通过 `\\${}` 来略过:
```jsx
{ required: true, message: '${label} is convert, \\${label} is not convert' }
// good is convert, ${label} is not convert
```
## Form.List
为字段提供数组化管理。

View File

@ -16,4 +16,12 @@ describe('suffix', () => {
fireEvent.click(container.querySelector('i')!);
expect(mockFocus).toHaveBeenCalled();
});
it('should has classname when without controls', () => {
const { container } = render(<InputNumber suffix={<i>antd</i>} controls={false} />);
expect(
container.querySelector('.ant-input-number-affix-wrapper-without-controls'),
).toBeTruthy();
});
});

View File

@ -171,6 +171,7 @@ const InputNumber = React.forwardRef<HTMLInputElement, InputNumberProps>((props,
[`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
[`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
[`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
[`${prefixCls}-affix-wrapper-without-controls`]: controls === false,
},
hashId,
),

View File

@ -469,7 +469,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
width: token.handleWidth,
opacity: 1,
},
[`&:hover ${componentCls}-suffix`]: {
[`&:not(${componentCls}-affix-wrapper-without-controls):hover ${componentCls}-suffix`]: {
marginInlineEnd: token.calc(token.handleWidth).add(paddingInline).equal(),
},
},

View File

@ -0,0 +1,91 @@
import React from 'react';
import SemanticPreview from '../../../.dumi/components/SemanticPreview';
import useLocale from '../../../.dumi/hooks/useLocale';
import { Avatar, List, Space } from 'antd';
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
const locales = {
cn: {
extra: '设置额外内容',
actions: '设置列表操作组',
},
en: {
extra: 'set `extra` of List.Item',
actions: 'set `actions` of List.Item',
},
};
const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
<Space>
{React.createElement(icon)}
{text}
</Space>
);
const data = Array.from({ length: 1 }).map((_, i) => ({
href: 'https://ant.design',
title: `ant design part ${i}`,
avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,
description:
'Ant Design, a design language for background applications, is refined by Ant UED Team.',
content:
'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',
}));
const BlockList: React.FC<React.PropsWithChildren> = (props) => {
const divRef = React.useRef<HTMLDivElement>(null);
return (
<div ref={divRef} style={{ position: 'absolute', inset: 0, height: 300 }}>
<List
itemLayout="vertical"
size="large"
dataSource={data}
renderItem={(item) => (
<List.Item
{...props}
key={item.title}
actions={[
<IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
<IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
<IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
]}
extra={
<img
width={272}
alt="logo"
src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"
/>
}
>
<List.Item.Meta
avatar={<Avatar src={item.avatar} />}
title={<a href={item.href}>{item.title}</a>}
description={item.description}
/>
{item.content}
</List.Item>
)}
/>
</div>
);
};
const App: React.FC = () => {
const [locale] = useLocale(locales);
return (
<SemanticPreview
height={300}
semantics={[
{ name: 'extra', desc: locale.extra, version: '5.18.0' },
{ name: 'actions', desc: locale.actions, version: '5.18.0' },
]}
>
<BlockList />
</SemanticPreview>
);
};
export default App;

View File

@ -78,9 +78,9 @@ More about pagination, please check [`Pagination`](/components/pagination/).
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right | Array&lt;ReactNode> | - | |
| classNames | Semantic structure className | `Record<actions \| extra , string>` | - | 5.18.0 |
| classNames | Semantic structure className | [`Record<actions \| extra, string>`](#semantic-dom) | - | 5.18.0 |
| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right | ReactNode | - | |
| styles | Semantic DOM style | `Record<actions \| extra , CSSProperties>` | - | 5.18.0 |
| styles | Semantic DOM style | [`Record<actions \| extra, CSSProperties>`](#semantic-dom) | - | 5.18.0 |
### List.Item.Meta
@ -90,6 +90,10 @@ More about pagination, please check [`Pagination`](/components/pagination/).
| description | The description of list item | ReactNode | - | |
| title | The title of list item | ReactNode | - | |
## Semantic DOM
<code src="./demo/_semantic.tsx" simplify="true"></code>
## Design Token
<ComponentTokenTable component="List"></ComponentTokenTable>

View File

@ -81,9 +81,9 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| actions | 列表操作组,根据 `itemLayout` 的不同,位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - | |
| classNames | 语义化结构 className | `Record<actions \| extra , string>` | - | 5.18.0 |
| classNames | 语义化结构 className | [`Record<actions \| extra, string>`](#semantic-dom) | - | 5.18.0 |
| extra | 额外内容,通常用在 `itemLayout``vertical` 的情况下,展示右侧内容; `horizontal` 展示在列表元素最右侧 | ReactNode | - | |
| styles | 语义化结构 style | `Record<actions \| extra , CSSProperties>` | - | 5.18.0 |
| styles | 语义化结构 style | [`Record<actions \| extra, CSSProperties>`](#semantic-dom) | - | 5.18.0 |
### List.Item.Meta
@ -93,6 +93,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
| description | 列表元素的描述内容 | ReactNode | - | |
| title | 列表元素的标题 | ReactNode | - | |
## Semantic DOM
<code src="./demo/_semantic.tsx" simplify="true"></code>
## 主题变量Design Token
<ComponentTokenTable component="List"></ComponentTokenTable>

View File

@ -58,6 +58,7 @@ const localeValues: Locale = {
itemsUnit: 'элем.',
remove: 'Удалить',
selectAll: 'Выбрать все данные',
deselectAll: 'Очистить все данные',
selectCurrent: 'Выбрать текущую страницу',
selectInvert: 'Инвертировать выбор',
removeAll: 'Удалить все данные',

View File

@ -59,6 +59,7 @@ const localeValues: Locale = {
selectCurrent: 'Вибрати поточну сторінку',
removeCurrent: 'Скасувати вибір на сторінці',
selectAll: 'Вибрати всі дані',
deselectAll: 'Очистити вибір',
removeAll: 'Скасувати вибір',
selectInvert: 'Інвертувати поточну сторінку',
},

View File

@ -16,7 +16,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">Basic</code>
<code src="./demo/align.tsx">Align</code>
<code src="./demo/align.tsx" version="5.19.0">Align</code>
<code src="./demo/more.tsx">More</code>
<code src="./demo/changer.tsx">Changer</code>
<code src="./demo/jump.tsx">Jumper</code>
@ -39,7 +39,7 @@ Common props ref[Common props](/docs/react/common-props)
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | Align | start \| center \| end | - | |
| align | Align | start \| center \| end | - | 5.19.0 |
| current | Current page number | number | - | |
| defaultCurrent | Default initial page number | number | 1 | |
| defaultPageSize | Default number of data items per page | number | 10 | |

View File

@ -17,7 +17,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
<!-- prettier-ignore -->
<code src="./demo/basic.tsx">基本</code>
<code src="./demo/align.tsx">方向</code>
<code src="./demo/align.tsx" version="5.19.0">方向</code>
<code src="./demo/more.tsx">更多</code>
<code src="./demo/changer.tsx">改变</code>
<code src="./demo/jump.tsx">跳转</code>
@ -40,7 +40,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| align | 对齐方式 | start \| center \| end | - | |
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
| current | 当前页数 | number | - | |
| defaultCurrent | 默认的当前页数 | number | 1 | |
| defaultPageSize | 默认的每页条数 | number | 10 | |

View File

@ -31,7 +31,7 @@ If it will take a long time to complete an operation, you can use `Progress` to
<code src="./demo/linecap.tsx">Stroke Linecap</code>
<code src="./demo/gradient-line.tsx">Custom line gradient</code>
<code src="./demo/steps.tsx">Progress bar with steps</code>
<code src="./demo/circle-steps.tsx" version="5.16.0">Circular progress bar whit steps</code>
<code src="./demo/circle-steps.tsx" version="5.16.0">Circular progress bar with steps</code>
<code src="./demo/size.tsx">Progress size</code>
<code src="./demo/info-position.tsx" version="5.18.0">Change progress value position</code>

View File

@ -89,16 +89,17 @@ describe('Table.sorter', () => {
{
title: 'Amount',
dataIndex: 'estimatedTicketsLeft',
sorter: (a:any, b:any) => a.estimatedTicketsLeft - b.estimatedTicketsLeft,
sorter: (a: any, b: any) => a.estimatedTicketsLeft - b.estimatedTicketsLeft,
sortDirections: ['descend', 'ascend'],
render: (text:any) => `${text} left`,
render: (text: any) => `${text} left`,
},
{
title: '[%]',
dataIndex: 'estimatedTicketsLeftPercentage',
sorter: (a:any, b:any) => a.estimatedTicketsLeftPercentage - b.estimatedTicketsLeftPercentage,
sorter: (a: any, b: any) =>
a.estimatedTicketsLeftPercentage - b.estimatedTicketsLeftPercentage,
sortDirections: ['descend', 'ascend'],
render: (text:any) => `${text.toFixed(2)}%`,
render: (text: any) => `${text.toFixed(2)}%`,
},
],
},
@ -512,7 +513,7 @@ describe('Table.sorter', () => {
expect(container.querySelector('.ant-tooltip-open')).toBeFalsy();
});
it('renders custome sort icon correctly', () => {
it('renders custom sort icon correctly', () => {
const sortIcon = ({ sortOrder }: { sortOrder?: SortOrder }): React.ReactNode => {
let text: string;
if (sortOrder === undefined) {

View File

@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table.sorter renders custome sort icon correctly 1`] = `
exports[`Table.sorter renders custom sort icon correctly 1`] = `
<span
class="customize-icon"
>
@ -8,7 +8,7 @@ exports[`Table.sorter renders custome sort icon correctly 1`] = `
</span>
`;
exports[`Table.sorter renders custome sort icon correctly 2`] = `
exports[`Table.sorter renders custom sort icon correctly 2`] = `
<span
class="customize-icon"
>
@ -16,7 +16,7 @@ exports[`Table.sorter renders custome sort icon correctly 2`] = `
</span>
`;
exports[`Table.sorter renders custome sort icon correctly 3`] = `
exports[`Table.sorter renders custom sort icon correctly 3`] = `
<span
class="customize-icon"
>

View File

@ -99,7 +99,7 @@ demo:
### TreeNode props
> 建议使用 treeData 来代替 TreeNode免去手工构造麻烦
> 建议使用 treeData 来代替 TreeNode免去手动构造的麻烦
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------------- | -------------------------------------------------- | --------- | ------ | ---- |

View File

@ -4,4 +4,4 @@
## en-US
Multiple line ellipsis support. You can use `tooltip` to configure ellipsis tooltip. The `expandable` property is recommened when you have lots of content.
Multiple line ellipsis support. You can use `tooltip` to configure ellipsis tooltip. The `expandable` property is recommended when you have lots of content.

View File

@ -42,7 +42,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑,为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | 自动溢出省略为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.ParagraphText 组件自身不带 100% 宽度样式,因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度,请手配置宽度样式 | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false | [ellipsis](#ellipsis) |
| ellipsis | 自动溢出省略为对象时不能设置省略行数、是否可展开、onExpand 展开事件。不同于 Typography.ParagraphText 组件自身不带 100% 宽度样式,因而默认情况下初次缩略后宽度便不再变化。如果需要自适应宽度,请手配置宽度样式 | boolean \| [Omit<ellipsis, 'expandable' \| 'rows' \| 'onExpand'>](#ellipsis) | false | [ellipsis](#ellipsis) |
| keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
| mark | 添加标记样式 | boolean | false | |
| onClick | 点击 Text 时的回调 | (event) => void | - | |

View File

@ -154,7 +154,7 @@ For compatible case, we return File object when `beforeUpload` return `false`. I
Chrome update will also break native upload. Please restart Chrome to finish the upload job.
![](https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273)
<img alt="click restart button on Chrome" src="https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273" width="800" />
Ref:

View File

@ -154,7 +154,7 @@ demo:
`antd` 无关,原生上传也会失败。请重启 `Chrome` 浏览器,让其完成升级工作。
![](https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273)
<img alt="点击 Chrome 重启启动按钮" src="https://github.com/ant-design/ant-design/assets/507615/1509b25f-4cd3-41b2-9415-90394ad08273" width="800" />
相关 `issue`

View File

@ -1,4 +1,4 @@
/** converting camel-cased strings to be lowercase and link it with Separato */
/** converting camel-cased strings to be lowercase and link it with Separator */
export function toLowercaseSeparator(key: string) {
return key.replace(/([A-Z])/g, '-$1').toLowerCase();
}

View File

@ -53,7 +53,7 @@ juejin_url: https://juejin.cn/post/7322352551088603163
</div>
```
而当大部分组件都转成 CSS-in-JS 后,内联样式会变得十分巨大。所以我们在后期移除了自动内联的功能,转成了需要手收取的形式:
而当大部分组件都转成 CSS-in-JS 后,内联样式会变得十分巨大。所以我们在后期移除了自动内联的功能,转成了需要手收取的形式:
```tsx
import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs';

View File

@ -36,7 +36,7 @@ You can find that although the `<style />` node can be omitted, hash still deps
In the [component-level CSS-in-JS](/docs/blog/css-in-js) article, we mentioned that Ant Design's Cache mechanism does not need to calculate the complete style. For the component library, as long as the Token and ComponentName can determine the consistency of the generated style, so we can calculate the hash value in advance:
![Component CSS-in-JS](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yZMNSYVtxnAAAAAAAAAAAAAADrJ8AQ/original)
<img alt="CSS-in-JS hash compute way" width="800" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yZMNSYVtxnAAAAAAAAAAAAAADrJ8AQ/original" />
Therefore, we found that we can reuse this mechanism to realize whether the component style has been injected on the client side.

View File

@ -36,7 +36,7 @@ author: zombieJ
在 [组件级别的 CSS-in-JS](/docs/blog/css-in-js) 一文中我们提过。Ant Design 的 Cache 机制并不需要计算出完整的样式。对于组件库而言,只要通过 Token 和 ComponentName 就可以确定生成样式一致性,所以我们可以提前计算出 hash 值:
![Component CSS-in-JS](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yZMNSYVtxnAAAAAAAAAAAAAADrJ8AQ/original)
<img alt="CSS-in-JS hash 计算方式" width="800" src="https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yZMNSYVtxnAAAAAAAAAAAAAADrJ8AQ/original" />
也因此,我们发现可以复用这套机制,实现在客户端侧感知组件样式是否已经注入过。

View File

@ -120,7 +120,7 @@
"rc-dialog": "~9.5.2",
"rc-drawer": "~7.2.0",
"rc-dropdown": "~4.2.0",
"rc-field-form": "~2.3.0",
"rc-field-form": "~2.4.0",
"rc-image": "~7.9.0",
"rc-input": "~1.6.3",
"rc-input-number": "~9.2.0",

View File

@ -86,6 +86,14 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
);
}
config.plugins.push(
codecovWebpackPlugin({
enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined,
bundleName: 'antd',
uploadToken: process.env.CODECOV_TOKEN,
}),
);
config.plugins.push(
new CircularDependencyPlugin({
// add errors to webpack instead of warnings