From de3a08f36e1c831bde4fe057c026a20c2e8039ec Mon Sep 17 00:00:00 2001 From: Vincent Date: Fri, 10 Nov 2023 09:53:47 +0800 Subject: [PATCH 01/14] chore: header use d2tech (#45756) * chore: header use d2tech * chore: del img * chore: use d2 head background * Apply suggestions from code review style: keep message unified style Co-authored-by: afc163 Signed-off-by: Vincent --------- Signed-off-by: Vincent Co-authored-by: xiwenzheng.xwz Co-authored-by: afc163 --- .dumi/theme/slots/Header/index.tsx | 19 +++++++------------ 1 file changed, 7 insertions(+), 12 deletions(-) diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 9850087a01..af16184672 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -25,10 +25,10 @@ const RESPONSIVE_SM = 1200; const locales = { cn: { - message: - '语雀公益计划：大学生认证教育邮箱，即可免费获得语雀会员。语雀，支付宝匠心打造的在线文档平台。', - shortMessage: '支付宝语雀 · 大学生公益计划火热进行中！', - more: '了解更多', + message: '第十八届 D2 终端技术大会火热来袭，以技术会友，一起分享技术的乐趣。', + shortMessage: '第十八届 D2 终端技术大会火热来袭！', + more: '点击报名', + link: 'https://d2.alibabatech.com/', }, en: { message: '', @@ -366,26 +366,21 @@ const Header: React.FC = () => { )} {isZhCN && bannerVisible && ( - + - yuque {isMobile ? locale.shortMessage : locale.message} { window.gtag?.('event', '点击', { event_category: 'top_banner', - event_label: 'https://www.yuque.com/yuque/blog/welfare-edu?source=antd', + event_label: locale.link, }); }} > From 3719f8586ad59909c252f413f34cffc4763c6ee6 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 10 Nov 2023 12:07:44 +0800 Subject: [PATCH 02/14] docs: Update CHANGELOG of 5.11.1 (#45774) * docs: Update CHANGELOG of 5.11.1 Signed-off-by: afc163 * Update CHANGELOG.en-US.md Signed-off-by: afc163 --------- Signed-off-by: afc163 --- CHANGELOG.en-US.md | 4 +--- CHANGELOG.zh-CN.md | 4 +--- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 58a60ef70f..3f7b1aa74b 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -25,9 +25,7 @@ tag: vVERSION - 🐞 Fix Descriptions use `children` structure missing the Descriptions.Item `key` prop. [#45757](https://github.com/ant-design/ant-design/pull/45757) - 🐞 Fix Message that token specified in component scope not work. [#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc) - 🐞 Fix Popconfirm not compatible with `visible` prop. [#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123) -- Tag - - 🐞 Fix Tag default background color not correct. [#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang) - - 🐞 Adjust Tag default background token to `colorBgContainer`. [#45700](https://github.com/ant-design/ant-design/pull/45700) [@kiner-tang](https://github.com/kiner-tang) +- 🐞 Fix Tag default background color not correct. [#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang) - 💄 Fix Notification that `style.width` not work. [#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc) - 🐞 Fix App console unexpected attr warning when set `component=false`. [#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan) - TypeScript diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 4bd791896f..9157bba8e6 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -25,9 +25,7 @@ tag: vVERSION - 🐞 修复 Descriptions 使用 `children` 结构语法糖时，会丢失 Descriptions.Item 的 `key` 的问题。[#45757](https://github.com/ant-design/ant-design/pull/45757) - 🐞 修复 Message 组件在组件范围设置全局 `token` 无效的问题。[#45721](https://github.com/ant-design/ant-design/pull/45721) [@MadCcc](https://github.com/MadCcc) - 🐞 修复 Popconfirm 不兼容 `visible` 的问题。[#45702](https://github.com/ant-design/ant-design/pull/45702) [@linhf123](https://github.com/linhf123) -- Tag - - 🐞 修复默认 Tag 的背景颜色不正确的问题。[#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang) - - 🐞 修改 Tag 的默认背景色 `token` 为 `colorBgContainer`。[#45700](https://github.com/ant-design/ant-design/pull/45700) [@kiner-tang](https://github.com/kiner-tang) +- 🐞 修复默认 Tag 的背景颜色不正确的问题。[#45711](https://github.com/ant-design/ant-design/pull/45711) [@kiner-tang](https://github.com/kiner-tang) - 💄 修复 Notification 组件设置 `style.width` 无效的问题。[#45681](https://github.com/ant-design/ant-design/pull/45681) [@MadCcc](https://github.com/MadCcc) - 🐞 修复 App 设置 `component=false` 时，会报非预期的属性警告的问题。[#45671](https://github.com/ant-design/ant-design/pull/45671) [@li-jia-nan](https://github.com/li-jia-nan) - TypeScript From d2e945362b4709b0e5be046170b303ed1fbba97f Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 10 Nov 2023 15:03:01 +0800 Subject: [PATCH 03/14] docs: Update issue-labeled.yml (#45780) Signed-off-by: afc163 --- .github/workflows/issue-labeled.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml index 40f70446d2..2f818e5a7c 100644 --- a/.github/workflows/issue-labeled.yml +++ b/.github/workflows/issue-labeled.yml @@ -40,7 +40,9 @@ jobs: body: | Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking codesandbox of [antd@5.x](https://u.ant.design/codesandbox-repro) or [antd@4.x](https://u.ant.design/codesandbox-repro-4x), or provide a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days. - 你好 @${{ github.event.issue.user.login }}, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。 + 你好 @${{ github.event.issue.user.login }}，我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击这里创建一个 [antd@5.x](https://u.ant.design/codesandbox-repro) 或 [antd@4.x](https://u.ant.design/codesandbox-repro-4x) 的 codesandbox，或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。 + + > [什么是最小化重现，为什么这是必需的？](https://github.com/ant-design/ant-design/wiki/%E4%BB%80%E4%B9%88%E6%98%AF%E6%9C%80%E5%B0%8F%E5%8C%96%E9%87%8D%E7%8E%B0%EF%BC%8C%E4%B8%BA%E4%BB%80%E4%B9%88%E8%BF%99%E6%98%AF%E5%BF%85%E9%9C%80%E7%9A%84%EF%BC%9F) ![](https://gw.alipayobjects.com/zos/antfincdn/y9kwg7DVCd/reproduce.gif) From 40911643309846b95b481c98fddf2fd771f3c95f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Fri, 10 Nov 2023 18:33:01 +0800 Subject: [PATCH 04/14] chore: addd unit case (#45781) (cherry picked from commit b21741d7b9effea3b3cc4bff1c02c92d58f72d47) --- components/radio/__tests__/radio.test.tsx | 4 ++++ components/switch/__tests__/index.test.tsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/components/radio/__tests__/radio.test.tsx b/components/radio/__tests__/radio.test.tsx index 07b9c6e97c..010b3235e3 100644 --- a/components/radio/__tests__/radio.test.tsx +++ b/components/radio/__tests__/radio.test.tsx @@ -54,4 +54,8 @@ describe('Radio', () => { ); expect(getByRole('radio')).not.toBeDisabled(); }); + + it('have static property for type detecting', () => { + expect(Radio.__ANT_RADIO).toBeTruthy(); + }); }); diff --git a/components/switch/__tests__/index.test.tsx b/components/switch/__tests__/index.test.tsx index 070777c63f..a14f18c89e 100644 --- a/components/switch/__tests__/index.test.tsx +++ b/components/switch/__tests__/index.test.tsx @@ -44,4 +44,8 @@ describe('Switch', () => { ); errorSpy.mockRestore(); }); + + it('have static property for type detecting', () => { + expect(Switch.__ANT_SWITCH).toBeTruthy(); + }); }); From 9ae02f7ccf8d1ca2c085148326b42ba52d85f1ec Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 10 Nov 2023 23:11:31 +0800 Subject: [PATCH 05/14] chore(deps-dev): bump tsx from 3.14.0 to 4.1.0 (#45790) Bumps [tsx](https://github.com/privatenumber/tsx) from 3.14.0 to 4.1.0. - [Release notes](https://github.com/privatenumber/tsx/releases) - [Changelog](https://github.com/privatenumber/tsx/blob/develop/release.config.cjs) - [Commits](https://github.com/privatenumber/tsx/compare/v3.14.0...v4.1.0) --- updated-dependencies: - dependency-name: tsx dependency-type: direct:development update-type: version-update:semver-major ... 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 8a787b6758..a4142b0d93 100644 --- a/package.json +++ b/package.json @@ -306,7 +306,7 @@ "stylelint-prettier": "^4.0.0", "sylvanas": "^0.6.1", "terser": "^5.16.1", - "tsx": "^3.12.8", + "tsx": "^4.1.0", "typedoc": "^0.25.0", "typescript": "~5.2.2", "vanilla-jsoneditor": "^0.18.0", From c73f56e4ea2aa0109239a791d765803b2fd494a5 Mon Sep 17 00:00:00 2001 From: Lansana Diomande <66433100+Asanio06@users.noreply.github.com> Date: Fri, 10 Nov 2023 16:12:29 +0100 Subject: [PATCH 06/14] refactor(list): improve grid gutter type (#45791) --- components/list/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/components/list/index.tsx b/components/list/index.tsx index 0467245a91..cfcdc962a0 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -7,6 +7,7 @@ import { responsiveArray } from '../_util/responsiveObserver'; import { ConfigContext } from '../config-provider'; import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty'; import { Row } from '../grid'; +import type { RowProps } from '../grid'; import useBreakpoint from '../grid/hooks/useBreakpoint'; import type { PaginationConfig } from '../pagination'; import Pagination from '../pagination'; @@ -27,7 +28,7 @@ export type ColumnCount = number; export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'; export interface ListGridType { - gutter?: number; + gutter?: RowProps['gutter']; column?: ColumnCount; xs?: ColumnCount; sm?: ColumnCount; From 9db3dc2a489f93e273ac0b4553e24290e53eba3b Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 11 Nov 2023 12:03:39 +0800 Subject: [PATCH 07/14] docs: add some commonly used props of react-slick to antd documentation (#45789) --- components/carousel/index.en-US.md | 6 +++++- components/carousel/index.zh-CN.md | 6 +++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index 392b1a81e5..484a1d0db5 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -32,13 +32,17 @@ Common props ref：[Common props](/docs/react/common-props) | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | autoplay | Whether to scroll automatically | boolean | false | | +| autoplaySpeed | Delay between each auto scroll (in milliseconds) | number | 3000 | | | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | | | dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true | | -| waitForAnimate | Whether to wait for the animation when switching | boolean | false | | +| fade | Whether to use fade transition | boolean | false | | +| infinite | Infinitely wrap around contents | boolean | true | | +| speed | Animation speed in milliseconds | number | 500 | | | easing | Transition interpolation function name | string | `linear` | | | effect | Transition effect | `scrollx` \| `fade` | `scrollx` | | | afterChange | Callback function called after the current index changes | (current: number) => void | - | | | beforeChange | Callback function called before the current index changes | (current: number, next: number) => void | - | | +| waitForAnimate | Whether to wait for the animation when switching | boolean | false | | ## Methods diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 4b53c62f12..20958ef57b 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -33,13 +33,17 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | autoplay | 是否自动切换 | boolean | false | | +| autoplaySpeed | 自动切换的间隔（毫秒） | number | 3000 | | | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | | | dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true | | -| waitForAnimate | 是否等待切换动画 | boolean | false | | +| fade | 使用渐变切换动效 | boolean | false | | +| infinite | 是否无限循环切换（实现方式是复制两份 children 元素，如果子元素有副作用则可能会引发 bug） | boolean | true | | +| speed | 切换动效的时间（毫秒） | number | 500 | | | easing | 动画效果 | string | `linear` | | | effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` | | | afterChange | 切换面板的回调 | (current: number) => void | - | | | beforeChange | 切换面板的回调 | (current: number, next: number) => void | - | | +| waitForAnimate | 是否等待切换动画 | boolean | false | | ## 方法 From 6ba626ba32b304b7884fddae14596057ef271e43 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 12 Nov 2023 08:44:20 +0800 Subject: [PATCH 08/14] docs: update Next.js docs (#45811) * docs: update Next.js docs * Update use-with-next.en-US.md Signed-off-by: lijianan <574980606@qq.com> * Update use-with-next.zh-CN.md Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> --- docs/react/server-side-rendering.en-US.md | 37 +++++++++++++---------- docs/react/server-side-rendering.zh-CN.md | 37 +++++++++++++---------- docs/react/use-with-next.en-US.md | 17 ++++++----- docs/react/use-with-next.zh-CN.md | 17 ++++++----- 4 files changed, 62 insertions(+), 46 deletions(-) diff --git a/docs/react/server-side-rendering.en-US.md b/docs/react/server-side-rendering.en-US.md index 39b4b3de21..480e081083 100644 --- a/docs/react/server-side-rendering.en-US.md +++ b/docs/react/server-side-rendering.en-US.md @@ -16,13 +16,14 @@ There are two options for server-side rendering styles, each with advantages and Use `@ant-design/cssinjs` to extract style: ```tsx +import React from 'react'; import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'; +import type Entity from '@ant-design/cssinjs/es/Cache'; import { renderToString } from 'react-dom/server'; -export default () => { +const App = () => { // SSR Render - const cache = createCache(); - + const cache = React.useMemo(() => createCache(), []); const html = renderToString( @@ -34,17 +35,19 @@ export default () => { // Mix with style return ` - - - - ${styleText} - - -
${html}
- - -`; + + + + ${styleText} + + +
${html}
+ + + `; }; + +export default App; ``` ## Whole Export @@ -89,8 +92,8 @@ If you want to use mixed themes or custom themes, you can use the following scri ```tsx import fs from 'fs'; -import { extractStyle } from '@ant-design/static-style-extract'; import React from 'react'; +import { extractStyle } from '@ant-design/static-style-extract'; import { ConfigProvider } from 'antd'; const outputPath = './public/antd.min.css'; @@ -155,6 +158,7 @@ Then, you just need to import this file into the `pages/_app.tsx` file: ```tsx import { StyleProvider } from '@ant-design/cssinjs'; import type { AppProps } from 'next/app'; + import '../public/antd.min.css'; // add this line import '../styles/globals.css'; @@ -237,8 +241,8 @@ More about static-style-extract, see [static-style-extract](https://github.com/a import { createHash } from 'crypto'; import fs from 'fs'; import path from 'path'; -import type Entity from '@ant-design/cssinjs/lib/Cache'; import { extractStyle } from '@ant-design/cssinjs'; +import type Entity from '@ant-design/cssinjs/lib/Cache'; export type DoExtraStyleOptions = { cache: Entity; @@ -280,9 +284,10 @@ Export on demand using the above tools in `_document.tsx` ```tsx // _document.tsx -import { StyleProvider, createCache } from '@ant-design/cssinjs'; +import { createCache, StyleProvider } from '@ant-design/cssinjs'; import type { DocumentContext } from 'next/document'; import Document, { Head, Html, Main, NextScript } from 'next/document'; + import { doExtraStyle } from '../scripts/genAntdCss'; export default class MyDocument extends Document { diff --git a/docs/react/server-side-rendering.zh-CN.md b/docs/react/server-side-rendering.zh-CN.md index 5a50d1bce8..decc1965cf 100644 --- a/docs/react/server-side-rendering.zh-CN.md +++ b/docs/react/server-side-rendering.zh-CN.md @@ -16,13 +16,14 @@ tag: New 使用 `@ant-design/cssinjs` 将所需样式抽离： ```tsx +import React from 'react'; import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'; +import type Entity from '@ant-design/cssinjs/es/Cache'; import { renderToString } from 'react-dom/server'; -export default () => { +const App = () => { // SSR Render - const cache = createCache(); - + const cache = React.useMemo(() => createCache(), []); const html = renderToString( @@ -34,17 +35,19 @@ export default () => { // Mix with style return ` - - - - ${styleText} - - -
${html}
- - -`; + + + + ${styleText} + + +
${html}
+ + + `; }; + +export default App; ``` ## 整体导出 @@ -89,8 +92,8 @@ fs.writeFileSync(outputPath, css); ```tsx import fs from 'fs'; -import { extractStyle } from '@ant-design/static-style-extract'; import React from 'react'; +import { extractStyle } from '@ant-design/static-style-extract'; import { ConfigProvider } from 'antd'; const outputPath = './public/antd.min.css'; @@ -155,6 +158,7 @@ fs.writeFileSync(outputPath, css); ```tsx import { StyleProvider } from '@ant-design/cssinjs'; import type { AppProps } from 'next/app'; + import '../public/antd.min.css'; // 添加这行 import '../styles/globals.css'; @@ -237,8 +241,8 @@ const cssText = extractStyle((node) => ( import { createHash } from 'crypto'; import fs from 'fs'; import path from 'path'; -import type Entity from '@ant-design/cssinjs/lib/Cache'; import { extractStyle } from '@ant-design/cssinjs'; +import type Entity from '@ant-design/cssinjs/lib/Cache'; export type DoExtraStyleOptions = { cache: Entity; @@ -280,9 +284,10 @@ export function doExtraStyle({ ```tsx // _document.tsx -import { StyleProvider, createCache } from '@ant-design/cssinjs'; +import { createCache, StyleProvider } from '@ant-design/cssinjs'; import type { DocumentContext } from 'next/document'; import Document, { Head, Html, Main, NextScript } from 'next/document'; + import { doExtraStyle } from '../scripts/genAntdCss'; export default class MyDocument extends Document { diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md index 8c505ea807..ba17657503 100644 --- a/docs/react/use-with-next.en-US.md +++ b/docs/react/use-with-next.en-US.md @@ -33,9 +33,8 @@ Now we install `antd` from yarn or npm or pnpm. Modify `src/app/page.tsx`, import Button component from `antd`. ```tsx -'use client'; +'use client'; // If used in Pages Router, is no need to add "use client" -// If used in Pages Router, is no need to add "use client" import React from 'react'; import { Button } from 'antd'; @@ -67,16 +66,20 @@ If you are using the App Router in Next.js and using antd as your component libr import React from 'react'; import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs'; -// if you are using Next.js 14, use below import instead. More info: https://github.com/ant-design/ant-design/issues/45567 -// import { createCache, extractStyle, StyleProvider } from '@ant-design/cssinjs/lib'; import type Entity from '@ant-design/cssinjs/es/Cache'; import { useServerInsertedHTML } from 'next/navigation'; const StyledComponentsRegistry = ({ children }: React.PropsWithChildren) => { const cache = React.useMemo(() => createCache(), []); - useServerInsertedHTML(() => ( -