From 7d0e7cfda055ed8ce03b2e03ba4fc597dc2be8e6 Mon Sep 17 00:00:00 2001 From: hugo-syn <61210734+hugo-syn@users.noreply.github.com> Date: Wed, 3 Jan 2024 12:17:07 +0100 Subject: [PATCH 01/96] fix: Fix typo s/Notificaiton/Notification/ (#46775) --- docs/blog/notification-stack.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/notification-stack.zh-CN.md b/docs/blog/notification-stack.zh-CN.md index 1e35d265c0..84185fb38b 100644 --- a/docs/blog/notification-stack.zh-CN.md +++ b/docs/blog/notification-stack.zh-CN.md @@ -18,7 +18,7 @@ author: MadCcc - 堆叠的默认触发阈值是**三个以上**的 Notification 同时出现，也就是说当第四个 Notification 出现时，整个 Notification 组就会呈现收起的状态。这个阈值可以通过 `stack: { threshold: 3 }` 来调整。 - 收起状态时藏在背后可见的 Notification 是**两个**，并且我们为其增加了毛玻璃背景，更加淡化他们的存在。值得一提的是我们同样为暗色模式优化了这个效果，大家可以点击右下角切换主题来试一试。 -- 收起时所有未被展示的 Notification 并没有消失，使用鼠标悬浮在收起的 Notification 组上时，会使所有没有自动关闭的 Notification 展开并按顺序排列，同时所有 Notificaiton 的持续时间将会刷新。 +- 收起时所有未被展示的 Notification 并没有消失，使用鼠标悬浮在收起的 Notification 组上时，会使所有没有自动关闭的 Notification 展开并按顺序排列，同时所有 Notification 的持续时间将会刷新。 - 在不同的 `placement` 下收起的方向会有差异，但仅会分为两种：向上或者向下。展开时的排列顺序也会是从上到下或者从下到上两种顺序。 ### 实现细节 From aae661b1767268aaee5f0d4031b72c082e54052b Mon Sep 17 00:00:00 2001 From: Shunze Chen Date: Thu, 4 Jan 2024 13:50:45 +0800 Subject: [PATCH 02/96] docs: supplement form preserve field description (#46788) close https://github.com/ant-design/ant-design/issues/46773 --- components/form/index.en-US.md | 2 +- components/form/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 4972cc60d4..a7ae51d5fc 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -75,7 +75,7 @@ Common props ref：[Common props](/docs/react/common-props) | labelCol | Label layout, like `` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | [object](/components/grid/#col) | - | | | layout | Form layout | `horizontal` \| `vertical` \| `inline` | `horizontal` | | | name | Form name. Will be the prefix of Field `id` | string | - | | -| preserve | Keep field value even when field removed | boolean | true | 4.4.0 | +| preserve | Keep field value even when field removed. You can get the preserve field value by `getFieldsValue(true)` | boolean | true | 4.4.0 | | requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | true | `renderProps`: 5.9.0 | | scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) | false | | | size | Set field component size (antd components only) | `small` \| `middle` \| `large` | - | | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index ba4e5a4a0a..6cdb9934a3 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -76,7 +76,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA | labelCol | label 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn#col) | - | | | layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` | | | name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | | -| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | +| preserve | 当字段被删除时保留字段值。你可以通过 `getFieldsValue(true)` 来获取保留字段值 | boolean | true | 4.4.0 | | requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | true | `renderProps`: 5.9.0 | | scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) | false | | | size | 设置字段组件的尺寸（仅限 antd 组件） | `small` \| `middle` \| `large` | - | | From f1954384dc9143c1bb088f77622518c06e4d255a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 4 Jan 2024 15:42:11 +0800 Subject: [PATCH 03/96] docs: tweak changelog drawer width in small screen (#46791) --- .../theme/common/ComponentChangelog/ComponentChangelog.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx index 57dc1602e5..ebde413d09 100644 --- a/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx +++ b/.dumi/theme/common/ComponentChangelog/ComponentChangelog.tsx @@ -1,7 +1,7 @@ /* eslint-disable global-require */ import React, { useMemo } from 'react'; import { HistoryOutlined } from '@ant-design/icons'; -import { Button, Drawer, Timeline, Typography } from 'antd'; +import { Button, Drawer, Timeline, Typography, Grid } from 'antd'; import { createStyles } from 'antd-style'; import useFetch from '../../../hooks/useFetch'; @@ -158,6 +158,9 @@ export default function ComponentChangelog(props: ComponentChangelogProps) { }); }, [list]); + const screens = Grid.useBreakpoint(); + const width = screens.md ? '48vw' : '90vw'; + if (!list || !list.length) { return null; } @@ -181,7 +184,7 @@ export default function ComponentChangelog(props: ComponentChangelogProps) { } open={show} - width="40vw" + width={width} onClose={() => { setShow(false); }} From 7fdb8941a1c3a6e58bed9d0a7ceda21fb87d1d49 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 4 Jan 2024 15:42:18 +0800 Subject: [PATCH 04/96] docs: Update compatible-style.zh-CN.md (#46790) Signed-off-by: afc163 --- docs/react/compatible-style.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/react/compatible-style.zh-CN.md b/docs/react/compatible-style.zh-CN.md index f7769d7d7c..c049085cbe 100644 --- a/docs/react/compatible-style.zh-CN.md +++ b/docs/react/compatible-style.zh-CN.md @@ -13,7 +13,7 @@ Ant Design 支持最近 2 个版本的现代浏览器。如果你需要兼容旧 ## `:where` 选择器 -Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器（或者如 TailwindCSS 优先级冲突），你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）： +Ant Design 的 CSS-in-JS 默认通过 `:where` 选择器降低 CSS Selector 优先级，以减少用户升级时额外调整自定义样式的成本，不过 `:where` 语法的[兼容性](https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility)在低版本浏览器比较差。在某些场景下你如果需要支持旧版浏览器（或与 [TailwindCSS 优先级冲突](https://github.com/ant-design/ant-design/issues/38794#issuecomment-1328262525)），你可以使用 `@ant-design/cssinjs` 取消默认的降权操作（请注意版本保持与 antd 一致）： ```tsx import { StyleProvider } from '@ant-design/cssinjs'; From a2996cc888600b23debbfd31c11fa578d789075b Mon Sep 17 00:00:00 2001 From: Peach Date: Thu, 4 Jan 2024 21:33:54 +0800 Subject: [PATCH 05/96] docs: lock dumi alpha (#46806) Signed-off-by: Peach --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0f595439f4..41bb0b9b05 100644 --- a/package.json +++ b/package.json @@ -227,7 +227,7 @@ "cross-fetch": "^4.0.0", "crypto": "^1.0.1", "dekko": "^0.2.1", - "dumi": "^2.3.0-alpha.9", + "dumi": "2.3.0-alpha.9", "dumi-plugin-color-chunk": "^1.1.0", "esbuild-loader": "^4.0.2", "eslint": "^8.56.0", From 4304e7718ce8d9264790f6bf4e548c1f331e6fa8 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 5 Jan 2024 00:31:19 +0800 Subject: [PATCH 06/96] chore(deps-dev): bump the dev-dependencies group with 3 updates (#46801) * chore(deps-dev): bump the dev-dependencies group with 4 updates Updates the requirements on [@codesandbox/sandpack-react](https://github.com/codesandbox/sandpack), [@testing-library/jest-dom](https://github.com/testing-library/jest-dom), [chalk](https://github.com/chalk/chalk) and [lunar-typescript](https://github.com/6tail/lunar-typescript) to permit the latest version. Updates `@codesandbox/sandpack-react` to 2.11.0 - [Release notes](https://github.com/codesandbox/sandpack/releases) - [Changelog](https://github.com/codesandbox/sandpack/blob/main/CHANGELOG.md) - [Commits](https://github.com/codesandbox/sandpack/compare/v2.10.0...v2.11.0) Updates `@testing-library/jest-dom` to 6.2.0 - [Release notes](https://github.com/testing-library/jest-dom/releases) - [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md) - [Commits](https://github.com/testing-library/jest-dom/compare/v6.1.6...v6.2.0) Updates `chalk` from 4.1.2 to 5.3.0 - [Release notes](https://github.com/chalk/chalk/releases) - [Commits](https://github.com/chalk/chalk/compare/v4.1.2...v5.3.0) Updates `lunar-typescript` to 1.7.0 - [Release notes](https://github.com/6tail/lunar-typescript/releases) - [Commits](https://github.com/6tail/lunar-typescript/compare/v1.6.13...v1.7.0) --- updated-dependencies: - dependency-name: "@codesandbox/sandpack-react" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: "@testing-library/jest-dom" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: chalk dependency-type: direct:development update-type: version-update:semver-major dependency-group: dev-dependencies - dependency-name: lunar-typescript dependency-type: direct:development dependency-group: dev-dependencies ... Signed-off-by: dependabot[bot] * Update package.json Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: dependabot[bot] Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: lijianan <574980606@qq.com> --- package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 41bb0b9b05..6d63ec6672 100644 --- a/package.json +++ b/package.json @@ -168,7 +168,7 @@ "@antv/g6": "^4.8.24", "@babel/eslint-plugin": "^7.23.5", "@biomejs/biome": "^1.4.1", - "@codesandbox/sandpack-react": "^2.10.0", + "@codesandbox/sandpack-react": "^2.11.0", "@dnd-kit/core": "^6.1.0", "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", @@ -181,7 +181,7 @@ "@size-limit/file": "^11.0.1", "@stackblitz/sdk": "^1.9.0", "@testing-library/dom": "^9.3.3", - "@testing-library/jest-dom": "^6.1.6", + "@testing-library/jest-dom": "^6.2.0", "@testing-library/react": "^14.1.2", "@testing-library/user-event": "^14.5.2", "@types/ali-oss": "^6.16.11", @@ -269,7 +269,7 @@ "jsonml.js": "^0.1.0", "lint-staged": "^15.2.0", "lodash": "^4.17.21", - "lunar-typescript": "^1.6.13", + "lunar-typescript": "^1.7.0", "lz-string": "^1.5.0", "minimist": "^1.2.8", "mockdate": "^3.0.5", From 5ee391f1912e48ee54972fd14f4b6ddc44f57c94 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Fri, 5 Jan 2024 10:11:37 +0800 Subject: [PATCH 07/96] refactor: Line Progress use pseudo (#46789) * refactor: Line Progress use pseudo * chore: code clean * chore: update snapshot --- .../__snapshots__/components.test.tsx.snap | 14 +++--- components/progress/Line.tsx | 44 +++++++------------ .../__snapshots__/demo-extend.test.ts.snap | 42 +++++++++--------- .../__tests__/__snapshots__/demo.test.ts.snap | 42 +++++++++--------- .../__snapshots__/index.test.tsx.snap | 28 ++++++------ components/progress/__tests__/index.test.tsx | 6 +-- components/progress/style/index.ts | 20 ++++++++- 7 files changed, 102 insertions(+), 94 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index f33d4ea12c..6719a07d1d 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -21839,7 +21839,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = ` >
@@ -21867,7 +21867,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`] >
@@ -21895,7 +21895,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1 >
@@ -21923,7 +21923,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle >
@@ -21951,7 +21951,7 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1 >
@@ -21979,7 +21979,7 @@ exports[`ConfigProvider components Progress normal 1`] = ` >
@@ -22007,7 +22007,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = ` >
diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx index aaeaa20022..b8c249d220 100644 --- a/components/progress/Line.tsx +++ b/components/progress/Line.tsx @@ -5,8 +5,7 @@ import { devUseWarning } from '../_util/warning'; import type { DirectionType } from '../config-provider'; import type { ProgressGradient, ProgressProps, StringGradients } from './progress'; import { getSize, getSuccessPercent, validProgress } from './utils'; -import { useContext } from 'react'; -import { ConfigContext } from '../config-provider'; +import { LineStrokeColorVar, Percent } from './style'; interface LineProps extends ProgressProps { prefixCls: string; @@ -65,9 +64,11 @@ export const handleGradient = ( } = strokeColor; if (Object.keys(rest).length !== 0) { const sortedGradients = sortGradient(rest as StringGradients); - return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` }; + const background = `linear-gradient(${direction}, ${sortedGradients})`; + return { background, [LineStrokeColorVar]: background } as React.CSSProperties; } - return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` }; + const background = `linear-gradient(${direction}, ${from}, ${to})`; + return { background, [LineStrokeColorVar]: background } as React.CSSProperties; }; const Line: React.FC = (props) => { @@ -84,20 +85,13 @@ const Line: React.FC = (props) => { success, } = props; - const { direction } = useContext(ConfigContext); - - const backgroundProps: React.CSSProperties = + const backgroundProps = strokeColor && typeof strokeColor !== 'string' ? handleGradient(strokeColor, directionConfig) - : { backgroundColor: strokeColor }; + : { [LineStrokeColorVar]: strokeColor, background: strokeColor }; const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined; - const trailStyle: React.CSSProperties = { - backgroundColor: trailColor || undefined, - borderRadius, - }; - const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)]; const [width, height] = getSize(mergedSize, 'line', { strokeWidth }); @@ -108,31 +102,27 @@ const Line: React.FC = (props) => { warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size'); } - const percentBorderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : '100px'; + const trailStyle: React.CSSProperties = { + backgroundColor: trailColor || undefined, + borderRadius, + }; - const percentStyle: React.CSSProperties = { - width: `100%`, + const percentStyle = { + width: `${validProgress(percent)}%`, height, borderRadius, - clipPath: - direction === 'rtl' - ? `inset(0 0 0 ${100 - validProgress(percent)}% round ${percentBorderRadius})` - : `inset(0 ${100 - validProgress(percent)}% 0 0 round ${percentBorderRadius})`, ...backgroundProps, + [Percent]: validProgress(percent) / 100, }; const successPercent = getSuccessPercent(props); - const successPercentStyle: React.CSSProperties = { - width: `100%`, + const successPercentStyle = { + width: `${validProgress(successPercent)}%`, height, borderRadius, - clipPath: - direction === 'rtl' - ? `inset(0 0 0 ${100 - validProgress(successPercent)}% round ${percentBorderRadius})` - : `inset(0 ${100 - validProgress(successPercent)}% 0 0 round ${percentBorderRadius})`, backgroundColor: success?.strokeColor, - }; + } as React.CSSProperties; const outerStyle: React.CSSProperties = { width: width < 0 ? '100%' : width, diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap index ea9d54b448..f2ad6f4ff3 100644 --- a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -533,7 +533,7 @@ Array [ >
@@ -562,7 +562,7 @@ Array [ >
@@ -591,7 +591,7 @@ Array [ >
@@ -1275,7 +1275,7 @@ Array [ >
@@ -1547,7 +1547,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre >
@@ -1572,7 +1572,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre >
@@ -2104,7 +2104,7 @@ Array [ >
@@ -2129,7 +2129,7 @@ Array [ >
@@ -2154,7 +2154,7 @@ Array [ >
@@ -2197,7 +2197,7 @@ Array [ >
@@ -2239,7 +2239,7 @@ Array [ >
@@ -2267,7 +2267,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly >
@@ -2292,7 +2292,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly >
@@ -2317,7 +2317,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly >
@@ -2360,7 +2360,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly >
@@ -2410,7 +2410,7 @@ Array [ >
@@ -2559,11 +2559,11 @@ Array [ >
@@ -2775,7 +2775,7 @@ Array [ >
@@ -2804,7 +2804,7 @@ Array [ >
@@ -2833,7 +2833,7 @@ Array [ >
diff --git a/components/progress/__tests__/__snapshots__/demo.test.ts.snap b/components/progress/__tests__/__snapshots__/demo.test.ts.snap index 11db3397b6..551a566ead 100644 --- a/components/progress/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/progress/__tests__/__snapshots__/demo.test.ts.snap @@ -503,7 +503,7 @@ Array [ >
@@ -532,7 +532,7 @@ Array [ >
@@ -561,7 +561,7 @@ Array [ >
@@ -1193,7 +1193,7 @@ Array [ >
@@ -1461,7 +1461,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = ` >
@@ -1486,7 +1486,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = ` >
@@ -2016,7 +2016,7 @@ Array [ >
@@ -2041,7 +2041,7 @@ Array [ >
@@ -2066,7 +2066,7 @@ Array [ >
@@ -2109,7 +2109,7 @@ Array [ >
@@ -2151,7 +2151,7 @@ Array [ >
@@ -2177,7 +2177,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = ` >
@@ -2202,7 +2202,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = ` >
@@ -2227,7 +2227,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = ` >
@@ -2270,7 +2270,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = ` >
@@ -2318,7 +2318,7 @@ Array [ >
@@ -2465,11 +2465,11 @@ Array [ >
@@ -2622,7 +2622,7 @@ Array [ >
@@ -2651,7 +2651,7 @@ Array [ >
@@ -2680,7 +2680,7 @@ Array [ >
diff --git a/components/progress/__tests__/__snapshots__/index.test.tsx.snap b/components/progress/__tests__/__snapshots__/index.test.tsx.snap index 1ddcbc248d..e7fe47a31b 100644 --- a/components/progress/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/progress/__tests__/__snapshots__/index.test.tsx.snap @@ -180,11 +180,11 @@ exports[`Progress render format 1`] = ` >
@@ -212,7 +212,7 @@ exports[`Progress render negative progress 1`] = ` >
@@ -240,11 +240,11 @@ exports[`Progress render negative successPercent 1`] = ` >
@@ -272,7 +272,7 @@ exports[`Progress render normal progress 1`] = ` >
@@ -300,7 +300,7 @@ exports[`Progress render out-of-range progress 1`] = ` >
@@ -345,7 +345,7 @@ exports[`Progress render out-of-range progress with info 1`] = ` >
@@ -445,7 +445,7 @@ exports[`Progress render strokeColor 2`] = ` >
@@ -473,7 +473,7 @@ exports[`Progress render strokeColor 3`] = ` >
@@ -558,11 +558,11 @@ exports[`Progress render successColor progress 1`] = ` >
@@ -701,7 +701,7 @@ exports[`Progress render trailColor progress 1`] = ` >
@@ -729,7 +729,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc >
diff --git a/components/progress/__tests__/index.test.tsx b/components/progress/__tests__/index.test.tsx index 650808ecf6..411c1dc15d 100644 --- a/components/progress/__tests__/index.test.tsx +++ b/components/progress/__tests__/index.test.tsx @@ -137,11 +137,11 @@ describe('Progress', () => { }); it('get correct line-gradient', () => { - expect(handleGradient({ from: 'test', to: 'test' }).backgroundImage).toBe( + expect(handleGradient({ from: 'test', to: 'test' }).background).toBe( 'linear-gradient(to right, test, test)', ); - expect(handleGradient({}).backgroundImage).toBe('linear-gradient(to right, #1677FF, #1677FF)'); - expect(handleGradient({ from: 'test', to: 'test', '0%': 'test' }).backgroundImage).toBe( + expect(handleGradient({}).background).toBe('linear-gradient(to right, #1677FF, #1677FF)'); + expect(handleGradient({ from: 'test', to: 'test', '0%': 'test' }).background).toBe( 'linear-gradient(to right, test 0%)', ); }); diff --git a/components/progress/style/index.ts b/components/progress/style/index.ts index 067a99af3d..d84d15e096 100644 --- a/components/progress/style/index.ts +++ b/components/progress/style/index.ts @@ -37,6 +37,9 @@ export interface ComponentToken { circleIconFontSize: string; } +export const LineStrokeColorVar = '--progress-line-stroke-color'; +export const Percent = '--progress-percent'; + interface ProgressToken extends FullToken<'Progress'> { progressStepMinWidth: number | string; progressStepMarginInlineEnd: number | string; @@ -112,11 +115,26 @@ const genBaseStyle: GenerateStyle = (token) => { [`${progressCls}-success-bg, ${progressCls}-bg`]: { position: 'relative', - backgroundColor: token.defaultColor, + background: token.defaultColor, borderRadius: token.lineBorderRadius, transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`, }, + [`${progressCls}-bg`]: { + overflow: 'hidden', + + '&::after': { + content: '""', + background: { + _multi_value_: true, + value: ['inherit', `var(${LineStrokeColorVar})`], + }, + height: '100%', + width: `calc(1 / var(${Percent}) * 100%)`, + display: 'block', + }, + }, + [`${progressCls}-success-bg`]: { position: 'absolute', insetBlockStart: 0, From 9ece76b269f7608cbdf4323a660f99dd3ae10242 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Fri, 5 Jan 2024 10:12:22 +0800 Subject: [PATCH 08/96] docs: use dumi alert (#46793) * docs: use dumi alert * chore: code clean --- .dumi/theme/builtins/Alert/index.tsx | 9 --------- components/collapse/index.en-US.md | 5 ++++- components/collapse/index.zh-CN.md | 5 ++++- components/drawer/index.en-US.md | 5 ++++- components/drawer/index.zh-CN.md | 5 ++++- components/mentions/index.en-US.md | 6 +++++- components/mentions/index.zh-CN.md | 6 +++++- components/qr-code/index.en-US.md | 6 +++++- components/qr-code/index.zh-CN.md | 5 ++++- components/timeline/index.en-US.md | 6 +++++- components/timeline/index.zh-CN.md | 6 +++++- docs/react/migrate-less-variables.en-US.md | 5 ++++- docs/react/migrate-less-variables.zh-CN.md | 5 ++++- 13 files changed, 53 insertions(+), 21 deletions(-) delete mode 100644 .dumi/theme/builtins/Alert/index.tsx diff --git a/.dumi/theme/builtins/Alert/index.tsx b/.dumi/theme/builtins/Alert/index.tsx deleted file mode 100644 index b00ec1f630..0000000000 --- a/.dumi/theme/builtins/Alert/index.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; -import type { AlertProps } from 'antd'; -import { Alert } from 'antd'; - -const MdAlert: React.FC = ({ style, ...props }) => ( - -); - -export default MdAlert; diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index fec2d3e42e..b0ccf90404 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -94,7 +94,10 @@ Common props ref：[Common props](/docs/react/common-props) ### Collapse.Panel - + +:::info{title=Deprecated} +When using version >= 5.6.0, we prefer to configuring the panel by `items`. +::: | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index a15f052d30..69772d8144 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -95,7 +95,10 @@ const items: CollapseProps['items'] = [ ### Collapse.Panel - + +:::info{title=已废弃} +版本 >= 5.6.0 时请使用 items 方式配置面板。 +::: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md index e86bbe0da7..d9f8ac9a05 100644 --- a/components/drawer/index.en-US.md +++ b/components/drawer/index.en-US.md @@ -41,7 +41,10 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr Common props ref：[Common props](/docs/react/common-props) -**🚨 Note:** v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `className` & `style` in v4 to align the API with Modal. + +:::info{title=注意} +v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `className` & `style` in v4 to align the API with Modal. +::: | Props | Description | Type | Default | Version | | --- | --- | --- | --- | --- | diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md index 8261993bce..1f06de3067 100644 --- a/components/drawer/index.zh-CN.md +++ b/components/drawer/index.zh-CN.md @@ -40,7 +40,10 @@ demo: 通用属性参考：[通用属性](/docs/react/common-props) -**🚨 注意：** v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。 + +:::info{title=注意} +v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。 +::: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md index 36c8a7e23a..e01f22fe5a 100644 --- a/components/mentions/index.en-US.md +++ b/components/mentions/index.en-US.md @@ -16,7 +16,11 @@ When you need to mention someone or something. ### Usage upgrade after 5.1.0 - + +:::info +After version 5.1.0, we provide a simpler usage `` with better performance and potential of writing simpler code style in your applications. +Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0. +::: ```jsx // works when >=5.1.0, recommended ✅ diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md index 11136657e2..ca44169b19 100644 --- a/components/mentions/index.zh-CN.md +++ b/components/mentions/index.zh-CN.md @@ -17,7 +17,11 @@ demo: ### 5.1.0 用法升级 - + +:::info +在 5.1.0 版本后，我们提供了 `` 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。 +同时我们废弃了原先的写法，你还是可以在 5.x 继续使用，但会在控制台看到警告，并会在 6.0 后移除。 +::: ```jsx // >=5.1.0 可用，推荐的写法 ✅ diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index a1c4e6a14f..911cb2a6ba 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -13,7 +13,11 @@ tag: New Components that can convert text into QR codes, and support custom color and logo. Available since `antd@5.1.0`. - + +:::info +If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels. +You can configure the QR code to be larger through size, or shorten the link through short link services. +::: ## When To Use diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index 1e31634998..e4c04d7ad4 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -14,7 +14,10 @@ tag: New 能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。 - + +:::info +若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 size 配置二维码更大，或者通过短链接服务等方式将链接变短。 +::: ## 何时使用 diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md index d7bddd1e2f..a1327003b4 100644 --- a/components/timeline/index.en-US.md +++ b/components/timeline/index.en-US.md @@ -15,7 +15,11 @@ Vertical display timeline. - When a series of information needs to be ordered by time (ascending or descending). - When you need a timeline to make a visual connection. - + +:::info +After version 5.2.0, we provide a simpler usage `` with better performance and potential of writing simpler code style in your applications. +Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 6.0. +::: ```jsx // works when >=5.2.0, recommended ✅ diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index 8879f4ef46..654614796c 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -16,7 +16,11 @@ demo: - 当有一系列信息需按时间排列时，可正序和倒序。 - 需要有一条时间轴进行视觉上的串联时。 - + +:::info +5.2.0版本之后，我们提供了更简单的用法 `` 以获得更好的性能，使您能在应用中编写更简单的代码。 +与此同时，我们弃用了旧的用法，并且将在下一个 major 版本中删除它。 +::: ```jsx // >=5.2.0 可用，推荐的写法 ✅ diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 251c1e1a50..bd4bf053e1 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -7,7 +7,10 @@ title: Less variables to Component Token This document contains the correspondence between all the less variables related to components in version 4.x and the Component Token in version 5.x. If you are upgrading from version 4.x to version 5.x, you can quickly find the corresponding Component Token through this comparison table. - + +:::info{title=Note} +There are still some less variables that do not have a corresponding Component Token, and these variables have been deprecated in version 5.x. +::: ## How to use Component Token diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 2b0bdc6241..5b88a3f0d2 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -7,7 +7,10 @@ title: 从 Less 变量到 Design Token 本文档包含了所有 4.x 版本中组件相关的 less 变量与 5.x 版本的 Component Token 的对照关系。如果你是从 4.x 版本升级到 5.x 版本，可以通过这份对照表快速找到对应的 Component Token。 - + +:::info{title=注意} +仍有部分变量没有对应的 Component Token，这些变量在 5.x 版本中已被废弃。 +::: ## 如何配置 Component Token From ca39a4b1eed70ff945745d4dc2735cd99f059201 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 5 Jan 2024 10:56:11 +0800 Subject: [PATCH 09/96] refactor: refactor indicator props (#46786) * refactor: refactor indicator props * Update components/tabs/index.tsx Co-authored-by: afc163 Signed-off-by: lijianan <574980606@qq.com> * fix: update * fix: fix * fix: fix * fix: fix * fix: fix * test: add test case * docs: update docs * Update components/config-provider/index.en-US.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/config-provider/index.zh-CN.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.tsx Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.tsx Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.zh-CN.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.en-US.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> * Update components/tabs/index.zh-CN.md Co-authored-by: MadCcc Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: afc163 Co-authored-by: MadCcc --- components/config-provider/context.ts | 2 +- components/config-provider/index.en-US.md | 2 +- components/config-provider/index.tsx | 2 +- components/config-provider/index.zh-CN.md | 2 +- components/tabs/__tests__/index.test.tsx | 16 +++++++++++--- components/tabs/demo/custom-indicator.md | 4 ++-- components/tabs/demo/custom-indicator.tsx | 27 +++++++---------------- components/tabs/index.en-US.md | 3 +-- components/tabs/index.tsx | 26 +++++++++++++++++----- components/tabs/index.zh-CN.md | 3 +-- package.json | 2 +- 11 files changed, 51 insertions(+), 38 deletions(-) diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 4e913b360f..712078ad61 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -175,7 +175,7 @@ export interface ConfigConsumerProps { tag?: ComponentStyleConfig; table?: ComponentStyleConfig; card?: ComponentStyleConfig; - tabs?: ComponentStyleConfig & Pick; + tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 227dec4c7e..e216d6950b 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -147,7 +147,7 @@ const { | 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 | | table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | -| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 | | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timePicker | Set TimePicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 02c90930aa..a7cc98f8a2 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -190,7 +190,7 @@ export interface ConfigProviderProps { tag?: ComponentStyleConfig; table?: ComponentStyleConfig; card?: ComponentStyleConfig; - tabs?: ComponentStyleConfig & Pick; + tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index cf11efd50d..1e24fb32ca 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -149,7 +149,7 @@ const { | statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | -| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties, indicator?: { size?: GetIndicatorSize, align?: `start` \| `center` \| `end` }} | - | 5.7.0 | | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | timePicker | 设置 TimePicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/tabs/__tests__/index.test.tsx b/components/tabs/__tests__/index.test.tsx index 11f3cbbdf8..e090744c2f 100644 --- a/components/tabs/__tests__/index.test.tsx +++ b/components/tabs/__tests__/index.test.tsx @@ -1,9 +1,10 @@ import React from 'react'; + import Tabs from '..'; +import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render } from '../../../tests/utils'; -import { resetWarned } from '../../_util/warning'; import ConfigProvider from '../../config-provider'; const { TabPane } = Tabs; @@ -129,10 +130,10 @@ describe('Tabs', () => { it('indicator in ConfigProvider should work', () => { const { container } = render( - + - + , ); @@ -140,4 +141,13 @@ describe('Tabs', () => { expect(container.querySelector('.Tabs_2 .ant-tabs-ink-bar')).toHaveStyle({ width: 12 }); expect(container.querySelector('.Tabs_3 .ant-tabs-ink-bar')).toHaveStyle({ width: 4 }); }); + + it('warning for indicatorSize', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); + render(); + expect(errorSpy).toHaveBeenCalledWith( + 'Warning: [antd: Tabs] `indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.', + ); + errorSpy.mockRestore(); + }); }); diff --git a/components/tabs/demo/custom-indicator.md b/components/tabs/demo/custom-indicator.md index 39f619cb86..551d3e0260 100644 --- a/components/tabs/demo/custom-indicator.md +++ b/components/tabs/demo/custom-indicator.md @@ -1,7 +1,7 @@ ## zh-CN -自定义指示器宽度和对齐方式。 +设置 `indicator` 属性，自定义指示条宽度和对齐方式。 ## en-US -Custom indicator size and align. +Set `indicator` prop to custom indicator size and align. diff --git a/components/tabs/demo/custom-indicator.tsx b/components/tabs/demo/custom-indicator.tsx index 476cf6d95b..99e73f531b 100644 --- a/components/tabs/demo/custom-indicator.tsx +++ b/components/tabs/demo/custom-indicator.tsx @@ -7,39 +7,28 @@ const onChange = (key: string) => { }; const items: TabsProps['items'] = [ - { - key: '1', - label: 'Tab 1', - children: 'Content of Tab Pane 1', - }, - { - key: '2', - label: 'Tab 2', - children: 'Content of Tab Pane 2', - }, - { - key: '3', - label: 'Tab 3', - children: 'Content of Tab Pane 3', - }, + { key: '1', label: 'Tab 1', children: 'Content of Tab Pane 1' }, + { key: '2', label: 'Tab 2', children: 'Content of Tab Pane 2' }, + { key: '3', label: 'Tab 3', children: 'Content of Tab Pane 3' }, ]; +type Align = 'start' | 'center' | 'end'; + const App: React.FC = () => { - const [align, setAlign] = React.useState('center'); + const [alignValue, setAlignValue] = React.useState('center'); return ( <> setAlign(value as TabsProps['indicatorAlign'])} + onChange={(value) => setAlignValue(value as Align)} options={['start', 'center', 'end']} /> origin - 20} - indicatorAlign={align} + indicator={{ size: (origin) => origin - 20, align: alignValue }} /> ); diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 2032fc129e..9387294f9c 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -53,8 +53,7 @@ Common props ref：[Common props](/docs/react/common-props) | centered | Centers tabs | boolean | false | 4.4.0 | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | -| indicatorAlign | Customize align of indicator | `start` \| `center` \| `end` | `center` | 5.13.0 | -| indicatorSize | Customize length of indicator, which is the same as tab by default | number \| (origin: number) => number | - | 5.9.0 | +| indicator | Customize `size` and `align` of indicator | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 | | items | Configure tab content | [TabItemType](#tabitemtype) | [] | 4.23.0 | | moreIcon | The custom icon of ellipsis | ReactNode | <EllipsisOutlined /> | 4.14.0 | | popupClassName | `className` for more dropdown. | string | - | 4.21.0 | diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index 915dd0f52c..a551d2c861 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -5,17 +5,19 @@ import PlusOutlined from '@ant-design/icons/PlusOutlined'; import classNames from 'classnames'; import type { TabsProps as RcTabsProps } from 'rc-tabs'; import RcTabs from 'rc-tabs'; +import type { GetIndicatorSize } from 'rc-tabs/lib/hooks/useIndicator'; import type { EditableConfig } from 'rc-tabs/lib/interface'; import { devUseWarning } from '../_util/warning'; import { ConfigContext } from '../config-provider'; +import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; import useSize from '../config-provider/hooks/useSize'; import type { SizeType } from '../config-provider/SizeContext'; import useAnimateConfig from './hooks/useAnimateConfig'; import useLegacyItems from './hooks/useLegacyItems'; import useStyle from './style'; -import useCSSVarCls from '../config-provider/hooks/useCSSVarCls'; -import TabPane, { type TabPaneProps } from './TabPane'; +import TabPane from './TabPane'; +import type { TabPaneProps } from './TabPane'; export type TabsType = 'line' | 'card' | 'editable-card'; export type TabsPosition = 'top' | 'right' | 'bottom' | 'left'; @@ -31,6 +33,8 @@ export interface TabsProps extends Omit { addIcon?: React.ReactNode; onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void; children?: React.ReactNode; + /** @deprecated Please use `indicator={{ size: ... }}` instead */ + indicatorSize?: GetIndicatorSize; } const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { @@ -49,6 +53,7 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { animated, style, indicatorSize, + indicator, ...otherProps } = props; const { prefixCls: customizePrefixCls, moreIcon = } = otherProps; @@ -78,16 +83,27 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { 'breaking', '`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.', ); + + warning( + !(indicatorSize || tabs?.indicatorSize), + 'deprecated', + '`indicatorSize` has been deprecated. Please use `indicator={{ size: ... }}` instead.', + ); } + const size = useSize(customSize); + const mergedItems = useLegacyItems(items, children); const mergedAnimated = useAnimateConfig(prefixCls, animated); - const size = useSize(customSize); - const mergedStyle: React.CSSProperties = { ...tabs?.style, ...style }; + const mergedIndicator: TabsProps['indicator'] = { + align: indicator?.align ?? tabs?.indicator?.align, + size: indicator?.size ?? indicatorSize ?? tabs?.indicator?.size ?? tabs?.indicatorSize, + }; + return wrapCSSVar( & { TabPane: typeof TabPane } = (props) => { moreIcon={moreIcon} prefixCls={prefixCls} animated={mergedAnimated} - indicatorSize={indicatorSize ?? tabs?.indicatorSize} + indicator={mergedIndicator} />, ); }; diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 80c3a505c0..c6188f2abe 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -55,8 +55,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | centered | 标签居中展示 | boolean | false | 4.4.0 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | -| indicatorAlign | 自定义指示条对齐方式 | `start` \| `center` \| `end` | `center` | 5.13.0 | -| indicatorSize | 自定义指示条长度，默认与 tab 等宽 | number \| (origin: number) => number | - | 5.9.0 | +| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: `start` \| `center` \| `end`; } | - | 5.13.0 | | items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 | | moreIcon | 自定义折叠 icon | ReactNode | <EllipsisOutlined /> | 4.14.0 | | popupClassName | 更多菜单的 `className` | string | - | 4.21.0 | diff --git a/package.json b/package.json index 8b7f147f99..9fe4c9d55e 100644 --- a/package.json +++ b/package.json @@ -151,7 +151,7 @@ "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.36.1", - "rc-tabs": "~12.15.0", + "rc-tabs": "~14.0.0", "rc-textarea": "~1.6.3", "rc-tooltip": "~6.1.3", "rc-tree": "~5.8.2", From 15324982ab3691f21e48a79dccdd84b5b0912c52 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 5 Jan 2024 14:22:45 +0800 Subject: [PATCH 10/96] fix: Upload.Dragger not align center (#46810) close #46795 --- components/upload/style/dragger.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/components/upload/style/dragger.ts b/components/upload/style/dragger.ts index 77061b447b..77c4d69c32 100644 --- a/components/upload/style/dragger.ts +++ b/components/upload/style/dragger.ts @@ -23,12 +23,13 @@ const genDraggerStyle: GenerateStyle = (token) => { }, [`${componentCls}-btn`]: { - display: 'flex', - placeContent: 'center', + display: 'table', + width: '100%', + height: '100%', outline: 'none', borderRadius: token.borderRadiusLG, - '&:focus': { + '&:focus-visible': { outline: `${unit(token.lineWidthFocus)} solid ${token.colorPrimaryBorder}`, }, }, From 8f6f8de9b34035bd15c8f1a26b3735fba60f3275 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Fri, 5 Jan 2024 15:29:18 +0800 Subject: [PATCH 11/96] fix: Popconfirm text missing (#46812) --- components/popconfirm/PurePanel.tsx | 4 ++-- components/popconfirm/__tests__/index.test.tsx | 14 +++++++++++++- 2 files changed, 15 insertions(+), 3 deletions(-) diff --git a/components/popconfirm/PurePanel.tsx b/components/popconfirm/PurePanel.tsx index eb471b68e6..f7c870fe73 100644 --- a/components/popconfirm/PurePanel.tsx +++ b/components/popconfirm/PurePanel.tsx @@ -73,7 +73,7 @@ export const Overlay: React.FC = (props) => {
{showCancel && ( )} = (props) => { quitOnNullishReturnValue emitEvent > - {okText ?? contextLocale?.okText} + {okText || contextLocale?.okText}
diff --git a/components/popconfirm/__tests__/index.test.tsx b/components/popconfirm/__tests__/index.test.tsx index b238a95113..fb1b508bbf 100644 --- a/components/popconfirm/__tests__/index.test.tsx +++ b/components/popconfirm/__tests__/index.test.tsx @@ -1,5 +1,6 @@ -import { spyElementPrototype } from 'rc-util/lib/test/domHook'; import React from 'react'; +import { spyElementPrototype } from 'rc-util/lib/test/domHook'; + import Popconfirm from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -354,4 +355,15 @@ describe('Popconfirm', () => { expect(onOpenChange).toHaveBeenCalledTimes(1); expect(onVisibleChange).toHaveBeenCalledTimes(1); }); + + it('okText & cancelText could be empty', () => { + render( + + + , + ); + + expect(document.body.querySelectorAll('.ant-btn')[0].textContent).toBe('Cancel'); + expect(document.body.querySelectorAll('.ant-btn')[1].textContent).toBe('OK'); + }); }); From 9180bd4cf987e7550ebc4f599d6ee981483684a4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 5 Jan 2024 15:34:55 +0800 Subject: [PATCH 12/96] docs(:sparkles:): release 5.12.8 (#46814) * docs(:sparkles:): release 5.12.8 * docs(:sparkles:): release 5.12.8 --- CHANGELOG.en-US.md | 10 ++++++++++ CHANGELOG.zh-CN.md | 10 ++++++++++ package.json | 2 +- 3 files changed, 21 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 4114989dd5..f5f3018599 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,16 @@ tag: vVERSION --- +## 5.12.8 + +`2024-01-05` + +- 🐞 Fix Upload.Dragger not align center and focus ring style. [#46810](https://github.com/ant-design/ant-design/pull/46810) +- 🐞 Fix Popconfirm config empty `okText` and `cancelText` will not fallback to locale text. [#46812](https://github.com/ant-design/ant-design/pull/46812) +- 🐞 Fix Progress that line border-radius cannot be overrided. [#46789](https://github.com/ant-design/ant-design/pull/46789) +- 🐞 Fix Typography without `children` has extra `margin-left` when `copyable` is true. [#46748](https://github.com/ant-design/ant-design/pull/46748) +- 🐞 Fix Typography copied icon color. [#46748](https://github.com/ant-design/ant-design/pull/46748) + ## 5.12.7 `2024-01-02` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 52f4560019..45bcc2db04 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,16 @@ tag: vVERSION --- +## 5.12.8 + +`2024-01-05` + +- 🐞 修复 Upload.Dragger 内容不居中和多余的 focus 样式的问题。[#46810](https://github.com/ant-design/ant-design/pull/46810) +- 🐞 修复 Popconfirm 配置空的 `okText` 和 `cancelText` 时不会被预设 locale 兜底的问题。[#46812](https://github.com/ant-design/ant-design/pull/46812) +- 🐞 修复 Progress 线性模式圆角无法覆盖的问题。[#46789](https://github.com/ant-design/ant-design/pull/46789) +- 🐞 修复 Typography 没有 `children` 并启用 `copyable` 时多余的 margin。[#46748](https://github.com/ant-design/ant-design/pull/46748) +- 🐞 修复 Typography 复制成功后的图标颜色问题。[#46748](https://github.com/ant-design/ant-design/pull/46748) + ## 5.12.7 `2024-01-02` diff --git a/package.json b/package.json index 6d63ec6672..8861187b56 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.12.7", + "version": "5.12.8", "description": "An enterprise-class UI design language and React components implementation", "keywords": [ "ant", From 30c60b58fd648271be30fa9a10d736827e58d69c Mon Sep 17 00:00:00 2001 From: Amumu Date: Fri, 5 Jan 2024 15:41:07 +0800 Subject: [PATCH 13/96] chore: extract deprecated versions to json file (#46746) * chore: extracting depreciated version to json file * chore: add to compile * chore: rename * chore: add 3.x deprecated * chore: move dir * chore: revert commit * chore: update copy logic * chore: update * chore: update --------- Co-authored-by: wuxh --- BUG_VERSIONS.json | 53 ++++++++++++++++++++++++++++++++++++++++++ package.json | 3 ++- scripts/post-script.ts | 50 +++------------------------------------ 3 files changed, 58 insertions(+), 48 deletions(-) create mode 100644 BUG_VERSIONS.json diff --git a/BUG_VERSIONS.json b/BUG_VERSIONS.json new file mode 100644 index 0000000000..977303c5ff --- /dev/null +++ b/BUG_VERSIONS.json @@ -0,0 +1,53 @@ +{ + "3.9.3": [ + "https://github.com/ant-design/ant-design/commit/6550df34b639ab0b3bf2c1cbf9b9828735c1fd41" + ], + ">= 3.10.0 <=3.10.9": [ + "https://github.com/ant-design/ant-design/commit/6550df34b639ab0b3bf2c1cbf9b9828735c1fd41" + ], + ">= 3.11.0 <=3.11.5": [ + "https://github.com/ant-design/ant-design/commit/6550df34b639ab0b3bf2c1cbf9b9828735c1fd41" + ], + ">= 4.21.6 < 4.22.0": ["https://github.com/ant-design/ant-design/pull/36682"], + ">= 4.22.2 <= 4.22.5": [ + "https://github.com/ant-design/ant-design/issues/36932", + "https://github.com/ant-design/ant-design/pull/36800", + "https://github.com/ant-design/ant-design/issues/37024" + ], + "4.23.0": ["https://github.com/ant-design/ant-design/issues/37461"], + "4.23.5": [ + "https://github.com/ant-design/ant-design/issues/37929", + "https://github.com/ant-design/ant-design/issues/37931" + ], + "4.24.0": ["https://github.com/ant-design/ant-design/issues/38371"], + "5.0.4": ["https://github.com/ant-design/ant-design/issues/39284"], + "5.0.6": ["https://github.com/ant-design/ant-design/issues/39807"], + "5.1.0": ["https://github.com/react-component/drawer/pull/370"], + "5.1.2": ["https://github.com/ant-design/ant-design/issues/39949"], + "5.1.3": ["https://github.com/ant-design/ant-design/issues/40113"], + "5.1.4": ["https://github.com/ant-design/ant-design/issues/40186"], + ">= 5.2.3 <= 5.3.0": [ + "https://github.com/ant-design/ant-design/pull/40719#issuecomment-1453418135" + ], + "5.4.1": ["https://github.com/ant-design/ant-design/issues/41751"], + ">= 5.4.3 <= 5.4.5": [ + "https://github.com/ant-design/cssinjs/pull/108", + "https://github.com/ant-design/ant-design/pull/41993" + ], + "5.6.2": ["https://github.com/ant-design/ant-design/issues/43113"], + "5.6.3": ["https://github.com/ant-design/ant-design/issues/43190"], + "5.7.0": ["https://github.com/ant-design/ant-design/issues/43684"], + "5.7.1": [ + "https://github.com/ant-design/ant-design/issues/43654", + "https://github.com/ant-design/ant-design/issues/43684" + ], + "5.8.0": ["https://github.com/ant-design/ant-design/issues/43943"], + "5.9.1": ["https://github.com/ant-design/ant-design/issues/44907"], + "5.10.0": ["https://github.com/ant-design/ant-design/issues/45289"], + "5.11.0": ["https://github.com/ant-design/ant-design/issues/45742"], + "5.11.1": ["https://github.com/ant-design/ant-design/issues/45883"], + "5.11.2": ["https://github.com/ant-design/ant-design/issues/46005"], + "5.11.4": ["https://github.com/ant-design/ant-design/pull/46103"], + "5.12.3": ["https://github.com/ant-design/ant-design/issues/46525"], + "5.12.6": ["https://github.com/ant-design/ant-design/issues/46719"] +} diff --git a/package.json b/package.json index 8861187b56..227f9b318c 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,8 @@ "dist", "es", "lib", - "locale" + "locale", + "BUG_VERSIONS.json" ], "scripts": { "api-collection": "antd-tools run api-collection", diff --git a/scripts/post-script.ts b/scripts/post-script.ts index bca6d8df8b..bf54566dd2 100644 --- a/scripts/post-script.ts +++ b/scripts/post-script.ts @@ -6,62 +6,18 @@ import relativeTime from 'dayjs/plugin/relativeTime'; import inquirer from 'inquirer'; import fetch from 'isomorphic-fetch'; import semver from 'semver'; +import deprecatedVersions from '../BUG_VERSIONS.json'; dayjs.extend(relativeTime); const CONCH_TAG = 'conch-v5'; -const DEPRECIATED_VERSION = { - '>= 4.21.6 < 4.22.0': ['https://github.com/ant-design/ant-design/pull/36682'], - '>=4.22.2 <=4.22.5': [ - 'https://github.com/ant-design/ant-design/issues/36932', - 'https://github.com/ant-design/ant-design/pull/36800', - 'https://github.com/ant-design/ant-design/issues/37024', - ], - '4.23.0': ['https://github.com/ant-design/ant-design/issues/37461'], - '4.23.5': [ - 'https://github.com/ant-design/ant-design/issues/37929', - 'https://github.com/ant-design/ant-design/issues/37931', - ], - '4.24.0': ['https://github.com/ant-design/ant-design/issues/38371'], - '5.0.4': ['https://github.com/ant-design/ant-design/issues/39284'], - '5.0.6': ['https://github.com/ant-design/ant-design/issues/39807'], - '5.1.0': ['https://github.com/react-component/drawer/pull/370'], - '5.1.2': ['https://github.com/ant-design/ant-design/issues/39949'], - '5.1.3': ['https://github.com/ant-design/ant-design/issues/40113'], - '5.1.4': ['https://github.com/ant-design/ant-design/issues/40186'], - '>= 5.2.3 <= 5.3.0': [ - 'https://github.com/ant-design/ant-design/pull/40719#issuecomment-1453418135', - ], - '5.4.1': ['https://github.com/ant-design/ant-design/issues/41751'], - '>= 5.4.3 <= 5.4.5': [ - 'https://github.com/ant-design/cssinjs/pull/108', - 'https://github.com/ant-design/ant-design/pull/41993', - ], - '5.6.2': ['https://github.com/ant-design/ant-design/issues/43113'], - '5.6.3': ['https://github.com/ant-design/ant-design/issues/43190'], - '5.7.0': ['https://github.com/ant-design/ant-design/issues/43684'], - '5.7.1': [ - 'https://github.com/ant-design/ant-design/issues/43654', - 'https://github.com/ant-design/ant-design/issues/43684', - ], - '5.8.0': ['https://github.com/ant-design/ant-design/issues/43943'], - '5.9.1': ['https://github.com/ant-design/ant-design/issues/44907'], - '5.10.0': ['https://github.com/ant-design/ant-design/issues/45289'], - '5.11.0': ['https://github.com/ant-design/ant-design/issues/45742'], - '5.11.1': ['https://github.com/ant-design/ant-design/issues/45883'], - '5.11.2': ['https://github.com/ant-design/ant-design/issues/46005'], - '5.11.4': ['https://github.com/ant-design/ant-design/pull/46103'], - '5.12.3': ['https://github.com/ant-design/ant-design/issues/46525'], - '5.12.6': ['https://github.com/ant-design/ant-design/issues/46719'], -} as const; - function matchDeprecated(v: string) { - const match = Object.keys(DEPRECIATED_VERSION).find((depreciated) => + const match = Object.keys(deprecatedVersions).find((depreciated) => semver.satisfies(v, depreciated), ); - const reason = DEPRECIATED_VERSION[match as keyof typeof DEPRECIATED_VERSION] || []; + const reason = deprecatedVersions[match as keyof typeof deprecatedVersions] || []; return { match, From a72ea642b23e92c83a24569765943f2bccb76981 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=88=9C=E5=B2=B3?= Date: Fri, 5 Jan 2024 17:49:04 +0800 Subject: [PATCH 14/96] fix: document homepage style optimization (#46818) * fix: document homepage style optimization * fix: use the wrap property of Space --- .dumi/pages/index/components/Theme/ThemePicker.tsx | 2 +- .dumi/pages/index/components/Theme/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx index 7e73594b65..4b29bc3a27 100644 --- a/.dumi/pages/index/components/Theme/ThemePicker.tsx +++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx @@ -88,7 +88,7 @@ export default function ThemePicker(props: ThemePickerProps) { const [locale] = useLocale(locales); return ( - + {Object.keys(THEMES).map((theme, index) => { const url = THEMES[theme as THEME]; diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx index 399b377b34..ed86fbbf6e 100644 --- a/.dumi/pages/index/components/Theme/index.tsx +++ b/.dumi/pages/index/components/Theme/index.tsx @@ -189,7 +189,7 @@ const useStyle = createStyles(({ token, cx }) => { `, form: css` - width: 800px; + width: 100%; margin: 0 auto; `, carousel, From 54e75516c031f1345495f9d6fb8f6e9fdc0d3c5c Mon Sep 17 00:00:00 2001 From: Shunze Chen Date: Fri, 5 Jan 2024 22:59:06 +0800 Subject: [PATCH 15/96] docs: delete useless logic (#46833) --- components/tree/demo/draggable.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/components/tree/demo/draggable.tsx b/components/tree/demo/draggable.tsx index 0f8b8d8249..bbeac66591 100644 --- a/components/tree/demo/draggable.tsx +++ b/components/tree/demo/draggable.tsx @@ -45,7 +45,7 @@ const App: React.FC = () => { const dropKey = info.node.key; const dragKey = info.dragNode.key; const dropPos = info.node.pos.split('-'); - const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); + const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); // the drop position relative to the drop node, inside 0, top -1, bottom 1 const loop = ( data: DataNode[], @@ -77,18 +77,6 @@ const App: React.FC = () => { // where to insert. New item was inserted to the start of the array in this example, but can be anywhere item.children.unshift(dragObj); }); - } else if ( - ((info.node as any).props.children || []).length > 0 && // Has children - (info.node as any).props.expanded && // Is expanded - dropPosition === 1 // On the bottom gap - ) { - loop(data, dropKey, (item) => { - item.children = item.children || []; - // where to insert. New item was inserted to the start of the array in this example, but can be anywhere - item.children.unshift(dragObj); - // in previous version, we use item.children.push(dragObj) to insert the - // item to the tail of the children - }); } else { let ar: DataNode[] = []; let i: number; @@ -97,8 +85,10 @@ const App: React.FC = () => { i = index; }); if (dropPosition === -1) { + // Drop on the top of the drop node ar.splice(i!, 0, dragObj!); } else { + // Drop on the bottom of the drop node ar.splice(i! + 1, 0, dragObj!); } } From e18b55a0da4a0c3c11f41977918760c7cd2b051e Mon Sep 17 00:00:00 2001 From: kelvine Date: Fri, 5 Jan 2024 17:00:32 +0200 Subject: [PATCH 16/96] docs: correction on Third Part(Y) grammar (#46831) I added grammar corrections to fix the "third party" spelling Signed-off-by: kelvine --- .dumi/theme/builtins/ResourceCards/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dumi/theme/builtins/ResourceCards/index.tsx b/.dumi/theme/builtins/ResourceCards/index.tsx index f8494a6ce4..207db10e64 100644 --- a/.dumi/theme/builtins/ResourceCards/index.tsx +++ b/.dumi/theme/builtins/ResourceCards/index.tsx @@ -76,7 +76,7 @@ const locales = { }, en: { official: 'Official', - thirdPart: 'Third Part', + thirdPart: 'Third Party', thirdPartDesc: 'Unofficial product, please take care confirm availability', }, }; From 825dc9088940f5d0a0bf460b87843c08f62493f1 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Sat, 6 Jan 2024 02:06:45 +0800 Subject: [PATCH 17/96] chore(deps-dev): bump the dev-dependencies group with 1 updates (#46827) * chore(deps-dev): bump the dev-dependencies group with 2 updates Updates the requirements on [chalk](https://github.com/chalk/chalk) and [puppeteer](https://github.com/puppeteer/puppeteer) to permit the latest version. Updates `chalk` from 4.1.2 to 5.3.0 - [Release notes](https://github.com/chalk/chalk/releases) - [Commits](https://github.com/chalk/chalk/compare/v4.1.2...v5.3.0) Updates `puppeteer` to 21.7.0 - [Release notes](https://github.com/puppeteer/puppeteer/releases) - [Changelog](https://github.com/puppeteer/puppeteer/blob/main/release-please-config.json) - [Commits](https://github.com/puppeteer/puppeteer/compare/puppeteer-v21.6.1...puppeteer-v21.7.0) --- updated-dependencies: - dependency-name: chalk dependency-type: direct:development update-type: version-update:semver-major dependency-group: dev-dependencies - dependency-name: puppeteer dependency-type: direct:development dependency-group: dev-dependencies ... Signed-off-by: dependabot[bot] * Update package.json Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: dependabot[bot] Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: lijianan <574980606@qq.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 227f9b318c..aaeed4fa48 100644 --- a/package.json +++ b/package.json @@ -285,7 +285,7 @@ "pretty-format": "^29.7.0", "prismjs": "^1.29.0", "progress": "^2.0.3", - "puppeteer": "^21.6.1", + "puppeteer": "^21.7.0", "qs": "^6.11.2", "rc-footer": "^0.6.8", "rc-tween-one": "^3.0.6", From 0ea3da719df1e6c5ded1875f5123fae4657f8e31 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 6 Jan 2024 18:05:25 +0800 Subject: [PATCH 18/96] site: replace site page with (#46834) --- .dumi/hooks/useLocale.ts | 2 +- .dumi/pages/index/components/Banner.tsx | 28 +++--- .../pages/index/components/ComponentsList.tsx | 95 ++++++++----------- .../index/components/PreviewBanner/index.tsx | 21 ++-- .../index/components/Theme/ColorPicker.tsx | 42 ++++---- .../index/components/Theme/RadiusPicker.tsx | 47 +++++---- .../index/components/Theme/ThemePicker.tsx | 55 +++++------ .dumi/pages/index/components/Theme/index.tsx | 36 +++---- .../builtins/ComponentOverview/index.tsx | 6 +- .../builtins/Previewer/CodePreviewer.tsx | 10 +- .dumi/theme/builtins/TokenCompare/index.tsx | 28 +++--- .dumi/theme/common/Loading.tsx | 7 +- .dumi/theme/slots/Content/DocMeta.tsx | 19 ++-- .dumi/theme/slots/Content/index.tsx | 11 +-- 14 files changed, 182 insertions(+), 225 deletions(-) diff --git a/.dumi/hooks/useLocale.ts b/.dumi/hooks/useLocale.ts index 8ad2969531..4cd075541a 100644 --- a/.dumi/hooks/useLocale.ts +++ b/.dumi/hooks/useLocale.ts @@ -9,7 +9,7 @@ function useLocale( localeMap?: LocaleMap, ): [Record, 'cn' | 'en'] { const { id } = useDumiLocale(); - const localeType = id === 'zh-CN' ? ('cn' as const) : ('en' as const); + const localeType = id === 'zh-CN' ? 'cn' : 'en'; return [localeMap?.[localeType]!, localeType]; } diff --git a/.dumi/pages/index/components/Banner.tsx b/.dumi/pages/index/components/Banner.tsx index 1a8554fe18..5fe6274b70 100644 --- a/.dumi/pages/index/components/Banner.tsx +++ b/.dumi/pages/index/components/Banner.tsx @@ -1,8 +1,9 @@ -import { createStyles, css, useTheme } from 'antd-style'; -import { Link, useLocation } from 'dumi'; import * as React from 'react'; +import { Button, Flex, Typography } from 'antd'; +import { createStyles, css, useTheme } from 'antd-style'; import classNames from 'classnames'; -import { Button, Space, Typography } from 'antd'; +import { Link, useLocation } from 'dumi'; + import useLocale from '../../../hooks/useLocale'; import SiteContext from '../../../theme/slots/SiteContext'; import * as utils from '../../../theme/utils'; @@ -46,22 +47,19 @@ const useStyle = () => { font-size: 68px; } `, + btnWrap: css` + margin-bottom: ${token.marginXL}px; + `, }))(); }; -export interface BannerProps { - children?: React.ReactNode; -} - -export default function Banner({ children }: BannerProps) { +const Banner: React.FC = ({ children }) => { const [locale] = useLocale(locales); const { pathname, search } = useLocation(); const token = useTheme(); const { styles } = useStyle(); const { isMobile } = React.useContext(SiteContext); - const isZhCN = utils.isZhCN(pathname); - return ( <> {/* Banner Placeholder Motion */} @@ -157,8 +155,7 @@ export default function Banner({ children }: BannerProps) { >
{locale.slogan}
- - + - - + {children} ); -} +}; + +export default Banner; diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx index a528d1c4ce..059cd8ce9e 100644 --- a/.dumi/pages/index/components/ComponentsList.tsx +++ b/.dumi/pages/index/components/ComponentsList.tsx @@ -1,14 +1,13 @@ -/* eslint-disable react/jsx-pascal-case */ import React, { useContext } from 'react'; import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons'; import { Alert, Carousel, DatePicker, + Flex, FloatButton, Modal, Progress, - Space, Tag, Tour, Typography, @@ -22,6 +21,11 @@ import useLocale from '../../../hooks/useLocale'; import SiteContext from '../../../theme/slots/SiteContext'; import { getCarouselStyle } from './util'; +const { _InternalPanelDoNotUseOrYouWillBeFired: ModalDoNotUseOrYouWillBeFired } = Modal; +const { _InternalPanelDoNotUseOrYouWillBeFired: DatePickerDoNotUseOrYouWillBeFired } = DatePicker; +const { _InternalPanelDoNotUseOrYouWillBeFired: TourDoNotUseOrYouWillBeFired } = Tour; +const { _InternalPanelDoNotUseOrYouWillBeFired: FloatButtonDoNotUseOrYouWillBeFired } = FloatButton; + const SAMPLE_CONTENT_EN = 'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.'; @@ -110,19 +114,16 @@ const ComponentItem: React.FC = ({ title, node, type, index {/* Decorator */}
{/* Title */} - + {title} {tagText} - +
{ const token = useTheme(); const { styles } = useStyle(); const [locale] = useLocale(locales); const { isMobile } = useContext(SiteContext); - - const COMPONENTS: { - title: React.ReactNode; - type: 'new' | 'update'; - node: React.ReactNode; - }[] = React.useMemo( + const COMPONENTS = React.useMemo[]>( () => [ { title: 'Modal', type: 'update', node: ( - + {locale.sampleContent} - + ), }, @@ -172,7 +168,8 @@ export default function ComponentsList() { title: 'DatePicker', type: 'update', node: ( - ), }, @@ -193,28 +189,27 @@ export default function ComponentsList() { title: 'Progress', type: 'update', node: ( - - + + {locale.inProgress} - - + + {locale.success} - - + + {locale.taskFailed} - - + + ), }, - { title: 'Tour', type: 'new', node: ( - - + , - }, - { - icon: , - }, - { - icon: , - }, + { icon: }, + { icon: }, + { icon: }, ]} /> - - + , - }, - { - icon: , - }, - { - icon: , - }, + { icon: }, + { icon: }, + { icon: }, ]} /> - + ), }, @@ -285,7 +268,7 @@ export default function ComponentsList() { return isMobile ? (
- {COMPONENTS.map(({ title, node, type }, index) => ( + {COMPONENTS.map(({ title, node, type }, index) => ( ))} @@ -293,10 +276,12 @@ export default function ComponentsList() { ) : (
- {COMPONENTS.map(({ title, node, type }, index) => ( + {COMPONENTS.map(({ title, node, type }, index) => ( ))}
); -} +}; + +export default ComponentsList; diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx index cb26d82c1c..f875a6afcf 100644 --- a/.dumi/pages/index/components/PreviewBanner/index.tsx +++ b/.dumi/pages/index/components/PreviewBanner/index.tsx @@ -1,6 +1,6 @@ import React, { Suspense } from 'react'; -import { Button, ConfigProvider, Space, Typography } from 'antd'; -import { createStyles, useTheme } from 'antd-style'; +import { Button, ConfigProvider, Flex, Typography } from 'antd'; +import { createStyles } from 'antd-style'; import { Link, useLocation } from 'dumi'; import useLocale from '../../../../hooks/useLocale'; @@ -97,21 +97,18 @@ const useStyle = () => { width: 100%; z-index: 1; `, + btnWrap: css` + margin-bottom: ${token.marginXL}px; + `, }; })(); }; -export interface PreviewBannerProps { - children?: React.ReactNode; -} - -const PreviewBanner: React.FC = (props) => { +const PreviewBanner: React.FC = (props) => { const { children } = props; - const [locale] = useLocale(locales); const { styles } = useStyle(); const { isMobile } = React.useContext(SiteContext); - const token = useTheme(); const { pathname, search } = useLocation(); const isZhCN = utils.isZhCN(pathname); @@ -140,13 +137,11 @@ const PreviewBanner: React.FC = (props) => { )}
-

Ant Design 5.0

{locale.slogan}

 - - + - +
{children}
diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx index 464566be47..77eebd29e3 100644 --- a/.dumi/pages/index/components/Theme/ColorPicker.tsx +++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from 'react'; -import { ColorPicker, Input, Space } from 'antd'; +import { ColorPicker, Flex, Input } from 'antd'; import { createStyles } from 'antd-style'; import type { Color } from 'antd/es/color-picker'; import { generateColor } from 'antd/es/color-picker/util'; @@ -91,21 +91,20 @@ const ThemeColorPicker: React.FC = ({ value, onChange, id }) = }, [value]); return ( - + onChange?.(event.target.value)} style={{ width: 120 }} id={id} /> - - - {matchColors.map(({ color, active, picker }) => { - let colorNode = ( + + {matchColors.map(({ color, active, picker }) => { + const colorNode = ( // eslint-disable-next-line jsx-a11y/label-has-associated-control ); - - if (picker) { - colorNode = ( - - {colorNode} - - ); - } - - return colorNode; + return picker ? ( + + {colorNode} + + ) : ( + colorNode + ); })} - - + + ); }; diff --git a/.dumi/pages/index/components/Theme/RadiusPicker.tsx b/.dumi/pages/index/components/Theme/RadiusPicker.tsx index ee7f03e574..78acd67a51 100644 --- a/.dumi/pages/index/components/Theme/RadiusPicker.tsx +++ b/.dumi/pages/index/components/Theme/RadiusPicker.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { InputNumber, Slider, Space } from 'antd'; +import { Flex, InputNumber, Slider } from 'antd'; export interface RadiusPickerProps { id?: string; @@ -7,27 +7,26 @@ export interface RadiusPickerProps { onChange?: (value: number | null) => void; } -export default function RadiusPicker({ value, onChange, id }: RadiusPickerProps) { - return ( - - `${val}px`} - parser={(str) => (str ? parseFloat(str) : (str as any))} - id={id} - /> +const RadiusPicker: React.FC = ({ id, value, onChange }) => ( + + `${val}px`} + parser={(str) => (str ? parseFloat(str) : (str as any))} + id={id} + /> + + +); - - - ); -} +export default RadiusPicker; diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx index 4b29bc3a27..dc3ff97607 100644 --- a/.dumi/pages/index/components/Theme/ThemePicker.tsx +++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx @@ -1,6 +1,7 @@ +/* eslint-disable jsx-a11y/label-has-associated-control */ import * as React from 'react'; -import { Space } from 'antd'; -import { createStyles, useTheme } from 'antd-style'; +import { Flex } from 'antd'; +import { createStyles } from 'antd-style'; import classNames from 'classnames'; import useLocale from '../../../../hooks/useLocale'; @@ -65,7 +66,6 @@ const useStyle = createStyles(({ token, css }) => ({ box-shadow: 0 0 0 1px ${token.colorBgContainer}, 0 0 0 ${token.controlOutlineWidth * 2 + 1}px ${token.colorPrimary}; - &, &:hover:not(:focus-within) { transform: scale(1); @@ -79,35 +79,28 @@ export interface ThemePickerProps { onChange?: (value: string) => void; } -export default function ThemePicker(props: ThemePickerProps) { - const { value, onChange, id } = props; - - const token = useTheme(); +const ThemePicker: React.FC = (props) => { + const { value, id, onChange } = props; const { styles } = useStyle(); - const [locale] = useLocale(locales); - return ( - - {Object.keys(THEMES).map((theme, index) => { - const url = THEMES[theme as THEME]; - - return ( - - {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */} - - {locale[theme as keyof typeof locale]} - - ); - })} - + + {Object.keys(THEMES).map((theme: THEME, index) => ( + + + {locale[theme]} + + ))} + ); -} +}; + +export default ThemePicker; diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx index ed86fbbf6e..62ea7f3357 100644 --- a/.dumi/pages/index/components/Theme/index.tsx +++ b/.dumi/pages/index/components/Theme/index.tsx @@ -13,11 +13,11 @@ import { Button, Card, ConfigProvider, + Flex, Form, Layout, Menu, Radio, - Space, theme, Typography, } from 'antd'; @@ -31,7 +31,7 @@ import useDark from '../../../../hooks/useDark'; import useLocale from '../../../../hooks/useLocale'; import Link from '../../../../theme/common/Link'; import SiteContext from '../../../../theme/slots/SiteContext'; -import * as utils from '../../../../theme/utils'; +import { getLocalizedPathname } from '../../../../theme/utils'; import Group from '../Group'; import { getCarouselStyle } from '../util'; import BackgroundImage from './BackgroundImage'; @@ -154,6 +154,8 @@ const useStyle = createStyles(({ token, cx }) => { height: ${token.controlHeight}px; border-radius: 100%; background: rgba(240, 240, 240, 0.75); + background-size: cover; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.2); `, avatarDark: css` @@ -458,8 +460,7 @@ export default function Theme() {

Ant Design 5.0

- - +
- + @@ -499,20 +498,16 @@ export default function Theme() { - + + - + } >
diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx index 827ee71168..32ed953e86 100644 --- a/.dumi/theme/builtins/ComponentOverview/index.tsx +++ b/.dumi/theme/builtins/ComponentOverview/index.tsx @@ -1,7 +1,7 @@ import React, { memo, useContext, useMemo, useRef, useState } from 'react'; import type { CSSProperties } from 'react'; import { SearchOutlined } from '@ant-design/icons'; -import { Affix, Card, Col, Divider, Input, Row, Space, Tag, Typography } from 'antd'; +import { Affix, Card, Col, Divider, Flex, Input, Row, Tag, Typography } from 'antd'; import { createStyles, useTheme } from 'antd-style'; import { useIntl, useLocation, useSidebarData } from 'dumi'; import debounce from 'lodash/debounce'; @@ -191,10 +191,10 @@ const Overview: React.FC = () => { return components?.length ? (
- <Space align="center"> + <Flex gap="small" align="center"> <span style={{ fontSize: 24 }}>{group?.title}</span> <Tag style={{ display: 'block' }}>{components.length}</Tag> - </Space> + </Flex> {components.map((component) => { diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index b9c0ec0896..6a6b3efceb 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -2,13 +2,13 @@ import React, { useContext, useEffect, useRef, useState } from 'react'; import { LinkOutlined, ThunderboltOutlined, UpOutlined } from '@ant-design/icons'; import type { Project } from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk'; -import { Alert, Badge, Space, Tooltip } from 'antd'; +import { Alert, Badge, Flex, Tooltip } from 'antd'; import { createStyles, css } from 'antd-style'; import classNames from 'classnames'; import { FormattedMessage, LiveContext, useSiteData } from 'dumi'; +import LiveDemo from 'dumi/theme-default/slots/LiveDemo'; import LZString from 'lz-string'; -import type { AntdPreviewerProps } from './Previewer'; import useLocation from '../../../hooks/useLocation'; import BrowserFrame from '../../common/BrowserFrame'; import ClientOnly from '../../common/ClientOnly'; @@ -21,7 +21,7 @@ import RiddleIcon from '../../common/RiddleIcon'; import type { SiteContextProps } from '../../slots/SiteContext'; import SiteContext from '../../slots/SiteContext'; import { ping } from '../../utils'; -import LiveDemo from 'dumi/theme-default/slots/LiveDemo'; +import type { AntdPreviewerProps } from './Previewer'; const { ErrorBoundary } = Alert; @@ -386,7 +386,7 @@ createRoot(document.getElementById('container')).render(); {description && (
)} - + {showOnlineUrl && ( }> ); />
- + {codeExpand && (
diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx index 9ae37389f0..dc20185a61 100644 --- a/.dumi/theme/builtins/TokenCompare/index.tsx +++ b/.dumi/theme/builtins/TokenCompare/index.tsx @@ -1,10 +1,11 @@ // 用于 color.md 中的颜色对比 import React from 'react'; -import classNames from 'classnames'; import { TinyColor } from '@ctrl/tinycolor'; +import { Flex, theme } from 'antd'; import { createStyles } from 'antd-style'; import tokenMeta from 'antd/es/version/token-meta.json'; -import { Space, theme } from 'antd'; +import classNames from 'classnames'; + import useLocale from '../../../hooks/useLocale'; const useStyle = createStyles(({ token, css }) => { @@ -29,7 +30,7 @@ const useStyle = createStyles(({ token, css }) => { display: flex; align-items: center; justify-content: center; - color: rgba(0,0,0,0.88); + color: rgba(0, 0, 0, 0.88); border-right: 1px solid rgba(0, 0, 0, 0.1); `, @@ -61,33 +62,30 @@ interface ColorCircleProps { color?: string; } -function ColorCircle({ color }: ColorCircleProps) { +const ColorCircle: React.FC = ({ color }) => { const { styles } = useStyle(); - return ( - +
{color}
- + ); -} +}; export interface TokenCompareProps { tokenNames?: string; } -export default function TokenCompare(props: TokenCompareProps) { +const TokenCompare: React.FC = (props) => { const { tokenNames = '' } = props; - const [, lang] = useLocale({}); + const [, lang] = useLocale(); const { styles } = useStyle(); const tokenList = React.useMemo(() => { const list = tokenNames.split('|'); const lightTokens = theme.getDesignToken(); - const darkTokens = theme.getDesignToken({ - algorithm: theme.darkAlgorithm, - }); + const darkTokens = theme.getDesignToken({ algorithm: theme.darkAlgorithm }); return list.map((tokenName) => { const meta = tokenMeta.global[tokenName]; @@ -116,4 +114,6 @@ export default function TokenCompare(props: TokenCompareProps) { ))}
); -} +}; + +export default TokenCompare; diff --git a/.dumi/theme/common/Loading.tsx b/.dumi/theme/common/Loading.tsx index cf1ff79613..a6d7995628 100644 --- a/.dumi/theme/common/Loading.tsx +++ b/.dumi/theme/common/Loading.tsx @@ -1,10 +1,9 @@ import React from 'react'; +import { Flex, Skeleton, Spin } from 'antd'; import { useLocation } from 'dumi'; -import { Skeleton, Space, Spin } from 'antd'; const Loading: React.FC = () => { const { pathname } = useLocation(); - if ( pathname.startsWith('/components') || pathname.startsWith('/docs') || @@ -25,9 +24,9 @@ const Loading: React.FC = () => { } return ( - + - + ); }; diff --git a/.dumi/theme/slots/Content/DocMeta.tsx b/.dumi/theme/slots/Content/DocMeta.tsx index dc2a84889d..84742da7f3 100644 --- a/.dumi/theme/slots/Content/DocMeta.tsx +++ b/.dumi/theme/slots/Content/DocMeta.tsx @@ -1,10 +1,15 @@ import React, { useLayoutEffect, useMemo, useState } from 'react'; import { CalendarOutlined } from '@ant-design/icons'; -import { Avatar, Skeleton, Space, Typography } from 'antd'; +import { Avatar, Flex, Skeleton, Typography } from 'antd'; import DayJS from 'dayjs'; import { useRouteMeta } from 'dumi'; -const AuthorAvatar: React.FC<{ name: string; avatar: string }> = ({ name, avatar }) => { +interface AuthorAvatarPoprs { + name: string; + avatar: string; +} + +const AuthorAvatar: React.FC = ({ name, avatar }) => { const [loading, setLoading] = useState(true); const [error, setError] = useState(false); useLayoutEffect(() => { @@ -52,26 +57,26 @@ const DocMeta: React.FC = () => { return ( - + {meta.frontmatter.date && ( {DayJS(meta.frontmatter.date).format('YYYY-MM-DD')} )} - {mergedAuthorInfos.map((info) => ( + {mergedAuthorInfos.map((info) => ( - + @{info.name} - + ))} - + ); }; diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index 83776f572a..efb9d231e4 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -1,5 +1,5 @@ import React, { useContext, useLayoutEffect, useMemo } from 'react'; -import { Col, Space, Typography } from 'antd'; +import { Col, Flex, Typography } from 'antd'; import { createStyles } from 'antd-style'; import classNames from 'classnames'; import { FormattedMessage, useRouteMeta } from 'dumi'; @@ -69,10 +69,9 @@ const Content: React.FC = ({ children }) => {
{meta.frontmatter?.title ? ( - - {meta.frontmatter?.title} - {meta.frontmatter?.subtitle} - + +
{meta.frontmatter?.title}
+
{meta.frontmatter?.subtitle}
{!pathname.startsWith('/components/overview') && ( = ({ children }) => { /> )} - + {pathname.startsWith('/components/') && ( From 65b7ff3eb96fe946a155adc57da81705acf0dd54 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 6 Jan 2024 23:20:22 +0800 Subject: [PATCH 19/96] Revert "chore(deps-dev): bump the dev-dependencies group with 1 updates" (#46839) * Revert "chore(deps-dev): bump the dev-dependencies group with 1 updates (#46827)" This reverts commit 825dc9088940f5d0a0bf460b87843c08f62493f1. * Update package.json Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index aaeed4fa48..29b9068f80 100644 --- a/package.json +++ b/package.json @@ -285,7 +285,7 @@ "pretty-format": "^29.7.0", "prismjs": "^1.29.0", "progress": "^2.0.3", - "puppeteer": "^21.7.0", + "puppeteer": "21.6.1", "qs": "^6.11.2", "rc-footer": "^0.6.8", "rc-tween-one": "^3.0.6", From 5c7725e1cee8ef3d4acb2d9b565715c179724c0f Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 7 Jan 2024 12:46:33 +0800 Subject: [PATCH 20/96] chore(deps): update dependency puppeteer to v21.7.0 (#46844) * chore(deps): update dependency puppeteer to v21.7.0 * Update package.json Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: lijianan <574980606@qq.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 29b9068f80..aaeed4fa48 100644 --- a/package.json +++ b/package.json @@ -285,7 +285,7 @@ "pretty-format": "^29.7.0", "prismjs": "^1.29.0", "progress": "^2.0.3", - "puppeteer": "21.6.1", + "puppeteer": "^21.7.0", "qs": "^6.11.2", "rc-footer": "^0.6.8", "rc-tween-one": "^3.0.6", From 8a078c9714fc054e3d167dfedbc0d4ff3279ef57 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=91=E6=B3=A5?= <1656081615@qq.com> Date: Sun, 7 Jan 2024 22:34:03 +0800 Subject: [PATCH 21/96] feat(InputNumber): support classNames props (#46842) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(InputNumber): lose style when pass classNames props #46841 fix: some classNames item were not take effect docs: update docs style: update chore: update test: update case docs: update version * docs: update Semantic DOM * docs: update components/input-number/index.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: 云泥 <1656081615@qq.com> * docs: format * test: add case --------- Signed-off-by: 云泥 <1656081615@qq.com> Co-authored-by: lijianan <574980606@qq.com> --- .../input-number/__tests__/index.test.tsx | 20 ++++++++++++++++++- components/input-number/index.en-US.md | 11 ++++++++++ components/input-number/index.tsx | 5 +++-- components/input-number/index.zh-CN.md | 11 ++++++++++ scripts/__snapshots__/check-site.ts.snap | 4 ++-- 5 files changed, 46 insertions(+), 5 deletions(-) diff --git a/components/input-number/__tests__/index.test.tsx b/components/input-number/__tests__/index.test.tsx index 576da153fd..51b526d50d 100644 --- a/components/input-number/__tests__/index.test.tsx +++ b/components/input-number/__tests__/index.test.tsx @@ -1,5 +1,6 @@ -import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'; import React from 'react'; +import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'; + import InputNumber from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; @@ -71,6 +72,23 @@ describe('InputNumber', () => { ).toBe(true); }); + it('should support classNames', () => { + const { container } = render( + , + ); + expect(container.querySelector('.ant-input-number')).toHaveClass('my-class-name-input'); + expect(container.querySelector('.ant-input-number-prefix')).toHaveClass('my-class-name-prefix'); + expect(container.querySelector('.ant-input-number-suffix')).toHaveClass('my-class-name-suffix'); + }); + it('renders correctly when the controlled mode number is out of range', () => { const App: React.FC = () => { const [value, setValue] = React.useState(1); diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 8207e862ec..14c724cec3 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -42,6 +42,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 | - | | | autoFocus | If get focus when component mounted | boolean | false | - | +| classNames | Semantic DOM class | Record<[SemanticDOM](#inputnumber), string> | - | 5.13.0 | | changeOnBlur | Trigger `onChange` when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 | | controls | Whether to show `+-` controls, or set custom arrows icon | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 | | decimalSeparator | Decimal separator | string | - | - | @@ -66,6 +67,16 @@ Common props ref：[Common props](/docs/react/common-props) | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - | | onStep | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 | +### Semantic DOM + +#### InputNumber + +| Property | Description | Version | +| -------- | -------------------------- | ------- | +| input | Wrapper of `input` element | 5.13.0 | +| prefix | Wrapper of prefix | 5.13.0 | +| suffix | Wrapper of suffix | 5.13.0 | + ## Methods | Name | Description | diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index b0c4b301c4..bc4a02527f 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -54,6 +54,7 @@ const InputNumber = React.forwardRef((props, const { className, rootClassName, + classNames: classes, size: customizeSize, disabled: customDisabled, prefixCls: customizePrefixCls, @@ -155,12 +156,12 @@ const InputNumber = React.forwardRef((props, ) } classNames={{ - input: inputNumberClass, + ...classes, + input: classNames(inputNumberClass, classes?.input), variant: classNames( { [`${prefixCls}-${variant}`]: enableVariantCls, }, - getStatusClassNames(prefixCls, mergedStatus, hasFeedback), ), affixWrapper: classNames( diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 04e0d9cbdd..34dd9d5b69 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -43,6 +43,7 @@ demo: | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 | | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 | | autoFocus | 自动获取焦点 | boolean | false | - | +| classNames | 语义化结构 class | Record<[SemanticDOM](#inputnumber), string> | - | 5.13.0 | | changeOnBlur | 是否在失去焦点时，触发 `onChange` 事件（例如值超出范围时，重新限制回范围并触发事件） | boolean | true | 5.11.0 | | controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 | | decimalSeparator | 小数点 | string | - | - | @@ -67,6 +68,16 @@ demo: | onPressEnter | 按下回车的回调 | function(e) | - | - | | onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 | +### Semantic DOM + +#### InputNumber + +| 名称 | 说明 | 版本 | +| ------ | -------------------- | ------ | +| input | `input` 元素包裹元素 | 5.13.0 | +| prefix | 所有前缀的包裹元素 | 5.13.0 | +| suffix | 所有后缀的包裹元素 | 5.13.0 | + ## 方法 | 名称 | 描述 | diff --git a/scripts/__snapshots__/check-site.ts.snap b/scripts/__snapshots__/check-site.ts.snap index 6892bd0da9..6100722a4f 100644 --- a/scripts/__snapshots__/check-site.ts.snap +++ b/scripts/__snapshots__/check-site.ts.snap @@ -120,9 +120,9 @@ exports[`site test Component components/input en Page 1`] = `8`; exports[`site test Component components/input zh Page 1`] = `8`; -exports[`site test Component components/input-number en Page 1`] = `2`; +exports[`site test Component components/input-number en Page 1`] = `3`; -exports[`site test Component components/input-number zh Page 1`] = `2`; +exports[`site test Component components/input-number zh Page 1`] = `3`; exports[`site test Component components/layout en Page 1`] = `2`; From 1ff5805cca025a43d0f1e9ee1ac7b386ecdd97a1 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 8 Jan 2024 10:37:10 +0800 Subject: [PATCH 22/96] Revert "feat(InputNumber): support classNames props (#46842)" (#46849) This reverts commit 8a078c9714fc054e3d167dfedbc0d4ff3279ef57. --- .../input-number/__tests__/index.test.tsx | 20 +------------------ components/input-number/index.en-US.md | 11 ---------- components/input-number/index.tsx | 5 ++--- components/input-number/index.zh-CN.md | 11 ---------- scripts/__snapshots__/check-site.ts.snap | 4 ++-- 5 files changed, 5 insertions(+), 46 deletions(-) diff --git a/components/input-number/__tests__/index.test.tsx b/components/input-number/__tests__/index.test.tsx index 51b526d50d..576da153fd 100644 --- a/components/input-number/__tests__/index.test.tsx +++ b/components/input-number/__tests__/index.test.tsx @@ -1,6 +1,5 @@ -import React from 'react'; import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons'; - +import React from 'react'; import InputNumber from '..'; import focusTest from '../../../tests/shared/focusTest'; import mountTest from '../../../tests/shared/mountTest'; @@ -72,23 +71,6 @@ describe('InputNumber', () => { ).toBe(true); }); - it('should support classNames', () => { - const { container } = render( - , - ); - expect(container.querySelector('.ant-input-number')).toHaveClass('my-class-name-input'); - expect(container.querySelector('.ant-input-number-prefix')).toHaveClass('my-class-name-prefix'); - expect(container.querySelector('.ant-input-number-suffix')).toHaveClass('my-class-name-suffix'); - }); - it('renders correctly when the controlled mode number is out of range', () => { const App: React.FC = () => { const [value, setValue] = React.useState(1); diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 14c724cec3..8207e862ec 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -42,7 +42,6 @@ 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 | - | | | autoFocus | If get focus when component mounted | boolean | false | - | -| classNames | Semantic DOM class | Record<[SemanticDOM](#inputnumber), string> | - | 5.13.0 | | changeOnBlur | Trigger `onChange` when blur. e.g. reset value in range by blur | boolean | true | 5.11.0 | | controls | Whether to show `+-` controls, or set custom arrows icon | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 | | decimalSeparator | Decimal separator | string | - | - | @@ -67,16 +66,6 @@ Common props ref：[Common props](/docs/react/common-props) | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - | | onStep | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 | -### Semantic DOM - -#### InputNumber - -| Property | Description | Version | -| -------- | -------------------------- | ------- | -| input | Wrapper of `input` element | 5.13.0 | -| prefix | Wrapper of prefix | 5.13.0 | -| suffix | Wrapper of suffix | 5.13.0 | - ## Methods | Name | Description | diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index bc4a02527f..b0c4b301c4 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -54,7 +54,6 @@ const InputNumber = React.forwardRef((props, const { className, rootClassName, - classNames: classes, size: customizeSize, disabled: customDisabled, prefixCls: customizePrefixCls, @@ -156,12 +155,12 @@ const InputNumber = React.forwardRef((props, ) } classNames={{ - ...classes, - input: classNames(inputNumberClass, classes?.input), + input: inputNumberClass, variant: classNames( { [`${prefixCls}-${variant}`]: enableVariantCls, }, + getStatusClassNames(prefixCls, mergedStatus, hasFeedback), ), affixWrapper: classNames( diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 34dd9d5b69..04e0d9cbdd 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -43,7 +43,6 @@ demo: | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 | | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 | | autoFocus | 自动获取焦点 | boolean | false | - | -| classNames | 语义化结构 class | Record<[SemanticDOM](#inputnumber), string> | - | 5.13.0 | | changeOnBlur | 是否在失去焦点时，触发 `onChange` 事件（例如值超出范围时，重新限制回范围并触发事件） | boolean | true | 5.11.0 | | controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 | | decimalSeparator | 小数点 | string | - | - | @@ -68,16 +67,6 @@ demo: | onPressEnter | 按下回车的回调 | function(e) | - | - | | onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 | -### Semantic DOM - -#### InputNumber - -| 名称 | 说明 | 版本 | -| ------ | -------------------- | ------ | -| input | `input` 元素包裹元素 | 5.13.0 | -| prefix | 所有前缀的包裹元素 | 5.13.0 | -| suffix | 所有后缀的包裹元素 | 5.13.0 | - ## 方法 | 名称 | 描述 | diff --git a/scripts/__snapshots__/check-site.ts.snap b/scripts/__snapshots__/check-site.ts.snap index 6100722a4f..6892bd0da9 100644 --- a/scripts/__snapshots__/check-site.ts.snap +++ b/scripts/__snapshots__/check-site.ts.snap @@ -120,9 +120,9 @@ exports[`site test Component components/input en Page 1`] = `8`; exports[`site test Component components/input zh Page 1`] = `8`; -exports[`site test Component components/input-number en Page 1`] = `3`; +exports[`site test Component components/input-number en Page 1`] = `2`; -exports[`site test Component components/input-number zh Page 1`] = `3`; +exports[`site test Component components/input-number zh Page 1`] = `2`; exports[`site test Component components/layout en Page 1`] = `2`; From 473199db61eac062a3d5685720cfa2938a8ec9a7 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 8 Jan 2024 11:05:03 +0800 Subject: [PATCH 23/96] type: type enhancement (#46847) * test: TEST * type: update type --- components/input/Password.tsx | 30 ++++++++++++++++++------------ components/input/Search.tsx | 4 +++- package.json | 2 +- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/components/input/Password.tsx b/components/input/Password.tsx index d2de855f80..4ac551b29e 100644 --- a/components/input/Password.tsx +++ b/components/input/Password.tsx @@ -1,10 +1,11 @@ +import * as React from 'react'; +import { useRef, useState } from 'react'; import EyeInvisibleOutlined from '@ant-design/icons/EyeInvisibleOutlined'; import EyeOutlined from '@ant-design/icons/EyeOutlined'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; import { composeRef } from 'rc-util/lib/ref'; -import * as React from 'react'; -import { useRef, useState } from 'react'; + import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; import useRemovePasswordTimeout from './hooks/useRemovePasswordTimeout'; @@ -14,23 +15,25 @@ import Input from './Input'; const defaultIconRender = (visible: boolean): React.ReactNode => visible ? : ; -type VisibilityToggle = { +interface VisibilityToggle { visible?: boolean; onVisibleChange?: (visible: boolean) => void; -}; +} export interface PasswordProps extends InputProps { readonly inputPrefixCls?: string; - readonly action?: string; + readonly action?: 'click' | 'hover'; visibilityToggle?: boolean | VisibilityToggle; iconRender?: (visible: boolean) => React.ReactNode; } -const ActionMap: Record = { +const actionMap: Record> = { click: 'onClick', hover: 'onMouseOver', }; +type IconPropsType = React.HTMLAttributes & React.Attributes; + const Password = React.forwardRef((props, ref) => { const { visibilityToggle = true } = props; const visibilityControlled = @@ -68,24 +71,27 @@ const Password = React.forwardRef((props, ref) => { const getIcon = (prefixCls: string) => { const { action = 'click', iconRender = defaultIconRender } = props; - const iconTrigger = ActionMap[action] || ''; + const iconTrigger = actionMap[action] || ''; const icon = iconRender(visible); - const iconProps = { + const iconProps: IconPropsType = { [iconTrigger]: onVisibleChange, className: `${prefixCls}-icon`, key: 'passwordIcon', - onMouseDown: (e: MouseEvent) => { + onMouseDown: (e: React.MouseEvent) => { // Prevent focused state lost // https://github.com/ant-design/ant-design/issues/15173 e.preventDefault(); }, - onMouseUp: (e: MouseEvent) => { + onMouseUp: (e: React.MouseEvent) => { // Prevent caret position change // https://github.com/ant-design/ant-design/issues/23524 e.preventDefault(); }, }; - return React.cloneElement(React.isValidElement(icon) ? icon : {icon}, iconProps); + return React.cloneElement( + React.isValidElement(icon) ? icon : {icon}, + iconProps, + ); }; const { @@ -122,7 +128,7 @@ const Password = React.forwardRef((props, ref) => { }); if (process.env.NODE_ENV !== 'production') { - Password.displayName = 'Password'; + Password.displayName = 'Input.Password'; } export default Password; diff --git a/components/input/Search.tsx b/components/input/Search.tsx index eec4218d5b..c8ad1cfea1 100644 --- a/components/input/Search.tsx +++ b/components/input/Search.tsx @@ -1,7 +1,8 @@ +import * as React from 'react'; import SearchOutlined from '@ant-design/icons/SearchOutlined'; import classNames from 'classnames'; import { composeRef } from 'rc-util/lib/ref'; -import * as React from 'react'; + import { cloneElement } from '../_util/reactNode'; import Button from '../button'; import { ConfigContext } from '../config-provider'; @@ -174,6 +175,7 @@ const Search = React.forwardRef((props, ref) => { /> ); }); + if (process.env.NODE_ENV !== 'production') { Search.displayName = 'Search'; } diff --git a/package.json b/package.json index aaeed4fa48..c7afbac906 100644 --- a/package.json +++ b/package.json @@ -265,7 +265,7 @@ "jest-image-snapshot": "^6.4.0", "jest-puppeteer": "^9.0.2", "jquery": "^3.7.1", - "jsdom": "^23.0.1", + "jsdom": "^23.2.0", "jsonml-to-react-element": "^1.1.11", "jsonml.js": "^0.1.0", "lint-staged": "^15.2.0", From d35b2f04cd2196b27e16bd64f208099aac04e994 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 8 Jan 2024 12:30:03 +0800 Subject: [PATCH 24/96] chore: Update dependabot.yml (#46850) Signed-off-by: afc163 --- .github/dependabot.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 95095e9c5c..c4ca87b0c4 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -25,4 +25,4 @@ updates: update-types: ["major", "minor"] dev-dependencies: dependency-type: "development" - update-types: ["major", "minor"] + update-types: ["major"] From 21c4ddc167f28fe20f2dd2365fad8ddc942b3fe0 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 8 Jan 2024 13:31:47 +0800 Subject: [PATCH 25/96] chore(deps-dev): update typedoc requirement from ^0.25.6 to ^0.25.7 (#46854) Updates the requirements on [typedoc](https://github.com/TypeStrong/TypeDoc) to permit the latest version. - [Release notes](https://github.com/TypeStrong/TypeDoc/releases) - [Changelog](https://github.com/TypeStrong/typedoc/blob/master/CHANGELOG.md) - [Commits](https://github.com/TypeStrong/TypeDoc/compare/v0.25.6...v0.25.7) --- updated-dependencies: - dependency-name: typedoc dependency-type: direct:development ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c7afbac906..8e4a9c725f 100644 --- a/package.json +++ b/package.json @@ -324,7 +324,7 @@ "tar-fs": "^3.0.4", "terser": "^5.26.0", "tsx": "^4.7.0", - "typedoc": "^0.25.6", + "typedoc": "^0.25.7", "typescript": "~5.3.3", "vanilla-jsoneditor": "^0.21.1", "vanilla-tilt": "^1.8.1", From 95f3a2b212a153d142b272e1e8d506aeac1bf63b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 8 Jan 2024 13:32:25 +0800 Subject: [PATCH 26/96] chore(deps-dev): bump the dev-dependencies group with 6 updates (#46853) * chore(deps-dev): bump the dev-dependencies group with 6 updates Updates the requirements on [@types/node](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/node), [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react), [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin), [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser), [chalk](https://github.com/chalk/chalk) and [open](https://github.com/sindresorhus/open) to permit the latest version. Updates `@types/node` to 20.10.7 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/node) Updates `@types/react` to 18.2.47 - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react) Updates `@typescript-eslint/eslint-plugin` to 6.18.0 - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v6.18.0/packages/eslint-plugin) Updates `@typescript-eslint/parser` to 6.18.0 - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/parser/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v6.18.0/packages/parser) Updates `chalk` from 4.1.2 to 5.3.0 - [Release notes](https://github.com/chalk/chalk/releases) - [Commits](https://github.com/chalk/chalk/compare/v4.1.2...v5.3.0) Updates `open` to 10.0.3 - [Release notes](https://github.com/sindresorhus/open/releases) - [Commits](https://github.com/sindresorhus/open/compare/v10.0.2...v10.0.3) --- updated-dependencies: - dependency-name: "@types/node" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: "@types/react" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: "@typescript-eslint/eslint-plugin" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: "@typescript-eslint/parser" dependency-type: direct:development dependency-group: dev-dependencies - dependency-name: chalk dependency-type: direct:development update-type: version-update:semver-major dependency-group: dev-dependencies - dependency-name: open dependency-type: direct:development dependency-group: dev-dependencies ... Signed-off-by: dependabot[bot] * Update package.json Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: dependabot[bot] Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: lijianan <574980606@qq.com> --- package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 8e4a9c725f..2e9bd18a60 100644 --- a/package.json +++ b/package.json @@ -199,14 +199,14 @@ "@types/jsdom": "^21.1.6", "@types/lodash": "^4.14.202", "@types/minimist": "^1.2.5", - "@types/node": "^20.10.6", + "@types/node": "^20.10.7", "@types/nprogress": "^0.2.3", "@types/pixelmatch": "^5.2.6", "@types/pngjs": "^6.0.4", "@types/prismjs": "^1.26.3", "@types/progress": "^2.0.7", "@types/qs": "^6.9.11", - "@types/react": "^18.2.46", + "@types/react": "^18.2.47", "@types/react-copy-to-clipboard": "^5.0.7", "@types/react-dom": "^18.2.18", "@types/react-highlight-words": "^0.16.7", @@ -215,8 +215,8 @@ "@types/tar": "^6.1.10", "@types/throttle-debounce": "^5.0.2", "@types/warning": "^3.0.3", - "@typescript-eslint/eslint-plugin": "^6.17.0", - "@typescript-eslint/parser": "^6.17.0", + "@typescript-eslint/eslint-plugin": "^6.18.0", + "@typescript-eslint/parser": "^6.18.0", "ali-oss": "^6.19.0", "antd-img-crop": "^4.21.0", "antd-style": "^3.6.1", @@ -277,7 +277,7 @@ "node-fetch": "^3.3.2", "node-notifier": "^10.0.1", "nprogress": "^0.2.0", - "open": "^10.0.2", + "open": "^10.0.3", "pixelmatch": "^5.3.0", "pngjs": "^7.0.0", "prettier": "^3.1.1", From 3a04ea1c5ef1ff7730005c5844bcad6c49b99014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=88=9C=E5=B2=B3?= Date: Mon, 8 Jan 2024 13:33:06 +0800 Subject: [PATCH 27/96] fix: document homepage style optimization (#46855) --- .dumi/pages/index/components/Theme/ColorPicker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dumi/pages/index/components/Theme/ColorPicker.tsx b/.dumi/pages/index/components/Theme/ColorPicker.tsx index 77eebd29e3..34c6835c11 100644 --- a/.dumi/pages/index/components/Theme/ColorPicker.tsx +++ b/.dumi/pages/index/components/Theme/ColorPicker.tsx @@ -91,7 +91,7 @@ const ThemeColorPicker: React.FC = ({ value, onChange, id }) = }, [value]); return ( - + onChange?.(event.target.value)} From dd9a69944e465bcee8cc70e5308dabcda2fc0a8b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 8 Jan 2024 14:28:37 +0800 Subject: [PATCH 28/96] docs: move ecosystem links (#46856) * docs: move ecosystem links * docs: update docs * chore: remove Move reference' --- .dumi/theme/slots/Header/More.tsx | 99 ------------------------- .dumi/theme/slots/Header/Navigation.tsx | 2 - .dumi/theme/slots/Header/index.tsx | 2 - docs/react/introduce.en-US.md | 15 ++-- docs/react/introduce.zh-CN.md | 21 ++---- 5 files changed, 13 insertions(+), 126 deletions(-) delete mode 100644 .dumi/theme/slots/Header/More.tsx diff --git a/.dumi/theme/slots/Header/More.tsx b/.dumi/theme/slots/Header/More.tsx deleted file mode 100644 index d1abf2f5c0..0000000000 --- a/.dumi/theme/slots/Header/More.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { DownOutlined } from '@ant-design/icons'; -import { createStyles } from 'antd-style'; -import { FormattedMessage } from 'dumi'; -import React from 'react'; -import classnames from 'classnames'; -import type { MenuProps } from 'antd'; -import { Button, Dropdown } from 'antd'; -import type { SharedProps } from './interface'; - -const useStyle = createStyles(({ css, token }) => ({ - smallStyle: css` - font-size: 12px; - color: #777; - margin-left: 0.3em; - `, - down: css` - color: ${token.colorTextQuaternary}; - `, - downOutlined: css` - font-size: 9px; - margin: -1px 0 0 2px; - vertical-align: middle; - `, - downOutlinedRTL: css` - font-size: 9px; - margin: -1px 2px 0 0; - vertical-align: middle; - `, -})); - -const Community: React.FC = () => { - const { styles } = useStyle(); - return ( - - () - - ); -}; - -export const getEcosystemGroup = (): Exclude => [ - { - label: ( - - - - ), - key: 'charts', - }, - { - label: ( - - - - ), - key: 'pro', - }, - { - label: ( - - - - ), - key: 'procomponents', - }, - { - label: ( - - Ant Design of Angular - - - ), - key: 'ng', - }, - { - label: ( - - Ant Design of Vue - - - ), - key: 'vue', - }, -]; - -const More: React.FC = ({ isRTL }) => { - const { styles } = useStyle(); - return ( - - - - ); -}; - -export default More; diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx index 61860b721a..9b81cea26c 100644 --- a/.dumi/theme/slots/Header/Navigation.tsx +++ b/.dumi/theme/slots/Header/Navigation.tsx @@ -4,7 +4,6 @@ import { MenuOutlined } from '@ant-design/icons'; import { createStyles, css } from 'antd-style'; import type { MenuProps } from 'antd'; import { Menu } from 'antd'; -import { getEcosystemGroup } from './More'; import * as utils from '../../utils'; import type { SharedProps } from './interface'; import useLocale from '../../../hooks/useLocale'; @@ -170,7 +169,6 @@ export default ({ onClick: onDirectionChange, key: 'switch-direction', }, - ...getEcosystemGroup(), ]; if (isMobile) { diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index d48e4122e1..c09f5ddc79 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -16,7 +16,6 @@ import type { SiteContextProps } from '../SiteContext'; import SiteContext from '../SiteContext'; import type { SharedProps } from './interface'; import Logo from './Logo'; -import More from './More'; import Navigation from './Navigation'; import SwitchBtn from './SwitchBtn'; @@ -309,7 +308,6 @@ const Header: React.FC = () => { getPopupContainer={(trigger) => trigger.parentNode} options={versionOptions} />, - , If your company or product uses Ant Design, let us know [here](https://github.com/ant-design/ant-design/issues/477)! +Ant Design is widely used for building enterprise-level websites both domestically and internationally. You can refer to wappalyzer for reference data. If your company or product uses Ant Design, let us know [here](https://github.com/ant-design/ant-design/issues/477)! ## Contributing diff --git a/docs/react/introduce.zh-CN.md b/docs/react/introduce.zh-CN.md index 15862d31a5..ab55a9faf7 100644 --- a/docs/react/introduce.zh-CN.md +++ b/docs/react/introduce.zh-CN.md @@ -86,15 +86,15 @@ export default App; ## 链接 - [首页](/index-cn) -- [组件库](/components/overview-cn) +- [所有组件](/components/overview-cn) - [国内镜像](https://github.com/ant-design/ant-design/issues/25661) - [Ant Design Pro](https://pro.ant.design/) - [Ant Design Pro Components](https://procomponents.ant.design/) - [Ant Design Charts](https://charts.ant.design) - [更新日志](/changelog) - [React 底层基础组件](https://react-component.github.io/) -- [移动端组件库](https://mobile.ant.design) -- [小程序组件库](https://mini.ant.design) +- [Ant Design Mobile](https://mobile.ant.design) +- [Ant Design Mini](https://mini.ant.design) - [Ant Design 图标](https://github.com/ant-design/ant-design-icons) - [Ant Design 色彩](https://github.com/ant-design/ant-design-colors) - [首页模板集](https://landing.ant.design) @@ -109,18 +109,13 @@ export default App; - [定制主题](/docs/react/customize-theme) - [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) +## 非 React 的实现 + +我们采用 React 封装了一套 Ant Design 的组件库，其他语言的 UI 实现可以参考[此处](/docs/spec/introduce-cn#%E5%89%8D%E7%AB%AF%E5%AE%9E%E7%8E%B0)。 + ## 谁在使用 -- [蚂蚁集团](https://www.antgroup.com/) -- [阿里巴巴](https://www.alibaba.com/) -- [腾讯](https://www.tencent.com) -- [百度](https://www.baidu.com) -- [口碑](https://www.koubei.com/) -- [美团](https://www.meituan.com) -- [滴滴](https://www.xiaojukeji.com/) -- [饿了么](https://www.ele.me/) - -> 如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。 +Ant Design 广泛用于国内外的企业级网站搭建，可以查看 [wappalyzer](https://www.wappalyzer.com/technologies/ui-frameworks/ant-design) 作为参考数据。如果你的公司和产品使用了 Ant Design，欢迎到 [这里](https://github.com/ant-design/ant-design/issues/477) 留言。 ## 如何贡献 From f2b89da945c5391e130b02a384ace3a8b01f37f3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 9 Jan 2024 10:20:40 +0800 Subject: [PATCH 29/96] refactor: Drawer styles properties (#46858) * refactor: Drawer styles props * chore: add type test case * chore: update snapshot * test: add style jest snapshot * chore: update snapshot * chore: update snapshot * chore: update snapshot * chore: add deprecated warning * fix: scroll area of drawer * chore: fix demo style * chore: update snapshot * chore: update snapshot * refactor: remove unused style code * test: fix test case * test: fix Drawer PurePanel image diff * test: fix Drawer PurePanel image diff * chore: fix demo --- .../__snapshots__/components.test.tsx.snap | 420 +- components/drawer/DrawerPanel.tsx | 28 +- components/drawer/__tests__/Drawer.test.tsx | 51 + .../__snapshots__/Drawer.test.tsx.snap | 636 +- .../__snapshots__/DrawerEvent.test.tsx.snap | 64 +- .../__snapshots__/demo-extend.test.tsx.snap | 5456 ++++++++--------- .../__tests__/__snapshots__/demo.test.ts.snap | 166 +- components/drawer/__tests__/type.test.tsx | 47 +- components/drawer/demo/basic-right.tsx | 2 +- components/drawer/demo/no-mask.tsx | 14 +- components/drawer/demo/render-in-current.tsx | 1 - components/drawer/index.en-US.md | 5 +- components/drawer/index.tsx | 17 +- components/drawer/index.zh-CN.md | 5 +- components/drawer/style/index.ts | 12 +- components/watermark/__tests__/index.test.tsx | 2 +- package.json | 2 +- 17 files changed, 3526 insertions(+), 3402 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index e33f8a1d7c..b257c47ba8 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -14217,46 +14217,42 @@ exports[`ConfigProvider components Drawer configProvider 1`] = ` role="dialog" >
-
- -
+ + + +
-
+
-
- -
+ + + +
-
+
-
- -
+ + + +
-
+
-
- -
+ + + +
-
+
-
- -
+ + + +
-
+
-
- -
+ + + +
-
+
-
- -
+ + + +
-
+
{ header?: string; body?: string; footer?: string; - mask?: string; - content?: string; } -export interface DrawerStyles { +export interface DrawerStyles extends NonNullable { header?: React.CSSProperties; body?: React.CSSProperties; footer?: React.CSSProperties; - mask?: React.CSSProperties; - content?: React.CSSProperties; } export interface DrawerPanelProps { @@ -38,17 +34,22 @@ export interface DrawerPanelProps { closeIcon?: boolean | React.ReactNode; onClose?: RCDrawerProps['onClose']; - /** Wrapper dom node style of header and body */ - drawerStyle?: React.CSSProperties; + children?: React.ReactNode; + classNames?: DrawerClassNames; + styles?: DrawerStyles; + /** @deprecated Please use `styles.header` instead */ headerStyle?: React.CSSProperties; /** @deprecated Please use `styles.body` instead */ bodyStyle?: React.CSSProperties; /** @deprecated Please use `styles.footer` instead */ footerStyle?: React.CSSProperties; - children?: React.ReactNode; - classNames?: DrawerClassNames; - styles?: DrawerStyles; + /** @deprecated Please use `styles.wrapper` instead */ + contentWrapperStyle?: React.CSSProperties; + /** @deprecated Please use `styles.mask` instead */ + maskStyle?: React.CSSProperties; + /** @deprecated Please use `styles.content` instead */ + drawerStyle?: React.CSSProperties; } const DrawerPanel: React.FC = (props) => { @@ -61,7 +62,6 @@ const DrawerPanel: React.FC = (props) => { closable, onClose, headerStyle, - drawerStyle, bodyStyle, footerStyle, children, @@ -139,7 +139,7 @@ const DrawerPanel: React.FC = (props) => { }, [footer, footerStyle, prefixCls]); return ( -
+ <> {headerNode}
= (props) => { {children}
{footerNode} -
+ ); }; diff --git a/components/drawer/__tests__/Drawer.test.tsx b/components/drawer/__tests__/Drawer.test.tsx index 1c25338050..e6dc07fbf2 100644 --- a/components/drawer/__tests__/Drawer.test.tsx +++ b/components/drawer/__tests__/Drawer.test.tsx @@ -309,5 +309,56 @@ describe('Drawer', () => { ); expect(baseElement.querySelector('.anticon-close')).not.toBeNull(); }); + + it('match between styles and deprecated style prop', async () => { + const initialFontSize = 10; + let fontSize1 = initialFontSize; + let fontSize2 = initialFontSize; + const getStyle1 = () => ({ fontSize: fontSize1++ }); + const getStyle2 = () => ({ fontSize: fontSize2++ }); + const { container: container1 } = render( + +

Some contents...

+ , + ); + const { container: container2 } = render( + +

Some contents...

+ , + ); + expect(container1).toMatchSnapshot(); + expect(container2).toMatchSnapshot(); + for (let i = initialFontSize; i < fontSize1; i += 1) { + expect(container1.outerHTML).toContain(`font-size: ${i}px`); + } + for (let j = initialFontSize; j < fontSize2; j += 1) { + expect(container2.outerHTML).toContain(`font-size: ${j}px`); + } + expect(container1.outerHTML).toEqual(container2.outerHTML); + }); }); }); diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index c265001efc..3593c5e35d 100644 --- a/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -24,48 +24,44 @@ exports[`Drawer className is test_drawer 1`] = ` role="dialog" >
-
- -
-
-
- Here is content of Drawer + + + +
+
+ Here is content of Drawer +
-
- Here is content of Drawer -
+ Here is content of Drawer
@@ -149,48 +141,44 @@ exports[`Drawer getContainer return undefined 2`] = ` role="dialog" >
-
- -
-
-
- Here is content of Drawer + + + +
+
+ Here is content of Drawer +
-
- -
-
-
- Here is content of Drawer -
-
- Test Footer + + + +
+
+ Here is content of Drawer +
+
+ Test Footer +
-
- -
- Test Title -
+ + + + +
+ Test Title
-
- Here is content of Drawer -
+
+
+ Here is content of Drawer
@@ -391,48 +371,44 @@ exports[`Drawer render correctly 1`] = ` role="dialog" >
-
- -
-
-
- Here is content of Drawer + + + +
+
+ Here is content of Drawer +
+
+ +
+
+
+ Here is content of Drawer +
+
+
+ +`; + +exports[`Drawer rtl render component should be rendered correctly in RTL direction 1`] = `null`; + +exports[`Drawer style migrate match between styles and deprecated style prop 1`] = ` +
+
+
+ @@ -432,60 +416,56 @@ exports[`renders components/drawer/demo/config-provider.tsx extend context corre role="dialog" >
-
- -
- ConfigProvider -
+ + + + +
+ ConfigProvider
-
-

- Some contents... -

-

- Some contents... -

-

- Some contents... -

-
+
+
+

+ Some contents... +

+

+ Some contents... +

+

+ Some contents... +

@@ -627,93 +607,89 @@ Array [ role="dialog" >
-
- -
- Drawer with extra actions -
-
+ + + +
-
-
- -
-
- -
-
+ Drawer with extra actions
-

- Some contents... -

-

- Some contents... -

-

- Some contents... -

+
+
+ +
+
+ +
+
+
+

+ Some contents... +

+

+ Some contents... +

+

+ Some contents... +

+
-
- -
- Create a new account -
-
+ + + +
-
-
- -
-
- -
-
+ Create a new account
-
+ +
+
+ +
+
+
+
+
+ +
+
+ +
+
- -
-
-
- -
+
+
+
+ +
+
- -
-
-
+ http:// + + + + .com + + + +
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ - - http:// - - + + Please select an owner + +
+
+
+
- .com - +
+ xiao +
+
+ mao +
+
+
+
+
+
+
+
+ Xiaoxiao Fu +
+
+
+
+ Maomao Zhou +
+
+
+
+
+
+
+
+
@@ -980,1752 +1134,1570 @@ Array [
-
- -
-
-
-
-
-
- - - - - Please select an owner - -
-
-
-
-
- xiao -
-
- mao -
-
-
-
-
-
-
-
- Xiaoxiao Fu -
-
-
-
- Maomao Zhou -
-
-
-
-
-
-
-
- -
-
-
-
+ Type +
-
-
-
-
- -
-
-
- - - - - Please choose the type - -
-
-
-
-
- private -
-
- public -
-
-
-
-
-
-
-
- Private -
-
-
-
- Public -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
- - - - - Please choose the approver - -
-
-
-
-
- jack -
-
- tom -
-
-
-
-
-
-
-
- Jack Ma -
-
-
-
- Tom Liu -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
-
- - - - - -
-
- -
-
+ - - - + Please choose the type
-
+
-
+ private +
+
+ public +
+
+
+
-
- - -
- - -
- - -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- Su - - Mo - - Tu - - We - - Th - - Fr - - Sa -
-
- 30 -
- 		-
- 31 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
- 		-
- 4 -
- 		-
- 5 -
-
-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
- 		-
- 11 -
- 		-
- 12 -
-
-
- 13 -
- 		-
- 14 -
- 		-
- 15 -
- 		-
- 16 -
- 		-
- 17 -
- 		-
- 18 -
- 		-
- 19 -
-
-
- 20 -
- 		-
- 21 -
- 		-
- 22 -
- 		-
- 23 -
- 		-
- 24 -
- 		-
- 25 -
- 		-
- 26 -
-
-
- 27 -
- 		-
- 28 -
- 		-
- 29 -
- 		-
- 30 -
- 		-
- 1 -
- 		-
- 2 -
- 		-
- 3 -
-
-
- 4 -
- 		-
- 5 -
- 		-
- 6 -
- 		-
- 7 -
- 		-
- 8 -
- 		-
- 9 -
- 		-
- 10 -
-
-
+ Private
+
+ Public +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ + + + + Please choose the approver + +
+
+
+
+
+ jack +
+
+ tom +
+
+
+
+
+
+
+
+ Jack Ma +
+
+
+
+ Tom Liu +
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
+ +
+
+ + + + + +
+
+ +
+
+ + + + + +
+
+
+
+
+
+
+
+
+
+
+ +
-
- - -
- -
- +
+
+
+
+
+ + +
+ +
+ + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Su + + Mo + + Tu + + We + + Th + + Fr + + Sa +
+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+
+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+ 		+
+ 8 +
+ 		+
+ 9 +
+ 		+
+ 10 +
+
+
+ 11 +
+ 		+
+ 12 +
+ 		+
+ 13 +
+ 		+
+ 14 +
+ 		+
+ 15 +
+ 		+
+ 16 +
+ 		+
+ 17 +
+
+
+ 18 +
+ 		+
+ 19 +
+ 		+
+ 20 +
+ 		+
+ 21 +
+ 		+
+ 22 +
+ 		+
+ 23 +
+ 		+
+ 24 +
+
+
+ 25 +
+ 		+
+ 26 +
+ 		+
+ 27 +
+ 		+
+ 28 +
+ 		+
+ 29 +
+ 		+
+ 30 +
+ 		+
+ 31 +
+
+
+ 1 +
+ 		+
+ 2 +
+ 		+
+ 3 +
+ 		+
+ 4 +
+ 		+
+ 5 +
+ 		+
+ 6 +
+ 		+
+ 7 +
+
@@ -2741,56 +2713,56 @@ Array [
+
+
+ +
+
- -
-
-
-