From bf2d70c7e2745bcee31774a7b5c283278e5d0344 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Wed, 29 Nov 2023 11:09:33 +0800 Subject: [PATCH 01/10] fix: notification icon line-height (#46148) --- components/notification/style/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/notification/style/index.ts b/components/notification/style/index.ts index 48e95294cd3b..70b1e979ad07 100644 --- a/components/notification/style/index.ts +++ b/components/notification/style/index.ts @@ -115,7 +115,7 @@ export const genNoticeStyle = (token: NotificationToken): CSSObject => { [`${noticeCls}-icon`]: { position: 'absolute', fontSize: notificationIconSize, - lineHeight: 0, + lineHeight: 1, // icon-font [`&-success${iconCls}`]: { From aed105b6db44a8483ab9dd8c855f458c1ecd8c11 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 29 Nov 2023 12:32:15 +0800 Subject: [PATCH 02/10] fix: fix site home page banner min-height (#46146) --- .../index/components/BannerRecommends.tsx | 34 ++++++--- .dumi/theme/slots/Header/index.tsx | 69 ++----------------- 2 files changed, 27 insertions(+), 76 deletions(-) diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx index 25e254e54324..4d794126af3a 100644 --- a/.dumi/pages/index/components/BannerRecommends.tsx +++ b/.dumi/pages/index/components/BannerRecommends.tsx @@ -1,17 +1,19 @@ import * as React from 'react'; -import { createStyles, css, useTheme } from 'antd-style'; -import classNames from 'classnames'; import type { FC } from 'react'; import { useContext } from 'react'; -import { Typography, Skeleton, Carousel, Badge } from 'antd'; -import type { Extra, Icon } from './util'; +import { Badge, Carousel, Skeleton, Typography } from 'antd'; +import { createStyles, css, useTheme } from 'antd-style'; +import classNames from 'classnames'; + +import useLocale from '../../../hooks/useLocale'; import SiteContext from '../../../theme/slots/SiteContext'; +import type { Extra, Icon } from './util'; import { getCarouselStyle, useSiteData } from './util'; -import useLocale from '../../../hooks/useLocale'; const useStyle = createStyles(({ token }) => { const { carousel } = getCarouselStyle(); - + const [, lang] = useLocale(); + console.log('lang', lang); return { itemBase: css` display: flex; @@ -19,13 +21,21 @@ const useStyle = createStyles(({ token }) => { flex-direction: column; align-items: stretch; text-decoration: none; - background: ${token.colorBgContainer}; + background-color: ${token.colorBgContainer}; border: ${token.lineWidth}px solid ${token.colorBorderSecondary}; border-radius: ${token.borderRadiusLG}px; transition: all ${token.motionDurationSlow}; padding-block: ${token.paddingMD}px; padding-inline: ${token.paddingLG}px; `, + minHeight: + lang === 'cn' + ? css` + min-height: calc(152px - ${token.paddingMD}px * 2); + ` + : css` + min-height: calc(176px - ${token.paddingMD}px * 2); + `, cardItem: css` &:hover { box-shadow: ${token.boxShadowCard}; @@ -58,7 +68,7 @@ interface RecommendItemProps { icons: Icon[]; className?: string; } -const RecommendItem = ({ extra, index, icons, className }: RecommendItemProps) => { +const RecommendItem: React.FC = ({ extra, index, icons, className }) => { const token = useTheme(); const { styles } = useStyle(); @@ -72,7 +82,7 @@ const RecommendItem = ({ extra, index, icons, className }: RecommendItemProps) = key={extra?.title} href={extra.href} target="_blank" - className={classNames(styles.itemBase, className)} + className={classNames(styles.itemBase, styles.minHeight, className)} rel="noreferrer" > {extra?.title} @@ -120,7 +130,7 @@ export const BannerRecommendsFallback: FC = () => { ); }; -export default function BannerRecommends() { +const BannerRecommends: React.FC = () => { const { styles } = useStyle(); const [, lang] = useLocale(); const { isMobile } = React.useContext(SiteContext); @@ -159,4 +169,6 @@ export default function BannerRecommends() { )} ); -} +}; + +export default BannerRecommends; diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 22dd3a92ed54..be98683974c2 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -1,15 +1,13 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { GithubOutlined, MenuOutlined } from '@ant-design/icons'; -import { Alert, Col, ConfigProvider, Popover, Row, Select } from 'antd'; +import { Col, Popover, Row, Select } from 'antd'; import { createStyles } from 'antd-style'; import classNames from 'classnames'; -import dayjs from 'dayjs'; import { useLocation, useSiteData } from 'dumi'; import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; import useLocale from '../../../hooks/useLocale'; import DirectionIcon from '../../common/DirectionIcon'; -import { ANT_DESIGN_NOT_SHOW_BANNER } from '../../layouts/GlobalLayout'; import * as utils from '../../utils'; import { getThemeConfig } from '../../utils'; import type { SiteContextProps } from '../SiteContext'; @@ -23,21 +21,6 @@ import SwitchBtn from './SwitchBtn'; const RESPONSIVE_XS = 1120; const RESPONSIVE_SM = 1200; -const locales = { - cn: { - message: 'Galacean Effects · 所见即所得的动效新方案。', - shortMessage: 'Galacean Effects · 所见即所得的动效新方案。', - more: '前往了解', - link: 'https://galacean.antgroup.com/effects/', - }, - en: { - message: '', - shortMessage: '', - more: '', - link: '', - }, -}; - const useStyle = createStyles(({ token, css }) => { const searchIconColor = '#ced4d9'; @@ -124,12 +107,7 @@ const useStyle = createStyles(({ token, css }) => { padding: 0, }, }, - banner: css` - width: 100%; - text-align: center; - word-break: keep-all; - user-select: none; - `, + link: css` margin-left: 10px; @@ -153,7 +131,7 @@ interface HeaderState { // ================================= Header ================================= const Header: React.FC = () => { - const [locale, lang] = useLocale(locales); + const [, lang] = useLocale(); const { pkg } = useSiteData(); @@ -163,8 +141,7 @@ const Header: React.FC = () => { windowWidth: 1400, searching: false, }); - const { direction, isMobile, bannerVisible, updateSiteConfig } = - useContext(SiteContext); + const { direction, isMobile, updateSiteConfig } = useContext(SiteContext); const pingTimer = useRef | null>(null); const location = useLocation(); const { pathname, search } = location; @@ -186,13 +163,6 @@ const Header: React.FC = () => { const onDirectionChange = () => { updateSiteConfig({ direction: direction !== 'rtl' ? 'rtl' : 'ltr' }); }; - const onBannerClose = () => { - updateSiteConfig({ bannerVisible: false }); - - if (utils.isLocalStorageNameSupported()) { - localStorage.setItem(ANT_DESIGN_NOT_SHOW_BANNER, dayjs().toISOString()); - } - }; useEffect(() => { handleHideMenu(); @@ -366,37 +336,6 @@ const Header: React.FC = () => { )} - {isZhCN && bannerVisible && ( - - - {isMobile ? locale.shortMessage : locale.message} - { - window.gtag?.('event', '点击', { - event_category: 'top_banner', - event_label: locale.link, - }); - }} - > - {locale.more} - - - } - type="info" - banner - closable - showIcon={false} - onClose={onBannerClose} - /> - - )} From 735553503e219edc421ef03ee61d559fd7f1b9b6 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Wed, 29 Nov 2023 19:05:19 +0800 Subject: [PATCH 03/10] docs: update banner (#46167) --- .../index/components/BannerRecommends.tsx | 51 +++++++------- .dumi/theme/slots/Header/index.tsx | 69 +++++++++++++++++-- 2 files changed, 90 insertions(+), 30 deletions(-) diff --git a/.dumi/pages/index/components/BannerRecommends.tsx b/.dumi/pages/index/components/BannerRecommends.tsx index 4d794126af3a..0b9b7664bdfd 100644 --- a/.dumi/pages/index/components/BannerRecommends.tsx +++ b/.dumi/pages/index/components/BannerRecommends.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import type { FC } from 'react'; import { useContext } from 'react'; import { Badge, Carousel, Skeleton, Typography } from 'antd'; -import { createStyles, css, useTheme } from 'antd-style'; +import { createStyles, useTheme } from 'antd-style'; import classNames from 'classnames'; import useLocale from '../../../hooks/useLocale'; @@ -10,32 +10,31 @@ import SiteContext from '../../../theme/slots/SiteContext'; import type { Extra, Icon } from './util'; import { getCarouselStyle, useSiteData } from './util'; -const useStyle = createStyles(({ token }) => { +const useStyle = createStyles(({ token, css, cx }) => { const { carousel } = getCarouselStyle(); - const [, lang] = useLocale(); - console.log('lang', lang); + + const itemBase = css` + display: flex; + flex: 1 1 0; + flex-direction: column; + align-items: stretch; + text-decoration: none; + background: ${token.colorBgContainer}; + border: ${token.lineWidth}px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusLG}px; + transition: all ${token.motionDurationSlow}; + padding-block: ${token.paddingMD}px; + padding-inline: ${token.paddingLG}px; + box-sizing: border-box; + `; + return { - itemBase: css` - display: flex; - flex: 1 1 0; - flex-direction: column; - align-items: stretch; - text-decoration: none; - background-color: ${token.colorBgContainer}; - border: ${token.lineWidth}px solid ${token.colorBorderSecondary}; - border-radius: ${token.borderRadiusLG}px; - transition: all ${token.motionDurationSlow}; - padding-block: ${token.paddingMD}px; - padding-inline: ${token.paddingLG}px; + itemBase, + ribbon: css` + & > .${cx(itemBase)} { + height: 100%; + } `, - minHeight: - lang === 'cn' - ? css` - min-height: calc(152px - ${token.paddingMD}px * 2); - ` - : css` - min-height: calc(176px - ${token.paddingMD}px * 2); - `, cardItem: css` &:hover { box-shadow: ${token.boxShadowCard}; @@ -82,7 +81,7 @@ const RecommendItem: React.FC = ({ extra, index, icons, clas key={extra?.title} href={extra.href} target="_blank" - className={classNames(styles.itemBase, styles.minHeight, className)} + className={classNames(styles.itemBase, className)} rel="noreferrer" > {extra?.title} @@ -98,7 +97,7 @@ const RecommendItem: React.FC = ({ extra, index, icons, clas if (index === 0) { return ( - + {card} ); diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index be98683974c2..22dd3a92ed54 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -1,13 +1,15 @@ import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; import { GithubOutlined, MenuOutlined } from '@ant-design/icons'; -import { Col, Popover, Row, Select } from 'antd'; +import { Alert, Col, ConfigProvider, Popover, Row, Select } from 'antd'; import { createStyles } from 'antd-style'; import classNames from 'classnames'; +import dayjs from 'dayjs'; import { useLocation, useSiteData } from 'dumi'; import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; import useLocale from '../../../hooks/useLocale'; import DirectionIcon from '../../common/DirectionIcon'; +import { ANT_DESIGN_NOT_SHOW_BANNER } from '../../layouts/GlobalLayout'; import * as utils from '../../utils'; import { getThemeConfig } from '../../utils'; import type { SiteContextProps } from '../SiteContext'; @@ -21,6 +23,21 @@ import SwitchBtn from './SwitchBtn'; const RESPONSIVE_XS = 1120; const RESPONSIVE_SM = 1200; +const locales = { + cn: { + message: 'Galacean Effects · 所见即所得的动效新方案。', + shortMessage: 'Galacean Effects · 所见即所得的动效新方案。', + more: '前往了解', + link: 'https://galacean.antgroup.com/effects/', + }, + en: { + message: '', + shortMessage: '', + more: '', + link: '', + }, +}; + const useStyle = createStyles(({ token, css }) => { const searchIconColor = '#ced4d9'; @@ -107,7 +124,12 @@ const useStyle = createStyles(({ token, css }) => { padding: 0, }, }, - + banner: css` + width: 100%; + text-align: center; + word-break: keep-all; + user-select: none; + `, link: css` margin-left: 10px; @@ -131,7 +153,7 @@ interface HeaderState { // ================================= Header ================================= const Header: React.FC = () => { - const [, lang] = useLocale(); + const [locale, lang] = useLocale(locales); const { pkg } = useSiteData(); @@ -141,7 +163,8 @@ const Header: React.FC = () => { windowWidth: 1400, searching: false, }); - const { direction, isMobile, updateSiteConfig } = useContext(SiteContext); + const { direction, isMobile, bannerVisible, updateSiteConfig } = + useContext(SiteContext); const pingTimer = useRef | null>(null); const location = useLocation(); const { pathname, search } = location; @@ -163,6 +186,13 @@ const Header: React.FC = () => { const onDirectionChange = () => { updateSiteConfig({ direction: direction !== 'rtl' ? 'rtl' : 'ltr' }); }; + const onBannerClose = () => { + updateSiteConfig({ bannerVisible: false }); + + if (utils.isLocalStorageNameSupported()) { + localStorage.setItem(ANT_DESIGN_NOT_SHOW_BANNER, dayjs().toISOString()); + } + }; useEffect(() => { handleHideMenu(); @@ -336,6 +366,37 @@ const Header: React.FC = () => { )} + {isZhCN && bannerVisible && ( + + + {isMobile ? locale.shortMessage : locale.message} + { + window.gtag?.('event', '点击', { + event_category: 'top_banner', + event_label: locale.link, + }); + }} + > + {locale.more} + + + } + type="info" + banner + closable + showIcon={false} + onClose={onBannerClose} + /> + + )} From 005fc972cc03b3d0aa2eedf979fa62c1bae4da56 Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 29 Nov 2023 20:19:49 +0800 Subject: [PATCH 04/10] chore: fix form demo style (#46156) --- .../__snapshots__/demo-extend.test.ts.snap | 62 ++++++++++++------- .../__snapshots__/demo.test.tsx.snap | 62 ++++++++++++------- components/form/demo/control-hooks.tsx | 22 ++++--- 3 files changed, 90 insertions(+), 56 deletions(-) diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index a2cd43e0469b..a9d920c0bd5c 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1891,30 +1891,46 @@ exports[`renders components/form/demo/control-hooks.tsx extend context correctly
- - - +
+ +
+
+ +
+
+ +
+
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 8938d79790d5..27c01873ded4 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -1418,30 +1418,46 @@ exports[`renders components/form/demo/control-hooks.tsx correctly 1`] = `
- - - +
+ +
+
+ +
+
+ +
+
diff --git a/components/form/demo/control-hooks.tsx b/components/form/demo/control-hooks.tsx index 9dd36a8c9439..d233a0720550 100644 --- a/components/form/demo/control-hooks.tsx +++ b/components/form/demo/control-hooks.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Form, Input, Select } from 'antd'; +import { Button, Form, Input, Select, Space } from 'antd'; const { Option } = Select; @@ -77,15 +77,17 @@ const App: React.FC = () => { } - - - + + + + + ); From 7488c58e1f9102f09b489c9be6001fdbd7da2432 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 30 Nov 2023 09:53:23 +0800 Subject: [PATCH 05/10] fix: Form label tooltip icon trigger Switch (#46155) * fix: Form label tooltip icon trigger Switch close https://github.com/ant-design/ant-design/issues/46154 * chore: fix test case --- components/form/FormItemLabel.tsx | 11 ++++++++++- components/form/__tests__/index.test.tsx | 1 + 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/components/form/FormItemLabel.tsx b/components/form/FormItemLabel.tsx index 8d53fff2f317..c3115c7c56be 100644 --- a/components/form/FormItemLabel.tsx +++ b/components/form/FormItemLabel.tsx @@ -102,7 +102,16 @@ const FormItemLabel: React.FC, ...restTooltipProps } = tooltipProps; const tooltipNode: React.ReactNode = ( - {React.cloneElement(icon, { className: `${prefixCls}-item-tooltip`, title: '' })} + {React.cloneElement(icon, { + className: `${prefixCls}-item-tooltip`, + title: '', + onClick: (e: React.MouseEvent) => { + // Prevent label behavior in tooltip icon + // https://github.com/ant-design/ant-design/issues/46154 + e.preventDefault(); + }, + tabIndex: null, + })} ); diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index 387bdf586c7f..273e8949213c 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -1284,6 +1284,7 @@ describe('Form', () => { ); fireEvent.mouseEnter(container.querySelector('.anticon-question-circle')!); + fireEvent.click(container.querySelector('.anticon-question-circle')!); await waitFakeTimer(); expect(container.querySelector('.ant-tooltip-inner')).toHaveTextContent('Bamboo'); From 55183fa304dfc94764a0903c9b8a1abd1e865081 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 30 Nov 2023 11:06:41 +0800 Subject: [PATCH 06/10] type: update FloatButtonProps type with React.DOMAttributes (#46175) * type: update FloatButtonProps type with React.DOMAttributes * test: add test --- components/float-button/BackTop.tsx | 10 ++++++++-- components/float-button/FloatButton.tsx | 6 +++--- components/float-button/__tests__/index.test.tsx | 16 +++++++++++++--- components/float-button/demo/basic.tsx | 2 +- components/float-button/interface.ts | 13 +++++++------ 5 files changed, 32 insertions(+), 15 deletions(-) diff --git a/components/float-button/BackTop.tsx b/components/float-button/BackTop.tsx index e955fa575fd3..ccdb3b819167 100644 --- a/components/float-button/BackTop.tsx +++ b/components/float-button/BackTop.tsx @@ -10,7 +10,13 @@ import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; import FloatButtonGroupContext from './context'; import FloatButton, { floatButtonPrefixCls } from './FloatButton'; -import type { BackTopProps, FloatButtonProps, FloatButtonRef, FloatButtonShape } from './interface'; +import type { + BackTopProps, + FloatButtonElement, + FloatButtonProps, + FloatButtonRef, + FloatButtonShape, +} from './interface'; import useStyle from './style'; const BackTop = React.forwardRef((props, ref) => { @@ -58,7 +64,7 @@ const BackTop = React.forwardRef((props, ref) => { }; }, [target]); - const scrollToTop: React.MouseEventHandler = (e) => { + const scrollToTop: React.MouseEventHandler = (e) => { scrollTo(0, { getContainer: target || getDefaultTarget, duration }); onClick?.(e); }; diff --git a/components/float-button/FloatButton.tsx b/components/float-button/FloatButton.tsx index 0d726e124575..f794ae94d65e 100644 --- a/components/float-button/FloatButton.tsx +++ b/components/float-button/FloatButton.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef, useContext, useMemo } from 'react'; +import React, { useContext, useMemo } from 'react'; import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; @@ -13,15 +13,15 @@ import type { CompoundedComponent, FloatButtonBadgeProps, FloatButtonContentProps, + FloatButtonElement, FloatButtonProps, - FloatButtonRef, FloatButtonShape, } from './interface'; import useStyle from './style'; export const floatButtonPrefixCls = 'float-btn'; -const FloatButton = forwardRef((props, ref) => { +const FloatButton = React.forwardRef((props, ref) => { const { prefixCls: customizePrefixCls, className, diff --git a/components/float-button/__tests__/index.test.tsx b/components/float-button/__tests__/index.test.tsx index c4fddca2e669..488c0d6dae82 100644 --- a/components/float-button/__tests__/index.test.tsx +++ b/components/float-button/__tests__/index.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import FloatButton from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -38,11 +39,20 @@ describe('FloatButton', () => { rerender(); expect(container.querySelector(`.ant-float-btn-${squareShape}`)).toBeTruthy(); }); - it('support onClick', () => { + it('support onClick & onMouseEnter & onMouseLeave', () => { const onClick = jest.fn(); - const { container } = render(); - fireEvent.click(container.querySelector('.ant-float-btn')!); + const onMouseEnter = jest.fn(); + const onMouseLeave = jest.fn(); + const { container } = render( + , + ); + const element = container.querySelector('.ant-float-btn')!; + fireEvent.click(element); expect(onClick).toHaveBeenCalled(); + fireEvent.mouseEnter(element); + expect(onMouseEnter).toHaveBeenCalled(); + fireEvent.mouseLeave(element); + expect(onMouseLeave).toHaveBeenCalled(); }); it('should console Error', () => { const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {}); diff --git a/components/float-button/demo/basic.tsx b/components/float-button/demo/basic.tsx index 1d86aa14e731..0b97fd6fa99b 100644 --- a/components/float-button/demo/basic.tsx +++ b/components/float-button/demo/basic.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { FloatButton } from 'antd'; -const App: React.FC = () => console.log('click')} />; +const App: React.FC = () => console.log('onClick')} />; export default App; diff --git a/components/float-button/interface.ts b/components/float-button/interface.ts index e63b8d13e39a..f5801620c717 100644 --- a/components/float-button/interface.ts +++ b/components/float-button/interface.ts @@ -6,8 +6,10 @@ import type BackTop from './BackTop'; import type Group from './FloatButtonGroup'; import type PurePanel from './PurePanel'; +export type FloatButtonElement = HTMLAnchorElement & HTMLButtonElement; + export interface FloatButtonRef { - nativeElement: (HTMLAnchorElement & HTMLButtonElement) | null; + nativeElement: FloatButtonElement | null; } export type FloatButtonType = 'default' | 'primary'; @@ -18,7 +20,7 @@ export type FloatButtonGroupTrigger = 'click' | 'hover'; export type FloatButtonBadgeProps = Omit; -export interface FloatButtonProps { +export interface FloatButtonProps extends React.DOMAttributes { prefixCls?: string; className?: string; rootClassName?: string; @@ -31,8 +33,7 @@ export interface FloatButtonProps { href?: string; target?: React.HTMLAttributeAnchorTarget; badge?: FloatButtonBadgeProps; - onClick?: React.MouseEventHandler; - ['aria-label']?: React.HtmlHTMLAttributes['aria-label']; + ['aria-label']?: React.HtmlHTMLAttributes['aria-label']; } export interface FloatButtonContentProps extends React.DOMAttributes { @@ -57,7 +58,7 @@ export interface FloatButtonGroupProps extends FloatButtonProps { export interface BackTopProps extends Omit { visibilityHeight?: number; - onClick?: React.MouseEventHandler; + onClick?: React.MouseEventHandler; target?: () => HTMLElement | Window | Document; prefixCls?: string; children?: React.ReactNode; @@ -68,7 +69,7 @@ export interface BackTopProps extends Omit { } export type CompoundedComponent = React.ForwardRefExoticComponent< - FloatButtonProps & React.RefAttributes + FloatButtonProps & React.RefAttributes > & { Group: typeof Group; BackTop: typeof BackTop; From c656d8baf782ecb521c081668c6453ddb828f6e4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 30 Nov 2023 14:27:36 +0800 Subject: [PATCH 07/10] chore: improve select demo description (#46184) * chore: upgrade select demo description Signed-off-by: afc163 * Update coordinate.md Signed-off-by: afc163 --------- Signed-off-by: afc163 --- components/select/demo/coordinate.md | 8 ++------ components/select/demo/tags.md | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md index 1cdc8b618ff3..35819e654fa1 100644 --- a/components/select/demo/coordinate.md +++ b/components/select/demo/coordinate.md @@ -1,11 +1,7 @@ ## zh-CN -省市联动是典型的例子。 - -推荐使用 [Cascader](/components/cascader/) 组件。 +省市联动是典型的例子，联动场景我们更推荐使用 [Cascader](/components/cascader-cn/) 组件。 ## en-US -Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated. - -Using the [Cascader](/components/cascader) component is strongly recommended instead as it is more flexible and capable. +Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated. [Cascader](/components/cascader) component is strongly recommended in this case. diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md index db1c1ee78365..d6a845c4ee7f 100644 --- a/components/select/demo/tags.md +++ b/components/select/demo/tags.md @@ -1,7 +1,7 @@ ## zh-CN -tags select，随意输入的内容（scroll the menu）。 +标签形式的多选框，用户亦可自由输入。 ## en-US -Select with tags, transform input to tag (scroll the menu). +Allow user to select tags from list or input custom tag. From 1235d8f54a3c40b537b9997c28b8fb7b750c31f2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 30 Nov 2023 15:02:32 +0800 Subject: [PATCH 08/10] chore: workflow add welcome back (#46186) --- .github/workflows/pr-contributor-welcome.yml | 28 ++++++++++++++++++++ components/qr-code/__tests__/index.test.tsx | 1 + 2 files changed, 29 insertions(+) create mode 100644 .github/workflows/pr-contributor-welcome.yml diff --git a/.github/workflows/pr-contributor-welcome.yml b/.github/workflows/pr-contributor-welcome.yml new file mode 100644 index 000000000000..c7d441f2a95f --- /dev/null +++ b/.github/workflows/pr-contributor-welcome.yml @@ -0,0 +1,28 @@ +# 当 PR 被合并时，留言欢迎加入共建群 +name: PullRequest Contributor Welcome + +on: + pull_request: + types: + - closed + paths: + - 'components/**' + +jobs: + comment: + if: github.event.pull_request.merged == true && github.repository == 'ant-design/ant-design' + runs-on: ubuntu-latest + steps: + - name: Comment on PR + uses: actions-cool/maintain-one-comment@v3 + with: + token: ${{ secrets.GITHUB_TOKEN }} + body: | + 🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR). + + 🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。 + + + + + body-include: '' \ No newline at end of file diff --git a/components/qr-code/__tests__/index.test.tsx b/components/qr-code/__tests__/index.test.tsx index 26d83994ecd1..0f588649942a 100644 --- a/components/qr-code/__tests__/index.test.tsx +++ b/components/qr-code/__tests__/index.test.tsx @@ -1,4 +1,5 @@ import React, { useState } from 'react'; + import QRCode from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; From 6d963b79492894e573e9a0406f8fac4ec15f2c2a Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 30 Nov 2023 18:03:38 +0800 Subject: [PATCH 09/10] style: Alert background could be linear-gradient (#46188) --- .dumi/theme/slots/Header/index.tsx | 9 ++++++++- components/alert/style/index.ts | 2 +- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 22dd3a92ed54..a5d194778240 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -367,7 +367,14 @@ const Header: React.FC = () => { )} {isZhCN && bannerVisible && ( - + ({ - backgroundColor: bgColor, + background: bgColor, border: `${token.lineWidth}px ${token.lineType} ${borderColor}`, [`${alertCls}-icon`]: { color: iconColor, From acf056ce725a36a0180f892d5ddddd3eaf60d6c3 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Thu, 30 Nov 2023 20:14:35 +0800 Subject: [PATCH 10/10] ci: remove argos usage (#46185) --- .circleci/config.yml | 33 --------- .../trigger-argos-with-whitelist-users.yml | 71 ------------------- README-zh_CN.md | 4 +- README.md | 4 +- argos-white-listed-users | 1 - package.json | 2 - scripts/argos-upload.ts | 65 ----------------- 7 files changed, 2 insertions(+), 178 deletions(-) delete mode 100644 .circleci/config.yml delete mode 100644 .github/workflows/trigger-argos-with-whitelist-users.yml delete mode 100644 argos-white-listed-users delete mode 100644 scripts/argos-upload.ts diff --git a/.circleci/config.yml b/.circleci/config.yml deleted file mode 100644 index 1301ae42fcbc..000000000000 --- a/.circleci/config.yml +++ /dev/null @@ -1,33 +0,0 @@ -# Use the latest 2.1 version of CircleCI pipeline process engine. -# See: https://circleci.com/docs/2.0/configuration-reference -version: 2.1 - -# Define a job to be invoked later in a workflow. -# See: https://circleci.com/docs/2.0/configuration-reference/#jobs -jobs: - test-argos-ci: - docker: - - image: cimg/node:21.2-browsers - steps: - - checkout - - run: - name: Install node_modules - command: yarn - - run: - name: Build dist file - command: npm run dist:esbuild - - run: - name: Run image screenshot tests - command: npm run test-image - - run: - name: Upload screenshots to Argos CI - command: npm run argos - # The resource_class feature allows configuring CPU and RAM resources for each job. Different resource classes are available for different executors. https://circleci.com/docs/2.0/configuration-reference/#resourceclass - resource_class: large - -# Invoke jobs via workflows -# See: https://circleci.com/docs/2.0/configuration-reference/#workflows -workflows: - test-argos-ci-workflow: - jobs: - - test-argos-ci diff --git a/.github/workflows/trigger-argos-with-whitelist-users.yml b/.github/workflows/trigger-argos-with-whitelist-users.yml deleted file mode 100644 index 126f0dd67628..000000000000 --- a/.github/workflows/trigger-argos-with-whitelist-users.yml +++ /dev/null @@ -1,71 +0,0 @@ -# Due to some special reasons, some accounts are blocked by circleCI -# and cannot trigger argos jobs through circleCI. -# These accounts can be configured in the whitelist list -# and do not need to rely on circleCI to directly trigger argos in the PR workflow - -name: Trigger Argos with white-listed users - -on: [push] - -permissions: - contents: read - -jobs: - trigger_argos_with_whitelist_users: - runs-on: ubuntu-latest - - steps: - - name: Checkout repository - uses: actions/checkout@v2 - - - name: Read white listed users - id: read_users - run: | - whitelist_file="argos-white-listed-users" - if [[ -f $whitelist_file ]]; then - users=$(cat $whitelist_file) - echo "whitelisted_users=$users" >> $GITHUB_OUTPUT - fi - - - name: Check if user is whitelisted - id: check_user - run: | - whitelisted_users="${{ steps.read_users.outputs.whitelisted_users }}" - current_user="${{ github.actor }}" - if grep -Fxq "$current_user" <<< "$whitelisted_users"; then - echo "User is whitelisted" - echo "whitelisted=true" >> $GITHUB_OUTPUT - else - echo "User is not whitelisted" - echo "whitelisted=false" >> $GITHUB_OUTPUT - fi - - - name: cache package-lock.json - uses: actions/cache@v3 - with: - path: package-temp-dir - key: lock-${{ github.sha }} - - - name: create package-lock.json - run: npm i --package-lock-only --ignore-scripts - - - name: install - run: npm install - - - name: Build dist file - id: build - if: ${{ steps.check_user.outputs.whitelisted == 'true' }} - run: npm run dist:esbuild - - - name: Run image screenshot tests - id: screenshot - if: ${{ steps.check_user.outputs.whitelisted == 'true' }} - run: npm run test-image - - - name: Upload screenshots to Argos CI - id: upload - if: ${{ steps.check_user.outputs.whitelisted == 'true' }} - env: - ARGOS_TOKEN: ${{ secrets.ARGOS_TOKEN }} - ARGOS_PARALLEL_NONCE: ${{ github.run_id }}-${{ github.run_number }}-${{ github.run_attempt }} - run: npm run argos \ No newline at end of file diff --git a/README-zh_CN.md b/README-zh_CN.md index ff2c60baa56d..918fdc94e1e8 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -12,7 +12,7 @@ [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] -[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url] [![Covered by Argos Visual Testing][argos-ci-image]][argos-ci-url] +[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url] [![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url] @@ -40,8 +40,6 @@ [renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square [dumi-url]: https://github.com/umijs/dumi -[argos-ci-image]: https://argos-ci.com/badge.svg -[argos-ci-url]: https://app.argos-ci.com/ant-design/ant-design/reference diff --git a/README.md b/README.md index 18fbbcd8ea7a..e91ce3935138 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ An enterprise-class UI design language and React UI library. [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] -[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url] [![Covered by Argos Visual Testing][argos-ci-image]][argos-ci-url] +[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url] [![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url] @@ -40,8 +40,6 @@ An enterprise-class UI design language and React UI library. [renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square [dumi-url]: https://github.com/umijs/dumi -[argos-ci-image]: https://argos-ci.com/badge.svg -[argos-ci-url]: https://app.argos-ci.com/ant-design/ant-design/reference diff --git a/argos-white-listed-users b/argos-white-listed-users deleted file mode 100644 index 6553d0c5f290..000000000000 --- a/argos-white-listed-users +++ /dev/null @@ -1 +0,0 @@ -kiner-tang \ No newline at end of file diff --git a/package.json b/package.json index a351c6f3a24e..2da138124615 100644 --- a/package.json +++ b/package.json @@ -44,7 +44,6 @@ ], "scripts": { "api-collection": "antd-tools run api-collection", - "argos": "tsx scripts/argos-upload.ts", "authors": "tsx scripts/generate-authors.ts", "biome:format": "biome format --write .", "build": "npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist", @@ -166,7 +165,6 @@ "@ant-design/happy-work-theme": "^1.0.0", "@ant-design/tools": "^18.0.2", "@antv/g6": "^4.8.13", - "@argos-ci/core": "^1.0.0", "@babel/eslint-plugin": "^7.19.1", "@biomejs/biome": "^1.0.0", "@codesandbox/sandpack-react": "^2.9.0", diff --git a/scripts/argos-upload.ts b/scripts/argos-upload.ts deleted file mode 100644 index f65f82efb596..000000000000 --- a/scripts/argos-upload.ts +++ /dev/null @@ -1,65 +0,0 @@ -// Thanks to material-ui ❤️ -// Create chunks for Argos: https://github.com/mui/material-ui/pull/23518 -// https://github.com/mui/material-ui/blob/af81aae3b292ed180e7652a665fad1be2b38a7b3/scripts/pushArgos.js -import childProcess from 'child_process'; -import util from 'util'; -import argos from '@argos-ci/core'; -import glob from 'fast-glob'; -import lodashChunk from 'lodash/chunk'; - -const execFileNode = util.promisify(childProcess.execFile); - -function execFile(command: string, args: string[]) { - return execFileNode(command, args, { - cwd: process.cwd(), - env: process.env, - encoding: 'utf-8', - }); -} - -const screenshotsBase = 'imageSnapshots'; -const screenshotsChunks = `imageSnapshots-chunks`; -const BATCH_SIZE = 128; - -async function cpToTemp(screenshot: string, target: string) { - await execFile('mkdir', ['-p', target]); - await execFile('cp', [screenshot, target]); -} - -async function run() { - const screenshots = await glob(`${screenshotsBase}/**/*`); - const chunks = lodashChunk(screenshots, BATCH_SIZE); - - await Promise.all( - chunks.map((chunk, chunkIndex) => - Promise.all( - chunk.map>((screenshot) => - cpToTemp(screenshot, `${screenshotsChunks}/${chunkIndex}`), - ), - ), - ), - ); - - // eslint-disable-next-line no-console -- pipe stdout - console.log('Chunk Size:', chunks.length, '/', 'Total Snapshots:', screenshots.length); - - for (let i = 0; i < chunks.length; i += 1) { - // eslint-disable-next-line no-await-in-loop - const result = await argos.upload({ - root: `${screenshotsChunks}/${i}`, - token: process.env.ARGOS_TOKEN, - parallel: { - total: chunks.length, - nonce: process.env.ARGOS_PARALLEL_NONCE || process.env.CIRCLE_BUILD_NUM || '', - }, - }); - // eslint-disable-next-line no-console -- pipe stdout - console.log(i, '>', result); - } -} - -run().catch((error) => { - // eslint-disable-next-line no-console - console.error(error); - process.exit(1); -});