From ca32dd56611ab2bfc44bee4aac80802d3c7f7268 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 9 Jul 2024 10:50:32 +0800 Subject: [PATCH 01/19] chore(style): backticks to single quotes (#49777) --- components/app/demo/basic.tsx | 2 +- components/app/demo/config.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/app/demo/basic.tsx b/components/app/demo/basic.tsx index e7bdcddddf..ec7de9548e 100644 --- a/components/app/demo/basic.tsx +++ b/components/app/demo/basic.tsx @@ -18,7 +18,7 @@ const MyPage = () => { const showNotification = () => { notification.info({ - message: `Notification topLeft`, + message: 'Notification topLeft', description: 'Hello, Ant Design!!', placement: 'topLeft', }); diff --git a/components/app/demo/config.tsx b/components/app/demo/config.tsx index d0efa21cf4..a4b5d431ca 100644 --- a/components/app/demo/config.tsx +++ b/components/app/demo/config.tsx @@ -11,7 +11,7 @@ const MyPage = () => { const showNotification = () => { notification.info({ - message: `Notification`, + message: 'Notification', description: 'Hello, Ant Design!!', }); }; From 17ad651752fa4edd939afe1ee716342748b77a72 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 9 Jul 2024 12:23:00 +0800 Subject: [PATCH 02/19] type(layout-token): headerHeight token support string type (#49780) --- components/layout/style/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/layout/style/index.ts b/components/layout/style/index.ts index 73b39b78fa..457f5d2226 100644 --- a/components/layout/style/index.ts +++ b/components/layout/style/index.ts @@ -28,7 +28,7 @@ export interface ComponentToken { * @desc 顶部高度 * @descEN Height of header */ - headerHeight: number; + headerHeight: number | string; /** * @desc 顶部内边距 * @descEN Padding of header From 5f097729676ed696de15f512608e8c1227e0cec6 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 9 Jul 2024 16:26:35 +0800 Subject: [PATCH 03/19] type: improve tree component assert (#49784) --- components/tree-select/index.tsx | 8 ++++---- components/tree/DirectoryTree.tsx | 2 +- components/tree/Tree.tsx | 6 +++--- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index ea375fecc7..c860bc2a5a 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -264,10 +264,10 @@ const InternalTreeSelect = < hashId, ); - const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => ( + const renderSwitcherIcon: React.FC = (nodeProps) => ( @@ -297,8 +297,8 @@ const InternalTreeSelect = < placement={memoizedPlacement} removeIcon={removeIcon} allowClear={mergedAllowClear} - switcherIcon={renderSwitcherIcon as any} - showTreeIcon={treeIcon as any} + switcherIcon={renderSwitcherIcon as RcTreeSelectProps['switcherIcon']} + showTreeIcon={treeIcon as boolean} notFoundContent={mergedNotFound} getPopupContainer={getPopupContainer || getContextPopupContainer} treeMotion={null} diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx index 7355e3328a..6ccd4c3143 100644 --- a/components/tree/DirectoryTree.tsx +++ b/components/tree/DirectoryTree.tsx @@ -120,7 +120,7 @@ const DirectoryTree: React.ForwardRefRenderFunction // const newState: DirectoryTreeState = {}; // We need wrap this event since some value is not same - const newEvent: any = { + const newEvent = { ...event, selected: true, // Directory selected always true }; diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 29f5bed778..239ecf7453 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -224,10 +224,10 @@ const Tree = React.forwardRef((props, ref) => { return mergedDraggable; }, [draggable]); - const renderSwitcherIcon = (nodeProps: AntTreeNodeProps) => ( + const renderSwitcherIcon: React.FC = (nodeProps) => ( @@ -258,7 +258,7 @@ const Tree = React.forwardRef((props, ref) => { direction={direction} checkable={checkable ? : checkable} selectable={selectable} - switcherIcon={renderSwitcherIcon as any} + switcherIcon={renderSwitcherIcon as RcTreeProps['switcherIcon']} draggable={draggableConfig} > {children} From 512fa21125c6330a1da1c6fb9d674e725bc755e6 Mon Sep 17 00:00:00 2001 From: love-life <75002215+ljw-codeking@users.noreply.github.com> Date: Tue, 9 Jul 2024 16:28:58 +0800 Subject: [PATCH 04/19] fix: table expandable descriptions auto style (#49727) * fix: table expandable descriptions auto style * feat: width edit --- components/table/style/expand.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/table/style/expand.ts b/components/table/style/expand.ts index dc48e1c1c8..119031ace8 100644 --- a/components/table/style/expand.ts +++ b/components/table/style/expand.ts @@ -132,7 +132,7 @@ const genExpandStyle: GenerateStyle = (token) => { table: { flex: 'auto', - width: 'auto', + width: '100%', }, }, }, From ce1721b16993bb843d0dbd160b34dac36f6bfb4c Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 9 Jul 2024 17:27:16 +0800 Subject: [PATCH 05/19] demo: improve button gradient demo (#49786) * demo: improve button gradient demo * demo: improve button gradient demo --- .../__snapshots__/demo-extend.test.ts.snap | 43 +++++---- .../__tests__/__snapshots__/demo.test.ts.snap | 43 +++++---- components/button/demo/linear-gradient.tsx | 96 ++++++++----------- 3 files changed, 93 insertions(+), 89 deletions(-) diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap index 877e29ec6d..92d7ae3f18 100644 --- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2343,11 +2343,34 @@ exports[`renders components/button/demo/linear-gradient.tsx extend context corre class="ant-space-item" > @@ -2355,23 +2378,11 @@ exports[`renders components/button/demo/linear-gradient.tsx extend context corre class="ant-space-item" > - -
-
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap index 84316096f3..c45813f361 100644 --- a/components/button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap @@ -1973,11 +1973,34 @@ exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = ` class="ant-space-item" > @@ -1985,23 +2008,11 @@ exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = ` class="ant-space-item" > - -
-
diff --git a/components/button/demo/linear-gradient.tsx b/components/button/demo/linear-gradient.tsx index 66a8a34f87..bab976965a 100644 --- a/components/button/demo/linear-gradient.tsx +++ b/components/button/demo/linear-gradient.tsx @@ -1,66 +1,48 @@ -import React from 'react'; -import { TinyColor } from '@ctrl/tinycolor'; +import React, { useContext } from 'react'; import { Button, ConfigProvider, Space } from 'antd'; +import { AntDesignOutlined } from '@ant-design/icons'; +import { css } from '@emotion/css'; -const colors1 = ['#6253E1', '#04BEFE']; -const colors2 = ['#fc6076', '#ff9a44', '#ef9d43', '#e75516']; -const colors3 = ['#40e495', '#30dd8a', '#2bb673']; -const getHoverColors = (colors: string[]) => - colors.map((color) => new TinyColor(color).lighten(5).toString()); -const getActiveColors = (colors: string[]) => - colors.map((color) => new TinyColor(color).darken(5).toString()); +const App: React.FC = () => { + const { getPrefixCls } = useContext(ConfigProvider.ConfigContext); + const rootPrefixCls = getPrefixCls(); + const linearGradientButton = css` + &.${rootPrefixCls}-btn-primary:not([disabled]):not(.${rootPrefixCls}-btn-dangerous) { + border-width: 0; -const App: React.FC = () => ( - + > span { + position: relative; + } + + &::before { + content: ''; + background: linear-gradient(135deg, #6253E1, #04BEFE); + position: absolute; + inset: 0; + opacity: 1; + transition: all 0.3s; + border-radius: inherit; + } + + &:hover::before { + opacity: 0; + } + } + `; + return ( - + + + + - - - - - - - -); + ); +}; export default App; From 80a71b14f4ad94a383bf06f43c59f532fab55ad0 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Tue, 9 Jul 2024 17:35:10 +0800 Subject: [PATCH 06/19] demo(table): use TableColumnsType instead of ColumnsType] (#49787) --- components/table/demo/drag-sorting-handler.tsx | 4 ++-- components/table/demo/drag-sorting.tsx | 4 ++-- components/table/index.en-US.md | 4 ++-- components/table/index.zh-CN.md | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/table/demo/drag-sorting-handler.tsx b/components/table/demo/drag-sorting-handler.tsx index c2d4de446b..2b4091f742 100644 --- a/components/table/demo/drag-sorting-handler.tsx +++ b/components/table/demo/drag-sorting-handler.tsx @@ -12,7 +12,7 @@ import { } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; import { Button, Table } from 'antd'; -import type { ColumnsType } from 'antd/es/table'; +import type { TableColumnsType } from 'antd'; interface DataType { key: string; @@ -42,7 +42,7 @@ const DragHandle: React.FC = () => { ); }; -const columns: ColumnsType = [ +const columns: TableColumnsType = [ { key: 'sort', align: 'center', width: 80, render: () => }, { title: 'Name', dataIndex: 'name' }, { title: 'Age', dataIndex: 'age' }, diff --git a/components/table/demo/drag-sorting.tsx b/components/table/demo/drag-sorting.tsx index 4e6ea44298..5e91b775cf 100644 --- a/components/table/demo/drag-sorting.tsx +++ b/components/table/demo/drag-sorting.tsx @@ -10,7 +10,7 @@ import { } from '@dnd-kit/sortable'; import { CSS } from '@dnd-kit/utilities'; import { Table } from 'antd'; -import type { ColumnsType } from 'antd/es/table'; +import type { TableColumnsType } from 'antd'; interface DataType { key: string; @@ -19,7 +19,7 @@ interface DataType { address: string; } -const columns: ColumnsType = [ +const columns: TableColumnsType = [ { title: 'Name', dataIndex: 'name', diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index e8be944f52..5ddd7ee218 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -304,14 +304,14 @@ Properties for row selection. ```tsx import React from 'react'; import { Table } from 'antd'; -import type { ColumnsType } from 'antd/es/table'; +import type { TableColumnsType } from 'antd'; interface User { key: number; name: string; } -const columns: ColumnsType = [ +const columns: TableColumnsType = [ { key: 'name', title: 'Name', diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index a77296bc02..bb51bd1590 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -306,14 +306,14 @@ const columns = [ ```tsx import React from 'react'; import { Table } from 'antd'; -import type { ColumnsType } from 'antd/es/table'; +import type { TableColumnsType } from 'antd'; interface User { key: number; name: string; } -const columns: ColumnsType = [ +const columns: TableColumnsType = [ { key: 'name', title: 'Name', From e666f50878006ae1878039a5bfa1ee3e83fcd825 Mon Sep 17 00:00:00 2001 From: "github-actions[bot]" <41898282+github-actions[bot]@users.noreply.github.com> Date: Wed, 10 Jul 2024 08:32:41 +0800 Subject: [PATCH 07/19] chore: upgrade deps (#49794) Co-authored-by: afc163 <507615+afc163@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e482802164..4b537cae46 100644 --- a/package.json +++ b/package.json @@ -128,7 +128,7 @@ "rc-motion": "^2.9.2", "rc-notification": "~5.6.0", "rc-pagination": "~4.2.0", - "rc-picker": "~4.6.7", + "rc-picker": "~4.6.8", "rc-progress": "~4.0.0", "rc-rate": "~2.13.0", "rc-resize-observer": "^1.4.0", From 4c18036774191caed7b806708966141515144922 Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Wed, 10 Jul 2024 11:56:27 +0800 Subject: [PATCH 08/19] type(formItemLabel): remove unnecessary assert (#49797) * type(formItemLabel): remove unnecessary assert * Update components/form/FormItemLabel.tsx Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: thinkasany <480968828@qq.com> --------- Signed-off-by: thinkasany <480968828@qq.com> Co-authored-by: lijianan <574980606@qq.com> --- components/form/FormItemLabel.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/form/FormItemLabel.tsx b/components/form/FormItemLabel.tsx index cc2434f76a..d8976a9e0e 100644 --- a/components/form/FormItemLabel.tsx +++ b/components/form/FormItemLabel.tsx @@ -93,8 +93,8 @@ const FormItemLabel: React.FC Date: Wed, 10 Jul 2024 16:36:14 +0800 Subject: [PATCH 09/19] fix(descriptions): text overflow (#49803) --- components/descriptions/style/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/descriptions/style/index.ts b/components/descriptions/style/index.ts index 7d97ff1169..da3c5b0563 100644 --- a/components/descriptions/style/index.ts +++ b/components/descriptions/style/index.ts @@ -196,6 +196,7 @@ const genDescriptionStyles: GenerateStyle = (token) => { [`${componentCls}-item-content`]: { display: 'inline-flex', alignItems: 'baseline', + minWidth: 0, }, }, }, From 3f9e711d3b5c902585aef1d7ef721f19b812170f Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Wed, 10 Jul 2024 18:28:11 +0800 Subject: [PATCH 10/19] type(demo): improve type by GetProps util (#49805) * type(demo): improve type by GetProps util * fix lint --- components/input/demo/otp.tsx | 7 ++++--- components/input/demo/search-input.tsx | 4 +++- components/table/demo/row-selection-and-operation.tsx | 5 +++-- 3 files changed, 10 insertions(+), 6 deletions(-) diff --git a/components/input/demo/otp.tsx b/components/input/demo/otp.tsx index 9e70d36b12..51306692df 100644 --- a/components/input/demo/otp.tsx +++ b/components/input/demo/otp.tsx @@ -1,12 +1,13 @@ import React from 'react'; import { Flex, Input, Typography } from 'antd'; -import type { GetProp } from 'antd'; -import type { OTPProps } from 'antd/es/input/OTP'; +import type { GetProps } from 'antd'; + +type OTPProps = GetProps; const { Title } = Typography; const App: React.FC = () => { - const onChange: GetProp = (text) => { + const onChange: OTPProps['onChange'] = (text) => { console.log('onChange:', text); }; diff --git a/components/input/demo/search-input.tsx b/components/input/demo/search-input.tsx index 6af4862451..5e9aa809de 100644 --- a/components/input/demo/search-input.tsx +++ b/components/input/demo/search-input.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { AudioOutlined } from '@ant-design/icons'; import { Input, Space } from 'antd'; -import type { SearchProps } from 'antd/es/input/Search'; +import type { GetProps } from 'antd'; + +type SearchProps = GetProps; const { Search } = Input; diff --git a/components/table/demo/row-selection-and-operation.tsx b/components/table/demo/row-selection-and-operation.tsx index 5f24500853..486e50c395 100644 --- a/components/table/demo/row-selection-and-operation.tsx +++ b/components/table/demo/row-selection-and-operation.tsx @@ -1,7 +1,8 @@ import React, { useState } from 'react'; import { Button, Flex, Table } from 'antd'; -import type { TableColumnsType } from 'antd'; -import type { TableRowSelection } from 'antd/es/table/interface'; +import type { TableColumnsType, TableProps } from 'antd'; + +type TableRowSelection = TableProps['rowSelection']; interface DataType { key: React.Key; From e4c31231eed9c5bee66b008d067a9930bfe38bbb Mon Sep 17 00:00:00 2001 From: thinkasany <480968828@qq.com> Date: Wed, 10 Jul 2024 23:15:06 +0800 Subject: [PATCH 11/19] type(token): height / width support string | number (#49810) * type(token): height / width support string | number * rever --- components/badge/style/index.ts | 4 ++-- components/calendar/style/index.ts | 12 ++++++------ components/card/style/index.ts | 8 ++++---- components/carousel/style/index.ts | 6 +++--- components/cascader/style/index.ts | 6 +++--- components/empty/style/index.ts | 2 +- components/form/style/index.ts | 2 +- components/layout/style/index.ts | 2 +- components/list/style/index.ts | 4 ++-- components/mentions/style/index.ts | 4 ++-- components/menu/style/index.ts | 14 +++++++------- components/modal/style/index.ts | 4 ++-- components/notification/style/index.ts | 4 ++-- components/popover/style/index.ts | 6 +++--- components/result/style/index.ts | 4 ++-- components/skeleton/style/index.ts | 2 +- components/slider/style/index.ts | 4 ++-- components/spin/style/index.ts | 2 +- components/steps/style/index.ts | 2 +- components/switch/style/index.ts | 8 ++++---- components/table/style/index.ts | 6 +++--- components/tabs/style/index.ts | 6 +++--- components/timeline/style/index.ts | 4 ++-- components/tour/style/index.ts | 4 ++-- components/transfer/style/index.ts | 12 ++++++------ 25 files changed, 66 insertions(+), 66 deletions(-) diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index ab785e6647..e4bb83f70c 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -17,12 +17,12 @@ export interface ComponentToken { * @desc 徽标高度 * @descEN Height of badge */ - indicatorHeight: number; + indicatorHeight: number | string; /** * @desc 小号徽标高度 * @descEN Height of small badge */ - indicatorHeightSM: number; + indicatorHeightSM: number | string; /** * @desc 点状徽标尺寸 * @descEN Size of dot badge diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index e4d126a49c..43552cbdd4 100644 --- a/components/calendar/style/index.ts +++ b/components/calendar/style/index.ts @@ -16,17 +16,17 @@ export interface ComponentToken { * @desc 年选择器宽度 * @descEN Width of year select */ - yearControlWidth: number; + yearControlWidth: number | string; /** * @desc 月选择器宽度 * @descEN Width of month select */ - monthControlWidth: number; + monthControlWidth: number | string; /** * @desc 迷你日历内容高度 * @descEN Height of mini calendar content */ - miniContentHeight: number; + miniContentHeight: number | string; /** * @desc 完整日历背景色 * @descEN Background color of full calendar @@ -46,9 +46,9 @@ export interface ComponentToken { interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelComponentToken { calendarCls: string; - dateValueHeight: number; - weekHeight: number; - dateContentHeight: number; + dateValueHeight: number | string; + weekHeight: number | string; + dateContentHeight: number | string; } export const genCalendarStyles = (token: CalendarToken): CSSObject => { diff --git a/components/card/style/index.ts b/components/card/style/index.ts index 72a113accd..ad515dc647 100644 --- a/components/card/style/index.ts +++ b/components/card/style/index.ts @@ -15,22 +15,22 @@ export interface ComponentToken { * @desc 卡片头部文字大小 * @descEN Font size of card header */ - headerFontSize: number; + headerFontSize: number | string; /** * @desc 小号卡片头部文字大小 * @descEN Font size of small card header */ - headerFontSizeSM: number; + headerFontSizeSM: number | string; /** * @desc 卡片头部高度 * @descEN Height of card header */ - headerHeight: number; + headerHeight: number | string; /** * @desc 小号卡片头部高度 * @descEN Height of small card header */ - headerHeightSM: number; + headerHeightSM: number | string; /** * @desc 操作区背景色 * @descEN Background color of card actions diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts index 247481c00e..f3d92ee8c0 100644 --- a/components/carousel/style/index.ts +++ b/components/carousel/style/index.ts @@ -9,12 +9,12 @@ export interface ComponentToken { * @desc 指示点宽度 * @descEN Width of indicator */ - dotWidth: number; + dotWidth: number | string; /** * @desc 指示点高度 * @descEN Height of indicator */ - dotHeight: number; + dotHeight: number | string; /** * @desc 指示点之间的间距 * @descEN gap between indicator @@ -31,7 +31,7 @@ export interface ComponentToken { * @desc 激活态指示点宽度 * @descEN Width of active indicator */ - dotActiveWidth: number; + dotActiveWidth: number | string; /** * @desc 切换箭头大小 * @descEN Size of arrows diff --git a/components/cascader/style/index.ts b/components/cascader/style/index.ts index 7b03acd1a1..cf7b251b55 100644 --- a/components/cascader/style/index.ts +++ b/components/cascader/style/index.ts @@ -11,17 +11,17 @@ export interface ComponentToken { * @desc 选择器宽度 * @descEN Width of Cascader */ - controlWidth: number; + controlWidth: number | string; /** * @desc 选项宽度 * @descEN Width of item */ - controlItemWidth: number; + controlItemWidth: number | string; /** * @desc 下拉菜单高度 * @descEN Height of dropdown */ - dropdownHeight: number; + dropdownHeight: number | string; /** * @desc 选项选中时背景色 * @descEN Background color of selected item diff --git a/components/empty/style/index.ts b/components/empty/style/index.ts index 407efb8b33..cab541407c 100644 --- a/components/empty/style/index.ts +++ b/components/empty/style/index.ts @@ -11,7 +11,7 @@ interface EmptyToken extends FullToken<'Empty'> { emptyImgCls: string; emptyImgHeight: number | string; emptyImgHeightSM: number | string; - emptyImgHeightMD: number; + emptyImgHeightMD: number | string; } // ============================== Shared ============================== diff --git a/components/form/style/index.ts b/components/form/style/index.ts index ab41b07a1b..e2bfab692d 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -29,7 +29,7 @@ export interface ComponentToken { * @desc 标签高度 * @descEN Label height */ - labelHeight: number; + labelHeight: number | string; /** * @desc 标签冒号前间距 * @descEN Label colon margin-inline-start diff --git a/components/layout/style/index.ts b/components/layout/style/index.ts index 457f5d2226..33071f490c 100644 --- a/components/layout/style/index.ts +++ b/components/layout/style/index.ts @@ -58,7 +58,7 @@ export interface ComponentToken { * @desc 侧边栏开关高度 * @descEN Height of sider trigger */ - triggerHeight: number; + triggerHeight: number | string; /** * @desc 侧边栏开关背景色 * @descEN Background Color of sider trigger diff --git a/components/list/style/index.ts b/components/list/style/index.ts index 96898832bb..390f23e84c 100644 --- a/components/list/style/index.ts +++ b/components/list/style/index.ts @@ -11,7 +11,7 @@ export interface ComponentToken { * @desc 内容宽度 * @descEN Width of content */ - contentWidth: number; + contentWidth: number | string; /** * @desc 大号列表项内间距 * @descEN Padding of large item @@ -66,7 +66,7 @@ export interface ComponentToken { interface ListToken extends FullToken<'List'> { listBorderedCls: string; - minHeight: number; + minHeight: number | string; } const genBorderedStyle = (token: ListToken): CSSObject => { diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts index 919c7e091b..b2ac18dff9 100644 --- a/components/mentions/style/index.ts +++ b/components/mentions/style/index.ts @@ -27,12 +27,12 @@ export interface ComponentToken extends SharedComponentToken { * @desc 弹层高度 * @descEN Height of popup */ - dropdownHeight: number; + dropdownHeight: number | string; /** * @desc 菜单项高度 * @descEN Height of menu item */ - controlItemWidth: number; + controlItemWidth: number | string; } type MentionsToken = FullToken<'Mentions'> & diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts index 3c2655262a..521ca0e3c1 100644 --- a/components/menu/style/index.ts +++ b/components/menu/style/index.ts @@ -19,7 +19,7 @@ export interface ComponentToken { * @desc 弹出菜单的宽度 * @descEN Width of popup menu */ - dropdownWidth: number; + dropdownWidth: number | string; /** * @desc 弹出菜单的 z-index * @descEN z-index of popup menu @@ -205,12 +205,12 @@ export interface ComponentToken { // Ink Bar /** @deprecated Use `activeBarWidth` instead */ - colorActiveBarWidth: number; + colorActiveBarWidth: number | string; /** * @desc 菜单项指示条宽度 * @descEN Width of menu item active bar */ - activeBarWidth: number; + activeBarWidth: number | string; /** @deprecated Use `activeBarHeight` instead */ colorActiveBarHeight: number; @@ -226,7 +226,7 @@ export interface ComponentToken { * @desc 菜单项指示条边框宽度 * @descEN Border width of menu item active bar */ - activeBarBorderWidth: number; + activeBarBorderWidth: number | string; /** * @desc 菜单项横向外间距 @@ -247,12 +247,12 @@ export interface ComponentToken { * @desc 菜单项高度 * @descEN Height of menu item */ - itemHeight: number; + itemHeight: number | string; /** * @desc 收起后的宽度 * @descEN Width when collapsed */ - collapsedWidth: number; + collapsedWidth: number | string; /** * @desc 弹出框背景色 * @descEN Background color of popup @@ -366,7 +366,7 @@ export interface ComponentToken { */ darkDangerItemActiveBg: string; /** @internal */ - itemWidth: string; + itemWidth: number | string; } export interface MenuToken extends FullToken<'Menu'> { diff --git a/components/modal/style/index.ts b/components/modal/style/index.ts index bcd2882608..d29679b9a4 100644 --- a/components/modal/style/index.ts +++ b/components/modal/style/index.ts @@ -20,7 +20,7 @@ export interface ComponentToken { * @desc 标题行高 * @descEN Line height of title */ - titleLineHeight: number; + titleLineHeight: number | string; /** * @desc 标题字体大小 * @descEN Font size of title @@ -73,7 +73,7 @@ export interface ModalToken extends FullToken<'Modal'> { modalHeaderHeight: number | string; modalFooterBorderColorSplit: string; modalFooterBorderStyle: string; - modalFooterBorderWidth: number; + modalFooterBorderWidth: number | string; modalCloseIconColor: string; modalCloseIconHoverColor: string; modalCloseBtnSize: number | string; diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index 2bbc3356ab..6baad8ea55 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -20,11 +20,11 @@ export interface ComponentToken { * @desc 提醒框宽度 * @descEN Width of Notification */ - width: number; + width: number | string; } export interface NotificationToken extends FullToken<'Notification'> { - animationMaxHeight: number; + animationMaxHeight: number | string; notificationBg: string; notificationPadding: string; notificationPaddingVertical: number; diff --git a/components/popover/style/index.ts b/components/popover/style/index.ts index 69b273627b..2cbaf02cf0 100644 --- a/components/popover/style/index.ts +++ b/components/popover/style/index.ts @@ -18,18 +18,18 @@ export interface ComponentToken extends ArrowToken, ArrowOffsetToken { * @desc 气泡卡片宽度 * @descEN Width of Popover */ - width?: number; + width?: number | string; /** * @deprecated Please use `titleMinWidth` instead * @desc 气泡卡片最小宽度 * @descEN Min width of Popover */ - minWidth?: number; + minWidth?: number | string; /** * @desc 气泡卡片标题最小宽度 * @descEN Min width of Popover title */ - titleMinWidth: number; + titleMinWidth: number | string; /** * @desc 气泡卡片 z-index * @descEN z-index of Popover diff --git a/components/result/style/index.ts b/components/result/style/index.ts index b8a454c04a..7d1d793a7d 100644 --- a/components/result/style/index.ts +++ b/components/result/style/index.ts @@ -29,8 +29,8 @@ export interface ComponentToken { } interface ResultToken extends FullToken<'Result'> { - imageWidth: number; - imageHeight: number; + imageWidth: number | string; + imageHeight: number | string; resultInfoIconColor: string; resultSuccessIconColor: string; resultWarningIconColor: string; diff --git a/components/skeleton/style/index.ts b/components/skeleton/style/index.ts index 934202d802..7a225353a6 100644 --- a/components/skeleton/style/index.ts +++ b/components/skeleton/style/index.ts @@ -24,7 +24,7 @@ export type ComponentToken = { * @desc 标题骨架屏高度 * @descEN Height of title skeleton */ - titleHeight: number; + titleHeight: number | string; /** * @desc 骨架屏圆角 * @descEN Border radius of skeleton diff --git a/components/slider/style/index.ts b/components/slider/style/index.ts index 164d4d6d73..4d972e486a 100644 --- a/components/slider/style/index.ts +++ b/components/slider/style/index.ts @@ -38,12 +38,12 @@ export interface ComponentToken { * @desc 滑块边框宽度 * @descEN Border width of handle */ - handleLineWidth: number; + handleLineWidth: number | string; /** * @desc 滑块边框宽度（悬浮态） * @descEN Border width of handle when hover */ - handleLineWidthHover: number; + handleLineWidthHover: number | string; /** * @desc 滑块圆点尺寸 * @descEN Size of dot diff --git a/components/spin/style/index.ts b/components/spin/style/index.ts index f96c53f68e..e047acf1e3 100644 --- a/components/spin/style/index.ts +++ b/components/spin/style/index.ts @@ -10,7 +10,7 @@ export interface ComponentToken { * @desc 内容区域高度 * @descEN Height of content area */ - contentHeight: number; + contentHeight: number | string; /** * @desc 加载图标尺寸 * @descEN Loading icon size diff --git a/components/steps/style/index.ts b/components/steps/style/index.ts index 1c1e05d607..352de57230 100644 --- a/components/steps/style/index.ts +++ b/components/steps/style/index.ts @@ -81,7 +81,7 @@ export interface ComponentToken { * @desc 标题行高 * @descEN Line height of title */ - titleLineHeight: number; + titleLineHeight: number | string; /** * @internal */ diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts index 4bb34c53a7..6af3a71668 100644 --- a/components/switch/style/index.ts +++ b/components/switch/style/index.ts @@ -11,22 +11,22 @@ export interface ComponentToken { * @desc 开关高度 * @descEN Height of Switch */ - trackHeight: number; + trackHeight: number | string; /** * @desc 小号开关高度 * @descEN Height of small Switch */ - trackHeightSM: number; + trackHeightSM: number | string; /** * @desc 开关最小宽度 * @descEN Minimum width of Switch */ - trackMinWidth: number; + trackMinWidth: number | string; /** * @desc 小号开关最小宽度 * @descEN Minimum width of small Switch */ - trackMinWidthSM: number; + trackMinWidthSM: number | string; /** * @desc 开关内边距 * @descEN Padding of Switch diff --git a/components/table/style/index.ts b/components/table/style/index.ts index 0e675f05ad..d41d2731d6 100644 --- a/components/table/style/index.ts +++ b/components/table/style/index.ts @@ -166,7 +166,7 @@ export interface ComponentToken { * @desc 选择列宽度 * @descEN Width of selection column */ - selectionColumnWidth: number; + selectionColumnWidth: number | string; /** * @desc Sticky 模式下滚动条背景色 * @descEN Background of sticky scrollbar @@ -214,14 +214,14 @@ export interface TableToken extends FullToken<'Table'> { tableFixedHeaderSortActiveBg: string; tableHeaderFilterActiveBg: string; tableFilterDropdownBg: string; - tableFilterDropdownHeight: number; + tableFilterDropdownHeight: number | string; tableRowHoverBg: string; tableSelectedRowBg: string; tableSelectedRowHoverBg: string; tableFontSizeMiddle: number; tableFontSizeSmall: number; - tableSelectionColumnWidth: number; + tableSelectionColumnWidth: number | string; tableExpandIconBg: string; tableExpandColumnWidth: number | string; tableExpandedRowBg: string; diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index b88be98550..a9c3d18df9 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -21,7 +21,7 @@ export interface ComponentToken { * @desc 卡片标签页高度 * @descEN Height of card tab */ - cardHeight: number; + cardHeight: number | string; /** * @desc 卡片标签页内间距 * @descEN Padding of card tab @@ -134,8 +134,8 @@ export interface TabsToken extends FullToken<'Tabs'> { dropdownEdgeChildVerticalPadding: number; tabsNavWrapPseudoWidth: number; tabsActiveTextShadow: string; - tabsDropdownHeight: number; - tabsDropdownWidth: number; + tabsDropdownHeight: number | string; + tabsDropdownWidth: number | string; tabsHorizontalItemMargin: string; tabsHorizontalItemMarginRTL: string; } diff --git a/components/timeline/style/index.ts b/components/timeline/style/index.ts index ff219c63bc..9bc8485119 100644 --- a/components/timeline/style/index.ts +++ b/components/timeline/style/index.ts @@ -15,12 +15,12 @@ export interface ComponentToken { * @desc 轨迹宽度 * @descEN Line width */ - tailWidth: number; + tailWidth: number | string; /** * @desc 节点边框宽度 * @descEN Border width of node */ - dotBorderWidth: number; + dotBorderWidth: number | string; /** * @desc 节点背景色 * @descEN Background color of node diff --git a/components/tour/style/index.ts b/components/tour/style/index.ts index 43695a3db3..2a4b76d14d 100644 --- a/components/tour/style/index.ts +++ b/components/tour/style/index.ts @@ -37,8 +37,8 @@ export interface ComponentToken extends ArrowOffsetToken, ArrowToken { interface TourToken extends FullToken<'Tour'> { tourZIndexPopup: number; - indicatorWidth: number; - indicatorHeight: number; + indicatorWidth: number | string; + indicatorHeight: number | string; tourBorderRadius: number; } diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts index cee0e5892a..d7107c71bc 100644 --- a/components/transfer/style/index.ts +++ b/components/transfer/style/index.ts @@ -10,32 +10,32 @@ export interface ComponentToken { * @desc 列表宽度 * @descEN Width of list */ - listWidth: number; + listWidth: number | string; /** * @desc 大号列表宽度 * @descEN Width of large list */ - listWidthLG: number; + listWidthLG: number | string; /** * @desc 列表高度 * @descEN Height of list */ - listHeight: number; + listHeight: number | string; /** * @desc 列表项高度 * @descEN Height of list item */ - itemHeight: number; + itemHeight: number | string; /** * @desc 列表项纵向内边距 * @descEN Vertical padding of list item */ - itemPaddingBlock: number; + itemPaddingBlock: number | string; /** * @desc 顶部高度 * @descEN Height of header */ - headerHeight: number; + headerHeight: number | string; } interface TransferToken extends FullToken<'Transfer'> { From 8c39b644ecd4b6267c5e452a4f048158bcf25c82 Mon Sep 17 00:00:00 2001 From: xiaoluohao Date: Thu, 11 Jul 2024 04:59:22 +0800 Subject: [PATCH 12/19] demo: demo update for reduce global variable (#49781) * reduce global variable dependencies * Update toolbarRender.tsx Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: lijianan <574980606@qq.com> --- components/image/demo/toolbarRender.tsx | 95 +++++++++++-------------- 1 file changed, 43 insertions(+), 52 deletions(-) diff --git a/components/image/demo/toolbarRender.tsx b/components/image/demo/toolbarRender.tsx index e39510a7f9..d80626b9cf 100644 --- a/components/image/demo/toolbarRender.tsx +++ b/components/image/demo/toolbarRender.tsx @@ -12,58 +12,49 @@ import { Image, Space } from 'antd'; const src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'; -const App: React.FC = () => { - // or you can download flipped and rotated image - // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp - const onDownload = () => { - fetch(src) - .then((response) => response.blob()) - .then((blob) => { - const url = URL.createObjectURL(new Blob([blob])); - const link = document.createElement('a'); - link.href = url; - link.download = 'image.png'; - document.body.appendChild(link); - link.click(); - URL.revokeObjectURL(url); - link.remove(); - }); - }; - - return ( - ( - - - - - - - - - - - ), - }} - /> - ); +// you can download flipped and rotated image +// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp +const onDownload = (imgUrl: string) => { + fetch(imgUrl) + .then((response) => response.blob()) + .then((blob) => { + const url = URL.createObjectURL(new Blob([blob])); + const link = document.createElement<'a'>('a'); + link.href = url; + link.download = 'image.png'; + document.body.appendChild(link); + link.click(); + URL.revokeObjectURL(url); + link.remove(); + }); }; +const App: React.FC = () => ( + ( + + onDownload(url)} /> + + + + + + + + + ), + }} + /> +); + export default App; From 0651f84ee73d0298f7e0f0c8af62bda0f6a709b1 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 11 Jul 2024 10:02:04 +0800 Subject: [PATCH 13/19] site: rm useless Button in LiveError (#49814) --- .dumi/theme/common/LiveCode.tsx | 71 +++++---------------------------- 1 file changed, 10 insertions(+), 61 deletions(-) diff --git a/.dumi/theme/common/LiveCode.tsx b/.dumi/theme/common/LiveCode.tsx index d521a55e82..ab8316fef6 100644 --- a/.dumi/theme/common/LiveCode.tsx +++ b/.dumi/theme/common/LiveCode.tsx @@ -1,16 +1,12 @@ import type { ComponentProps, FC } from 'react'; -import React, { useEffect, useState } from 'react'; -import { EditFilled } from '@ant-design/icons'; -import { Tooltip } from 'antd'; +import React from 'react'; import { createStyles } from 'antd-style'; import SourceCodeEditor from 'dumi/theme-default/slots/SourceCodeEditor'; -import useLocale from '../../hooks/useLocale'; import LiveError from '../slots/LiveError'; const useStyle = createStyles(({ token, css }) => { - const { colorBgContainer, colorIcon } = token; - + const { colorBgContainer } = token; return { editor: css` // override dumi editor styles @@ -18,7 +14,6 @@ const useStyle = createStyles(({ token, css }) => { .dumi-default-source-code { background: ${colorBgContainer}; } - .dumi-default-source-code > pre, .dumi-default-source-code-scroll-content > pre, .dumi-default-source-code-editor-textarea { @@ -48,70 +43,24 @@ const useStyle = createStyles(({ token, css }) => { } } `, - - editableIcon: css` - position: absolute; - z-index: 2; - height: 32px; - width: 32px; - display: flex; - align-items: center; - justify-content: center; - top: 16px; - inset-inline-end: 56px; - color: ${colorIcon}; - `, }; }); -const locales = { - cn: { - demoEditable: '编辑 Demo 可实时预览', - }, - en: { - demoEditable: 'Edit demo with real-time preview', - }, -}; - -const HIDE_LIVE_DEMO_TIP = 'hide-live-demo-tip'; - const LiveCode: FC< { error: Error | null; } & Pick, 'lang' | 'initialValue' | 'onChange'> > = (props) => { - const [open, setOpen] = useState(false); const { styles } = useStyle(); - const [locale] = useLocale(locales); - - useEffect(() => { - const shouldOpen = !localStorage.getItem(HIDE_LIVE_DEMO_TIP); - if (shouldOpen) { - setOpen(true); - } - }, []); - - const handleOpenChange = (newOpen: boolean) => { - setOpen(newOpen); - if (!newOpen) { - localStorage.setItem(HIDE_LIVE_DEMO_TIP, 'true'); - } - }; - return ( - <> -
- - -
- - - - +
+ + +
); }; From 34a2058e85a956b994f446141fe355749b402c3e Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 11 Jul 2024 10:02:24 +0800 Subject: [PATCH 14/19] type: rm duplicate boolean type (#49816) --- components/tree/Tree.tsx | 2 +- components/typography/index.en-US.md | 4 ++-- components/typography/index.zh-CN.md | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 239ecf7453..36298374f8 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -103,7 +103,7 @@ export type TreeNodeNormal = DataNode; type DraggableFn = (node: DataNode) => boolean; interface DraggableConfig { - icon?: React.ReactNode | false; + icon?: React.ReactNode; nodeDraggable?: DraggableFn; } diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md index a899a7b5c8..8d1a7a98c9 100644 --- a/components/typography/index.en-US.md +++ b/components/typography/index.en-US.md @@ -108,7 +108,7 @@ Common props ref：[Common props](/docs/react/common-props) { icon: ReactNode, - tooltip: boolean | ReactNode, + tooltip: ReactNode, editing: boolean, maxLength: number, autoSize: boolean | { minRows: number, maxRows: number }, @@ -148,7 +148,7 @@ interface EllipsisConfig { suffix: string; /** render function added in `5.16.0` */ symbol: ReactNode | ((expanded: boolean) => ReactNode); - tooltip: boolean | ReactNode | TooltipProps; + tooltip: ReactNode | TooltipProps; /** added in `5.16.0` */ defaultExpanded: boolean; /** added in `5.16.0` */ diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index a9d20f108b..b837e04816 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -109,7 +109,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA { icon: ReactNode, - tooltip: boolean | ReactNode, + tooltip: ReactNode, editing: boolean, maxLength: number, autoSize: boolean | { minRows: number, maxRows: number }, @@ -149,7 +149,7 @@ interface EllipsisConfig { suffix: string; /** `5.16.0` 新增渲染函数 */ symbol: ReactNode | ((expanded: boolean) => ReactNode); - tooltip: boolean | ReactNode | TooltipProps; + tooltip: ReactNode | TooltipProps; /** `5.16.0` 新增 */ defaultExpanded: boolean; /** `5.16.0` 新增 */ From a55195f25b7ef3e0c4e665e6e224f0db65335eb9 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 11 Jul 2024 10:03:12 +0800 Subject: [PATCH 15/19] demo: update `Popover` & `Tooltip` & `Popconfirm` demo (#49815) * demo: update demo * fix: fix * fix: fix * fix: fix --- .../__snapshots__/demo-extend.test.ts.snap | 99 +++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 97 ++++++++++++++++++ .../popconfirm/__tests__/demo-extend.test.ts | 4 +- components/popconfirm/__tests__/demo.test.tsx | 1 + components/popconfirm/__tests__/image.test.ts | 4 +- components/popconfirm/demo/shift.md | 7 ++ components/popconfirm/demo/shift.tsx | 26 +++++ components/popconfirm/index.en-US.md | 1 + components/popconfirm/index.zh-CN.md | 1 + .../__snapshots__/demo-extend.test.ts.snap | 40 ++++++++ .../__snapshots__/demo.test.tsx.snap | 38 +++++++ .../popover/__tests__/demo-extend.test.ts | 4 +- components/popover/__tests__/demo.test.tsx | 1 + components/popover/__tests__/image.test.ts | 4 +- components/popover/demo/shift.md | 7 ++ components/popover/demo/shift.tsx | 26 +++++ components/popover/index.en-US.md | 1 + components/popover/index.zh-CN.md | 1 + .../__snapshots__/demo-extend.test.ts.snap | 10 +- components/tooltip/demo/debug.tsx | 2 +- components/tooltip/demo/disabled-children.tsx | 2 +- components/tooltip/demo/shift.tsx | 27 +++-- components/tooltip/index.en-US.md | 2 +- components/tooltip/index.zh-CN.md | 2 +- 24 files changed, 379 insertions(+), 28 deletions(-) create mode 100644 components/popconfirm/demo/shift.md create mode 100644 components/popconfirm/demo/shift.tsx create mode 100644 components/popover/demo/shift.md create mode 100644 components/popover/demo/shift.tsx diff --git a/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap index f03ca065c2..7119148cc6 100644 --- a/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2138,6 +2138,105 @@ Array [ exports[`renders components/popconfirm/demo/render-panel.tsx extend context correctly 2`] = `[]`; +exports[`renders components/popconfirm/demo/shift.tsx extend context correctly 1`] = ` +
+ +
+
+
+ +
+
+
+`; + +exports[`renders components/popconfirm/demo/shift.tsx extend context correctly 2`] = `[]`; + exports[`renders components/popconfirm/demo/wireframe.tsx extend context correctly 1`] = ` Array [
+ +
+
+
+ +
+
+
+`; + exports[`renders components/popconfirm/demo/wireframe.tsx correctly 1`] = ` Array [
{ - imageDemoTest('popconfirm'); + imageDemoTest('popconfirm', { + onlyViewport: ['shift.tsx'], + }); }); diff --git a/components/popconfirm/demo/shift.md b/components/popconfirm/demo/shift.md new file mode 100644 index 0000000000..fe6ebc7963 --- /dev/null +++ b/components/popconfirm/demo/shift.md @@ -0,0 +1,7 @@ +## zh-CN + +当 Popconfirm 贴边时，自动偏移并且调整箭头位置。当超出过多时，则一同滚出屏幕。 + +## en-US + +Auto adjust Popup and arrow position when Popconfirm is close to the edge of the screen. Will be out of screen when exceed limitation. diff --git a/components/popconfirm/demo/shift.tsx b/components/popconfirm/demo/shift.tsx new file mode 100644 index 0000000000..ff378487d6 --- /dev/null +++ b/components/popconfirm/demo/shift.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Button, Popconfirm } from 'antd'; + +const style: React.CSSProperties = { + width: '300vw', + height: '300vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; + +const App: React.FC = () => { + React.useEffect(() => { + document.documentElement.scrollTop = document.documentElement.clientHeight; + document.documentElement.scrollLeft = document.documentElement.clientWidth; + }, []); + return ( +
+ + + +
+ ); +}; + +export default App; diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md index c5e5051a3d..5d0ed35b21 100644 --- a/components/popconfirm/index.en-US.md +++ b/components/popconfirm/index.en-US.md @@ -21,6 +21,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha Basic Locale text Placement +Auto Shift Conditional trigger Customize icon Asynchronously close diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 018a09b9e6..7b06eaa7b7 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -22,6 +22,7 @@ demo: 基本 国际化 位置 +贴边偏移 条件触发 自定义 Icon 图标 异步关闭 diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap index 5100bf3afc..c0643e17cf 100644 --- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1533,6 +1533,46 @@ Array [ exports[`renders components/popover/demo/render-panel.tsx extend context correctly 2`] = `[]`; +exports[`renders components/popover/demo/shift.tsx extend context correctly 1`] = ` +
+ +
+
+
+ +
+
+
+`; + +exports[`renders components/popover/demo/shift.tsx extend context correctly 2`] = `[]`; + exports[`renders components/popover/demo/triggerType.tsx extend context correctly 1`] = `
+ +
+
+
+ +
+
+
+`; + exports[`renders components/popover/demo/triggerType.tsx correctly 1`] = `
{ - imageDemoTest('popover'); + imageDemoTest('popover', { + onlyViewport: ['shift.tsx'], + }); }); diff --git a/components/popover/demo/shift.md b/components/popover/demo/shift.md new file mode 100644 index 0000000000..2479f5bd95 --- /dev/null +++ b/components/popover/demo/shift.md @@ -0,0 +1,7 @@ +## zh-CN + +当 Popover 贴边时，自动偏移并且调整箭头位置。当超出过多时，则一同滚出屏幕。 + +## en-US + +Auto adjust Popup and arrow position when Popover is close to the edge of the screen. Will be out of screen when exceed limitation. diff --git a/components/popover/demo/shift.tsx b/components/popover/demo/shift.tsx new file mode 100644 index 0000000000..bd4bfca0d7 --- /dev/null +++ b/components/popover/demo/shift.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import { Button, Popover } from 'antd'; + +const style: React.CSSProperties = { + width: '300vw', + height: '300vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; + +const App: React.FC = () => { + React.useEffect(() => { + document.documentElement.scrollTop = document.documentElement.clientHeight; + document.documentElement.scrollLeft = document.documentElement.clientWidth; + }, []); + return ( +
+ + + +
+ ); +}; + +export default App; diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md index d5a2be331d..9ad9869540 100644 --- a/components/popover/index.en-US.md +++ b/components/popover/index.en-US.md @@ -22,6 +22,7 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac Three ways to trigger Placement Arrow +Auto Shift Controlling the close of the dialog Hover with click popover _InternalPanelDoNotUseOrYouWillBeFired diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index c26156e259..31437e8f21 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -23,6 +23,7 @@ demo: 三种触发方式 位置 箭头展示 +贴边偏移 从浮层内关闭 悬停点击弹出窗口 _InternalPanelDoNotUseOrYouWillBeFired diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap index be2f095591..395f245773 100644 --- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1355,7 +1355,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co class="ant-tooltip-inner" role="tooltip" > - Thanks for using antd. Have a nice day! + Thanks for using antd. Have a nice day !
@@ -1385,7 +1385,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co class="ant-tooltip-inner" role="tooltip" > - Thanks for using antd. Have a nice day! + Thanks for using antd. Have a nice day !
@@ -1482,7 +1482,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co class="ant-tooltip-inner" role="tooltip" > - Thanks for using antd. Have a nice day! + Thanks for using antd. Have a nice day ! @@ -1521,7 +1521,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co class="ant-tooltip-inner" role="tooltip" > - Thanks for using antd. Have a nice day! + Thanks for using antd. Have a nice day ! @@ -1663,7 +1663,7 @@ exports[`renders components/tooltip/demo/disabled-children.tsx extend context co class="ant-tooltip-inner" role="tooltip" > - Thanks for using antd. Have a nice day! + Thanks for using antd. Have a nice day ! diff --git a/components/tooltip/demo/debug.tsx b/components/tooltip/demo/debug.tsx index e57e286f44..60bb0bd2d1 100644 --- a/components/tooltip/demo/debug.tsx +++ b/components/tooltip/demo/debug.tsx @@ -4,7 +4,7 @@ import { Button, Tooltip } from 'antd'; const App: React.FC = () => ( diff --git a/components/tooltip/demo/disabled-children.tsx b/components/tooltip/demo/disabled-children.tsx index fbacaf5959..bc108c5e8e 100644 --- a/components/tooltip/demo/disabled-children.tsx +++ b/components/tooltip/demo/disabled-children.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Button, Checkbox, Input, InputNumber, Select, Space, Tooltip } from 'antd'; const WrapperTooltip: React.FC = (props) => ( - + ); const App: React.FC = () => ( diff --git a/components/tooltip/demo/shift.tsx b/components/tooltip/demo/shift.tsx index 2c4a531558..5020130084 100644 --- a/components/tooltip/demo/shift.tsx +++ b/components/tooltip/demo/shift.tsx @@ -1,27 +1,24 @@ import React from 'react'; import { Button, Tooltip } from 'antd'; +const style: React.CSSProperties = { + width: '300vw', + height: '300vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; + const App: React.FC = () => { React.useEffect(() => { document.documentElement.scrollTop = document.documentElement.clientHeight; document.documentElement.scrollLeft = document.documentElement.clientWidth; }, []); - return ( -
-
- - - -
+
+ + +
); }; diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md index 705c5f9ff8..b25ee810b1 100644 --- a/components/tooltip/index.en-US.md +++ b/components/tooltip/index.en-US.md @@ -20,7 +20,7 @@ demo: Basic Placement Arrow -Auto Shift +Auto Shift Adjust placement automatically Destroy tooltip when hidden Colorful Tooltip diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index f6cc065b43..ef94468f3c 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -22,7 +22,7 @@ demo: 基本 位置 箭头展示 -贴边偏移 +贴边偏移 自动调整位置 隐藏后销毁 多彩文字提示 From 6b9df6b461223de45abd241988e1bbd6884736de Mon Sep 17 00:00:00 2001 From: ice <49827327+coding-ice@users.noreply.github.com> Date: Thu, 11 Jul 2024 11:52:12 +0800 Subject: [PATCH 16/19] docs(button): delete useless introductions (#49820) * docs(button): delete useless introductions * docs: remove space --- components/button/demo/icon.md | 4 ++-- components/button/index.zh-CN.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/components/button/demo/icon.md b/components/button/demo/icon.md index 5f57effcf6..25841bd049 100644 --- a/components/button/demo/icon.md +++ b/components/button/demo/icon.md @@ -1,7 +1,7 @@ ## zh-CN -可以通过 `icon `属性添加图标，并使用 `iconPosition` 调整图标的位置。 +可以通过 `icon`属性添加图标。 ## en-US -You can add an icon using the `icon` property, additionally you can adjust the position of the icon using `iconPosition`. +You can add an icon using the `icon` property. diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 3d85cf848b..938247c5f7 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -37,12 +37,12 @@ group: 按钮类型 -按钮图标 +按钮图标 按钮图标位置 调试图标按钮 调试按钮block属性 按钮尺寸 -不可用状态 +不可用状态 加载中状态 多个按钮组合 幽灵按钮 From a96cc5d47ed30ea593617685e0b531b84fc63c6f Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 11 Jul 2024 14:21:05 +0800 Subject: [PATCH 17/19] refactor: use defaultPrefixCls instead `ant` (#49818) --- components/config-provider/context.ts | 14 ++++++++------ components/config-provider/index.tsx | 27 ++++++++++++++++----------- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 077bc4870d..60e99ef300 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -6,14 +6,18 @@ import type { AlertProps } from '../alert'; import type { BadgeProps } from '../badge'; import type { ButtonProps } from '../button'; import type { CardProps } from '../card'; +import type { CascaderProps } from '../cascader'; import type { CollapseProps } from '../collapse'; +import type { DatePickerProps, RangePickerProps } from '../date-picker'; import type { DrawerProps } from '../drawer'; import type { FlexProps } from '../flex/interface'; import type { FloatButtonGroupProps } from '../float-button/interface'; import type { FormProps } from '../form/Form'; import type { InputProps, TextAreaProps } from '../input'; +import type { InputNumberProps } from '../input-number'; import type { ListItemProps } from '../list'; import type { Locale } from '../locale'; +import type { MentionsProps } from '../mentions'; import type { MenuProps } from '../menu'; import type { ModalProps } from '../modal'; import type { ArgsProps } from '../notification/interface'; @@ -24,16 +28,13 @@ import type { TableProps } from '../table'; import type { TabsProps } from '../tabs'; import type { TagProps } from '../tag'; import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/interface'; +import type { TimePickerProps } from '../time-picker'; import type { TourProps } from '../tour/interface'; import type { TransferProps } from '../transfer'; -import type { InputNumberProps } from '../input-number'; import type { TreeSelectProps } from '../tree-select'; -import type { DatePickerProps, RangePickerProps } from '../date-picker'; -import type { TimePickerProps } from '../time-picker'; -import type { CascaderProps } from '../cascader'; -import type { MentionsProps } from '../mentions'; import type { RenderEmptyHandler } from './defaultRenderEmpty'; +export const defaultPrefixCls = 'ant'; export const defaultIconPrefixCls = 'anticon'; export interface Theme { @@ -195,6 +196,7 @@ export interface ListConfig extends ComponentStyleConfig { } export const Variants = ['outlined', 'borderless', 'filled'] as const; + export type Variant = (typeof Variants)[number]; export interface WaveConfig { @@ -299,7 +301,7 @@ const defaultGetPrefixCls = (suffixCls?: string, customizePrefixCls?: string) => if (customizePrefixCls) { return customizePrefixCls; } - return suffixCls ? `ant-${suffixCls}` : 'ant'; + return suffixCls ? `${defaultPrefixCls}-${suffixCls}` : defaultPrefixCls; }; // zombieJ: 🚨 Do not pass `defaultRenderEmpty` here since it will cause circular dependency. diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index d984e97871..f62481c3bc 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -19,10 +19,12 @@ import type { BadgeConfig, ButtonConfig, CardConfig, + CascaderConfig, CollapseConfig, ComponentStyleConfig, ConfigConsumerProps, CSPConfig, + DatePickerConfig, DirectionType, DrawerConfig, FlexConfig, @@ -30,12 +32,15 @@ import type { FormConfig, ImageConfig, InputConfig, + InputNumberConfig, ListConfig, + MentionsConfig, MenuConfig, ModalConfig, NotificationConfig, PaginationConfig, PopupOverflow, + RangePickerConfig, SelectConfig, SpaceConfig, TableConfig, @@ -44,19 +49,20 @@ import type { TextAreaConfig, Theme, ThemeConfig, + TimePickerConfig, TourConfig, TransferConfig, - WaveConfig, - Variant, - InputNumberConfig, - RangePickerConfig, - DatePickerConfig, - TimePickerConfig, - CascaderConfig, TreeSelectConfig, - MentionsConfig, + Variant, + WaveConfig, +} from './context'; +import { + ConfigConsumer, + ConfigContext, + defaultIconPrefixCls, + defaultPrefixCls, + Variants, } from './context'; -import { ConfigConsumer, ConfigContext, defaultIconPrefixCls, Variants } from './context'; import { registerTheme } from './cssVariables'; import type { RenderEmptyHandler } from './defaultRenderEmpty'; import { DisabledContextProvider } from './DisabledContext'; @@ -93,6 +99,7 @@ export const warnContext: (componentName: string) => void = export { ConfigConsumer, ConfigContext, + defaultPrefixCls, defaultIconPrefixCls, type ConfigConsumerProps, type CSPConfig, @@ -235,8 +242,6 @@ interface ProviderChildrenProps extends ConfigProviderProps { type holderRenderType = (children: React.ReactNode) => React.ReactNode; -export const defaultPrefixCls = 'ant'; - let globalPrefixCls: string; let globalIconPrefixCls: string; let globalTheme: ThemeConfig; From b182b13721c91bae0e38b041fd5507cfe09bb3c7 Mon Sep 17 00:00:00 2001 From: Rubu Jam Date: Thu, 11 Jul 2024 15:33:26 +0800 Subject: [PATCH 18/19] chore(deps): add dependency `@emotion/css` (#49823) --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 4b537cae46..2979616b20 100644 --- a/package.json +++ b/package.json @@ -161,6 +161,7 @@ "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", "@emotion/react": "^11.11.4", + "@emotion/css": "^11.11.2", "@emotion/server": "^11.11.0", "@ianvs/prettier-plugin-sort-imports": "^4.2.1", "@inquirer/prompts": "^5.1.2", From cd2dc302b24947a65594a8f6b3c9556da1b24bb3 Mon Sep 17 00:00:00 2001 From: zhw <116932167+coderz-w@users.noreply.github.com> Date: Fri, 12 Jul 2024 05:37:54 +0800 Subject: [PATCH 19/19] fix: delay folder upload until all children files are parsed when drag (#49832) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2979616b20..cc0c319e80 100644 --- a/package.json +++ b/package.json @@ -143,7 +143,7 @@ "rc-tooltip": "~6.2.0", "rc-tree": "~5.8.8", "rc-tree-select": "~5.22.1", - "rc-upload": "~4.5.2", + "rc-upload": "~4.6.0", "rc-util": "^5.43.0", "scroll-into-view-if-needed": "^3.1.0", "throttle-debounce": "^5.0.0"