From 755598f8390b8846bbbfac0881f6348c68bcda40 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: Sun, 28 May 2023 11:27:40 +0800 Subject: [PATCH 01/27] docs: clean up cacader loading demo (#42682) --- components/cascader/demo/lazy.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/components/cascader/demo/lazy.tsx b/components/cascader/demo/lazy.tsx index 49f3c91d63..3df1184666 100644 --- a/components/cascader/demo/lazy.tsx +++ b/components/cascader/demo/lazy.tsx @@ -1,12 +1,11 @@ -import React, { useState } from 'react'; import { Cascader } from 'antd'; +import React, { useState } from 'react'; interface Option { value?: string | number | null; label: React.ReactNode; children?: Option[]; isLeaf?: boolean; - loading?: boolean; } const optionLists: Option[] = [ @@ -31,11 +30,9 @@ const App: React.FC = () => { const loadData = (selectedOptions: Option[]) => { const targetOption = selectedOptions[selectedOptions.length - 1]; - targetOption.loading = true; // load options lazily setTimeout(() => { - targetOption.loading = false; targetOption.children = [ { label: `${targetOption.label} Dynamic 1`, From bb77559c45517708cb3ed078a926aaa956e04fbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 28 May 2023 12:01:42 +0800 Subject: [PATCH 02/27] docs: update docs (#42683) --- components/affix/index.en-US.md | 2 +- components/affix/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md index f48629a497..9acbf6da2e 100644 --- a/components/affix/index.en-US.md +++ b/components/affix/index.en-US.md @@ -45,7 +45,7 @@ Please note that Affix should not cover other content on the page, especially wh ### When binding container with `target` in Affix, elements sometimes move out of the container. -We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to: +We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to: Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120) diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md index d0e5f7dc78..1e91f44ac2 100644 --- a/components/affix/index.zh-CN.md +++ b/components/affix/index.zh-CN.md @@ -46,7 +46,7 @@ group: ### Affix 使用 `target` 绑定容器时，元素会跑到容器外。 -从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听： +从性能角度考虑，我们只监听容器滚动事件。如果希望任意滚动，你可以在窗体添加滚动监听： 相关 issue：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120) From 5fd2ee5b65bad00bfa300833cb89433d7ac940e2 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sun, 28 May 2023 15:15:28 +0800 Subject: [PATCH 03/27] demo: update docs & demo (#42681) --- .../__snapshots__/demo-extend.test.ts.snap | 26 ++++++------------- .../__tests__/__snapshots__/demo.test.ts.snap | 26 ++++++------------- components/color-picker/demo/trigger-event.md | 2 +- components/color-picker/demo/trigger.tsx | 18 ++++++------- 4 files changed, 25 insertions(+), 47 deletions(-) diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 3c99c80cea..debbf67e2b 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -4351,25 +4351,15 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr exports[`renders components/color-picker/demo/trigger.tsx extend context correctly 1`] = ` Array [ -
-
-
-
-
- - #1677ff - -
-
, + + open + + ,
-
-
-
-
- - #1677ff - -
-
+ + open + + `; exports[`renders components/color-picker/demo/trigger-event.tsx correctly 1`] = ` diff --git a/components/color-picker/demo/trigger-event.md b/components/color-picker/demo/trigger-event.md index 418104c0d2..550136ecbe 100644 --- a/components/color-picker/demo/trigger-event.md +++ b/components/color-picker/demo/trigger-event.md @@ -4,4 +4,4 @@ ## en-US -Triggers event for customizing color panels. +Triggers event for customizing color panels, provide options `click` and `hover`. diff --git a/components/color-picker/demo/trigger.tsx b/components/color-picker/demo/trigger.tsx index 0136f8b481..5ab8e663df 100644 --- a/components/color-picker/demo/trigger.tsx +++ b/components/color-picker/demo/trigger.tsx @@ -1,8 +1,8 @@ -import { ColorPicker, Space, theme } from 'antd'; +import { Button, ColorPicker, theme } from 'antd'; import type { Color } from 'antd/es/color-picker'; import React, { useMemo, useState } from 'react'; -export default () => { +const Demo: React.FC = () => { const { token } = theme.useToken(); const [color, setColor] = useState(token.colorPrimary); @@ -11,19 +11,17 @@ export default () => { [color], ); - const divStyle: React.CSSProperties = { - width: token.sizeMD, - height: token.sizeMD, - borderRadius: token.borderRadiusSM, + const btnStyle: React.CSSProperties = { backgroundColor: bgColor, }; return ( - -
- {bgColor} - + ); }; + +export default Demo; From 46acb658068dd12ea8a87bf405d705f0650864c1 Mon Sep 17 00:00:00 2001 From: yiwwhl Date: Mon, 29 May 2023 01:26:23 +0800 Subject: [PATCH 04/27] type: update any with void (#42690) --- components/_util/scrollTo.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/_util/scrollTo.ts b/components/_util/scrollTo.ts index 1197fc442c..fb6141cd5b 100644 --- a/components/_util/scrollTo.ts +++ b/components/_util/scrollTo.ts @@ -6,7 +6,7 @@ interface ScrollToOptions { /** Scroll container, default as window */ getContainer?: () => HTMLElement | Window | Document; /** Scroll end callback */ - callback?: () => any; + callback?: () => void; /** Animation duration, default as 450 */ duration?: number; } From d3ff73a94fa6445bdc6f8692cd47a1e5c0d69488 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 29 May 2023 13:58:36 +0800 Subject: [PATCH 05/27] fix: overflowed submenu should have classes with customized class (#42692) --- components/menu/__tests__/index.test.tsx | 30 +++++++++++++++++++++--- components/menu/menu.tsx | 29 +++++++++++++---------- 2 files changed, 44 insertions(+), 15 deletions(-) diff --git a/components/menu/__tests__/index.test.tsx b/components/menu/__tests__/index.test.tsx index c1158d87c7..4a6c5c6c87 100644 --- a/components/menu/__tests__/index.test.tsx +++ b/components/menu/__tests__/index.test.tsx @@ -8,12 +8,13 @@ import { import React, { useMemo, useState } from 'react'; import type { MenuProps, MenuRef } from '..'; import Menu from '..'; +import { TriggerMockContext } from '../../../tests/shared/demoTestContext'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { act, fireEvent, render } from '../../../tests/utils'; -import Layout from '../../layout'; import initCollapseMotion from '../../_util/motion'; import { noop } from '../../_util/warning'; +import Layout from '../../layout'; Object.defineProperty(globalThis, 'IS_REACT_ACT_ENVIRONMENT', { writable: true, @@ -824,7 +825,7 @@ describe('Menu', () => { const onOpen = jest.fn(); const onClose = jest.fn(); const Demo: React.FC = () => { - const menuProps = useMemo(() => ({ onOpen, onClose }) as MenuProps, []); + const menuProps = useMemo(() => ({ onOpen, onClose } as MenuProps), []); return ( { it('should keep selectedKeys in state when collapsed to 0px', () => { jest.useFakeTimers(); const Demo: React.FC = (props) => { - const menuProps = useMemo(() => ({ collapsedWidth: 0 }) as MenuProps, []); + const menuProps = useMemo(() => ({ collapsedWidth: 0 } as MenuProps), []); return ( { '0', ); }); + + it('Overflow indicator className should not override menu class', () => { + const { container } = render( + + node.parentElement!} + /> + , + ); + expect(container.querySelector('.ant-menu.ant-menu-light.custom-popover')).toBeTruthy(); + }); }); diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx index c8dee4d9e3..07a9281e74 100644 --- a/components/menu/menu.tsx +++ b/components/menu/menu.tsx @@ -1,22 +1,22 @@ +import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined'; +import classNames from 'classnames'; import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu'; import RcMenu from 'rc-menu'; +import useEvent from 'rc-util/lib/hooks/useEvent'; +import omit from 'rc-util/lib/omit'; import * as React from 'react'; import { forwardRef } from 'react'; -import omit from 'rc-util/lib/omit'; -import useEvent from 'rc-util/lib/hooks/useEvent'; -import classNames from 'classnames'; -import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined'; -import warning from '../_util/warning'; import initCollapseMotion from '../_util/motion'; import { cloneElement } from '../_util/reactNode'; -import type { SiderContextProps } from '../layout/Sider'; +import warning from '../_util/warning'; import { ConfigContext } from '../config-provider'; -import useStyle from './style'; -import OverrideContext from './OverrideContext'; -import useItems from './hooks/useItems'; -import type { ItemType } from './hooks/useItems'; +import type { SiderContextProps } from '../layout/Sider'; +import type { MenuContextProps, MenuTheme } from './MenuContext'; import MenuContext from './MenuContext'; -import type { MenuTheme, MenuContextProps } from './MenuContext'; +import OverrideContext from './OverrideContext'; +import type { ItemType } from './hooks/useItems'; +import useItems from './hooks/useItems'; +import useStyle from './style'; export interface MenuProps extends Omit { theme?: MenuTheme; @@ -59,6 +59,7 @@ const InternalMenu = forwardRef((props, ref) => { mode, selectable, onClick, + overflowedIndicatorPopupClassName, ...restProps } = props; @@ -152,7 +153,11 @@ const InternalMenu = forwardRef((props, ref) => { } - overflowedIndicatorPopupClassName={classNames(prefixCls, `${prefixCls}-${theme}`)} + overflowedIndicatorPopupClassName={classNames( + prefixCls, + `${prefixCls}-${theme}`, + overflowedIndicatorPopupClassName, + )} mode={mergedMode} selectable={mergedSelectable} onClick={onItemClick} From 25883ca53a058c4e24bf374bf01514d88c0dbdc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Mon, 29 May 2023 16:50:12 +0800 Subject: [PATCH 06/27] fix: ColorPicker hover boundary issues (#42669) * fix: fix hover boundary issues * test: fix test case * build: modify dependency scope * Update package.json Co-authored-by: MadCcc <1075746765@qq.com> --------- Co-authored-by: afc163 Co-authored-by: MadCcc <1075746765@qq.com> --- components/color-picker/ColorPicker.tsx | 26 +++++++++-- components/color-picker/ColorPickerPanel.tsx | 17 +++++-- .../color-picker/__tests__/index.test.tsx | 44 ++++++++++++++++++- package.json | 4 +- 4 files changed, 81 insertions(+), 10 deletions(-) diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index ea8083c1ba..221b396f7a 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -5,7 +5,7 @@ import type { import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import type { CSSProperties } from 'react'; -import React, { useContext, useEffect, useState } from 'react'; +import React, { useContext, useEffect, useRef, useState } from 'react'; import genPurePanel from '../_util/PurePanel'; import type { ConfigConsumerProps } from '../config-provider/context'; import { ConfigContext } from '../config-provider/context'; @@ -97,8 +97,9 @@ const ColorPicker: CompoundedComponent = (props) => { [`${prefixCls}-rtl`]: direction, }); const mergeCls = classNames(mergeRootCls, className, hashId); + const popupAllowCloseRef = useRef(true); - const handleChange = (data: Color, type?: HsbaColorType) => { + const handleChange = (data: Color, type?: HsbaColorType, pickColor?: boolean) => { let color: Color = generateColor(data); if (colorCleared) { setColorCleared(false); @@ -112,6 +113,10 @@ const ColorPicker: CompoundedComponent = (props) => { if (!value) { setColorValue(color); } + // Only for drag-and-drop color picking + if (pickColor) { + popupAllowCloseRef.current = false; + } onChange?.(color, color.toHexString()); }; @@ -119,6 +124,10 @@ const ColorPicker: CompoundedComponent = (props) => { setColorCleared(clear); }; + const handleChangeComplete = () => { + popupAllowCloseRef.current = true; + }; + const popoverProps: PopoverProps = { open: popupOpen, trigger, @@ -149,9 +158,18 @@ const ColorPicker: CompoundedComponent = (props) => { return wrapSSR( { + if (popupAllowCloseRef.current) { + setPopupOpen(visible); + } + }} content={ - + } overlayClassName={prefixCls} {...popoverProps} diff --git a/components/color-picker/ColorPickerPanel.tsx b/components/color-picker/ColorPickerPanel.tsx index c6841c2dae..f0138b9588 100644 --- a/components/color-picker/ColorPickerPanel.tsx +++ b/components/color-picker/ColorPickerPanel.tsx @@ -10,12 +10,22 @@ import ColorPresets from './components/ColorPresets'; import type { ColorPickerBaseProps } from './interface'; interface ColorPickerPanelProps extends ColorPickerBaseProps { - onChange?: (value?: Color, type?: HsbaColorType) => void; + onChange?: (value?: Color, type?: HsbaColorType, pickColor?: boolean) => void; + onChangeComplete?: (type?: HsbaColorType) => void; onClear?: (clear?: boolean) => void; } const ColorPickerPanel: FC = (props) => { - const { prefixCls, allowClear, presets, onChange, onClear, color, ...injectProps } = props; + const { + prefixCls, + allowClear, + presets, + onChange, + onClear, + onChangeComplete, + color, + ...injectProps + } = props; const colorPickerPanelPrefixCls = `${prefixCls}-inner-panel`; const extraPanelRender = (panel: React.ReactNode) => ( @@ -45,8 +55,9 @@ const ColorPickerPanel: FC = (props) => { onChange?.(colorValue, type, true)} panelRender={extraPanelRender} + onChangeComplete={onChangeComplete} /> ); }; diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index 7f9083d061..554ed18f12 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/components/color-picker/__tests__/index.test.tsx @@ -1,4 +1,5 @@ -import { fireEvent, render } from '@testing-library/react'; +import { createEvent, fireEvent, render } from '@testing-library/react'; +import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import React, { useMemo, useState } from 'react'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -6,6 +7,28 @@ import { waitFakeTimer } from '../../../tests/utils'; import ColorPicker from '../ColorPicker'; import type { Color } from '../color'; +function doMouseMove( + container: HTMLElement, + start: number, + end: number, + element = 'ant-color-picker-handler', +) { + const mouseDown = createEvent.mouseDown(container.getElementsByClassName(element)[0], { + pageX: start, + pageY: start, + }); + fireEvent(container.getElementsByClassName(element)[0], mouseDown); + // Drag + const mouseMove: any = new Event('mousemove'); + mouseMove.pageX = end; + mouseMove.pageY = end; + + fireEvent(document, mouseMove); + + const mouseUp = createEvent.mouseUp(document); + fireEvent(document, mouseUp); +} + describe('ColorPicker', () => { mountTest(ColorPicker); rtlTest(ColorPicker); @@ -257,4 +280,23 @@ describe('ColorPicker', () => { container.querySelector('.ant-color-picker-color-block-inner')?.getAttribute('style'), ).toEqual('background: rgb(99, 22, 22);'); }); + + it('Should fix hover boundary issues', async () => { + spyElementPrototypes(HTMLElement, { + getBoundingClientRect: () => ({ + x: 0, + y: 100, + width: 100, + height: 100, + }), + }); + const { container } = render(); + fireEvent.mouseEnter(container.querySelector('.ant-color-picker-trigger')!); + await waitFakeTimer(); + doMouseMove(container, 0, 999); + expect(container.querySelector('.ant-popover-hidden')).toBeFalsy(); + fireEvent.mouseLeave(container.querySelector('.ant-color-picker-trigger')!); + await waitFakeTimer(); + expect(container.querySelector('.ant-popover-hidden')).toBeTruthy(); + }); }); diff --git a/package.json b/package.json index f522cfd2d3..73f205f2da 100644 --- a/package.json +++ b/package.json @@ -114,7 +114,7 @@ "@ant-design/react-slick": "~1.0.0", "@babel/runtime": "^7.18.3", "@ctrl/tinycolor": "^3.6.0", - "@rc-component/color-picker": "~1.1.1", + "@rc-component/color-picker": "~1.2.0", "@rc-component/mutate-observer": "^1.0.0", "@rc-component/tour": "~1.8.0", "@rc-component/trigger": "^1.13.0", @@ -324,4 +324,4 @@ "*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write", "*.{json,less,md}": "prettier --ignore-unknown --write" } -} +} \ No newline at end of file From 7b066a9211affa0e79a53e933bc096bf6114e712 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 29 May 2023 20:44:45 +0800 Subject: [PATCH 07/27] style: site code optimization (#42685) * style: site code optimization * fix --- .dumi/theme/layouts/ResourceLayout/AffixTabs.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx b/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx index 5fc69f312b..5e765b46a1 100644 --- a/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx +++ b/.dumi/theme/layouts/ResourceLayout/AffixTabs.tsx @@ -5,6 +5,8 @@ import * as React from 'react'; import scrollTo from '../../../../components/_util/scrollTo'; import useSiteToken from '../../../hooks/useSiteToken'; +const listenerEvents = ['scroll', 'resize'] as const; + const useStyle = () => { const { token } = useSiteToken(); @@ -105,13 +107,10 @@ const AffixTabs: React.FC = () => { }, []); React.useEffect(() => { - window.addEventListener('scroll', onSyncAffix); - window.addEventListener('resize', onSyncAffix); + listenerEvents.forEach((event) => window.addEventListener(event, onSyncAffix)); onSyncAffix(); - return () => { - window.removeEventListener('scroll', onSyncAffix); - window.removeEventListener('resize', onSyncAffix); + listenerEvents.forEach((event) => window.removeEventListener(event, onSyncAffix)); }; }, []); From 10fa7252557445642e94ab1f9fece20f31f8470f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=AA=E8=A7=89=E9=9B=A8=E5=A3=B0?= <544022268@qq.com> Date: Tue, 30 May 2023 10:31:55 +0800 Subject: [PATCH 08/27] docs: new tag logical mergin (#42705) --- .dumi/hooks/useMenu.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dumi/hooks/useMenu.tsx b/.dumi/hooks/useMenu.tsx index 7a9a64003d..e0a66b317a 100644 --- a/.dumi/hooks/useMenu.tsx +++ b/.dumi/hooks/useMenu.tsx @@ -111,7 +111,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] => {(item.frontmatter as any).subtitle} {(item.frontmatter as any).tag && ( - + {(item.frontmatter as any).tag} )} From 71836057d1dd1b24be1f372f205098c0545df099 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9C=AA=E8=A7=89=E9=9B=A8=E5=A3=B0?= <544022268@qq.com> Date: Tue, 30 May 2023 10:33:35 +0800 Subject: [PATCH 09/27] docs: fix content anchor setion to use logical style (#42707) --- .dumi/theme/slots/Content/index.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/.dumi/theme/slots/Content/index.tsx b/.dumi/theme/slots/Content/index.tsx index b1825cf9cb..2b11491b38 100644 --- a/.dumi/theme/slots/Content/index.tsx +++ b/.dumi/theme/slots/Content/index.tsx @@ -50,10 +50,11 @@ const useStyle = () => { tocWrapper: css` position: absolute; top: 8px; - right: 0; + inset-inline-end: 0; width: 160px; margin: 12px 0; - padding: 8px 8px 8px 4px; + padding: 8px 0; + padding-inline: 4px 8px; backdrop-filter: blur(8px); border-radius: ${token.borderRadius}px; box-sizing: border-box; @@ -75,11 +76,6 @@ const useStyle = () => { padding-inline: 4px; } - &.rtl { - right: auto; - left: 20px; - } - @media only screen and (max-width: ${token.screenLG}px) { display: none; } @@ -209,7 +205,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => { -
+
Date: Tue, 30 May 2023 10:37:17 +0800 Subject: [PATCH 10/27] fix: Anchor ink & track should use logical inset (#42706) * fix: Anchor ink & track should use logical inset * chore: remove skip check --- components/anchor/style/index.ts | 10 ++-------- 1 file changed, 2 insertions(+), 8 deletions(-) diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts index 6f9520da6d..4727387fca 100644 --- a/components/anchor/style/index.ts +++ b/components/anchor/style/index.ts @@ -73,10 +73,7 @@ const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { [componentCls]: { '&::before': { position: 'absolute', - left: { - _skip_check_: true, - value: 0, - }, + insetInlineStart: 0, top: 0, height: '100%', borderInlineStart: `${lineWidthBold}px ${lineType} ${colorSplit}`, @@ -85,10 +82,7 @@ const genSharedAnchorStyle: GenerateStyle = (token): CSSObject => { [`${componentCls}-ink`]: { position: 'absolute', - left: { - _skip_check_: true, - value: 0, - }, + insetInlineStart: 0, display: 'none', transform: 'translateY(-50%)', transition: `top ${motionDurationSlow} ease-in-out`, From ef21b23cb3611b37eeba323233f7f7f00aa5160e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Tue, 30 May 2023 12:50:04 +0800 Subject: [PATCH 11/27] fix: ColorPicker RTL style issues (#42716) * fix: fix rlt style issues * fix: add missing rtl className on popup --- components/color-picker/ColorPicker.tsx | 9 +++++---- components/color-picker/style/index.ts | 19 +++++++++++++++++++ 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index 221b396f7a..25df858864 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -93,10 +93,11 @@ const ColorPicker: CompoundedComponent = (props) => { const prefixCls = getPrefixCls('color-picker', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); - const mergeRootCls = classNames(rootClassName, { - [`${prefixCls}-rtl`]: direction, - }); + const rtlCls = { [`${prefixCls}-rtl`]: direction }; + const mergeRootCls = classNames(rootClassName, rtlCls); const mergeCls = classNames(mergeRootCls, className, hashId); + const mergePopupCls = classNames(prefixCls, rtlCls); + const popupAllowCloseRef = useRef(true); const handleChange = (data: Color, type?: HsbaColorType, pickColor?: boolean) => { @@ -171,7 +172,7 @@ const ColorPicker: CompoundedComponent = (props) => { onClear={handleClear} /> } - overlayClassName={prefixCls} + overlayClassName={mergePopupCls} {...popoverProps} > {children || ( diff --git a/components/color-picker/style/index.ts b/components/color-picker/style/index.ts index 7211e980e5..f7aa54c2cf 100644 --- a/components/color-picker/style/index.ts +++ b/components/color-picker/style/index.ts @@ -26,6 +26,24 @@ export const genActiveStyle = (token: ColorPickerToken) => ({ outline: 0, }); +const genRtlStyle = (token: ColorPickerToken): CSSObject => { + const { componentCls } = token; + return { + '&-rtl': { + [`${componentCls}-presets-color`]: { + '&::after': { + direction: 'ltr', + }, + }, + [`${componentCls}-clear`]: { + '&::after': { + direction: 'ltr', + }, + }, + }, + }; +}; + const genClearStyle = (token: ColorPickerToken, size: number): CSSObject => { const { componentCls, borderRadiusSM, lineWidth, colorSplit, red6 } = token; @@ -127,6 +145,7 @@ const genColorPickerStyle: GenerateStyle = (token) => { ...genClearStyle(token, controlHeightSM), ...genColorBlockStyle(token, controlHeightSM), }, + ...genRtlStyle(token), }, }, ]; From b955a96d620b96400b1444dcebcf45ebb948f53a Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 30 May 2023 12:50:43 +0800 Subject: [PATCH 12/27] docs: changelog 5.5.2 (#42709) * docs: changelog 5.5.2 * docs: update * Update CHANGELOG.zh-CN.md Co-authored-by: Amumu * Update CHANGELOG.en-US.md Co-authored-by: Amumu * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 * docs: update * docs: update * Update CHANGELOG.zh-CN.md Co-authored-by: Amumu --------- Co-authored-by: Amumu Co-authored-by: afc163 --- CHANGELOG.en-US.md | 23 +++++++++++++++++++++++ CHANGELOG.zh-CN.md | 23 +++++++++++++++++++++++ package.json | 4 ++-- 3 files changed, 48 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 7b50f5b4c5..8cbd388400 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -15,6 +15,29 @@ timeline: true --- +## 5.5.2 + +`2023-05-30` + +- 🐞 Fix ColorPicker hover boundary issue. [#42669](https://github.com/ant-design/ant-design/pull/42669) [@RedJue](https://github.com/RedJue) +- 🐞 Fix Menu that `overflowedIndicatorClassName` should not override origin classes. [#42692](https://github.com/ant-design/ant-design/pull/42692) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Select that in some cases will display the letter `A`. [#42651](https://github.com/ant-design/ant-design/pull/42651) [@895433995](https://github.com/895433995) +- 🐞 Fix Card when `cover` is set to Image, hover mask does not have rounded corner attribute, resulting in UI exception. [#42642](https://github.com/ant-design/ant-design/pull/42642) [@iNeedToCopy](https://github.com/iNeedToCopy) +- 🐞 Fix Checkbox align with label. [#42590](https://github.com/ant-design/ant-design/pull/42590) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix ConfigProvider makes Form component in the bundle even not use it. [#42604](https://github.com/ant-design/ant-design/pull/42604) +- 🐞 Fix InputNumber cannot align well by baseline. [#42580](https://github.com/ant-design/ant-design/pull/42580) +- 🐞 Fix spinning icon animation in Badge. [#42575](https://github.com/ant-design/ant-design/pull/42575) [@MadCcc](https://github.com/MadCcc) +- 📦 Optimize Form `setFieldsValue` logic to reduce bundle size. [#42635](https://github.com/ant-design/ant-design/pull/42635) +- 💄 Optimize ImagePreviewGroup style. [#42675](https://github.com/ant-design/ant-design/pull/42675) [@kiner-tang](https://github.com/kiner-tang) +- 💄 Fix Tag borderless style with `error` and other status. [#42619](https://github.com/ant-design/ant-design/pull/42619) [@li-jia-nan](https://github.com/li-jia-nan) +- 💄 Fix Table `rowSpan` hover highlight style missing. [#42572](https://github.com/ant-design/ant-design/pull/42572) +- 💄 Fix Pagination's link icon and ellipsis hover style when disabled. [#42541](https://github.com/ant-design/ant-design/pull/42541) [@qmhc](https://github.com/qmhc) +- 💄 Fix that global token should be able to override component style. [#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc) +- 🇱🇹 Add missing i18n for `lt_LT` locale. [#42664](https://github.com/ant-design/ant-design/pull/42664) [@Digital-512](https://github.com/Digital-512) +- RTL + - 💄 Fix ColorPicker style in RTL mode. [#42716](https://github.com/ant-design/ant-design/pull/42716) [@RedJue](https://github.com/RedJue) + - 💄 Fix Anchor track position in RTL mode. [#42706](https://github.com/ant-design/ant-design/pull/42706) [@qmhc](https://github.com/qmhc) + ## 5.5.1 `2023-05-22` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 700327461d..e9b07178e7 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -15,6 +15,29 @@ timeline: true --- +## 5.5.2 + +`2023-05-30` + +- 🐞 修复 ColorPicker 组件悬停边界问题。[#42669](https://github.com/ant-design/ant-design/pull/42669) [@RedJue](https://github.com/RedJue) +- 🐞 修复 Menu 组件 `overflowedIndicatorClassName` 覆盖了原本的 class 的问题。[#42692](https://github.com/ant-design/ant-design/pull/42692) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Select 组件在某些情况下显示乱码问题。[#42651](https://github.com/ant-design/ant-design/pull/42651) [@895433995](https://github.com/895433995) +- 🐞 修复 Card 组件，当 Image 设置 `cover` 属性时，悬停蒙版没有圆角属性，导致 UI 异常。[#42642](https://github.com/ant-design/ant-design/pull/42642) [@iNeedToCopy](https://github.com/iNeedToCopy) +- 🐞 修复 Checkbox 和 label 不对齐的问题。[#42590](https://github.com/ant-design/ant-design/pull/42590) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复使用 ConfigProvider 会导致未使用的 Form 组件也被打包的问题。[#42604](https://github.com/ant-design/ant-design/pull/42604) +- 🐞 修复 InputNumber 和其他组件无法基线对齐的问题。[#42580](https://github.com/ant-design/ant-design/pull/42580) +- 🐞 修复 Badge 组件中旋转的 `icon` 动画。[#42575](https://github.com/ant-design/ant-design/pull/42575) [@MadCcc](https://github.com/MadCcc) +- 📦 优化 Form `setFieldsValue` 相关代码以降低打包尺寸。[#42635](https://github.com/ant-design/ant-design/pull/42635) +- 💄 优化 Image 组件预览组样式。[#42675](https://github.com/ant-design/ant-design/pull/42675) [@kiner-tang](https://github.com/kiner-tang) +- 💄 修复 Tag 无边框样式在 `error` 等状态下不生效的问题。[#42619](https://github.com/ant-design/ant-design/pull/42619) [@li-jia-nan](https://github.com/li-jia-nan) +- 💄 修复 Table `rowSpan` 悬浮高亮背景颜色丢失的问题。[#42572](https://github.com/ant-design/ant-design/pull/42572) +- 💄 修复 Pagination 在禁用状态下 link 图标和 ellipsis hover 时的样式。[#42541](https://github.com/ant-design/ant-design/pull/42541) [@qmhc](https://github.com/qmhc) +- 💄 修复部分全局 Token 无法覆盖组件样式的问题。[#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc) +- 🇱🇹 为 `lt_LT` 添加缺失的部分文案。[#42664](https://github.com/ant-design/ant-design/pull/42664) [@Digital-512](https://github.com/Digital-512) +- RTL + - 💄 修复 ColorPicker 组件 RTL 模式样式。[#42716](https://github.com/ant-design/ant-design/pull/42716) [@RedJue](https://github.com/RedJue) + - 💄 修复 Anchor RTL 模式下轨道的位置。[#42706](https://github.com/ant-design/ant-design/pull/42706) [@qmhc](https://github.com/qmhc) + ## 5.5.1 `2023-05-22` diff --git a/package.json b/package.json index 73f205f2da..e3df4c6701 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.5.1", + "version": "5.5.2", "packageManager": "^npm@9.0.0", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", @@ -324,4 +324,4 @@ "*.{ts,tsx,js,jsx}": "prettier --ignore-unknown --write", "*.{json,less,md}": "prettier --ignore-unknown --write" } -} \ No newline at end of file +} From d890b59c2fece8c622169ed33f0b28c871683979 Mon Sep 17 00:00:00 2001 From: Wuxh Date: Tue, 30 May 2023 13:14:30 +0800 Subject: [PATCH 13/27] docs(auto-complete): supplement bordered document (#42714) * docs(auto-complete): supplement `bordered` document * test: update snapshot * Update components/auto-complete/demo/borderless.tsx --- .../__snapshots__/demo-extend.test.ts.snap | 47 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 34 ++++++++++++++ components/auto-complete/demo/borderless.md | 7 +++ components/auto-complete/demo/borderless.tsx | 26 ++++++++++ components/auto-complete/index.en-US.md | 2 + components/auto-complete/index.zh-CN.md | 2 + 6 files changed, 118 insertions(+) create mode 100644 components/auto-complete/demo/borderless.md create mode 100644 components/auto-complete/demo/borderless.tsx diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap index 74e10a5422..18443f6349 100644 --- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -95,6 +95,53 @@ Array [ ] `; +exports[`renders components/auto-complete/demo/borderless.tsx extend context correctly 1`] = ` +
+
+ + + + + Borderless + +
+
+
+
+
+
+
+`; + exports[`renders components/auto-complete/demo/certain-category.tsx extend context correctly 1`] = `
+
+ + + + + Borderless + +
+
+`; + exports[`renders components/auto-complete/demo/certain-category.tsx correctly 1`] = `
({ + value: str.repeat(repeat), +}); + +const App: React.FC = () => { + const [options, setOptions] = useState<{ value: string }[]>([]); + + const getPanelValue = (searchText: string) => + !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)]; + + return ( + setOptions(getPanelValue(text))} + onSelect={globalThis.console.log} + bordered={false} + /> + ); +}; + +export default App; diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 0626e6585f..235e80f8ec 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -32,6 +32,7 @@ The differences with Select are: Lookup-Patterns - Certain Category Lookup-Patterns - Uncertain Category Status +Borderless Debug in Form _InternalPanelDoNotUseOrYouWillBeFired @@ -42,6 +43,7 @@ The differences with Select are: | allowClear | Show clear button | boolean | false | | | autoFocus | If get focus when component mounted | boolean | false | | | backfill | If backfill selected item the input when using keyboard | boolean | false | | +| bordered | Whether has border style | boolean | true | | | children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | | | children (for dataSource) | Data source to auto complete | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | | | defaultActiveFirstOption | Whether active first option by default | boolean | true | | diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index cca99d6d62..d87574e3bb 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -33,6 +33,7 @@ demo: 查询模式 - 确定类目 查询模式 - 不确定类目 自定义状态 +无边框 在 Form 中 Debug \_InternalPanelDoNotUseOrYouWillBeFired @@ -43,6 +44,7 @@ demo: | allowClear | 支持清除 | boolean | false | | | autoFocus | 自动获取焦点 | boolean | false | | | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | | +| bordered | 是否有边框 | boolean | true | | | children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | | | children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | | | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | | From 64fa8ed962b2d5adeb9e4fe109970d91cb7777ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 30 May 2023 14:18:55 +0800 Subject: [PATCH 14/27] feat: drawer panel support event listener (#42718) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e3df4c6701..11e92acd61 100644 --- a/package.json +++ b/package.json @@ -126,7 +126,7 @@ "rc-checkbox": "~3.0.0", "rc-collapse": "~3.5.2", "rc-dialog": "~9.1.0", - "rc-drawer": "~6.1.1", + "rc-drawer": "~6.2.0", "rc-dropdown": "~4.1.0", "rc-field-form": "~1.32.0", "rc-image": "~5.16.0", From 99924dddc55c53cbc0dbe4961df8ba74d89d03ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 30 May 2023 22:15:23 +0800 Subject: [PATCH 15/27] docs: update docs (#42735) --- components/popconfirm/demo/placement.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md index c61d066a7b..0ec797858c 100755 --- a/components/popconfirm/demo/placement.md +++ b/components/popconfirm/demo/placement.md @@ -1,10 +1,10 @@ ## zh-CN -位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrowPointAtCenter`。 +位置有十二个方向。如需箭头指向目标元素中心，可以设置 `arrow: { pointAtCenter: true }`。 ## en-US -There are 12 `placement` options available. Use `arrowPointAtCenter` if you want the arrow to point at the center of target. +There are 12 `placement` options available. Use `arrow: { pointAtCenter: true }` if you want the arrow to point at the center of target.