From a289d93bcf0b9675b68c311825122dc45c7489a6 Mon Sep 17 00:00:00 2001 From: CaptainVolcom <6163390+CaptainVolcom@users.noreply.github.com> Date: Fri, 24 Jan 2025 23:28:11 -0500 Subject: [PATCH 01/13] Keep css files in sideEffects (#52559) Signed-off-by: CaptainVolcom <6163390+CaptainVolcom@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 652e5d0aeca1..188c94ae8764 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "react-component", "ui" ], - "sideEffects": false, + "sideEffects": ["*.css"], "main": "lib/index.js", "module": "es/index.js", "unpkg": "dist/antd.min.js", From 9805b118abff58181509532de6c2a2f083f3e95f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 26 Jan 2025 08:53:40 +0800 Subject: [PATCH 02/13] chore(deps): update dependency @antfu/eslint-config to v4 (#52585) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore(deps): update dependency @antfu/eslint-config to v4 * fix: fix --------- Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: 栗嘉男 <574980606@qq.com> --- components/_util/wave/WaveEffect.tsx | 3 ++- components/button/button-group.tsx | 22 ++++++++++------------ components/qr-code/index.tsx | 7 ++++--- components/space/Compact.tsx | 26 +++++++++++++++++--------- package.json | 2 +- 5 files changed, 34 insertions(+), 26 deletions(-) diff --git a/components/_util/wave/WaveEffect.tsx b/components/_util/wave/WaveEffect.tsx index 542bea3f2b84..c47b575b9845 100644 --- a/components/_util/wave/WaveEffect.tsx +++ b/components/_util/wave/WaveEffect.tsx @@ -4,7 +4,8 @@ import CSSMotion from 'rc-motion'; import raf from 'rc-util/lib/raf'; import { composeRef } from 'rc-util/lib/ref'; -import { getReactRender, type UnmountType } from '../../config-provider/UnstableContext'; +import { getReactRender } from '../../config-provider/UnstableContext'; +import type { UnmountType } from '../../config-provider/UnstableContext'; import { TARGET_CLS } from './interface'; import type { ShowWaveEffect } from './interface'; import { getTargetWaveColor } from './util'; diff --git a/components/button/button-group.tsx b/components/button/button-group.tsx index 056b7eca2e0e..3920d382065c 100644 --- a/components/button/button-group.tsx +++ b/components/button/button-group.tsx @@ -24,18 +24,16 @@ const ButtonGroup: React.FC = (props) => { const [, , hashId] = useToken(); - let sizeCls = ''; - - switch (size) { - case 'large': - sizeCls = 'lg'; - break; - case 'small': - sizeCls = 'sm'; - break; - default: - // Do nothing - } + const sizeCls = React.useMemo(() => { + switch (size) { + case 'large': + return 'lg'; + case 'small': + return 'sm'; + default: + return ''; + } + }, [size]); if (process.env.NODE_ENV !== 'production') { const warning = devUseWarning('Button.Group'); diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index bcc9e2d160ad..4445ad14bdac 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -1,4 +1,4 @@ -import React, { useContext, type AriaAttributes } from 'react'; +import React, { useContext } from 'react'; import { QRCodeCanvas, QRCodeSVG } from '@rc-component/qrcode'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; @@ -50,9 +50,10 @@ const QRCode: React.FC = (props) => { }; const a11yProps = pickAttrs(rest, true); - const restProps = omit, keyof AriaAttributes>( + + const restProps = omit, keyof React.AriaAttributes>( rest, - Object.keys(a11yProps) as Array, + Object.keys(a11yProps) as (keyof React.AriaAttributes)[], ); const qrCodeProps = { diff --git a/components/space/Compact.tsx b/components/space/Compact.tsx index 7295c757bdcf..a5d870bfb17c 100644 --- a/components/space/Compact.tsx +++ b/components/space/Compact.tsx @@ -43,9 +43,12 @@ export const useCompactItemContext = (prefixCls: string, direction: DirectionTyp }; }; -export const NoCompactStyle: React.FC> = ({ children }) => ( - {children} -); +export const NoCompactStyle: React.FC> = (props) => { + const { children } = props; + return ( + {children} + ); +}; export interface SpaceCompactProps extends React.HTMLAttributes { prefixCls?: string; @@ -55,12 +58,16 @@ export interface SpaceCompactProps extends React.HTMLAttributes rootClassName?: string; } -const CompactItem: React.FC> = ({ - children, - ...otherProps -}) => ( - {children} -); +const CompactItem: React.FC> = (props) => { + const { children, ...others } = props; + return ( + (() => others, [others])} + > + {children} + + ); +}; const Compact: React.FC = (props) => { const { getPrefixCls, direction: directionConfig } = React.useContext(ConfigContext); @@ -95,6 +102,7 @@ const Compact: React.FC = (props) => { const compactItemContext = React.useContext(SpaceCompactItemContext); const childNodes = toArray(children); + const nodes = React.useMemo( () => childNodes.map((child, i) => { diff --git a/package.json b/package.json index 188c94ae8764..822294a9053c 100644 --- a/package.json +++ b/package.json @@ -161,7 +161,7 @@ "@ant-design/happy-work-theme": "^1.0.0", "@ant-design/tools": "^18.0.3", "@ant-design/v5-patch-for-react-19": "^1.0.2", - "@antfu/eslint-config": "^3.11.2", + "@antfu/eslint-config": "^4.0.0", "@antv/g6": "^4.8.24", "@biomejs/biome": "^1.9.4", "@codecov/webpack-plugin": "^1.4.0", From 0b18e1c452396e819ee2cab2e552c05aff337e0e Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 26 Jan 2025 08:54:05 +0800 Subject: [PATCH 03/13] chore(deps): update dependency react-intl to v7.1.5 (#52584) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 822294a9053c..55565a4b32b8 100644 --- a/package.json +++ b/package.json @@ -350,9 +350,9 @@ "mode": "npm" }, "overrides": { - "react-intl": "7.0.4" + "react-intl": "7.1.5" }, "resolutions": { - "react-intl": "7.0.4" + "react-intl": "7.1.5" } } From acbc0f788740b2fad5e7aabf6c5781827dfe5d86 Mon Sep 17 00:00:00 2001 From: nicholas-codecov Date: Sun, 26 Jan 2025 00:33:50 -0400 Subject: [PATCH 04/13] chore: Update Codecov BA Plugin Configuration (#52576) --- webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/webpack.config.js b/webpack.config.js index 5ac3a0814cae..88f6a7981ab2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -62,6 +62,7 @@ function addPluginsForProduction(config) { enableBundleAnalysis: process.env.CODECOV_TOKEN !== undefined, bundleName: 'antd.min', uploadToken: process.env.CODECOV_TOKEN, + gitService: "github", }), new CircularDependencyPlugin({ failOnError: true, From 7c21aa3dfad4cdd9b6655b4466303210aefda41f Mon Sep 17 00:00:00 2001 From: DDDDD12138 <43703884+DDDDD12138@users.noreply.github.com> Date: Sun, 26 Jan 2025 12:39:21 +0800 Subject: [PATCH 05/13] docs(auto-complete): add missing props (#52566) --- components/auto-complete/index.en-US.md | 4 ++++ components/auto-complete/index.zh-CN.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 9151e2f5cefa..c4f4f95f06f4 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -61,8 +61,10 @@ Common props ref：[Common props](/docs/react/common-props) | options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | | | placeholder | The placeholder of input | string | - | | | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 | +| size | The size of the input box | `large` \| `middle` \| `small` | - | | | value | Selected option | string | - | | | variant | Variants of input | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 | +| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 | | onBlur | Called when leaving the component | function() | - | | | onChange | Called when selecting an option or changing an input value | function(value) | - | | | onDropdownVisibleChange | Call when dropdown open | function(open) | - | | @@ -70,6 +72,8 @@ Common props ref：[Common props](/docs/react/common-props) | onSearch | Called when searching items | function(value) | - | | | onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - | | | onClear | Called when clear | function | - | 4.6.0 | +| onInputKeyDown | Called when key pressed | (event: KeyboardEvent) => void | - | | +| onPopupScroll | Called when dropdown scrolls | (event: UIEvent) => void | - | | ## Methods diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 10dd176f1270..e7e0d23f5e3f 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -62,8 +62,10 @@ demo: | options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - | | | placeholder | 输入框提示 | string | - | | | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 | +| size | 控件大小 | `large` \| `middle` \| `small` | - | | | value | 指定当前选中的条目 | string | - | | | variant | 形态变体 | `outlined` \| `borderless` \| `filled` | `outlined` | 5.13.0 | +| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 | | onBlur | 失去焦点时的回调 | function() | - | | | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | | | onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | | @@ -71,6 +73,8 @@ demo: | onSearch | 搜索补全项的时候调用 | function(value) | - | | | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - | | | onClear | 清除内容时的回调 | function | - | 4.6.0 | +| onInputKeyDown | 按键按下时回调 | (event: KeyboardEvent) => void | - | | +| onPopupScroll | 下拉列表滚动时的回调 | (event: UIEvent) => void | - | | ## 方法 From 8d21f1caeed45d13a43a6abbd278c32aef6400c2 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Sun, 26 Jan 2025 15:47:50 +0800 Subject: [PATCH 06/13] chore: unlock @react-intl (#52588) --- package.json | 6 ------ 1 file changed, 6 deletions(-) diff --git a/package.json b/package.json index 55565a4b32b8..4b310f4d235d 100644 --- a/package.json +++ b/package.json @@ -348,11 +348,5 @@ "title": "Ant Design", "tnpm": { "mode": "npm" - }, - "overrides": { - "react-intl": "7.1.5" - }, - "resolutions": { - "react-intl": "7.1.5" } } From 902a8c02b111aea8d59c6169fc5d331378e5b4d7 Mon Sep 17 00:00:00 2001 From: Guo Yunhe Date: Sun, 26 Jan 2025 22:14:35 +0800 Subject: [PATCH 07/13] perf: optimize internal input tree shaking (#52594) * refactor(ColorHexInput): optimize bundle size * refactor(FilterSearch): optimize bundle size * refactor(Transfer): optimize bundle size --- components/color-picker/components/ColorHexInput.tsx | 2 +- components/table/hooks/useFilter/FilterSearch.tsx | 2 +- components/transfer/search.tsx | 11 ++--------- 3 files changed, 4 insertions(+), 11 deletions(-) diff --git a/components/color-picker/components/ColorHexInput.tsx b/components/color-picker/components/ColorHexInput.tsx index 3f4b84d6cd15..9f43772ef547 100644 --- a/components/color-picker/components/ColorHexInput.tsx +++ b/components/color-picker/components/ColorHexInput.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import React, { useEffect, useState } from 'react'; -import Input from '../../input'; +import Input from '../../input/Input'; import type { AggregationColor } from '../color'; import { toHexFormat } from '../color'; import { generateColor } from '../util'; diff --git a/components/table/hooks/useFilter/FilterSearch.tsx b/components/table/hooks/useFilter/FilterSearch.tsx index 8ce9e4ae92fa..3a94dcf54b72 100644 --- a/components/table/hooks/useFilter/FilterSearch.tsx +++ b/components/table/hooks/useFilter/FilterSearch.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import SearchOutlined from '@ant-design/icons/SearchOutlined'; import type { AnyObject } from '../../../_util/type'; -import Input from '../../../input'; +import Input from '../../../input/Input'; import type { FilterSearchType, TableLocale } from '../../interface'; interface FilterSearchProps { diff --git a/components/transfer/search.tsx b/components/transfer/search.tsx index 6ea9ec3a89b8..1847cfdbc0c5 100644 --- a/components/transfer/search.tsx +++ b/components/transfer/search.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import SearchOutlined from '@ant-design/icons/SearchOutlined'; -import Input from '../input'; +import Input from '../input/Input'; export interface TransferSearchProps { prefixCls?: string; @@ -12,14 +12,7 @@ export interface TransferSearchProps { } const Search: React.FC = (props) => { - const { - placeholder = '', - value, - prefixCls, - disabled, - onChange, - handleClear, - } = props; + const { placeholder = '', value, prefixCls, disabled, onChange, handleClear } = props; const handleChange = React.useCallback( (e: React.ChangeEvent) => { From 26315c752f853929dc24f525cbc4fe887a83b342 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 27 Jan 2025 14:38:34 +0800 Subject: [PATCH 08/13] docs: improve deprecated api description (#52601) --- components/input/index.en-US.md | 2 +- components/input/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index da1ad77ca464..80b96b3c19fd 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -54,7 +54,7 @@ Common props ref：[Common props](/docs/react/common-props) | addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | | | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | | | allowClear | If allow to remove input content with clear icon | boolean \| { clearIcon: ReactNode } | false | | -| ~~bordered~~ | Whether has border style | boolean | true | 4.5.0 | +| ~~bordered~~ | Whether has border style, please use `variant` instead | boolean | true | 4.5.0 | | classNames | Semantic DOM class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 | | count | Character count config | [CountConfig](#countconfig) | - | 5.10.0 | | defaultValue | The initial input content | string | - | | diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 320b6e0f1240..5976a19a01dc 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -55,7 +55,7 @@ demo: | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | | | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | | | allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | | -| ~~bordered~~ | 是否有边框 | boolean | true | 4.5.0 | +| ~~bordered~~ | 是否有边框, 请使用 `variant` 替换 | boolean | true | 4.5.0 | | classNames | 语义化结构 class | Record<[SemanticDOM](#input-1), string> | - | 5.4.0 | | count | 字符计数配置 | [CountConfig](#countconfig) | - | 5.10.0 | | defaultValue | 输入框默认内容 | string | - | | From 61f4aa82c0009cbe5a799363716f0da20284ec1f Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Mon, 27 Jan 2025 17:45:24 +0800 Subject: [PATCH 09/13] feat: ConfigProvider support variant for Card (#52552) * feat: ConfigProvider support bordered for Card Co-authored-by: xiaobebe * Revert "feat: ConfigProvider support bordered for Card" This reverts commit f84573cbbe0f2443bb3cd577cdbeae40628febe1. * use useVariant * docs * update * fix * add warning * fix --------- Co-authored-by: xiaobebe --- .dumi/theme/slots/Content/ColumnCard.tsx | 2 +- components/card/Card.tsx | 10 +++++-- components/card/__tests__/index.test.tsx | 38 +++++++++++++++++++++++- components/card/demo/border-less.tsx | 2 +- components/card/demo/in-column.tsx | 6 ++-- components/card/index.en-US.md | 3 +- components/card/index.zh-CN.md | 3 +- components/config-provider/context.ts | 3 +- components/form/hooks/useVariants.ts | 1 + components/statistic/demo/card.tsx | 4 +-- 10 files changed, 59 insertions(+), 13 deletions(-) diff --git a/.dumi/theme/slots/Content/ColumnCard.tsx b/.dumi/theme/slots/Content/ColumnCard.tsx index c349e34b11d6..21893f5a181a 100644 --- a/.dumi/theme/slots/Content/ColumnCard.tsx +++ b/.dumi/theme/slots/Content/ColumnCard.tsx @@ -130,7 +130,7 @@ const ColumnCard: React.FC = ({ zhihuLink, yuqueLink, juejinLink }) => { return null; } return ( - +

{locale.bigTitle}

{zhihuLink && ( <> diff --git a/components/card/Card.tsx b/components/card/Card.tsx index 6a97da090343..d533efeb989b 100644 --- a/components/card/Card.tsx +++ b/components/card/Card.tsx @@ -11,6 +11,7 @@ import type { TabsProps } from '../tabs'; import Tabs from '../tabs'; import Grid from './Grid'; import useStyle from './style'; +import useVariant from '../form/hooks/useVariants'; export type CardType = 'inner'; export type CardSize = 'default' | 'small'; @@ -28,6 +29,7 @@ export interface CardProps extends Omit, 't prefixCls?: string; title?: React.ReactNode; extra?: React.ReactNode; + /** @deprecated Please use `variant` instead */ bordered?: boolean; /** @deprecated Please use `styles.header` instead */ headStyle?: React.CSSProperties; @@ -52,6 +54,7 @@ export interface CardProps extends Omit, 't tabProps?: TabsProps; classNames?: Partial>; styles?: Partial>; + variant?: 'borderless' | 'outlined'; } type CardClassNamesModule = keyof Exclude; @@ -91,7 +94,8 @@ const Card = React.forwardRef((props, ref) => { bodyStyle = {}, title, loading, - bordered = true, + bordered, + variant: customVariant, size: customizeSize, type, cover, @@ -109,6 +113,7 @@ const Card = React.forwardRef((props, ref) => { } = props; const { getPrefixCls, direction, card } = React.useContext(ConfigContext); + const [variant] = useVariant('card', customVariant, bordered); // =================Warning=================== if (process.env.NODE_ENV !== 'production') { @@ -116,6 +121,7 @@ const Card = React.forwardRef((props, ref) => { [ ['headStyle', 'styles.header'], ['bodyStyle', 'styles.body'], + ['bordered', 'variant'], ].forEach(([deprecatedName, newName]) => { warning.deprecated(!(deprecatedName in props), deprecatedName, newName); }); @@ -232,7 +238,7 @@ const Card = React.forwardRef((props, ref) => { card?.className, { [`${prefixCls}-loading`]: loading, - [`${prefixCls}-bordered`]: bordered, + [`${prefixCls}-bordered`]: variant !== 'borderless', [`${prefixCls}-hoverable`]: hoverable, [`${prefixCls}-contain-grid`]: isContainGrid, [`${prefixCls}-contain-tabs`]: tabList?.length, diff --git a/components/card/__tests__/index.test.tsx b/components/card/__tests__/index.test.tsx index 71fdfdafde39..f5c8c28a549d 100644 --- a/components/card/__tests__/index.test.tsx +++ b/components/card/__tests__/index.test.tsx @@ -5,9 +5,10 @@ import userEvent from '@testing-library/user-event'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { render, screen } from '../../../tests/utils'; +import { fireEvent, render, screen } from '../../../tests/utils'; import Button from '../../button/index'; import Card from '../index'; +import ConfigProvider from '../../config-provider'; describe('Card', () => { mountTest(Card); @@ -194,4 +195,39 @@ describe('Card', () => { ); expect(container).toMatchSnapshot(); }); + it('ConfigProvider support variant for card', () => { + const TestComponent = () => { + const [variant, setVariant] = React.useState<'borderless' | 'outlined'>('outlined'); + const [cardVariant, setCardVariant] = React.useState<'borderless' | 'outlined' | undefined>( + undefined, + ); + + return ( +
+ + + + +

Card content

+ + +
+ ); + }; + + const { container, getByText } = render(); + + // Check if the default `ant-card-bordered` exists + expect(container.querySelector('.ant-card-bordered')).toBeTruthy(); + + fireEvent.click(getByText('Set borderless')); + expect(container.querySelector('.ant-card-bordered')).toBeFalsy(); + + fireEvent.click(getByText('Set outlined')); + expect(container.querySelector('.ant-card-bordered')).toBeTruthy(); + }); }); diff --git a/components/card/demo/border-less.tsx b/components/card/demo/border-less.tsx index 686275fd64c8..f8d4578f803f 100644 --- a/components/card/demo/border-less.tsx +++ b/components/card/demo/border-less.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Card } from 'antd'; const App: React.FC = () => ( - +

Card content

Card content

Card content

diff --git a/components/card/demo/in-column.tsx b/components/card/demo/in-column.tsx index dd3e10ad1723..63ad4eadd539 100644 --- a/components/card/demo/in-column.tsx +++ b/components/card/demo/in-column.tsx @@ -4,17 +4,17 @@ import { Card, Col, Row } from 'antd'; const App: React.FC = () => ( - + Card content - + Card content - + Card content diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index 722d44c64ba9..7e24d8c42e4e 100644 --- a/components/card/index.en-US.md +++ b/components/card/index.en-US.md @@ -38,7 +38,8 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | actions | The action list, shows at the bottom of the Card | Array<ReactNode> | - | | | activeTabKey | Current TabPane's key | string | - | | -| bordered | Toggles rendering of the border around the card | boolean | true | | +| ~~bordered~~ | Toggles rendering of the border around the card, please use `variant` instead | boolean | true | | +| variant | Variants of Card | `outlined` \| `borderless` \| | `outlined` | 5.24.0 | | cover | Card cover | ReactNode | - | | | defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | `The key of first tab` | | | extra | Content to render in the top-right corner of the card | ReactNode | - | | diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 60e9ad9c0e23..1d3071c89060 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -39,7 +39,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*5WDvQp_H7LUAAA | --- | --- | --- | --- | --- | | actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | | | activeTabKey | 当前激活页签的 key | string | - | | -| bordered | 是否有边框 | boolean | true | | +| ~~bordered~~ | 是否有边框, 请使用 `variant` 替换 | boolean | true | | +| variant | 形态变体 | `outlined` \| `borderless` \| | `outlined` | 5.24.0 | | cover | 卡片封面 | ReactNode | - | | | defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签的 key` | | | extra | 卡片右上角的操作区域 | ReactNode | - | | diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index d3e323c0d2a8..47b3b4aa6fa5 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -167,7 +167,8 @@ export type NotificationConfig = ComponentStyleConfig & Pick; -export type CardConfig = ComponentStyleConfig & Pick; +export type CardConfig = ComponentStyleConfig & + Pick; export type DrawerConfig = ComponentStyleConfig & Pick; diff --git a/components/form/hooks/useVariants.ts b/components/form/hooks/useVariants.ts index 6e04e33577e4..93953f80b7da 100644 --- a/components/form/hooks/useVariants.ts +++ b/components/form/hooks/useVariants.ts @@ -16,6 +16,7 @@ type VariantComponents = keyof Pick< | 'datePicker' | 'timePicker' | 'rangePicker' + | 'card' >; /** diff --git a/components/statistic/demo/card.tsx b/components/statistic/demo/card.tsx index 52e6b110411a..32212de220ca 100644 --- a/components/statistic/demo/card.tsx +++ b/components/statistic/demo/card.tsx @@ -5,7 +5,7 @@ import { Card, Col, Row, Statistic } from 'antd'; const App: React.FC = () => ( - + ( - + Date: Mon, 27 Jan 2025 23:49:40 +0800 Subject: [PATCH 10/13] test: add a11y test for all components demo (#51372) * test: add a11y test * test: add a11y test * test: add a11y test * test: add a11y test * test: add a11y test * test: add a11y test * test: add a11y test * test: add a11y test * test: add a11y test * test: add a11y test * fix: test case * test: add a11y test * chore: code comment adjust --- components/affix/__tests__/a11y.test.ts | 4 +--- components/alert/__tests__/a11y.test.ts | 4 +--- components/anchor/__tests__/a11y.test.ts | 4 +--- components/app/__tests__/a11y.test.ts | 4 +--- components/auto-complete/__tests__/a11y.test.ts | 6 ++++++ components/avatar/__tests__/a11y.test.ts | 4 +--- components/back-top/__tests__/a11y.test.ts | 4 +--- components/badge/__tests__/a11y.test.ts | 4 +--- components/breadcrumb/__tests__/a11y.test.ts | 4 +--- components/button/__tests__/a11y.test.ts | 4 +--- components/calendar/__tests__/a11y.test.ts | 8 ++++++++ components/card/__tests__/a11y.test.ts | 6 ++++++ components/carousel/__tests__/a11y.test.ts | 3 +++ components/checkbox/__tests__/a11y.test.ts | 6 ++++++ components/collapse/__tests__/a11y.test.ts | 4 ++-- components/color-picker/__tests__/a11y.test.ts | 5 +++-- components/flex/__tests__/a11y.test.ts | 6 ++++++ components/grid/__tests__/a11y.test.ts | 6 ++++++ components/list/__tests__/a11y.test.ts | 8 ++++++++ components/pagination/__tests__/a11y.test.ts | 6 ++++++ components/popover/__tests__/a11y.test.ts | 5 +++++ components/progress/__tests__/a11y.test.ts | 8 ++++++++ components/qr-code/__tests__/a11y.test.ts | 8 ++++++++ components/rate/__tests__/a11y.test.ts | 6 ++++++ components/segmented/__tests__/a11y.test.ts | 8 ++++++++ components/skeleton/__tests__/a11y.test.ts | 8 ++++++++ components/slider/__tests__/a11y.test.ts | 6 ++++++ components/slider/index.tsx | 7 +++++++ components/statistic/__tests__/a11y.test.ts | 6 ++++++ components/steps/__tests__/a11y.test.ts | 6 ++++++ components/switch/__tests__/a11y.test.ts | 4 +++- components/tooltip/__tests__/a11y.test.ts | 5 +++++ components/tree/__tests__/a11y.test.ts | 11 +++++++++++ components/upload/__tests__/a11y.test.ts | 6 ++++++ components/watermark/__tests__/a11y.test.ts | 6 ++++++ tests/shared/accessibilityTest.tsx | 8 ++++++++ 36 files changed, 176 insertions(+), 32 deletions(-) create mode 100644 components/auto-complete/__tests__/a11y.test.ts create mode 100644 components/calendar/__tests__/a11y.test.ts create mode 100644 components/card/__tests__/a11y.test.ts create mode 100644 components/carousel/__tests__/a11y.test.ts create mode 100644 components/checkbox/__tests__/a11y.test.ts create mode 100644 components/flex/__tests__/a11y.test.ts create mode 100644 components/grid/__tests__/a11y.test.ts create mode 100644 components/list/__tests__/a11y.test.ts create mode 100644 components/pagination/__tests__/a11y.test.ts create mode 100644 components/popover/__tests__/a11y.test.ts create mode 100644 components/progress/__tests__/a11y.test.ts create mode 100644 components/qr-code/__tests__/a11y.test.ts create mode 100644 components/rate/__tests__/a11y.test.ts create mode 100644 components/segmented/__tests__/a11y.test.ts create mode 100644 components/skeleton/__tests__/a11y.test.ts create mode 100644 components/slider/__tests__/a11y.test.ts create mode 100644 components/statistic/__tests__/a11y.test.ts create mode 100644 components/steps/__tests__/a11y.test.ts create mode 100644 components/tooltip/__tests__/a11y.test.ts create mode 100644 components/tree/__tests__/a11y.test.ts create mode 100644 components/upload/__tests__/a11y.test.ts create mode 100644 components/watermark/__tests__/a11y.test.ts diff --git a/components/affix/__tests__/a11y.test.ts b/components/affix/__tests__/a11y.test.ts index f8bd0be94693..31de84f9969e 100644 --- a/components/affix/__tests__/a11y.test.ts +++ b/components/affix/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('affix demo a11y', () => { - accessibilityDemoTest('affix'); -}); +accessibilityDemoTest('affix'); diff --git a/components/alert/__tests__/a11y.test.ts b/components/alert/__tests__/a11y.test.ts index 563f233ed3b0..51912fa3427c 100644 --- a/components/alert/__tests__/a11y.test.ts +++ b/components/alert/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('alert demo a11y', () => { - accessibilityDemoTest('alert', { disabledRules: ['button-name'] }); -}); +accessibilityDemoTest('alert', { disabledRules: ['button-name'] }); diff --git a/components/anchor/__tests__/a11y.test.ts b/components/anchor/__tests__/a11y.test.ts index 279baa3eddbc..324ee7d5338a 100644 --- a/components/anchor/__tests__/a11y.test.ts +++ b/components/anchor/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('anchor demo a11y', () => { - accessibilityDemoTest('anchor'); -}); +accessibilityDemoTest('anchor'); diff --git a/components/app/__tests__/a11y.test.ts b/components/app/__tests__/a11y.test.ts index a7563c3867d6..6f8c9d2de2a3 100644 --- a/components/app/__tests__/a11y.test.ts +++ b/components/app/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('app demo a11y', () => { - accessibilityDemoTest('app'); -}); +accessibilityDemoTest('app'); diff --git a/components/auto-complete/__tests__/a11y.test.ts b/components/auto-complete/__tests__/a11y.test.ts new file mode 100644 index 000000000000..1a730fb056dc --- /dev/null +++ b/components/auto-complete/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('auto-complete', { + disabledRules: ['label'], + skip: ['render-panel.tsx', 'custom.tsx'], +}); diff --git a/components/avatar/__tests__/a11y.test.ts b/components/avatar/__tests__/a11y.test.ts index a1bf8f95e7f4..c189385ee16f 100644 --- a/components/avatar/__tests__/a11y.test.ts +++ b/components/avatar/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('avatar demo a11y', () => { - accessibilityDemoTest('avatar', { disabledRules: ['image-alt'] }); -}); +accessibilityDemoTest('avatar', { disabledRules: ['image-alt'] }); diff --git a/components/back-top/__tests__/a11y.test.ts b/components/back-top/__tests__/a11y.test.ts index a8da556386d0..b5b86d2af7ba 100644 --- a/components/back-top/__tests__/a11y.test.ts +++ b/components/back-top/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('back-top demo a11y', () => { - accessibilityDemoTest('back-top'); -}); +accessibilityDemoTest('back-top'); diff --git a/components/badge/__tests__/a11y.test.ts b/components/badge/__tests__/a11y.test.ts index dfe673081e85..12c192b642b5 100644 --- a/components/badge/__tests__/a11y.test.ts +++ b/components/badge/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('badge demo a11y', () => { - accessibilityDemoTest('badge', { disabledRules: ['button-name'] }); -}); +accessibilityDemoTest('badge', { disabledRules: ['button-name'] }); diff --git a/components/breadcrumb/__tests__/a11y.test.ts b/components/breadcrumb/__tests__/a11y.test.ts index cb786d364479..097748bcd0eb 100644 --- a/components/breadcrumb/__tests__/a11y.test.ts +++ b/components/breadcrumb/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('breadcrumb demo a11y', () => { - accessibilityDemoTest('breadcrumb'); -}); +accessibilityDemoTest('breadcrumb'); diff --git a/components/button/__tests__/a11y.test.ts b/components/button/__tests__/a11y.test.ts index 22dbb03871c9..f3041cb4c7bf 100644 --- a/components/button/__tests__/a11y.test.ts +++ b/components/button/__tests__/a11y.test.ts @@ -1,5 +1,3 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('button demo a11y', () => { - accessibilityDemoTest('button'); -}); +accessibilityDemoTest('button'); diff --git a/components/calendar/__tests__/a11y.test.ts b/components/calendar/__tests__/a11y.test.ts new file mode 100644 index 000000000000..1bd691ed8c88 --- /dev/null +++ b/components/calendar/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('calendar', { + // waiting for rc-picker fix + skip: ['week.tsx'], + // fix in another pr + disabledRules: ['label'], +}); diff --git a/components/card/__tests__/a11y.test.ts b/components/card/__tests__/a11y.test.ts new file mode 100644 index 000000000000..ba3b7a75ff61 --- /dev/null +++ b/components/card/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('card', { + disabledRules: ['button-name', 'image-alt'], + skip: ['tabs.tsx'], +}); diff --git a/components/carousel/__tests__/a11y.test.ts b/components/carousel/__tests__/a11y.test.ts new file mode 100644 index 000000000000..23ea398393be --- /dev/null +++ b/components/carousel/__tests__/a11y.test.ts @@ -0,0 +1,3 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('carousel'); diff --git a/components/checkbox/__tests__/a11y.test.ts b/components/checkbox/__tests__/a11y.test.ts new file mode 100644 index 000000000000..edbf6710ec0e --- /dev/null +++ b/components/checkbox/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('checkbox', { + // skip debug demo + skip: ['custom-line-width.tsx', 'disabled.tsx'], +}); diff --git a/components/collapse/__tests__/a11y.test.ts b/components/collapse/__tests__/a11y.test.ts index 24884065b57e..bc7c537459aa 100644 --- a/components/collapse/__tests__/a11y.test.ts +++ b/components/collapse/__tests__/a11y.test.ts @@ -1,5 +1,5 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -describe('collapse demo a11y', () => { - accessibilityDemoTest('collapse', { skip: ['extra.tsx'] }); +accessibilityDemoTest('collapse', { + skip: ['extra.tsx'], }); diff --git a/components/color-picker/__tests__/a11y.test.ts b/components/color-picker/__tests__/a11y.test.ts index c758f3d0c8af..e7056c76b289 100644 --- a/components/color-picker/__tests__/a11y.test.ts +++ b/components/color-picker/__tests__/a11y.test.ts @@ -1,4 +1,5 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -// skip _InternalPanelDoNotUseOrYouWillBeFired -accessibilityDemoTest('color-picker', { skip: ['pure-panel.tsx'] }); +accessibilityDemoTest('color-picker', { + skip: ['pure-panel.tsx'], +}); diff --git a/components/flex/__tests__/a11y.test.ts b/components/flex/__tests__/a11y.test.ts new file mode 100644 index 000000000000..a0e52e95a663 --- /dev/null +++ b/components/flex/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('flex', { + // waiting for rc-segmented fix + skip: ['align.tsx'], +}); diff --git a/components/grid/__tests__/a11y.test.ts b/components/grid/__tests__/a11y.test.ts new file mode 100644 index 000000000000..b75d7b2e117f --- /dev/null +++ b/components/grid/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('grid', { + // waiting for slider fix + skip: ['playground.tsx'], +}); diff --git a/components/list/__tests__/a11y.test.ts b/components/list/__tests__/a11y.test.ts new file mode 100644 index 000000000000..508f6ae1aa84 --- /dev/null +++ b/components/list/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('list', { + // waiting for fix + skip: ['infinite-load.tsx'], + // we can set alt for img in list demo + disabledRules: ['image-alt'], +}); diff --git a/components/pagination/__tests__/a11y.test.ts b/components/pagination/__tests__/a11y.test.ts new file mode 100644 index 000000000000..1aaac875ef11 --- /dev/null +++ b/components/pagination/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('pagination', { + // waiting for rc-pagination fix + skip: ['simple.tsx'], +}); diff --git a/components/popover/__tests__/a11y.test.ts b/components/popover/__tests__/a11y.test.ts new file mode 100644 index 000000000000..99a65e594072 --- /dev/null +++ b/components/popover/__tests__/a11y.test.ts @@ -0,0 +1,5 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('popover', { + skip: ['arrow.tsx'], +}); diff --git a/components/progress/__tests__/a11y.test.ts b/components/progress/__tests__/a11y.test.ts new file mode 100644 index 000000000000..0cfec1ac243a --- /dev/null +++ b/components/progress/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('progress', { + // we can set aria attribute to fix it + disabledRules: ['aria-progressbar-name'], + // we can set aria attribute to fix it + skip: ['circle-steps.tsx'], +}); diff --git a/components/qr-code/__tests__/a11y.test.ts b/components/qr-code/__tests__/a11y.test.ts new file mode 100644 index 000000000000..6352fba93941 --- /dev/null +++ b/components/qr-code/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('qr-code', { + // we can add aria attributes to fix it + disabledRules: ['role-img-alt', 'svg-img-alt'], + // waiting for rc-segmented fix + skip: ['errorlevel.tsx', 'download.tsx'], +}); diff --git a/components/rate/__tests__/a11y.test.ts b/components/rate/__tests__/a11y.test.ts new file mode 100644 index 000000000000..b69493e70f44 --- /dev/null +++ b/components/rate/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('rate', { + // waiting for rc-rate fix + disabledRules: ['listitem'], +}); diff --git a/components/segmented/__tests__/a11y.test.ts b/components/segmented/__tests__/a11y.test.ts new file mode 100644 index 000000000000..633346bd60db --- /dev/null +++ b/components/segmented/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('segmented', { + // we can add aria attributes to fix it + skip: ['custom.tsx', 'size-consistent.tsx'], + // waiting for rc-segmented fix + disabledRules: ['aria-allowed-attr'], +}); diff --git a/components/skeleton/__tests__/a11y.test.ts b/components/skeleton/__tests__/a11y.test.ts new file mode 100644 index 000000000000..f0eb0700b46a --- /dev/null +++ b/components/skeleton/__tests__/a11y.test.ts @@ -0,0 +1,8 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('skeleton', { + // waiting for fix + disabledRules: ['empty-heading'], + // we can set aria attribute to fix it + skip: ['list.tsx', 'element.tsx'], +}); diff --git a/components/slider/__tests__/a11y.test.ts b/components/slider/__tests__/a11y.test.ts new file mode 100644 index 000000000000..b6afb6b1239f --- /dev/null +++ b/components/slider/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('slider', { + // we can set aria attribute to fix it + disabledRules: ['aria-input-field-name', 'label', 'button-name'], +}); diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 072e5231fb78..c42b740f4b8c 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -86,6 +86,13 @@ export interface SliderBaseProps { getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; /** @deprecated `tooltipPlacement` is deprecated. Please use `tooltip.placement` instead. */ tooltipPlacement?: TooltipPlacement; + + // Accessibility + tabIndex?: SliderProps['tabIndex']; + ariaLabelForHandle?: SliderProps['ariaLabelForHandle']; + ariaLabelledByForHandle?: SliderProps['ariaLabelledByForHandle']; + ariaRequired?: SliderProps['ariaRequired']; + ariaValueTextFormatterForHandle?: SliderProps['ariaValueTextFormatterForHandle']; } export interface SliderSingleProps extends SliderBaseProps { diff --git a/components/statistic/__tests__/a11y.test.ts b/components/statistic/__tests__/a11y.test.ts new file mode 100644 index 000000000000..ccd6f4179837 --- /dev/null +++ b/components/statistic/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('statistic', { + // wait for skeleton fix + skip: ['basic.tsx'], +}); diff --git a/components/steps/__tests__/a11y.test.ts b/components/steps/__tests__/a11y.test.ts new file mode 100644 index 000000000000..88f67f3122e1 --- /dev/null +++ b/components/steps/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('steps', { + // we can set aria attribute to fix it + skip: ['inline.tsx', 'label-placement.tsx', 'progress.tsx'], +}); diff --git a/components/switch/__tests__/a11y.test.ts b/components/switch/__tests__/a11y.test.ts index a8e9bcb835c8..12d27af341ad 100644 --- a/components/switch/__tests__/a11y.test.ts +++ b/components/switch/__tests__/a11y.test.ts @@ -1,3 +1,5 @@ import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; -accessibilityDemoTest('switch', { disabledRules: ['button-name'] }); +accessibilityDemoTest('switch', { + disabledRules: ['button-name'], +}); diff --git a/components/tooltip/__tests__/a11y.test.ts b/components/tooltip/__tests__/a11y.test.ts new file mode 100644 index 000000000000..e94fd5f469e9 --- /dev/null +++ b/components/tooltip/__tests__/a11y.test.ts @@ -0,0 +1,5 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('tooltip', { + skip: ['arrow.tsx', 'disabled-children.tsx'], +}); diff --git a/components/tree/__tests__/a11y.test.ts b/components/tree/__tests__/a11y.test.ts new file mode 100644 index 000000000000..cbd6cf9931f7 --- /dev/null +++ b/components/tree/__tests__/a11y.test.ts @@ -0,0 +1,11 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('tree', { + skip: [ + // Skip large data demos to prevent test timeout + 'virtual-scroll.tsx', + 'big-data.tsx', + // we can set aria attributes to fix it + 'line.tsx', + ], +}); diff --git a/components/upload/__tests__/a11y.test.ts b/components/upload/__tests__/a11y.test.ts new file mode 100644 index 000000000000..1f699bd9a826 --- /dev/null +++ b/components/upload/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('upload', { + // Skip due to external dependency issue + skip: ['drag-sorting.tsx'], +}); diff --git a/components/watermark/__tests__/a11y.test.ts b/components/watermark/__tests__/a11y.test.ts new file mode 100644 index 000000000000..97c7c4c973e0 --- /dev/null +++ b/components/watermark/__tests__/a11y.test.ts @@ -0,0 +1,6 @@ +import accessibilityDemoTest from '../../../tests/shared/accessibilityTest'; + +accessibilityDemoTest('watermark', { + // we can add aria attributes to fix it + skip: ['custom.tsx'], +}); diff --git a/tests/shared/accessibilityTest.tsx b/tests/shared/accessibilityTest.tsx index 6ab29067fb6c..febecb14aca7 100644 --- a/tests/shared/accessibilityTest.tsx +++ b/tests/shared/accessibilityTest.tsx @@ -112,7 +112,15 @@ export function accessibilityTest(Component: React.ComponentType, disabledRules? } type Options = { + /** + * skip test + * @default false + */ skip?: boolean | string[]; + /** + * Disable axe rule checks + * @default [] + */ disabledRules?: string[]; }; From c438e02e28f9fe8a33a5c3c63db1f7f41ce17769 Mon Sep 17 00:00:00 2001 From: Guo Yunhe Date: Tue, 28 Jan 2025 00:37:03 +0800 Subject: [PATCH 11/13] refactor(Avatar): file name match component name (#52593) --- components/avatar/{avatar.tsx => Avatar.tsx} | 0 components/avatar/{group.tsx => AvatarGroup.tsx} | 10 +++++----- components/avatar/index.tsx | 16 +++++++++------- 3 files changed, 14 insertions(+), 12 deletions(-) rename components/avatar/{avatar.tsx => Avatar.tsx} (100%) rename components/avatar/{group.tsx => AvatarGroup.tsx} (96%) diff --git a/components/avatar/avatar.tsx b/components/avatar/Avatar.tsx similarity index 100% rename from components/avatar/avatar.tsx rename to components/avatar/Avatar.tsx diff --git a/components/avatar/group.tsx b/components/avatar/AvatarGroup.tsx similarity index 96% rename from components/avatar/group.tsx rename to components/avatar/AvatarGroup.tsx index 71d618066989..bcc0497b2d29 100644 --- a/components/avatar/group.tsx +++ b/components/avatar/AvatarGroup.tsx @@ -8,9 +8,9 @@ import { ConfigContext } from '../config-provider'; import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import type { PopoverProps } from '../popover'; import Popover from '../popover'; -import Avatar from './avatar'; -import AvatarContext from './AvatarContext'; +import Avatar from './Avatar'; import type { AvatarContextType, AvatarSize } from './AvatarContext'; +import AvatarContext from './AvatarContext'; import useStyle from './style'; interface ContextProps { @@ -28,7 +28,7 @@ const AvatarContextProvider: React.FC = (props ); }; -export interface GroupProps { +export interface AvatarGroupProps { className?: string; rootClassName?: string; children?: React.ReactNode; @@ -55,7 +55,7 @@ export interface GroupProps { shape?: 'circle' | 'square'; } -const Group: React.FC = (props) => { +const AvatarGroup: React.FC = (props) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); const { prefixCls: customizePrefixCls, @@ -150,4 +150,4 @@ const Group: React.FC = (props) => { ); }; -export default Group; +export default AvatarGroup; diff --git a/components/avatar/index.tsx b/components/avatar/index.tsx index e227042af1fa..cdbb0eec30a0 100644 --- a/components/avatar/index.tsx +++ b/components/avatar/index.tsx @@ -1,16 +1,18 @@ -import InternalAvatar from './avatar'; -import Group from './group'; +import InternalAvatar from './Avatar'; +import type { AvatarGroupProps } from './AvatarGroup'; +import AvatarGroup from './AvatarGroup'; -export type { AvatarProps } from './avatar'; -export type { GroupProps } from './group'; -export { Group }; +export type { AvatarProps } from './Avatar'; + +/** @deprecated Please use `AvatarGroupProps` */ +export type GroupProps = AvatarGroupProps; type CompoundedComponent = typeof InternalAvatar & { - Group: typeof Group; + Group: typeof AvatarGroup; }; const Avatar = InternalAvatar as CompoundedComponent; -Avatar.Group = Group; +Avatar.Group = AvatarGroup; export default Avatar; From 2de4cb20ac25745a7d84a133a3fed0e0ecbf7f23 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 28 Jan 2025 12:37:25 +0800 Subject: [PATCH 12/13] =?UTF-8?q?docs(=F0=9F=90=B2):=20release=205.23.3=20?= =?UTF-8?q?(#52604)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.en-US.md | 21 +++++++++++++++++++++ CHANGELOG.zh-CN.md | 21 +++++++++++++++++++++ package.json | 2 +- 3 files changed, 43 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 0932329cf81e..e12ef25f3fb6 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,27 @@ tag: vVERSION --- +## 5.23.3 + +`2025-01-28` + +Last version of the Dragon Year, Happy Chinese New Year! 🐲 + +- ⌨️ MISC: Add accessibility tests for all component demos to ensure compliance with accessibility standards. Optimize accessibility support for some components, improving compatibility with screen readers and keyboard operations. [#51372](https://github.com/ant-design/ant-design/pull/51372) [@aojunhao123](https://github.com/aojunhao123) +- 🐞 MISC: Fix importing `antd/dist/reset.css` file issue. [#52559](https://github.com/ant-design/ant-design/pull/52559) [@CaptainVolcom](https://github.com/CaptainVolcom) +- 🐞 Fix Button throwing error when `loading` is `null`. [#52508](https://github.com/ant-design/ant-design/pull/52508) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 Fix Table last row border color transition issue. [#52549](https://github.com/ant-design/ant-design/pull/52549) [@DDDDD12138](https://github.com/DDDDD12138) +- 💄 Fix Cascader checkbox cursor style in disabled state. [#52539](https://github.com/ant-design/ant-design/pull/52539) [@aojunhao123](https://github.com/aojunhao123) +- 💄 Fix ConfigProvider not correctly modifying icon style priority when StyleProvider configures `layer`. [#52533](https://github.com/ant-design/ant-design/pull/52533) [@zombieJ](https://github.com/zombieJ) +- 🐞 Fix Layout sidebar toggle button style missing in non-cssVar mode. [#52537](https://github.com/ant-design/ant-design/pull/52537) [@afc163](https://github.com/afc163) +- 🐞 Fix Tree checkbox cursor style in disabled state. [#52525](https://github.com/ant-design/ant-design/pull/52525) [@aojunhao123](https://github.com/aojunhao123) +- notification + - 🐞 Fix notification `useNotification` `closeIcon` configuration not working. [#52516](https://github.com/ant-design/ant-design/pull/52516) [@typenoob](https://github.com/typenoob) + - 🐞 Fix notification component display flicker issue under App component. [#52499](https://github.com/ant-design/ant-design/pull/52499) [@afc163](https://github.com/afc163) +- RTL + - 🐞 Fix Splitter abnormal collapse behavior in RTL mode. [#52501](https://github.com/ant-design/ant-design/pull/52501) [@aojunhao123](https://github.com/aojunhao123) + - 💄 Fix Spin style issue in RTL mode. [#52538](https://github.com/ant-design/ant-design/pull/52538) [@afc163](https://github.com/afc163) + ## 5.23.2 `2025-01-20` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index ed784505e1c2..975da5748ac6 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,27 @@ tag: vVERSION --- +## 5.23.3 + +`2025-01-28` + +龙年最后一版，祝各位新春愉快！🐲 + +- ⌨️ MISC: 为所有组件的示例添加了可访问性测试，确保符合无障碍标准。并优化了部分组件的可访问性支持，改进了对屏幕阅读器和键盘操作的兼容性。[#51372](https://github.com/ant-design/ant-design/pull/51372) [@aojunhao123](https://github.com/aojunhao123) +- 🐞 MISC: 修复导入 `antd/dist/reset.css` 文件的问题。[#52559](https://github.com/ant-design/ant-design/pull/52559) [@CaptainVolcom](https://github.com/CaptainVolcom) +- 🐞 修复 Button `loading` 为 `null` 时抛错的问题。[#52508](https://github.com/ant-design/ant-design/pull/52508) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 修复 Table 最后一行边框颜色过渡问题。[#52549](https://github.com/ant-design/ant-design/pull/52549) [@DDDDD12138](https://github.com/DDDDD12138) +- 💄 修复 Cascader 组件禁用状态下复选框的鼠标指针样式问题。[#52539](https://github.com/ant-design/ant-design/pull/52539) [@aojunhao123](https://github.com/aojunhao123) +- 💄 修复 ConfigProvider 在 StyleProvider 配置 `layer` 时不会正确修改图标对应样式优先级的问题。[#52533](https://github.com/ant-design/ant-design/pull/52533) [@zombieJ](https://github.com/zombieJ) +- 🐞 修复 Layout 切换侧边栏按钮在非 cssVar 模式下样式丢失的问题。. [#52537](https://github.com/ant-design/ant-design/pull/52537) [@afc163](https://github.com/afc163) +- 🐞 修复 Tree 组件禁用状态下复选框的鼠标指针样式问题。[#52525](https://github.com/ant-design/ant-design/pull/52525) [@aojunhao123](https://github.com/aojunhao123) +- notification + - 🐞 修复 notification `useNotification` 中 `closeIcon` 配置无效的问题。[#52516](https://github.com/ant-design/ant-design/pull/52516) [@typenoob](https://github.com/typenoob) + - 🐞 修复 notification 组件在 App 组件下的显示闪烁问题。[#52499](https://github.com/ant-design/ant-design/pull/52499) [@afc163](https://github.com/afc163) +- RTL + - 🐞 修复 Splitter 在 rtl 模式下折叠行为异常的问题。[#52501](https://github.com/ant-design/ant-design/pull/52501) [@aojunhao123](https://github.com/aojunhao123) + - 💄 修复 Spin 在 rtl 模式下的样式问题。[#52538](https://github.com/ant-design/ant-design/pull/52538) [@afc163](https://github.com/afc163) + ## 5.23.2 `2025-01-20` diff --git a/package.json b/package.json index 4b310f4d235d..f3bceba46cb9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.23.2", + "version": "5.23.3", "description": "An enterprise-class UI design language and React components implementation", "license": "MIT", "funding": { From 9e31331e8888c66ea0569ca3d7a62b8c986d328d Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 28 Jan 2025 14:31:44 +0800 Subject: [PATCH 13/13] fix: resolve conflict --- components/slider/index.tsx | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 0a8d76cc81ed..fa8c0be9289c 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -72,21 +72,6 @@ export interface SliderBaseProps { onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; - // Deprecated - /** @deprecated `tooltipPrefixCls` is deprecated. Please use `tooltip.prefixCls` instead. */ - tooltipPrefixCls?: string; - /** @deprecated `tipFormatter` is deprecated. Please use `tooltip.formatter` instead. */ - tipFormatter?: Formatter; - /** @deprecated `tooltipVisible` is deprecated. Please use `tooltip.open` instead. */ - tooltipVisible?: boolean; - /** - * @deprecated `getTooltipPopupContainer` is deprecated. Please use `tooltip.getPopupContainer` - * instead. - */ - getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement; - /** @deprecated `tooltipPlacement` is deprecated. Please use `tooltip.placement` instead. */ - tooltipPlacement?: TooltipPlacement; - // Accessibility tabIndex?: SliderProps['tabIndex']; ariaLabelForHandle?: SliderProps['ariaLabelForHandle'];