From 7e1e6d8e73367ebfb2285205e301d2a78be4fb42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Wed, 30 Aug 2023 09:53:18 +0800 Subject: [PATCH 1/9] chore: fix overview search (#44523) --- .../builtins/ComponentOverview/index.tsx | 86 ++++++++++--------- 1 file changed, 45 insertions(+), 41 deletions(-) diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx index 2347962cb1..6582b05f5b 100644 --- a/.dumi/theme/builtins/ComponentOverview/index.tsx +++ b/.dumi/theme/builtins/ComponentOverview/index.tsx @@ -1,57 +1,61 @@ import React, { memo, useContext, useMemo, useRef, useState } from 'react'; import type { CSSProperties } from 'react'; -import { Link, useIntl, useSidebarData, useLocation } from 'dumi'; -import { createStyles, useTheme } from 'antd-style'; -import debounce from 'lodash/debounce'; import { SearchOutlined } from '@ant-design/icons'; -import { Card, Col, Divider, Input, Row, Space, Tag, Typography, Affix } from 'antd'; +import { Affix, Card, Col, Divider, Input, Row, Space, Tag, Typography } from 'antd'; +import { createStyles, useTheme } from 'antd-style'; +import { Link, useIntl, useLocation, useSidebarData } from 'dumi'; +import debounce from 'lodash/debounce'; + +import SiteContext from '../../slots/SiteContext'; import type { Component } from './ProComponentsList'; import proComponentsList from './ProComponentsList'; -import SiteContext from '../../slots/SiteContext'; const useStyle = createStyles(({ token, css }) => ({ componentsOverviewGroupTitle: css` - margin-bottom: 24px !important; - `, + margin-bottom: 24px !important; + `, componentsOverviewTitle: css` - overflow: hidden; - color: ${token.colorTextHeading}; - text-overflow: ellipsis; - `, + overflow: hidden; + color: ${token.colorTextHeading}; + text-overflow: ellipsis; + `, componentsOverviewImg: css` - display: flex; - align-items: center; - justify-content: center; - height: 152px; - `, + display: flex; + align-items: center; + justify-content: center; + height: 152px; + `, componentsOverviewCard: css` - cursor: pointer; - transition: all 0.5s; - &:hover { - box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008; - } - `, + cursor: pointer; + transition: all 0.5s; + &:hover { + box-shadow: + 0 6px 16px -8px #00000014, + 0 9px 28px #0000000d, + 0 12px 48px 16px #00000008; + } + `, componentsOverviewAffix: css` - display: flex; - transition: all 0.3s; - justify-content: space-between; - `, + display: flex; + transition: all 0.3s; + justify-content: space-between; + `, componentsOverviewSearch: css` - padding: 0; - .anticon-search { - color: ${token.colorTextDisabled}; - } - `, + padding: 0; + .anticon-search { + color: ${token.colorTextDisabled}; + } + `, componentsOverviewContent: css` - &:empty:after { - display: block; - padding: 16px 0 40px; - color: ${token.colorTextDisabled}; - text-align: center; - border-bottom: 1px solid ${token.colorSplit}; - content: 'Not Found'; - } - `, + &:empty:after { + display: block; + padding: 16px 0 40px; + color: ${token.colorTextDisabled}; + text-align: center; + border-bottom: 1px solid ${token.colorSplit}; + content: 'Not Found'; + } + `, })); const onClickCard = (pathname: string) => { @@ -107,7 +111,7 @@ const Overview: React.FC = () => { const onKeyDown: React.KeyboardEventHandler = (event) => { if (event.keyCode === 13 && search.trim().length) { - sectionRef.current?.querySelector('.components-overview-card')?.click(); + sectionRef.current?.querySelector(`.${styles.componentsOverviewCard}`)?.click(); } }; From e88581c798fe5885ccf5838086358fd0ad4d0398 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=92=B2=E5=A5=88Sakina?= <59400654+fz6m@users.noreply.github.com> Date: Wed, 30 Aug 2023 11:59:55 +0800 Subject: [PATCH 2/9] chore: migrate rome to biome (#44522) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: migrate rome to biome * Update package.json Co-authored-by: afc163 Signed-off-by: 咲奈Sakina <59400654+fz6m@users.noreply.github.com> --------- Signed-off-by: 咲奈Sakina <59400654+fz6m@users.noreply.github.com> Co-authored-by: afc163 --- rome.json => biome.json | 1 + package.json | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) rename rome.json => biome.json (80%) diff --git a/rome.json b/biome.json similarity index 80% rename from rome.json rename to biome.json index 618edc3e25..9bf6ce31fd 100644 --- a/rome.json +++ b/biome.json @@ -1,4 +1,5 @@ { + "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json", "formatter": { "enabled": true, "ignore": ["./dist/*", "./es/**/*", "./lib/**/*", "_site/**/*"], diff --git a/package.json b/package.json index 95e487e14e..d1f6d54e9c 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "pre-publish": "npm run test-all -- --skip-build && node ./scripts/pre-publish-notice.js", "prettier": "prettier -c --write **/* --cache", "pub": "npm run version && npm run collect-token-statistic && npm run token-meta && antd-tools run pub", - "rome:format": "rome format --write .", + "biome:format": "biome format --write .", "prepublishOnly": "antd-tools run guard", "postpublish": "node ./scripts/post-script.js", "site": "dumi build && cp .surgeignore _site", @@ -291,7 +291,7 @@ "remark-cli": "^11.0.0", "remark-lint": "^9.0.0", "remark-preset-lint-recommended": "^6.0.0", - "rome": "12.1.3-nightly.f65b0d9", + "@biomejs/biome": "^1.0.0", "semver": "^7.3.5", "simple-git": "^3.0.0", "size-limit": "^8.1.0", @@ -329,7 +329,7 @@ "mode": "npm" }, "lint-staged": { - "*.{ts,tsx,js,jsx}": "rome format --write", + "*.{ts,tsx,js,jsx}": "biome format --write", "*.{json,less,md}": "prettier --ignore-unknown --write" } } From 3f148d9112c7d64c7f4a78b9871e06b74674350f Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Aug 2023 23:02:35 +0800 Subject: [PATCH 3/9] docs: add help text for token customization --- .../builtins/ComponentTokenTable/index.tsx | 42 ++++++++++++++++--- components/anchor/index.zh-CN.md | 2 +- components/app/index.zh-CN.md | 7 ++-- components/auto-complete/index.zh-CN.md | 2 +- components/avatar/index.zh-CN.md | 2 +- components/badge/index.zh-CN.md | 2 +- components/breadcrumb/index.zh-CN.md | 2 +- components/button/index.zh-CN.md | 2 +- components/calendar/index.zh-CN.md | 2 +- components/card/index.zh-CN.md | 2 +- components/carousel/index.zh-CN.md | 2 +- components/cascader/index.zh-CN.md | 2 +- components/checkbox/index.zh-CN.md | 2 +- components/collapse/index.zh-CN.md | 2 +- components/date-picker/index.zh-CN.md | 6 ++- components/descriptions/index.zh-CN.md | 2 +- components/divider/index.zh-CN.md | 2 +- components/drawer/index.zh-CN.md | 2 +- components/dropdown/index.zh-CN.md | 2 +- components/empty/index.zh-CN.md | 2 +- components/float-button/index.zh-CN.md | 2 +- components/form/index.zh-CN.md | 2 +- components/grid/index.zh-CN.md | 2 +- components/icon/index.zh-CN.md | 7 ++-- components/image/index.zh-CN.md | 2 +- components/input-number/index.zh-CN.md | 2 +- components/input/index.zh-CN.md | 2 +- components/layout/index.zh-CN.md | 2 +- components/list/index.zh-CN.md | 2 +- components/mentions/index.zh-CN.md | 2 +- components/menu/index.zh-CN.md | 2 +- components/message/index.zh-CN.md | 2 +- components/modal/index.zh-CN.md | 2 +- components/notification/index.zh-CN.md | 2 +- components/pagination/index.zh-CN.md | 2 +- components/popconfirm/index.zh-CN.md | 2 +- components/popover/index.zh-CN.md | 2 +- components/progress/index.zh-CN.md | 2 +- components/qr-code/index.zh-CN.md | 2 +- components/radio/index.zh-CN.md | 2 +- components/rate/index.zh-CN.md | 2 +- components/result/index.zh-CN.md | 2 +- components/segmented/index.zh-CN.md | 2 +- components/select/index.zh-CN.md | 2 +- components/skeleton/index.zh-CN.md | 2 +- components/slider/index.zh-CN.md | 2 +- components/space/index.zh-CN.md | 2 +- components/spin/index.zh-CN.md | 2 +- components/statistic/index.zh-CN.md | 2 +- components/steps/index.zh-CN.md | 2 +- components/switch/index.zh-CN.md | 2 +- components/table/index.zh-CN.md | 4 +- components/tabs/index.zh-CN.md | 2 +- components/tag/index.zh-CN.md | 2 +- components/time-picker/index.zh-CN.md | 2 +- components/timeline/index.zh-CN.md | 2 +- components/tooltip/index.zh-CN.md | 2 +- components/tour/index.zh-CN.md | 2 +- components/transfer/index.zh-CN.md | 2 +- components/tree-select/index.zh-CN.md | 2 +- components/tree/index.zh-CN.md | 2 +- components/typography/index.zh-CN.md | 2 +- components/upload/index.zh-CN.md | 2 +- components/watermark/index.zh-CN.md | 2 +- 64 files changed, 111 insertions(+), 73 deletions(-) diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index c67edab7b9..54f645583a 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -1,5 +1,6 @@ import { RightOutlined } from '@ant-design/icons'; import { createStyles, css, useTheme } from 'antd-style'; +import Link from '../../common/Link'; import { getDesignToken } from 'antd-token-previewer'; import React, { useMemo, useState } from 'react'; import tokenMeta from 'antd/es/version/token-meta.json'; @@ -18,6 +19,9 @@ const locales = { value: '默认值', componentToken: '组件 Token', globalToken: '全局 Token', + help: '如何定制？', + customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量', + customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改主题变量', }, en: { token: 'Token Name', @@ -26,6 +30,9 @@ const locales = { value: 'Default Value', componentToken: 'Component Token', globalToken: 'Global Token', + help: 'How to customize?', + customizeTokenLink: '/docs/react/customize-theme#customize-design-token', + customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token', }, }; @@ -45,16 +52,32 @@ const useStyle = createStyles(() => ({ transition: all 0.3s; } `, + help: css` + margin-left: 6px; + font-size: 13px; + font-weight: normal; + color: #999; + a { + color: #999; + } + `, })); interface SubTokenTableProps { defaultOpen?: boolean; title: string; + help: React.ReactNode; tokens: string[]; component?: string; } -const SubTokenTable: React.FC = ({ defaultOpen, tokens, title, component }) => { +const SubTokenTable: React.FC = ({ + defaultOpen, + help, + tokens, + title, + component, +}) => { const [, lang] = useLocale(locales); const token = useTheme(); const columns = useColumns(); @@ -105,10 +128,13 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl .filter(Boolean); return ( -
+ <>
setOpen(!open)}> -

