diff --git a/.circleci/config.yml b/.circleci/config.yml index ed1f4c5e93cd..6e9cf06d5d97 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -7,7 +7,9 @@ version: 2.1 jobs: test-argos-ci: docker: - - image: cimg/node:16.20-browsers + - image: cimg/node:18.17-browsers + environment: + NODE_OPTIONS: --openssl-legacy-provider steps: - checkout - run: diff --git a/.dumi/hooks/useDark.tsx b/.dumi/hooks/useDark.tsx new file mode 100644 index 000000000000..6b31dee12c40 --- /dev/null +++ b/.dumi/hooks/useDark.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +export const DarkContext = React.createContext(false); + +export default function useDark() { + return React.useContext(DarkContext); +} diff --git a/.dumi/hooks/useThemeAnimation.ts b/.dumi/hooks/useThemeAnimation.ts new file mode 100644 index 000000000000..0ca2049bd536 --- /dev/null +++ b/.dumi/hooks/useThemeAnimation.ts @@ -0,0 +1,126 @@ +import { useEffect, useRef } from 'react'; +import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS'; + +import theme from '../../components/theme'; + +const viewTransitionStyle = ` +::view-transition-old(root), +::view-transition-new(root) { + animation: none; + mix-blend-mode: normal; +} + +.dark::view-transition-old(root) { + z-index: 1; +} + +.dark::view-transition-new(root) { + z-index: 999; +} + +::view-transition-old(root) { + z-index: 999; +} + +::view-transition-new(root) { + z-index: 1; +} +`; + +const useThemeAnimation = () => { + const { + token: { colorBgElevated }, + } = theme.useToken(); + + const animateRef = useRef<{ + colorBgElevated: string; + }>({ + colorBgElevated, + }); + + const startAnimationTheme = (clipPath: string[], isDark: boolean) => { + updateCSS( + ` + * { + transition: none !important; + } + `, + 'disable-transition', + ); + + document.documentElement + .animate( + { + clipPath: isDark ? [...clipPath].reverse() : clipPath, + }, + { + duration: 500, + easing: 'ease-in', + pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)', + }, + ) + .addEventListener('finish', () => { + removeCSS('disable-transition'); + }); + }; + + const toggleAnimationTheme = (event: MouseEvent, isDark: boolean) => { + // @ts-ignore + if (!(event && typeof document.startViewTransition === 'function')) return; + const x = event.clientX; + const y = event.clientY; + const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y)); + updateCSS( + ` + [data-prefers-color='dark'] { + color-scheme: light !important; + } + + [data-prefers-color='light'] { + color-scheme: dark !important; + } + `, + 'color-scheme', + ); + document + // @ts-ignore + .startViewTransition(async () => { + // wait for theme change end + while (colorBgElevated === animateRef.current.colorBgElevated) { + // eslint-disable-next-line no-await-in-loop + await new Promise((resolve) => { + setTimeout(resolve, 1000 / 60); + }); + } + const root = document.documentElement; + root.classList.remove(isDark ? 'dark' : 'light'); + root.classList.add(isDark ? 'light' : 'dark'); + }) + .ready.then(() => { + const clipPath = [ + `circle(0px at ${x}px ${y}px)`, + `circle(${endRadius}px at ${x}px ${y}px)`, + ]; + removeCSS('color-scheme'); + startAnimationTheme(clipPath, isDark); + }); + }; + + // inject transition style + useEffect(() => { + // @ts-ignore + if (typeof document.startViewTransition === 'function') { + updateCSS(viewTransitionStyle, 'view-transition-style'); + } + }, []); + + useEffect(() => { + if (colorBgElevated !== animateRef.current.colorBgElevated) { + animateRef.current.colorBgElevated = colorBgElevated; + } + }, [colorBgElevated]); + + return toggleAnimationTheme; +}; + +export default useThemeAnimation; diff --git a/.dumi/mirror-modal.js b/.dumi/mirror-modal.js new file mode 100644 index 000000000000..71ce7b2e28f4 --- /dev/null +++ b/.dumi/mirror-modal.js @@ -0,0 +1,172 @@ +(function createMirrorModal() { + if ( + (navigator.languages.includes('zh') || navigator.languages.includes('zh-CN')) && + /-cn\/?$/.test(window.location.pathname) && + !['ant-design.gitee.io', 'ant-design.antgroup.com'].includes(window.location.hostname) + ) { + const ANTD_DOT_NOT_SHOW_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; + + const lastShowTime = window.localStorage.getItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL); + if ( + lastShowTime && + lastShowTime !== 'true' && + Date.now() - new Date(lastShowTime).getTime() < 7 * 24 * 60 * 60 * 1000 + ) { + return; + } + + const style = document.createElement('style'); + style.innerHTML = ` + @keyframes mirror-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + @keyframes mirror-zoom-in { + from { + transform: scale(0.8); + } + to { + transform: scale(1); + } + } + + .mirror-modal-mask { + position: fixed; + inset: 0; + height: '100vh'; + width: '100vw'; + background: rgba(0, 0, 0, 0.3); + z-index: 9999; + animation: mirror-fade-in 0.3s forwards; + } + + .mirror-modal-dialog { + position: fixed; + inset: 0; + top: 120px; + margin-left: auto; + margin-right: auto; + width: 400px; + height: 120px; + display: flex; + align-items: center; + flex-direction: column; + border-radius: 8px; + border: 1px solid #eee; + background: #fff; + padding: 20px 24px; + box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + animation: mirror-zoom-in 0.3s forwards; + } + + .mirror-modal-title { + font-size: 16px; + font-weight: 500; + align-self: flex-start; + margin-bottom: 8px; + } + + .mirror-modal-content { + font-size: 14px; + align-self: flex-start; + margin-bottom: 16px; + } + + .mirror-modal-btns { + align-self: flex-end; + margin-top: auto; + display: flex; + align-items: center; + } + + .mirror-modal-btn { + border-radius: 6px; + cursor: pointer; + height: 32px; + box-sizing: border-box; + font-size: 14px; + padding: 4px 16px; + display: inline-flex; + align-items: center; + text-decoration: none; + transition: all 0.2s; + } + + .mirror-modal-confirm-btn { + background: #1677ff; + color: #fff; + } + + .mirror-modal-confirm-btn:hover { + background: #4096ff; + } + + .mirror-modal-confirm-btn:active { + background: #0958d9; + } + + .mirror-modal-cancel-btn { + border: 1px solid #eee; + color: #000; + margin-right: 8px; + } + + .mirror-modal-cancel-btn:hover { + border-color: #4096ff; + color: #4096ff + } + + .mirror-modal-cancel-btn:active { + border-color: #0958d9; + color: #0958d9; + } + `; + document.head.append(style); + + const modal = document.createElement('div'); + modal.className = 'mirror-modal-mask'; + + const dialog = document.createElement('div'); + dialog.className = 'mirror-modal-dialog'; + modal.append(dialog); + + const title = document.createElement('div'); + title.className = 'mirror-modal-title'; + title.innerText = '提示'; + dialog.append(title); + + const content = document.createElement('div'); + content.className = 'mirror-modal-content'; + content.innerText = '国内用户推荐访问国内镜像以获得极速体验～'; + dialog.append(content); + + const btnWrapper = document.createElement('div'); + btnWrapper.className = 'mirror-modal-btns'; + dialog.append(btnWrapper); + + const cancelBtn = document.createElement('a'); + cancelBtn.className = 'mirror-modal-cancel-btn mirror-modal-btn'; + cancelBtn.innerText = '7 天内不再显示'; + btnWrapper.append(cancelBtn); + cancelBtn.addEventListener('click', () => { + window.localStorage.setItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL, new Date().toISOString()); + document.body.removeChild(modal); + document.head.removeChild(style); + document.body.style.overflow = ''; + }); + + const confirmBtn = document.createElement('a'); + confirmBtn.className = 'mirror-modal-confirm-btn mirror-modal-btn'; + confirmBtn.href = window.location.href.replace(window.location.host, 'ant-design.antgroup.com'); + confirmBtn.innerText = '🚀 立刻前往'; + btnWrapper.append(confirmBtn); + + document.body.append(modal); + document.body.style.overflow = 'hidden'; + } +})(); diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx index 4885c7a0ba92..a528d1c4ce4a 100644 --- a/.dumi/pages/index/components/ComponentsList.tsx +++ b/.dumi/pages/index/components/ComponentsList.tsx @@ -1,21 +1,23 @@ /* eslint-disable react/jsx-pascal-case */ import React, { useContext } from 'react'; -import dayjs from 'dayjs'; import { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons'; -import { createStyles, css, useTheme } from 'antd-style'; -import classNames from 'classnames'; import { - Space, - Typography, - Tour, - Tag, - DatePicker, Alert, - Modal, + Carousel, + DatePicker, FloatButton, + Modal, Progress, - Carousel, + Space, + Tag, + Tour, + Typography, } from 'antd'; +import { createStyles, css, useTheme } from 'antd-style'; +import classNames from 'classnames'; +import dayjs from 'dayjs'; + +import useDark from '../../../hooks/useDark'; import useLocale from '../../../hooks/useLocale'; import SiteContext from '../../../theme/slots/SiteContext'; import { getCarouselStyle } from './util'; @@ -55,40 +57,45 @@ const locales = { }, }; -const useStyle = createStyles(({ token }) => { - const { carousel } = getCarouselStyle(); +const useStyle = () => { + const isRootDark = useDark(); - return { - card: css` - border-radius: ${token.borderRadius}px; - background: #f5f8ff; - padding: ${token.paddingXL}px; - flex: none; - overflow: hidden; - position: relative; - display: flex; - flex-direction: column; - align-items: stretch; + return createStyles(({ token }) => { + const { carousel } = getCarouselStyle(); - > * { + return { + card: css` + border-radius: ${token.borderRadius}px; + border: 1px solid ${isRootDark ? token.colorBorder : 'transparent'}; + background: ${isRootDark ? token.colorBgContainer : '#f5f8ff'}; + padding: ${token.paddingXL}px; flex: none; - } - `, - cardCircle: css` - position: absolute; - width: 120px; - height: 120px; - background: #1677ff; - border-radius: 50%; - filter: blur(40px); - opacity: 0.1; - `, - mobileCard: css` - height: 395px; - `, - carousel, - }; -}); + overflow: hidden; + position: relative; + display: flex; + flex-direction: column; + align-items: stretch; + + > * { + flex: none; + } + `, + cardCircle: css` + position: absolute; + width: 120px; + height: 120px; + background: #1677ff; + border-radius: 50%; + filter: blur(40px); + opacity: 0.1; + `, + mobileCard: css` + height: 395px; + `, + carousel, + }; + })(); +}; const ComponentItem: React.FC = ({ title, node, type, index }) => { const tagColor = type === 'new' ? 'processing' : 'warning'; diff --git a/.dumi/pages/index/components/DesignFramework.tsx b/.dumi/pages/index/components/DesignFramework.tsx index 4060493b23c4..1f744b343329 100644 --- a/.dumi/pages/index/components/DesignFramework.tsx +++ b/.dumi/pages/index/components/DesignFramework.tsx @@ -1,10 +1,12 @@ import React, { useContext } from 'react'; +import { Col, Row, Typography } from 'antd'; import { createStyles, useTheme } from 'antd-style'; import { Link, useLocation } from 'dumi'; -import { Col, Row, Typography } from 'antd'; + +import useDark from '../../../hooks/useDark'; import useLocale from '../../../hooks/useLocale'; -import * as utils from '../../../theme/utils'; import SiteContext from '../../../theme/slots/SiteContext'; +import * as utils from '../../../theme/utils'; const SECONDARY_LIST = [ { @@ -60,12 +62,17 @@ const locales = { }, }; -const useStyle = createStyles(({ token, css }) => ({ - card: css` +const useStyle = () => { + const isRootDark = useDark(); + + return createStyles(({ token, css }) => ({ + card: css` padding: ${token.paddingSM}px; border-radius: ${token.borderRadius * 2}px; - background: #fff; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), + background: ${isRootDark ? 'rgba(0,0,0,0.45)' : token.colorBgElevated}; + box-shadow: + 0 1px 2px rgba(0, 0, 0, 0.03), + 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px rgba(0, 0, 0, 0.02); img { @@ -75,18 +82,19 @@ const useStyle = createStyles(({ token, css }) => ({ } `, - cardMini: css` + cardMini: css` display: block; border-radius: ${token.borderRadius * 2}px; padding: ${token.paddingMD}px ${token.paddingLG}px; - background: rgba(0, 0, 0, 0.02); - border: 1px solid rgba(0, 0, 0, 0.06); + background: ${isRootDark ? 'rgba(0,0,0,0.25)' : 'rgba(0, 0, 0, 0.02)'}; + border: 1px solid ${isRootDark ? 'rgba(255,255,255, 0.45)' : 'rgba(0, 0, 0, 0.06)'}; img { height: 48px; } `, -})); + }))(); +}; export default function DesignFramework() { const [locale] = useLocale(locales); diff --git a/.dumi/pages/index/components/Group.tsx b/.dumi/pages/index/components/Group.tsx index 1ea9a7e0b5a3..20affa555ce8 100644 --- a/.dumi/pages/index/components/Group.tsx +++ b/.dumi/pages/index/components/Group.tsx @@ -1,21 +1,26 @@ import * as React from 'react'; import { useContext } from 'react'; -import { useTheme } from 'antd-style'; import { Typography } from 'antd'; +import { useTheme } from 'antd-style'; + import SiteContext from '../../../theme/slots/SiteContext'; export interface GroupMaskProps { style?: React.CSSProperties; children?: React.ReactNode; disabled?: boolean; + onMouseMove?: React.MouseEventHandler; + onMouseEnter?: React.MouseEventHandler; + onMouseLeave?: React.MouseEventHandler; } -export function GroupMask({ children, style, disabled }: GroupMaskProps) { +export const GroupMask: React.FC = (props) => { + const { children, style, disabled, onMouseMove, onMouseEnter, onMouseLeave } = props; const additionalStyle: React.CSSProperties = disabled ? {} : { position: 'relative', - background: `rgba(255,255,255,0.1)`, + background: `rgba(255, 255, 255, 0.1)`, backdropFilter: `blur(25px)`, zIndex: 1, }; @@ -23,16 +28,15 @@ export function GroupMask({ children, style, disabled }: GroupMaskProps) { return (
{children}
); -} +}; export interface GroupProps { id?: string; @@ -48,7 +52,7 @@ export interface GroupProps { decoration?: React.ReactNode; } -export default function Group(props: GroupProps) { +const Group: React.FC = (props) => { const { id, title, titleColor, description, children, decoration, background, collapse } = props; const token = useTheme(); const { isMobile } = useContext(SiteContext); @@ -114,4 +118,6 @@ export default function Group(props: GroupProps) { ); -} +}; + +export default Group; diff --git a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx new file mode 100644 index 000000000000..42dc50702d02 --- /dev/null +++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx @@ -0,0 +1,259 @@ +import React from 'react'; +import { AntDesignOutlined, CheckOutlined, CloseOutlined } from '@ant-design/icons'; +import { + Alert, + Button, + Checkbox, + ColorPicker, + Dropdown, + Input, + message, + Modal, + Progress, + Select, + Slider, + Steps, + Switch, + Tooltip, +} from 'antd'; +import { createStyles } from 'antd-style'; +import classNames from 'classnames'; + +import useLocale from '../../../../hooks/useLocale'; + +const { _InternalPanelDoNotUseOrYouWillBeFired: ModalPanel } = Modal; +const { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip; +const { _InternalPanelDoNotUseOrYouWillBeFired: InternalMessage } = message; + +const locales = { + cn: { + range: '设置范围', + text: 'Ant Design 5.0 使用 CSS-in-JS 技术以提供动态与混合主题的能力。与此同时，我们使用组件级别的 CSS-in-JS 解决方案，让你的应用获得更好的性能。', + infoText: '信息内容展示', + dropdown: '下拉菜单', + finished: '已完成', + inProgress: '进行中', + waiting: '等待中', + option: '选项', + apple: '苹果', + banana: '香蕉', + orange: '橘子', + watermelon: '西瓜', + primary: '主要按钮', + danger: '危险按钮', + default: '默认按钮', + dashed: '虚线按钮', + icon: '图标按钮', + hello: '你好，Ant Design!', + release: 'Ant Design 5.0 正式发布！', + }, + en: { + range: 'Set Range', + text: 'Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance.', + infoText: 'Info Text', + dropdown: 'Dropdown', + finished: 'Finished', + inProgress: 'In Progress', + waiting: 'Waiting', + option: 'Option', + apple: 'Apple', + banana: 'Banana', + orange: 'Orange', + watermelon: 'Watermelon', + primary: 'Primary', + danger: 'Danger', + default: 'Default', + dashed: 'Dashed', + icon: 'Icon', + hello: 'Hello, Ant Design!', + release: 'Ant Design 5.0 is released!', + }, +}; + +const useStyle = createStyles(({ token, css }) => { + const gap = token.padding; + + return { + holder: css` + width: 500px; + display: flex; + flex-direction: column; + row-gap: ${gap}px; + opacity: 0.65; + `, + + flex: css` + display: flex; + flex-wrap: nowrap; + column-gap: ${gap}px; + `, + ptg_20: css` + flex: 0 1 20%; + `, + ptg_none: css` + flex: none; + `, + block: css` + background-color: ${token.colorBgContainer}; + padding: ${token.paddingXS}px ${token.paddingSM}px; + border-radius: ${token.borderRadius}px; + border: 1px solid ${token.colorBorder}; + `, + noMargin: css` + margin: 0; + `, + }; +}); + +export interface ComponentsBlockProps { + className?: string; + style?: React.CSSProperties; +} + +const ComponentsBlock: React.FC = (props) => { + const { className, style } = props; + + const [locale] = useLocale(locales); + const { styles } = useStyle(); + + return ( +
+ + {locale.text} + + + + + {/* Line */} +
+ +
+ ({ + key: `opt${index}`, + label: `${locale.option} ${index}`, + })), + }} + > + {locale.dropdown} + +
+ + +
+ + + + + + + {/* Line */} +
+ 100°C, + }, + }} + defaultValue={[26, 37]} + /> +
+ + {/* Line */} +
+ + + + + +
+ + {/* Line */} +
+
+ } + unCheckedChildren={} + /> + + +
+
+ +
+ +
+ + + + +
+ ); +}; + +export default ComponentsBlock; diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx new file mode 100644 index 000000000000..cf257a0d6d77 --- /dev/null +++ b/.dumi/pages/index/components/PreviewBanner/index.tsx @@ -0,0 +1,142 @@ +import React from 'react'; +import { Button, ConfigProvider, Space, Typography } from 'antd'; +import { createStyles, useTheme } from 'antd-style'; +import { Link, useLocation } from 'dumi'; + +import useLocale from '../../../../hooks/useLocale'; +import SiteContext from '../../../../theme/slots/SiteContext'; +import * as utils from '../../../../theme/utils'; +import { GroupMask } from '../Group'; +import ComponentsBlock from './ComponentsBlock'; +import useMouseTransform from './useMouseTransform'; + +const locales = { + cn: { + slogan: '助力设计开发者「更灵活」地搭建出「更美」的产品，让用户「快乐工作」～', + start: '开始使用', + designLanguage: '设计语言', + }, + en: { + slogan: + 'Help designers/developers building beautiful products more flexible and working with happiness', + start: 'Getting Started', + designLanguage: 'Design Language', + }, +}; + +const useStyle = () => { + const { direction } = React.useContext(ConfigProvider.ConfigContext); + const isRTL = direction === 'rtl'; + + return createStyles(({ token, css }) => { + const textShadow = `0 0 3px ${token.colorBgContainer}`; + + return { + holder: css` + height: 520px; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; + perspective: 800px; + row-gap: ${token.marginXL}px; + `, + + typography: css` + text-align: center; + position: relative; + z-index: 1; + padding-inline: ${token.paddingXL}px; + text-shadow: ${new Array(5) + .fill(null) + .map(() => textShadow) + .join(', ')}; + + h1 { + font-family: AliPuHui, ${token.fontFamily} !important; + font-weight: 900 !important; + font-size: ${token.fontSizeHeading2 * 2}px !important; + line-height: ${token.lineHeightHeading2} !important; + } + + p { + font-size: ${token.fontSizeLG}px !important; + font-weight: normal !important; + margin-bottom: 0; + } + `, + + block: css` + position: absolute; + inset-inline-end: 0; + top: -38px; + transform: ${isRTL ? 'rotate3d(24, 83, -45, 57deg)' : 'rotate3d(24, -83, 45, 57deg)'}; + `, + + child: css` + position: relative; + z-index: 1; + `, + }; + })(); +}; + +export interface PreviewBannerProps { + children?: React.ReactNode; +} + +const PreviewBanner: React.FC = (props) => { + const { children } = props; + + const [locale] = useLocale(locales); + const { styles } = useStyle(); + const { isMobile } = React.useContext(SiteContext); + const token = useTheme(); + const { pathname, search } = useLocation(); + const isZhCN = utils.isZhCN(pathname); + + const [componentsBlockStyle, mouseEvents] = useMouseTransform(); + + return ( + + {/* Image Left Top */} + bg + {/* Image Right Top */} + bg + +
+ {/* Mobile not show the component preview */} + {!isMobile && } + + +

Ant Design 5.0

+

{locale.slogan}

+ + + + + + + + + + +
{children}
+
+ + ); +}; + +export default PreviewBanner; diff --git a/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx b/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx new file mode 100644 index 000000000000..a6985067bb6a --- /dev/null +++ b/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx @@ -0,0 +1,73 @@ +import React, { startTransition } from 'react'; +import { ConfigProvider } from 'antd'; + +const getTransformRotateStyle = ( + event: React.MouseEvent, + currentTarget: EventTarget & HTMLDivElement, + multiple: number, + isRTL: boolean, +): string => { + const box = currentTarget?.getBoundingClientRect(); + const calcX = -(event.clientY - box.y - box.height / 2) / multiple; + const calcY = (event.clientX - box.x - box.width / 2) / multiple; + return isRTL + ? `rotate3d(${24 + calcX}, ${83 + calcY}, -45, 57deg)` + : `rotate3d(${24 + calcX}, ${-83 + calcY}, 45, 57deg)`; +}; + +const useMouseTransform = ({ transitionDuration = 500, multiple = 36 } = {}) => { + const [componentsBlockStyle, setComponentsBlockStyle] = React.useState({}); + + const { direction } = React.useContext(ConfigProvider.ConfigContext); + + const isRTL = direction === 'rtl'; + + const onMouseMove: React.MouseEventHandler = (event) => { + const { currentTarget } = event; + startTransition(() => { + setComponentsBlockStyle((style) => ({ + ...style, + transform: getTransformRotateStyle(event, currentTarget, multiple, isRTL), + })); + }); + }; + + const onMouseEnter: React.MouseEventHandler = () => { + startTransition(() => { + setComponentsBlockStyle((style) => ({ + ...style, + transition: `transform ${transitionDuration / 1000}s`, + })); + }); + + setTimeout(() => { + startTransition(() => { + setComponentsBlockStyle((style) => ({ + ...style, + transition: '', + })); + }); + }, transitionDuration); + }; + + const onMouseLeave: React.MouseEventHandler = () => { + startTransition(() => { + setComponentsBlockStyle((style) => ({ + ...style, + transition: `transform ${transitionDuration / 1000}s`, + transform: '', + })); + }); + }; + + return [ + componentsBlockStyle, + { + onMouseMove, + onMouseEnter, + onMouseLeave, + }, + ] as const; +}; + +export default useMouseTransform; diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx index e99b1cd13872..790a553fc498 100644 --- a/.dumi/pages/index/components/Theme/ThemePicker.tsx +++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx @@ -43,6 +43,7 @@ const useStyle = createStyles(({ token, css }) => ({ width: 0; height: 0; opacity: 0; + position: absolute; } img { diff --git a/.dumi/pages/index/components/Theme/index.tsx b/.dumi/pages/index/components/Theme/index.tsx index 436c90cf61c1..2b33b22742a4 100644 --- a/.dumi/pages/index/components/Theme/index.tsx +++ b/.dumi/pages/index/components/Theme/index.tsx @@ -1,15 +1,12 @@ -import { TinyColor } from '@ctrl/tinycolor'; +import * as React from 'react'; +import { defaultAlgorithm, defaultTheme } from '@ant-design/compatible'; import { BellOutlined, FolderOutlined, HomeOutlined, QuestionCircleOutlined, } from '@ant-design/icons'; -import { createStyles, css, useTheme } from 'antd-style'; -import * as React from 'react'; -import classNames from 'classnames'; -import { defaultTheme, defaultAlgorithm } from '@ant-design/compatible'; -import { useLocation } from 'dumi'; +import { TinyColor } from '@ctrl/tinycolor'; import type { MenuProps } from 'antd'; import { Breadcrumb, @@ -21,28 +18,33 @@ import { Menu, Radio, Space, - Typography, theme, + Typography, } from 'antd'; +import { createStyles, css, useTheme } from 'antd-style'; import type { Color } from 'antd/es/color-picker'; import { generateColor } from 'antd/es/color-picker/util'; -import * as utils from '../../../../theme/utils'; +import classNames from 'classnames'; +import { useLocation } from 'dumi'; + +import useDark from '../../../../hooks/useDark'; import useLocale from '../../../../hooks/useLocale'; +import Link from '../../../../theme/common/Link'; import SiteContext from '../../../../theme/slots/SiteContext'; +import * as utils from '../../../../theme/utils'; import Group from '../Group'; import { getCarouselStyle } from '../util'; import BackgroundImage from './BackgroundImage'; import ColorPicker from './ColorPicker'; +import { DEFAULT_COLOR, getAvatarURL, getClosetColor, PINK_COLOR } from './colorUtil'; import MobileCarousel from './MobileCarousel'; import RadiusPicker from './RadiusPicker'; import type { THEME } from './ThemePicker'; import ThemePicker from './ThemePicker'; -import { DEFAULT_COLOR, PINK_COLOR, getAvatarURL, getClosetColor } from './colorUtil'; -import Link from '../../../../theme/common/Link'; const { Header, Content, Sider } = Layout; -const TokenChecker = () => { +const TokenChecker: React.FC = () => { if (process.env.NODE_ENV !== 'production') { console.log('Demo Token:', theme.useToken()); } @@ -355,6 +357,15 @@ export default function Theme() { form.setFieldsValue(mergedData); }, [themeType]); + const isRootDark = useDark(); + + React.useEffect(() => { + onThemeChange(null, { + ...themeData, + themeType: isRootDark ? 'dark' : 'default', + }); + }, [isRootDark]); + // ================================ Tokens ================================ const closestColor = getClosetColor(colorPrimaryValue); @@ -472,6 +483,7 @@ export default function Theme() { openKeys={['Design']} style={{ height: '100%', borderRight: 0 }} items={sideMenuItems} + expandIcon={false} /> diff --git a/.dumi/pages/index/index.tsx b/.dumi/pages/index/index.tsx index 71e85f2f51d3..8494a508d605 100644 --- a/.dumi/pages/index/index.tsx +++ b/.dumi/pages/index/index.tsx @@ -1,12 +1,14 @@ +import React from 'react'; +import { ConfigProvider, theme } from 'antd'; import { createStyles, css } from 'antd-style'; -import React, { Suspense } from 'react'; -import { ConfigProvider } from 'antd'; + +import useDark from '../../hooks/useDark'; import useLocale from '../../hooks/useLocale'; -import Banner from './components/Banner'; -import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends'; +// import BannerRecommends, { BannerRecommendsFallback } from './components/BannerRecommends'; import ComponentsList from './components/ComponentsList'; import DesignFramework from './components/DesignFramework'; import Group from './components/Group'; +import PreviewBanner from './components/PreviewBanner'; import Theme from './components/Theme'; const useStyle = createStyles(() => ({ @@ -36,43 +38,57 @@ const locales = { const Homepage: React.FC = () => { const [locale] = useLocale(locales); const { styles } = useStyle(); + const { token } = theme.useToken(); + + const isRootDark = useDark(); return ( - -
- - }> - - - -
+
+ + {/* 文档很久没更新了，先藏起来 */} + {/* }> + + */} + + +
+ {/* 定制主题 */} + - - - - - } - > - - -
-
- + + + {/* 组件列表 */} + + + + + {/* 设计语言 */} + + } + > + + +
+
); }; diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx index d67fa4ca52d6..9b62a90e8014 100644 --- a/.dumi/pages/theme-editor/index.tsx +++ b/.dumi/pages/theme-editor/index.tsx @@ -44,11 +44,6 @@ const CustomTheme = () => { const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME); if (storedConfig) { const themeConfig = JSON.parse(storedConfig); - const originThemeConfig = { - json: themeConfig, - text: undefined, - }; - setThemeConfigContent(originThemeConfig); setTheme(themeConfig); } }, []); diff --git a/.dumi/theme/builtins/ComponentOverview/index.tsx b/.dumi/theme/builtins/ComponentOverview/index.tsx index 2347962cb17b..6582b05f5bd4 100644 --- a/.dumi/theme/builtins/ComponentOverview/index.tsx +++ b/.dumi/theme/builtins/ComponentOverview/index.tsx @@ -1,57 +1,61 @@ import React, { memo, useContext, useMemo, useRef, useState } from 'react'; import type { CSSProperties } from 'react'; -import { Link, useIntl, useSidebarData, useLocation } from 'dumi'; +import { SearchOutlined } from '@ant-design/icons'; +import { Affix, Card, Col, Divider, Input, Row, Space, Tag, Typography } from 'antd'; import { createStyles, useTheme } from 'antd-style'; +import { Link, useIntl, useLocation, useSidebarData } from 'dumi'; import debounce from 'lodash/debounce'; -import { SearchOutlined } from '@ant-design/icons'; -import { Card, Col, Divider, Input, Row, Space, Tag, Typography, Affix } from 'antd'; + +import SiteContext from '../../slots/SiteContext'; import type { Component } from './ProComponentsList'; import proComponentsList from './ProComponentsList'; -import SiteContext from '../../slots/SiteContext'; const useStyle = createStyles(({ token, css }) => ({ componentsOverviewGroupTitle: css` - margin-bottom: 24px !important; - `, + margin-bottom: 24px !important; + `, componentsOverviewTitle: css` - overflow: hidden; - color: ${token.colorTextHeading}; - text-overflow: ellipsis; - `, + overflow: hidden; + color: ${token.colorTextHeading}; + text-overflow: ellipsis; + `, componentsOverviewImg: css` - display: flex; - align-items: center; - justify-content: center; - height: 152px; - `, + display: flex; + align-items: center; + justify-content: center; + height: 152px; + `, componentsOverviewCard: css` - cursor: pointer; - transition: all 0.5s; - &:hover { - box-shadow: 0 6px 16px -8px #00000014, 0 9px 28px #0000000d, 0 12px 48px 16px #00000008; - } - `, + cursor: pointer; + transition: all 0.5s; + &:hover { + box-shadow: + 0 6px 16px -8px #00000014, + 0 9px 28px #0000000d, + 0 12px 48px 16px #00000008; + } + `, componentsOverviewAffix: css` - display: flex; - transition: all 0.3s; - justify-content: space-between; - `, + display: flex; + transition: all 0.3s; + justify-content: space-between; + `, componentsOverviewSearch: css` - padding: 0; - .anticon-search { - color: ${token.colorTextDisabled}; - } - `, + padding: 0; + .anticon-search { + color: ${token.colorTextDisabled}; + } + `, componentsOverviewContent: css` - &:empty:after { - display: block; - padding: 16px 0 40px; - color: ${token.colorTextDisabled}; - text-align: center; - border-bottom: 1px solid ${token.colorSplit}; - content: 'Not Found'; - } - `, + &:empty:after { + display: block; + padding: 16px 0 40px; + color: ${token.colorTextDisabled}; + text-align: center; + border-bottom: 1px solid ${token.colorSplit}; + content: 'Not Found'; + } + `, })); const onClickCard = (pathname: string) => { @@ -107,7 +111,7 @@ const Overview: React.FC = () => { const onKeyDown: React.KeyboardEventHandler = (event) => { if (event.keyCode === 13 && search.trim().length) { - sectionRef.current?.querySelector('.components-overview-card')?.click(); + sectionRef.current?.querySelector(`.${styles.componentsOverviewCard}`)?.click(); } }; diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index c67edab7b904..7d64eb2d5aed 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -1,10 +1,10 @@ -import { RightOutlined } from '@ant-design/icons'; +import { RightOutlined, LinkOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { createStyles, css, useTheme } from 'antd-style'; import { getDesignToken } from 'antd-token-previewer'; import React, { useMemo, useState } from 'react'; import tokenMeta from 'antd/es/version/token-meta.json'; import tokenData from 'antd/es/version/token.json'; -import { ConfigProvider, Table } from 'antd'; +import { ConfigProvider, Table, Popover, Typography } from 'antd'; import useLocale from '../../../hooks/useLocale'; import { useColumns } from '../TokenTable'; @@ -18,6 +18,9 @@ const locales = { value: '默认值', componentToken: '组件 Token', globalToken: '全局 Token', + help: '如何定制？', + customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量', + customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改组件变量', }, en: { token: 'Token Name', @@ -26,6 +29,9 @@ const locales = { value: 'Default Value', componentToken: 'Component Token', globalToken: 'Global Token', + help: 'How to use?', + customizeTokenLink: '/docs/react/customize-theme#customize-design-token', + customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token', }, }; @@ -45,16 +51,34 @@ const useStyle = createStyles(() => ({ transition: all 0.3s; } `, + help: css` + margin-left: 8px; + font-size: 12px; + font-weight: normal; + color: #999; + a { + color: #999; + } + `, })); interface SubTokenTableProps { defaultOpen?: boolean; title: string; + helpText: React.ReactNode; + helpLink: string; tokens: string[]; component?: string; } -const SubTokenTable: React.FC = ({ defaultOpen, tokens, title, component }) => { +const SubTokenTable: React.FC = ({ + defaultOpen, + tokens, + title, + helpText, + helpLink, + component, +}) => { const [, lang] = useLocale(locales); const token = useTheme(); const columns = useColumns(); @@ -104,11 +128,53 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl }) .filter(Boolean); + const code = component + ? ` + ... +` + : ` + ... +`; + return ( -
+ <>
setOpen(!open)}> -

{title}

+

+ {title} + + 
{code}
+ + + {helpText} + + + } + > + + + {helpText} + + +

{open && ( @@ -123,7 +189,7 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl /> )} -
+ ); }; @@ -152,11 +218,19 @@ const ComponentTokenTable: React.FC = ({ component }) {tokenMeta.components[component] && ( item.token)} component={component} + defaultOpen /> )} - + ); }; diff --git a/.dumi/theme/builtins/IconSearch/Category.tsx b/.dumi/theme/builtins/IconSearch/Category.tsx index 83b70a309eea..1cbbdf4c57c6 100644 --- a/.dumi/theme/builtins/IconSearch/Category.tsx +++ b/.dumi/theme/builtins/IconSearch/Category.tsx @@ -16,7 +16,7 @@ const Category: React.FC = (props) => { const { icons, title, newIcons, theme } = props; const intl = useIntl(); const [justCopied, setJustCopied] = React.useState(null); - const copyId = React.useRef(null); + const copyId = React.useRef | null>(null); const onCopied = React.useCallback((type: string, text: string) => { message.success( diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 9bbd9b08d2dc..8af1d339124c 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -1,20 +1,20 @@ +import React, { useContext, useEffect, useRef, useState } from 'react'; import { CheckOutlined, LinkOutlined, SnippetsOutlined, ThunderboltOutlined, + UpOutlined, } from '@ant-design/icons'; import type { Project } from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk'; +import { Alert, Badge, Space, Tooltip } from 'antd'; +import { createStyles, css } from 'antd-style'; import classNames from 'classnames'; import { FormattedMessage, useSiteData } from 'dumi'; -import toReactElement from 'jsonml-to-react-element'; -import JsonML from 'jsonml.js/lib/utils'; import LZString from 'lz-string'; -import Prism from 'prismjs'; -import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { Alert, Badge, Space, Tooltip } from 'antd'; + import type { AntdPreviewerProps } from '.'; import useLocation from '../../../hooks/useLocation'; import BrowserFrame from '../../common/BrowserFrame'; @@ -31,28 +31,6 @@ import { ping } from '../../utils'; const { ErrorBoundary } = Alert; -function toReactComponent(jsonML: any) { - return toReactElement(jsonML, [ - [ - (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', - (node: any, index: any) => { - // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 - const attr = JsonML.getAttributes(node); - return React.createElement( - 'pre', - { - key: index, - className: `language-${attr.lang}`, - }, - React.createElement('code', { - dangerouslySetInnerHTML: { __html: attr.highlighted }, - }), - ); - }, - ], - ]); -} - function compress(string: string): string { return LZString.compressToBase64(string) .replace(/\+/g, '-') // Convert '+' to '-' @@ -88,6 +66,31 @@ function useShowRiddleButton() { return showRiddleButton; } +const useStyle = createStyles(({ token }) => { + const { borderRadius } = token; + return { + codeHideBtn: css` + width: 100%; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 0 0 ${borderRadius}px ${borderRadius}px; + border-top: 1px solid ${token.colorSplit}; + color: ${token.colorTextSecondary}; + transition: all 0.2s ease-in-out; + background-color: ${token.colorBgElevated}; + cursor: pointer; + &:hover { + color: ${token.colorPrimary}; + } + span { + margin-right: ${token.marginXXS}px; + } + `, + }; +}); + const CodePreviewer: React.FC = (props) => { const { asset, @@ -111,6 +114,8 @@ const CodePreviewer: React.FC = (props) => { const { pkg } = useSiteData(); const location = useLocation(); + const { styles } = useStyle(); + const entryCode = asset.dependencies['index.tsx'].value; const showRiddleButton = useShowRiddleButton(); @@ -130,13 +135,6 @@ const CodePreviewer: React.FC = (props) => { const [showOnlineUrl, setShowOnlineUrl] = useState(false); - const highlightedCodes = { - jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'), - tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'), - }; - - const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : ''; - useEffect(() => { const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses setShowOnlineUrl( @@ -485,7 +483,7 @@ createRoot(document.getElementById('container')).render(); - handleCodeCopied(asset.id)}> + handleCodeCopied(asset.id)}> ); {codeExpand && (
setCodeType(type)} + sourceCode={entryCode} + jsxCode={jsx} + styleCode={style} + onCodeTypeChange={setCodeType} /> - {highlightedStyle ? ( -
- 
-                
-
-
- ) : null} +
setCodeExpand(false)} + > + + +
)} @@ -560,7 +561,9 @@ createRoot(document.getElementById('container')).render(); // resulting in some response delays like following issue: // https://github.com/ant-design/ant-design/issues/39995 // So we insert style tag into head tag. - if (!style) return; + if (!style) { + return; + } const styleTag = document.createElement('style'); styleTag.type = 'text/css'; styleTag.innerHTML = style; diff --git a/.dumi/theme/builtins/Previewer/Previewer.tsx b/.dumi/theme/builtins/Previewer/Previewer.tsx new file mode 100644 index 000000000000..fb23c55e0f71 --- /dev/null +++ b/.dumi/theme/builtins/Previewer/Previewer.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import type { IPreviewerProps } from 'dumi'; +import { useTabMeta } from 'dumi'; + +import CodePreviewer from './CodePreviewer'; +import DesignPreviewer from './DesignPreviewer'; + +export interface AntdPreviewerProps extends IPreviewerProps { + originDebug?: IPreviewerProps['debug']; +} + +const Previewer: React.FC = (props) => { + const tab = useTabMeta(); + + if (tab?.frontmatter.title === 'Design') { + return ; + } + + return ; +}; + +export default Previewer; diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index a37144956fd6..e36c556112f8 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,21 +1,40 @@ +import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; -import { useTabMeta } from 'dumi'; -import React from 'react'; -import CodePreviewer from './CodePreviewer'; -import DesignPreviewer from './DesignPreviewer'; +import { Skeleton, Alert } from 'antd'; +import { createStyles } from 'antd-style'; -export interface AntdPreviewerProps extends IPreviewerProps { - originDebug?: IPreviewerProps['debug']; -} +const { ErrorBoundary } = Alert; -const Previewer: React.FC = (props) => { - const tab = useTabMeta(); +const Previewer = React.lazy(() => import('./Previewer')); - if (tab?.frontmatter.title === 'Design') { - return ; - } +const useStyle = createStyles(({ css }) => ({ + skeletonWrapper: css` + width: 100% !important; + height: 500px; + margin-bottom: 16px; + `, +})); - return ; +export default (props: IPreviewerProps) => { + const { styles } = useStyle(); + return ( + + + {' '} + + } + > + + + + ); }; - -export default Previewer; diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx index a44ffcda8da2..9ae37389f0b0 100644 --- a/.dumi/theme/builtins/TokenCompare/index.tsx +++ b/.dumi/theme/builtins/TokenCompare/index.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { TinyColor } from '@ctrl/tinycolor'; import { createStyles } from 'antd-style'; import tokenMeta from 'antd/es/version/token-meta.json'; -import { theme, Space } from 'antd'; +import { Space, theme } from 'antd'; import useLocale from '../../../hooks/useLocale'; const useStyle = createStyles(({ token, css }) => { @@ -29,7 +29,7 @@ const useStyle = createStyles(({ token, css }) => { display: flex; align-items: center; justify-content: center; - + color: rgba(0,0,0,0.88); border-right: 1px solid rgba(0, 0, 0, 0.1); `, diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx index 93c9c4580710..827630fcc014 100644 --- a/.dumi/theme/common/CodePreview.tsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -1,37 +1,95 @@ -import React from 'react'; +import React, { useEffect, useMemo } from 'react'; import { Tabs } from 'antd'; +import toReactElement from 'jsonml-to-react-element'; +import JsonML from 'jsonml.js/lib/utils'; +import Prism from 'prismjs'; const LANGS = { tsx: 'TypeScript', jsx: 'JavaScript', + style: 'CSS', }; interface CodePreviewProps { - codes?: Record; - toReactComponent?: (node: any) => React.ReactNode; + sourceCode?: string; + jsxCode?: string; + styleCode?: string; onCodeTypeChange?: (activeKey: string) => void; } -const CodePreview: React.FC = ({ toReactComponent, codes, onCodeTypeChange }) => { - const langList = Object.keys(codes).sort().reverse(); +function toReactComponent(jsonML: any[]) { + return toReactElement(jsonML, [ + [ + (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', + (node: any, index: number) => { + const attr = JsonML.getAttributes(node); + return ( + 
+            
+
+ ); + }, + ], + ]); +} + +const CodePreview: React.FC = ({ + sourceCode = '', + jsxCode = '', + styleCode = '', + onCodeTypeChange, +}) => { + // 避免 Tabs 数量不稳定的闪动问题 + const initialCodes = {}; + if (sourceCode) { + initialCodes.tsx = ''; + } + if (jsxCode) { + initialCodes.jsx = ''; + } + if (styleCode) { + initialCodes.style = ''; + } + const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes); + + useEffect(() => { + const codes = { + tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'), + jsx: Prism.highlight(jsxCode, Prism.languages.javascript, 'jsx'), + style: Prism.highlight(styleCode, Prism.languages.css, 'css'), + }; + // 去掉空的代码类型 + Object.keys(codes).forEach((key) => { + if (!codes[key]) { + delete codes[key]; + } + }); + setHighlightedCodes(codes); + }, [jsxCode, sourceCode, styleCode]); + + const langList = Object.keys(highlightedCodes); + const items = useMemo( + () => + langList.map((lang) => ({ + label: LANGS[lang], + key: lang, + children: toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }]), + })), + [JSON.stringify(highlightedCodes)], + ); + + if (!langList.length) { + return null; + } + if (langList.length === 1) { return toReactComponent([ 'pre', - { lang: langList[0], highlighted: codes[langList[0]], className: 'highlight' }, + { lang: langList[0], highlighted: highlightedCodes[langList[0]], className: 'highlight' }, ]); } - return ( - ({ - label: LANGS[lang], - key: lang, - children: toReactComponent(['pre', { lang, highlighted: codes[lang] }]), - }))} - /> - ); + + return ; }; export default CodePreview; diff --git a/.dumi/theme/common/Color/ColorPaletteTool.tsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx index 5f9b4319eb68..2c2de6d3f9ef 100644 --- a/.dumi/theme/common/Color/ColorPaletteTool.tsx +++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx @@ -3,26 +3,44 @@ import React, { useMemo, useState } from 'react'; import { ColorPicker } from 'antd'; import type { Color } from 'antd/es/color-picker'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); + const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); setPrimaryColorInstance(color); }; + const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return {text.trim()}; @@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
-
{ColorPatterns({ color: primaryColor })}
+
+ +
diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx index 2c81fa008a5c..59400cfae121 100644 --- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx +++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx @@ -2,14 +2,30 @@ import { FormattedMessage } from 'dumi'; import React, { useMemo, useState } from 'react'; import { Col, ColorPicker, Row } from 'antd'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [backgroundColor, setBackgroundColor] = useState('#141414'); - const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); @@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => { const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return ( @@ -41,7 +57,7 @@ const ColorPaletteTool: React.FC = () => { return (
- {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })} +
diff --git a/.dumi/theme/common/Color/ColorPatterns.tsx b/.dumi/theme/common/Color/ColorPatterns.tsx index d40d88a0c997..080b5651cea9 100644 --- a/.dumi/theme/common/Color/ColorPatterns.tsx +++ b/.dumi/theme/common/Color/ColorPatterns.tsx @@ -9,11 +9,15 @@ interface ColorPatternsProps { backgroundColor?: string; } -const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => { +const ColorPatterns: React.FC = ({ color, dark, backgroundColor }) => { const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); - return uniq(colors).map((colorString, i) => ( - - )); + return ( + <> + {uniq(colors).map((colorString, i) => ( + + ))} + + ); }; export default ColorPatterns; diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx index afa8b71da3c7..52ef5178b63f 100644 --- a/.dumi/theme/common/ThemeSwitch/index.tsx +++ b/.dumi/theme/common/ThemeSwitch/index.tsx @@ -1,10 +1,12 @@ +import React from 'react'; import { BgColorsOutlined, SmileOutlined } from '@ant-design/icons'; +import { FloatButton } from 'antd'; +import { useTheme } from 'antd-style'; import { CompactTheme, DarkTheme } from 'antd-token-previewer/es/icons'; // import { Motion } from 'antd-token-previewer/es/icons'; import { FormattedMessage, Link, useLocation } from 'dumi'; -import React from 'react'; -import { useTheme } from 'antd-style'; -import { FloatButton } from 'antd'; + +import useThemeAnimation from '../../../hooks/useThemeAnimation'; import { getLocalizedPathname, isZhCN } from '../../utils'; import ThemeIcon from './ThemeIcon'; @@ -22,6 +24,9 @@ const ThemeSwitch: React.FC = (props) => { // const isMotionOff = value.includes('motion-off'); const isHappyWork = value.includes('happy-work'); + const isDark = value.includes('dark'); + + const toggleAnimationTheme = useThemeAnimation(); return ( = (props) => { } - type={value.includes('dark') ? 'primary' : 'default'} - onClick={() => { - if (value.includes('dark')) { + type={isDark ? 'primary' : 'default'} + onClick={(e) => { + // Toggle animation when switch theme + toggleAnimationTheme(e, isDark); + + if (isDark) { onChange(value.filter((theme) => theme !== 'dark')); } else { onChange([...value, 'dark']); diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx index a805422a238c..395f21aba9a9 100644 --- a/.dumi/theme/common/styles/Common.tsx +++ b/.dumi/theme/common/styles/Common.tsx @@ -1,9 +1,13 @@ import { css, Global } from '@emotion/react'; import React from 'react'; +import { useTheme } from 'antd-style'; -export default () => ( - { + const { headerHeight, margin } = useTheme(); + + return ( + ( vertical-align: middle; border-style: none; } + + html { + scroll-padding-top: ${headerHeight + margin}px; + } + + [data-prefers-color='dark'] { + color-scheme: dark; + } `} - /> -); + /> + ); +}; diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx index c7b9b6fc5c75..9b0d8c1faa96 100644 --- a/.dumi/theme/common/styles/Demo.tsx +++ b/.dumi/theme/common/styles/Demo.tsx @@ -1,5 +1,5 @@ -import { css, Global } from '@emotion/react'; import React from 'react'; +import { css, Global } from '@emotion/react'; import { useTheme } from 'antd-style'; const GlobalDemoStyles: React.FC = () => { diff --git a/.dumi/theme/common/styles/Markdown.tsx b/.dumi/theme/common/styles/Markdown.tsx index a85624b56543..9664175ef171 100644 --- a/.dumi/theme/common/styles/Markdown.tsx +++ b/.dumi/theme/common/styles/Markdown.tsx @@ -1,6 +1,6 @@ +import React from 'react'; import { TinyColor } from '@ctrl/tinycolor'; import { css, Global } from '@emotion/react'; -import React from 'react'; import { useTheme } from 'antd-style'; const GlobalStyle: React.FC = () => { @@ -26,6 +26,8 @@ const GlobalStyle: React.FC = () => { .markdown img { max-width: calc(100% - 32px); max-height: 100%; + display: block; + margin: 0 auto; } .markdown p > img { diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx index f5af2a0a7876..4e910e6edc9b 100644 --- a/.dumi/theme/layouts/DocLayout/index.tsx +++ b/.dumi/theme/layouts/DocLayout/index.tsx @@ -32,7 +32,7 @@ const DocLayout: React.FC = () => { const location = useLocation(); const { pathname, search, hash } = location; const [locale, lang] = useLocale(locales); - const timerRef = useRef(null); + const timerRef = useRef | null>(null); const { direction } = useContext(SiteContext); const { loading } = useSiteData(); diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index 828c69771680..f1cbbab9b449 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -1,22 +1,30 @@ +import React, { useCallback, useEffect, useMemo, startTransition } from 'react'; import { createCache, + extractStyle, legacyNotSelectorLinter, logicalPropertiesLinter, parentSelectorLinter, StyleProvider, - extractStyle, } from '@ant-design/cssinjs'; import { HappyProvider } from '@ant-design/happy-work-theme'; -import React, { useCallback, useEffect, useMemo } from 'react'; -import { createSearchParams, useOutlet, useSearchParams, useServerInsertedHTML } from 'dumi'; import { getSandpackCssText } from '@codesandbox/sandpack-react'; -import { App, theme as antdTheme } from 'antd'; +import { theme as antdTheme, App } from 'antd'; import type { DirectionType } from 'antd/es/config-provider'; +import { + createSearchParams, + useOutlet, + useSearchParams, + useServerInsertedHTML, + usePrefersColor, +} from 'dumi'; + +import { DarkContext } from '../../hooks/useDark'; import useLayoutState from '../../hooks/useLayoutState'; -import SiteThemeProvider from '../SiteThemeProvider'; import useLocation from '../../hooks/useLocation'; import type { ThemeName } from '../common/ThemeSwitch'; import ThemeSwitch from '../common/ThemeSwitch'; +import SiteThemeProvider from '../SiteThemeProvider'; import type { SiteContextProps } from '../slots/SiteContext'; import SiteContext from '../slots/SiteContext'; @@ -31,20 +39,23 @@ const RESPONSIVE_MOBILE = 768; // } const getAlgorithm = (themes: ThemeName[] = []) => - themes.map((theme) => { - if (theme === 'dark') { - return antdTheme.darkAlgorithm; - } - if (theme === 'compact') { - return antdTheme.compactAlgorithm; - } - return antdTheme.defaultAlgorithm; - }); + themes + .map((theme) => { + if (theme === 'dark') { + return antdTheme.darkAlgorithm; + } + if (theme === 'compact') { + return antdTheme.compactAlgorithm; + } + return null; + }) + .filter((item) => item); const GlobalLayout: React.FC = () => { const outlet = useOutlet(); const { pathname } = useLocation(); const [searchParams, setSearchParams] = useSearchParams(); + const [, , setPrefersColor] = usePrefersColor(); const [{ theme = [], direction, isMobile }, setSiteState] = useLayoutState({ isMobile: false, direction: 'ltr', @@ -68,9 +79,13 @@ const GlobalLayout: React.FC = () => { } } if (key === 'theme') { + const _theme = value.filter((t) => t !== 'light'); nextSearchParams = createSearchParams({ ...nextSearchParams, - theme: value.filter((t) => t !== 'light'), + theme: _theme, + }); + startTransition(() => { + setPrefersColor(_theme.includes('dark') ? 'dark' : 'light'); }); } }); @@ -144,23 +159,25 @@ const GlobalLayout: React.FC = () => { } return ( - - - - {content} - - - + + + + + {content} + + + + ); }; diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json index 7a9f792abbd9..6ca8a49d35ef 100644 --- a/.dumi/theme/locales/en-US.json +++ b/.dumi/theme/locales/en-US.json @@ -31,6 +31,7 @@ "app.demo.copied": "Copied!", "app.demo.code.show": "Show code", "app.demo.code.hide": "Hide code", + "app.demo.code.hide.simplify": "Hide", "app.demo.codepen": "Open in CodePen", "app.demo.codesandbox": "Open in CodeSandbox", "app.demo.stackblitz": "Open in Stackblitz", diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json index 3618d9dabbd6..2a37d63e3ea7 100644 --- a/.dumi/theme/locales/zh-CN.json +++ b/.dumi/theme/locales/zh-CN.json @@ -31,6 +31,7 @@ "app.demo.copied": "复制成功", "app.demo.code.show": "显示代码", "app.demo.code.hide": "收起代码", + "app.demo.code.hide.simplify": "收起", "app.demo.codepen": "在 CodePen 中打开", "app.demo.codesandbox": "在 CodeSandbox 中打开", "app.demo.stackblitz": "在 Stackblitz 中打开", diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx index f65a6a3e23b2..6b34e18ed5aa 100644 --- a/.dumi/theme/slots/Footer/index.tsx +++ b/.dumi/theme/slots/Footer/index.tsx @@ -102,7 +102,7 @@ const Footer: React.FC = () => { items: [ { title: 'Ant Design Charts', - url: 'https://charts.ant.design', + url: isZhCN ? 'https://ant-design-charts.antgroup.com' : 'https://charts.ant.design', openExternal: true, }, { @@ -117,12 +117,12 @@ const Footer: React.FC = () => { }, { title: 'Ant Design Mobile', - url: 'https://mobile.ant.design', + url: isZhCN ? 'https://ant-design-mobile.antgroup.com/zh' : 'https://mobile.ant.design', openExternal: true, }, { title: 'Ant Design Mini', - url: 'https://mini.ant.design', + url: isZhCN ? 'https://ant-design-mini.antgroup.com/' : 'https://mini.ant.design', openExternal: true, }, { @@ -338,7 +338,7 @@ const Footer: React.FC = () => { /> ), title: 'AntV', - url: 'https://antv.vision', + url: 'https://antv.antgroup.com', description: , openExternal: true, }, diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx index 6bdb4b5012dc..597dc1fd3101 100644 --- a/.dumi/theme/slots/Header/Navigation.tsx +++ b/.dumi/theme/slots/Header/Navigation.tsx @@ -30,7 +30,8 @@ const locales = { // ============================= Style ============================= const useStyle = createStyles(({ token }) => { - const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary } = token; + const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } = + token; return { nav: css` @@ -56,6 +57,17 @@ const useStyle = createStyles(({ token }) => { left: 12px; border-width: ${menuItemBorder}px; } + + a { + color: ${colorText}; + } + + a:before { + position: absolute; + inset: 0; + background-color: transparent; + content: ""; + } } & ${antCls}-menu-submenu-title ${iconCls} { @@ -97,7 +109,6 @@ const useStyle = createStyles(({ token }) => { export interface NavigationProps extends SharedProps { isMobile: boolean; - isClient: boolean; responsive: null | 'narrow' | 'crowded'; directionText: string; onLangChange: () => void; @@ -106,7 +117,6 @@ export interface NavigationProps extends SharedProps { export default ({ isZhCN, - isClient, isMobile, responsive, directionText, @@ -224,16 +234,21 @@ export default ({ ), key: 'docs/resources', }, - isZhCN && - isClient && - window.location.host !== 'ant-design.antgroup.com' && - window.location.host !== 'ant-design.gitee.io' + isZhCN ? { - label: '国内镜像', + label: ( + + 国内镜像 + + ), key: 'mirror', children: [ { - label: 官方镜像, + label: ( + + 官方镜像 + + ), icon: ( logoGitee 镜像, + label: ( + + Gitee 镜像 + + ), icon: ( gitee { }; }); -const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; - -function disableAntdMirrorModal() { - window.localStorage.setItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL, 'true'); -} - -function shouldOpenAntdMirrorModal() { - return !window.localStorage.getItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL); -} - interface HeaderState { menuVisible: boolean; windowWidth: number; @@ -127,7 +117,6 @@ interface HeaderState { // ================================= Header ================================= const Header: React.FC = () => { - const [isClient, setIsClient] = React.useState(false); const [, lang] = useLocale(); const { pkg } = useSiteData(); @@ -139,7 +128,7 @@ const Header: React.FC = () => { searching: false, }); const { direction, isMobile, updateSiteConfig } = useContext(SiteContext); - const pingTimer = useRef(null); + const pingTimer = useRef | null>(null); const location = useLocation(); const { pathname, search } = location; @@ -166,34 +155,8 @@ const Header: React.FC = () => { }, [location]); useEffect(() => { - setIsClient(typeof window !== 'undefined'); onWindowResize(); window.addEventListener('resize', onWindowResize); - pingTimer.current = ping((status) => { - if (status !== 'timeout' && status !== 'error') { - if ( - // process.env.NODE_ENV === 'production' && - window.location.host !== 'ant-design.antgroup.com' && - shouldOpenAntdMirrorModal() - ) { - Modal.confirm({ - title: '提示', - content: '内网用户推荐访问国内镜像以获得极速体验～', - okText: '🚀 立刻前往', - cancelText: '不再弹出', - closable: true, - zIndex: 99999, - onOk() { - window.open('https://ant-design.antgroup.com', '_self'); - disableAntdMirrorModal(); - }, - onCancel() { - disableAntdMirrorModal(); - }, - }); - } - } - }); return () => { window.removeEventListener('resize', onWindowResize); if (pingTimer.current) { @@ -273,7 +236,6 @@ const Header: React.FC = () => { const sharedProps: SharedProps = { isZhCN, isRTL, - isClient, }; const navigationNode = ( diff --git a/.dumi/theme/slots/Header/interface.ts b/.dumi/theme/slots/Header/interface.ts index 4c8824787310..8a0755c1bf0e 100644 --- a/.dumi/theme/slots/Header/interface.ts +++ b/.dumi/theme/slots/Header/interface.ts @@ -1,5 +1,4 @@ export interface SharedProps { isZhCN: boolean; isRTL: boolean; - isClient: boolean; } diff --git a/.dumirc.ts b/.dumirc.ts index f9aed1f0e5ec..b6aa833febbd 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -3,6 +3,7 @@ import path from 'path'; import rehypeAntd from './.dumi/rehypeAntd'; import remarkAntd from './.dumi/remarkAntd'; import { version } from './package.json'; +import * as fs from 'fs-extra'; export default defineConfig({ conventionRoutes: { @@ -44,42 +45,42 @@ export default defineConfig({ }, links: [ { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff', type: 'font/woff', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.ttf', type: 'font/ttf', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.woff', type: 'font/woff', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.ttf', type: 'font/ttf', @@ -158,4 +159,10 @@ export default defineConfig({ })(); `, ], + scripts: [ + { + async: true, + content: fs.readFileSync(path.join(__dirname, '.dumi', 'mirror-modal.js')).toString(), + }, + ], }); diff --git a/.eslintrc.js b/.eslintrc.js index a341d58bb440..12e49328d21e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -126,6 +126,12 @@ module.exports = { 'comma-dangle': 0, }, }, + { + files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'], + rules: { + 'compat/compat': 0, + }, + }, ], rules: { 'react/jsx-one-expression-per-line': 0, @@ -205,6 +211,7 @@ module.exports = { '@typescript-eslint/no-shadow': [2, { ignoreTypeValueShadow: true }], // https://github.com/typescript-eslint/typescript-eslint/issues/2528#issuecomment-689369395 'no-undef': 0, + 'import/order': 0, }, globals: { gtag: true, diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 0d4d1732277a..325c2f5d03fe 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,7 +1,7 @@ # To get started with Dependabot version updates, you'll need to specify which # package ecosystems to update and where the package manifests are located. # Please see the documentation for all configuration options: -# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates +# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/about-dependabot-version-updates version: 2 updates: @@ -18,15 +18,19 @@ updates: - dependency-name: "rc-dropdown" - dependency-name: "rc-field-form" - dependency-name: "rc-image" + - dependency-name: "rc-input" + - dependency-name: "rc-input-number" - dependency-name: "rc-mentions" - dependency-name: "rc-menu" - dependency-name: "rc-motion" - dependency-name: "rc-notification" + - dependency-name: "rc-pagination" - dependency-name: "rc-picker" - dependency-name: "rc-progress" - dependency-name: "rc-rate" - dependency-name: "rc-resize-observer" - dependency-name: "rc-select" + - dependency-name: "rc-segmented" - dependency-name: "rc-slider" - dependency-name: "rc-steps" - dependency-name: "rc-switch" @@ -36,6 +40,9 @@ updates: - dependency-name: "rc-tooltip" - dependency-name: "rc-tree" - dependency-name: "rc-tree-select" - - dependency-name: "rc-trigger" + - dependency-name: "@rc-component/trigger" + - dependency-name: "@rc-component/tour" + - dependency-name: "@rc-component/mutate-observer" + - dependency-name: "@rc-component/color-picker" - dependency-name: "rc-upload" - dependency-name: "rc-util" diff --git a/.github/workflows/mock-project-build.yml b/.github/workflows/mock-project-build.yml index 1c7f3342801d..e7e934a08fd7 100644 --- a/.github/workflows/mock-project-build.yml +++ b/.github/workflows/mock-project-build.yml @@ -18,7 +18,7 @@ jobs: name: Build Project steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: diff --git a/.github/workflows/preview-build.yml b/.github/workflows/preview-build.yml index 21b7ba9f0794..65f37668f781 100644 --- a/.github/workflows/preview-build.yml +++ b/.github/workflows/preview-build.yml @@ -21,7 +21,7 @@ jobs: runs-on: ubuntu-latest steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: cache package-lock.json uses: actions/cache@v3 @@ -55,7 +55,7 @@ jobs: needs: setup steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: restore cache from package-lock.json uses: actions/cache@v3 diff --git a/.github/workflows/rebase.yml b/.github/workflows/rebase.yml index 9da6d38ca269..c0fba0dec737 100644 --- a/.github/workflows/rebase.yml +++ b/.github/workflows/rebase.yml @@ -16,7 +16,7 @@ jobs: if: github.event.issue.pull_request != '' && (contains(github.event.comment.body, '/rebase') || contains(github.event.comment.body, '\rebase')) runs-on: ubuntu-latest steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 - name: Automatic Rebase diff --git a/.github/workflows/site-deploy.yml b/.github/workflows/site-deploy.yml index 79cfe9c07df0..814563746af2 100644 --- a/.github/workflows/site-deploy.yml +++ b/.github/workflows/site-deploy.yml @@ -16,7 +16,7 @@ jobs: if: (startsWith(github.ref, 'refs/tags/') && (contains(github.ref_name, '-') == false)) || github.event_name == 'workflow_dispatch' steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - name: cache package-lock.json uses: actions/cache@v3 @@ -49,7 +49,7 @@ jobs: needs: setup steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: diff --git a/.github/workflows/size-limit.yml b/.github/workflows/size-limit.yml index 7f86bf3eeca1..73dc5bd68398 100644 --- a/.github/workflows/size-limit.yml +++ b/.github/workflows/size-limit.yml @@ -23,7 +23,7 @@ jobs: steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 3eb5482b89f2..7dce9880a74c 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -17,7 +17,7 @@ jobs: runs-on: ubuntu-latest steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: @@ -53,7 +53,7 @@ jobs: runs-on: ubuntu-latest steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: @@ -79,7 +79,7 @@ jobs: runs-on: ubuntu-latest steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: @@ -104,7 +104,7 @@ jobs: runs-on: ubuntu-latest steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: @@ -147,7 +147,7 @@ jobs: runs-on: ubuntu-latest steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: @@ -188,6 +188,12 @@ jobs: if: ${{ matrix.module == 'dist' }} run: node ./tests/dekko/dist.test.js + - name: check use client + if: ${{ matrix.module == 'dist' }} + run: node ./tests/dekko/use-client.test.js + env: + LIB_DIR: dist + # dom test - name: dom test if: ${{ matrix.module == 'dom' }} @@ -225,7 +231,7 @@ jobs: runs-on: ubuntu-latest needs: [normal-test] steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: @@ -251,7 +257,7 @@ jobs: runs-on: ubuntu-latest steps: - name: checkout - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: @@ -286,6 +292,10 @@ jobs: - name: check run: node ./tests/dekko/lib.test.js + + - name: check use client + run: node ./tests/dekko/use-client.test.js + needs: setup compiled-module-test: @@ -302,7 +312,7 @@ jobs: - name: checkout # lib only run in master branch not in pull request if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }} - uses: actions/checkout@v3 + uses: actions/checkout@v4 - uses: actions/setup-node@v3 with: diff --git a/.github/workflows/verify-package-version.yml b/.github/workflows/verify-package-version.yml index 6ff6065a3581..506294874259 100644 --- a/.github/workflows/verify-package-version.yml +++ b/.github/workflows/verify-package-version.yml @@ -15,7 +15,7 @@ jobs: runs-on: ubuntu-latest if: contains(github.event.pull_request.title, 'changelog') || contains(github.event.pull_request.title, 'release') steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 - name: verify-version uses: actions-cool/verify-package-version@v1 with: diff --git a/.gitignore b/.gitignore index 8bc92f8bdd6b..fc7b9febbb8f 100644 --- a/.gitignore +++ b/.gitignore @@ -68,3 +68,4 @@ __image_snapshots__/ .husky/prepare-commit-msg .eslintcache +.node-version diff --git a/.prettierrc b/.prettierrc index 9d5b9bf640c1..73e7db810cd9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,6 +4,8 @@ "trailingComma": "all", "printWidth": 100, "proseWrap": "never", + "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", "", ".*"], + "plugins": ["@ianvs/prettier-plugin-sort-imports"], "overrides": [ { "files": ".prettierrc", diff --git a/AUTHORS.txt b/AUTHORS.txt deleted file mode 100644 index bc018e296dc5..000000000000 --- a/AUTHORS.txt +++ /dev/null @@ -1,1590 +0,0 @@ -+v -07akioni -17073025 -2724635499 -282159468 -778758944 -AKing -Aaron Cawte -Aaron Planell López -Aaron674092290 -Adam Stankiewicz -Aditya Padhi -Adrian Dimitrov -Adriano Ruberto -Aex -Ahmad Abdelaziz -Ahmed AlSammany -Ahmet Simsek -Aidin -Aiello -Akara -AkiJoey -Akshat Mittal -Alan Braithwaite -Alan Deng -Albert Mañosa -Albert Zhang -Albert Zheng -Albert 理斯特 -Alberto Marchetti -Aleck Landgraf -Alek Ye -Aleksandr Chernokondratenko -Alex -Alex Simons -Alexander -Alexander Anpleenko -Alexander Ionov -Alexander Kachkaev -Alexander Suevalov -Alexander.Kosov -Alexandre Kirszenberg -Alexey Vinogradov -Alexey Yakovlev -Alfred Qiu -Ali Zhdanov -AliRezaBeigy -Aliaksandr -Alina Andrieieva -Alireza -Alvin Abia -Aminul Islam -Amir Arafat -Amir M. Mohamadi -Amorites -Amour1688 -Amumu -Anas Tawfeek -Andre Perunicic -Andre Zyczkowski -Andrea Blanco -Andrew Blakey -Andrew Horn -Andrew Murray -Andrew Shearer -Andrey G -Andrzej Dybionka -André -Andrés -AndyJin -Ankit Babbar -Antee -Aobo Yang -Ardo Kusuma -Ariunbat Ulambayar -Arlindo Torres -Arnab Sen -Arthur Denner Oliveira Santos -Artin -Arvin Xu -Ash Kumar -Ashot Mnatsakanyan -Austaras -Ayden -Aymen Bouchekoua -Aymen Chebbi -BK Heleth -Babajide Fowotade -Baic -Barry -Bartek -Belikov Ivan -Ben Callaway -Benedikt Franke -Benjamin Amelot -Benjamin Kniffler -Benjamin Schuch -Benjamin Vertonghen -Benjy Cui -Benoît Latinier -BensonChen -Bernie -Bestie -Bhavesh Chowdhury -Bilal Sirazitdinov -Bill Searle -Bill Sheikh -Blaz Pocrnja -Bo Chen -Bojack -Bolun Zhang -Bora Ikizoglu -Bosseskompis -Bozhao -Bradley Xu -Brett Lamy -Brook Shi -Bruce Mitchener -Bruno Maia -Bryan Berger -BugHiding -C -C. T. Lin -C.J. Winslow -CORP\lianyufeng -Calin Vlad -Cam Song -Camol -Cang Ta -Canwen Xu -Carlos Coves Prieto -Carter Feldman -Caspian Chen -Cat-XHS -Catalin Miron -Cedong.Lee -Cee Cirno -Cemre Mengu -Chalk -Chandler Moisen -Chang Wang -Chang Wei -Charles Covey-Brandt -Charlie Jonas -Chelsea Huang -ChenXiao -Cheng Liu -Chenjia -Chiciuc Nicușor -Chikara Chan -Chinnawat Chimdee -Chris Frisina -Chris Kelly -Chris Young -ChrisFan -Christian Fleschhut -Christian Vadalà -Christophe Hurpeau -Christopher Deutsch -ChuTao Zhang -Chuang Yu -Chuck -Chuns Chen -Claudio Restifo -Cody Chan -Cole -Colton Pierson -Confiks -Cong Yoo -Cong Zhang -Connor White -Conway Anderson -Cooper Veysey -Cordaro -CornerSkyless -Curly.Water -D & R -Daewoong Moon -Dalton Craven -Damian Green -Dan Minshew -Dana Janoskova -Dane David -Daniel -Daniel Chang -Daniel Gomez -Daniel Harrison -Daniel Pfeffer -Danny Hoower Antonio Viasus Avila -Daphne Won -Daqi Song -Darren Poon -Daryl Roberts -Darío Hereñú -Dave -David Broder-Rodgers -David Hatten -David Schneider -Davide Bianchi -Dawnlck -Dean van Niekerk -Debiancc -DengYun -Denis -Dennis Chen -Denys Halenok -Derrick -Di Wu -DiamondYuan -Diego Barreiro -Diego Villacís -Dimitri Mitropoulos -Dmitriy -Dmitriy Mironov -Dmitry Bolotin -Dmitry Cherendieiev -Dmitry Gladkikh -Dmitry Guryev -Dmitry Manannikov -Dmitry Snegirev -Dmitry Tikhomirov -Dongcheng Wang -Dony Sukardi -Dorian -DosLin -Douglas Mason -Dreamcreative -Dunqing -Duy Pham -Dzmitry Yarmoshkin -EMpersonal -Eager -Eber Rodrigues -EcmaProSrc.P/ka -Ed Moore -Edd Hannay -Eddie Xie -Eden Wang -Eduardo Ludi -Edward -Egor Yurtaev -Elaina Cherudim -Eldar Mirzabekov -Eldar Mustafaiev -Eli White -Eliot Sanford -Ell Bradshaw -Emerson Laurentino -Emily Xiong -Ender Lee -Eric -Eric Bonow -Eric Celeste -Eric Chen -Eric Lee -Eric Turriff -Eric Wang -Ernest Folch -Erwann Mest -Eslam Yahya -Eugene Matvejev -Eugene Molokov -Eusen -Evan Charlton -EvanOne（文一） -Evgeny Kuznetsov -Eward Song -FJHou -Fachreza Muslim -Federico Marcos -Ferdi Koomen -Fergus Leung -Fernando Giarritiello -Filip Kukovec -Filip Seman -Florian Orpelière -Flynn -Fog3211 -For177 -Frank -Frank Fang -Frezc -Fullstop000 -GJ Wang -GSBL -Gabe Medrash -Gabriel Haruki -Gabriel Henrique -Gabriel Le Breton -Gabriel Mendez Reyes -Gabriel Nunes -GalenWong -GannonSun -Gao Jiangmiao -Garrick Crouch -Gautier -Geoff Holden -Geoffrey Bell -George Ciobanu -George Gray -Germini -Gerson Garrido -Gherciu Gheorghe -Gianmarco Rengucci -Gin-X -Go7hic -Goh Zhao Yang -Goku -Golevka -Googleplex -Gourav Saini -Graeme Yeates -Grant Klinsing -Gray Choi -Guan Hao -Guan Yu Pan (Jacky) -Guichi Zhao -Guojun Wang -Guru Mahendran -HJin.me -Hai Phan Nguyen -Haibin Yu -Hale Deng -Han Han -Hanai -Haniel Cui -Hanjun Kim -Hanz Luo -HarlanLuo -Haroen Viaene -Harrison -Harry.Hou -Harshit Mehrotra -Harutaka Kawamura -He Linming -Heaven -Hector Ayala -Hell Cat -Henri Normak -HeskeyBaozi -HiddenMan -Hieu Ho -Hieu Pham -Higor Araújo dos Anjos -Hollow Man -Homyee King -Hossein Alimadad -Hossein Mohammadi -HouXiancheng -Hsuan Lee -Hubert Argasinski -Hughen -Hugo LEHMANN -Humble -Hyunseok.Kim -ILdar Nogmanov -Igor -Igor Andriushchenko -Igor G -Ikko Ashimine -Ilan -Ilya Bondarenko -ImJoeHs -Infinity -Inian -Israel kusayev -Italo -Ivan -Ivan Kravets -Ivan Rudoy -Ivan Trofimov -Ivan Tsybulin -Ivan Yakovlev -Ivo Stratev -JRoger -Jabir K.H -Jack -Jack Hsieh -Jack Lo -Jack Works -Jackie.Ls -Jacques Kvam -JaePil Jung -Jaewook Ahn -Jaimy de Graaf -Jake Richards -Jaly -James -James Tsang -James Yeung -JamesYin -Jamki -Jan Václavík -Janry -Jaroslav Bereza -Jarret Moses -Jarvis1010 -Jase Owens -Jase Pellerin -Jason -Jason Chung -Jason Yin -Jay Fong -Jean-Luc Sorak -Jean-Philippe Roy -Jeff Wen -Jefferson Rafael Kozerski -Jeffrey Carl Faden -Jehu -Jelle de Jong -Jenna Van Conett -Jennie -JeromeLin -Jerry Bendy -Jesper We -Jesus The Hun -Jiabin Peng -Jiahao -Jiajun Chen -Jialei -Jiawei Huang -Jichao Zhong -Jiehui -Jieraaa -Jimmy -Jin ZHANG -JinXin -Jing Ma -Jingsong Gao -Jinke Li -Jinxuan Zhu -Jirka-Lhotka -Joao Rabelo -Jocker -Joe -Joe Hsu -Johannes Andersen -Johannes Loewe -John -John Carlo -John Johnson III -John Nguyen -Johnny Lim -Johnny-young -Johnsen -Jonatas Walker -Jonathan Gabaut -Jonathan Lee -Jonny Buchanan -Joo Wu -Jordan Hornblow -Joshua Chen -Josue Peralta -Josué -JounQin -JribiBelhassen -Jtree03 -Ju/Smwhr -JuFeng Zhang -Juan Carlos Lloret H -Juan Rodrigo Venegas Boesch -Julia Passynkova -Julien Confetti -Jun Wooram -JuniorTour -Junwoo Ji -Junyu Zhan -Juraj Carnogursky -Justin Reich -Justin Schuldt -Justin Sun -Jógvan Olsen -KAM -Kaan KÜÇÜK -Kaien Liao -Kamal Mahmudi -Karott -Kasra Bigdeli -Katsiaryna Pustakhod -Kayson Wu -Kelvin Chu -Kenaniah Cerny -Kenneth Luján Rosas -Kenneth Truong -KentonYu -Kermit -Keven Leone -Kevin Ivan -Kevin Wang -Kevinaskin -KgTong -Khaled -Khalifa Lame -Kian -Kieren -Kiho · Cham -Kim, Harim -Kimmo Saari -KingxBeta -Kirill Alexander Khalitov -Kirill Stiopin -Kiyan -Knacktus -Knut Olav Bøhmer -Kodai Nakamura -Kol Chen -Konrad Machlowski -Krishna Dubagunta -Krishna Singh -KuangPengfei -Kuitos -Kurt Furbush -Kyle Kelley -Kyle Rosenberg -Kyrielin -LLinFan- -LT246-VINHNPH\vinhnph -Laith -Larry Laski -LaySent -LeeHarlan -LeezQ -Len -Lennox Omondi -LeoYang -Leon Koole -Leon Shi -Lewis -Li C. Pan -Li Chao -Li Ming -LiPinghai -LilyWakana -Liming Jin -Lioness100 -Liron Lavy -Liu Bowen -Liu Ya -Liu Yang -LongYinan -Loogeek -Loïc Huvé -Lu Yu -Lucien Lee -Ludwig Bäcklund -Luke Vella -Luobo Zhang -Lyndon001 -M Mitchell -M. Burak Kalkan -MD. Ariful Alam -MESSAOUDI Oussama -MG12 -Ma Tianxiao -MaHui -Maciej Czekaj -MadCcc -Madis Väin -Maksim Nesterenko -Maksim Slotvinskij -Maksym Mosyura -Malven -Manjit Kumar -Manoj Kumar -Manweill -MaoYiWei -Map1en_ -Marcel Jackwerth -Marcela Bomfim -Marcia Sun -Marcio Pamplona -Marco Afonso -Marco Heinrich -Marcus Bransbury -Marcus Stenbeck -Marius Ileana -Mars Wong -Marshall Chen -Martijn -Martin Cermak -Martin Litvaj -Martin Novák -Mateusz Burzyński -Mathew -Mathieu Anderson -Matias Orellana -Matt Lein -Matt Wilkinson -Max -Maximilian Meyer -Md_ZubairAhmed -Mehdi Salem Naraghi -MeiLin -MengZhaoFly -Meow-z -Meowu -Miaow -Micah Guttman -Michael Adams -Michael Crenshaw -Michael Krog -Michael Salaverry -Michael Shing -Michael Waddell -Michael Wang -Michal Pekar -Michalis Macheras -Michał Jasikowski -Michelle Zhang -Miclle Zheng -Mikasa33 -Min -MinJeong Kim -MinYuan -Ming Hann -Minh Quy -Minqi Pan -Minsung Ryu -Minwei Xu -Mirko Alic -Misha Kav -Mitchell Demler -Moein Alizadeh -Mohamed Seada -Mohammad Anas -Mohammad Arsalan -Mohammad Faisal -Mohan Ban -Mohelm97 -Mongkii -Moni -Monty -Mounish Sai -Mr.Biscuit -Mr.Tone -Mr.jiangzhiguo -Ms. Wang -MuYu -Muhammad Sameer -Muhammad Sohaib Raza -MuxinFeng -Mykyta Velykanov -Mário Gonçalves -Nariman Movaffaghi -Nathan Broadbent -Nathan Griffin -Nathan Schneider -Nathan Tavares Nascimento -Nathan Wells -Naveen -Neekey -Neil -Nekron -Neo Tan -Neto Braghetto -Neverland -Nghiệp -Nico -Nicola Bosco -Nidhi Agarwal -Nihal Saxena -Nikesh -Nikita Bystrov -Nikita Marinosyan -Nikitenkova -Niko Autio -Nikolay -Nikolay Solovyov -Nima Dehnashi -Nimo -NinJa -Nishant Arora -Niyaz Akhmetov -Noel Kim (김민혁) -Nokecy -OAwan -Olaniyi Philip Ojeyinka -Oleg Kuzava -Oleksandr Kovalchuk -Olivier Louvignes -Omri Grossman -Ooi Yee Wei -Open Next -Oren Kosto -Orkhan Huseynli -OuYancey -PCCCCCCC -Pablo Recalde -Panjie Setiawan Wicaksono -Patrick Gidich -Patryk -Paul Damnhorns -Paul Julien -Peach -Pengsha Ying -Peritot Chan -Peter -Peter Berg -Peter Gassner -Phanupong Janthapoon -Philip Oliver -PhosphorusP -Phyllis -Picsong -Pierre -Pierre Neter -Piotr Monwid-Olechnowicz -Piper Chester -PisecesPeng -Pixy Yuan -PlayerWho -Pob Ch -Pooya Parsa -Primlx -Pubudu Kodikara -Pyiner -Pyroboomka -QC-L -Qhan W -Qiaosen Huang -QingLance -Qingrong Ke -QoVoQ -Radomir Skrzepij -Rafael Carvalho -Rafael Cosman -Rafael Martins -Rahul Gurung -Rain120 -Rainey -Rainy -Rajil Bajracharya -Rallets -Ramsés Moreno -Ran Byron -Randy -Raphael Chauveau -Ray Booysen -Rayron Victor -Reed Sun -Regan Langford -Renny Ren -Renovate Bot -Rex -Rex Zeng -Ricardo Morais -Ricardo Raphael Joson -Richard D. Worth -Rick Zhou -Ritesh Makan -Riyad Elberkawy -Robert Wilkinson -Robin Pokorny -Rodrigo Ehlers -Rohan Bagchi -Rohan Malhotra -Roman Soroka -Ron Šmeral -Rongjian Zhang -Rrrandom -RunningCoderLee -Ryan Lee -RyanHui -Régis Foucault -SHEN Lin -Saeed Rahimi -Sagar Jain -Sagie501 -Sakari Pesonen -Sakol Assawasagool -Salavat Gizatov -Sam Chen -Sam Kah Chiin -Sam Lanning -Sam Marks -Sam Maxwell -Samed Düzçay -Sami Mäkinen -Samuel Gaus -Sanghyeon Lee -Sangle -Sanjay Kumar -Sanonz -Scott Goci -Scott Sturgeon -Sean Lin -Sean Willis -Seba Kerckhof -Sebastian Blade -Sebastian Busch -Semro -Sepush -Sergey Kachanovskiy -Sergey Levkovich -Sergey Volynkin -Sergio Crisostomo -Sevak -Shanjie Chen -Shawn Sit -Shengnan -Sheralijon -ShiTengFei -ShuYu Wang -Shubham Kanodia -Shun -Shuvalov Anton -SimaQ -Simo Aleksandrov -Simon -Simon Altschuler -Simon Knott -Simón Posada Fishman -Siou -Sivaraj -SkyAo -Skylar艺璇 -Snyk bot -Songhn -Sonjeet Paul -Sonu Sharma -SoraYama -South -Spencer -Stanley Thijssen -Star -Starpuccino -Stef Schenkelaars -Stephen Esser -Stevche Radevski -Steven.zhong -Subroto -Suki小火车 -Sukka -Sumit Vekariya -Sunny Luo -Sven Efftinge -Svyatoslav -SyMind -Sylvain Boulade -SylvanasGone -TTC -TangLL -Tanmoy Bhowmik -Tannmay S Gupta -Tao -Tao Zhang -Taucher Christoph -Taylor Sabell -Ted Shin -Teng YANG -Tengjiao Cai -Terence -The 1975 -The Rock -Themi Tsiotas von Pfaler -Theo Satloff -Thibault Derousseaux -Thiebaud Thomas -Thomas -Thomas Ladd -Thomas Zipner -Tino D -Tmk -Tom Gao -Tom Xu -TomIsion -Tomás Francisco -Tomáš Hylský -Tomáš Szabo -Trotyl Yu -Troy Li -Troy Thompson -TsesamLi -Ty Mick -Tyler -Ubaldo Quintana -Uladzimir Atroshchanka -Umberto Gariggio -Vadim Macagon -Valentin Vichnal -Van Nguyen -Varun Dey -Varun Sharma -Vemund Santi -Vic -Victor -Victor Repkow -Vijay Thirugnanam -Vincent Zhang -Vineet Srivastav -Viorel Cojocaru -Vishal Jagtap -Vitaliy Mazurenko -Vitaly Budovski -ViviaRui -Vlad Vovk -Vu Hoang Minh -Vyacheslav Kamenev -Walter Barbagallo -Wang Jun -Wang Riwu -Wang Zhengchen -Wang yb -Warren Seymour -Webber Takken -Wei Zhu -Wenchao Hu -Wendell -Wenqi Chen -Wensheng Xu -Wesley -Will -Will Chen -Will Soares -William Bergeron-Drouin -William Cai -William Stein -WingGao -Winme -Wu Haotian -WuJiali -Wuxh -X-Jagger -XBTop1! -XIN HU -XTY -XiaoPi -Xiaoming -Xie Guanglei -Xinxing Li -Xinzhe Wang -Xiping.wang -Xu Zhiwei -XuMM_12 -Xudong Cai -Xudong Huang -Xuhao -Yaindrop -YanYuan -Yang Bin -Yanghc -Yangzhedi -Yanlin Jiang -Yanming Deng -Yann Normand -Yann Pringault -Yash Joshi -Yasin Uslu -Yevhen Hryhorevskyi -Yiming -Yogesh -Yu -Yu Mao -YuChao Liang -YuTao -Yuan -Yuhang Liu -Yuiai01 -Yuji Ueki -Yuki Zhang -Yulia Maximova -Yunfly -Yunhwan Logan Na -Yunus EŞ -Yunwoo Ji -Yuri Pirola -Yurii Brusentsov -Yury Kozyrev -Yusuke Ito -Yuwei Ba -Yuxuan Huo -Yuyao Nie -YuyingWu -Yvan Zhu -ZH-seven -ZHANGYU -ZN1996 -ZYSzys -Zach Bird -Zack Amiton -Zack Craig -Zap -ZeroToOne -Zester Quinn Albano -Zhang Zhi -Zhanghao -Zheeeng -ZhiHao Li -Zhiqiang Gong -Zhongjan -Zhou Fang -ZhouZhen -Zhuo Chen -ZhuoYang Wu(阿离) -Ziluo -ZivHe -Zohaib Ijaz -Zzzen -_XiaoTian -aLIEzsss4 -aaarichter -aashutoshrathi -acfasj -adam -afc163 -agarciaguillo -agent-z -aghArdeshir -ahalimkara -ajuner -alekslario -alex89lj -alexchen -amedora -aoxiang78 -appleshell -arange -arifemrecelik -arturpfb -ascodelife -ascoders -ashishg-qburst -atomoo -atzcl -bLue -babycannotsay -baidumap -bang -baozefeng -bcd337 -benben -bigbigbo -binyellow -blankzust -bluelovers -bobo -bqy_fe -btea -bukas -byuanama -byzyk -bzone -caoyi -capdiem -carrie-tanminyi -cathayandy -cc189 -chaofeis -chchen -cheapCoder -chen wen jun -chen-jingjie -chencheng (云谦) -chenlei -chenlong -chensw -chenxiang -chenxiaochun -chequerNoel -chisus -chunlea -cieldon32 -cjahv -cjmafei -cl1107 -clean99 -clinyong -cnjs -codesign -cooljser -corneyl -csr632 -daczczcz1 -dainli -damon.chen -david.lv -davidhatten -ddcat1115 -decade -delesseps -denzw -dependabot[bot] -desperado -detailyang -devqin -dian.li -digz6666 -dingkang -djorkaeff -dolfje -dongfang -douxc -dpyzo0o -dujun -duzliang -edc-hui -edgji -eidonjoe -elios -elrrrrrrr -eruca -ezpub -fairyland -feeng -feng zhi hao -fengmk2 -fish yu -fkysly -flashback313 -flyerH -frezc -gaokaifeis -gaoryrt -gaozhenqian -genie -gepd -godfather -gregahren -gxvv -gyh9457 -gzq -haianweifeng -haimrait -haipeng -handy -hank -hanpei -hansnow -haoxin -hardfist -hatanon -hauwa123 -hebingchang -hehe -hello-chinese -helloqian12138 -henryv0 -hi-caicai -hicrystal -hms181231 -hongxuWei -howard -huangyan.py -hugorezende -huishiyi -hustcc -huzzbuzz -hydraZty -i3web -iamcastelli -iamkun -ibrahim velinov -imosapatryk -int2d -iojichervo -iola1999 -ioldfish -iorikingdom -isaced -isakol -itibbers -iugo -j3l11234 -jasonslyvia -jasonxia23 -jeessy2 -jiajiangxu -jiang -jiang.an -jiang.he -jieniu$ -jinouwuque -jinrui -jinyaqiao1102 -jojoLockLock -joson -jueinin -junjing.zhang -kacjay -kaifei -kailunyao -kalykun -kang -kanweiwei -kaoding -karasu -kasinooya -kavin -kayw -kdenz -kdepp -keng -kenve -kermolaev -kily zhou -kiner-tang(文辉) -klouskingsley -ko -konakona -kossel -kristof0425 -kuang -kun sam -lalalazero -lamvananh -leadream -lehug -leijingdao -lewis liu -lexlexa -lgmcolin -lhx -lhyt -liangfei -lich-yoo -liekkas -lihao -lihqi -lijianan -lilun -limingxin -linqiqi077 -linxianxi -lisenenkov -littleLane -littledian -liuchuzhang -liuycy -lixiaochou077 -lixiaoyang1992 -liyuanqiu -liyunhe -lizhen -llwslc -loganpowell -losgif -lushevol -luyiming -lvren -lxnxbnq -lyhper -lyn -lyon.han -mArker -maks -maomao -maximest-pierre -melchior voidwolf -memoryza -mgrdevport -mingyan.yu -miracles1919 -mjfwebb -mkermani144 -mmmveggies -mofelee -moonrailgun -morning-star -mraiguo -mumiao -mushan0x0 -muxin -muzuiget -natergj -netcon -ngolin -nick-ChenZe -niko -nitinknolder -nnecec -nuintun -oldchicken -paleface001 -parabolazz -paranoidjk -parlop -paul -pbrink231 -peiming -pengtikui -pfsu -picodoth -pinggod -pizn -plainnany -popomore -prettyboyweiwei -puxiao -qi gao -qianbin -qiaojie -qiqiboy -qliu -qqabcv520 -qramilq -qubaoming -ravirambles -realEago -rendaoer -renzhao1113 -richardison -roottool -ryangun -ryanhoho -ryannz -sadmark -sallen450 -samir elsharkawy -sdli -seognil LC -serializedowen -sfturing -shangyuan.ning -shawtung -shelwin -shlice -shmilyKang -shouyong -simplejason -siyu77 -slientcloud -sliwey -snadn -snail -snowingfox -soeyi -sojournerc -soso -sosohime -spideeee -sribich -stefango -stevenyuysy -stickmy -susiwen8 -swindme -syssam -tae -tangjinzhou -tangzixuan -taoweicn -tdida -thegatheringstorm -thilo-behnke -tianli.zhao -tom -toshi1127 -twobin -ty888 -u3u -ubuntugod -uchanlee -undefined -unknown -ustccjw -vaakian X -vagusx -valleykid -vaytsel -veveue -vgeyi -vldh -vouis -wa-ri -wadezhan -wan wan -wangao -wangshantao -wangshuai -wangtao0101 -wangxiaolei -wangxing -wangxingkang -wangxueliang -wanli -warmhug -weited -wendellhu -wenhong -whinc -whtang906 -whwangms -willc001 -wizawu -wleven -wonyun -woodsand -wwwxy -wx1322 -xiaofan2406 -xiaofine1122 -xiaohuoni -xiaosong -xiaoxintang -xiejiahe -xilihuasi -xinhui.zxh -xliez -xrkffgg -xuqiang -xyb -xz -y-take -yanguoyu -yangwukang -yangxiaolin -yanm1ng -yaoweiprc -ycjcl868 -ye4241 -yehq -yeliex -yeshan333 -yibu.wang -yifanwww -yiminanci -yiminghe -yingxirz -yiwwhl -youmoo -youngz -yuche -yuezk -yui -yykoypj -z -zack -zahgboat -zefeng -zelongc -zerob4wl -zhangchen -zhangguanyu02 -zhangj -zhangpc -zhangyangxue -zhangyanling77 -zhangzh -zhao-huo-long -zhaocai -zhaopeidong -zhenfan.yu -zhengjitf -zhuguibiao -zhujun24 -zhyupe -zilong -zinkey -zj9495 -zkwolf -zlljqn -zollero -zongzi531 -zoomdong -zqran -ztplz -zty -zuiidea -zx6658 -zxyao -zytjs -zz -°))))彡 -Ömer Faruk APLAK -Ștefan Filip -रोहन मल्होत्रा -一喵呜 -丁文涛 -不吃猫的鱼 -丶尘殇 -乔奕轩 -九思⚡⚡⚡ -二哲 -二手掉包工程师 -二货爱吃白萝卜 -云剪者 -付引 -何乐 -何志勇 -何锦余 -佛门耶稣 -信鑫-King -元凛 -兼续 -冷方冰 -刘红 -初心Yearth -南北 -南小北 -只捱宅 -可乐 -吕立青 -吴泽康 -啸生 -大猫 -子瞻 Luci -宝码 -小哈husky -小菜 -小镇靓仔 -小鹅鹅鹅 -尾宿君 -山客 -崔宏森 -左耳咚 -广彬-梁 -庄天翼 -廖应龙 -廖星 -张仕传 -张大大 -张威 -张秀玲 -徐坤龙 -徐新航 -愚道 -曾凯 -期贤 -未觉雨声 -朮厃 -李瀚 -李环冀 -杨兴洲 -杨哲迪 -杨小事er -松子 -林煌东 -柚子男 -沐霖 -炒米粉 -烽宁 -爱but的苍蝇 -王小王 -王林涛 -王浩 -王集鹄 -琚致远 -白羊座小葛 -白飞飞 -砖家 -社长长 -章鱼怪 -竹尔 -米老朱 -精武陈真 -红果汁 -约修亚 -翁润雨 -臧甲彬 fadeaway -舜岳 -苏秦 -英布 -菠萝吹雪 -萧琚 -董天成 -蒋璇 -蔡伦 -薛定谔的猫 -藤原托漆 -蘑菇 -行冥 -诸岳 -诸葛龙 -谭真 -超能刚哥 -迷渡 -那里好脏不可以 -郑国庆 -郑旭 -野迂迂 -闲耘™ -陆离 -陈帅 -陈广亮 -陈立林 -隋鑫磊 -雷玮杰 -马斯特 -马金花儿 -骆也 -骗你是小猫咪 -高力 -鬼厉 -麦谷 -黄俊亮 -黄文鉴 -黄斌 -黑雨 -龙风 -龚方闻 \ No newline at end of file diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index dc13f5c553a7..9db3d5378727 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,109 @@ tag: vVERSION --- +## 5.9.0 + +`2023-09-08` + +- 🔥 Table component now supports the `virtual` attribute to enable virtual scrolling. [#44349](https://github.com/ant-design/ant-design/pull/44349) +- 🔥 Form's `validateFields` now supports `recursive` to validate all fields with nested paths. [#44130](https://github.com/ant-design/ant-design/pull/44130) +- 🔥 Form.Item now supports `validateDebounce` to configure validation debounce. [#44633](https://github.com/ant-design/ant-design/pull/44633) +- 🆕 Button component has added three component tokens: `contentFontSize`, `contentFontSizeSM`, and `contentFontSizeLG`, allowing customization of font sizes for different sizes. [#44257](https://github.com/ant-design/ant-design/pull/44257) +- 🆕 Form's `requiredMark` now supports custom rendering. [#44073](https://github.com/ant-design/ant-design/pull/44073) +- 🆕 Tabs component has added a new component token `itemColor` to control the text color of normal tabs. [#44201](https://github.com/ant-design/ant-design/pull/44201) +- 🆕 ColorPicker now supports `defaultFormat`. [#44487](https://github.com/ant-design/ant-design/pull/44487) [@CYBYOB](https://github.com/CYBYOB) +- 🆕 Form supports `feedbackIcons` and Form.Item supports `hasFeedback={{ icons: ... }}`, now feedback icons could be customized in both ways. [#43894](https://github.com/ant-design/ant-design/pull/43894) [@gldio](https://github.com/gldio) +- 🆕 Added the `itemSelectedColor` component token to the Segmented component. [#44570](https://github.com/ant-design/ant-design/pull/44570) [@xiaozisong](https://github.com/xiaozisong) +- 🆕 Added support for custom function rendering in the Modal footer. [#44318](https://github.com/ant-design/ant-design/pull/44318) [@RedJue](https://github.com/RedJue) +- 🆕 Added responsive setting support for `items.span` in Descriptions. [#44534](https://github.com/ant-design/ant-design/pull/44534) +- 🆕 Added support for global configuration of `indicatorSize` in Tabs component through ConfigProvider. [#44517](https://github.com/ant-design/ant-design/pull/44517) +- 🆕 Added the `direction` parameter to the `filterOption` function in the Transfer component. [#44417](https://github.com/ant-design/ant-design/pull/44417) [@Zian502](https://github.com/Zian502) +- 🆕 Added support for the `source` parameter in the `onSearch` method of the Input.Search component. [#44457](https://github.com/ant-design/ant-design/pull/44457) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Added a component token to the Input component for customizing the shadow when activated. [#44410](https://github.com/ant-design/ant-design/pull/44410) +- 🆕 Added a component token to the Radio component for customizing the color when the fill button is selected. [#44389](https://github.com/ant-design/ant-design/pull/44389) +- 🆕 Tour component now supports horizontal offset for spacing. [#44377](https://github.com/ant-design/ant-design/pull/44377) [@RedJue](https://github.com/RedJue) +- 🆕 Tour component now supports customizing the close button using the `closeIcon` prop. [#44312](https://github.com/ant-design/ant-design/pull/44312) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Avatar component now supports configuring size using ConfigProvider. [#44288](https://github.com/ant-design/ant-design/pull/44288) [@li-jia-nan](https://github.com/li-jia-nan) +- 🆕 List component now supports configuring size using ConfigProvider's `componentSize` option. [#44267](https://github.com/ant-design/ant-design/pull/44267) [@Yuiai01](https://github.com/Yuiai01) +- 🆕 Cascader component now supports `autoClearSearchValue` option. [#44033](https://github.com/ant-design/ant-design/pull/44033) [@linxianxi](https://github.com/linxianxi) +- 🆕 Added support for `rootClassName` in [Upload](https://github.com/ant-design/ant-design/pull/44060),[AutoComplete](https://github.com/ant-design/ant-design/pull/44055),[Badge.Ribbon](https://github.com/ant-design/ant-design/pull/44056),[Input.TextArea](https://github.com/ant-design/ant-design/pull/44058),[RangePicker](https://github.com/ant-design/ant-design/pull/44057),[TimePicker](https://github.com/ant-design/ant-design/pull/44059) [@kiner-tang](https://github.com/kiner-tang). +- 💄 Refactored the structure of Modal.confirm to fix the width abnormality caused by `width: fit-content` and the style line break issue with a large amount of text. Extracted confirm styles for lazy loading to optimize style size in SSR. [#44557](https://github.com/ant-design/ant-design/pull/44557) +- 💄 Adjusted the linear gradient colors for `circle` and `dashboard` in Progress to conical gradients. [#44404](https://github.com/ant-design/ant-design/pull/44404) +- 💄 Fixed DatePicker missing custom footer style. [#44642](https://github.com/ant-design/ant-design/pull/44642) [@li-jia-nan](https://github.com/li-jia-nan) +- 💄 Fixed Tag where `tag.className` and `tag.style` did not work on Tag.CheckableTag in ConfigProvider. [#44602](https://github.com/ant-design/ant-design/pull/44602) +- 💄 Fixed the inconsistency in width between the dropdown and the input box when the container of Select component has `transform: scale` style configured in `getPopupContainer` option. [#44378](https://github.com/ant-design/ant-design/pull/44378) +- 🐞 Fixed an issue where Form.Item with `noStyle` configuration prevented the bound element from consuming `useStatus`. [#44576](https://github.com/ant-design/ant-design/pull/44576) +- 🐞 Fixed an issue where using Tag within Popover/Popconfirm caused incorrect `font-size` on hover. [#44663](https://github.com/ant-design/ant-design/pull/44663) +- 🐞 Fixed an issue where Input's default button had extra shadow. [#44660](https://github.com/ant-design/ant-design/pull/44660) [@daledelv](https://github.com/daledelv) +- 🐞 Fixed an issue where using Modal's hooks to close it with the `esc` key didn't correctly trigger the `await`. [#44646](https://github.com/ant-design/ant-design/pull/44646) +- 🐞 Fixed the issue where the preset `size` of Space did not follow the Design Token, now compact mode correctly handles the corresponding spacing values. [#44598](https://github.com/ant-design/ant-design/pull/44598) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 Fixed the issue in Upload where the download button would still be displayed after clicking on it and moving the mouse out of the file. [#44594](https://github.com/ant-design/ant-design/pull/44594) [@zbw-zbw](https://github.com/zbw-zbw) +- 🐞 Fix FloatButton that margin not work with `href` in FloatButton.Group. [#44707](https://github.com/ant-design/ant-design/pull/44707) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 Fixed the issue where `fontSizeSM` token was not being applied to Button component. [#44217](https://github.com/ant-design/ant-design/pull/44217) [@CHENGTIANG](https://github.com/CHENGTIANG) +- 🐞 The Watermark now works in nested Modal and Drawer components. [#44104](https://github.com/ant-design/ant-design/pull/44104) +- 🛠 Alert, Tree, Cascader, Layout, Table, Modal, Drawer, Button, Switch, Select, Badge, Form, TimePicker, Spin, Input, Progress, Divider Added Component Token. [#42142](https://github.com/ant-design/ant-design/pull/42142) [#42607](https://github.com/ant-design/ant-design/pull/42607) [#42627](https://github.com/ant-design/ant-design/pull/42627) [#42757](https://github.com/ant-design/ant-design/pull/42757) [#42774](https://github.com/ant-design/ant-design/pull/42774) [#42778](https://github.com/ant-design/ant-design/pull/42778) [#44090](https://github.com/ant-design/ant-design/pull/44090) [#44118](https://github.com/ant-design/ant-design/pull/44118) [#44174](https://github.com/ant-design/ant-design/pull/44174) [#44228](https://github.com/ant-design/ant-design/pull/44228) [#44261](https://github.com/ant-design/ant-design/pull/44261) [#44282](https://github.com/ant-design/ant-design/pull/44282) [#44334](https://github.com/ant-design/ant-design/pull/44334) [#42192](https://github.com/ant-design/ant-design/pull/42192) [@hms181231](https://github.com/hms181231) [@linhf123](https://github.com/linhf123) [@poyiding](https://github.com/poyiding) [@Wxh16144](https://github.com/Wxh16144) [@Yuiai01](https://github.com/Yuiai01) +- 🛠 Remove compatibility logic for old versions of IE browser for Space and Grid components to reduce bundle size. [#44620](https://github.com/ant-design/ant-design/pull/44620) [@li-jia-nan](https://github.com/li-jia-nan) +- TypeScript + - 🤖 Export BasicDataNode type from the Tree. [#44624](https://github.com/ant-design/ant-design/pull/44624) [@kiner-tang](https://github.com/kiner-tang) + +## 5.8.6 + +`2023-09-02` + +- 🛠 Optimize some styles size in document.head by extracting unused styles. + - 🛠 Notification and Message only generate styles when displayed. [#44488](https://github.com/ant-design/ant-design/pull/44488) + - 🛠 Extract Tag status & preset color style which will only generate by needed. [#44512](https://github.com/ant-design/ant-design/pull/44512) + - 🛠 Extract Button compact style, now only the corresponding style will be generated when Space.Compact is used. [#44475](https://github.com/ant-design/ant-design/pull/44475) +- 📦 Remove `lodash/camelCase` from `@ant-design/icons` dependencies to reduce bundle size. [ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595) +- Form + - 🐞 Fix Form.Item children not hidden when `wrapperCol.span` is `0`. [#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair) + - 🐞 Fix Form `wrapperCol` to be 24 not working when `labelCol` is set to 24. [#44541](https://github.com/ant-design/ant-design/pull/44541) +- 🐞 Fix Watermark that would crash if `content` is empty string. [#44501](https://github.com/ant-design/ant-design/pull/44501) +- 🐞 Fix ColorPicker popup still working when `disabled` is `true`. [#44466](https://github.com/ant-design/ant-design/pull/44466) [@RedJue](https://github.com/RedJue) +- 🐞 Fix Transfer trigger `onSelectChange` twice sometimes when click checkbox. [#44471](https://github.com/ant-design/ant-design/pull/44471) [@kovsu](https://github.com/kovsu) +- 🐞 Fix Typography scrollbar flush problem when enable `ellipsis`. [#43058](https://github.com/ant-design/ant-design/pull/43058) [@bbb169](https://github.com/bbb169) +- Slider + - 🐞 Fix Slider draggable track unpredictable behavior. [#44503](https://github.com/ant-design/ant-design/pull/44503) [@BoyYangzai](https://github.com/BoyYangzai) [@yoyo837](https://github.com/yoyo837) + - ⌨️ Improve Slider a11y behavior by adding `aria-orientation`. [react-component/slider#859](https://github.com/react-component/slider/pull/859) [@5im0n](https://github.com/5im0n) +- 🐞 Fix Steps `type="nav"` last item did not hide arrow properly. [#44582](https://github.com/ant-design/ant-design/pull/44582) [@ohhoney1](https://github.com/ohhoney1) +- TypeScript + - 🤖 Fix Upload file `status` definition to remove unused success status. [#44468](https://github.com/ant-design/ant-design/pull/44468) + +## 5.8.5 + +`2023-08-28` + +- 🛠 Refactor Badge style logic and take Ribbon style out to reduce SSR inline style size. [#44451](https://github.com/ant-design/ant-design/pull/44451) +- 🐞 Fix the issue of abnormal icon styling when using `@ant-design/icons` within App. [#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144) +- 🐞 Fix the issue of vertical dragging malfunction in Carousel. [#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue) +- 🐞 Fix Tour panel use wrong design token. [#44428](https://github.com/ant-design/ant-design/pull/44428) +- 🐞 Fix Form `wrapperCol` with responsive `xs` config not working. [#44388](https://github.com/ant-design/ant-design/pull/44388) +- 🐞 Fix ColorPicker duplicate `key` issue. [#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master) +- 🐞 Fix Radio that not work in Tree title. [#44380](https://github.com/ant-design/ant-design/pull/44380) +- 🐞 Fix Table that would crash when `filterDropdown` does not support `ref`. [#44357](https://github.com/ant-design/ant-design/pull/44357) +- 🐞 Fix Form `inline` layout show extra bottom margin when validation failed. [#44360](https://github.com/ant-design/ant-design/pull/44360) +- 🐞 Fix DatePicker `showTime` working error when `format` is Array. [#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502) +- 🐞 Fix Watermark can not be fully shown when `content` is too long. [#44321](https://github.com/ant-design/ant-design/pull/44321) +- TypeScript + - 🤖 Fix the type error with align property in Dropdown component. [#44423](https://github.com/ant-design/ant-design/pull/44423) [@LeTuongKhanh](https://github.com/LeTuongKhanh) + +## 5.8.4 + +`2023-08-18` + +- ColorPicker + - 🐞 Fix the cursor jumps when entering lowercase English letters in the ColorPicker color value input box. [#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666) + - 🐞 Fix the ColorPicker style is deformed under different sizes. [#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao) +- 🐞 Fix Descriptions throwing `key is not a prop` error message. [#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue) +- 🐞 Fix the node is still rendered when Pagination `itemRender` is customized to `null`. [#44226](https://github.com/ant-design/ant-design/pull/44226) +- 🐞 Fix Modal in Dropdown `menu.items`, rapid mouse movement when expanding Modal will make Dropdown reopen. [#44204](https://github.com/ant-design/ant-design/pull/44204) +- DatePicker + - 💄 Fix DatePicker content is not centered. [#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502) + - 💄 Optimize DatePicker selection range style. [#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang) +- 💄 Fix clicking on the Tabs area on the mobile terminal triggers a color change. [#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi) +- RTL + - 💄 Fix the numbers in the Badge are also RTL when the text direction of the page is RTL. [#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko) + ## 5.8.3 `2023-08-11` @@ -28,14 +131,14 @@ tag: vVERSION - 💄 Fix Carousel `dots` extra margin style. [#44076](https://github.com/ant-design/ant-design/pull/44076) - 🐞 Fix Modal footer disabled state that affect by Form. [#43055](https://github.com/ant-design/ant-design/pull/43055) [@Wxh16144](https://github.com/Wxh16144) - 🐞 Fix Upload thumbnail that gif will not play. [#44083](https://github.com/ant-design/ant-design/pull/44083) [@linxianxi](https://github.com/linxianxi) -- 🐞 Fix FloatButton that menu mode didn't support `badge` prop. [#44109](https://github.com/ant-design/ant-design/pull/44109) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix FloatButton that menu mode didn't support `badge` prop. [#44109](https://github.com/ant-design/ant-design/pull/44109) - 🐞 Fix Grid & List responsive config take effect after first render which cause screen flick. [#44075](https://github.com/ant-design/ant-design/pull/44075) -- 🐞 Fix that Design Token partially missing when `@ant-design/cssinjs` version `1.15.0`. [#44091](https://github.com/ant-design/ant-design/pull/44091) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix that Design Token partially missing when `@ant-design/cssinjs` version `1.15.0`. [#44091](https://github.com/ant-design/ant-design/pull/44091) - 💄 Fix Badge `status="processing"` with `dot` wave style issue. [#44153](https://github.com/ant-design/ant-design/pull/44153) - 💄 Fix Descriptions border styles when it nests itself. [#43454](https://github.com/ant-design/ant-design/pull/43454) [@Yuiai01](https://github.com/Yuiai01) - 💄 Fix Pagination transition style in prev/next buttons. [#44030](https://github.com/ant-design/ant-design/pull/44030) - 💄 Fix Popconfirm button group wraps unexpectedly. [#44022](https://github.com/ant-design/ant-design/pull/44022) [@MuxinFeng](https://github.com/MuxinFeng) -- 💄 Optimize style of Image preview operation icons. [#44141](https://github.com/ant-design/ant-design/pull/44141) [@MadCcc](https://github.com/MadCcc) +- 💄 Optimize style of Image preview operation icons. [#44141](https://github.com/ant-design/ant-design/pull/44141) - 💄 Optimize Input and InputNumber font size in large mode. [#44000](https://github.com/ant-design/ant-design/pull/44000) [@MuxinFeng](https://github.com/MuxinFeng) - 💄 Remove Space part useless style. [#44098](https://github.com/ant-design/ant-design/pull/44098) @@ -46,7 +149,7 @@ tag: vVERSION - 🐞 Fix Checkbox & Radio not support customize wave and add className `ant-wave-target` for this case. [#44014](https://github.com/ant-design/ant-design/pull/44014) - 🐞 Adjust Form.Item renderProps definition to return correct `FormInstance`. [#43996](https://github.com/ant-design/ant-design/pull/43996) - 🐞 Fixed Table incorrect expand icon direction and row indentation in RTL. [#43977](https://github.com/ant-design/ant-design/pull/43977) [@Yuiai01](https://github.com/Yuiai01) -- 💄 Fix Pagination that should not have hover and focus style when disabled. [#43970](https://github.com/ant-design/ant-design/pull/43970) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Pagination that should not have hover and focus style when disabled. [#43970](https://github.com/ant-design/ant-design/pull/43970) - TypeScript - 🤖 Fix Drawer & Anchor part Design Token TS description not correct issue. [#43994](https://github.com/ant-design/ant-design/pull/43994) [@wving5](https://github.com/wving5) @@ -62,14 +165,14 @@ tag: vVERSION `2023-08-01` -- 🔥 Component Token support `algorithm` to calculate derivative tokens same as global. [#43810](https://github.com/ant-design/ant-design/pull/43810) [@MadCcc](https://github.com/MadCcc) +- 🔥 Component Token support `algorithm` to calculate derivative tokens same as global. [#43810](https://github.com/ant-design/ant-design/pull/43810) - 🔥 Modal hooks function support `await` call. [#43470](https://github.com/ant-design/ant-design/pull/43470) - 🔥 ConfigProvider support `wave` to customize wave effect. [#43784](https://github.com/ant-design/ant-design/pull/43784) - 🆕 Form support `getFieldsValue({ strict: true })` to support only Item bind values. [#43828](https://github.com/ant-design/ant-design/pull/43828) - 🆕 Descriptions support `items` prop. [#43483](https://github.com/ant-design/ant-design/pull/43483) [@RedJue](https://github.com/RedJue) - 🆕 ColorPicker support `disabledAlpha` prop. [#43355](https://github.com/ant-design/ant-design/pull/43355) [@RedJue](https://github.com/RedJue) - 🆕 Avatar.Group support `shape` prop. [#43817](https://github.com/ant-design/ant-design/pull/43817) [@li-jia-nan](https://github.com/li-jia-nan) -- 🆕 AutoComplete/Cascader/DatePicker/Input.Textarea/TimePicker/TreeSelect support `allowClear` prop to customize clear button。[#43582](https://github.com/ant-design/ant-design/discussions/43582) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 AutoComplete/Cascader/DatePicker/Input.Textarea/TimePicker/TreeSelect support `allowClear` prop to customize clear button. [#43582](https://github.com/ant-design/ant-design/discussions/43582) [@kiner-tang](https://github.com/kiner-tang) - 🆕 DatePicker.RangePicker `presets` support callback functions. [#43476](https://github.com/ant-design/ant-design/pull/43476) [@Wxh16144](https://github.com/Wxh16144) - 🆕 Added the `preview={{ movable: Boolean }}` prop to the Image component to support dragging and dropping into folders. [#43823](https://github.com/ant-design/ant-design/pull/43823) [@linxianxi](https://github.com/linxianxi) - 🆕 Slider `tooltip` support `autoAdjustOverflow` prop. [#43788](https://github.com/ant-design/ant-design/pull/43788) @@ -106,11 +209,11 @@ tag: vVERSION `2023-07-20` -- 💄 Fix Menu miss hover style issue. [#43656](https://github.com/ant-design/ant-design/pull/43656) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Menu miss hover style issue. [#43656](https://github.com/ant-design/ant-design/pull/43656) - 🐞 Fix Notification throwPurePanel definition missing error. [#43687](https://github.com/ant-design/ant-design/pull/43687) [@li-jia-nan](https://github.com/li-jia-nan) - 🐞 Fix Button `onClick` missing `event` definition. [#43666](https://github.com/ant-design/ant-design/pull/43666) - 🐞 Fix Input and InputNumber align issue. [#43548](https://github.com/ant-design/ant-design/pull/43548) [@bbb169](https://github.com/bbb169) -- 🐞 Fix DatePicker suffix use wrong token. [#43646](https://github.com/ant-design/ant-design/pull/43646) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix DatePicker suffix use wrong token. [#43646](https://github.com/ant-design/ant-design/pull/43646) - 🐞 Fix Steps with clickable can not trigger by keyboard. [#43644](https://github.com/ant-design/ant-design/pull/43644) - TypeScript - 🤖 Remove Button type `ghost` from TS definition. [#43675](https://github.com/ant-design/ant-design/pull/43675) @@ -157,15 +260,15 @@ tag: vVERSION - 🛠 Resolved Circular dependency issue in vite, rollup, meteor and microbundle. [#42750](https://github.com/ant-design/ant-design/pull/42750). Thanks to [@jrr997](https://github.com/jrr997), [@kiner-tang](https://github.com/kiner-tang) and [@MuxinFeng](https://github.com/MuxinFeng) for their contributions. - 🐞 Remove default values (empty string) of `className` prop in Anchor, CollapsePanel, and Input.Group. [#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany) - 🐞 Fix Upload progress bar missing fade motion. [#43471](https://github.com/ant-design/ant-design/pull/43471) -- 🐞 Added warning for deprecated Token `colorItemBgSelected` in Menu. [#43461](https://github.com/ant-design/ant-design/pull/43461) [@MadCcc](https://github.com/MadCcc) +- 🐞 Added warning for deprecated Token `colorItemBgSelected` in Menu. [#43461](https://github.com/ant-design/ant-design/pull/43461) - 🐞 MISC: Fixed an issue where some browsers had scroll bars that were not redrawn when style feature support was detected. [#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM) - 🐞 Fixed an issue where the Tab component of Card would not be displayed at all when tabList is empty. [#43416](https://github.com/ant-design/ant-design/pull/43416) [@linxianxi](https://github.com/linxianxi) - 🐞 Fixed an issue where the `form.validateMessages` configuration would be lost when using ConfigProvider nestedly. [#43239](https://github.com/ant-design/ant-design/pull/43239) [@Wxh16144](https://github.com/Wxh16144) -- 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element .[#43402](https://github.com/ant-design/ant-design/pull/43402) +- 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element. [#43402](https://github.com/ant-design/ant-design/pull/43402) - 🐞 Fixed an issue where clicking "now" in DatePicker when switching to the year-month panel would not work. [#43367](https://github.com/ant-design/ant-design/pull/43367) [@Yuiai01](https://github.com/Yuiai01) -- 🐞 Fixed an issue where the height set for the Input.TextArea component would become invalid when the screen size changed. [#43169](https://github.com/ant-design/ant-design/pull/43169) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fixed an issue where the height set for the Input.TextArea component would become invalid when the screen size changed. [#43169](https://github.com/ant-design/ant-design/pull/43169) - 💄 In Slider, the `tooltip` should be centered when there is little content. [#43430](https://github.com/ant-design/ant-design/pull/43430) [@Jomorx](https://github.com/Jomorx) -- 💄 Design Token add `colorLink` to the seed token, and `colorLinkHover` and `colorLinkActive` will be calculated from colorLink. [#43183](https://github.com/ant-design/ant-design/pull/43183) [@MadCcc](https://github.com/MadCcc) +- 💄 Design Token add `colorLink` to the seed token, and `colorLinkHover` and `colorLinkActive` will be calculated from colorLink. [#43183](https://github.com/ant-design/ant-design/pull/43183) - 💄 Adjusted some tokens in Slider to component tokens. [#42428](https://github.com/ant-design/ant-design/pull/42428) [@heiyu4585](https://github.com/heiyu4585) RTL[#42428](https://github.com/ant-design/ant-design/pull/42428) [@heiyu4585](https://github.com/heiyu4585) - RTL - 🤖 Progress now supports animations in rtl direction. [#43316](https://github.com/ant-design/ant-design/pull/43316) [@Yuiai01](https://github.com/Yuiai01) @@ -190,7 +293,7 @@ tag: vVERSION - 🐞 Fix the Badge `color` attribute does not take effect. [#43304](https://github.com/ant-design/ant-design/pull/43304) - 🐞 Fix the position of Select clear icon when FormItem sets `hasFeedback`. [#43302](https://github.com/ant-design/ant-design/pull/43302) [@tinyfind](https://github.com/tinyfind) - 🐞 Fix Transfer paging drop-down button is hidden and `showSizeChanger` method is invalid. [#41906](https://github.com/ant-design/ant-design/pull/41906) [@Yuiai01](https://github.com/Yuiai01) -- 🐞 Fix the invalid modification of `colorText` and `fontSize` of Popconfirm component. [#43212](https://github.com/ant-design/ant-design/pull/43212) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix the invalid modification of `colorText` and `fontSize` of Popconfirm component. [#43212](https://github.com/ant-design/ant-design/pull/43212) - 🐞 Fix the problem that deleting files after Upload configures `maxCount` will not trigger `onChange`. [#43193](https://github.com/ant-design/ant-design/pull/43193) - 💄 Fix Button disabled style error when it has `link` or `href` attribute. [#43091](https://github.com/ant-design/ant-design/pull/43091) [@BoyYangzai](https://github.com/BoyYangzai) - TypeScript @@ -252,7 +355,7 @@ tag: vVERSION - 🆕 ColorPicker add `onClear` and dont't close panel when clearing. [#42634](https://github.com/ant-design/ant-design/pull/42634) [@linxianxi](https://github.com/linxianxi) - 🆕 Collapse `items` to support configure panel content. [#42545](https://github.com/ant-design/ant-design/pull/42545) [@kiner-tang](https://github.com/kiner-tang) -- 🆕 Add static function `getDesignToken` to access full Design Token. [#42723](https://github.com/ant-design/ant-design/pull/42723) [@MadCcc](https://github.com/MadCcc) +- 🆕 Add static function `getDesignToken` to access full Design Token. [#42723](https://github.com/ant-design/ant-design/pull/42723) - 🆕 ConfigProvider support configure Space `classNames` and `styles` properties. [#42748](https://github.com/ant-design/ant-design/pull/42748) [@RedJue](https://github.com/RedJue) - 🆕 Space support `classNames` and `styles` properties. [#42743](https://github.com/ant-design/ant-design/pull/42743) [@RedJue](https://github.com/RedJue) - 🆕 Drawer panel support event listener. Wrapper support passing `data-*` props. [#42718](https://github.com/ant-design/ant-design/pull/42718) [@kiner-tang](https://github.com/kiner-tang) @@ -266,12 +369,12 @@ tag: vVERSION - 🆕 ConfigProvider.config support `theme` for static method config. [#42473](https://github.com/ant-design/ant-design/pull/42473) - 🆕 Calendar `onSelect` support `info.source` param to help get select source. [#42432](https://github.com/ant-design/ant-design/pull/42432) - 💄 Optimize ColorPicker style in dark theme. [#42827](https://github.com/ant-design/ant-design/pull/42827) [@RedJue](https://github.com/RedJue) -- 💄 Fix Popconfirm, Alert and Notification that `colorTextHeading` and `colorText` usage. [#42839](https://github.com/ant-design/ant-design/pull/42839) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Popconfirm, Alert and Notification that `colorTextHeading` and `colorText` usage. [#42839](https://github.com/ant-design/ant-design/pull/42839) - 💄 Fix Divider style problem. [#42797](https://github.com/ant-design/ant-design/pull/42797) [@kongmingLatern](https://github.com/kongmingLatern) - 🐞 Fix Image.PreviewGroup not reset image state when switch it. [#42793](https://github.com/ant-design/ant-design/pull/42793) [@linxianxi](https://github.com/linxianxi) - 🐞 Reduce bundle size by refactor via `rc-util/lib/pickAttrs`. Fix Rate `findDOMNode is deprecated` warning in StrictMode. [#42688](https://github.com/ant-design/ant-design/pull/42688) - 🐞 Rate could accept `id` `data-*` `aria-*` `role` `onMouseEnter` `onMouseLeave` attributes now, so that it can be wrapped by Tooltip component. [#42676](https://github.com/ant-design/ant-design/pull/42676) -- 🐞 Fix Menu.Submenu not aligned in horizontal mode. [#42648](https://github.com/ant-design/ant-design/pull/42648) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Menu.Submenu not aligned in horizontal mode. [#42648](https://github.com/ant-design/ant-design/pull/42648) - 🐞 Align Card `tabList` API with Tab `items`. [#42413](https://github.com/ant-design/ant-design/pull/42413) - 🐞 Fix circular dependencies. - 🐞 Fix Modal circular dependency issue. [#42841](https://github.com/ant-design/ant-design/pull/42841) [@kiner-tang](https://github.com/kiner-tang) @@ -282,10 +385,10 @@ tag: vVERSION - ⌨️ Improve Progress accessibility by adding more `aria` props. [#42704](https://github.com/ant-design/ant-design/pull/42704) [@MehmetYararVX](https://github.com/MehmetYararVX) - ⌨️ Notification add role `props`. [#42484](https://github.com/ant-design/ant-design/pull/42484) [@guan404ming](https://github.com/guan404ming) - 🛠 Collapse use `onKeyDown` instead of `onKeyPress` to change collapse panel active state. [#42592](https://github.com/ant-design/ant-design/pull/42592) [@kiner-tang](https://github.com/kiner-tang) -- 🛠 Refactor Menu with `@rc-component/trigger`. Remove `rc-trigger` and reduce bundle size. [#42554](https://github.com/ant-design/ant-design/pull/42554) [@MadCcc](https://github.com/MadCcc) +- 🛠 Refactor Menu with `@rc-component/trigger`. Remove `rc-trigger` and reduce bundle size. [#42554](https://github.com/ant-design/ant-design/pull/42554) - 🛠 Table rename `sorterOrder` to `sortOrder` for arguement of `sortIcon`. [#42519](https://github.com/ant-design/ant-design/pull/42519) [@sawadyecma](https://github.com/sawadyecma) - Component Token Migration. For more info: [Migrate less variables](/docs/react/migrate-less-variables) - - 🛠 Rename Menu component token with new naming standard. [#42848](https://github.com/ant-design/ant-design/pull/42848) [@MadCcc](https://github.com/MadCcc) + - 🛠 Rename Menu component token with new naming standard. [#42848](https://github.com/ant-design/ant-design/pull/42848) - 🛠 Migrate Radio less variables. [#42050](https://github.com/ant-design/ant-design/pull/42050) [@Yuiai01](https://github.com/Yuiai01) - 🛠 Migrate Image less variables. [#42048](https://github.com/ant-design/ant-design/pull/42048) [@guan404ming](https://github.com/guan404ming) - 🛠 Migrate Tooltip less variables. [#42046](https://github.com/ant-design/ant-design/pull/42046) [@guan404ming](https://github.com/guan404ming) @@ -317,19 +420,19 @@ tag: vVERSION `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 Menu that `overflowedIndicatorClassName` should not override origin classes. [#42692](https://github.com/ant-design/ant-design/pull/42692) - 🐞 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 Checkbox align with label. [#42590](https://github.com/ant-design/ant-design/pull/42590) - 🐞 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) +- 🐞 Fix spinning icon animation in Badge. [#42575](https://github.com/ant-design/ant-design/pull/42575) - 📦 Optimize Form `setFieldsValue` logic to reduce bundle size. [#42635](https://github.com/ant-design/ant-design/pull/42635) - 💄 Optimize Image.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 Design Token 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) +- 💄 Fix Design Token that global token should be able to override component style. [#42535](https://github.com/ant-design/ant-design/pull/42535) - 🇱🇹 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) @@ -339,7 +442,7 @@ tag: vVERSION `2023-05-22` -- 🐞 Fix wrong Button icon size and margin. [#42516](https://github.com/ant-design/ant-design/pull/42516) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix wrong Button icon size and margin. [#42516](https://github.com/ant-design/ant-design/pull/42516) - 🐞 Fix Select remove & selected icon not align in center. [#42513](https://github.com/ant-design/ant-design/pull/42513) - 🐞 Refactor Popconfirm DOM structure to fix extra margin before `title` and `description` when `icon={null}`. [#42433](https://github.com/ant-design/ant-design/pull/42433) - 🐞 Fix Menu item icon not centered when `itemMarginInline` is 0. [#42426](https://github.com/ant-design/ant-design/pull/42426) [@zzwgh](https://github.com/zzwgh) @@ -621,7 +724,7 @@ tag: vVERSION `2023-02-27` - 🐞 Fix for setting `percent` and `success.percent` at the same time for `Progress`, the progress text does not change as `percent` changes. [#40922](https://github.com/ant-design/ant-design/pull/40922) -- 🐞 Fixed Image preview icon was misaligned.[#40911](https://github.com/ant-design/ant-design/pull/40911) +- 🐞 Fixed Image preview icon was misaligned. [#40911](https://github.com/ant-design/ant-design/pull/40911) - 🐞 Fix ConfigProvider validation message template override Form configure template sometime. [#40533](https://github.com/ant-design/ant-design/pull/40533) [@Wxh16144](https://github.com/Wxh16144) - 🐞 Fixed Confirm Modal `onOk` event could be triggered twice when close. [#40719](https://github.com/ant-design/ant-design/pull/40719) [@Rafael-Martins](https://github.com/Rafael-Martins) - 🛠 Rewrote the `useLocale` method and exposed `localeCode` to the public. [#40884](https://github.com/ant-design/ant-design/pull/40884) [@li-jia-nan](https://github.com/li-jia-nan) @@ -631,10 +734,10 @@ tag: vVERSION - 🐞 Fixed where Descriptions did not accept `data-_` and `aria-_` attributes. [#40859](https://github.com/ant-design/ant-design/pull/40859) [@goveo](https://github.com/goveo) - 🛠 Changed the Breadcrumb Separator's DOM element from `span` to `li`. [#40867](https://github.com/ant-design/ant-design/pull/40867) [@heiyu4585](https://github.com/heiyu4585) - 🐞 Fix token of `Layout.colorBgHeader` not work when single use Layout.Header directly. [#40933](https://github.com/ant-design/ant-design/pull/40933) -- 💄 Changed Design Token the component's focus `outline` to the default `4px`.[#40839](https://github.com/ant-design/ant-design/pull/40839) +- 💄 Changed Design Token the component's focus `outline` to the default `4px`. [#40839](https://github.com/ant-design/ant-design/pull/40839) - 🐞 Fixed the Badge color was displayed abnormally. [#40848](https://github.com/ant-design/ant-design/pull/40848) [@kiner-tang](https://github.com/kiner-tang) - 🐞 Fixed an issue with the Timeline item's `className`. [#40835](https://github.com/ant-design/ant-design/pull/40835) [@Yuiai01](https://github.com/Yuiai01) -- 💄 Fixed the interaction style of the Rate component in the disabled state.[#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01) +- 💄 Fixed the interaction style of the Rate component in the disabled state. [#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01) - 🇮🇷 Added Iranian localization. [#40895](https://github.com/ant-design/ant-design/pull/40895) [@majidsadr](https://github.com/majidsadr) ## 5.2.2 @@ -843,8 +946,8 @@ tag: vVERSION `2022-12-26` -- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size.[#38779](https://github.com/ant-design/ant-design/pull/38779) -- ⚡️ Improve Transfer performance when selecting and moving nodes with large data.[#39465](https://github.com/ant-design/ant-design/pull/39465) [@wqs576222103](https://github.com/wqs576222103) +- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size. [#38779](https://github.com/ant-design/ant-design/pull/38779) +- ⚡️ Improve Transfer performance when selecting and moving nodes with large data. [#39465](https://github.com/ant-design/ant-design/pull/39465) [@wqs576222103](https://github.com/wqs576222103) - 🐞 Fix Design Token wrong `font-family` of components. [#39806](https://github.com/ant-design/ant-design/pull/39806) - 🐞 Fix Drawer default props not working when `placement` `open` `width` are `undefined`. [#39782](https://github.com/ant-design/ant-design/pull/39782) - 🐞 Fix Menu icon animation when collapse it. [#39800](https://github.com/ant-design/ant-design/pull/39800) [@JarvisArt](https://github.com/JarvisArt) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 6ba8ef008e4d..f5377da94703 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,109 @@ tag: vVERSION --- +## 5.9.0 + +`2023-09-08` + +- 🔥 Table 支持 `virtual` 属性开启虚拟滚动。[#44349](https://github.com/ant-design/ant-design/pull/44349) +- 🔥 Form `validateFields` 支持 `recursive` 以校验所有包含路径的字段。[#44130](https://github.com/ant-design/ant-design/pull/44130) +- 🔥 Form.Item 支持 `validateDebounce` 以配置校验防抖。[#44633](https://github.com/ant-design/ant-design/pull/44633) +- 🆕 Button 组件新增 `contentFontSize` `contentFontSizeSM` `contentFontSizeLG` 三个组件 token ，用于定制各个尺寸下的字体大小。[#44257](https://github.com/ant-design/ant-design/pull/44257) +- 🆕 Form `requiredMark` 支持自定义渲染。[#44073](https://github.com/ant-design/ant-design/pull/44073) +- 🆕 Tabs 组件添加新组件 Token `itemColor`，用于控制常态 tab 的文本颜色。[#44201](https://github.com/ant-design/ant-design/pull/44201) +- 🆕 ColorPicker 组件支持 `defaultFormat` 属性。[#44487](https://github.com/ant-design/ant-design/pull/44487) [@CYBYOB](https://github.com/CYBYOB) +- 🆕 Form 新增 `feedbackIcons` 属性且 Form.Item 支持 `hasFeedback={{ icons: ... }}`，用于自定义校验图标。[#43894](https://github.com/ant-design/ant-design/pull/43894) [@gldio](https://github.com/gldio) +- 🆕 Segmented 组件新增 `itemSelectedColor` 的组件 Token。[#44570](https://github.com/ant-design/ant-design/pull/44570) [@xiaozisong](https://github.com/xiaozisong) +- 🆕 Modal 页脚 `footer` 支持自定义函数渲染。[#44318](https://github.com/ant-design/ant-design/pull/44318) [@RedJue](https://github.com/RedJue) +- 🆕 Descriptions 的 `items.span` 支持响应式设置。[#44534](https://github.com/ant-design/ant-design/pull/44534) +- 🆕 Tabs 组件 `indicatorSize` 支持通过 ConfigProvider 全局配置。[#44406](https://github.com/ant-design/ant-design/pull/44406) +- 🆕 Transfer 组件 `filterOption` 函数新增 `direction` 入参。[#44417](https://github.com/ant-design/ant-design/pull/44417) [@Zian502](https://github.com/Zian502) +- 🆕 Input.Search 组件支持在 `onSearch` 方法中接受 `source` 参数。[#44457](https://github.com/ant-design/ant-design/pull/44457) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Input 组件新增组件 Token 用于定制激活态阴影。[#44410](https://github.com/ant-design/ant-design/pull/44410) +- 🆕 Radio 组件新增组件 Token，用于定制填充按钮选中时的颜色。[#44389](https://github.com/ant-design/ant-design/pull/44389) +- 🆕 Tour 组件间距支持横向偏移量。[#44377](https://github.com/ant-design/ant-design/pull/44377) [@RedJue](https://github.com/RedJue) +- 🆕 Tour 组件支持通过 `closeIcon` 来自定义关闭按钮。[#44312](https://github.com/ant-design/ant-design/pull/44312) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Avatar 支持使用 ConfigProvider 的 `componentSize` 配置 `size`。[#44288](https://github.com/ant-design/ant-design/pull/44288) [@li-jia-nan](https://github.com/li-jia-nan) +- 🆕 List 支持使用 ConfigProvider 的 `componentSize` 配置 `size`。[#44267](https://github.com/ant-design/ant-design/pull/44267) [@Yuiai01](https://github.com/Yuiai01) +- 🆕 Cascader 支持 `autoClearSearchValue` 属性。[#44033](https://github.com/ant-design/ant-design/pull/44033) [@linxianxi](https://github.com/linxianxi) +- 🆕 在 [Upload](https://github.com/ant-design/ant-design/pull/44060)、[AutoComplete](https://github.com/ant-design/ant-design/pull/44055)、[Badge.Ribbon](https://github.com/ant-design/ant-design/pull/44056)、[Input.TextArea](https://github.com/ant-design/ant-design/pull/44058)、[RangePicker](https://github.com/ant-design/ant-design/pull/44057)、[TimePicker](https://github.com/ant-design/ant-design/pull/44059) 中添加了对 `rootClassName` 的支持。[@kiner-tang](https://github.com/kiner-tang)。 +- 💄 重构 Modal.confirm 结构以修复 `width: fit-content` 导致宽度异常问题以及大量文本下的样式断行问题。抽离 confirm 样式至懒加载以优化 SSR 下的样式尺寸。[#44557](https://github.com/ant-design/ant-design/pull/44557) +- 💄 Progress 调整 `circle` 和 `dashboard` 的线性渐变色为锥形渐变色。[#44404](https://github.com/ant-design/ant-design/pull/44404) +- 💄 修复 DatePicker 组件自定义页脚样式问题。[#44642](https://github.com/ant-design/ant-design/pull/44642) [@li-jia-nan](https://github.com/li-jia-nan) +- 💄 修复 ConfigProvider `tag.className` 与 `tag.style` 无法作用于 Tag.CheckableTag 的问题。[#44602](https://github.com/ant-design/ant-design/pull/44602) +- 💄 修复 Select 配置的 `getPopupContainer` 容器有 `transform: scale` 样式时，弹出框宽度与输入框不一致的情况。[#44378](https://github.com/ant-design/ant-design/pull/44378) +- 🐞 修复 Form.Item 配置 `noStyle` 时，被绑定的元素无法消费 `useStatus` 的问题。[#44576](https://github.com/ant-design/ant-design/pull/44576) +- 🐞 修复 Tag 被 Popover/Popconfirm 包裹时，Hover 会导致 `font-size` 错误的问题。[#44663](https://github.com/ant-design/ant-design/pull/44663) +- 🐞 修复 Input.Search 组合中，搜索按钮会额外阴影的问题。[#44660](https://github.com/ant-design/ant-design/pull/44660) [@daledelv](https://github.com/daledelv) +- 🐞 修复 Modal 的 hooks 调用通过按键 `esc` 关闭时无法正确触发 await 的问题。[#44646](https://github.com/ant-design/ant-design/pull/44646) +- 🐞 修复 Space 的预设 `size` 不会跟随 Design Token 的问题，现在紧凑模式也会正确处理对应的间距数值。[#44598](https://github.com/ant-design/ant-design/pull/44598) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 修复 Upload 组件点击某文件的下载按钮后，鼠标移出该文件时仍展示下载按钮的问题。[#44594](https://github.com/ant-design/ant-design/pull/44594) [@zbw-zbw](https://github.com/zbw-zbw) +- 🐞 修复 FloatButton 组件添加 `href` 后在 FloatButton.Group 中间距失效的问题。[#44707](https://github.com/ant-design/ant-design/pull/44707) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 修复 Button `fontSizeSM` token 不生效的问题。[#44217](https://github.com/ant-design/ant-design/pull/44217) [@CHENGTIANG](https://github.com/CHENGTIANG) +- 🐞 Watermark 现在可以在嵌套的 Modal 和 Drawer 组件中生效。[#44104](https://github.com/ant-design/ant-design/pull/44104) +- 🛠 迁移 Alert、Tree、Cascader、Layout、Table、Modal、Drawer、Button、Switch、Select、Badge、Form、TimePicker、Spin、Input、Progress、Divider 的 less 变量到 Token。 [#42142](https://github.com/ant-design/ant-design/pull/42142) [#42607](https://github.com/ant-design/ant-design/pull/42607) [#42627](https://github.com/ant-design/ant-design/pull/42627) [#42757](https://github.com/ant-design/ant-design/pull/42757) [#42774](https://github.com/ant-design/ant-design/pull/42774) [#42778](https://github.com/ant-design/ant-design/pull/42778) [#44090](https://github.com/ant-design/ant-design/pull/44090)[#44118](https://github.com/ant-design/ant-design/pull/44118) [#44174](https://github.com/ant-design/ant-design/pull/44174) [#44228](https://github.com/ant-design/ant-design/pull/44228) [#44261](https://github.com/ant-design/ant-design/pull/44261) [#44282](https://github.com/ant-design/ant-design/pull/44282) [#44334](https://github.com/ant-design/ant-design/pull/44334) [#42192](https://github.com/ant-design/ant-design/pull/42192) [@hms181231](https://github.com/hms181231) [@linhf123](https://github.com/linhf123) [@poyiding](https://github.com/poyiding) [@Wxh16144](https://github.com/Wxh16144) [@Yuiai01](https://github.com/Yuiai01) +- 📦 移除 Space 和 Grid 对于旧版 IE 浏览器兼容逻辑，减少打包产物体积。[#44620](https://github.com/ant-design/ant-design/pull/44620) [@li-jia-nan](https://github.com/li-jia-nan) +- TypeScript + - 🤖 从 Tree 中导出 `BasicDataNode` 类型。[#44624](https://github.com/ant-design/ant-design/pull/44624) [@kiner-tang](https://github.com/kiner-tang) + +## 5.8.6 + +`2023-09-02` + +- 🛠 针对 CSSInJS 加载 styles 大小进行了优化。 + - 🛠 Notification 和 Message 组件只有在展示时才会插入对应样式。[#44488](https://github.com/ant-design/ant-design/pull/44488) + - 🛠 剥离 Tag 状态与预设颜色样式，现在只有当使用的时候才会生成它们。[#44512](https://github.com/ant-design/ant-design/pull/44512) + - 🛠 剥离 Button 紧凑模式样式，现在只有当使用了 Space.Compact 的时候才会生成它们。[#44475](https://github.com/ant-design/ant-design/pull/44475) +- 📦 移除 `@ant-design/icons` 依赖 `lodash/camelCase` 以优化 bundle size。[ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595) +- Form + - 🐞 修复 Form.Item 设置 `wrapperCol.span` 为 `0` 时，子元素不隐藏的问题。[#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair) + - 🐞 修复 Form `labelCol` 设置为 24 时，会使 `wrapperCol` 设置 24 失效的问题。[#44541](https://github.com/ant-design/ant-design/pull/44541) +- 🐞 修复 Watermark 组件在 `content` 是空字符串时报错的问题。[#44501](https://github.com/ant-design/ant-design/pull/44501) +- 🐞 修复 ColorPicker 禁用时依然能弹出选择窗口的问题。[#44466](https://github.com/ant-design/ant-design/pull/44466) [@RedJue](https://github.com/RedJue) +- 🐞 修复 Transfer 点击 Checkbox 时有时会触发两次选择行为的问题。[#44471](https://github.com/ant-design/ant-design/pull/44471) [@kovsu](https://github.com/kovsu) +- 🐞 修复 Typography 使用 `ellipsis` 时滚动条闪动的问题。[#43058](https://github.com/ant-design/ant-design/pull/43058) [@bbb169](https://github.com/bbb169) +- Slider + - 🐞 修复 Slider 滑块可拖拽区域范围异常的问题。[#44503](https://github.com/ant-design/ant-design/pull/44503) [@BoyYangzai](https://github.com/BoyYangzai) [@yoyo837](https://github.com/yoyo837) + - ⌨️ 优化 Slider `aria-orientation` 可访问性属性。[react-component/slider#859](https://github.com/react-component/slider/pull/859) [@5im0n](https://github.com/5im0n) +- 🐞 修复 Steps `type="nav"` 垂直导航步骤条的最后一项箭头没隐藏的问题。[#44582](https://github.com/ant-design/ant-design/pull/44582) [@ohhoney1](https://github.com/ohhoney1) +- TypeScript + - 🤖 修复 Upload 文件状态定义，移除未使用过的 `success` 状态。[#44468](https://github.com/ant-design/ant-design/pull/44468) + +## 5.8.5 + +`2023-08-28` + +- 🛠 重构 Badge 样式逻辑将 Ribbon 样式抽离以降低 SSR 内联样式尺寸。[#44451](https://github.com/ant-design/ant-design/pull/44451) +- 🐞 修复 App 组件下使用 `@ant-design/icons` 的图标样式异常的问题。[#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144) +- 🐞 修复 Carousel 组件垂直方向拖动失效的问题。[#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue) +- 🐞 修复 Tour 面板使用的 design token 错误的问题。[#44428](https://github.com/ant-design/ant-design/pull/44428) +- 🐞 修复 Form `wrapperCol` 配置响应式 `xs` 属性无效的问题。[#44388](https://github.com/ant-design/ant-design/pull/44388) +- 🐞 修复 ColorPicker 中重复 `key` 的问题。[#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master) +- 🐞 修复 Radio 组件组合 Tree 组件后失效的问题。[#44380](https://github.com/ant-design/ant-design/pull/44380) +- 🐞 修复 Table 组件 `filterDropdown` 不支持 `ref` 时报错的问题。[#44357](https://github.com/ant-design/ant-design/pull/44357) +- 🐞 修复 Form `inline` 布局在校验失败时出现额外空行的问题。[#44360](https://github.com/ant-design/ant-design/pull/44360) +- 🐞 修复 DatePicker 中 `showTime` 为 true 且 `format` 为数组时，组件报错。[#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502) +- 🐞 修复 Watermark 中 `content` 内容过长时无法完整显示的问题。[#44321](https://github.com/ant-design/ant-design/pull/44321) +- TypeScript + - 🤖 修复 Dropdown 组件中 `align` 属性的类型错误。[#44423](https://github.com/ant-design/ant-design/pull/44423) [@LeTuongKhanh](https://github.com/LeTuongKhanh) + +## 5.8.4 + +`2023-08-18` + +- ColorPicker + - 🐞 修复 ColorPicker 色值输入框输入小写英文字母时光标跳动的问题。[#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666) + - 🐞 修复 ColorPicker 在不同尺寸下样式变形的问题。[#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao) +- 🐞 修复 Descriptions 抛出 `key is not a prop` 的错误提示。[#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue) +- 🐞 修复 Pagination `itemRender` 自定义为 `null` 时，仍然渲染节点的问题。[#44226](https://github.com/ant-design/ant-design/pull/44226) +- 🐞 修复 Modal 在 Dropdown `menu.items` 中，展开 Modal 时快速移动鼠标会使 Dropdown 重新打开的问题。[#44204](https://github.com/ant-design/ant-design/pull/44204) +- DatePicker + - 💄 修复 DatePicker 内容不居中问题。[#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502) + - 💄 优化 DatePicker 中范围选择区域样式。[#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang) +- 💄 修复移动端点击 Tabs 区域触发颜色改变的问题。[#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi) +- RTL + - 💄 修复了当页面的文字方向为 RTL 时 Badge 里面的数字也是 RTL 的问题。[#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko) + ## 5.8.3 `2023-08-11` @@ -28,14 +131,14 @@ tag: vVERSION - 💄 修复 Carousel `dots` 切换点有多余 margin 的问题。[#44076](https://github.com/ant-design/ant-design/pull/44076) - 🐞 修复 Modal 页脚禁用态受 Form 影响的问题。[#43055](https://github.com/ant-design/ant-design/pull/43055) [@Wxh16144](https://github.com/Wxh16144) - 🐞 修复 Upload gif 缩略图不会动的问题。[#44083](https://github.com/ant-design/ant-design/pull/44083) [@linxianxi](https://github.com/linxianxi) -- 🐞 修复 FloatButton 组件菜单模式不支持 `badge` 配置的问题。[#44109](https://github.com/ant-design/ant-design/pull/44109) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 FloatButton 组件菜单模式不支持 `badge` 配置的问题。[#44109](https://github.com/ant-design/ant-design/pull/44109) - 🐞 修复 Grid 与 List 响应式布局生效稍晚于首次渲染导致屏幕闪动的问题。[#44075](https://github.com/ant-design/ant-design/pull/44075) -- 🐞 修复 `@ant-design/cssinjs` 版本小于 `1.15.0` 时 Design Token 部分丢失的问题。[#44091](https://github.com/ant-design/ant-design/pull/44091) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 `@ant-design/cssinjs` 版本小于 `1.15.0` 时 Design Token 部分丢失的问题。[#44091](https://github.com/ant-design/ant-design/pull/44091) - 💄 修复 Badge `status="processing"` 和 `dot` 配合使用时，波纹样式异常的问题。[#44153](https://github.com/ant-design/ant-design/pull/44153) - 💄 修复 Descriptions 组件自行嵌套时的边框样式问题。[#43454](https://github.com/ant-design/ant-design/pull/43454) [@Yuiai01](https://github.com/Yuiai01) -- 💄 修复 Pagination 上下页切换按钮 `transition`` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030) +- 💄 修复 Pagination 上下页切换按钮 `transition` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030) - 💄 修复 Popconfirm 按钮组意外换行的问题。[#44022](https://github.com/ant-design/ant-design/pull/44022) [@MuxinFeng](https://github.com/MuxinFeng) -- 💄 优化 Image 组件预览操作图标的样式。[#44141](https://github.com/ant-design/ant-design/pull/44141) [@MadCcc](https://github.com/MadCcc) +- 💄 优化 Image 组件预览操作图标的样式。[#44141](https://github.com/ant-design/ant-design/pull/44141) - 💄 优化 Input 和 InputNumber 在大尺寸下的字体大小。[#44000](https://github.com/ant-design/ant-design/pull/44000) [@MuxinFeng](https://github.com/MuxinFeng) - 💄 移除 Space 部分未使用的样式。[#44098](https://github.com/ant-design/ant-design/pull/44098) @@ -46,7 +149,7 @@ tag: vVERSION - 🐞 修复 Checkbox 与 Radio 不支持自定义水波纹效果的问题，并添加 `ant-wave-target` className 到对应元素上。[#44014](https://github.com/ant-design/ant-design/pull/44014) - 🐞 调整 Form.Item renderProps 定义，现在会返回正确的 `FormInstance`。[#43996](https://github.com/ant-design/ant-design/pull/43996) - 🐞 修复 Table 在 `direction` 为 `rlt` 时展开图标的方向和展开行的缩进有误的问题。[#43977](https://github.com/ant-design/ant-design/pull/43977) [@Yuiai01](https://github.com/Yuiai01) -- 💄 修复 Pagination 组件禁用状态仍然有悬浮和聚焦样式的问题。[#43970](https://github.com/ant-design/ant-design/pull/43970) [@MadCcc](https://github.com/MadCcc) +- 💄 修复 Pagination 组件禁用状态仍然有悬浮和聚焦样式的问题。[#43970](https://github.com/ant-design/ant-design/pull/43970) - TypeScript - 🤖 修正 Drawer 和 Anchor 部分 Design Token 的 TS 描述信息错误的问题。[#43994](https://github.com/ant-design/ant-design/pull/43994) [@wving5](https://github.com/wving5) @@ -62,7 +165,7 @@ tag: vVERSION `2023-08-01` -- 🔥 组件 ComponentToken 支持配置 `algorithm` 参数，添加配置即可像全局 Token 一样由部分修改的 token 计算派生 token 的值并用于组件样式中。[#43810](https://github.com/ant-design/ant-design/pull/43810) [@MadCcc](https://github.com/MadCcc) +- 🔥 组件 ComponentToken 支持配置 `algorithm` 参数，添加配置即可像全局 Token 一样由部分修改的 token 计算派生 token 的值并用于组件样式中。[#43810](https://github.com/ant-design/ant-design/pull/43810) - 🔥 Modal hooks 方法支持 `await` 调用。[#43470](https://github.com/ant-design/ant-design/pull/43470) - 🔥 ConfigProvider 支持 `wave` 配置以自定义水波纹效果。[#43784](https://github.com/ant-design/ant-design/pull/43784) - 🆕 Form 新增 `getFieldsValue({ strict: true })` 以支持获取仅通过 Item 绑定的字段。[#43828](https://github.com/ant-design/ant-design/pull/43828) @@ -105,11 +208,11 @@ tag: vVERSION `2023-07-20` -- 💄 修复 Menu 组件悬浮态样式丢失的问题。[#43656](https://github.com/ant-design/ant-design/pull/43656) [@MadCcc](https://github.com/MadCcc) +- 💄 修复 Menu 组件悬浮态样式丢失的问题。[#43656](https://github.com/ant-design/ant-design/pull/43656) - 🐞 修复 Notification 报错 PurePanel 定义未找到的问题。[#43687](https://github.com/ant-design/ant-design/pull/43687) [@li-jia-nan](https://github.com/li-jia-nan) - 🐞 修复 Button `onClick` 事件丢失 `event` 定义的问题。[#43666](https://github.com/ant-design/ant-design/pull/43666) - 🐞 修复 Input 和 InputNumber 行内对齐问题。[#43548](https://github.com/ant-design/ant-design/pull/43548) [@bbb169](https://github.com/bbb169) -- 🐞 修复 DatePicker 后缀颜色使用 `token` 不当的问题。[#43646](https://github.com/ant-design/ant-design/pull/43646) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 DatePicker 后缀颜色使用 `token` 不当的问题。[#43646](https://github.com/ant-design/ant-design/pull/43646) - 🐞 修复 Steps 配置可点击时不能通过键盘操作的问题。[#43644](https://github.com/ant-design/ant-design/pull/43644) - TypeScript - 🤖 移除 Button 无用的 `type="ghost"` 属性定义。[#43675](https://github.com/ant-design/ant-design/pull/43675) @@ -148,23 +251,23 @@ tag: vVERSION - 🆕 ColorPicker 支持 `onChangeComplete`。[#43370](https://github.com/ant-design/ant-design/pull/43370) [@RedJue](https://github.com/RedJue) - 🆕 ColorPicker 支持 `panelRender`。[#43134](https://github.com/ant-design/ant-design/pull/43134) [@RedJue](https://github.com/RedJue) - 🆕 ColorPicker 支持 `size`。[#43116](https://github.com/ant-design/ant-design/pull/43116) [@RedJue](https://github.com/RedJue) -- 🆕 Alert、Drawer、Modal、Notifaction、Tag、Tabs 均已支持通过设置 `closeIcon` 为 null 或 false 隐藏关闭按钮。 [#42828](https://github.com/ant-design/ant-design/discussions/42828) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Alert、Drawer、Modal、Notifaction、Tag、Tabs 均已支持通过设置 `closeIcon` 为 null 或 false 隐藏关闭按钮。[#42828](https://github.com/ant-design/ant-design/discussions/42828) [@kiner-tang](https://github.com/kiner-tang) - 🆕 Anchor 添加 `replace` 属性。[#43006](https://github.com/ant-design/ant-design/pull/43006) [@ds1371dani](https://github.com/ds1371dani) - 🆕 Image 支持 `imageRender`、`toolbarRender` 属性以支持预览图和工具栏的自定义渲染，还支持了 `onTransform`、`minScale`、`maxScale` 等新属性，Image.PreviewGroup 支持 `items` 属性传入列表数据，并修复了 img 标签的原生属性没有传递给预览图的问题。[#43075](https://github.com/ant-design/ant-design/pull/43075) [@linxianxi](https://github.com/linxianxi) - 🆕 修改 Image 预览图的布局风格，`preview` 属性支持 `closeIcon`，Image.PreviewGroup 支持 `fallback` 属性，修复加载预览资源提前加载的问题。[#43167](https://github.com/ant-design/ant-design/pull/43167) [@linxianxi](https://github.com/linxianxi) - 🛠 InputNumber 使用 rc-input 进行重构。[#43000](https://github.com/ant-design/ant-design/pull/43000) [@MuxinFeng](https://github.com/MuxinFeng) - 🛠 解决 vite、rollup、meteor、microbundle 等构建工具中遇到的循环依赖问题，并增加相关的检测。[#42750](https://github.com/ant-design/ant-design/pull/42750)，感谢 [@jrr997](https://github.com/jrr997)、[@kiner-tang](https://github.com/kiner-tang) 和 [@MuxinFeng](https://github.com/MuxinFeng) 的贡献。 -- 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。 [#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany) +- 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。[#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany) - 🐞 修复 Upload 上传进度条延迟消失且丢失动画效果的问题。[#43471](https://github.com/ant-design/ant-design/pull/43471) -- 🐞 为 Menu 中组件 Token `colorItemBgSelected` 添加废弃警告。[#43461](https://github.com/ant-design/ant-design/pull/43461) [@MadCcc](https://github.com/MadCcc) +- 🐞 为 Menu 中组件 Token `colorItemBgSelected` 添加废弃警告。[#43461](https://github.com/ant-design/ant-design/pull/43461) - 🐞 杂项：修复样式特性支持检测时部分浏览器因为未重绘导致出现滚动条的问题。[#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM) - 🐞 修复 Card `tabList` 为空时 Tab 完全不展示的问题。[#43416](https://github.com/ant-design/ant-design/pull/43416) [@linxianxi](https://github.com/linxianxi) - 🐞 修复 ConfigProvider 嵌套使用时，`form.validateMessages` 配置会丢失的问题。[#43239](https://github.com/ant-design/ant-design/pull/43239) [@Wxh16144](https://github.com/Wxh16144) - 🐞 修复 Tag 点击的水波纹效果有时候会和 Tag 元素产生偏移的问题。[#43402](https://github.com/ant-design/ant-design/pull/43402) - 🐞 修复 DatePicker 切换到年月面板时，`此刻` 点击无效的问题。[#43367](https://github.com/ant-design/ant-design/pull/43367) [@Yuiai01](https://github.com/Yuiai01) -- 🐞 修复 Input.TextArea 组件在屏幕大小变化时设置的高度失效的问题。[#43169](https://github.com/ant-design/ant-design/pull/43169) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Input.TextArea 组件在屏幕大小变化时设置的高度失效的问题。[#43169](https://github.com/ant-design/ant-design/pull/43169) - 💄 Slider 中 `tooltip` 在内容很少时应该居中。[#43430](https://github.com/ant-design/ant-design/pull/43430) [@Jomorx](https://github.com/Jomorx) -- 💄 Design Token 将 `colorLink` 添加至 seed token 中, `colorLinkHover` 和 `colorLinkActive` 将会由 `colorLink` 计算得出。[#43183](https://github.com/ant-design/ant-design/pull/43183) [@MadCcc](https://github.com/MadCcc) +- 💄 Design Token 将 `colorLink` 添加至 seed token 中, `colorLinkHover` 和 `colorLinkActive` 将会由 `colorLink` 计算得出。[#43183](https://github.com/ant-design/ant-design/pull/43183) - 💄 调整 Slider 中部分 token 为 component token。[#42428](https://github.com/ant-design/ant-design/pull/42428) [@heiyu4585](https://github.com/heiyu4585) - RTL - 🤖 Progress 支持 rtl 方向的动画。[#43316](https://github.com/ant-design/ant-design/pull/43316) [@Yuiai01](https://github.com/Yuiai01) @@ -189,7 +292,7 @@ tag: vVERSION - 🐞 修复 Badge `color` 属性不生效的问题。[#43304](https://github.com/ant-design/ant-design/pull/43304) - 🐞 修复 Select 组件的消除图标在 FormItem 设置 `hasFeedback` 时的位置问题。[#43302](https://github.com/ant-design/ant-design/pull/43302) [@tinyfind](https://github.com/tinyfind) - 🐞 修复 Transfer 分页下拉按钮被隐藏以及 `showSizeChanger` 方法无效。[#41906](https://github.com/ant-design/ant-design/pull/41906) [@Yuiai01](https://github.com/Yuiai01) -- 🐞 修复 Popconfirm 组件 `colorText` 和 `fontSize` 修改无效的问题。[#43212](https://github.com/ant-design/ant-design/pull/43212) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Popconfirm 组件 `colorText` 和 `fontSize` 修改无效的问题。[#43212](https://github.com/ant-design/ant-design/pull/43212) - 🐞 修复 Upload 配置 `maxCount` 后删除文件不会触发 `onChange` 的问题。[#43193](https://github.com/ant-design/ant-design/pull/43193) - 💄 修复 Button 在有 `link` 或 `href` 属性时禁用样式错误。[#43091](https://github.com/ant-design/ant-design/pull/43091) [@BoyYangzai](https://github.com/BoyYangzai) - TypeScript @@ -251,7 +354,7 @@ tag: vVERSION - 🆕 ColorPicker 添加 `onClear` 属性，清除选中颜色时不自动关闭弹窗。[#42634](https://github.com/ant-design/ant-design/pull/42634) [@linxianxi](https://github.com/linxianxi) - 🆕 Collapse 支持通过 `items` 属性来配置面板内容。[#42545](https://github.com/ant-design/ant-design/pull/42545) [@kiner-tang](https://github.com/kiner-tang) -- 🆕 Design Token 新增静态方法 `getDesignToken` 用于获取完整的主题 token。[#42723](https://github.com/ant-design/ant-design/pull/42723) [@MadCcc](https://github.com/MadCcc) +- 🆕 Design Token 新增静态方法 `getDesignToken` 用于获取完整的主题 token。[#42723](https://github.com/ant-design/ant-design/pull/42723) - 🆕 ConfigProvider 支持配置 Space 组件的 `classNames` 和 `styles` 属性。[#42748](https://github.com/ant-design/ant-design/pull/42748) [@RedJue](https://github.com/RedJue) - 🆕 Space 组件支持 `classNames` 和 `styles` 属性。[#42743](https://github.com/ant-design/ant-design/pull/42743) [@RedJue](https://github.com/RedJue) - 🆕 Drawer 抽屉面板支持事件监听，包裹元素支持传入 `data-*` 属性。[#42718](https://github.com/ant-design/ant-design/pull/42718) [@kiner-tang](https://github.com/kiner-tang) @@ -265,12 +368,12 @@ tag: vVERSION - 🆕 ConfigProvider.config 新增 `theme` 支持配置静态方法主题。[#42473](https://github.com/ant-design/ant-design/pull/42473) - 🆕 Calendar `onSelect` 支持 `info.source` 参数以获取选择来源。[#42432](https://github.com/ant-design/ant-design/pull/42432) - 💄 优化 ColorPicker 组件在暗黑模式下的样式。[#42827](https://github.com/ant-design/ant-design/pull/42827) [@RedJue](https://github.com/RedJue) -- 💄 修复 Popconfirm、Alert 和 Notification 组件 `colorTextHeading` 和 `colorText` 误用问题。[#42839](https://github.com/ant-design/ant-design/pull/42839) [@MadCcc](https://github.com/MadCcc) +- 💄 修复 Popconfirm、Alert 和 Notification 组件 `colorTextHeading` 和 `colorText` 误用问题。[#42839](https://github.com/ant-design/ant-design/pull/42839) - 💄 修复 Divider 组件的样式问题。[#42797](https://github.com/ant-design/ant-design/pull/42797) [@kongmingLatern](https://github.com/kongmingLatern) - 🐞 修复 Image.PreviewGroup 预览时图片切换后状态没有重置的问题。[#42793](https://github.com/ant-design/ant-design/pull/42793) [@linxianxi](https://github.com/linxianxi) - 🐞 统一使用 `rc-util/lib/pickAttrs` 以节省包体积。修复 Rate 组件在 StrictMode 下 `findDOMNode is deprecated` 警告信息。[#42688](https://github.com/ant-design/ant-design/pull/42688) - 🐞 Rate 组件支持传入 `id` `data-*` `aria-*` `role` `onMouseEnter` `onMouseLeave` 等属性，修复不支持 Tooltip 包裹的问题。[#42676](https://github.com/ant-design/ant-design/pull/42676) -- 🐞 修复 Menu 组件横向模式下子菜单没有对齐的问题。[#42648](https://github.com/ant-design/ant-design/pull/42648) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Menu 组件横向模式下子菜单没有对齐的问题。[#42648](https://github.com/ant-design/ant-design/pull/42648) - 🐞 将 Card `tabList` 的 API 与 Tab `items` 对齐。[#42413](https://github.com/ant-design/ant-design/pull/42413) - 🐞 修复循环依赖问题。 - 🐞 修复 Modal 组件循环依赖问题。[#42841](https://github.com/ant-design/ant-design/pull/42841) [@kiner-tang](https://github.com/kiner-tang) @@ -281,10 +384,10 @@ tag: vVERSION - ⌨️ 增强 Progress 可访问性表现，添加 `aria` 属性。[#42704](https://github.com/ant-design/ant-design/pull/42704) [@MehmetYararVX](https://github.com/MehmetYararVX) - ⌨️ Notification 添加 `role` 属性。[#42484](https://github.com/ant-design/ant-design/pull/42484) [@guan404ming](https://github.com/guan404ming) - 🛠 Collapse 使用 `onKeyDown` 替代 `onKeyPress` 来改变折叠面板的激活状态。[#42592](https://github.com/ant-design/ant-design/pull/42592) [@kiner-tang](https://github.com/kiner-tang) -- 🛠 使用 `@rc-component/trigger` 重构 Menu 组件。移除 `rc-trigger` 依赖，缩小打包体积。[#42554](https://github.com/ant-design/ant-design/pull/42554) [@MadCcc](https://github.com/MadCcc) +- 🛠 使用 `@rc-component/trigger` 重构 Menu 组件。移除 `rc-trigger` 依赖，缩小打包体积。[#42554](https://github.com/ant-design/ant-design/pull/42554) - 🛠 Table 组件将 `sorterOrder` 重命名为 `sortOrder` 用于 `sortIcon` 的参数。[#42519](https://github.com/ant-design/ant-design/pull/42519) [@sawadyecma](https://github.com/sawadyecma) - 组件 Token 迁移，更多详情请查看文档：[迁移 less 变量](/docs/react/migrate-less-variables-cn) - - 🛠 使用新的命名标准重命名 Menu 组件 token。[#42848](https://github.com/ant-design/ant-design/pull/42848) [@MadCcc](https://github.com/MadCcc) + - 🛠 使用新的命名标准重命名 Menu 组件 token。[#42848](https://github.com/ant-design/ant-design/pull/42848) - 🛠 迁移 Radio 组件 less 变量。[#42050](https://github.com/ant-design/ant-design/pull/42050) [@Yuiai01](https://github.com/Yuiai01) - 🛠 迁移 Image 组件 less 变量。[#42048](https://github.com/ant-design/ant-design/pull/42048) [@guan404ming](https://github.com/guan404ming) - 🛠 迁移 Tooltip 组件 less 变量。[#42046](https://github.com/ant-design/ant-design/pull/42046) [@guan404ming](https://github.com/guan404ming) @@ -316,19 +419,19 @@ tag: vVERSION `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) +- 🐞 修复 Menu 组件 `overflowedIndicatorClassName` 覆盖了原本的 class 的问题。[#42692](https://github.com/ant-design/ant-design/pull/42692) - 🐞 修复 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) +- 🐞 修复 Checkbox 和 label 不对齐的问题。[#42590](https://github.com/ant-design/ant-design/pull/42590) - 🐞 修复使用 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) +- 🐞 修复 Badge 组件中旋转的 `icon` 动画。[#42575](https://github.com/ant-design/ant-design/pull/42575) - 📦 优化 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) -- 💄 修复部分全局 Design Token 无法覆盖组件样式的问题。[#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc) +- 💄 修复部分全局 Design Token 无法覆盖组件样式的问题。[#42535](https://github.com/ant-design/ant-design/pull/42535) - 🇱🇹 为 `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) @@ -338,7 +441,7 @@ tag: vVERSION `2023-05-22` -- 🐞 修复 Button 组件 icon 尺寸和间距问题。[#42516](https://github.com/ant-design/ant-design/pull/42516) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Button 组件 icon 尺寸和间距问题。[#42516](https://github.com/ant-design/ant-design/pull/42516) - 🐞 修复 Select 移除和选中按钮不居中的问题。[#42513](https://github.com/ant-design/ant-design/pull/42513) - 🐞 重构 Popconfirm DOM 结构以解决 `icon={null}` 时 `title` 和 `description` 的多余 margin 问题。[#42433](https://github.com/ant-design/ant-design/pull/42433) - 🐞 修复 Menu 图标在 `itemMarginInline` 为 0 时不居中的问题。[#42426](https://github.com/ant-design/ant-design/pull/42426) [@zzwgh](https://github.com/zzwgh) @@ -447,7 +550,7 @@ tag: vVERSION `2023-04-19` - 🐞 修复 FloatButton 警告: findDOMNode is deprecated in StrictMode.。[#41833](https://github.com/ant-design/ant-design/pull/41833) [@fourcels](https://github.com/fourcels) -- 🐞 杂项：箭头元素兼容旧版本不支持 `clip-path: path()` 的浏览器。 [#41872](https://github.com/ant-design/ant-design/pull/41872) +- 🐞 杂项：箭头元素兼容旧版本不支持 `clip-path: path()` 的浏览器。[#41872](https://github.com/ant-design/ant-design/pull/41872) - 🐞 修复 Layout.Sider 切换主题时存在背景切换延迟的问题。[#41828](https://github.com/ant-design/ant-design/pull/41828) - 🐞 修复 Tour 的 `type="primary"` 时箭头的颜色仍为白色的问题。[#41761](https://github.com/ant-design/ant-design/pull/41761) - 🐞 优化 Form 字段绑定，现在会忽略在 Form.Item 内的注释不再作为子组件进行绑定。[#41771](https://github.com/ant-design/ant-design/pull/41771) @@ -775,7 +878,7 @@ tag: vVERSION `2023-01-15` -- 🐞 修复 Checkbox 组件 label 不对齐的问题。 [#40208](https://github.com/ant-design/ant-design/pull/40208) +- 🐞 修复 Checkbox 组件 label 不对齐的问题。[#40208](https://github.com/ant-design/ant-design/pull/40208) - 🐞 修复 Button 水波纹效果有时会使得布局抖动的问题。[#40192](https://github.com/ant-design/ant-design/pull/40192) - 🐞 修复 Select 组件会卡住的问题。[#40158](https://github.com/ant-design/ant-design/pull/40158) [@helloqian12138](https://github.com/helloqian12138) - 🐞 修复 Timeline 组件自定义颜色显示错误类名和对齐溢出的问题。[#39394](https://github.com/ant-design/ant-design/pull/39394) [@Wxh16144](https://github.com/Wxh16144) @@ -862,7 +965,7 @@ tag: vVERSION - 🐞 修复 Card 只有 `extra` 时标题栏高度不足的问题。[#39646](https://github.com/ant-design/ant-design/pull/39646) [@JarvisArt](https://github.com/JarvisArt) - 🐞 修复 Row 组件 `justify` 和 `align` 属性，动态改变不生效的问题。[#39704](https://github.com/ant-design/ant-design/pull/39704) [@candy4290](https://github.com/candy4290) - 🐞 修复 App 中 `children` 使用相同 key 的警告。[#39695](https://github.com/ant-design/ant-design/pull/39695) [@Kamahl19](https://github.com/Kamahl19)，[#39701](https://github.com/ant-design/ant-design/pull/39701) [@li-jia-nan](https://github.com/li-jia-nan) -- 💄 Image 组件预览交互优化. [#39812](https://github.com/ant-design/ant-design/pull/39812) [@JarvisArt](https://github.com/JarvisArt) +- 💄 Image 组件预览交互优化。[#39812](https://github.com/ant-design/ant-design/pull/39812) [@JarvisArt](https://github.com/JarvisArt) - 💄 修复 Table 筛选菜单选中背景色和菜单阴影样式。[#39805](https://github.com/ant-design/ant-design/pull/39805) - TypeScript - 🤖 修复部分 Design Token 缺少类型提示的问题。[#39754](https://github.com/ant-design/ant-design/pull/39754) diff --git a/README-ar_EG.md b/README-ar_EG.md deleted file mode 100644 index e36cf43d15c8..000000000000 --- a/README-ar_EG.md +++ /dev/null @@ -1,155 +0,0 @@ -

- - - -

- -

Ant Design

- -
- -لغة تصميم واجهة المستخدم على مستوى المؤسسات ومكتبة React UI. - -[![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] - -[![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] - -[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square -[npm-url]: http://npmjs.org/package/antd -[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg -[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22 -[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square -[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master -[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square -[download-url]: https://npmjs.org/package/antd -[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield -[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield -[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open -[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 -[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design -[twitter-url]: https://twitter.com/AntDesignUI -[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square -[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square -[bundlephobia-url]: https://bundlephobia.com/package/antd -[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square -[issues-helper-url]: https://github.com/actions-cool/issues-helper -[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square -[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 - -
- -[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) - -[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | العربية - -## ✨ الميزات - -- 🌈 واجهة مستخدم من فئة المؤسسات مصممة لتطبيقات الويب. -- 📦 مجموعة من مكونات React عالية الجودة خارج الصندوق. -- 🛡 مكتوب في TypeScript بأنواع ثابتة يمكن التنبؤ بها. -- ⚙️ مجموعة كاملة من موارد التصميم وأدوات التطوير. -- 🌍 دعم التدويل لعشرات اللغات. -- 🎨 تخصيص موضوع قوي على أساس CSS-in-JS. - -## 🖥 دعم البيئة البرمجية - -- المتصفحات الحديثة -- التقديم من جانب الخادم -- [إلكترون](https://www.electronjs.org/) - -| [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | -| Edge | last 2 versions | last 2 versions | last 2 versions | last 2 versions | - -## 📦 التثبيت - -```bash -npm install antd -``` - -```bash -yarn add antd -``` - -## 🔨 الاستخدام - -```jsx -import React from 'react'; -import { Button, DatePicker } from 'antd'; - -const App = () => ( - <> - - - -); -``` - -### كتابة السكربيت - -الخاصية `antd` مكتوبة في TypeScript مع تعريفات كاملة ، تحقق [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) للبدء. - -## 🌍 التدويل - -يتم دعم عشرات اللغات في`antd`, انظر [i18n](https://ant.design/docs/react/i18n). - -## 🔗 الروابط - -- [الصفحة الرئيسية](https://ant.design/) -- [نظرة عامة على المكونات](https://ant.design/components/overview) -- [برنامج Ant Design Pro](https://pro.ant.design/) -- [تغير الدخول](CHANGELOG.en-US.md) -- [مكونات](https://react-component.github.io/) -- [موبايل UI](https://mobile.ant.design) -- [برنامج صغير UI](https://mini.ant.design) -- [مكونات Ant Design Pro](https://procomponents.ant.design) -- [رسوم بيانية Ant Design](https://charts.ant.design) -- [أيقونات Ant Design](https://github.com/ant-design/ant-design-icons) -- [ألوان Ant Design](https://github.com/ant-design/ant-design-colors) -- [صفحة لاند](https://landing.ant.design) -- [حركة](https://motion.ant.design) -- [سوق Scaffold](https://scaffold.ant.design) -- [تعليمات المطورين](https://github.com/ant-design/ant-design/wiki/Development) -- [إعداد نسخ الاصدارات](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [أسئلة مكرة](https://ant.design/docs/react/faq) -- [قالب CodeSandbox](https://u.ant.design/codesandbox-repro) -- [تخصيص ثيم](https://ant.design/docs/react/customize-theme) -- [كيفية التقدم بطلب المشاركة كمتعاون](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## ⌨️ التطوير - -استخدم Gitpod, بيئة تطوير مجانية عبر الإنترنت لـ GitHub. - -[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design) - -أو انسخه محلياً: - -```bash -$ git clone git@github.com:ant-design/ant-design.git -$ cd ant-design -$ npm install -$ npm start -``` - -افتح متصفحك وقم بزيارة http://127.0.0.1:8001 , شاهد المزيد [Development](https://github.com/ant-design/ant-design/wiki/Development). - -## 🤝 المساهمة [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) - -أقرأ [دليل المساهمة](https://ant.design/docs/react/contributing) ودعونا نبني معاً الأفضل. - -نرحب بجميع المساهمات. يرجى قراءة [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) أولاً. يمكنك تقديم أي أفكار [pull requests](https://github.com/ant-design/ant-design/pulls) أو [GitHub issues](https://github.com/ant-design/ant-design/issues). إذا كنت ترغب في تحسين التعليمات البرمجية ، تحقق من [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) وأتمنى لك وقتاً ممتعاً! :) - -إذا كنت مساهماً ، فيرجى اتباع [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) لإنشاء طلب مساهمة مع [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md). - -[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) - -## ❤️ الرعاة والداعمون [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) diff --git a/README-ja_JP.md b/README-ja_JP.md deleted file mode 100644 index 94424a959318..000000000000 --- a/README-ja_JP.md +++ /dev/null @@ -1,155 +0,0 @@ -

- - - -

- -

Ant Design

- -
- -エンタープライズクラスの UI 設計言語と React UI ライブラリです。 - -[![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] - -[![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] - -[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square -[npm-url]: http://npmjs.org/package/antd -[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg -[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22 -[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square -[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master -[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square -[download-url]: https://npmjs.org/package/antd -[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield -[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield -[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open -[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 -[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design -[twitter-url]: https://twitter.com/AntDesignUI -[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square -[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square -[bundlephobia-url]: https://bundlephobia.com/package/antd -[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square -[issues-helper-url]: https://github.com/actions-cool/issues-helper -[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square -[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 - -
- -[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) - -[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | 日本語 | [العربية](./README-ar_EG.md) - -## ✨ 機能 - -- 🌈 ウェブアプリケーション用に設計されたエンタープライズクラスの UI。 -- 📦 高品質な React コンポーネントのセットが箱から出されます。 -- 🛡 TypeScript で書かれており、予測可能な静的型がある。 -- ⚙️ デザインリソースと開発ツールの全体的なパッケージ。 -- 🌍 数十の言語に対応した国際化サポート。 -- 🎨 強力なテーマのカスタマイズを細部にわたって実現。 - -## 🖥 環境対応 - -- モダンブラウザ -- サーバーサイド レンダリング -- [Electron](https://www.electronjs.org/) - -| [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | -| Edge | 直近の 2 バージョン | 直近の 2 バージョン | 直近の 2 バージョン | 直近の 2 バージョン | - -## 📦 インストール - -```bash -npm install antd -``` - -```bash -yarn add antd -``` - -## 🔨 使い方 - -```jsx -import React from 'react'; -import { Button, DatePicker } from 'antd'; - -const App = () => ( - <> - - - -); -``` - -### TypeScript - -`antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://ant.design/docs/react/use-in-typescript)をチェックしてください。 - -## 🌍 国際化対応 - -数十の言語が `antd` でサポートされています。[i18n](https://ant.design/docs/react/i18n) を参照してください。 - -## 🔗 リンク - -- [ホームページ](https://ant.design/) -- [コンポーネントの概要](https://ant.design/components/overview) -- [Ant Design Pro](http://pro.ant.design/) -- [変更ログ](CHANGELOG.en-US.md) -- [rc-components](http://react-component.github.io/) -- [Mobile UI](http://mobile.ant.design) -- [Mini Program UI](http://mini.ant.design) -- [Ant Design Pro コンポーネント](https://procomponents.ant.design) -- [Ant Design チャート](https://charts.ant.design) -- [Ant Design アイコン](https://github.com/ant-design/ant-design-icons) -- [Ant Design カラー](https://github.com/ant-design/ant-design-colors) -- [ランディングページ](https://landing.ant.design) -- [動作](https://motion.ant.design) -- [足場マーケット](http://scaffold.ant.design) -- [開発者向けインストラクション](https://github.com/ant-design/ant-design/wiki/Development) -- [バージョン管理リリースノート](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [FAQ](https://ant.design/docs/react/faq) -- バグレポート用の [CodeSandbox テンプレート](https://u.ant.design/codesandbox-repro) -- [テーマのカスタマイズ](https://ant.design/docs/react/customize-theme) -- [コラボレーターへの応募方法](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## ⌨️ 開発 - -GitHub の無料オンライン開発環境である Gitpod を利用する。 - -[![Gitpod で開く](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design) - -またはローカルにクローンする: - -```bash -$ git clone git@github.com:ant-design/ant-design.git -$ cd ant-design -$ npm install -$ npm start -``` - -ブラウザを起動し、http://127.0.0.1:8001 にアクセスして[開発セクション](https://github.com/ant-design/ant-design/wiki/Development)の続きをもっと見る. - -## 🤝 貢献 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) - -[貢献ガイド](https://ant.design/docs/react/contributing)を読んで、よりよい antd を一緒の作り上げましょう。 - -すべての貢献に感謝します。まずは [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) をお読みください. どんなアイデアも [Pull Request](https://github.com/ant-design/ant-design/pulls) や [GitHub issues](https://github.com/ant-design/ant-design/issues) で応募することができます. コードの改良をしたい方は、[開発手順](https://github.com/ant-design/ant-design/wiki/Development) を確認してください。あとは楽しみましょう! :) - -コラボレーターの方は、[コラボレーター テンプレート](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md)を使い、Pull Request を作成するための[プルリクエストの原則](https://github.com/ant-design/ant-design/wiki/PR-principle)に従ってください。 - -[![このレポジトリの課題に資金を提供しよう](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) - -## ❤️ スポンサーと後援者 [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) diff --git a/README-pt_BR.md b/README-pt_BR.md deleted file mode 100644 index a267d27d70d8..000000000000 --- a/README-pt_BR.md +++ /dev/null @@ -1,158 +0,0 @@ -

- - - -

- -

Ant Design

- -
- -Uma solução empresarial de design e biblioteca UI para React. - -[![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] - -[![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] - -[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square -[npm-url]: http://npmjs.org/package/antd -[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg -[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22 -[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square -[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master -[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square -[download-url]: https://npmjs.org/package/antd -[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield -[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield -[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open -[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 -[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design -[twitter-url]: https://twitter.com/AntDesignUI -[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square -[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square -[bundlephobia-url]: https://bundlephobia.com/package/antd -[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square -[issues-helper-url]: https://github.com/actions-cool/issues-helper -[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square -[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 - -
- -[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) - -[English](./README.md) | Português | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md) - -## ✨ Funcionalidades - -- 🌈 Design empresarial de interface para aplicações web. -- 📦 Um conjunto de alta qualidade, componentes React prontos para uso. -- 🛡 Escrito em TypeScript com tipos previsíveis. -- ⚙️ Pacote completo de recursos de design e ferramentas de desenvolvimento. -- 🌍 Suporte de internacionalização para dezenas de idiomas. -- 🎨 Personalização poderosa do tema em todos os detalhes. - -## 🖥 Suporte aos ambientes - -- Navegadores modernos -- Renderização no lado do servidor (server-side) -- [Electron](https://www.electronjs.org/) - -| [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Opera](http://godban.github.io/browsers-support-badges/)
Opera | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | --- | -| Edge | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões | últimas 2 versões | - -## 📦 Instalação - -```bash -npm install antd -``` - -```bash -yarn add antd -``` - -## 🔨 Uso - -```jsx -import React from 'react'; -import { Button, DatePicker } from 'antd'; - -const App = () => ( - <> - - - -); -``` - -### TypeScript - -Veja [Uso no Typescript](https://ant.design/docs/react/use-in-typescript). - -## 🌍 Internacionalização - -Veja [i18n](https://ant.design/docs/react/i18n). - -## 🔗 Links - -- [Página inicial](https://ant.design/) -- [Componentes](https://ant.design/components/overview) -- [Ant Design Pro](http://pro.ant.design/) -- [Ant Design Charts](https://charts.ant.design) -- [Change Log](CHANGELOG.en-US.md) -- [rc-components](http://react-component.github.io/) -- [Mobile UI](http://mobile.ant.design) -- [Mini Program UI](http://mini.ant.design) -- [Ant Design Icones](https://github.com/ant-design/ant-design-icons) -- [Ant Design Cores](https://github.com/ant-design/ant-design-colors) -- [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout) -- [Ant Design Pro Blocks](https://github.com/ant-design/pro-blocks) -- [Tema escuro](https://github.com/ant-design/ant-design-dark-theme) -- [Página de aterrissagem](https://landing.ant.design) -- [Motion](https://motion.ant.design) -- [Mercado de páginas](http://scaffold.ant.design) -- [Instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development) -- [Versionando as notas de atualização](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [FAQ](https://ant.design/docs/react/faq) -- [CodeSandbox Template](https://u.ant.design/codesandbox-repro) para relatório de erros -- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design) -- [Customize Theme](https://ant.design/docs/react/customize-theme) -- [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## ⌨️ Desenvolvimento - -Use Gitpod, um ambiente de desenvolvimento online para GitHub. - -[![Abrir no Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design) - -Ou clone localmente: - -```bash -$ git clone git@github.com:ant-design/ant-design.git -$ cd ant-design -$ npm install -$ npm start -``` - -Abra seu navegador e visite http://127.0.0.1:8001, veja mais em [Desenvolvimento](https://github.com/ant-design/ant-design/wiki/Development). - -## 🤝 Contribuição [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) - -Leia nosso [guia de contribução](https://ant.design/docs/react/contributing) e vamos contruir um melhor antd juntos. - -Nós saudamos todas as contribuições. Por favor, leia nosso [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) primeiro. Você pode submeter todas as ideias como [Pull Requests](https://github.com/ant-design/ant-design/pulls) ou como [GitHub issues](https://github.com/ant-design/ant-design/issues). Se você quiser melhorar o código, verifique [instruções ao desenvolvedor](https://github.com/ant-design/ant-design/wiki/Development) e divirta-se! :) - -Se você é um colaborador, por favor siga nossa [Pull Request princípio](https://github.com/ant-design/ant-design/wiki/PR-principle) para criar um Pull Request através do [template do colaborador](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md). - -[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) - -## ❤️ Patrocionadores e Apoiadores [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) diff --git a/README-sp_MX.md b/README-sp_MX.md deleted file mode 100644 index 0e2298117733..000000000000 --- a/README-sp_MX.md +++ /dev/null @@ -1,154 +0,0 @@ -

- - - -

- -

Ant Design

- -
- -Un lenguaje de diseño de interfaz de usuario de clase empresarial y una biblioteca de interfaz de usuario React. - -[![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] - -[![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] - -[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square -[npm-url]: http://npmjs.org/package/antd -[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg -[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22 -[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square -[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master -[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square -[download-url]: https://npmjs.org/package/antd -[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield -[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield -[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open -[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 -[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design -[twitter-url]: https://twitter.com/AntDesignUI -[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square -[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square -[bundlephobia-url]: https://bundlephobia.com/package/antd -[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square -[issues-helper-url]: https://github.com/actions-cool/issues-helper -[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square -[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 - -
- -[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) - -[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | Spanish | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md) - -## ✨ Características - -- 🌈 Interfaz de usuario de clase empresarial diseñada para aplicaciones de web -- 📦 Un conjunto de componentes React de alta calidad listos para usar. -- 🛡 Escrito en TypeScript con tipos estáticos predecibles. -- ⚙️ Paquete completo de recursos de diseño y herramientas de desarrollo. -- 🌍 Soporte de internacionalización para decenas de idiomas. -- 🎨 Potente personalización del tema en cada detalle. - -## 🖥 Entornos soportados - -- Navegadores modernos -- Representación del lado del servidor -- [Electron](https://www.electronjs.org/) - -| [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | -| Edge | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones | últimas 2 versiones | - -## 📦 Instalar - -```bash -npm install antd -``` - -```bash -yarn add antd -``` - -## 🔨 Uso - -```jsx -import React from 'react'; -import { Button, DatePicker } from 'antd'; - -const App = () => ( - <> - - - -); -``` - -### TypeScript - -`antd` está escrito en TypeScript con definiciones completas, ver Usar en TypeScript [Usar en TypeScript](https://ant.design/docs/react/use-in-typescript) para comenzar. - -## 🌍 Internacionalización - -Docenas de idiomas compatibles en `antd`, ver [i18n](https://ant.design/docs/react/i18n). - -## 🔗 Enlaces - -- [Página de Inicio](https://ant.design/) -- [Descripción General de los Componentes](https://ant.design/components/overview) -- [Ant Design Pro](http://pro.ant.design/) -- [Cambio de Registro](CHANGELOG.en-US.md) -- [componentes-rc](http://react-component.github.io/) -- [Interfaz de Usuario Móvil](http://mobile.ant.design) -- [Componentes Ant Design Pro](https://procomponents.ant.design) -- [Gráficos de Diseño de Ant Design](https://charts.ant.design) -- [Iconos de Diseño de Ant Design](https://github.com/ant-design/ant-design-icons) -- [Colores de Diseño de Ant Design](https://github.com/ant-design/ant-design-colors) -- [Páginas de Destino](https://landing.ant.design) -- [Movimiento](https://motion.ant.design) -- [Mercado Scaffold](http://scaffold.ant.design) -- [Instrucción para Desarrolladores](https://github.com/ant-design/ant-design/wiki/Development) -- [Nota de la Versión de Control de Versiones](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [FAQ](https://ant.design/docs/react/faq) -- [Plantilla de CodeSandbox](https://u.ant.design/codesandbox-repro) para reportes de errores -- [Tema personalizado](https://ant.design/docs/react/customize-theme) -- [Cómo Postularse para ser Colaborador](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## ⌨️ Desarrollo - -Utilice Gitpod, un entorno de desarrollo en línea gratuito para GitHub. - -[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design) - -O clonar localmente: - -```bash -$ git clone git@github.com:ant-design/ant-design.git -$ cd ant-design -$ npm install -$ npm start -``` - -Abra su navegador y visite http://127.0.0.1:8001 , vea más en [Desarollo](https://github.com/ant-design/ant-design/wiki/Development). - -## 🤝 Contribuyendo [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) - -Lea nuestro [guía de contribución](https://ant.design/docs/react/contributing) y construyamos un mejor antd juntos. - -Damos la bienvenida a todas las contribuciones. Por favor lea nuestro[CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) primero. Puede enviar ideas como [solicitudes de extracción](https://github.com/ant-design/ant-design/pulls) o como [problemas de GitHub](https://github.com/ant-design/ant-design/issues). Si desea mejorar el código, consulte las [Instrucciones de Desarrollo](https://github.com/ant-design/ant-design/wiki/Development) y ¡diviértase! :) - -Si usted es un colaborador, siga nuestro [principio de solicitud de extracción](https://github.com/ant-design/ant-design/wiki/PR-principle) para crear una solicitud de extracción con una [plantilla de colaborador](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md). - -[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) - -## ❤️ Patrocinadores [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) diff --git a/README-uk_UA.md b/README-uk_UA.md deleted file mode 100644 index fccd2a1f1a48..000000000000 --- a/README-uk_UA.md +++ /dev/null @@ -1,155 +0,0 @@ -

- - - -

- -

Ant Design

- -
- -Мова інтерфейсу корпоративного класу та React UI бібліотека. - -[![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] - -[![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] - -[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square -[npm-url]: http://npmjs.org/package/antd -[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg -[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22 -[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square -[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master -[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square -[download-url]: https://npmjs.org/package/antd -[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield -[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield -[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open -[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 -[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design -[twitter-url]: https://twitter.com/AntDesignUI -[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square -[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square -[bundlephobia-url]: https://bundlephobia.com/package/antd -[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square -[issues-helper-url]: https://github.com/actions-cool/issues-helper -[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square -[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 - -
- -[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) - -[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | Українською | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md) - -## ✨ Особливості - -- 🌈 UI корпоративного класу, призначений для веб-додатків. -- 📦 Набір високоякісних компонентів React з коробки. -- 🛡 Написано на TypeScript із вбудованими статичними типами. -- ⚙️ Весь пакет дизайнерських ресурсів та засобів розробки. -- 🌍 Підтримка інтернаціоналізації для десятків мов. -- 🎨 Потужне налаштування теми в кожній деталі. - -## 🖥 Підтримка навколишнього середовища - -- Сучасні браузери -- Рендеринг на стороні сервера (SSR) -- [Electron](https://www.electronjs.org/) - -| [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | -| Edge | 2 останні версії | 2 останні версії | 2 останні версії | 2 останні версії | - -## 📦 Встановлення - -```bash -npm install antd -``` - -```bash -yarn add antd -``` - -## 🔨 Використання - -```jsx -import React from 'react'; -import { Button, DatePicker } from 'antd'; - -const App = () => ( - <> - - - -); -``` - -### TypeScript - -`antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://ant.design/docs/react/use-in-typescript) щоб розпочати. - -## 🌍 Інтернаціоналізація - -Десятки мов підтримуються в `antd`, дивись [i18n](https://ant.design/docs/react/i18n). - -## 🔗 Посилання - -- [Домашня сторінка](https://ant.design/) -- [Компоненти](https://ant.design/components/overview) -- [Ant Design Pro](http://pro.ant.design/) -- [Change Log](CHANGELOG.en-US.md) -- [rc-components](http://react-component.github.io/) -- [Mobile UI](http://mobile.ant.design) -- [Mini Program UI](http://mini.ant.design) -- [Ant Design Pro Components](https://procomponents.ant.design) -- [Ant Design Charts](https://charts.ant.design) -- [Ant Design Icons](https://github.com/ant-design/ant-design-icons) -- [Ant Design Colors](https://github.com/ant-design/ant-design-colors) -- [Лендінги](https://landing.ant.design) -- [Motion](https://motion.ant.design) -- [Scaffold Market](http://scaffold.ant.design) -- [Інструкція розробника](https://github.com/ant-design/ant-design/wiki/Development) -- [Примітка до випуску версій](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [FAQ](https://ant.design/docs/react/faq) -- [CodeSandbox темплейт](https://u.ant.design/codesandbox-repro) для звітів про помилки -- [Кастомізація теми](https://ant.design/docs/react/customize-theme) -- [Як подати заявку на участь у програмі Співавторства](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## ⌨️ Розробка - -Використовуй Gitpod, безкоштовне середовище розробки для GitHub. - -[![Відкрити у Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design) - -Або клонуй локально: - -```bash -$ git clone git@github.com:ant-design/ant-design.git -$ cd ant-design -$ npm install -$ npm start -``` - -Відкрий у браузері http://127.0.0.1:8001, докладніше дивись [Розробка](https://github.com/ant-design/ant-design/wiki/Development). - -## 🤝 Контрибьютинг [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) - -Прочитай наш [посібник контриб'ютора](https://ant.design/docs/react/contributing) і давай будувати кращий antd разом. - -Ми вітаємо всі внески. Будь ласка, прочитай наш [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) спочатку. Ти можеш пропонувати будь-які ідеї як [Pull Request](https://github.com/ant-design/ant-design/pulls) або як [GitHub issues](https://github.com/ant-design/ant-design/issues). Якщо ти хочеш вдосконалити код, переглянь [Інструкції з розробки](https://github.com/ant-design/ant-design/wiki/Development) та добре проведи час! :) - -Якщо ти співавтор, дотримуйся нашого [Pull Request принципу](https://github.com/ant-design/ant-design/wiki/PR-principle) щоб створити Pull Request за [темплейтом співавтора](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md). - -[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) - -## ❤️ Спонсори та Меценати [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) diff --git a/README-zh_CN.md b/README-zh_CN.md index 1f822316defe..1d9e5c6e417c 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] +[![][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] [![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,12 +40,14 @@ [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
[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) -[English](./README.md) | [Português](./README-pt_BR.md) | 简体中文 | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md) +[English](./README.md) | 中文 ## ✨ 特性 @@ -76,6 +78,10 @@ npm install antd --save yarn add antd ``` +```bash +pnpm add antd +``` + ## 🔨 示例 ```jsx @@ -150,7 +156,7 @@ $ npm start > 强烈推荐阅读 [《提问的智慧》](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way)、[《如何向开源社区提问题》](https://github.com/seajs/seajs/issues/545) 和 [《如何有效地报告 Bug》](http://www.chiark.greenend.org.uk/%7Esgtatham/bugs-cn.html)、[《如何向开源项目提交无法解答的问题》](https://zhuanlan.zhihu.com/p/25795393)，更好的问题更容易获得帮助。 -[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) +[![赞助链接](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) ## 👥 社区互助 diff --git a/README.md b/README.md index a7fc1da34977..82971f3c6632 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ An enterprise-class UI design language and React UI library. [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) -English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md) +English | [中文](./README-zh_CN.md) ## ✨ Features @@ -78,6 +78,10 @@ npm install antd yarn add antd ``` +```bash +pnpm add antd +``` + ## 🔨 Usage ```jsx @@ -148,7 +152,7 @@ We welcome all contributions. Please read our [CONTRIBUTING.md](https://github.c If you are a collaborator, please follow our [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) to create a Pull Request with [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md). -[![Let's fund issues in this repository](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) +[![Let's fund issues in this repository](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) ## ❤️ Sponsors and Backers [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support) diff --git a/rome.json b/biome.json similarity index 80% rename from rome.json rename to biome.json index 618edc3e25f1..9bf6ce31fdd1 100644 --- a/rome.json +++ b/biome.json @@ -1,4 +1,5 @@ { + "$schema": "https://biomejs.dev/schemas/1.0.0/schema.json", "formatter": { "enabled": true, "ignore": ["./dist/*", "./es/**/*", "./lib/**/*", "_site/**/*"], diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx index aed3cd743997..1da49483d305 100644 --- a/components/_util/ActionButton.tsx +++ b/components/_util/ActionButton.tsx @@ -2,7 +2,7 @@ import useState from 'rc-util/lib/hooks/useState'; import * as React from 'react'; import Button from '../button'; import type { ButtonProps, LegacyButtonType } from '../button/button'; -import { convertLegacyProps } from '../button/button'; +import { convertLegacyProps } from '../button/buttonHelpers'; export interface ActionButtonProps { type?: LegacyButtonType; @@ -48,7 +48,7 @@ const ActionButton: React.FC = (props) => { }; React.useEffect(() => { - let timeoutId: NodeJS.Timer | null = null; + let timeoutId: ReturnType | null = null; if (autoFocus) { timeoutId = setTimeout(() => { buttonRef.current?.focus(); diff --git a/components/_util/gapSize.ts b/components/_util/gapSize.ts new file mode 100644 index 000000000000..f4f35ec38085 --- /dev/null +++ b/components/_util/gapSize.ts @@ -0,0 +1,13 @@ +import type { SizeType } from '../config-provider/SizeContext'; + +export function isPresetSize(size?: SizeType | string | number): size is SizeType { + return ['small', 'middle', 'large'].includes(size as string); +} + +export function isValidGapNumber(size?: SizeType | string | number): size is number { + if (!size) { + // The case of size = 0 is deliberately excluded here, because the default value of the gap attribute in CSS is 0, so if the user passes 0 in, we can directly ignore it. + return false; + } + return typeof size === 'number' && !Number.isNaN(size); +} diff --git a/components/_util/hooks/useFlexGapSupport.ts b/components/_util/hooks/useFlexGapSupport.ts deleted file mode 100644 index b0640f0f07c4..000000000000 --- a/components/_util/hooks/useFlexGapSupport.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { detectFlexGapSupported } from '../styleChecker'; - -export default () => { - const [flexible, setFlexible] = React.useState(false); - React.useEffect(() => { - setFlexible(detectFlexGapSupported()); - }, []); - - return flexible; -}; diff --git a/components/_util/responsiveObserver.ts b/components/_util/responsiveObserver.ts index a8fd54df78eb..ca4b3f7844ea 100644 --- a/components/_util/responsiveObserver.ts +++ b/components/_util/responsiveObserver.ts @@ -1,4 +1,5 @@ import React from 'react'; + import type { GlobalToken } from '../theme/interface'; import { useToken } from '../theme/internal'; @@ -124,3 +125,14 @@ export default function useResponsiveObserver() { }; }, [token]); } + +export const matchScreen = (screens: ScreenMap, screenSizes?: ScreenSizeMap) => { + if (screenSizes && typeof screenSizes === 'object') { + for (let i = 0; i < responsiveArray.length; i++) { + const breakpoint: Breakpoint = responsiveArray[i]; + if (screens[breakpoint] && screenSizes[breakpoint] !== undefined) { + return screenSizes[breakpoint]; + } + } + } +}; diff --git a/components/_util/styleChecker.ts b/components/_util/styleChecker.ts index c39ca2510f1a..dfc960fa8fb8 100644 --- a/components/_util/styleChecker.ts +++ b/components/_util/styleChecker.ts @@ -4,38 +4,3 @@ import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker'; export const canUseDocElement = () => canUseDom() && window.document.documentElement; export { isStyleSupport }; - -let flexGapSupported: boolean; -export const detectFlexGapSupported = () => { - if (!canUseDocElement()) { - return false; - } - - if (flexGapSupported !== undefined) { - return flexGapSupported; - } - - // create flex container with row-gap set - const flex = document.createElement('div'); - flex.style.display = 'flex'; - flex.style.flexDirection = 'column'; - flex.style.rowGap = '1px'; - - // create two, elements inside it - flex.appendChild(document.createElement('div')); - flex.appendChild(document.createElement('div')); - - // some browser may not repaint when remove nodes, so we need create a new layer to detect. - const container = document.createElement('div'); - container.style.position = 'absolute'; - container.style.zIndex = '-9999'; - container.appendChild(flex); - - - // append to the DOM (needed to obtain scrollHeight) - document.body.appendChild(container); - flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap - document.body.removeChild(container); - - return flexGapSupported; -}; diff --git a/components/_util/warning.ts b/components/_util/warning.ts index 994ed46d864b..a201d7f61c57 100644 --- a/components/_util/warning.ts +++ b/components/_util/warning.ts @@ -1,3 +1,4 @@ +import * as React from 'react'; import rcWarning, { resetWarned } from 'rc-util/lib/warning'; export { resetWarned }; @@ -18,4 +19,42 @@ if (process.env.NODE_ENV !== 'production') { }; } +type TypeWarning = ( + valid: boolean, + component: string, + /** + * - deprecated: Some API will be removed in future but still support now. + * - usage: Some API usage is not correct. + * - breaking: Breaking change like API is removed. + */ + type: 'deprecated' | 'usage' | 'breaking', + message?: string, +) => void; + +export interface WarningContextProps { + deprecated?: boolean; +} + +export const WarningContext = React.createContext({}); + +/** + * This is a hook but we not named as `useWarning` + * since this is only used in development. + * We should always wrap this in `if (process.env.NODE_ENV !== 'production')` condition + */ +export const devUseWarning: () => TypeWarning = + process.env.NODE_ENV !== 'production' + ? () => { + const { deprecated } = React.useContext(WarningContext); + + const typeWarning: TypeWarning = (valid, component, type, message) => { + if (deprecated !== false || type !== 'deprecated') { + warning(valid, component, message); + } + }; + + return typeWarning; + } + : () => noop; + export default warning; diff --git a/components/_util/wave/useWave.ts b/components/_util/wave/useWave.ts index 788141ebb7ad..24bee62e2243 100644 --- a/components/_util/wave/useWave.ts +++ b/components/_util/wave/useWave.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import useEvent from 'rc-util/lib/hooks/useEvent'; +import { useEvent } from 'rc-util'; import raf from 'rc-util/lib/raf'; import showWaveEffect from './WaveEffect'; import { ConfigContext } from '../../config-provider'; diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 9f60cdf6661b..9c37baff91c0 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -1,9 +1,9 @@ -'use client'; +import React, { createRef, forwardRef, useContext } from 'react'; import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import omit from 'rc-util/lib/omit'; -import React, { createRef, forwardRef, useContext } from 'react'; + import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; @@ -71,7 +71,7 @@ class InternalAffix extends React.Component { private fixedNodeRef = createRef(); - private timer: NodeJS.Timeout | null; + private timer: ReturnType | null; context: ConfigConsumerProps; diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx index 20a416c8e863..70e7e678b4e4 100644 --- a/components/alert/Alert.tsx +++ b/components/alert/Alert.tsx @@ -1,3 +1,5 @@ +import type { ReactElement } from 'react'; +import * as React from 'react'; import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; import CloseOutlined from '@ant-design/icons/CloseOutlined'; @@ -6,12 +8,10 @@ import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled'; import classNames from 'classnames'; import CSSMotion from 'rc-motion'; import pickAttrs from 'rc-util/lib/pickAttrs'; -import type { ReactElement } from 'react'; -import * as React from 'react'; + import { replaceElement } from '../_util/reactNode'; -import warning from '../_util/warning'; +import { devUseWarning } from '../_util/warning'; import { ConfigContext } from '../config-provider'; - // CSSINJS import useStyle from './style'; @@ -118,8 +118,16 @@ const Alert: React.FC = (props) => { } = props; const [closed, setClosed] = React.useState(false); + if (process.env.NODE_ENV !== 'production') { - warning(!closeText, 'Alert', '`closeText` is deprecated. Please use `closeIcon` instead.'); + const warning = devUseWarning(); + + warning( + !closeText, + 'Alert', + 'deprecated', + '`closeText` is deprecated. Please use `closeIcon` instead.', + ); } const ref = React.useRef(null); const { getPrefixCls, direction, alert } = React.useContext(ConfigContext); diff --git a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap index 5f74b2edae1d..b399d10d4e17 100644 --- a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2,12 +2,11 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] = `
- + @@ -264,26 +268,28 @@ Array [ data-show="true" title="12" > - + - 1 + + 1 + - - - 2 + + 2 + - + @@ -330,36 +336,38 @@ Array [ data-show="true" title="123" > - + - 1 + + 1 + - - - 2 + + 2 + - - - 3 + + 3 + - + @@ -423,6 +431,7 @@ Array [ />
- + @@ -241,26 +245,28 @@ Array [ data-show="true" title="12" > - + - 1 + + 1 + - - - 2 + + 2 + - + @@ -307,36 +313,38 @@ Array [ data-show="true" title="123" > - + - 1 + + 1 + - - - 2 + + 2 + - - - 3 + + 3 + - + @@ -398,6 +406,7 @@ Array [ />
( <> - custom badge color
} badge={{ count: 5, color: 'blue' }} /> + custom badge color
} + badge={{ count: 5, color: 'blue' }} + /> diff --git a/components/float-button/index.ts b/components/float-button/index.ts index 2e443547314f..663dda19f0c8 100644 --- a/components/float-button/index.ts +++ b/components/float-button/index.ts @@ -1,5 +1,3 @@ -'use client'; - import BackTop from './BackTop'; import FloatButton from './FloatButton'; import FloatButtonGroup from './FloatButtonGroup'; diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 165cb9872668..3b9efdc5e8d5 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -71,6 +71,6 @@ tag: New | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | | | onClick | 点击按钮的回调函数 | () => void | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/float-button/style/index.ts b/components/float-button/style/index.ts index a0c031f5998c..16b8d468d290 100644 --- a/components/float-button/style/index.ts +++ b/components/float-button/style/index.ts @@ -220,9 +220,10 @@ const sharedFloatButtonStyle: GenerateStyle = (toke position: 'fixed', cursor: 'pointer', zIndex: 99, + // Do not remove the 'display: block' here. + // Deleting it will cause marginBottom to become ineffective. + // Ref: https://github.com/ant-design/ant-design/issues/44700 display: 'block', - justifyContent: 'center', - alignItems: 'center', width: floatButtonSize, height: floatButtonSize, insetInlineEnd: token.floatButtonInsetInlineEnd, diff --git a/components/form/Form.tsx b/components/form/Form.tsx index c853d9c30c55..f0e3743e103b 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -18,8 +18,12 @@ import useFormWarning from './hooks/useFormWarning'; import type { FormLabelAlign } from './interface'; import useStyle from './style'; import ValidateMessagesContext from './validateMessagesContext'; +import type { FeedbackIcons } from './FormItem'; -export type RequiredMark = boolean | 'optional'; +export type RequiredMark = + | boolean + | 'optional' + | ((labelNode: React.ReactNode, info: { required: boolean }) => React.ReactNode); export type FormLayout = 'horizontal' | 'inline' | 'vertical'; export interface FormProps extends Omit, 'form'> { @@ -32,6 +36,7 @@ export interface FormProps extends Omit, 'form labelCol?: ColProps; wrapperCol?: ColProps; form?: FormInstance; + feedbackIcons?: FeedbackIcons; size?: SizeType; disabled?: boolean; scrollToFirstError?: Options | boolean; @@ -64,6 +69,7 @@ const InternalForm: React.ForwardRefRenderFunction = (p onFinishFailed, name, style, + feedbackIcons, ...restFormProps } = props; @@ -129,8 +135,19 @@ const InternalForm: React.ForwardRefRenderFunction = (p requiredMark: mergedRequiredMark, itemRef: __INTERNAL__.itemRef, form: wrapForm, + feedbackIcons, }), - [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark, wrapForm], + [ + name, + labelAlign, + labelCol, + wrapperCol, + layout, + mergedColon, + mergedRequiredMark, + wrapForm, + feedbackIcons, + ], ); React.useImperativeHandle(ref, () => wrapForm); diff --git a/components/form/FormItem/ItemHolder.tsx b/components/form/FormItem/ItemHolder.tsx index d338594325cb..928a0b490703 100644 --- a/components/form/FormItem/ItemHolder.tsx +++ b/components/form/FormItem/ItemHolder.tsx @@ -1,27 +1,19 @@ -import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; -import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; -import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; -import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; +import * as React from 'react'; import classNames from 'classnames'; import type { Meta } from 'rc-field-form/lib/interface'; -import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import isVisible from 'rc-util/lib/Dom/isVisible'; +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; -import * as React from 'react'; -import type { FormItemProps, ValidateStatus } from '.'; + +import type { FormItemProps } from '.'; import { Row } from '../../grid'; +import type { ReportMetaChange } from '../context'; +import { FormContext, NoStyleItemContext } from '../context'; import FormItemInput from '../FormItemInput'; import FormItemLabel from '../FormItemLabel'; -import type { FormItemStatusContextProps, ReportMetaChange } from '../context'; -import { FormContext, FormItemInputContext, NoStyleItemContext } from '../context'; import useDebounce from '../hooks/useDebounce'; - -const iconMap = { - success: CheckCircleFilled, - warning: ExclamationCircleFilled, - error: CloseCircleFilled, - validating: LoadingOutlined, -}; +import { getStatus } from '../util'; +import StatusProvider from './StatusProvider'; export interface ItemHolderProps extends FormItemProps { prefixCls: string; @@ -88,52 +80,14 @@ export default function ItemHolder(props: ItemHolderProps) { // ======================== Status ======================== const getValidateState = (isDebounce = false) => { - let status: ValidateStatus = ''; const _errors = isDebounce ? debounceErrors : meta.errors; const _warnings = isDebounce ? debounceWarnings : meta.warnings; - if (validateStatus !== undefined) { - status = validateStatus; - } else if (meta.validating) { - status = 'validating'; - } else if (_errors.length) { - status = 'error'; - } else if (_warnings.length) { - status = 'warning'; - } else if (meta.touched || (hasFeedback && meta.validated)) { - // success feedback should display when pass hasFeedback prop and current value is valid value - status = 'success'; - } - return status; + + return getStatus(_errors, _warnings, meta, '', !!hasFeedback, validateStatus); }; const mergedValidateStatus = getValidateState(); - const formItemStatusContext = React.useMemo(() => { - let feedbackIcon: React.ReactNode; - if (hasFeedback) { - const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus]; - feedbackIcon = IconNode ? ( - - - - ) : null; - } - - return { - status: mergedValidateStatus, - errors, - warnings, - hasFeedback, - feedbackIcon, - isFormItemInput: true, - }; - }, [mergedValidateStatus, hasFeedback]); - // ======================== Render ======================== const itemClassName = classNames(itemPrefixCls, className, rootClassName, { [`${itemPrefixCls}-with-help`]: hasHelp || debounceErrors.length || debounceWarnings.length, @@ -181,6 +135,7 @@ export default function ItemHolder(props: ItemHolderProps) { 'validateTrigger', 'valuePropName', 'wrapperCol', + 'validateDebounce', ])} > {/* Label */} @@ -204,9 +159,17 @@ export default function ItemHolder(props: ItemHolderProps) { onErrorVisibleChanged={onErrorVisibleChanged} > - + {children} - + diff --git a/components/form/FormItem/StatusProvider.tsx b/components/form/FormItem/StatusProvider.tsx new file mode 100644 index 000000000000..20907de57491 --- /dev/null +++ b/components/form/FormItem/StatusProvider.tsx @@ -0,0 +1,103 @@ +import * as React from 'react'; +import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; +import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; +import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; +import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; +import classNames from 'classnames'; +import type { Meta } from 'rc-field-form/lib/interface'; + +import type { FeedbackIcons, ValidateStatus } from '.'; +import { FormContext, FormItemInputContext, type FormItemStatusContextProps } from '../context'; +import { getStatus } from '../util'; + +const iconMap = { + success: CheckCircleFilled, + warning: ExclamationCircleFilled, + error: CloseCircleFilled, + validating: LoadingOutlined, +}; + +export interface StatusProviderProps { + children?: React.ReactNode; + validateStatus?: ValidateStatus; + prefixCls: string; + meta: Meta; + errors: React.ReactNode[]; + warnings: React.ReactNode[]; + hasFeedback?: boolean | { icons?: FeedbackIcons }; + noStyle?: boolean; +} + +export default function StatusProvider({ + children, + errors, + warnings, + hasFeedback, + validateStatus, + prefixCls, + meta, + noStyle, +}: StatusProviderProps) { + const itemPrefixCls = `${prefixCls}-item`; + const { feedbackIcons } = React.useContext(FormContext); + + const mergedValidateStatus = getStatus( + errors, + warnings, + meta, + null, + !!hasFeedback, + validateStatus, + ); + + const { isFormItemInput: parentIsFormItemInput, status: parentStatus } = + React.useContext(FormItemInputContext); + + // ====================== Context ======================= + const formItemStatusContext = React.useMemo(() => { + let feedbackIcon: React.ReactNode; + if (hasFeedback) { + const customIcons = (hasFeedback !== true && hasFeedback.icons) || feedbackIcons; + const customIconNode = + mergedValidateStatus && + customIcons?.({ status: mergedValidateStatus, errors, warnings })?.[mergedValidateStatus]; + const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus]; + feedbackIcon = + customIconNode !== false && IconNode ? ( + + {customIconNode || } + + ) : null; + } + + let isFormItemInput: boolean | undefined = true; + let status: ValidateStatus = mergedValidateStatus || ''; + + // No style will follow parent context + if (noStyle) { + isFormItemInput = parentIsFormItemInput; + status = (mergedValidateStatus ?? parentStatus) || ''; + } + + return { + status, + errors, + warnings, + hasFeedback: !!hasFeedback, + feedbackIcon, + isFormItemInput, + }; + }, [mergedValidateStatus, hasFeedback, noStyle, parentIsFormItemInput, parentStatus]); + + // ======================= Render ======================= + return ( + + {children} + + ); +} diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index c4f21056c6a6..2fac0110dd05 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -1,24 +1,26 @@ +import * as React from 'react'; import classNames from 'classnames'; import { Field, FieldContext, ListContext } from 'rc-field-form'; import type { FieldProps } from 'rc-field-form/lib/Field'; -import type { Meta, NamePath } from 'rc-field-form/lib/interface'; +import type { Meta } from 'rc-field-form/lib/interface'; import useState from 'rc-util/lib/hooks/useState'; import { supportRef } from 'rc-util/lib/ref'; -import * as React from 'react'; + import { cloneElement, isValidElement } from '../../_util/reactNode'; -import warning from '../../_util/warning'; +import { devUseWarning } from '../../_util/warning'; import { ConfigContext } from '../../config-provider'; +import { FormContext, NoStyleItemContext } from '../context'; +import type { FormInstance } from '../Form'; import type { FormItemInputProps } from '../FormItemInput'; import type { FormItemLabelProps, LabelTooltipType } from '../FormItemLabel'; -import { FormContext, NoStyleItemContext } from '../context'; +import useChildren from '../hooks/useChildren'; import useFormItemStatus from '../hooks/useFormItemStatus'; import useFrameState from '../hooks/useFrameState'; import useItemRef from '../hooks/useItemRef'; +import useStyle from '../style'; import { getFieldId, toArray } from '../util'; import ItemHolder from './ItemHolder'; -import useChildren from '../hooks/useChildren'; -import useStyle from '../style'; -import type { FormInstance } from '../Form'; +import StatusProvider from './StatusProvider'; const NAME_SPLIT = '__SPLIT__'; @@ -34,6 +36,12 @@ type RenderChildren = (form: FormInstance) => React.ReactN type RcFieldProps = Omit, 'children'>; type ChildrenType = RenderChildren | React.ReactNode; +export type FeedbackIcons = (itemStatus: { + status: ValidateStatus; + errors?: React.ReactNode[]; + warnings?: React.ReactNode[]; +}) => { [key in ValidateStatus]?: React.ReactNode }; + interface MemoInputProps { value: any; update: any; @@ -61,7 +69,7 @@ export interface FormItemProps rootClassName?: string; children?: ChildrenType; id?: string; - hasFeedback?: boolean; + hasFeedback?: boolean | { icons: FeedbackIcons }; validateStatus?: ValidateStatus; required?: boolean; hidden?: boolean; @@ -72,13 +80,6 @@ export interface FormItemProps fieldKey?: React.Key | React.Key[]; } -function hasValidName(name?: NamePath): Boolean { - if (name === null) { - warning(false, 'Form.Item', '`null` is passed as `name` property'); - } - return !(name === undefined || name === null); -} - function genEmptyMeta(): Meta { return { errors: [], @@ -120,13 +121,20 @@ function InternalFormItem(props: FormItemProps): React.Rea const mergedValidateTrigger = validateTrigger !== undefined ? validateTrigger : contextValidateTrigger; - const hasName = hasValidName(name); + const hasName = !(name === undefined || name === null); const prefixCls = getPrefixCls('form', customizePrefixCls); // Style const [wrapSSR, hashId] = useStyle(prefixCls); + // ========================= Warn ========================= + const warning = devUseWarning(); + + if (process.env.NODE_ENV !== 'production') { + warning(name !== null, 'Form.Item', 'usage', '`null` is passed as `name` property'); + } + // ========================= MISC ========================= // Get `noStyle` required info const listContext = React.useContext(ListContext); @@ -213,7 +221,19 @@ function InternalFormItem(props: FormItemProps): React.Rea isRequired?: boolean, ): React.ReactNode { if (noStyle && !hidden) { - return baseChildren; + return ( + + {baseChildren} + + ); } return ( @@ -288,12 +308,14 @@ function InternalFormItem(props: FormItemProps): React.Rea warning( !(shouldUpdate && dependencies), 'Form.Item', + 'usage', "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.", ); if (Array.isArray(mergedChildren) && hasName) { warning( false, 'Form.Item', + 'usage', 'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.', ); childNode = mergedChildren; @@ -301,23 +323,27 @@ function InternalFormItem(props: FormItemProps): React.Rea warning( !!(shouldUpdate || dependencies), 'Form.Item', + 'usage', 'A `Form.Item` with a render function must have either `shouldUpdate` or `dependencies`.', ); warning( !hasName, 'Form.Item', + 'usage', 'A `Form.Item` with a render function cannot be a field, and thus cannot have a `name` prop.', ); } else if (dependencies && !isRenderProps && !hasName) { warning( false, 'Form.Item', + 'usage', 'Must set `name` or use a render function when `dependencies` is set.', ); } else if (isValidElement(mergedChildren)) { warning( mergedChildren.props.defaultValue === undefined, 'Form.Item', + 'usage', '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.', ); @@ -384,6 +410,7 @@ function InternalFormItem(props: FormItemProps): React.Rea warning( !mergedName.length, 'Form.Item', + 'usage', '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.', ); childNode = mergedChildren as React.ReactNode; diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx index a806be17940c..741a86d92061 100644 --- a/components/form/FormItemInput.tsx +++ b/components/form/FormItemInput.tsx @@ -1,10 +1,12 @@ -import classNames from 'classnames'; import * as React from 'react'; +import classNames from 'classnames'; + import type { ColProps } from '../grid/col'; import Col from '../grid/col'; import { FormContext, FormItemPrefixContext } from './context'; import ErrorList from './ErrorList'; import type { ValidateStatus } from './FormItem'; +import FallbackCmp from './style/fallbackCmp'; interface FormItemInputMiscProps { prefixCls: string; @@ -116,6 +118,7 @@ const FormItemInput: React.FC = (pr {dom} + ); }; diff --git a/components/form/FormItemLabel.tsx b/components/form/FormItemLabel.tsx index 69fed60960d8..8d53fff2f317 100644 --- a/components/form/FormItemLabel.tsx +++ b/components/form/FormItemLabel.tsx @@ -114,7 +114,13 @@ const FormItemLabel: React.FC {labelChildren} @@ -127,7 +133,7 @@ const FormItemLabel: React.FC = ({ children, ...props }) => { - warning( - typeof props.name === 'number' || - (Array.isArray(props.name) ? !!props.name.length : !!props.name), - 'Form.List', - 'Miss `name` prop.', - ); + if (process.env.NODE_ENV !== 'production') { + const warning = devUseWarning(); + + warning( + typeof props.name === 'number' || + (Array.isArray(props.name) ? !!props.name.length : !!props.name), + 'Form.List', + 'usage', + 'Miss `name` prop.', + ); + } const { getPrefixCls } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('form', customizePrefixCls); diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 23adac0b8e45..213d583d9486 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -550,11 +550,10 @@ Array [ style="text-align: right;" >
+
+
+
+
+
+ +`; + +exports[`renders components/form/demo/custom-feedback-icons.tsx extend context correctly 2`] = `[]`; + exports[`renders components/form/demo/customized-form-controls.tsx extend context correctly 1`] = `
+ +
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+

+ Only Update when + + password2 + + updated: +

+ 
+      {}
+
+
+
+`; + +exports[`renders components/form/demo/dependencies.tsx extend context correctly 2`] = `[]`; + exports[`renders components/form/demo/disabled.tsx extend context correctly 1`] = ` Array [