From 45ac0076c9ed981345a710265363e646d67e8cf3 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 9 Dec 2022 18:47:53 +0800 Subject: [PATCH 01/13] Update issue-open-check.yml --- .github/workflows/issue-open-check.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/issue-open-check.yml b/.github/workflows/issue-open-check.yml index 7a0ab9bdbe..9dc8929066 100644 --- a/.github/workflows/issue-open-check.yml +++ b/.github/workflows/issue-open-check.yml @@ -40,7 +40,7 @@ jobs: actions: 'check-issue' issue-number: ${{ github.event.issue.number }} # 格式如：'x1,x2' or 'x1,x2/y1,y2' 最多支持 2 个数组 - title-includes: '官网,网站,国内,镜像,mobile ant design,mobile.ant.design,ant design,ant design pro,pro.ant.design/挂了,挂掉了,无法访问,不能访问,访问速度,访问慢,访问不了,出问题,打不开,登不上,can not open,cannot open,can not be reached' + title-includes: '官网,网站,国内,镜像,mobile ant design,mobile.ant.design,ant design,ant design pro,pro.ant.design/挂了,挂掉了,无法访问,不能访问,访问速度,访问慢,访问不了,加载太慢,加载慢,加载很慢,出问题,打不开,登不上,can not open,cannot open,can not be reached' - name: deal website if: steps.checkid.outputs.check-result == 'true' From d86a8bda7bfc27f5d5a2ab5e4e56fbf22426024a Mon Sep 17 00:00:00 2001 From: Akara Date: Fri, 9 Dec 2022 21:05:39 +0800 Subject: [PATCH 02/13] docs: blog typo (#39443) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 程浚哲 --- docs/blog/getContainer.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/getContainer.zh-CN.md b/docs/blog/getContainer.zh-CN.md index b32599a258..76804dda5b 100644 --- a/docs/blog/getContainer.zh-CN.md +++ b/docs/blog/getContainer.zh-CN.md @@ -4,7 +4,7 @@ date: 2022-12-08 author: zombieJ --- -在网页开发中，我们时长会遇到弹出元素的需求，比如 Select 的下拉框、或者是 Modal 组件。直接将其渲染到当前节点下时，可能会被父节点的 `overflow: hidden` 裁剪掉： +在网页开发中，我们时常会遇到弹出元素的需求，比如 Select 的下拉框、或者是 Modal 组件。直接将其渲染到当前节点下时，可能会被父节点的 `overflow: hidden` 裁剪掉： ![Overflow](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Noh-TYJ0BdcAAAAAAAAAAAAADrJ8AQ/original) From 0a846f8754f1582b6d3503e6c5b5871cbd1c04de Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 10 Dec 2022 04:03:03 +0800 Subject: [PATCH 03/13] docs: improve markdown table style (#39446) * docs: improve markdown table style * docs: improve markdown table style --- .dumi/theme/common/styles/Markdown.tsx | 248 +++++++------------------ 1 file changed, 69 insertions(+), 179 deletions(-) diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index 52b05e93bd..06d5c3dec0 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -181,37 +181,6 @@ export default () => { } } - .markdown .dumi-default-table-content > table, - .markdown > table { - width: 100%; - margin: 8px 0 16px; - direction: ltr; - empty-cells: show; - border: 1px solid ${token.colorSplit}; - border-collapse: collapse; - border-spacing: 0; - } - - .markdown .dumi-default-table-content, - .markdown { - > table th { - color: #5c6b77; - font-weight: 500; - white-space: nowrap; - background: rgba(0, 0, 0, 0.02); - } - } - - .markdown .dumi-default-table-content, - .markdown { - > table th, - > table td { - padding: 16px 24px; - text-align: left; - border: 1px solid ${token.colorSplit}; - } - } - .markdown table td > a:not(:last-child) { margin-right: 0 !important; @@ -294,12 +263,72 @@ export default () => { } .markdown .dumi-default-table { - .component-api-table { - display: block; + table { + margin: 0; + overflow-x: auto; + overflow-y: hidden; + margin: 8px 0 16px; + direction: ltr; + empty-cells: show; + border: 1px solid ${token.colorSplit}; + border-collapse: collapse; + border-spacing: 0; + + th, + td { + padding: 12px 24px; + text-align: left; + border: 1px solid ${token.colorSplit}; + + &:first-child { + border-left: 1px solid ${token.colorSplit}; + } + + &:last-child { + border-right: 1px solid ${token.colorSplit}; + } + + img { + max-width: unset; + } + } + + th { + color: #5c6b77; + border-width: 1px 1px 2px; + font-weight: 500; + white-space: nowrap; + background: rgba(0, 0, 0, 0.02); + } + + tbody tr { + transition: all 0.3s; + + &:hover { + background: rgba(60, 90, 100, 0.04); + } + } + } + + table.component-api-table { + margin: 2em 0; + overflow-x: auto; + overflow-y: hidden; + font-size: ${Math.max(token.fontSize - 1, 12)}px; + font-family: ${token.codeFamily}; + line-height: ${token.lineHeight}; + border: 1px solid ${token.colorSplit}; + border-width: 0 1px; + + th { + border-width: 1px 0 2px; + } td { + border-width: 1px 0; &:first-child { width: 18%; + min-width: 58px; color: #595959; font-weight: 600; white-space: nowrap; @@ -307,6 +336,7 @@ export default () => { &:nth-child(2) { width: 55%; + min-width: 160px; } &:nth-child(3) { @@ -336,116 +366,10 @@ export default () => { } } - .markdown .dumi-default-table { - table { - margin: 0; - overflow-x: auto; - overflow-y: hidden; - font-size: ${Math.max(token.fontSize - 1, 12)}px; - font-family: ${token.codeFamily}; - line-height: ${token.lineHeight}; - border: 0; - -webkit-overflow-scrolling: touch; - - th, - td { - padding: 12px; - border-color: ${token.colorSplit}; - border-width: 1px 0; - - &:first-child { - border-left: 1px solid ${token.colorSplit}; - } - - &:last-child { - border-right: 1px solid ${token.colorSplit}; - } - } - - th { - padding-top: 14px; - border-width: 1px 0 2px; - } - - tbody tr { - transition: all 0.3s; - - &:hover { - background: rgba(60, 90, 100, 0.04); - } - } - - td { - &:first-child { - min-width: 58px; - } - } - } - - hr { - margin: 12px 0; - } - } - .grid-demo, [id^='components-grid-demo-'] { - .demo-row, - .code-box-demo .demo-row { - margin-bottom: 8px; - overflow: hidden; - background-image: linear-gradient( - 90deg, - #f5f5f5 4.16666667%, - transparent 4.16666667%, - transparent 8.33333333%, - #f5f5f5 8.33333333%, - #f5f5f5 12.5%, - transparent 12.5%, - transparent 16.66666667%, - #f5f5f5 16.66666667%, - #f5f5f5 20.83333333%, - transparent 20.83333333%, - transparent 25%, - #f5f5f5 25%, - #f5f5f5 29.16666667%, - transparent 29.16666667%, - transparent 33.33333333%, - #f5f5f5 33.33333333%, - #f5f5f5 37.5%, - transparent 37.5%, - transparent 41.66666667%, - #f5f5f5 41.66666667%, - #f5f5f5 45.83333333%, - transparent 45.83333333%, - transparent 50%, - #f5f5f5 50%, - #f5f5f5 54.16666667%, - transparent 54.16666667%, - transparent 58.33333333%, - #f5f5f5 58.33333333%, - #f5f5f5 62.5%, - transparent 62.5%, - transparent 66.66666667%, - #f5f5f5 66.66666667%, - #f5f5f5 70.83333333%, - transparent 70.83333333%, - transparent 75%, - #f5f5f5 75%, - #f5f5f5 79.16666667%, - transparent 79.16666667%, - transparent 83.33333333%, - #f5f5f5 83.33333333%, - #f5f5f5 87.5%, - transparent 87.5%, - transparent 91.66666667%, - #f5f5f5 91.66666667%, - #f5f5f5 95.83333333%, - transparent 95.83333333% - ); - } - ${antCls}-row > div, - .code-box-demo ${antCls}-row > div { + .code-box-demo ${antCls}-row > div { min-height: 30px; margin-top: 8px; margin-bottom: 8px; @@ -464,7 +388,7 @@ export default () => { } ${antCls}-row .demo-col, - .code-box-demo ${antCls}-row .demo-col { + .code-box-demo ${antCls}-row .demo-col { margin-top: 0; margin-bottom: 0; padding: 30px 0; @@ -479,23 +403,23 @@ export default () => { } ${antCls}-row .demo-col-2, - .code-box-demo ${antCls}-row .demo-col-2 { + .code-box-demo ${antCls}-row .demo-col-2 { background: ${new TinyColor(demoGridColor).setAlpha(0.75).toHexString()}; } ${antCls}-row .demo-col-3, - .code-box-demo ${antCls}-row .demo-col-3 { + .code-box-demo ${antCls}-row .demo-col-3 { color: #999; background: rgba(255, 255, 255, 0.2); } ${antCls}-row .demo-col-4, - .code-box-demo ${antCls}-row .demo-col-4 { + .code-box-demo ${antCls}-row .demo-col-4 { background: ${new TinyColor(demoGridColor).setAlpha(0.6).toHexString()}; } ${antCls}-row .demo-col-5, - .code-box-demo ${antCls}-row .demo-col-5 { + .code-box-demo ${antCls}-row .demo-col-5 { color: #999; background: rgba(255, 255, 255, 0.2); } @@ -528,40 +452,6 @@ export default () => { margin-bottom: 0; } } - - // For Changelog - .markdown ul${antCls}-timeline { - line-height: 2; - - li${antCls}-timeline-item { - margin: 0; - padding: 0 0 30px; - list-style: none; - - ${antCls}-timeline-item-content { - position: relative; - top: -14px; - padding-left: 32px; - font-size: 14px; - - > h2 { - margin-top: 0; - padding-top: 4px; - direction: ltr; - - span { - ${antCls}-row-rtl & { - float: right; - } - } - } - } - } - - li${antCls}-timeline-item:first-child { - margin-top: 40px; - } - } `} /> ); From 555257113107821218899ffffa1acde11906f82e Mon Sep 17 00:00:00 2001 From: xiao11lang <33827620+xiao11lang@users.noreply.github.com> Date: Sat, 10 Dec 2022 15:02:57 +0800 Subject: [PATCH 04/13] doc: fix typos (#39453) --- docs/blog/css-in-js.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/blog/css-in-js.zh-CN.md b/docs/blog/css-in-js.zh-CN.md index 54b4ed0a69..ec83bb8acf 100644 --- a/docs/blog/css-in-js.zh-CN.md +++ b/docs/blog/css-in-js.zh-CN.md @@ -12,7 +12,7 @@ author: MadCcc ![image.png](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*X5tDQ5VIpcoAAAAAAAAAAAAADrJ8AQ/original) -如此便可以引入一个 CSS-in-JS 被诟病已久的问题：我们在编写代码时写的并不是最终的 css，所以每次都需要重新序列化得到 css 后再次计算 hash，这就在每次渲染组件时带来了而外的开销。如果你的页面或者组件带有非常复杂或者大量的 CSS-in-JS 代码，甚至样式会跟随组件的 props 变化，那么这个性能消耗便变得不可忽视。
针对这个问题，各个 CSS-in-JS 库会有自己的应对方式，这里就先不做赘述，让我们来看一看 Ant Design 的方案。 +如此便可以引入一个 CSS-in-JS 被诟病已久的问题：我们在编写代码时写的并不是最终的 css，所以每次都需要重新序列化得到 css 后再次计算 hash，这就在每次渲染组件时带来了额外的开销。如果你的页面或者组件带有非常复杂或者大量的 CSS-in-JS 代码，甚至样式会跟随组件的 props 变化，那么这个性能消耗便变得不可忽视。
针对这个问题，各个 CSS-in-JS 库会有自己的应对方式，这里就先不做赘述，让我们来看一看 Ant Design 的方案。 ## 计算 hash From 53470fc476653a8ea98b6d597fa5a660f96cd9f0 Mon Sep 17 00:00:00 2001 From: PCCCCCCC Date: Sun, 11 Dec 2022 20:39:46 +0800 Subject: [PATCH 05/13] Adapt to the mobile mode of the new official website (#39043) * feat: add basic css for title feat: add basic Carousel structure feat: modify some card with mobile mode feat: style change for theme feat: Extract public styles and improve some styles fix: Fix code loss caused by handling conflicts * feat: change the theme to carousel with image --- .dumi/pages/index/components/Banner.tsx | 132 +++++++++++------- .../index/components/BannerRecommends.tsx | 129 +++++++++++------ .../pages/index/components/ComponentsList.tsx | 126 ++++++++++------- .../index/components/DesignFramework.tsx | 9 +- .dumi/pages/index/components/Group.tsx | 13 +- .dumi/pages/index/components/SiteContext.tsx | 11 ++ .../index/components/Theme/MobileCarousel.tsx | 119 ++++++++++++++++ .dumi/pages/index/components/Theme/index.tsx | 32 +++-- .dumi/pages/index/components/images/topic.png | Bin 0 -> 200945 bytes .dumi/pages/index/components/util.tsx | 26 ++++ .dumi/pages/index/index.tsx | 88 +++++++----- .dumi/theme/slots/Footer/index.tsx | 18 ++- package.json | 2 +- 13 files changed, 512 insertions(+), 193 deletions(-) create mode 100644 .dumi/pages/index/components/SiteContext.tsx create mode 100644 .dumi/pages/index/components/Theme/MobileCarousel.tsx create mode 100644 .dumi/pages/index/components/images/topic.png diff --git a/.dumi/pages/index/components/Banner.tsx b/.dumi/pages/index/components/Banner.tsx index 09e4f39a2a..ca4573063c 100644 --- a/.dumi/pages/index/components/Banner.tsx +++ b/.dumi/pages/index/components/Banner.tsx @@ -1,10 +1,13 @@ import * as React from 'react'; import { Button, Space, Typography } from 'antd'; import { Link, useLocation } from 'dumi'; +import { css } from '@emotion/react'; import useLocale from '../../../hooks/useLocale'; import useSiteToken from '../../../hooks/useSiteToken'; import { GroupMask } from './Group'; import * as utils from '../../../theme/utils'; +import SiteContext from './SiteContext'; +import topicImage from './images/topic.png'; const locales = { cn: { @@ -20,6 +23,35 @@ const locales = { }, }; +const useStyle = () => { + const { token } = useSiteToken(); + const { isMobile } = React.useContext(SiteContext); + + return { + titleBase: css` + h1& { + font-family: AliPuHui, ${token.fontFamily}; + } + `, + title: isMobile + ? css` + h1& { + margin-bottom: ${token.margin}px; + font-weight: normal; + font-size: ${token.fontSizeHeading1 + 2}px; + line-height: ${token.lineHeightHeading2}; + } + ` + : css` + h1& { + margin-bottom: ${token.marginMD}px; + font-weight: 900; + font-size: 68px; + } + `, + }; +}; + export interface BannerProps { children?: React.ReactNode; } @@ -28,53 +60,59 @@ export default function Banner({ children }: BannerProps) { const [locale] = useLocale(locales); const { pathname, search } = useLocation(); const { token } = useSiteToken(); + const styles = useStyle(); + const { isMobile } = React.useContext(SiteContext); const isZhCN = utils.isZhCN(pathname); return ( <> {/* Banner Placeholder Motion */} -
+ {isMobile ? ( + + ) : (
- -
,
+
, ] `; diff --git a/components/float-button/demo/group.tsx b/components/float-button/demo/group.tsx index b30bcca614..7b16979e46 100644 --- a/components/float-button/demo/group.tsx +++ b/components/float-button/demo/group.tsx @@ -7,13 +7,13 @@ const App: React.FC = () => ( } /> - + } /> } /> - + ); From ad7501ccf8d9d91aa16257a5a3baa9b1668525d8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 12 Dec 2022 11:49:29 +0800 Subject: [PATCH 08/13] docs: update migrate desc --- docs/react/migration-v5.en-US.md | 7 +++++++ docs/react/migration-v5.zh-CN.md | 7 +++++++ 2 files changed, 14 insertions(+) diff --git a/docs/react/migration-v5.en-US.md b/docs/react/migration-v5.en-US.md index 32fc9a7ce5..43728bc221 100644 --- a/docs/react/migration-v5.en-US.md +++ b/docs/react/migration-v5.en-US.md @@ -164,6 +164,13 @@ Use git to save your code and install latest version: npm install --save antd@5.x ``` +If you want to use v4 deprecated component like `Comment` or `PageHeader`. You can install `@ant-design/compatible` and `@ant-design/pro-layout` for compatible: + +```bash +npm install --save @ant-design/compatible@v5-compatible-v4 +npm install --save @ant-design/pro-layout +``` + You can manually check the code one by one against the above list for modification. In addition, we also provide a codemod cli tool [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5) To help you quickly upgrade to v5. Before running codemod cli, please submit your local code changes. diff --git a/docs/react/migration-v5.zh-CN.md b/docs/react/migration-v5.zh-CN.md index b11fcac55d..c41884204d 100644 --- a/docs/react/migration-v5.zh-CN.md +++ b/docs/react/migration-v5.zh-CN.md @@ -156,6 +156,13 @@ title: 从 v4 到 v5 npm install --save antd@5.x ``` +如果你需要使用 v4 废弃组件如 `Comment`、`PageHeader`，请安装 `@ant-design/compatible` 与 `@ant-design/pro-layout` 做兼容： + +```bash +npm install --save @ant-design/compatible@v5-compatible-v4 +npm install --save @ant-design/pro-layout +``` + 你可以手动对照上面的列表逐条检查代码进行修改，另外，我们也提供了一个 codemod cli 工具 [@ant-design/codemod-v5](https://github.com/ant-design/codemod-v5) 以帮助你快速升级到 v5 版本。 在运行 codemod cli 前，请先提交你的本地代码修改。 From 977a9a92ffb3a78a04d50f18c4f8242ee92a6aef Mon Sep 17 00:00:00 2001 From: Yuki Zhang Date: Mon, 12 Dec 2022 16:36:46 +0800 Subject: [PATCH 09/13] Fix the issue where the clear icon does not show when hovering over the Select series component under the Space component. (#39468) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: Fix the problem that the clear icon is not displayed when the Select series component hovers under the Space component * refactor: 修改 Space.Compact css 优先级以及简化调用 * refactor: 修改 Space.Compact 垂直方向 css 优先级以及简化调用 * docs: 添加注释 * fix: lint * test: update snapshot * test: update snapshot --- components/button/style/index.tsx | 7 ++- components/cascader/style/index.tsx | 5 +- components/date-picker/style/index.tsx | 16 ++++-- components/input-number/style/index.tsx | 11 +++- components/input/style/index.tsx | 7 ++- components/select/style/index.tsx | 12 ++-- .../__snapshots__/demo-extend.test.ts.snap | 56 ++++++++++++++++++- .../__tests__/__snapshots__/demo.test.ts.snap | 56 ++++++++++++++++++- components/space/demo/compact.tsx | 4 +- components/style/compact-item-vertical.tsx | 13 +++-- components/style/compact-item.tsx | 16 +++--- 11 files changed, 164 insertions(+), 39 deletions(-) diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx index 03a807c30f..0fdf16ab34 100644 --- a/components/button/style/index.tsx +++ b/components/button/style/index.tsx @@ -50,9 +50,6 @@ const genSharedButtonStyle: GenerateStyle = (token): CSS ...genFocusStyle(token), }, - ...genCompactItemStyle(token, componentCls, { focus: false }), - ...genCompactItemVerticalStyle(token, componentCls), - // make `btn-icon-only` not too narrow '&-icon-only&-compact-item': { flex: 'none', @@ -496,5 +493,9 @@ export default genComponentStyleHook('Button', (token) => { // Button Group genGroupStyle(buttonToken), + + // Space Compact + genCompactItemStyle(token, { focus: false }), + genCompactItemVerticalStyle(token), ]; }); diff --git a/components/cascader/style/index.tsx b/components/cascader/style/index.tsx index 016f1c957e..c9d2a16db3 100644 --- a/components/cascader/style/index.tsx +++ b/components/cascader/style/index.tsx @@ -32,7 +32,6 @@ const genBaseStyle: GenerateStyle = (token) => { { [componentCls]: { width: token.controlWidth, - ...genCompactItemStyle(token, componentCls), }, }, // ===================================================== @@ -153,6 +152,10 @@ const genBaseStyle: GenerateStyle = (token) => { direction: 'rtl', }, }, + // ===================================================== + // == Space Compact == + // ===================================================== + genCompactItemStyle(token), ]; }; diff --git a/components/date-picker/style/index.tsx b/components/date-picker/style/index.tsx index 56d90c1206..b8a0fe0e34 100644 --- a/components/date-picker/style/index.tsx +++ b/components/date-picker/style/index.tsx @@ -973,11 +973,6 @@ const genPickerStyle: GenerateStyle = (token) => { borderRadius, transition: `border ${motionDurationMid}, box-shadow ${motionDurationMid}`, - // Space.Compact - ...genCompactItemStyle(token, componentCls, { - focusElCls: `${componentCls}-focused`, - }), - '&:hover, &-focused': { ...genHoverStyle(token), }, @@ -1426,7 +1421,16 @@ export default genComponentStyleHook( initInputToken>(token), initPickerPanelToken(token), ); - return [genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken)]; + return [ + genPickerStyle(pickerToken), + genPickerStatusStyle(pickerToken), + // ===================================================== + // == Space Compact == + // ===================================================== + genCompactItemStyle(token, { + focusElCls: `${token.componentCls}-focused`, + }), + ]; }, (token) => ({ presetsWidth: 120, diff --git a/components/input-number/style/index.tsx b/components/input-number/style/index.tsx index 3a3308bdde..98e446e0bc 100644 --- a/components/input-number/style/index.tsx +++ b/components/input-number/style/index.tsx @@ -63,8 +63,6 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe border: `${lineWidth}px ${lineType} ${colorBorder}`, borderRadius, - ...genCompactItemStyle(token, componentCls), - '&-rtl': { direction: 'rtl', @@ -396,7 +394,14 @@ export default genComponentStyleHook( 'InputNumber', (token) => { const inputNumberToken = initInputToken>(token); - return [genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken)]; + return [ + genInputNumberStyles(inputNumberToken), + genAffixWrapperStyles(inputNumberToken), + // ===================================================== + // == Space Compact == + // ===================================================== + genCompactItemStyle(inputNumberToken), + ]; }, (token) => ({ controlWidth: 90, diff --git a/components/input/style/index.tsx b/components/input/style/index.tsx index bd535ae6b5..a675993a23 100644 --- a/components/input/style/index.tsx +++ b/components/input/style/index.tsx @@ -504,7 +504,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { }; const genInputStyle: GenerateStyle = (token: InputToken) => { - const { prefixCls, componentCls, controlHeightSM, lineWidth } = token; + const { componentCls, controlHeightSM, lineWidth } = token; const FIXED_CHROME_COLOR_HEIGHT = 16; const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2; @@ -514,7 +514,6 @@ const genInputStyle: GenerateStyle = (token: InputToken) => { ...resetComponent(token), ...genBasicInputStyle(token), ...genStatusStyle(token), - ...genCompactItemStyle(token, prefixCls), '&[type="color"]': { height: token.controlHeight, @@ -933,5 +932,9 @@ export default genComponentStyleHook('Input', (token) => { genAffixStyle(inputToken), genGroupStyle(inputToken), genSearchInputStyle(inputToken), + // ===================================================== + // == Space Compact == + // ===================================================== + genCompactItemStyle(inputToken), ]; }); diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 7408b9357f..20830882a5 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -262,11 +262,6 @@ const genSelectStyle: GenerateStyle = (token) => { '&&-in-form-item': { width: '100%', }, - // Space.Compact - ...genCompactItemStyle(token, componentCls, { - borderElCls: `${componentCls}-selector`, - focusElCls: `${componentCls}-focused`, - }), }, }, @@ -320,6 +315,13 @@ const genSelectStyle: GenerateStyle = (token) => { }), true, ), + // ===================================================== + // == Space Compact == + // ===================================================== + genCompactItemStyle(token, { + borderElCls: `${componentCls}-selector`, + focusElCls: `${componentCls}-focused`, + }), ]; }; diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index a1e5c8d479..ddd7c082dc 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -448,7 +448,7 @@ exports[`renders ./components/space/demo/compact.tsx extend context correctly 1` class="ant-space-compact ant-space-compact-block" >
+
+
+
+
(
- @@ -53,7 +53,7 @@ const App: React.FC = () => (
- diff --git a/components/style/compact-item-vertical.tsx b/components/style/compact-item-vertical.tsx index e0421b741f..4506c327a8 100644 --- a/components/style/compact-item-vertical.tsx +++ b/components/style/compact-item-vertical.tsx @@ -1,6 +1,7 @@ /* eslint-disable import/prefer-default-export */ -import type { CSSObject } from '@ant-design/cssinjs'; -import type { DerivativeToken } from '../theme/internal'; +import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import type { DerivativeToken, FullToken } from '../theme/internal'; +import type { OverrideComponent } from '../theme/util/genComponentStyleHook'; function compactItemVerticalBorder(token: DerivativeToken): CSSObject { return { @@ -43,11 +44,13 @@ function compactItemBorderVerticalRadius(prefixCls: string): CSSObject { }; } -export function genCompactItemVerticalStyle(token: DerivativeToken, prefixCls: string): CSSObject { +export function genCompactItemVerticalStyle( + token: FullToken, +): CSSInterpolation { return { - '&-compact-vertical': { + [`${token.componentCls}-compact-vertical`]: { ...compactItemVerticalBorder(token), - ...compactItemBorderVerticalRadius(prefixCls), + ...compactItemBorderVerticalRadius(token.componentCls), }, }; } diff --git a/components/style/compact-item.tsx b/components/style/compact-item.tsx index 236c793913..3398eaec7f 100644 --- a/components/style/compact-item.tsx +++ b/components/style/compact-item.tsx @@ -1,6 +1,7 @@ /* eslint-disable import/prefer-default-export */ -import type { CSSObject } from '@ant-design/cssinjs'; -import type { DerivativeToken } from '../theme/internal'; +import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import type { DerivativeToken, FullToken } from '../theme/internal'; +import type { OverrideComponent } from '../theme/util/genComponentStyleHook'; interface CompactItemOptions { focus?: boolean; @@ -75,15 +76,14 @@ function compactItemBorderRadius(prefixCls: string, options: CompactItemOptions) }; } -export function genCompactItemStyle( - token: DerivativeToken, - prefixCls: string, +export function genCompactItemStyle( + token: FullToken, options: CompactItemOptions = { focus: true }, -): CSSObject { +): CSSInterpolation { return { - '&-compact': { + [`${token.componentCls}-compact`]: { ...compactItemBorder(token, options), - ...compactItemBorderRadius(prefixCls, options), + ...compactItemBorderRadius(token.componentCls, options), }, }; } From 62d67bc5ed018dc885c22c8f3d53b84843fe0c01 Mon Sep 17 00:00:00 2001 From: Peach Date: Mon, 12 Dec 2022 17:03:42 +0800 Subject: [PATCH 10/13] docs: changelog for 5.0.6 (#39484) * docs: changelog for 5.0.6 * chore: bump version * docs: update changelog order * Apply suggestions from code review Co-authored-by: MadCcc <1075746765@qq.com> * docs: update changelog Co-authored-by: MadCcc <1075746765@qq.com> --- CHANGELOG.en-US.md | 14 ++++++++++++++ CHANGELOG.zh-CN.md | 14 ++++++++++++++ package.json | 2 +- 3 files changed, 29 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f8e652bb06..4ce0f8c525 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,20 @@ timeline: true --- +## 5.0.6 + +`2022-12-12` + +- 🐞 Fix FloatButton `tooltip` property is not support `0` value. [#39425](https://github.com/ant-design/ant-design/pull/39425) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 Fix Space wrapped Select not display clear icon problem when mouse hover. [#39468](https://github.com/ant-design/ant-design/pull/39468) [@foryuki](https://github.com/foryuki) +- 💄 Fix Cascader ul has unexpected margin value. [#39436](https://github.com/ant-design/ant-design/pull/39436) [@ZN1996](https://github.com/ZN1996) +- 💄 Fix Input has unexpected padding problem in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 Optimize Message padding in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 Fix Radio.Button has unexpected text color in dark mode. [#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 Fix Select has unexpected padding problem in compact mode. [#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 Fix Slider has unexpected size for marking dot. [#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 Optimize Switch color in dark mode. [#39428](https://github.com/ant-design/ant-design/pull/39428) + ## 5.0.5 `2022-12-08` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 3b93479f9b..7022e82cba 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,20 @@ timeline: true --- +## 5.0.6 + +`2022-12-12` + +- 🐞 修复 FloatButton 的 `toolip` 属性不支持设置为 `0` 的问题。[#39425](https://github.com/ant-design/ant-design/pull/39425) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 修复 Space 组件包裹的  Select 系列组件在 hover 时清除图标不展示的问题。[#39468](https://github.com/ant-design/ant-design/pull/39468) [@foryuki](https://github.com/foryuki) +- 💄 修复 Cascader 内部 ul 的 margin 值异常的问题。[#39436](https://github.com/ant-design/ant-design/pull/39436) [@ZN1996](https://github.com/ZN1996) +- 💄 修复 Input 组件在紧凑模式下内边距异常的问题。[#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 优化 Message 组件在紧凑模式下的内边距。[#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 修复 Radio.Button 组件在暗色模式下的文字颜色。[#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 修复 Select 组件在紧凑模式下内边距异常的问题。[#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 修复 Slider 组件标签原点样式问题。[#39428](https://github.com/ant-design/ant-design/pull/39428) +- 💄 优化 Switch 组件暗色模式下的颜色。[#39428](https://github.com/ant-design/ant-design/pull/39428) + ## 5.0.5 `2022-12-08` diff --git a/package.json b/package.json index bc01e23b08..4fe4fa0012 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.0.5", + "version": "5.0.6", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", "keywords": [ From cd7f38b42a39971411f3f42c84d792ba8896645c Mon Sep 17 00:00:00 2001 From: vagusX Date: Mon, 12 Dec 2022 17:50:19 +0800 Subject: [PATCH 11/13] Update CHANGELOG.zh-CN.md (#39485) --- CHANGELOG.zh-CN.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 7022e82cba..14ac182467 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -20,7 +20,7 @@ timeline: true `2022-12-12` - 🐞 修复 FloatButton 的 `toolip` 属性不支持设置为 `0` 的问题。[#39425](https://github.com/ant-design/ant-design/pull/39425) [@li-jia-nan](https://github.com/li-jia-nan) -- 🐞 修复 Space 组件包裹的  Select 系列组件在 hover 时清除图标不展示的问题。[#39468](https://github.com/ant-design/ant-design/pull/39468) [@foryuki](https://github.com/foryuki) +- 🐞 修复 Space 组件包裹的 Select 系列组件在 hover 时清除图标不展示的问题。[#39468](https://github.com/ant-design/ant-design/pull/39468) [@foryuki](https://github.com/foryuki) - 💄 修复 Cascader 内部 ul 的 margin 值异常的问题。[#39436](https://github.com/ant-design/ant-design/pull/39436) [@ZN1996](https://github.com/ZN1996) - 💄 修复 Input 组件在紧凑模式下内边距异常的问题。[#39428](https://github.com/ant-design/ant-design/pull/39428) - 💄 优化 Message 组件在紧凑模式下的内边距。[#39428](https://github.com/ant-design/ant-design/pull/39428) From de31c90b08417de560ae5e107fcbbe74e0e6ba76 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: Mon, 12 Dec 2022 19:44:32 +0800 Subject: [PATCH 12/13] docs: Adjust Anchor demo (#39488) --- .../__snapshots__/demo-extend.test.ts.snap | 257 ++++++++++-------- .../__tests__/__snapshots__/demo.test.ts.snap | 257 ++++++++++-------- components/anchor/demo/basic.tsx | 24 +- components/anchor/demo/targetOffset.tsx | 53 +++- components/anchor/index.en-US.md | 4 +- components/anchor/index.zh-CN.md | 4 +- 6 files changed, 338 insertions(+), 261 deletions(-) diff --git a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap index 582b236f77..e214cd3035 100644 --- a/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,77 +1,79 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/anchor/demo/basic.tsx extend context correctly 1`] = ` -
+
+ id="part-1" + style="height:100vh;background:rgba(255,0,0,0.02)" + /> +
+
+
+
+ @@ -379,79 +381,96 @@ exports[`renders ./components/anchor/demo/static.tsx extend context correctly 1` exports[`renders ./components/anchor/demo/targetOffset.tsx extend context correctly 1`] = `
+ Part 1 +
+
+ Part 2 +
+
+ Part 3 +
+
+
+
+
+
+ Fixed Top Block +
+
`; diff --git a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap index 2b3a5ebb0f..faf67fc7d6 100644 --- a/components/anchor/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/anchor/__tests__/__snapshots__/demo.test.ts.snap @@ -1,77 +1,79 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders ./components/anchor/demo/basic.tsx correctly 1`] = ` -
+
+ id="part-1" + style="height:100vh;background:rgba(255,0,0,0.02)" + /> +
+
+
+
+ @@ -379,79 +381,96 @@ exports[`renders ./components/anchor/demo/static.tsx correctly 1`] = ` exports[`renders ./components/anchor/demo/targetOffset.tsx correctly 1`] = `
+ Part 1 +
+
+ Part 2 +
+
+ Part 3 +
+
+
+
+
+
+ Fixed Top Block +
+
`; diff --git a/components/anchor/demo/basic.tsx b/components/anchor/demo/basic.tsx index 2280a74ec9..b97ca84d7a 100644 --- a/components/anchor/demo/basic.tsx +++ b/components/anchor/demo/basic.tsx @@ -1,17 +1,23 @@ import React from 'react'; -import { Anchor } from 'antd'; +import { Anchor, Row, Col } from 'antd'; const { Link } = Anchor; const App: React.FC = () => ( - - - - - - - - + + +
+
+
+ + + + + + + + + ); export default App; diff --git a/components/anchor/demo/targetOffset.tsx b/components/anchor/demo/targetOffset.tsx index aaf0227267..5ff0fce6fb 100644 --- a/components/anchor/demo/targetOffset.tsx +++ b/components/anchor/demo/targetOffset.tsx @@ -1,24 +1,57 @@ import React, { useEffect, useState } from 'react'; -import { Anchor } from 'antd'; +import { Anchor, Row, Col } from 'antd'; const { Link } = Anchor; const App: React.FC = () => { + const topRef = React.useRef(null); const [targetOffset, setTargetOffset] = useState(undefined); useEffect(() => { - setTargetOffset(window.innerHeight / 2); + setTargetOffset(topRef.current?.clientHeight); }, []); return ( - - - - - - - - +
+ + +
+ Part 1 +
+
+ Part 2 +
+
+ Part 3 +
+ + + + + + + + + + +
+
Fixed Top Block
+
+
); }; diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index ef91c2b1ad..b8a4422fdc 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -22,11 +22,11 @@ For displaying anchor hyperlinks on page and jumping between them. ## Examples -Basic +Basic Static Anchor Customize the onClick event Customize the anchor highlight -Set Anchor scroll offset +Set Anchor scroll offset Listening for anchor link change ## API diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index bbad12aa92..dc9d863fc2 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -23,11 +23,11 @@ group: ## 代码演示 -基本 +基本 静态位置 自定义 onClick 事件 自定义锚点高亮 -设置锚点滚动偏移量 +设置锚点滚动偏移量 监听锚点链接改变 ## API From 2d5c8fe40824c9413d18ba03aac6a06af098d715 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 12 Dec 2022 20:36:35 +0800 Subject: [PATCH 13/13] fix: radio align (#39476) * fix: radio align * chore: code clean * fix: align-self center * chore: code clean * chore: code clean --- components/radio/style/index.tsx | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 25d09dc029..a942061c9a 100644 --- a/components/radio/style/index.tsx +++ b/components/radio/style/index.tsx @@ -68,7 +68,6 @@ const getRadioBasicStyle: GenerateStyle = (token) => { componentCls, radioWrapperMarginRight, radioCheckedColor, - radioTop, radioSize, motionDurationSlow, motionDurationMid, @@ -135,10 +134,10 @@ const getRadioBasicStyle: GenerateStyle = (token) => { [componentCls]: { ...resetComponent(token), position: 'relative', - insetBlockStart: radioTop, display: 'inline-block', outline: 'none', cursor: 'pointer', + alignSelf: 'center', }, [`${componentCls}-wrapper:hover &, @@ -487,8 +486,6 @@ export default genComponentStyleHook('Radio', (token) => { controlItemBgActiveDisabled, colorTextDisabled, colorBgContainer, - fontSize, - lineHeight, fontSizeLG, controlOutline, colorPrimaryHover, @@ -506,7 +503,6 @@ export default genComponentStyleHook('Radio', (token) => { const radioButtonFocusShadow = radioFocusShadow; const radioSize = fontSizeLG; - const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2; const dotPadding = 4; // Fixed value const radioDotDisabledSize = radioSize - dotPadding * 2; const radioDotSize = wireframe ? radioDotDisabledSize : radioSize - (dotPadding + lineWidth) * 2; @@ -524,7 +520,6 @@ export default genComponentStyleHook('Radio', (token) => { radioFocusShadow, radioButtonFocusShadow, radioSize, - radioTop, radioDotSize, radioDotDisabledSize, radioCheckedColor,