diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 9850087a0131..af1618467229 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, }); }} > diff --git a/.github/workflows/issue-labeled.yml b/.github/workflows/issue-labeled.yml index 40f70446d23c..2f818e5a7cf8 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) diff --git a/.github/workflows/pr-open-check.yml b/.github/workflows/pr-open-check.yml index 2c6c89b3c9f8..f30c621392ad 100644 --- a/.github/workflows/pr-open-check.yml +++ b/.github/workflows/pr-open-check.yml @@ -19,10 +19,13 @@ jobs: refuse-issue-label: '🎱 Collaborate PR only' need-creator-authority: 'write' comment: | - Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. This PR is temporarily not accepted. Thank you again for your contribution! 😊 + Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. Thank you for your contribution! 😊 - 你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认，暂时不接受 PR，再次感谢你的贡献！😊 - close: true + 你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认！感谢您的贡献！😊 + close: false + reviewers: | + MadCcc + zombieJ check-changelog: permissions: diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 58a60ef70fa2..3f7b1aa74b50 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 4bd791896f5e..9157bba8e6fa 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 diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index 392b1a81e523..484a1d0db581 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 4b53c62f128a..20958ef57b44 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 | | ## 方法 diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts index 235696f08e6a..0c1a106e0555 100644 --- a/components/carousel/style/index.ts +++ b/components/carousel/style/index.ts @@ -232,7 +232,7 @@ const genCarouselStyle: GenerateStyle = (token) => { fontSize: 0, background: token.colorBgContainer, border: 0, - borderRadius: 1, + borderRadius: token.dotHeight, outline: 'none', cursor: 'pointer', opacity: 0.3, diff --git a/components/list/index.tsx b/components/list/index.tsx index a67f762e5006..9b62c8ab7db2 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'; @@ -28,7 +29,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; diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap index 9a4548484693..c546f540df30 100644 --- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1227,6 +1227,740 @@ exports[`renders components/menu/demo/component-token.tsx extend context correct +
+ +
@@ -466,9 +455,9 @@ exports[`renders components/qr-code/demo/type.tsx extend context correctly 1`] = style="width: 160px; height: 160px; background-color: transparent;" > @@ -53,9 +52,8 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = ` style="width:160px;height:160px;background-color:transparent" > @@ -67,9 +65,8 @@ exports[`renders components/qr-code/demo/customColor.tsx correctly 1`] = ` style="width:160px;height:160px;background-color:#f5f5f5" > @@ -153,9 +150,8 @@ Array [ style="width:160px;height:160px;background-color:transparent" > @@ -401,9 +392,8 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = ` style="width:160px;height:160px;background-color:transparent" > @@ -415,9 +405,9 @@ exports[`renders components/qr-code/demo/type.tsx correctly 1`] = ` style="width:160px;height:160px;background-color:transparent" > diff --git a/components/qr-code/__tests__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx index a47f60d3a059..26d83994ecd1 100644 --- a/components/qr-code/__tests__/index.test.tsx +++ b/components/qr-code/__tests__/index.test.tsx @@ -39,9 +39,7 @@ describe('QRCode test', () => { it('support custom size', () => { const { container } = render(); - const wrapper = container.querySelector('.ant-qrcode'); - expect(wrapper?.style?.width).toBe('100px'); - expect(wrapper?.style?.height).toBe('100px'); + expect(container.querySelector('.ant-qrcode')).toHaveStyle('width: 100px; height: 100px'); }); it('support refresh', () => { diff --git a/components/qr-code/index.en-US.md b/components/qr-code/index.en-US.md index 70c291217242..a1c4e6a14f47 100644 --- a/components/qr-code/index.en-US.md +++ b/components/qr-code/index.en-US.md @@ -43,7 +43,7 @@ Common props ref：[Common props](/docs/react/common-props) | value | scanned text | string | - | | type | render type | `canvas \| svg ` | `canvas` | 5.6.0 | | icon | include image url (only image link are supported) | string | - | -| size | QRCode size | number | 128 | +| size | QRCode size | number | 160 | | iconSize | include image size | number | 32 | | color | QRCode Color | string | `#000` | | bgColor | QRCode Background Color | string | `transparent` | 5.5.0 | diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index 10ef01b77bdd..ef644f4e4a58 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -47,10 +47,11 @@ const QRCode: React.FC = (props) => { const qrCodeProps = { value, - size: size - (token.paddingSM + token.lineWidth) * 2, + size, level: errorLevel, bgColor, fgColor: color, + style: { width: undefined, height: undefined }, imageSettings: icon ? imageSettings : undefined, }; diff --git a/components/qr-code/style/index.ts b/components/qr-code/style/index.ts index f40e1f30a9df..43ca82a2c3dc 100644 --- a/components/qr-code/style/index.ts +++ b/components/qr-code/style/index.ts @@ -22,9 +22,8 @@ const genQRCodeStyle: GenerateStyle = (token) => { borderRadius: token.borderRadiusLG, border: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`, position: 'relative', - width: '100%', - height: '100%', overflow: 'hidden', + [`& > ${componentCls}-mask`]: { position: 'absolute', insetBlockStart: 0, @@ -44,6 +43,13 @@ const genQRCodeStyle: GenerateStyle = (token) => { color: token.QRCodeExpiredTextColor, }, }, + + '> canvas': { + alignSelf: 'stretch', + flex: 'auto', + minWidth: 0, + }, + '&-icon': { marginBlockEnd: token.marginXS, fontSize: token.controlHeight, diff --git a/components/radio/__tests__/radio.test.tsx b/components/radio/__tests__/radio.test.tsx index 07b9c6e97c67..010b3235e3e9 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 56ceb7ffa96d..8960d69a0235 100644 --- a/components/switch/__tests__/index.test.tsx +++ b/components/switch/__tests__/index.test.tsx @@ -63,4 +63,8 @@ describe('Switch', () => { // uncontrolled component, so false after click expect(getByRole('switch')).not.toBeChecked(); }); + + it('have static property for type detecting', () => { + expect(Switch.__ANT_SWITCH).toBeTruthy(); + }); }); diff --git a/docs/react/server-side-rendering.en-US.md b/docs/react/server-side-rendering.en-US.md index 39b4b3de214e..480e08108348 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 5a50d1bce884..decc1965cf50 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 8c505ea807bc..a3b97a152373 100644 --- a/docs/react/use-with-next.en-US.md +++ b/docs/react/use-with-next.en-US.md @@ -67,16 +67,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(() => ( -