{title}

+

+ {title} + ({help}) +

{open && ( @@ -123,7 +149,7 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl /> )} -
+ ); }; @@ -152,11 +178,17 @@ const ComponentTokenTable: React.FC = ({ component }) {tokenMeta.components[component] && ( {locale.help}} tokens={tokenMeta.components[component].map((item) => item.token)} component={component} + defaultOpen /> )} - + {locale.help}} + tokens={mergedGlobalTokens} + /> ); }; diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index fc988e824e..5745c52bb4 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -76,6 +76,6 @@ group: | target | 该属性指定在何处显示链接的资源 | string | - | | | title | 文字内容 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 2be00c5bd5..7d6ee0c970 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -30,8 +30,8 @@ tag: New App 组件通过 `Context` 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。 ```tsx -import { App } from 'antd'; import React from 'react'; +import { App } from 'antd'; const MyPage: React.FC = () => { const { message, notification, modal } = App.useApp(); @@ -103,8 +103,9 @@ export { message, notification, modal }; ```tsx // sub page -import { Button, Space } from 'antd'; import React from 'react'; +import { Button, Space } from 'antd'; + import { message } from './store'; export default () => { @@ -133,6 +134,6 @@ export default () => { | message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 | | notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 7c358bc32f..edd2df6dd9 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -79,7 +79,7 @@ demo: | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md index cf242ff013..1424b00085 100644 --- a/components/avatar/index.zh-CN.md +++ b/components/avatar/index.zh-CN.md @@ -62,6 +62,6 @@ group: | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 | | shape | 设置头像的形状 | `circle` \| `square` | `circle` | 5.8.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 132cec6b25..29b6014c4b 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -70,6 +70,6 @@ group: 数据展示 | root | 设置根元素 | 5.7.0 | | indicator | 设置徽标元素 | 5.7.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index ad95f72632..25754eaf0d 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -131,6 +131,6 @@ function itemRender(item, params, items, paths) { return ; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 46fda89b22..8a8bafce16 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -85,7 +85,7 @@ group: | ---- | ------------ | ----- | | icon | 设置图标元素 | 5.5.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 592b5838cb..dbda79cb72 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -66,7 +66,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA | onPanelChange | 日期面板变化回调 | function(date: Dayjs, mode: string) | - | | | onSelect | 选择日期回调，包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | `info`: 5.6.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 8aff97ab1a..776e76f449 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -76,6 +76,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA | style | 定义容器类名的样式 | CSSProperties | - | | | title | 标题内容 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 2c545c879e..4b53c62f12 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -51,7 +51,7 @@ demo: 更多 API 可参考： -## Design Token +## 主题变量（Design Token） diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 8e371fdfc4..2a2141fcf4 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -123,6 +123,6 @@ interface Option { > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index 727c7d90c2..d55074ba34 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -73,6 +73,6 @@ interface Option { | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index c87916fa67..6a66ce57c6 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -105,6 +105,6 @@ const items: CollapseProps['items'] = [ | key | 对应 activeKey | string \| number | - | | | showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | | -## Design Token +## 主题变量（Design Token） diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index bcb7e655e2..d9f1dc1371 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -58,6 +58,7 @@ demo: ```jsx import 'dayjs/locale/zh-cn'; + import locale from 'antd/es/date-picker/locale/zh_CN'; ; @@ -66,7 +67,9 @@ import locale from 'antd/es/date-picker/locale/zh_CN'; ```jsx // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import dayjs from 'dayjs'; + import 'dayjs/locale/zh-cn'; + import locale from 'antd/locale/zh_CN'; @@ -216,7 +219,7 @@ type GenericFn = (value: Dayjs) => string; export type FormatType = Generic | GenericFn | Array; ``` -## Design Token +## 主题变量（Design Token） @@ -244,6 +247,7 @@ export type FormatType = Generic | GenericFn | Array; ```js import dayjs from 'dayjs'; + import 'dayjs/locale/zh-cn'; import updateLocale from 'dayjs/plugin/updateLocale'; diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index d61a1e9eae..8b5c51a62f 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -103,6 +103,6 @@ const items: DescriptionsProps['items'] = [ > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。 -## Design Token +## 主题变量（Design Token） diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index c5005e4079..50196b3ada 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -42,6 +42,6 @@ group: | style | 分割线样式对象 | CSSProperties | - | | | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | | -## Design Token +## 主题变量（Design Token） diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md index 06ac5808f7..28bdd2a447 100644 --- a/components/drawer/index.zh-CN.md +++ b/components/drawer/index.zh-CN.md @@ -72,6 +72,6 @@ demo: | zIndex | 设置 Drawer 的 `z-index` | number | 1000 | | | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index b460404089..0d2e12f4cb 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -80,7 +80,7 @@ demo: 请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 -## Design Token +## 主题变量（Design Token） diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md index 568a4fb64c..f2f5499fd6 100644 --- a/components/empty/index.zh-CN.md +++ b/components/empty/index.zh-CN.md @@ -66,6 +66,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA } -## Design Token +## 主题变量（Design Token） diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 165cb98726..3b9efdc5e8 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -71,6 +71,6 @@ tag: New | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | | | onClick | 点击按钮的回调函数 | () => void | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index a46c1327c4..df72b0ec72 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -524,7 +524,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); | form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 | | preserve | 是否监视没有对应的 `Form.Item` 的字段 | boolean | false | 5.4.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index 3dbf1c9229..44fcace7b8 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -87,6 +87,6 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index 9d6434e3ef..f9274c2cc7 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -103,8 +103,8 @@ getTwoToneColor(); // #eb2f96 ```jsx import React from 'react'; -import ReactDOM from 'react-dom/client'; import { createFromIconfontCN } from '@ant-design/icons'; +import ReactDOM from 'react-dom/client'; const MyIcon = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成 @@ -152,9 +152,10 @@ module.exports = { ```jsx import React from 'react'; -import ReactDOM from 'react-dom/client'; import Icon from '@ant-design/icons'; import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径 +import ReactDOM from 'react-dom/client'; + // in create-react-app: // import { ReactComponent as MessageSvg } from 'path/to/message.svg'; @@ -171,6 +172,6 @@ ReactDOM.createRoot(mountNode).render(); | style | 计算后的 `svg` 元素样式 | CSSProperties | - | | | width | `svg` 元素宽度 | string \| number | `1em` | | -## Design Token +## 主题变量（Design Token） diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 197b3a0054..4b4669867a 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -162,6 +162,6 @@ type TransformAction = } ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 243cbefb0c..7f6b2c5382 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -71,7 +71,7 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 21f46a9e0e..bdf1e7ebbc 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -141,7 +141,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el | textarea | `textarea` 元素 | 5.4.0 | | count | 文字计数元素 | 5.4.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md index 7d7527bd6b..414358ccfb 100644 --- a/components/layout/index.zh-CN.md +++ b/components/layout/index.zh-CN.md @@ -131,6 +131,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA } ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index e7d26b9c0d..8e7aa1c5e6 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -92,6 +92,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA | description | 列表元素的描述内容 | ReactNode | - | | | title | 列表元素的标题 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md index cd9bb58041..11136657e2 100644 --- a/components/mentions/index.zh-CN.md +++ b/components/mentions/index.zh-CN.md @@ -92,6 +92,6 @@ return ( | className | css 类名 | string | - | | style | 选项样式 | React.CSSProperties | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 6440e3c897..3321db0252 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -146,6 +146,6 @@ Menu 初始化时会先全部渲染，然后根据宽度裁剪内容。当处于 ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index b140e999dc..9fcf97ac22 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -112,7 +112,7 @@ message.config({ | rtl | 是否开启 RTL 模式 | boolean | false | | | top | 消息距离顶部的位置 | number | 8 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index a293e7b146..1cc62dd224 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -181,7 +181,7 @@ return
{contextHolder}
; const confirmed = await modal.confirm({ ... }); ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 53bdfb4e08..cc84cfccd8 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -110,7 +110,7 @@ notification.config({ | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | | | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index 7085ca1589..cd390892df 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -60,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA | onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | | | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 7f289f4b01..743256bbb9 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -52,7 +52,7 @@ demo: 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 27ded634f5..218e67f144 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -45,7 +45,7 @@ demo: 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 -## Design Token +## 主题变量（Design Token） diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index 646c1ecdc6..4e8a4d6cba 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -77,6 +77,6 @@ demo: | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - | | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index b14cd3b2aa..1e31634998 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -53,7 +53,7 @@ tag: New | status | 二维码状态 | `active \| expired \| loading ` | `active` | | onRefresh | 点击"点击刷新"的回调 | `() => void` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index f7c35d6f87..4a9d2ef1dc 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -74,6 +74,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md index cb0b429363..d554adbf53 100644 --- a/components/rate/index.zh-CN.md +++ b/components/rate/index.zh-CN.md @@ -58,6 +58,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md index afb3d7bff3..1867fb5835 100644 --- a/components/result/index.zh-CN.md +++ b/components/result/index.zh-CN.md @@ -38,6 +38,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA | subTitle | subTitle 文字 | ReactNode | - | | title | title 文字 | ReactNode | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index c38be07ee8..8962c30fe5 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -50,6 +50,6 @@ demo: | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | | | value | 当前选中的值 | string \| number | | | -## Design Token +## 主题变量（Design Token） diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 4e4937f9c6..1dd288826d 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -136,7 +136,7 @@ demo: | key | Key | string | - | | | label | 组名 | string \| React.Element | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md index c5b12708c1..3b670bbbc8 100644 --- a/components/skeleton/index.zh-CN.md +++ b/components/skeleton/index.zh-CN.md @@ -79,6 +79,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA | active | 是否展示动画效果 | boolean | false | | size | 设置输入框的大小 | `large` \| `small` \| `default` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index 438a12a56b..1bf140a85f 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -80,6 +80,6 @@ demo: | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md index 1c3f05aea4..6bc6b20114 100644 --- a/components/space/index.zh-CN.md +++ b/components/space/index.zh-CN.md @@ -81,6 +81,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA | ---- | --------------------- | ----- | | item | 设置 `Space` 包裹的子组件 | 5.6.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index 47eefecae4..ad3f977fca 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -45,6 +45,6 @@ demo: 你可以自定义全局默认 Spin 的元素。 -## Design Token +## 主题变量（Design Token） diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index 363b491563..ec0224fcd1 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -58,6 +58,6 @@ demo: | onFinish | 倒计时完成时触发 | () => void | - | | | onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index 768fdf5546..596915b0f2 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -84,6 +84,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA | subTitle | 子标题 | ReactNode | - | | | title | 标题 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 51402a7f8f..386829a6a3 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -50,6 +50,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 4b81b5fe7f..c85414db13 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -290,9 +290,9 @@ const columns = [ ## 在 TypeScript 中使用 ```tsx +import React from 'react'; import { Table } from 'antd'; import type { ColumnsType } from 'antd/es/table'; -import React from 'react'; interface User { key: number; @@ -329,7 +329,7 @@ export default Demo; TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index e6f60916bb..0a76a2d7c9 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -83,6 +83,6 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | label | 选项卡头显示文字 | ReactNode | - | | children | 选项卡头显示内容 | ReactNode | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index 2898ec49b8..f2706c2f2f 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -54,6 +54,6 @@ demo: | checked | 设置标签的选中状态 | boolean | false | | onChange | 点击标签时触发的回调 | (checked) => void | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 07364a66ea..1702aae787 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -121,7 +121,7 @@ type RangeDisabledTime = ( }; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index d25d9d7f0a..8879f4ef46 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -70,6 +70,6 @@ return ( | children | 设置内容 | ReactNode | - | | position | 自定义节点位置 | `left` \| `right` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index f0de98cdfc..23d538f7e5 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -63,7 +63,7 @@ demo: | zIndex | 设置 Tooltip 的 `z-index` | number | - | | | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md index 3e09e4d85d..348293ee8b 100644 --- a/components/tour/index.zh-CN.md +++ b/components/tour/index.zh-CN.md @@ -64,6 +64,6 @@ tag: New | prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | | | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 4a61c6304b..555549f657 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -97,7 +97,7 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数 return record.uid} />; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 00a15d34dd..8c2fbd8b21 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -110,7 +110,7 @@ demo: | title | 树节点显示的内容 | ReactNode | `---` | | | value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index c4d985bdaf..58fc9db305 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -126,7 +126,7 @@ demo: | --- | --- | | scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 | -## Design Token +## 主题变量（Design Token） diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index c9af276415..8ef789c95d 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -156,7 +156,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 | | onExpand | 点击展开时的回调 | function(event) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 8a2cd417cd..08f2ede318 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -123,7 +123,7 @@ demo: 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。 -## Design Token +## 主题变量（Design Token） diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md index 7fbe6b8947..d68a6d031c 100644 --- a/components/watermark/index.zh-CN.md +++ b/components/watermark/index.zh-CN.md @@ -54,7 +54,7 @@ tag: New | fontFamily | 字体类型 | string | sans-serif | | | fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal | | -## Design Token +## 主题变量（Design Token） From a265257e7dec17bcb178fc3af535525d706d0b12 Mon Sep 17 00:00:00 2001 From: AKing <827088092@qq.com> Date: Wed, 30 Aug 2023 23:24:19 +0800 Subject: [PATCH 4/9] fix: record the completed length of the last calculation as the transison length (#43058) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: record the completed width of the last calculation as the transition width in the calculation * test: add test case * test: correct test case name * refactor：rename conut to count --------- Co-authored-by: afc163 --- components/typography/Base/Ellipsis.tsx | 7 ++ .../typography/__tests__/ellipsis.test.tsx | 76 ++++++++++++++++++- 2 files changed, 82 insertions(+), 1 deletion(-) diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx index 9e840e3a04..9383e13694 100644 --- a/components/typography/Base/Ellipsis.tsx +++ b/components/typography/Base/Ellipsis.tsx @@ -86,6 +86,8 @@ const Ellipsis: React.FC = ({ const [[startLen, midLen, endLen], setCutLength] = React.useState< [startLen: number, midLen: number, endLen: number] >([0, 0, 0]); + // record last done with ellipsis width + const [lastLen, setLastLen] = React.useState(0); const [walkingState, setWalkingState] = React.useState(NONE); const [singleRowHeight, setSingleRowHeight] = React.useState(0); @@ -98,6 +100,10 @@ const Ellipsis: React.FC = ({ const mergedChildren = React.useMemo(() => { if (!enabledMeasure || walkingState !== DONE_WITH_ELLIPSIS) { + // if has lastLen, use it as temporary width to avoid lots of text to squeeze space. + if (lastLen && walkingState !== DONE_WITHOUT_ELLIPSIS && enabledMeasure) + return children(sliceNodes(nodeList, lastLen), lastLen < totalLen); + return children(nodeList, false); } @@ -153,6 +159,7 @@ const Ellipsis: React.FC = ({ setCutLength([nextStartLen, nextMidLen, nextEndLen]); } else { setWalkingState(DONE_WITH_ELLIPSIS); + setLastLen(midLen); onEllipsis(true); } } diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx index 0306cad46f..e50a47e06d 100644 --- a/components/typography/__tests__/ellipsis.test.tsx +++ b/components/typography/__tests__/ellipsis.test.tsx @@ -45,7 +45,7 @@ describe('Typography.Ellipsis', () => { computeSpy = jest .spyOn(window, 'getComputedStyle') - .mockImplementation(() => ({ fontSize: 12 } as unknown as CSSStyleDeclaration)); + .mockImplementation(() => ({ fontSize: 12 }) as unknown as CSSStyleDeclaration); }); afterEach(() => { @@ -433,4 +433,78 @@ describe('Typography.Ellipsis', () => { }); mockRectSpy.mockRestore(); }); + + it('should not throw default dom nodes', async () => { + let currentWidth = 100; + // string count is different with different width + const getLineStrCount = (width: number) => { + const res = width === 100 ? 20 : 17; + return res; + }; + + const ref = React.createRef(); + const resize = (width: number) => { + currentWidth = width; + if (ref.current) triggerResize(ref.current); + }; + + mockRectSpy = spyElementPrototypes(HTMLElement, { + offsetHeight: { + get() { + let html = this.innerHTML; + html = html.replace(/<[^>]*>/g, ''); + const lines = Math.ceil(html.length / getLineStrCount(currentWidth)); + + return lines * 16; + }, + }, + offsetWidth: { + get: () => currentWidth, + }, + getBoundingClientRect() { + let html = this.innerHTML; + html = html.replace(/<[^>]*>/g, ''); + const lines = Math.ceil(html.length / getLineStrCount(currentWidth)); + return { height: lines * 16 }; + }, + }); + + const { container } = render( + + {fullStr} + , + ); + + // hijackings Math.ceil + const originalCeil = Math.ceil; + let hasDefaultStr = false; + + // Math.ceil will be used for ellipsis's calculations; + Math.ceil = (value) => { + const text = container.querySelector('p')?.innerHTML.replace(/<[^>]*>/g, ''); + if (text && !text.includes('...')) { + hasDefaultStr = true; + } + return originalCeil.call(Math, value); + }; + + resize(50); + await waitFakeTimer(20, 1); + // ignore last result + hasDefaultStr = false; + resize(100); + await waitFakeTimer(); + + expect(hasDefaultStr).not.toBeTruthy(); + // reset + mockRectSpy.mockRestore(); + Math.ceil = originalCeil; + }); }); From d0cc758d0e5110ea960c070c3bef8381d8e19149 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: Thu, 31 Aug 2023 09:37:51 +0800 Subject: [PATCH 5/9] fix: Form sm 24 not working (#44541) * fix: Form sm 24 not working * chore: comment it --- components/form/style/index.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/components/form/style/index.ts b/components/form/style/index.ts index 66e435054a..ae82154bf8 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -323,7 +323,7 @@ const genFormItemStyle: GenerateStyle = (token) => { }; const genHorizontalStyle: GenerateStyle = (token) => { - const { componentCls, formItemCls, rootPrefixCls } = token; + const { componentCls, formItemCls } = token; return { [`${componentCls}-horizontal`]: { @@ -338,9 +338,14 @@ const genHorizontalStyle: GenerateStyle = (token) => { minWidth: 0, }, + // Do not change this to `ant-col-24`! `-24` match all the responsive rules // https://github.com/ant-design/ant-design/issues/32980 - [`${formItemCls}-label.${rootPrefixCls}-col-24 + ${formItemCls}-control`]: { - minWidth: 'unset', + // https://github.com/ant-design/ant-design/issues/34903 + // https://github.com/ant-design/ant-design/issues/44538 + [`${formItemCls}-label[class$='-24'], ${formItemCls}-label[class*='-24 ']`]: { + [`& + ${formItemCls}-control`]: { + minWidth: 'unset', + }, }, }, }; From ae53a452f2da2b25d6c741bbee4e454e35e38208 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Aug 2023 09:48:54 +0800 Subject: [PATCH 6/9] docs: add help text for token customization (#44540) * docs: add help text for token customization * docs: add help text for token customization * docs: add help text for token customization * docs: add help text for token customization --- .../builtins/ComponentTokenTable/index.tsx | 66 +++++++++++++++---- 1 file changed, 54 insertions(+), 12 deletions(-) diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index 54f645583a..7d64eb2d5a 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -1,11 +1,10 @@ -import { RightOutlined } from '@ant-design/icons'; +import { RightOutlined, LinkOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { createStyles, css, useTheme } from 'antd-style'; -import Link from '../../common/Link'; import { getDesignToken } from 'antd-token-previewer'; import React, { useMemo, useState } from 'react'; import tokenMeta from 'antd/es/version/token-meta.json'; import tokenData from 'antd/es/version/token.json'; -import { ConfigProvider, Table } from 'antd'; +import { ConfigProvider, Table, Popover, Typography } from 'antd'; import useLocale from '../../../hooks/useLocale'; import { useColumns } from '../TokenTable'; @@ -21,7 +20,7 @@ const locales = { globalToken: '全局 Token', help: '如何定制？', customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量', - customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改主题变量', + customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改组件变量', }, en: { token: 'Token Name', @@ -30,7 +29,7 @@ const locales = { value: 'Default Value', componentToken: 'Component Token', globalToken: 'Global Token', - help: 'How to customize?', + help: 'How to use?', customizeTokenLink: '/docs/react/customize-theme#customize-design-token', customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token', }, @@ -53,8 +52,8 @@ const useStyle = createStyles(() => ({ } `, help: css` - margin-left: 6px; - font-size: 13px; + margin-left: 8px; + font-size: 12px; font-weight: normal; color: #999; a { @@ -66,16 +65,18 @@ const useStyle = createStyles(() => ({ interface SubTokenTableProps { defaultOpen?: boolean; title: string; - help: React.ReactNode; + helpText: React.ReactNode; + helpLink: string; tokens: string[]; component?: string; } const SubTokenTable: React.FC = ({ defaultOpen, - help, tokens, title, + helpText, + helpLink, component, }) => { const [, lang] = useLocale(locales); @@ -127,13 +128,52 @@ const SubTokenTable: React.FC = ({ }) .filter(Boolean); + const code = component + ? ` + ... +` + : ` + ... +`; + return ( <>
setOpen(!open)}>

{title} - ({help}) + + 
{code}
+ + + {helpText} + + + } + > + + + {helpText} + +

{open && ( @@ -178,7 +218,8 @@ const ComponentTokenTable: React.FC = ({ component }) {tokenMeta.components[component] && ( {locale.help}} + helpText={locale.help} + helpLink={locale.customizeTokenLink} tokens={tokenMeta.components[component].map((item) => item.token)} component={component} defaultOpen @@ -186,7 +227,8 @@ const ComponentTokenTable: React.FC = ({ component }) )} {locale.help}} + helpText={locale.help} + helpLink={locale.customizeComponentTokenLink} tokens={mergedGlobalTokens} /> From a608bfa08a1098280b323cbfc87599c14dac21c2 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 31 Aug 2023 21:23:02 +0800 Subject: [PATCH 7/9] chore: fix form demo error (#44549) * fix: fix form demo error * update snap --- components/form/__tests__/__snapshots__/demo.test.tsx.snap | 1 + components/form/demo/inline-login.tsx | 5 +++-- package.json | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 9f8cd97d21..a8c366ca6f 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -4563,6 +4563,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = ` >