From 4154dafaa10e07454bf2729c279161abb9ec207c Mon Sep 17 00:00:00 2001 From: EMpersonal Date: Mon, 10 Jul 2023 10:06:52 +0800 Subject: [PATCH 1/4] fix: some browser may not repaint when remove nodes (#43358) Co-authored-by: sunliangmu Co-authored-by: lijianan <574980606@qq.com> --- components/_util/styleChecker.ts | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/components/_util/styleChecker.ts b/components/_util/styleChecker.ts index 80f01afc79..c39ca2510f 100644 --- a/components/_util/styleChecker.ts +++ b/components/_util/styleChecker.ts @@ -25,10 +25,17 @@ export const detectFlexGapSupported = () => { flex.appendChild(document.createElement('div')); flex.appendChild(document.createElement('div')); + // some browser may not repaint when remove nodes, so we need create a new layer to detect. + const container = document.createElement('div'); + container.style.position = 'absolute'; + container.style.zIndex = '-9999'; + container.appendChild(flex); + + // append to the DOM (needed to obtain scrollHeight) - document.body.appendChild(flex); + document.body.appendChild(container); flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap - document.body.removeChild(flex); + document.body.removeChild(container); return flexGapSupported; }; From 9494f39c68efcdde25f38bdd0ea39260ed189fc8 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 10 Jul 2023 10:08:28 +0800 Subject: [PATCH 2/4] site: update Next.js docs (#43448) * site: update nextjs docs * fix * add --- docs/react/contributing.en-US.md | 1 + docs/react/contributing.zh-CN.md | 1 + docs/react/getting-started.en-US.md | 2 +- docs/react/getting-started.zh-CN.md | 2 +- docs/react/use-with-next.en-US.md | 8 ++++---- docs/react/use-with-next.zh-CN.md | 8 ++++---- docs/react/use-with-vite.en-US.md | 6 ++---- docs/react/use-with-vite.zh-CN.md | 6 ++---- 8 files changed, 16 insertions(+), 18 deletions(-) diff --git a/docs/react/contributing.en-US.md b/docs/react/contributing.en-US.md index 7d121fd205..07da9dc689 100644 --- a/docs/react/contributing.en-US.md +++ b/docs/react/contributing.en-US.md @@ -55,6 +55,7 @@ The core team is monitoring for pull requests. We will review your pull request 5. Run `npm test -- -u` to update the [jest snapshots](https://jestjs.io/docs/snapshot-testing) and commit these changes as well (if there are any updates). 6. Ensure the UI change passes `npm run test-image`，Run `npm run test-image -- -u` to update UI snapshots and commit these changes as well (if there are any updates), **UI test base on [Docker](https://docs.docker.com/get-docker/), need download the corresponding installation according to the platform** 7. Make sure your code lints (npm run lint). Tip: Lint runs automatically when you `git commit` (Use [Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)). +8. Finally, please make sure that all GitHub CI checks pass, if they fail, you can click `detail` to enter the details to view the reason. Sending a Pull Request to [react-component](https://github.com/react-component/): diff --git a/docs/react/contributing.zh-CN.md b/docs/react/contributing.zh-CN.md index 0c6541ae60..8be7b52d05 100644 --- a/docs/react/contributing.zh-CN.md +++ b/docs/react/contributing.zh-CN.md @@ -55,6 +55,7 @@ Ant Design 团队会关注所有的 pull request，我们会 review 以及合并 5. 运行 `npm test -- -u` 来更新 [jest snapshot](https://jestjs.io/zh-Hans/docs/snapshot-testing) 并且把这些更新也提交上来（如果有的话）。 6. 确认所有的 UI 改动通过 `npm run test-image`，可以运行 `npm run test-image -- -u` 更新 UI 快照并且把这些更新也提交上来（如果有的话），**UI 测试基于 [Docker](https://docs.docker.com/get-docker/)，根据平台下载对应的安装程序。** 7. 确保你的代码通过了 lint 检查 `npm run lint`. 小贴士: Lint 会在你 `git commit` 的时候自动运行（通过[Git Hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks)）。 +8. 最后请确保所有 GitHub CI 检查通过，如果失败，可点击 `detail` 进入详情查看原因。 给 [react-component](https://github.com/react-component/) 发送 pull request： diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index 72f227d32d..755f914274 100755 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -113,6 +113,6 @@ Jest does not support `esm` modules, and Ant Design uses them. In order to test ## Customize your Workflow -If you want to customize your workflow, we recommend using [webpack](https://webpack.js.org) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem. +If you want to customize your workflow, we recommend using [webpack](https://webpack.js.org) or [vite](https://vitejs.dev/) to build and debug code. You can try out plenty of [boilerplates](https://github.com/enaqx/awesome-react#react-tools) available in the React ecosystem. There are also some [scaffolds](https://scaffold.ant.design/) which have already been integrated into antd, so you can try and start with one of these and even contribute. diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index 95c736db2c..0622ec5fca 100755 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -105,6 +105,6 @@ createRoot(document.getElementById('root')).render(); ## 自行构建 -如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.js.org) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。 +如果想自己维护工作流，我们推荐使用 [webpack](https://webpack.js.org) 或者 [vite](https://cn.vitejs.dev/) 进行构建和调试，可以使用 React 生态圈中的 [各种脚手架](https://github.com/enaqx/awesome-react#react-tools) 进行开发。 目前社区也有很多基于 antd 定制的 [React 脚手架](https://scaffold.ant.design/)，欢迎进行试用和贡献。 diff --git a/docs/react/use-with-next.en-US.md b/docs/react/use-with-next.en-US.md index daef119fa4..5a8bfa2b04 100644 --- a/docs/react/use-with-next.en-US.md +++ b/docs/react/use-with-next.en-US.md @@ -24,15 +24,15 @@ Open the browser at http://localhost:3000/. if you see the NEXT logo, it is cons ## Import antd -Now we install `antd` from yarn or npm. +Now we install `antd` from yarn or npm or pnpm. -```bash -$ npm install antd --save -``` + Modify `src/app/page.tsx`, import Button component from `antd`. ```jsx +'use client'; + import React from 'react'; import { Button } from 'antd'; diff --git a/docs/react/use-with-next.zh-CN.md b/docs/react/use-with-next.zh-CN.md index 1a1af14c05..cd8f8479a4 100644 --- a/docs/react/use-with-next.zh-CN.md +++ b/docs/react/use-with-next.zh-CN.md @@ -24,15 +24,15 @@ $ npm run dev ## 引入 antd -现在从 yarn 或 npm 安装并引入 antd。 +现在从 yarn 或 npm 或 pnpm 安装并引入 antd。 -```bash -$ npm install antd --save -``` + 修改 `src/app/page.tsx`，引入 antd 的按钮组件。 ```jsx +'use client'; + import React from 'react'; import { Button } from 'antd'; diff --git a/docs/react/use-with-vite.en-US.md b/docs/react/use-with-vite.en-US.md index f5618153f0..fb3b906e17 100644 --- a/docs/react/use-with-vite.en-US.md +++ b/docs/react/use-with-vite.en-US.md @@ -43,11 +43,9 @@ Below is the default directory structure. └── vite.config.ts ``` -Now we install `antd` from yarn or npm. +Now we install `antd` from yarn or npm or pnpm. -```bash -$ npm install antd --save -``` + Modify `src/App.js`, import Button component from `antd`. diff --git a/docs/react/use-with-vite.zh-CN.md b/docs/react/use-with-vite.zh-CN.md index 4a0b8d8e1f..67c0fd5c5f 100644 --- a/docs/react/use-with-vite.zh-CN.md +++ b/docs/react/use-with-vite.zh-CN.md @@ -43,11 +43,9 @@ $ npm run dev └── vite.config.js ``` -现在从 yarn 或 npm 安装并引入 antd。 +现在从 yarn 或 npm 或 pnpm 安装并引入 antd。 -```bash -$ npm install antd --save -``` + 修改 `src/App.js`，引入 antd 的按钮组件。 From 5094710a2e98bed524b908dd9fe4122ea63e827c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 10 Jul 2023 10:36:35 +0800 Subject: [PATCH 3/4] fix: add deprecated token warning (#43461) --- components/menu/style/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index c95cd21644..aa90bea75c 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -859,6 +859,7 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul ['colorActiveBarWidth', 'activeBarWidth'], ['colorActiveBarHeight', 'activeBarHeight'], ['colorActiveBarBorderSize', 'activeBarBorderWidth'], + ['colorItemBgSelected', 'itemSelectedBg'], ], }, ); From c3e56bc94b57a040dc457c766038eea0099eb332 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 10 Jul 2023 14:25:07 +0800 Subject: [PATCH 4/4] docs: update examples link (#43463) * docs: update examples link * chore: code clean --- docs/blog/extract-ssr.en-US.md | 2 +- docs/blog/extract-ssr.zh-CN.md | 2 +- docs/blog/mock-project-build.en-US.md | 2 +- docs/blog/mock-project-build.zh-CN.md | 2 +- docs/react/customize-theme.en-US.md | 4 ++-- docs/react/customize-theme.zh-CN.md | 4 ++-- docs/react/getting-started.en-US.md | 2 +- docs/react/getting-started.zh-CN.md | 2 +- scripts/ci-mock-project-build.sh | 4 ++-- 9 files changed, 12 insertions(+), 12 deletions(-) diff --git a/docs/blog/extract-ssr.en-US.md b/docs/blog/extract-ssr.en-US.md index 541d6d2358..c3076ee616 100644 --- a/docs/blog/extract-ssr.en-US.md +++ b/docs/blog/extract-ssr.en-US.md @@ -150,7 +150,7 @@ Then add the corresponding CSS file on the HTML template side: ``` -Click [here](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand) for complete implementation. +Click [here](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand) for complete implementation. Corresponding CSS will be generated when visiting different pages, and each CSS will have its corresponding Hash value. When the Hash hits, it means that the CSS file has been placed on the disk and can be used directly. Then, for the client, it is a normal CSS file access and also enjoys the caching capability. diff --git a/docs/blog/extract-ssr.zh-CN.md b/docs/blog/extract-ssr.zh-CN.md index a9a3a71dce..c9dcaa1725 100644 --- a/docs/blog/extract-ssr.zh-CN.md +++ b/docs/blog/extract-ssr.zh-CN.md @@ -150,7 +150,7 @@ if (!fs.existsSync(cssFileName)) { ``` -完整实现点击[此处](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand)查阅。 +完整实现点击[此处](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand)查阅。 访问不同的页面时会生成对应的 CSS，每个 CSS 都会有其对应的 Hash 值。当 Hash 命中时，则说明该 CSS 文件已经被落盘，可以直接使用。继而对于客户端而言就是一次正常的 CSS 文件访问，同样享受缓存能力。 diff --git a/docs/blog/mock-project-build.en-US.md b/docs/blog/mock-project-build.en-US.md index bfa22b3534..55a0e9d089 100644 --- a/docs/blog/mock-project-build.en-US.md +++ b/docs/blog/mock-project-build.en-US.md @@ -30,7 +30,7 @@ When we find relevant updates, we will install the previous version for comparis ### Schedule build -As you see, the above troubleshooting method has a certain lag. We hope to reduce additional human labor by building regularly, and at the same time allow us to find problems faster. So we reused the [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) project as the base (in this way, if something goes wrong with the template project, we can also be detected in advance). Created a `mock-project-build.yml` CI that executes every half hour, which periodically pulls [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo to build: +As you see, the above troubleshooting method has a certain lag. We hope to reduce additional human labor by building regularly, and at the same time allow us to find problems faster. So we reused the [create-next-app-antd](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) project as the base (in this way, if something goes wrong with the template project, we can also be detected in advance). Created a `mock-project-build.yml` CI that executes every half hour, which periodically pulls [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo to build: ```yml on: diff --git a/docs/blog/mock-project-build.zh-CN.md b/docs/blog/mock-project-build.zh-CN.md index ded4f73315..d2cbc943d8 100644 --- a/docs/blog/mock-project-build.zh-CN.md +++ b/docs/blog/mock-project-build.zh-CN.md @@ -30,7 +30,7 @@ Ant Design 作为大型组件库，内部依赖十分复杂。有时候 antd 代 ### 定时构建 -如你所见，上述的排查方式有一定的滞后性。我们希望通过定时构建的方式减少额外的人力劳动，同时也能让我们更快的发现问题。因而我们复用了 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) 项目作为基底（这样，如果模板项目出了问题，我们同样可以提前发现）。创建了一个每半小时执行一次的 `mock-project-build.yml` CI，它会定期拉取 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo 进行构建： +如你所见，上述的排查方式有一定的滞后性。我们希望通过定时构建的方式减少额外的人力劳动，同时也能让我们更快的发现问题。因而我们复用了 [create-next-app-antd](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) 项目作为基底（这样，如果模板项目出了问题，我们同样可以提前发现）。创建了一个每半小时执行一次的 `mock-project-build.yml` CI，它会定期拉取 [create-next-app-antd](https://github.com/ant-design/create-next-app-antd) repo 进行构建： ```yml on: diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index a8f2349f6b..3032dea6c3 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -411,7 +411,7 @@ fs.writeFileSync(outputPath, css); You can choose to execute this script before starting the development command or before compiling. Running this script will generate a full antd.min.css file directly in the specified directory of the current project (e.g. public). -Take Next.js for example（[example](https://github.com/ant-design/create-next-app-antd)）： +Take Next.js for example（[example](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)）： ```json // package.json @@ -605,7 +605,7 @@ export default class MyDocument extends Document { } ``` -See the demo：[Export the css files on demand demo](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand) +See the demo：[Export the css files on demand demo](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand) ### Shadow DOM Usage diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index 7104d6e9a7..4898fafd23 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -407,7 +407,7 @@ fs.writeFileSync(outputPath, css); 你可以选择在启动开发命令或编译前执行这个脚本，运行上述脚本将会在当前项目的指定（如： public 目录）目录下直接生成一个全量的 antd.min.css 文件。 -以 Next.js 为例（[参考示例](https://github.com/ant-design/create-next-app-antd)）： +以 Next.js 为例（[参考示例](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style)）： ```json // package.json @@ -601,7 +601,7 @@ export default class MyDocument extends Document { } ``` -演示示例请看：[按需抽取样式示例](https://github.com/ant-design/create-next-app-antd/tree/generate-css-on-demand) +演示示例请看：[按需抽取样式示例](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-generate-css-on-demand) ### 兼容旧版浏览器 diff --git a/docs/react/getting-started.en-US.md b/docs/react/getting-started.en-US.md index 755f914274..18089ffb32 100755 --- a/docs/react/getting-started.en-US.md +++ b/docs/react/getting-started.en-US.md @@ -94,7 +94,7 @@ OK! Now that you know the basics of using antd components, you are welcome to ex During actual real-world project development, you will most likely need a development workflow consisting of `compile/build/deploy/lint/debug/` deployment. You can read the following documents on the subject or use the following scaffolds and examples provided below: - [Ant Design Pro](https://pro.ant.design/) -- [create-next-app](https://github.com/ant-design/create-next-app-antd) +- [create-next-app](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) - More scaffolds at [Scaffold Market](https://scaffold.ant.design/) ## Test with Jest diff --git a/docs/react/getting-started.zh-CN.md b/docs/react/getting-started.zh-CN.md index 0622ec5fca..44ab51e3e9 100755 --- a/docs/react/getting-started.zh-CN.md +++ b/docs/react/getting-started.zh-CN.md @@ -96,7 +96,7 @@ createRoot(document.getElementById('root')).render(); 实际项目开发中，你会需要构建、调试、代理、打包部署等一系列工程化的需求。您可以阅读后面的文档或者使用以下脚手架和范例： - [Ant Design Pro](https://pro.ant.design/) -- [create-next-app](https://github.com/ant-design/create-next-app-antd) +- [create-next-app](https://github.com/ant-design/ant-design-examples/tree/main/examples/with-nextjs-inline-style) - 更多脚手架可以查看 [脚手架市场](https://scaffold.ant.design/) ## 按需加载 diff --git a/scripts/ci-mock-project-build.sh b/scripts/ci-mock-project-build.sh index 6302a77c8f..6c559be160 100644 --- a/scripts/ci-mock-project-build.sh +++ b/scripts/ci-mock-project-build.sh @@ -4,10 +4,10 @@ rm -rf ~tmpProj/ # clone project -git clone https://github.com/ant-design/create-next-app-antd.git ~tmpProj --depth=1 +git clone https://github.com/ant-design/ant-design-examples.git ~tmpProj --depth=1 # change directory -cd ~tmpProj +cd ~tmpProj/examples/with-nextjs-inline-style # install dependencies yarn