From e0532251549d387ff7be8c9510c4ee315ace55c0 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Wed, 5 Jul 2023 16:47:21 +0800 Subject: [PATCH 01/80] chore: bump rc-picker (#43367) * chore: bump rc-picker * chore: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 30 ------------------- package.json | 2 +- 2 files changed, 1 insertion(+), 31 deletions(-) diff --git a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index be8ab755ad..34ba63a2e1 100644 --- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -28480,36 +28480,6 @@ exports[`renders components/date-picker/demo/mode.tsx extend context correctly 1 -
- -
diff --git a/package.json b/package.json index 9cb2fd68e5..d6d3a43a56 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,7 @@ "rc-motion": "^2.7.3", "rc-notification": "~5.0.4", "rc-pagination": "~3.5.0", - "rc-picker": "~3.9.0", + "rc-picker": "~3.10.0", "rc-progress": "~3.4.1", "rc-rate": "~2.12.0", "rc-resize-observer": "^1.2.0", From 67900a7aad20476663f5a3aaac30c12efc93bfd3 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Wed, 5 Jul 2023 16:54:04 +0800 Subject: [PATCH 02/80] type: optimization AnyObject type (#43366) * type: optimization AnyObject type * fix lint * rerun --- components/_util/reactNode.ts | 3 +-- components/_util/type.ts | 2 ++ components/table/InternalTable.tsx | 6 +++--- components/table/Table.tsx | 7 +++---- components/table/__tests__/Table.test.tsx | 2 +- components/table/hooks/useSelection.tsx | 8 ++++---- components/table/interface.ts | 9 +++++---- 7 files changed, 19 insertions(+), 18 deletions(-) diff --git a/components/_util/reactNode.ts b/components/_util/reactNode.ts index 8e5b73c016..bb4e703592 100644 --- a/components/_util/reactNode.ts +++ b/components/_util/reactNode.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import type { AnyObject } from './type'; export const { isValidElement } = React; @@ -6,8 +7,6 @@ export function isFragment(child: any): boolean { return child && isValidElement(child) && child.type === React.Fragment; } -type AnyObject = Record; - type RenderProps = AnyObject | ((originProps: AnyObject) => AnyObject | void); export function replaceElement( diff --git a/components/_util/type.ts b/components/_util/type.ts index e4d5cd02ea..02f9aaaca9 100644 --- a/components/_util/type.ts +++ b/components/_util/type.ts @@ -1,2 +1,4 @@ /** https://github.com/Microsoft/TypeScript/issues/29729 */ export type LiteralUnion = T | (string & {}); + +export type AnyObject = Record; diff --git a/components/table/InternalTable.tsx b/components/table/InternalTable.tsx index 243cc0c293..eadf416552 100644 --- a/components/table/InternalTable.tsx +++ b/components/table/InternalTable.tsx @@ -1,10 +1,11 @@ import classNames from 'classnames'; -import { type TableProps as RcTableProps, INTERNAL_HOOKS } from 'rc-table'; +import { INTERNAL_HOOKS, type TableProps as RcTableProps } from 'rc-table'; import { convertChildrenToColumns } from 'rc-table/lib/hooks/useColumns'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; import type { Breakpoint } from '../_util/responsiveObserver'; import scrollTo from '../_util/scrollTo'; +import type { AnyObject } from '../_util/type'; import warning from '../_util/warning'; import type { SizeType } from '../config-provider/SizeContext'; import type { ConfigConsumerProps } from '../config-provider/context'; @@ -19,7 +20,6 @@ import Spin from '../spin'; import type { TooltipProps } from '../tooltip'; import renderExpandIcon from './ExpandIcon'; import RcTable from './RcTable'; -import type { AnyObject } from './Table'; import type { FilterState } from './hooks/useFilter'; import useFilter, { getFilterData } from './hooks/useFilter'; import useLazyKVMap from './hooks/useLazyKVMap'; @@ -109,7 +109,7 @@ export interface TableProps showSorterTooltip?: boolean | TooltipProps; } -const InternalTable = ( +const InternalTable = ( props: InternalTableProps, ref: React.MutableRefObject, ) => { diff --git a/components/table/Table.tsx b/components/table/Table.tsx index 0820749e57..4ab399bffd 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -1,5 +1,6 @@ import { EXPAND_COLUMN, Summary } from 'rc-table'; import * as React from 'react'; +import type { AnyObject } from '../_util/type'; import Column from './Column'; import ColumnGroup from './ColumnGroup'; import type { TableProps } from './InternalTable'; @@ -12,13 +13,11 @@ import { } from './hooks/useSelection'; import type { RefTable } from './interface'; -export type AnyObject = Record; - -const Table = ( +const Table = ( props: TableProps, ref: React.Ref, ) => { - const renderTimesRef = React.useRef(0); + const renderTimesRef = React.useRef(0); renderTimesRef.current += 1; return {...props} ref={ref} _renderTimes={renderTimesRef.current} />; }; diff --git a/components/table/__tests__/Table.test.tsx b/components/table/__tests__/Table.test.tsx index 7dcd546817..d5b7ff654b 100644 --- a/components/table/__tests__/Table.test.tsx +++ b/components/table/__tests__/Table.test.tsx @@ -251,7 +251,7 @@ describe('Table', () => { dataIndex: 'name', }, ]; - render( record + index} />); + render(
record.key + index} />); expect(warnSpy).toHaveBeenCalledWith( 'Warning: [antd: Table] `index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.', ); diff --git a/components/table/hooks/useSelection.tsx b/components/table/hooks/useSelection.tsx index 2159a99a20..9791d7bfe4 100644 --- a/components/table/hooks/useSelection.tsx +++ b/components/table/hooks/useSelection.tsx @@ -9,12 +9,12 @@ import { convertDataToEntities } from 'rc-tree/lib/utils/treeUtil'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import * as React from 'react'; import { useCallback, useMemo, useState } from 'react'; +import type { AnyObject } from '../../_util/type'; import warning from '../../_util/warning'; import type { CheckboxProps } from '../../checkbox'; import Checkbox from '../../checkbox'; import Dropdown from '../../dropdown'; import Radio from '../../radio'; -import type { AnyObject } from '../Table'; import type { ColumnType, ColumnsType, @@ -38,7 +38,7 @@ export const SELECTION_NONE = 'SELECT_NONE' as const; const EMPTY_LIST: React.Key[] = []; -interface UseSelectionConfig { +interface UseSelectionConfig { prefixCls: string; pageData: RecordType[]; data: RecordType[]; @@ -56,7 +56,7 @@ export type INTERNAL_SELECTION_ITEM = | typeof SELECTION_INVERT | typeof SELECTION_NONE; -const flattenData = ( +const flattenData = ( childrenColumnName: keyof RecordType, data?: RecordType[], ): RecordType[] => { @@ -70,7 +70,7 @@ const flattenData = ( return list; }; -const useSelection = ( +const useSelection = ( config: UseSelectionConfig, rowSelection?: TableRowSelection, ): readonly [TransformColumns, Set] => { diff --git a/components/table/interface.ts b/components/table/interface.ts index 3f8b1bdc9f..1775cd8804 100644 --- a/components/table/interface.ts +++ b/components/table/interface.ts @@ -7,23 +7,24 @@ import type { import { ExpandableConfig, GetRowKey } from 'rc-table/lib/interface'; import type * as React from 'react'; import type { Breakpoint } from '../_util/responsiveObserver'; +import type { AnyObject } from '../_util/type'; import type { CheckboxProps } from '../checkbox'; import type { PaginationProps } from '../pagination'; import type { TooltipProps } from '../tooltip'; import type { InternalTableProps, TableProps } from './InternalTable'; import type { INTERNAL_SELECTION_ITEM } from './hooks/useSelection'; -export type RefTable = ( +export type RefTable = ( props: React.PropsWithChildren> & { ref?: React.Ref }, ) => React.ReactElement; -export type RefInternalTable = ( +export type RefInternalTable = ( props: React.PropsWithChildren> & { ref?: React.Ref; }, ) => React.ReactElement; -export { GetRowKey, ExpandableConfig }; +export { ExpandableConfig, GetRowKey }; export type Key = React.Key; @@ -82,7 +83,7 @@ export type ColumnTitle = export type FilterValue = (Key | boolean)[]; export type FilterKey = Key[] | null; -export type FilterSearchType> = +export type FilterSearchType = | boolean | ((input: string, record: RecordType) => boolean); export interface FilterConfirmProps { From a640139c03a119edc6427430c2d3a24d5ac9c39c Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Wed, 5 Jul 2023 17:47:58 +0800 Subject: [PATCH 03/80] test: add blogList test case (#43375) --- components/__tests__/blog.test.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/components/__tests__/blog.test.ts b/components/__tests__/blog.test.ts index 987ed3a950..1b595308c8 100644 --- a/components/__tests__/blog.test.ts +++ b/components/__tests__/blog.test.ts @@ -4,12 +4,20 @@ const path = require('path'); const blogList = [ 'check-conduct', + 'contributor-development-maintenance-guide', 'css-in-js', + 'extract-ssr', 'getContainer', + 'github-actions-workflow', + 'issue-helper', + 'mock-project-build', 'modal-hook-order', - 'render-times', 'testing-migrate', + 'render-times', 'to-be-collaborator', + 'tooltip-align', + 'tree-shaking', + 'why-not-static', ].map((blogName) => path.join(__dirname, `../../docs/blog/${blogName}.en-US.md`)); describe('blog', () => { From b64a57d5d075123660c697b86493d210dd0ada42 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 5 Jul 2023 17:49:59 +0800 Subject: [PATCH 04/80] docs: component token meta (#43337) * docs: component token meta * docs: more * docs: complete --- .dumi/theme/builtins/ColorChunk/index.tsx | 4 +- .../builtins/ComponentTokenTable/index.tsx | 68 ++++++---- .dumi/theme/builtins/TokenTable/index.tsx | 2 +- components/anchor/style/index.ts | 8 ++ components/avatar/style/index.ts | 36 ++++++ components/breadcrumb/style/index.ts | 28 +++++ components/calendar/style/index.ts | 24 ++++ components/card/style/index.ts | 36 ++++++ components/carousel/style/index.ts | 12 ++ components/cascader/style/index.ts | 16 ++- components/date-picker/style/index.ts | 12 ++ components/descriptions/style/index.ts | 24 ++++ components/drawer/style/index.ts | 12 ++ components/dropdown/style/index.ts | 4 + components/image/style/index.ts | 16 +++ components/input-number/style/index.ts | 18 ++- components/list/style/index.ts | 44 +++++++ components/mentions/style/index.ts | 14 ++- components/menu/style/index.tsx | 111 +++++++++++++++++ components/message/style/index.tsx | 12 ++ components/modal/style/index.tsx | 24 ++++ components/notification/style/index.tsx | 8 ++ components/pagination/style/index.ts | 36 ++++++ components/popconfirm/style/index.tsx | 4 + components/popover/style/index.tsx | 12 ++ components/radio/style/index.tsx | 44 +++++++ components/rate/style/index.tsx | 16 +++ components/result/style/index.tsx | 16 +++ components/segmented/style/index.tsx | 20 +++ components/select/style/index.tsx | 4 + components/skeleton/style/index.tsx | 24 ++++ components/slider/style/index.tsx | 28 +++++ components/spin/style/index.tsx | 6 +- components/statistic/style/index.tsx | 8 ++ components/steps/style/index.tsx | 52 ++++++++ components/tabs/style/index.ts | 92 ++++++++++++++ components/tag/style/index.ts | 8 ++ components/timeline/style/index.ts | 20 +++ components/tooltip/style/index.ts | 5 + components/transfer/style/index.ts | 24 ++++ components/typography/style/index.ts | 12 +- components/upload/style/index.ts | 4 + scripts/generate-token-meta.ts | 117 ++++++++++++------ 43 files changed, 1006 insertions(+), 79 deletions(-) diff --git a/.dumi/theme/builtins/ColorChunk/index.tsx b/.dumi/theme/builtins/ColorChunk/index.tsx index 5ec1bdd2e3..e93ec840cc 100644 --- a/.dumi/theme/builtins/ColorChunk/index.tsx +++ b/.dumi/theme/builtins/ColorChunk/index.tsx @@ -1,6 +1,6 @@ -import * as React from 'react'; import { TinyColor, type ColorInput } from '@ctrl/tinycolor'; import { css } from '@emotion/react'; +import * as React from 'react'; import useSiteToken from '../../../hooks/useSiteToken'; interface ColorChunkProps { @@ -23,7 +23,7 @@ const useStyle = () => { display: inline-block; width: 6px; height: 6px; - border-radius: ${token.borderRadiusSM}px; + border-radius: 50%; margin-inline-end: 4px; border: 1px solid ${token.colorSplit}; `, diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index cb184fd1f2..2fad6b974b 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -17,12 +17,16 @@ const locales = { description: '描述', type: '类型', value: '默认值', + componentToken: '组件 Token', + globalToken: '全局 Token', }, en: { token: 'Token Name', description: 'Description', type: 'Type', value: 'Default Value', + componentToken: 'Component Token', + globalToken: 'Global Token', }, }; @@ -48,9 +52,10 @@ interface SubTokenTableProps { defaultOpen?: boolean; title: string; tokens: string[]; + component?: string; } -const SubTokenTable: React.FC = ({ defaultOpen, tokens, title }) => { +const SubTokenTable: React.FC = ({ defaultOpen, tokens, title, component }) => { const [, lang] = useLocale(locales); const { token } = useSiteToken(); const columns = useColumns(); @@ -64,22 +69,28 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl } const data = tokens - .sort((token1, token2) => { - const hasColor1 = token1.toLowerCase().includes('color'); - const hasColor2 = token2.toLowerCase().includes('color'); - - if (hasColor1 && !hasColor2) { - return -1; - } - - if (!hasColor1 && hasColor2) { - return 1; - } - - return token1 < token2 ? -1 : 1; - }) + .sort( + component + ? undefined + : (token1, token2) => { + const hasColor1 = token1.toLowerCase().includes('color'); + const hasColor2 = token2.toLowerCase().includes('color'); + + if (hasColor1 && !hasColor2) { + return -1; + } + + if (!hasColor1 && hasColor2) { + return 1; + } + + return token1 < token2 ? -1 : 1; + }, + ) .map((name) => { - const meta = tokenMeta[name]; + const meta = component + ? tokenMeta.components[component].find((item) => item.token === name) + : tokenMeta.global[name]; if (!meta) { return null; @@ -89,7 +100,7 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl name, desc: lang === 'cn' ? meta.desc : meta.descEn, type: meta.type, - value: defaultToken[name], + value: component ? tokenData[component].component[name] : defaultToken[name], }; }) .filter(Boolean); @@ -122,28 +133,31 @@ export interface ComponentTokenTableProps { } const ComponentTokenTable: React.FC = ({ component }) => { + const [locale] = useLocale(locales); const [mergedGlobalTokens] = useMemo(() => { const globalTokenSet = new Set(); - let componentTokens: Record = {}; component.split(',').forEach((comp) => { - const { global: globalTokens = [], component: singleComponentTokens = [] } = - tokenData[comp] || {}; + const { global: globalTokens = [] } = tokenData[comp] || {}; globalTokens.forEach((token: string) => { globalTokenSet.add(token); }); - - componentTokens = { - ...componentTokens, - ...singleComponentTokens, - }; }); - return [Array.from(globalTokenSet), componentTokens] as const; + return [Array.from(globalTokenSet)] as const; }, [component]); - return ; + return ( + <> + item.token)} + component={component} + /> + + + ); }; export default React.memo(ComponentTokenTable); diff --git a/.dumi/theme/builtins/TokenTable/index.tsx b/.dumi/theme/builtins/TokenTable/index.tsx index 3c2b17d685..e242f2f618 100644 --- a/.dumi/theme/builtins/TokenTable/index.tsx +++ b/.dumi/theme/builtins/TokenTable/index.tsx @@ -98,7 +98,7 @@ const TokenTable: FC = ({ type }) => { const data = React.useMemo( () => - Object.entries(tokenMeta) + Object.entries(tokenMeta.global) .filter(([, meta]) => meta.source === type) .map(([token, meta]) => ({ name: token, diff --git a/components/anchor/style/index.ts b/components/anchor/style/index.ts index cbaa7934a2..023f2c567c 100644 --- a/components/anchor/style/index.ts +++ b/components/anchor/style/index.ts @@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 链接横向内间距 + * @descEN Link horizontal padding + */ linkPaddingBlock: number; + /** + * @desc 链接纵向内间距 + * @descEN Link vertical padding + */ linkPaddingInlineStart: number; } diff --git a/components/avatar/style/index.ts b/components/avatar/style/index.ts index e096bf5ab0..66f4a95473 100644 --- a/components/avatar/style/index.ts +++ b/components/avatar/style/index.ts @@ -4,14 +4,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 头像背景色 + * @descEN Background color of Avatar + */ containerSize: number; + /** + * @desc 大号头像尺寸 + * @descEN Size of large Avatar + */ containerSizeLG: number; + /** + * @desc 小号头像尺寸 + * @descEN Size of small Avatar + */ containerSizeSM: number; + /** + * @desc 头像文字大小 + * @descEN Font size of Avatar + */ textFontSize: number; + /** + * @desc 大号头像文字大小 + * @descEN Font size of large Avatar + */ textFontSizeLG: number; + /** + * @desc 小号头像文字大小 + * @descEN Font size of small Avatar + */ textFontSizeSM: number; + /** + * @desc 头像组间距 + * @descEN Spacing between avatars in a group + */ groupSpace: number; + /** + * @desc 头像组重叠宽度 + * @descEN Overlapping of avatars in a group + */ groupOverlapping: number; + /** + * @desc 头像组边框颜色 + * @descEN Border color of avatars in a group + */ groupBorderColor: string; } diff --git a/components/breadcrumb/style/index.ts b/components/breadcrumb/style/index.ts index 1b1a32a41a..ad46f3710a 100644 --- a/components/breadcrumb/style/index.ts +++ b/components/breadcrumb/style/index.ts @@ -4,12 +4,40 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 面包屑项文字颜色 + * @descEN Text color of Breadcrumb item + */ itemColor: string; + /** + * @desc 图标大小 + * @descEN Icon size + */ iconFontSize: number; + /** + * @desc 链接文字颜色 + * @descEN Text color of link + */ linkColor: string; + /** + * @desc 链接文字悬浮颜色 + * @descEN Color of hovered link + */ linkHoverColor: string; + /** + * @desc 最后一项文字颜色 + * @descEN Text color of the last item + */ lastItemColor: string; + /** + * @desc 分隔符外间距 + * @descEN Margin of separator + */ separatorMargin: number; + /** + * @desc 分隔符颜色 + * @descEN Color of separator + */ separatorColor: string; } diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index dca20ff1d4..bacf33270c 100644 --- a/components/calendar/style/index.ts +++ b/components/calendar/style/index.ts @@ -8,11 +8,35 @@ import type { FullToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 年选择器宽度 + * @descEN Width of year select + */ yearControlWidth: number; + /** + * @desc 月选择器宽度 + * @descEN Width of month select + */ monthControlWidth: number; + /** + * @desc 迷你日历内容高度 + * @descEN Height of mini calendar content + */ miniContentHeight: number; + /** + * @desc 完整日历背景色 + * @descEN Background color of full calendar + */ fullBg: string; + /** + * @desc 完整日历面板背景色 + * @descEN Background color of full calendar panel + */ fullPanelBg: string; + /** + * @desc 日期项选中背景色 + * @descEN Background color of selected date item + */ itemActiveBg: string; } diff --git a/components/card/style/index.ts b/components/card/style/index.ts index 405206fe0f..07ddc30b35 100644 --- a/components/card/style/index.ts +++ b/components/card/style/index.ts @@ -5,14 +5,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 卡片头部背景色 + * @descEN Background color of card header + */ headerBg: string; + /** + * @desc 卡片头部文字大小 + * @descEN Font size of card header + */ headerFontSize: number; + /** + * @desc 小号卡片头部文字大小 + * @descEN Font size of small card header + */ headerFontSizeSM: number; + /** + * @desc 卡片头部高度 + * @descEN Height of card header + */ headerHeight: number; + /** + * @desc 小号卡片头部高度 + * @descEN Height of small card header + */ headerHeightSM: number; + /** + * @desc 操作区背景色 + * @descEN Background color of card actions + */ actionsBg: string; + /** + * @desc 操作区每一项的外间距 + * @descEN Margin of each item in card actions + */ actionsLiMargin: string; + /** + * @desc 内置标签页组件下间距 + * @descEN Margin bottom of tabs component + */ tabsMarginBottom: number; + /** + * @desc 额外区文字颜色 + * @descEN Text color of extra area + */ extraColor: string; } diff --git a/components/carousel/style/index.ts b/components/carousel/style/index.ts index aa1526f4ad..eb2ae4c92e 100644 --- a/components/carousel/style/index.ts +++ b/components/carousel/style/index.ts @@ -3,10 +3,22 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 指示点宽度 + * @descEN Width of indicator + */ dotWidth: number; + /** + * @desc 指示点高度 + * @descEN Height of indicator + */ dotHeight: number; /** @deprecated Use `dotActiveWidth` instead. */ dotWidthActive: number; + /** + * @desc 激活态指示点宽度 + * @descEN Width of active indicator + */ dotActiveWidth: number; } diff --git a/components/cascader/style/index.ts b/components/cascader/style/index.ts index 8649e70f55..319f2e6b1a 100644 --- a/components/cascader/style/index.ts +++ b/components/cascader/style/index.ts @@ -1,12 +1,24 @@ import { getStyle as getCheckboxStyle } from '../../checkbox/style'; -import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook } from '../../theme/internal'; import { textEllipsis } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; +import type { FullToken, GenerateStyle } from '../../theme/internal'; +import { genComponentStyleHook } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 选择器宽度 + * @descEN Width of Cascader + */ controlWidth: number; + /** + * @desc 选项宽度 + * @descEN Width of item + */ controlItemWidth: number; + /** + * @desc 下拉菜单高度 + * @descEN Height of dropdown + */ dropdownHeight: number; } diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 1fe1f228eb..9f100a61ee 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -23,8 +23,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; export interface ComponentToken { + /** + * @desc 预设区域宽度 + * @descEN Width of preset area + */ presetsWidth: number; + /** + * @desc 预设区域最大宽度 + * @descEN Max width of preset area + */ presetsMaxWidth: number; + /** + * @desc 弹窗 z-index + * @descEN z-index of popup + */ zIndexPopup: number; } diff --git a/components/descriptions/style/index.ts b/components/descriptions/style/index.ts index a13651bff2..5d6bbc35de 100644 --- a/components/descriptions/style/index.ts +++ b/components/descriptions/style/index.ts @@ -6,11 +6,35 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { // Component token here + /** + * @desc 标签背景色 + * @descEN Background color of label + */ labelBg: string; + /** + * @desc 标题下间距 + * @descEN Bottom margin of title + */ titleMarginBottom: number; + /** + * @desc 子项下间距 + * @descEN Bottom padding of item + */ itemPaddingBottom: number; + /** + * @desc 分号右间距 + * @descEN Right margin of colon + */ colonMarginRight: number; + /** + * @desc 分号左间距 + * @descEN Left margin of colon + */ colonMarginLeft: number; + /** + * @desc 额外区域文字颜色 + * @descEN Text color of extra area + */ extraColor: string; } diff --git a/components/drawer/style/index.ts b/components/drawer/style/index.ts index 88f9a3ce94..0b5d7c60c0 100644 --- a/components/drawer/style/index.ts +++ b/components/drawer/style/index.ts @@ -3,8 +3,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genMotionStyle from './motion'; export interface ComponentToken { + /** + * @desc 弹窗 z-index + * @descEN z-index of drawer + */ zIndexPopup: number; + /** + * @desc 底部区域横向内间距 + * @descEN Horizontal padding of footer + */ footerPaddingBlock: number; + /** + * @desc 底部区域纵向内间距 + * @descEN Vertical padding of footer + */ footerPaddingInline: number; } diff --git a/components/dropdown/style/index.ts b/components/dropdown/style/index.ts index 950e6f5d97..daf1a57ae3 100644 --- a/components/dropdown/style/index.ts +++ b/components/dropdown/style/index.ts @@ -14,6 +14,10 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genStatusStyle from './status'; export interface ComponentToken { + /** + * @desc 下拉菜单 z-index + * @descEN z-index of dropdown + */ zIndexPopup: number; } diff --git a/components/image/style/index.ts b/components/image/style/index.ts index c5c2eff4e2..0397b62ce8 100644 --- a/components/image/style/index.ts +++ b/components/image/style/index.ts @@ -7,9 +7,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 预览浮层 z-index + * @descEN z-index of preview popup + */ zIndexPopup: number; + /** + * @desc 预览操作图标大小 + * @descEN Size of preview operation icon + */ previewOperationSize: number; + /** + * @desc 预览操作图标颜色 + * @descEN Color of preview operation icon + */ previewOperationColor: string; + /** + * @desc 预览操作图标禁用颜色 + * @descEN Disabled color of preview operation icon + */ previewOperationColorDisabled: string; } diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 32b3c884e4..6ff1daf988 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -15,10 +15,26 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 输入框宽度 + * @descEN Width of input + */ controlWidth: number; + /** + * @desc 操作按钮宽度 + * @descEN Width of control button + */ handleWidth: number; + /** + * @desc 操作按钮图标大小 + * @descEN Icon size of control button + */ handleFontSize: number; - /** Default `auto`. Set `true` will always show the handle */ + /** + * Default `auto`. Set `true` will always show the handle + * @desc 操作按钮可见性 + * @descEN Handle visible + */ handleVisible: 'auto' | true; } diff --git a/components/list/style/index.ts b/components/list/style/index.ts index e04db94f3a..693c7154f4 100644 --- a/components/list/style/index.ts +++ b/components/list/style/index.ts @@ -5,16 +5,60 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 内容宽度 + * @descEN Width of content + */ contentWidth: number; + /** + * @desc 大号列表项内间距 + * @descEN Padding of large item + */ itemPaddingLG: string; + /** + * @desc 小号列表项内间距 + * @descEN Padding of small item + */ itemPaddingSM: string; + /** + * @desc 列表项内间距 + * @descEN Padding of item + */ itemPadding: string; + /** + * @desc 头部区域背景色 + * @descEN Background color of header + */ headerBg: string; + /** + * @desc 底部区域背景色 + * @descEN Background color of footer + */ footerBg: string; + /** + * @desc 空文本内边距 + * @descEN Padding of empty text + */ emptyTextPadding: CSSProperties['padding']; + /** + * @desc Meta 下间距 + * @descEN Margin bottom of meta + */ metaMarginBottom: CSSProperties['marginBottom']; + /** + * @desc 头像右间距 + * @descEN Right margin of avatar + */ avatarMarginRight: CSSProperties['marginRight']; + /** + * @desc 标题下间距 + * @descEN Margin bottom of title + */ titleMarginBottom: CSSProperties['marginBottom']; + /** + * @desc 描述文字大小 + * @descEN Font size of description + */ descriptionFontSize: number; } diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts index 3eb06a9246..b7e8adfeb1 100644 --- a/components/mentions/style/index.ts +++ b/components/mentions/style/index.ts @@ -7,13 +7,25 @@ import { genStatusStyle, initInputToken, } from '../../input/style'; +import { resetComponent, textEllipsis } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook } from '../../theme/internal'; -import { resetComponent, textEllipsis } from '../../style'; export interface ComponentToken { + /** + * @desc 弹层 z-index + * @descEN z-index of popup + */ zIndexPopup: number; + /** + * @desc 弹层高度 + * @descEN Height of popup + */ dropdownHeight: number; + /** + * @desc 菜单项高度 + * @descEN Height of menu item + */ controlItemWidth: number; } diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx index eb07308344..c95cd21644 100644 --- a/components/menu/style/index.tsx +++ b/components/menu/style/index.tsx @@ -11,112 +11,223 @@ import getVerticalStyle from './vertical'; /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { + /** + * @desc 弹出菜单的宽度 + * @descEN Width of popup menu + */ dropdownWidth: number; + /** + * @desc 弹出菜单的 z-index + * @descEN z-index of popup menu + */ zIndexPopup: number; // Group /** @deprecated Use `groupTitleColor` instead */ colorGroupTitle: string; + /** + * @desc 分组标题文字颜色 + * @descEN Color of group title text + */ groupTitleColor: string; // radius /** @deprecated Use `itemBorderRadius` instead */ radiusItem: number; + /** + * @desc 菜单项的圆角 + * @descEN Radius of menu item + */ itemBorderRadius: number; /** @deprecated Use `subMenuItemBorderRadius` instead */ radiusSubMenuItem: number; + /** + * @desc 子菜单项的圆角 + * @descEN Radius of sub-menu item + */ subMenuItemBorderRadius: number; // Item Text // > Default /** @deprecated Use `itemColor` instead */ colorItemText: string; + /** + * @desc 菜单项文字颜色 + * @descEN Color of menu item text + */ itemColor: string; /** @deprecated Use `itemHoverColor` instead */ colorItemTextHover: string; + /** + * @desc 菜单项文字悬浮颜色 + * @descEN Hover color of menu item text + */ itemHoverColor: string; /** @deprecated Use `horizontalItemHoverColor` instead */ colorItemTextHoverHorizontal: string; + /** + * @desc 水平菜单项文字悬浮颜色 + * @descEN Hover color of horizontal menu item text + */ horizontalItemHoverColor: string; /** @deprecated Use `itemSelectedColor` instead */ colorItemTextSelected: string; + /** + * @desc 菜单项文字选中颜色 + * @descEN Color of selected menu item text + */ itemSelectedColor: string; /** @deprecated Use `horizontalItemSelectedColor` instead */ colorItemTextSelectedHorizontal: string; + /** + * @desc 水平菜单项文字选中颜色 + * @descEN Color of selected horizontal menu item text + */ horizontalItemSelectedColor: string; // > Disabled /** @deprecated Use `itemDisabledColor` instead */ colorItemTextDisabled: string; + /** + * @desc 菜单项文字禁用颜色 + * @descEN Color of disabled menu item text + */ itemDisabledColor: string; // > Danger /** @deprecated Use `dangerItemColor` instead */ colorDangerItemText: string; + /** + * @desc 危险菜单项文字颜色 + * @descEN Color of danger menu item text + */ dangerItemColor: string; /** @deprecated Use `dangerItemHoverColor` instead */ colorDangerItemTextHover: string; + /** + * @desc 危险菜单项文字悬浮颜色 + * @descEN Hover color of danger menu item text + */ dangerItemHoverColor: string; /** @deprecated Use `dangerItemSelectedColor` instead */ colorDangerItemTextSelected: string; + /** + * @desc 危险菜单项文字选中颜色 + * @descEN Color of selected danger menu item text + */ dangerItemSelectedColor: string; /** @deprecated Use `dangerItemActiveBg` instead */ colorDangerItemBgActive: string; + /** + * @desc 危险菜单项文字激活颜色 + * @descEN Color of active danger menu item text + */ dangerItemActiveBg: string; /** @deprecated Use `dangerItemSelectedBg` instead */ colorDangerItemBgSelected: string; + /** + * @desc 危险菜单项文字选中颜色 + * @descEN Color of selected danger menu item text + */ dangerItemSelectedBg: string; // Item Bg /** @deprecated Use `itemBg` instead */ colorItemBg: string; + /** + * @desc 菜单项背景色 + */ itemBg: string; /** @deprecated Use `itemHoverBg` instead */ colorItemBgHover: string; + /** + * @desc 菜单项悬浮态背景色 + * @descEN Background color of menu item when hover + */ itemHoverBg: string; /** @deprecated Use `subMenuItemBg` instead */ colorSubItemBg: string; + /** + * @desc 子菜单项背景色 + * @descEN Background color of sub-menu item + */ subMenuItemBg: string; // > Default /** @deprecated Use `itemActiveBg` instead */ colorItemBgActive: string; + /** + * @desc 菜单项激活态背景色 + * @descEN Background color of menu item when active + */ itemActiveBg: string; /** @deprecated Use `itemSelectedBg` instead */ colorItemBgSelected: string; + /** + * @desc 菜单项选中态背景色 + * @descEN Background color of menu item when selected + */ itemSelectedBg: string; /** @deprecated Use `horizontalItemSelectedBg` instead */ colorItemBgSelectedHorizontal: string; + /** + * @desc 水平菜单项选中态背景色 + * @descEN Background color of horizontal menu item when selected + */ horizontalItemSelectedBg: string; // Ink Bar /** @deprecated Use `activeBarWidth` instead */ colorActiveBarWidth: number; + /** + * @desc 菜单项指示条宽度 + * @descEN Width of menu item active bar + */ activeBarWidth: number; /** @deprecated Use `activeBarHeight` instead */ colorActiveBarHeight: number; + /** + * @desc 菜单项指示条高度 + * @descEN Height of menu item active bar + */ activeBarHeight: number; /** @deprecated Use `activeBarBorderWidth` instead */ colorActiveBarBorderSize: number; + /** + * @desc 菜单项指示条边框宽度 + * @descEN Border width of menu item active bar + */ activeBarBorderWidth: number; + /** + * @desc 菜单项横向外间距 + * @descEN Horizontal margin of menu item + */ itemMarginInline: number; + /** + * @desc 横向菜单项横悬浮态背景色 + * @descEN Background color of horizontal menu item when hover + */ horizontalItemHoverBg: string; + /** + * @desc 横向菜单项圆角 + * @descEN Border radius of horizontal menu item + */ horizontalItemBorderRadius: number; } diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx index 90e4691ca9..80cee4cbc5 100644 --- a/components/message/style/index.tsx +++ b/components/message/style/index.tsx @@ -9,8 +9,20 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { // Component token here + /** + * @desc 提示框 z-index + * @descEN z-index of Message + */ zIndexPopup: number; + /** + * @desc 提示框背景色 + * @descEN Background color of Message + */ contentBg: string; + /** + * @desc 提示框内边距 + * @descEN Padding of Message + */ contentPadding: CSSProperties['padding']; } diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index d2efd10671..77e007673b 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -8,11 +8,35 @@ import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook' /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { // Component token here + /** + * @desc 顶部背景色 + * @descEN Background color of header + */ headerBg: string; + /** + * @desc 标题行高 + * @descEN Line height of title + */ titleLineHeight: number; + /** + * @desc 标题字体大小 + * @descEN Font size of title + */ titleFontSize: number; + /** + * @desc 标题字体颜色 + * @descEN Font color of title + */ titleColor: string; + /** + * @desc 内容区域背景色 + * @descEN Background color of content + */ contentBg: string; + /** + * @desc 底部区域背景色 + * @descEN Background color of footer + */ footerBg: string; } diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx index c34335f8c6..c14d08a802 100644 --- a/components/notification/style/index.tsx +++ b/components/notification/style/index.tsx @@ -7,7 +7,15 @@ import genNotificationPlacementStyle from './placement'; /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { + /** + * @desc 提醒框 z-index + * @descEN z-index of Notification + */ zIndexPopup: number; + /** + * @desc 提醒框宽度 + * @descEN Width of Notification + */ width: number; } diff --git a/components/pagination/style/index.ts b/components/pagination/style/index.ts index de77900139..310a30b045 100644 --- a/components/pagination/style/index.ts +++ b/components/pagination/style/index.ts @@ -10,14 +10,50 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 页码选项背景色 + * @descEN Background color of Pagination item + */ itemBg: string; + /** + * @desc 页码尺寸 + * @descEN Size of Pagination item + */ itemSize: number; + /** + * @desc 页码激活态背景色 + * @descEN Background color of active Pagination item + */ itemActiveBg: string; + /** + * @desc 小号页码尺寸 + * @descEN Size of small Pagination item + */ itemSizeSM: number; + /** + * @desc 页码链接背景色 + * @descEN Background color of Pagination item link + */ itemLinkBg: string; + /** + * @desc 页码激活态禁用状态背景色 + * @descEN Background color of disabled active Pagination item + */ itemActiveBgDisabled: string; + /** + * @desc 页码激活态禁用状态文字颜色 + * @descEN Text color of disabled active Pagination item + */ itemActiveColorDisabled: string; + /** + * @desc 输入框背景色 + * @descEN Background color of input + */ itemInputBg: string; + /** + * @desc 每页展示数量选择器 top + * @descEN Top of Pagination size changer + */ miniOptionsSizeChangerTop: number; } diff --git a/components/popconfirm/style/index.tsx b/components/popconfirm/style/index.tsx index 11a5c3ae5a..374f661180 100644 --- a/components/popconfirm/style/index.tsx +++ b/components/popconfirm/style/index.tsx @@ -2,6 +2,10 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 确认框 z-index + * @descEN z-index of Popconfirm + */ zIndexPopup: number; } diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index 54debb4737..8502f5af14 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -5,8 +5,20 @@ import type { FullToken, GenerateStyle, PresetColorType } from '../../theme/inte import { PresetColors, genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 气泡卡片宽度 + * @descEN Width of Popover + */ width: number; + /** + * @desc 气泡卡片最小宽度 + * @descEN Min width of Popover + */ minWidth: number; + /** + * @desc 气泡卡片 z-index + * @descEN z-index of Popover + */ zIndexPopup: number; } diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 1261032d96..57f82ce44e 100644 --- a/components/radio/style/index.tsx +++ b/components/radio/style/index.tsx @@ -6,18 +6,62 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; // ============================== Tokens ============================== export interface ComponentToken { // Radio + /** + * @desc 单选框大小 + * @descEN Radio size + */ radioSize: number; + /** + * @desc 单选框圆点大小 + * @descEN Size of Radio dot + */ dotSize: number; + /** + * @desc 单选框圆点禁用颜色 + * @descEN Color of disabled Radio dot + */ dotColorDisabled: string; // Radio buttons + /** + * @desc 单选框按钮背景色 + * @descEN Background color of Radio button + */ buttonBg: string; + /** + * @desc 单选框按钮选中背景色 + * @descEN Background color of checked Radio button + */ buttonCheckedBg: string; + /** + * @desc 单选框按钮文本颜色 + * @descEN Color of Radio button text + */ buttonColor: string; + /** + * @desc 单选框按钮横向内间距 + * @descEN Horizontal padding of Radio button + */ buttonPaddingInline: number; + /** + * @desc 单选框按钮选中并禁用时的背景色 + * @descEN Background color of checked and disabled Radio button + */ buttonCheckedBgDisabled: string; + /** + * @desc 单选框按钮选中并禁用时的文本颜色 + * @descEN Color of checked and disabled Radio button text + */ buttonCheckedColorDisabled: string; + /** + * @desc 单选框实色按钮选中时的文本颜色 + * @descEN Color of checked solid Radio button text + */ buttonSolidCheckedColor: string; + /** + * @desc 单选框右间距 + * @descEN Margin right of Radio button + */ wrapperMarginInlineEnd: number; } diff --git a/components/rate/style/index.tsx b/components/rate/style/index.tsx index 7fd439ed24..fb143a0581 100644 --- a/components/rate/style/index.tsx +++ b/components/rate/style/index.tsx @@ -4,9 +4,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export type ComponentToken = { + /** + * @desc 星星颜色 + * @descEN Star color + */ starColor: string; + /** + * @desc 星星大小 + * @descEN Star size + */ starSize: number; + /** + * @desc 星星悬浮时的缩放 + * @descEN Scale of star when hover + */ starHoverScale: CSSObject['transform']; + /** + * @desc 星星背景色 + * @descEN Star background color + */ starBg: string; }; diff --git a/components/result/style/index.tsx b/components/result/style/index.tsx index 156bdb3d76..abe6bd564f 100644 --- a/components/result/style/index.tsx +++ b/components/result/style/index.tsx @@ -4,9 +4,25 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 标题字体大小 + * @descEN Title font size + */ titleFontSize: number; + /** + * @desc 副标题字体大小 + * @descEN Subtitle font size + */ subtitleFontSize: number; + /** + * @desc 图标大小 + * @descEN Icon size + */ iconFontSize: number; + /** + * @desc 额外区域外间距 + * @descEN Margin of extra area + */ extraMargin: CSSProperties['margin']; } diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.tsx index 210aeaf5cf..513646984d 100644 --- a/components/segmented/style/index.tsx +++ b/components/segmented/style/index.tsx @@ -4,10 +4,30 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 选项文本颜色 + * @descEN Text color of item + */ itemColor: string; + /** + * @desc 选项悬浮态文本颜色 + * @descEN Text color of item when hover + */ itemHoverColor: string; + /** + * @desc 选项悬浮态背景颜色 + * @descEN Background color of item when hover + */ itemHoverBg: string; + /** + * @desc 选项激活态背景颜色 + * @descEN Background color of item when active + */ itemActiveBg: string; + /** + * @desc 选项选中时背景颜色 + * @descEN Background color of item when selected + */ itemSelectedBg: string; } diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 45bb9c94ba..1c7b683fa0 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -8,6 +8,10 @@ import genMultipleStyle from './multiple'; import genSingleStyle from './single'; export interface ComponentToken { + /** + * @desc 下拉菜单 z-index + * @descEN z-index of dropdown + */ zIndexPopup: number; } diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx index 0cca735dd2..b7d50877f3 100644 --- a/components/skeleton/style/index.tsx +++ b/components/skeleton/style/index.tsx @@ -8,11 +8,35 @@ export type ComponentToken = { color: string; /** @deprecated use gradientToColor instead. */ colorGradientEnd: string; + /** + * @desc 渐变色起点颜色 + * @descEN Start color of gradient + */ gradientFromColor: string; + /** + * @desc 渐变色终点颜色 + * @descEN End color of gradient + */ gradientToColor: string; + /** + * @desc 标题骨架屏高度 + * @descEN Height of title skeleton + */ titleHeight: number; + /** + * @desc 骨架屏圆角 + * @descEN Border radius of skeleton + */ blockRadius: number; + /** + * @desc 段落骨架屏上间距 + * @descEN Margin top of paragraph skeleton + */ paragraphMarginTop: number; + /** + * @desc 段落骨架屏单行高度 + * @descEN Line height of paragraph skeleton + */ paragraphLiHeight: number; }; diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index 93a1317b02..d166ff3673 100644 --- a/components/slider/style/index.tsx +++ b/components/slider/style/index.tsx @@ -12,12 +12,40 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; // horizontal: full (水平时，水平方向命名为 full) export interface ComponentToken { + /** + * @desc 滑动输入高度 + * @descEN Height of slider + */ controlSize: number; + /** + * @desc 轨道高度 + * @descEN Height of rail + */ railSize: number; + /** + * @desc 滑块尺寸 + * @descEN Size of handle + */ handleSize: number; + /** + * @desc 滑块尺寸（悬浮态） + * @descEN Size of handle when hover + */ handleSizeHover: number; + /** + * @desc 滑块边框宽度 + * @descEN Border width of handle + */ handleLineWidth: number; + /** + * @desc 滑块边框宽度（悬浮态） + * @descEN Border width of handle when hover + */ handleLineWidthHover: number; + /** + * @desc 滑块圆点尺寸 + * @descEN Size of dot + */ dotSize: number; } diff --git a/components/spin/style/index.tsx b/components/spin/style/index.tsx index 20848a8703..28b73f9f64 100644 --- a/components/spin/style/index.tsx +++ b/components/spin/style/index.tsx @@ -1,10 +1,14 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { Keyframes } from '@ant-design/cssinjs'; +import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -import { resetComponent } from '../../style'; export interface ComponentToken { + /** + * @desc 内容区域高度 + * @descEN Height of content area + */ contentHeight: number; } diff --git a/components/statistic/style/index.tsx b/components/statistic/style/index.tsx index b24438f20f..348601cd62 100644 --- a/components/statistic/style/index.tsx +++ b/components/statistic/style/index.tsx @@ -4,7 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 标题字体大小 + * @descEN Title font size + */ titleFontSize: number; + /** + * @desc 内容字体大小 + * @descEN Content font size + */ contentFontSize: number; } diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index 2dfad71726..ccd1658c71 100644 --- a/components/steps/style/index.tsx +++ b/components/steps/style/index.tsx @@ -14,18 +14,70 @@ import genStepsSmallStyle from './small'; import genStepsVerticalStyle from './vertical'; export interface ComponentToken { + /** + * @desc 描述区域最大宽度 + * @descEN Max width of description area + */ descriptionMaxWidth: number; + /** + * @desc 自定义图标容器尺寸 + * @descEN Size of custom icon container + */ customIconSize: number; + /** + * @desc 自定义图标 top + * @descEN Top of custom icon + */ customIconTop: number; + /** + * @desc 自定义图标大小 + * @descEN Font size of custom icon + */ customIconFontSize: number; + /** + * @desc 图标容器尺寸 + * @descEN Size of icon container + */ iconSize: number; + /** + * @desc 图标 top + * @descEN Top of icon + */ iconTop: number; + /** + * @desc 图标大小 + * @descEN Size of icon + */ iconFontSize: number; + /** + * @desc 点状步骤点大小 + * @descEN Size of dot + */ dotSize: number; + /** + * @desc 点状步骤点当前大小 + * @descEN Current size of dot + */ dotCurrentSize: number; + /** + * @desc 可跳转步骤条箭头颜色 + * @descEN Color of arrow in nav + */ navArrowColor: string; + /** + * @desc 可跳转步骤条内容最大宽度 + * @descEN Max width of nav content + */ navContentMaxWidth: CSSProperties['maxWidth']; + /** + * @desc 小号步骤条图标大小 + * @descEN Size of small steps icon + */ iconSizeSM: number; + /** + * @desc 标题行高 + * @descEN Line height of title + */ titleLineHeight: number; } diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index c41a6e4635..c010b20f45 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -5,28 +5,120 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genMotionStyle from './motion'; export interface ComponentToken { + /** + * @desc 下拉菜单 z-index + * @descEN z-index of dropdown menu + */ zIndexPopup: number; + /** + * @desc 卡片标签页背景色 + * @descEN Background color of card tab + */ cardBg: string; + /** + * @desc 卡片标签页高度 + * @descEN Height of card tab + */ cardHeight: number; + /** + * @desc 卡片标签页内间距 + * @descEN Padding of card tab + */ cardPadding: string; + /** + * @desc 小号卡片标签页内间距 + * @descEN Padding of small card tab + */ cardPaddingSM: string; + /** + * @desc 大号卡片标签页内间距 + * @descEN Padding of large card tab + */ cardPaddingLG: string; + /** + * @desc 标齐页标题文本大小 + * @descEN Font size of title + */ titleFontSize: number; + /** + * @desc 大号标签页标题文本大小 + * @descEN Font size of large title + */ titleFontSizeLG: number; + /** + * @desc 小号标签页标题文本大小 + * @descEN Font size of small title + */ titleFontSizeSM: number; + /** + * @desc 指示条颜色 + * @descEN Color of indicator + */ inkBarColor: string; + /** + * @desc 横向标签页外间距 + * @descEN Horizontal margin of horizontal tab + */ horizontalMargin: string; + /** + * @desc 横向标签页标签间距 + * @descEN Horizontal gutter of horizontal tab + */ horizontalItemGutter: number; + /** + * @desc 横向标签页标签外间距 + * @descEN Horizontal margin of horizontal tab item + */ horizontalItemMargin: string; + /** + * @desc 横向标签页标签外间距（RTL） + * @descEN Horizontal margin of horizontal tab item (RTL) + */ horizontalItemMarginRTL: string; + /** + * @desc 横向标签页标签内间距 + * @descEN Horizontal padding of horizontal tab item + */ horizontalItemPadding: string; + /** + * @desc 大号横向标签页标签内间距 + * @descEN Horizontal padding of large horizontal tab item + */ horizontalItemPaddingLG: string; + /** + * @desc 小号横向标签页标签内间距 + * @descEN Horizontal padding of small horizontal tab item + */ horizontalItemPaddingSM: string; + /** + * @desc 纵向标签页标签内间距 + * @descEN Vertical padding of vertical tab item + */ verticalItemPadding: string; + /** + * @desc 纵向标签页标签外间距 + * @descEN Vertical margin of vertical tab item + */ verticalItemMargin: string; + /** + * @desc 标签激活态文本颜色 + * @descEN Text color of active tab + */ itemActiveColor: string; + /** + * @desc 标签悬浮态文本颜色 + * @descEN Text color of hover tab + */ itemHoverColor: string; + /** + * @desc 标签选中态文本颜色 + * @descEN Text color of selected tab + */ itemSelectedColor: string; + /** + * @desc 卡片标签间距 + * @descEN Gutter of card tab + */ cardGutter: number; } diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts index c6b4674c3d..9a0e55b768 100644 --- a/components/tag/style/index.ts +++ b/components/tag/style/index.ts @@ -6,7 +6,15 @@ import type { FullToken } from '../../theme/internal'; import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 默认背景色 + * @descEN Default background color + */ defaultBg: string; + /** + * @desc 默认文字颜色 + * @descEN Default text color + */ defaultColor: string; } diff --git a/components/timeline/style/index.ts b/components/timeline/style/index.ts index a0f3d25cb6..e4f73e6922 100644 --- a/components/timeline/style/index.ts +++ b/components/timeline/style/index.ts @@ -4,10 +4,30 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 轨迹颜色 + * @descEN Line color + */ tailColor: string; + /** + * @desc 轨迹宽度 + * @descEN Line width + */ tailWidth: number; + /** + * @desc 节点边框宽度 + * @descEN Border width of node + */ dotBorderWidth: number; + /** + * @desc 节点背景色 + * @descEN Background color of node + */ dotBg: string; + /** + * @desc 时间项下间距 + * @descEN Bottom padding of item + */ itemPaddingBottom: number; } diff --git a/components/tooltip/style/index.ts b/components/tooltip/style/index.ts index 86a554ed49..466b1b5030 100644 --- a/components/tooltip/style/index.ts +++ b/components/tooltip/style/index.ts @@ -5,7 +5,12 @@ import type { FullToken, GenerateStyle, UseComponentStyleResult } from '../../th import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 文字提示 z-index + * @descEN z-index of tooltip + */ zIndexPopup: number; + /** @deprecated */ colorBgDefault: string; } diff --git a/components/transfer/style/index.ts b/components/transfer/style/index.ts index 96f18573ad..54e01e3e01 100644 --- a/components/transfer/style/index.ts +++ b/components/transfer/style/index.ts @@ -4,11 +4,35 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; export interface ComponentToken { + /** + * @desc 列表宽度 + * @descEN Width of list + */ listWidth: number; + /** + * @desc 大号列表宽度 + * @descEN Width of large list + */ listWidthLG: number; + /** + * @desc 列表高度 + * @descEN Height of list + */ listHeight: number; + /** + * @desc 列表项高度 + * @descEN Height of list item + */ itemHeight: number; + /** + * @desc 列表项纵向内边距 + * @descEN Vertical padding of list item + */ itemPaddingBlock: number; + /** + * @desc 顶部高度 + * @descEN Height of header + */ headerHeight: number; } diff --git a/components/typography/style/index.ts b/components/typography/style/index.ts index 56d7c18f50..d159ae9fcf 100644 --- a/components/typography/style/index.ts +++ b/components/typography/style/index.ts @@ -12,9 +12,16 @@ import { /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { + /** + * @desc 标题上间距 + * @descEN Margin top of title + */ titleMarginTop: number | string; + /** + * @desc 标题下间距 + * @descEN Margin bottom of title + */ titleMarginBottom: number | string; - fontWeightStrong: number; } export type TypographyToken = FullToken<'Typography'>; @@ -126,9 +133,8 @@ const genTypographyStyle: GenerateStyle = (token) => { export default genComponentStyleHook( 'Typography', (token) => [genTypographyStyle(token)], - (token) => ({ + () => ({ titleMarginTop: '1.2em', titleMarginBottom: '0.5em', - fontWeightStrong: token.fontWeightStrong, }), ); diff --git a/components/upload/style/index.ts b/components/upload/style/index.ts index 9dcfb42954..e10bf12334 100644 --- a/components/upload/style/index.ts +++ b/components/upload/style/index.ts @@ -9,6 +9,10 @@ import { genPictureCardStyle, genPictureStyle } from './picture'; import genRtlStyle from './rtl'; export interface ComponentToken { + /** + * @desc 操作按扭颜色 + * @descEN Action button color + */ actionsColor: string; } diff --git a/scripts/generate-token-meta.ts b/scripts/generate-token-meta.ts index 37950d8e2c..39dca5c685 100644 --- a/scripts/generate-token-meta.ts +++ b/scripts/generate-token-meta.ts @@ -2,11 +2,20 @@ import fs from 'fs-extra'; import type { DeclarationReflection } from 'typedoc'; import { Application, TSConfigReader, TypeDocReader } from 'typedoc'; +type TokenMeta = { + seed: ReturnType; + map: ReturnType; + alias: ReturnType; + components: Record>; +}; + function getTokenList(list?: DeclarationReflection[], source?: string) { return (list || []) .filter( (item) => - !item.comment?.blockTags.some((tag) => tag.tag === '@internal' || tag.tag === '@private'), + !item.comment?.blockTags.some( + (tag) => tag.tag === '@internal' || tag.tag === '@private' || tag.tag === '@deprecated', + ), ) .map((item) => ({ source, @@ -40,7 +49,8 @@ const main = () => { app.bootstrap({ // typedoc options here - entryPoints: ['components/theme/interface/index.ts'], + entryPoints: ['components/theme/interface/index.ts', 'components/*/style/index.{ts,tsx}'], + skipErrorChecking: true, }); const project = app.convert(); @@ -48,49 +58,74 @@ const main = () => { if (project) { // Project may not have converted correctly const output = 'components/version/token-meta.json'; - const tokenMeta: Record> = {}; - let presetColors: string[] = []; - project.children?.forEach((type) => { - if (type.name === 'SeedToken') { - tokenMeta.seed = getTokenList(type.children, 'seed'); - } else if (type.name === 'MapToken') { - tokenMeta.map = getTokenList(type.children, 'map'); - } else if (type.name === 'AliasToken') { - tokenMeta.alias = getTokenList(type.children, 'alias'); - } else if (type.name === 'PresetColors') { - presetColors = (type?.type as any)?.target?.elements?.map((item: any) => item.value); - } - }); + const tokenMeta: TokenMeta = { + seed: [], + map: [], + alias: [], + components: {}, + }; - // Exclude preset colors - tokenMeta.seed = tokenMeta.seed.filter( - (item) => !presetColors.some((color) => item.token.startsWith(color)), - ); - tokenMeta.map = tokenMeta.map.filter( - (item) => !presetColors.some((color) => item.token.startsWith(color)), - ); - tokenMeta.alias = tokenMeta.alias.filter( - (item) => !presetColors.some((color) => item.token.startsWith(color)), - ); + // eslint-disable-next-line no-restricted-syntax + project?.children?.forEach((file) => { + // Global Token + if (file.name === 'theme/interface') { + let presetColors: string[] = []; + file.children?.forEach((type) => { + if (type.name === 'SeedToken') { + tokenMeta.seed = getTokenList(type.children, 'seed'); + } else if (type.name === 'MapToken') { + tokenMeta.map = getTokenList(type.children, 'map'); + } else if (type.name === 'AliasToken') { + tokenMeta.alias = getTokenList(type.children, 'alias'); + } else if (type.name === 'PresetColors') { + presetColors = (type?.type as any)?.target?.elements?.map((item: any) => item.value); + } + }); - tokenMeta.alias = tokenMeta.alias.filter( - (item) => !tokenMeta.map.some((mapItem) => mapItem.token === item.token), - ); - tokenMeta.map = tokenMeta.map.filter( - (item) => !tokenMeta.seed.some((seedItem) => seedItem.token === item.token), - ); + // Exclude preset colors + tokenMeta.seed = tokenMeta.seed.filter( + (item) => !presetColors.some((color) => item.token.startsWith(color)), + ); + tokenMeta.map = tokenMeta.map.filter( + (item) => !presetColors.some((color) => item.token.startsWith(color)), + ); + tokenMeta.alias = tokenMeta.alias.filter( + (item) => !presetColors.some((color) => item.token.startsWith(color)), + ); + + tokenMeta.alias = tokenMeta.alias.filter( + (item) => !tokenMeta.map.some((mapItem) => mapItem.token === item.token), + ); + tokenMeta.map = tokenMeta.map.filter( + (item) => !tokenMeta.seed.some((seedItem) => seedItem.token === item.token), + ); + } else { + const component = file.name + .slice(0, file.name.indexOf('/')) + .replace(/(^(.)|-(.))/g, (match) => match.replace('-', '').toUpperCase()); + const componentToken = file.children?.find((item) => item.name === `ComponentToken`); + if (componentToken) { + tokenMeta.components[component] = getTokenList(componentToken.children, component); + } + } + }); const finalMeta = Object.entries(tokenMeta).reduce((acc, [key, value]) => { - value.forEach((item) => { - acc[item.token] = { - name: item.name, - nameEn: item.nameEn, - desc: item.desc, - descEn: item.descEn, - type: item.type, - source: key, - }; - }); + if (key !== 'components') { + (value as any[]).forEach((item) => { + acc.global = acc.global || {}; + acc.global[item.token] = { + name: item.name, + nameEn: item.nameEn, + desc: item.desc, + descEn: item.descEn, + type: item.type, + source: key, + }; + }); + } else { + acc.components = value; + } return acc; }, {} as any); From f1f5fe3846f4eb1acc0fba7090cac7acd4cbc901 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Wed, 5 Jul 2023 18:00:46 +0800 Subject: [PATCH 05/80] feat: config-provider support skeleton className and style properties (#43062) --- .../config-provider/__tests__/style.test.tsx | 29 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + components/skeleton/Skeleton.tsx | 7 +++-- 6 files changed, 39 insertions(+), 3 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index d729ea0718..2de3eb127f 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -24,6 +24,7 @@ import Pagination from '../../pagination'; import Radio from '../../radio'; import Rate from '../../rate'; import Result from '../../result'; +import Skeleton from '../../skeleton'; import Segmented from '../../segmented'; import Select from '../../select'; import Slider from '../../slider'; @@ -202,6 +203,34 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + it('Should Skeleton className works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-skeleton')).toHaveClass('test-class'); + }); + + it('Should Skeleton style works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-skeleton')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Spin className & style works', () => { const { container } = render( = (props) => { checkbox, descriptions, divider, + skeleton, steps, image, layout, @@ -351,6 +353,7 @@ const ProviderChildren: React.FC = (props) => { checkbox, descriptions, divider, + skeleton, steps, image, input, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 5726f88550..807e9d4762 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -127,6 +127,7 @@ const { | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | rate | 设置 Rate 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| skeleton | 设置 Skeleton 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | segmented | 设置 Segmented 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | select | 设置 Select 组件的通用属性 | { className?: string, showSearch?: boolean, style?: React.CSSProperties } | - | 5.7.0 | | slider | 设置 Slider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/skeleton/Skeleton.tsx b/components/skeleton/Skeleton.tsx index d799d39374..ae1ee0f4c2 100644 --- a/components/skeleton/Skeleton.tsx +++ b/components/skeleton/Skeleton.tsx @@ -4,10 +4,10 @@ import { ConfigContext } from '../config-provider'; import type { AvatarProps } from './Avatar'; import SkeletonAvatar from './Avatar'; import SkeletonButton from './Button'; -import SkeletonNode from './Node'; import Element from './Element'; import SkeletonImage from './Image'; import SkeletonInput from './Input'; +import SkeletonNode from './Node'; import type { SkeletonParagraphProps } from './Paragraph'; import Paragraph from './Paragraph'; import type { SkeletonTitleProps } from './Title'; @@ -101,7 +101,7 @@ const Skeleton: React.FC & CompoundedComponent = (props) => { round, } = props; - const { getPrefixCls, direction } = React.useContext(ConfigContext); + const { getPrefixCls, direction, skeleton } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('skeleton', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); @@ -168,13 +168,14 @@ const Skeleton: React.FC & CompoundedComponent = (props) => { [`${prefixCls}-rtl`]: direction === 'rtl', [`${prefixCls}-round`]: round, }, + skeleton?.className, className, rootClassName, hashId, ); return wrapSSR( -
+
{avatarNode} {contentNode}
, From 74f078a3a87df8ce1c3e574d3861a1111cd5c0da Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Wed, 5 Jul 2023 19:21:56 +0800 Subject: [PATCH 06/80] feat: ConfigProvider support Progress className and style properties (#43340) --- .../config-provider/__tests__/style.test.tsx | 29 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + components/progress/progress.tsx | 9 +++++- 6 files changed, 43 insertions(+), 1 deletion(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 2de3eb127f..e189396d1c 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -21,6 +21,7 @@ import message from '../../message'; import Modal from '../../modal'; import notification from '../../notification'; import Pagination from '../../pagination'; +import Progress from '../../progress'; import Radio from '../../radio'; import Rate from '../../rate'; import Result from '../../result'; @@ -549,6 +550,34 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); + it('Should Progress className works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-progress')).toHaveClass('test-class'); + }); + + it('Should Progress style works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-progress')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Descriptions className & style works', () => { const { container } = render( = (props) => { layout, mentions, modal, + progress, result, slider, breadcrumb, @@ -360,6 +362,7 @@ const ProviderChildren: React.FC = (props) => { layout, mentions, modal, + progress, result, slider, breadcrumb, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 807e9d4762..5f5c55665e 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -124,6 +124,7 @@ const { | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | radio | 设置 Radio 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | rate | 设置 Rate 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | result | 设置 Result 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index dcc31c6465..b0bf3b7893 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -70,6 +70,7 @@ const Progress = React.forwardRef((props, ref) => type = 'line', status, format, + style, ...restProps } = props; @@ -88,7 +89,11 @@ const Progress = React.forwardRef((props, ref) => return status || 'normal'; }, [status, percentNumber]); - const { getPrefixCls, direction } = React.useContext(ConfigContext); + const { + getPrefixCls, + direction, + progress: progressStyle, + } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('progress', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); @@ -167,6 +172,7 @@ const Progress = React.forwardRef((props, ref) => [`${prefixCls}-${size}`]: typeof size === 'string', [`${prefixCls}-rtl`]: direction === 'rtl', }, + progressStyle?.className, className, rootClassName, hashId, @@ -175,6 +181,7 @@ const Progress = React.forwardRef((props, ref) => return wrapSSR(
Date: Wed, 5 Jul 2023 19:48:33 +0800 Subject: [PATCH 07/80] feat: ConfigProvider support Menu className and style properties (#43382) --- .../config-provider/__tests__/style.test.tsx | 43 ++++++++++++++++++- components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + components/menu/menu.tsx | 6 ++- 6 files changed, 52 insertions(+), 3 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index e189396d1c..bc3c3a411e 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -17,6 +17,7 @@ import Image from '../../image'; import Input from '../../input'; import Layout from '../../layout'; import Mentions from '../../mentions'; +import Menu from '../../menu'; import message from '../../message'; import Modal from '../../modal'; import notification from '../../notification'; @@ -25,9 +26,9 @@ import Progress from '../../progress'; import Radio from '../../radio'; import Rate from '../../rate'; import Result from '../../result'; -import Skeleton from '../../skeleton'; import Segmented from '../../segmented'; import Select from '../../select'; +import Skeleton from '../../skeleton'; import Slider from '../../slider'; import Space from '../../space'; import Spin from '../../spin'; @@ -378,6 +379,46 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ background: 'red' }); }); + it('Should Menu className works', () => { + const menuItems = [ + { + label: 'Test Label', + key: 'test', + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-menu')).toHaveClass('test-class'); + }); + + it('Should Menu style works', () => { + const menuItems = [ + { + label: 'Test Label', + key: 'test', + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-menu')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Mentions className & style works', () => { const { container } = render( = (props) => { result, slider, breadcrumb, + menu, pagination, input, empty, @@ -366,6 +368,7 @@ const ProviderChildren: React.FC = (props) => { result, slider, breadcrumb, + menu, pagination, empty, badge, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 5f5c55665e..9f7ed17bd4 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -119,6 +119,7 @@ const { | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 | | layout | 设置 Layout 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| menu | 设置 Menu 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx index 07a9281e74..3aa3df78da 100644 --- a/components/menu/menu.tsx +++ b/components/menu/menu.tsx @@ -41,13 +41,14 @@ const InternalMenu = forwardRef((props, ref) => { const override = React.useContext(OverrideContext); const overrideObj = override || {}; - const { getPrefixCls, getPopupContainer, direction } = React.useContext(ConfigContext); + const { getPrefixCls, getPopupContainer, direction, menu } = React.useContext(ConfigContext); const rootPrefixCls = getPrefixCls(); const { prefixCls: customizePrefixCls, className, + style, theme = 'light', expandIcon, _internalDisableMenuItemTitleTooltip, @@ -119,7 +120,7 @@ const InternalMenu = forwardRef((props, ref) => { const prefixCls = getPrefixCls('menu', customizePrefixCls || overrideObj.prefixCls); const [wrapSSR, hashId] = useStyle(prefixCls, !override); - const menuClassName = classNames(`${prefixCls}-${theme}`, className); + const menuClassName = classNames(`${prefixCls}-${theme}`, menu?.className, className); // ====================== Expand Icon ======================== let mergedExpandIcon: MenuProps[`expandIcon`]; @@ -163,6 +164,7 @@ const InternalMenu = forwardRef((props, ref) => { onClick={onItemClick} {...passedProps} inlineCollapsed={mergedInlineCollapsed} + style={{ ...menu?.style, ...style }} className={menuClassName} prefixCls={prefixCls} direction={direction} From 84ca0d23ae52e4f0940f20b0e22eabe743f90dca Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Wed, 5 Jul 2023 20:46:49 +0800 Subject: [PATCH 08/80] chore(deps-dev): bump stylelint-config-standard from 33.0.0 to 34.0.0 (#43386) Bumps [stylelint-config-standard](https://github.com/stylelint/stylelint-config-standard) from 33.0.0 to 34.0.0. - [Release notes](https://github.com/stylelint/stylelint-config-standard/releases) - [Changelog](https://github.com/stylelint/stylelint-config-standard/blob/main/CHANGELOG.md) - [Commits](https://github.com/stylelint/stylelint-config-standard/compare/33.0.0...34.0.0) --- updated-dependencies: - dependency-name: stylelint-config-standard dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index e91126b8bd..8d9a5420f7 100644 --- a/package.json +++ b/package.json @@ -289,7 +289,7 @@ "size-limit": "^8.1.0", "stylelint": "^15.1.0", "stylelint-config-rational-order": "^0.1.2", - "stylelint-config-standard": "^33.0.0", + "stylelint-config-standard": "^34.0.0", "stylelint-prettier": "^3.0.0", "sylvanas": "^0.6.1", "terser": "^5.16.1", From 97735dd9033e008538488cee21e33b2f8e5337dc Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Thu, 6 Jul 2023 01:31:17 +0800 Subject: [PATCH 09/80] docs: fix desc text (#43393) --- components/descriptions/style/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/descriptions/style/index.ts b/components/descriptions/style/index.ts index 5d6bbc35de..70fdc784db 100644 --- a/components/descriptions/style/index.ts +++ b/components/descriptions/style/index.ts @@ -22,12 +22,12 @@ export interface ComponentToken { */ itemPaddingBottom: number; /** - * @desc 分号右间距 + * @desc 冒号右间距 * @descEN Right margin of colon */ colonMarginRight: number; /** - * @desc 分号左间距 + * @desc 冒号左间距 * @descEN Left margin of colon */ colonMarginLeft: number; From 3f785909dffb6346388261d7971ad7e9829eb42b Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:33:54 +0800 Subject: [PATCH 10/80] feat: ConfigProvider support Alert className and style properties (#43384) --- components/alert/Alert.tsx | 5 ++-- .../config-provider/__tests__/style.test.tsx | 29 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + 6 files changed, 38 insertions(+), 2 deletions(-) diff --git a/components/alert/Alert.tsx b/components/alert/Alert.tsx index f3ca2aa14e..42419f8e4a 100644 --- a/components/alert/Alert.tsx +++ b/components/alert/Alert.tsx @@ -120,7 +120,7 @@ const Alert: React.FC = ({ warning(!closeText, 'Alert', '`closeText` is deprecated. Please use `closeIcon` instead.'); } const ref = React.useRef(null); - const { getPrefixCls, direction } = React.useContext(ConfigContext); + const { getPrefixCls, direction, alert } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('alert', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); @@ -164,6 +164,7 @@ const Alert: React.FC = ({ [`${prefixCls}-banner`]: !!banner, [`${prefixCls}-rtl`]: direction === 'rtl', }, + alert?.className, className, rootClassName, hashId, @@ -190,7 +191,7 @@ const Alert: React.FC = ({ ref={ref} data-show={!closed} className={classNames(alertCls, motionClassName)} - style={{ ...style, ...motionStyle }} + style={{ ...alert?.style, ...style, ...motionStyle }} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} onClick={onClick} diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index bc3c3a411e..d07cbd231a 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import ConfigProvider from '..'; import { fireEvent, render } from '../../../tests/utils'; +import Alert from '../../alert'; import Anchor from '../../anchor'; import Avatar from '../../avatar'; import Badge from '../../badge'; @@ -516,6 +517,34 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + it('Should Alert className works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-alert')).toHaveClass('test-class'); + }); + + it('Should Alert style works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-alert')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Anchor className & style works', () => { const { container } = render( = (props) => { children, csp: customCsp, autoInsertSpaceInButton, + alert, anchor, form, locale, @@ -340,6 +342,7 @@ const ProviderChildren: React.FC = (props) => { const baseConfig = { csp, autoInsertSpaceInButton, + alert, anchor, locale: locale || legacyLocale, direction, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 9f7ed17bd4..e3a7eae115 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -103,6 +103,7 @@ const { | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | +| alert | 设置 Alert 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | anchor | 设置 Anchor 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | avatar | 设置 Avatar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 | From 2d4708b3bd811684703c4e25b3ccb795b08264d9 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:36:45 +0800 Subject: [PATCH 11/80] feat: config-provider support transfer className and style properties (#43063) --- .../config-provider/__tests__/style.test.tsx | 47 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + components/transfer/index.tsx | 4 +- 6 files changed, 56 insertions(+), 1 deletion(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index d07cbd231a..cc8f7fdbe3 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -38,6 +38,7 @@ import Switch from '../../switch'; import Table from '../../table'; import Tabs from '../../tabs'; import Tag from '../../tag'; +import Transfer from '../../transfer'; import Tree from '../../tree'; import Typography from '../../typography'; import Upload from '../../upload'; @@ -852,6 +853,52 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ color: 'blue' }); }); + it('Should Transfer className works', () => { + const mockData = [ + { + key: '0-0', + title: `content`, + description: `description of content`, + }, + ]; + + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-transfer')).toHaveClass('test-class'); + }); + + it('Should Transfer style works', () => { + const mockData = [ + { + key: '0-0', + title: `content`, + description: `description of content`, + }, + ]; + + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-transfer')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Tree className works', () => { const treeData = [ { diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index fe4f7e0fff..5605baf432 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -120,6 +120,7 @@ export interface ConfigConsumerProps { radio?: ComponentStyleConfig; rate?: ComponentStyleConfig; switch?: ComponentStyleConfig; + transfer?: ComponentStyleConfig; avatar?: ComponentStyleConfig; message?: ComponentStyleConfig; tag?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 9fd164e475..04bc15b8a8 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -139,6 +139,7 @@ const { | table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | upload | Set Upload common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 4c876bcc2c..9ff1323c2a 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -164,6 +164,7 @@ export interface ConfigProviderProps { radio?: ComponentStyleConfig; rate?: ComponentStyleConfig; switch?: ComponentStyleConfig; + transfer?: ComponentStyleConfig; avatar?: ComponentStyleConfig; message?: ComponentStyleConfig; tag?: ComponentStyleConfig; @@ -290,6 +291,7 @@ const ProviderChildren: React.FC = (props) => { radio, rate, switch: SWITCH, + transfer, avatar, message, tag, @@ -378,6 +380,7 @@ const ProviderChildren: React.FC = (props) => { radio, rate, switch: SWITCH, + transfer, avatar, message, tag, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index e3a7eae115..60422552b4 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -142,6 +142,7 @@ const { | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 1c6f2d734a..6b8366a062 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -143,6 +143,7 @@ const Transfer = ( getPrefixCls, renderEmpty, direction: dir, + transfer, } = useContext(ConfigContext); const prefixCls = getPrefixCls('transfer', customizePrefixCls); @@ -336,6 +337,7 @@ const Transfer = ( [`${prefixCls}-rtl`]: dir === 'rtl', }, getStatusClassNames(prefixCls, mergedStatus, hasFeedback), + transfer?.className, className, rootClassName, hashId, @@ -348,7 +350,7 @@ const Transfer = ( const [leftTitle, rightTitle] = getTitles(listLocale); return wrapSSR( -
+
> prefixCls={`${prefixCls}-list`} titleText={leftTitle} From 09c0840a6be1306f2cfe15eda628f16a762ee2f3 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:38:21 +0800 Subject: [PATCH 12/80] feat: ConfigProvider support Calendar className and style properties (#43385) --- components/calendar/generateCalendar.tsx | 5 +-- .../config-provider/__tests__/style.test.tsx | 31 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + 6 files changed, 40 insertions(+), 2 deletions(-) diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx index f53530d254..6098527ea0 100644 --- a/components/calendar/generateCalendar.tsx +++ b/components/calendar/generateCalendar.tsx @@ -115,7 +115,7 @@ function generateCalendar(generateConfig: GenerateConfig) { onPanelChange, onSelect, } = props; - const { getPrefixCls, direction } = React.useContext(ConfigContext); + const { getPrefixCls, direction, calendar } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('picker', customizePrefixCls); const calendarPrefixCls = `${prefixCls}-calendar`; @@ -304,11 +304,12 @@ function generateCalendar(generateConfig: GenerateConfig) { [`${calendarPrefixCls}-mini`]: !fullscreen, [`${calendarPrefixCls}-rtl`]: direction === 'rtl', }, + calendar?.className, className, rootClassName, hashId, )} - style={style} + style={{ ...calendar?.style, ...style }} > {headerRender ? ( headerRender({ diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index cc8f7fdbe3..27c45f14ed 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -6,6 +6,7 @@ import Anchor from '../../anchor'; import Avatar from '../../avatar'; import Badge from '../../badge'; import Breadcrumb from '../../breadcrumb'; +import Calendar from '../../calendar'; import Card from '../../card'; import Cascader from '../../cascader'; import Checkbox from '../../checkbox'; @@ -778,6 +779,36 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ backgroundColor: 'blue' }); }); + it('Should Calendar className works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-picker-calendar')).toHaveClass('test-class'); + }); + + it('Should Calendar style works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-picker-calendar')).toHaveStyle( + 'color: red; font-size: 16px;', + ); + }); + it('Should Card className & style works', () => { const { container } = render( diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 5605baf432..b03ed3dd60 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -98,6 +98,7 @@ export interface ConfigConsumerProps { anchor?: ComponentStyleConfig; button?: ButtonConfig; divider?: ComponentStyleConfig; + calendar?: ComponentStyleConfig; cascader?: ComponentStyleConfig; typography?: ComponentStyleConfig; skeleton?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 04bc15b8a8..78142214da 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -108,6 +108,7 @@ const { | breadcrumb | Set Breadcrumb common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | button | Set Button common props | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 | | card | Set Card common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| calendar | Set Calendar common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | cascader | Set Cascader common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | checkbox | Set Checkbox common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 9ff1323c2a..08043326fc 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -141,6 +141,7 @@ export interface ConfigProviderProps { alert?: ComponentStyleConfig; anchor?: ComponentStyleConfig; button?: ButtonConfig; + calendar?: ComponentStyleConfig; cascader?: ComponentStyleConfig; divider?: ComponentStyleConfig; typography?: ComponentStyleConfig; @@ -268,6 +269,7 @@ const ProviderChildren: React.FC = (props) => { componentDisabled, segmented, spin, + calendar, cascader, typography, checkbox, @@ -357,6 +359,7 @@ const ProviderChildren: React.FC = (props) => { theme: mergedTheme, segmented, spin, + calendar, cascader, typography, checkbox, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 60422552b4..a63fa6121e 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -109,6 +109,7 @@ const { | badge | 设置 Badge 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { count?: string, indicator?: string }, styles?: { count?: React.CSSProperties, indicator?: React.CSSProperties } } | - | 5.7.0 | | breadcrumb | 设置 Breadcrumb 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | button | 设置 Button 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: { icon: string }, styles?: { icon: React.CSSProperties } } | - | 5.6.0 | +| calendar | 设置 Calendar 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | From 34ea912e221535e42cb219c414f470c19aeffa9c Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:43:03 +0800 Subject: [PATCH 13/80] feat: ConfigProvider support List className and style properties (#43387) --- .../config-provider/__tests__/style.test.tsx | 39 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + components/list/index.tsx | 6 ++- 6 files changed, 49 insertions(+), 2 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 27c45f14ed..a3a1133ce3 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -18,6 +18,7 @@ import Form from '../../form'; import Image from '../../image'; import Input from '../../input'; import Layout from '../../layout'; +import List from '../../list'; import Mentions from '../../mentions'; import Menu from '../../menu'; import message from '../../message'; @@ -382,6 +383,44 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ background: 'red' }); }); + it('Should List className works', () => { + const listData = [ + { + title: 'Test Title', + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-list')).toHaveClass('test-class'); + }); + + it('Should List style works', () => { + const listData = [ + { + title: 'Test Title', + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-list')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Menu className works', () => { const menuItems = [ { diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index b03ed3dd60..cde151b26d 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -107,6 +107,7 @@ export interface ConfigConsumerProps { steps?: ComponentStyleConfig; image?: ComponentStyleConfig; layout?: ComponentStyleConfig; + list?: ComponentStyleConfig; mentions?: ComponentStyleConfig; modal?: ComponentStyleConfig; progress?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 78142214da..49212ecedd 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -119,6 +119,7 @@ const { | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | input | Set Input common props | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 4.2.0 | | layout | Set Layout common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| list | Set List common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | menu | Set Menu common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 08043326fc..49f1e61d42 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -151,6 +151,7 @@ export interface ConfigProviderProps { steps?: ComponentStyleConfig; image?: ComponentStyleConfig; layout?: ComponentStyleConfig; + list?: ComponentStyleConfig; mentions?: ComponentStyleConfig; modal?: ComponentStyleConfig; progress?: ComponentStyleConfig; @@ -279,6 +280,7 @@ const ProviderChildren: React.FC = (props) => { steps, image, layout, + list, mentions, modal, progress, @@ -370,6 +372,7 @@ const ProviderChildren: React.FC = (props) => { image, input, layout, + list, mentions, modal, progress, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index a63fa6121e..d554aca459 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -121,6 +121,7 @@ const { | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | input | 设置 Input 组件的通用属性 | { autoComplete?: string, className?: string, style?: React.CSSProperties } | - | 5.7.0 | | layout | 设置 Layout 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| list | 设置 List 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | menu | 设置 Menu 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/list/index.tsx b/components/list/index.tsx index b69c30f726..410286d4c6 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -75,6 +75,7 @@ function List({ split = true, className, rootClassName, + style, children, itemLayout, loadMore, @@ -96,7 +97,7 @@ function List({ ); const [paginationSize, setPaginationSize] = React.useState(paginationObj.defaultPageSize || 10); - const { getPrefixCls, renderEmpty, direction } = React.useContext(ConfigContext); + const { getPrefixCls, renderEmpty, direction, list } = React.useContext(ConfigContext); const defaultPaginationProps = { current: 1, @@ -176,6 +177,7 @@ function List({ [`${prefixCls}-something-after-last-item`]: isSomethingAfterLastItem(), [`${prefixCls}-rtl`]: direction === 'rtl', }, + list?.className, className, rootClassName, hashId, @@ -280,7 +282,7 @@ function List({ return wrapSSR( -
+
{(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent} {header &&
{header}
} From 7ba53e1a0e7987957ca011c007e1a7c040a91303 Mon Sep 17 00:00:00 2001 From: azro352 <35503478+azro352@users.noreply.github.com> Date: Thu, 6 Jul 2023 03:44:11 +0200 Subject: [PATCH 14/80] docs: patch descrption missing type for column (#43388) * Update index.en-US.md * Update index.zh-CN.md * Apply suggestions from code review Co-authored-by: afc163 Signed-off-by: azro352 <35503478+azro352@users.noreply.github.com> --------- Signed-off-by: azro352 <35503478+azro352@users.noreply.github.com> Co-authored-by: afc163 --- components/descriptions/index.en-US.md | 2 +- components/descriptions/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md index 03df9a3122..accf36048e 100644 --- a/components/descriptions/index.en-US.md +++ b/components/descriptions/index.en-US.md @@ -33,7 +33,7 @@ Commonly displayed on the details page. | --- | --- | --- | --- | --- | | bordered | Whether to display the border | boolean | false | | | colon | Change default props `colon` value of Descriptions.Item | boolean | true | | -| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | | +| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number \| [Record](https://github.com/ant-design/ant-design/blob/84ca0d23ae52e4f0940f20b0e22eabe743f90dca/components/descriptions/index.tsx#L111C21-L111C56) | 3 | | | contentStyle | Customize content style | CSSProperties | - | 4.10.0 | | extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 | | labelStyle | Customize label style | CSSProperties | - | 4.10.0 | diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index 83bd42d3ba..32aaab90e9 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -34,7 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAA | --- | --- | --- | --- | --- | | bordered | 是否展示边框 | boolean | false | | | colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | | -| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | | +| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number \| [Record](https://github.com/ant-design/ant-design/blob/84ca0d23ae52e4f0940f20b0e22eabe743f90dca/components/descriptions/index.tsx#L111C21-L111C56) | 3 | | | contentStyle | 自定义内容样式 | CSSProperties | - | 4.10.0 | | extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 | | labelStyle | 自定义标签样式 | CSSProperties | - | 4.10.0 | From 3bbe9e7b631049580d28ec34e5b38955a822ad0b Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 6 Jul 2023 09:45:16 +0800 Subject: [PATCH 15/80] chore(deps): bump prettier from 2.3.2 to 3.0.0 (#43391) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8d9a5420f7..9069268f0b 100644 --- a/package.json +++ b/package.json @@ -257,7 +257,7 @@ "mockdate": "^3.0.0", "node-notifier": "^10.0.1", "open": "^9.0.0", - "prettier": "^2.3.2", + "prettier": "^3.0.0", "prettier-plugin-jsdoc": "^0.4.2", "pretty-format": "^29.0.0", "prismjs": "^1.29.0", From 6dad4144e7647f5c9da2357a8f53cd995929298e Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 09:45:25 +0800 Subject: [PATCH 16/80] feat: ConfigProvider support Collapse className and style properties (#43390) --- components/collapse/Collapse.tsx | 5 ++- .../config-provider/__tests__/style.test.tsx | 43 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + 6 files changed, 53 insertions(+), 1 deletion(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 06d9ff6ea8..6277127094 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -57,12 +57,13 @@ interface PanelProps { } const Collapse = React.forwardRef((props, ref) => { - const { getPrefixCls, direction } = React.useContext(ConfigContext); + const { getPrefixCls, direction, collapse } = React.useContext(ConfigContext); const { prefixCls: customizePrefixCls, className, rootClassName, + style, bordered = true, ghost, size: customizeSize, @@ -113,6 +114,7 @@ const Collapse = React.forwardRef((props, ref) => [`${prefixCls}-ghost`]: !!ghost, [`${prefixCls}-${mergedSize}`]: mergedSize !== 'middle', }, + collapse?.className, className, rootClassName, hashId, @@ -151,6 +153,7 @@ const Collapse = React.forwardRef((props, ref) => expandIcon={renderExpandIcon} prefixCls={prefixCls} className={collapseClassName} + style={{ ...collapse?.style, ...style }} > {items} , diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index a3a1133ce3..54e50027bf 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -10,6 +10,7 @@ import Calendar from '../../calendar'; import Card from '../../card'; import Cascader from '../../cascader'; import Checkbox from '../../checkbox'; +import Collapse from '../../collapse'; import ColorPicker from '../../color-picker'; import Descriptions from '../../descriptions'; import Divider from '../../divider'; @@ -196,6 +197,48 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + it('Should Collapse className works', () => { + const items = [ + { + key: '1', + label: 'test label', + children:

item

, + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-collapse')).toHaveClass('test-class'); + }); + + it('Should Collapse style works', () => { + const items = [ + { + key: '1', + label: 'test label', + children:

item

, + }, + ]; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-collapse')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Typography className & style works', () => { const { container } = render( = (props) => { spin, calendar, cascader, + collapse, typography, checkbox, descriptions, @@ -363,6 +365,7 @@ const ProviderChildren: React.FC = (props) => { spin, calendar, cascader, + collapse, typography, checkbox, descriptions, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index d554aca459..941a80671d 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -113,6 +113,7 @@ const { | card | 设置 Card 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | cascader | 设置 Cascader 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | checkbox | 设置 Checkbox 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| collapse | 设置 Collapse 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | From 36c3d36f02c40615dbff9366732cb66906e43109 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 10:27:39 +0800 Subject: [PATCH 17/80] feat: ConfigProvider support Timeline className and style properties (#43392) --- .../config-provider/__tests__/style.test.tsx | 41 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 3 +- components/timeline/Timeline.tsx | 11 +++-- 6 files changed, 55 insertions(+), 5 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 54e50027bf..7f885f6a84 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -41,6 +41,7 @@ import Switch from '../../switch'; import Table from '../../table'; import Tabs from '../../tabs'; import Tag from '../../tag'; +import Timeline from '../../timeline'; import Transfer from '../../transfer'; import Tree from '../../tree'; import Typography from '../../typography'; @@ -966,6 +967,46 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ color: 'blue' }); }); + it('Should Timeline className works', () => { + const items = [ + { + children: 'test item', + }, + ]; + + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-timeline')).toHaveClass('test-class'); + }); + + it('Should Timeline style works', () => { + const items = [ + { + children: 'test item', + }, + ]; + + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-timeline')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Transfer className works', () => { const mockData = [ { diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 5f24449284..03579bb773 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -130,6 +130,7 @@ export interface ConfigConsumerProps { table?: ComponentStyleConfig; card?: ComponentStyleConfig; tabs?: ComponentStyleConfig; + timeline?: ComponentStyleConfig; upload?: ComponentStyleConfig; notification?: ComponentStyleConfig; tree?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 2c5a9d470e..098db5f090 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -142,6 +142,7 @@ const { | table | Set Table common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tabs | Set Tabs common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tag | Set Tag common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| timeline | Set Timeline common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | transfer | Set Transfer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tree | Set Tree common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | Set Typography common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 3d8cf7b11a..c6f22569ac 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -174,6 +174,7 @@ export interface ConfigProviderProps { table?: ComponentStyleConfig; card?: ComponentStyleConfig; tabs?: ComponentStyleConfig; + timeline?: ComponentStyleConfig; upload?: ComponentStyleConfig; notification?: ComponentStyleConfig; tree?: ComponentStyleConfig; @@ -304,6 +305,7 @@ const ProviderChildren: React.FC = (props) => { table, card, tabs, + timeline, upload, notification, tree, @@ -396,6 +398,7 @@ const ProviderChildren: React.FC = (props) => { table, card, tabs, + timeline, upload, notification, tree, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 941a80671d..7064f03723 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -144,8 +144,9 @@ const { | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tag | 设置 Tag 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | -| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| timeline | 设置 Timeline 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | transfer | 设置 Transfer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| tree | 设置 Tree 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | typography | 设置 Typography 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | upload | 设置 Upload 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/timeline/Timeline.tsx b/components/timeline/Timeline.tsx index 6ffead4a5c..6df58f9dc6 100644 --- a/components/timeline/Timeline.tsx +++ b/components/timeline/Timeline.tsx @@ -1,9 +1,10 @@ +import classNames from 'classnames'; import * as React from 'react'; +import warning from '../_util/warning'; import { ConfigContext } from '../config-provider'; import type { TimelineItemProps } from './TimelineItem'; -import TimelineItemList from './TimelineItemList'; import TimelineItem from './TimelineItem'; -import warning from '../_util/warning'; +import TimelineItemList from './TimelineItemList'; import useItems from './useItems'; // CSSINJS @@ -28,8 +29,8 @@ type CompoundedComponent = React.FC & { }; const Timeline: CompoundedComponent = (props) => { - const { getPrefixCls, direction } = React.useContext(ConfigContext); - const { prefixCls: customizePrefixCls, children, items, ...restProps } = props; + const { getPrefixCls, direction, timeline } = React.useContext(ConfigContext); + const { prefixCls: customizePrefixCls, children, items, className, style, ...restProps } = props; const prefixCls = getPrefixCls('timeline', customizePrefixCls); // =================== Warning ===================== @@ -45,6 +46,8 @@ const Timeline: CompoundedComponent = (props) => { return wrapSSR( Date: Thu, 6 Jul 2023 10:42:13 +0800 Subject: [PATCH 18/80] feat: ConfigProvider support Drawer className and style properties (#43396) --- .../config-provider/__tests__/style.test.tsx | 31 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + components/drawer/index.tsx | 16 ++++++---- 6 files changed, 47 insertions(+), 6 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 7f885f6a84..7bee2542e2 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -14,6 +14,7 @@ import Collapse from '../../collapse'; import ColorPicker from '../../color-picker'; import Descriptions from '../../descriptions'; import Divider from '../../divider'; +import Drawer from '../../drawer'; import Empty from '../../empty'; import Form from '../../form'; import Image from '../../image'; @@ -151,6 +152,36 @@ describe('ConfigProvider support style and className props', () => { expect(container.querySelector('.ant-divider'))?.toHaveStyle({ color: 'red', height: '80px' }); }); + it('Should Drawer className works', () => { + render( + + + , + ); + + expect(document.querySelector('.ant-drawer-content')).toHaveClass('test-class'); + }); + + it('Should Drawer style works', () => { + render( + + + , + ); + + expect(document.querySelector('.ant-drawer-content')).toHaveStyle( + 'color: red; font-size: 16px;', + ); + }); + it('Should Cascader className & style works', () => { const options = [ { diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 03579bb773..69408f33a3 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -98,6 +98,7 @@ export interface ConfigConsumerProps { anchor?: ComponentStyleConfig; button?: ButtonConfig; divider?: ComponentStyleConfig; + drawer?: ComponentStyleConfig; calendar?: ComponentStyleConfig; cascader?: ComponentStyleConfig; collapse?: ComponentStyleConfig; diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 098db5f090..fcd9a87300 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -115,6 +115,7 @@ const { | colorPicker | Set ColorPicker common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | descriptions | Set Descriptions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | divider | Set Divider common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| drawer | Set Drawer common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | empty | Set Empty common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | form | Set Form common props | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form/#validatemessages), requiredMark?: boolean \| `optional`, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) } | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 | | image | Set Image common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index c6f22569ac..7ac7c3e828 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -145,6 +145,7 @@ export interface ConfigProviderProps { cascader?: ComponentStyleConfig; collapse?: ComponentStyleConfig; divider?: ComponentStyleConfig; + drawer?: ComponentStyleConfig; typography?: ComponentStyleConfig; skeleton?: ComponentStyleConfig; spin?: ComponentStyleConfig; @@ -279,6 +280,7 @@ const ProviderChildren: React.FC = (props) => { checkbox, descriptions, divider, + drawer, skeleton, steps, image, @@ -372,6 +374,7 @@ const ProviderChildren: React.FC = (props) => { checkbox, descriptions, divider, + drawer, skeleton, steps, image, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 7064f03723..01213d1600 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -117,6 +117,7 @@ const { | colorPicker | 设置 ColorPicker 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | descriptions | 设置 Descriptions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | divider | 设置 Divider 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| drawer | 设置 Drawer 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | empty | 设置 Empty 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | form | 设置 Form 组件的通用属性 | { className?: string, style?: React.CSSProperties, validateMessages?: [ValidateMessages](/components/form-cn#validatemessages), requiredMark?: boolean \| `optional`, colon?: boolean, scrollToFirstError?: boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)} | - | requiredMark: 4.8.0; colon: 4.18.0; scrollToFirstError: 5.2.0; className: 5.7.0; style: 5.7.0 | | image | 设置 Image 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 8c19d95cfa..2eef1ebb17 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -1,18 +1,18 @@ import classNames from 'classnames'; -import RcDrawer from 'rc-drawer'; import type { DrawerProps as RcDrawerProps } from 'rc-drawer'; +import RcDrawer from 'rc-drawer'; import type { CSSMotionProps } from 'rc-motion'; import * as React from 'react'; -import { ConfigContext } from '../config-provider'; -import { NoFormStyle } from '../form/context'; import { getTransitionName } from '../_util/motion'; import warning from '../_util/warning'; -import DrawerPanel from './DrawerPanel'; +import { ConfigContext } from '../config-provider'; +import { NoFormStyle } from '../form/context'; import type { DrawerPanelProps } from './DrawerPanel'; +import DrawerPanel from './DrawerPanel'; // CSSINJS -import useStyle from './style'; import { NoCompactStyle } from '../space/Compact'; +import useStyle from './style'; const SizeTypes = ['default', 'large'] as const; type sizeType = typeof SizeTypes[number]; @@ -51,6 +51,8 @@ function Drawer(props: DrawerProps) { onClose, prefixCls: customizePrefixCls, getContainer: customizeGetContainer, + style, + className, // Deprecated visible, @@ -59,7 +61,7 @@ function Drawer(props: DrawerProps) { ...rest } = props; - const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext); + const { getPopupContainer, getPrefixCls, direction, drawer } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('drawer', customizePrefixCls); // Style @@ -141,6 +143,8 @@ function Drawer(props: DrawerProps) { push={push} width={mergedWidth} height={mergedHeight} + style={{ ...drawer?.style, ...style }} + className={classNames(drawer?.className, className)} rootClassName={drawerClassName} getContainer={getContainer} afterOpenChange={afterOpenChange ?? afterVisibleChange} From 749aea08d40bd5cc9b15d91b8e794503c740e2cb Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Thu, 6 Jul 2023 11:01:14 +0800 Subject: [PATCH 19/80] type: use React.ReactElement replace any (#43397) --- components/collapse/Collapse.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/components/collapse/Collapse.tsx b/components/collapse/Collapse.tsx index 06d9ff6ea8..57d5d5cdb3 100644 --- a/components/collapse/Collapse.tsx +++ b/components/collapse/Collapse.tsx @@ -101,7 +101,10 @@ const Collapse = React.forwardRef((props, ref) => ) as React.ReactNode; return cloneElement(icon, () => ({ - className: classNames((icon as any).props.className, `${prefixCls}-arrow`), + className: classNames( + (icon as React.ReactElement).props.className, + `${prefixCls}-arrow`, + ), })); }; From 78923c541a71bd8a42e5478aa9bb86d53c436c14 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 6 Jul 2023 13:45:40 +0800 Subject: [PATCH 20/80] docs: Link support open in new tab or window (#43398) * docs: Link support open in new tab or window * docs: apply more Linki * Revert "docs: apply more Linki" This reverts commit e19ddd74795cbabb5d9b387bcd6d6a5c5d5dcc0f. --- .dumi/theme/builtins/ComponentTokenTable/index.tsx | 12 +++++++----- .dumi/theme/common/Link.tsx | 11 +++++++---- 2 files changed, 14 insertions(+), 9 deletions(-) diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index 2fad6b974b..1471dff570 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -150,11 +150,13 @@ const ComponentTokenTable: React.FC = ({ component }) return ( <> - item.token)} - component={component} - /> + {tokenMeta.components[component] && ( + item.token)} + component={component} + /> + )} ); diff --git a/.dumi/theme/common/Link.tsx b/.dumi/theme/common/Link.tsx index 68b7bfe3f0..b9a86954f9 100644 --- a/.dumi/theme/common/Link.tsx +++ b/.dumi/theme/common/Link.tsx @@ -14,10 +14,13 @@ const Link = forwardRef((props, ref) => { const handleClick = (e: MouseEvent) => { if (!to.startsWith('http')) { - e.preventDefault(); - startTransition(() => { - navigate(to); - }); + // Should support open in new tab + if (!e.metaKey && !e.ctrlKey && !e.shiftKey) { + e.preventDefault(); + startTransition(() => { + navigate(to); + }); + } } }; From a7f14e71907d058cec986c4973a8d2839d4e2d6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 6 Jul 2023 14:30:18 +0800 Subject: [PATCH 21/80] fix: tag position of wave (#43402) --- components/tag/style/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/tag/style/index.ts b/components/tag/style/index.ts index 9a0e55b768..ec39b35268 100644 --- a/components/tag/style/index.ts +++ b/components/tag/style/index.ts @@ -88,6 +88,7 @@ const genBaseStyle = (token: TagToken): CSSInterpolation => { opacity: 1, transition: `all ${token.motionDurationMid}`, textAlign: 'start', + position: 'relative', // RTL [`&${componentCls}-rtl`]: { From 70abc90afdc01c3a1676684f96daa3f36a7f1aeb Mon Sep 17 00:00:00 2001 From: Wuxh Date: Thu, 6 Jul 2023 15:33:33 +0800 Subject: [PATCH 22/80] fix: `ConfigProvider` merge form validateMessages not inheriting from parent bug (#43239) * test(CP): add Form unit case * fix: `ConfigProvider ` merge form validateMessages not inheriting from parent bug --- .../config-provider/__tests__/form.test.tsx | 36 +++++++++++++++++++ components/config-provider/context.ts | 2 ++ components/config-provider/index.tsx | 1 + 3 files changed, 39 insertions(+) diff --git a/components/config-provider/__tests__/form.test.tsx b/components/config-provider/__tests__/form.test.tsx index 61152d6b66..919603988f 100644 --- a/components/config-provider/__tests__/form.test.tsx +++ b/components/config-provider/__tests__/form.test.tsx @@ -148,6 +148,42 @@ describe('ConfigProvider.Form', () => { 'age must be between 18-99', ); }); + + // https://github.com/ant-design/ant-design/issues/43210 + it('should merge parent ConfigProvider validateMessages', async () => { + const MyForm = () => ( +
+ + + + + + ); + + const { container, getAllByRole, getAllByText } = render( + + + + + + + + + , + ); + + const submitButtons = getAllByRole('button'); + expect(submitButtons).toHaveLength(3); + submitButtons.forEach(fireEvent.click); + + await waitFakeTimer(); + + expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength(3); + expect(getAllByText('Please enter Name')).toHaveLength(1); + expect(getAllByText('Required')).toHaveLength(2); + }); }); describe('form requiredMark', () => { diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index 600023f93b..5bcf251c80 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -1,4 +1,5 @@ import type { DerivativeFunc } from '@ant-design/cssinjs'; +import type { ValidateMessages } from 'rc-field-form/lib/interface'; import * as React from 'react'; import type { Options } from 'scroll-into-view-if-needed'; import type { ButtonProps } from '../button'; @@ -81,6 +82,7 @@ export interface ConfigConsumerProps { requiredMark?: RequiredMark; colon?: boolean; scrollToFirstError?: Options | boolean; + validateMessages?: ValidateMessages; }; theme?: ThemeConfig; select?: { diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index d609ff9e51..e08c4364cb 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -319,6 +319,7 @@ const ProviderChildren: React.FC = (props) => { merge( defaultLocale.Form?.defaultValidateMessages || {}, memoedConfig.locale?.Form?.defaultValidateMessages || {}, + memoedConfig.form?.validateMessages || {}, form?.validateMessages || {}, ), [memoedConfig, form?.validateMessages], From 588ee4cac280db1b90d38d96832ceb2a3cd97aae Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 6 Jul 2023 16:14:11 +0800 Subject: [PATCH 23/80] docs: Add motion & dropdown faq (#43403) * docs: motion usage case * docs: faq * docs: update --- components/dropdown/index.en-US.md | 6 +++++ components/dropdown/index.zh-CN.md | 6 +++++ docs/react/customize-theme.en-US.md | 18 ++++++++----- docs/react/customize-theme.zh-CN.md | 18 ++++++++----- docs/react/demo/motion.md | 7 +++++ docs/react/demo/motion.tsx | 42 +++++++++++++++++++++++++++++ 6 files changed, 85 insertions(+), 12 deletions(-) create mode 100644 docs/react/demo/motion.md create mode 100644 docs/react/demo/motion.tsx diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index 62cef852b4..fabd5d5d1a 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -77,3 +77,9 @@ Please ensure that the child node of `Dropdown` accepts `onMouseEnter`, `onMouse ## Design Token + +## FAQ + +### How to prevent Dropdown from being squeezed when it exceeds the screen horizontally? + +You can use `width: max-content` style to handle this. ref [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135). diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index 00073ec217..89c1bbc15b 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -81,3 +81,9 @@ demo: ## Design Token + +## FAQ + +### Dropdown 在水平方向超出屏幕时会被挤压改怎么办？ + +你可以通过 `width: max-content` 来解决这个问题，参考 [#43025](https://github.com/ant-design/ant-design/issues/43025#issuecomment-1594394135)。 diff --git a/docs/react/customize-theme.en-US.md b/docs/react/customize-theme.en-US.md index df32ed05e8..a8f2349f6b 100644 --- a/docs/react/customize-theme.en-US.md +++ b/docs/react/customize-theme.en-US.md @@ -96,6 +96,13 @@ In this way, we changed the primary color of Radio to Motion + ## Other Ways to Use Dynamic Themes ### Switch Themes Dynamically @@ -560,12 +567,11 @@ export default class MyDocument extends Document { const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ - enhanceApp: (App) => (props) => - ( - - - - ), + enhanceApp: (App) => (props) => ( + + + + ), }); const initialProps = await Document.getInitialProps(ctx); diff --git a/docs/react/customize-theme.zh-CN.md b/docs/react/customize-theme.zh-CN.md index eea3c44469..7104d6e9a7 100644 --- a/docs/react/customize-theme.zh-CN.md +++ b/docs/react/customize-theme.zh-CN.md @@ -96,6 +96,13 @@ export default App; > 注意：`ConfigProvider` 对 `message.xxx`、`Modal.xxx`、`notification.xxx` 等静态方法不会生效，原因是在这些方法中，antd 会通过 `ReactDOM.render` 动态创建新的 React 实体。其 context 与当前代码所在 context 并不相同，因而无法获取 context 信息。当你需要 context 信息（例如 ConfigProvider 配置的内容）时，可以通过 `Modal.useModal` 方法会返回 modal 实体以及 contextHolder 节点。将其插入到你需要获取 context 位置即可，也可通过 [App 包裹组件](/components/app-cn) 简化 useModal 等方法需要手动植入 contextHolder 的问题。 +### 禁用动画 + +antd 默认内置了一些组件交互动效让企业级页面更加富有细节，在一些极端场景可能会影响页面交互性能，如需关闭动画可以使用下面的方式： + + +动画控制 + ## 动态主题的其他使用方式 ### 动态切换 @@ -556,12 +563,11 @@ export default class MyDocument extends Document { const originalRenderPage = ctx.renderPage; ctx.renderPage = () => originalRenderPage({ - enhanceApp: (App) => (props) => - ( - - - - ), + enhanceApp: (App) => (props) => ( + + + + ), }); const initialProps = await Document.getInitialProps(ctx); diff --git a/docs/react/demo/motion.md b/docs/react/demo/motion.md new file mode 100644 index 0000000000..53383e0cb4 --- /dev/null +++ b/docs/react/demo/motion.md @@ -0,0 +1,7 @@ +## zh-CN + +通过 `token` 进行动画效果配置。 + +## en-US + +Config animation effect by `token`. diff --git a/docs/react/demo/motion.tsx b/docs/react/demo/motion.tsx new file mode 100644 index 0000000000..888fb37152 --- /dev/null +++ b/docs/react/demo/motion.tsx @@ -0,0 +1,42 @@ +import React from 'react'; +import { Switch, ConfigProvider, Space, Checkbox, Radio, Row, Col } from 'antd'; + +export default () => { + const [checked, setChecked] = React.useState(false); + + React.useEffect(() => { + const id = setInterval(() => { + setChecked((prev) => !prev); + }, 500); + + return () => { + clearInterval(id); + }; + }, []); + + const nodes = ( + + Checkbox + Radio + + + ); + + return ( + +
{nodes} + + + + {nodes} + + + + ); +}; From 9fdf12ea4775ca66796ccfc6d0fda39f605b9d49 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 6 Jul 2023 17:51:38 +0800 Subject: [PATCH 24/80] docs: add getFieldsValue faq (#43405) --- components/form/index.en-US.md | 4 ++++ components/form/index.zh-CN.md | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index ac1af978ba..1a044f0b0d 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -545,6 +545,10 @@ In most case, we always recommend to use Form `initialValues`. Use Item `initial 1. Form `initialValues` is the first priority 2. Field `initialValue` is secondary \*. Does not work when multiple Item with same `name` setting the `initialValue` +### Why can't `getFieldsValue` get value at first render? + +`getFieldsValue` returns collected field data by default, but the Form.Item node is not ready at the first render. You can get all field data by `getFieldsValue(true)`. + ### Why does `onFieldsChange` trigger three times on change when field sets `rules`? Validating is also part of the value updating. It pass follow steps: diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index e5902c42e0..362274a2be 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -544,6 +544,10 @@ validator(rule, value, callback) => { 1. Form 的 `initialValues` 拥有最高优先级 2. Field 的 `initialValue` 次之 \*. 多个同 `name` Item 都设置 `initialValue` 时，则 Item 的 `initialValue` 不生效 +### 为什么 `getFieldsValue` 在初次渲染的时候拿不到值？ + +`getFieldsValue` 默认返回收集的字段数据，而在初次渲染时 Form.Item 节点尚未渲染，因而无法收集到数据。你可以通过 `getFieldsValue(true)` 来获取所有字段数据。 + ### 为什么字段设置 `rules` 后更改值 `onFieldsChange` 会触发三次？ 字段除了本身的值变化外，校验也是其状态之一。因而在触发字段变化会经历以下几个阶段： From fd8a9884f0bfce553d9b88f7c1a9080a121866fb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E5=BA=84=E5=A6=AE?= <32158203+wongest@users.noreply.github.com> Date: Thu, 6 Jul 2023 19:02:02 +0800 Subject: [PATCH 25/80] docs: fix Table api description (#43407) --- components/table/index.en-US.md | 2 +- components/table/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 416e9b0213..d0b24b0a5a 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -192,7 +192,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t | shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 | | showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean \| [Tooltip props](/components/tooltip/) | true | | | sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | -| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean \| { compare: function: multiple: number } | - | | +| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean \| { compare: function, multiple: number } | - | | | sortOrder | Order of sorted values: `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | | | sortIcon | Customized sort icon | (props: { sortOrder }) => ReactNode | - | 5.6.0 | | title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | | diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 486bf90ec7..b35ce8051c 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -194,7 +194,7 @@ const columns = [ | shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 | | showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip-cn/#api) | true | | | sortDirections | 支持的排序方式，覆盖 `Table` 中 `sortDirections`， 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | | -| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | function \| boolean \| { compare: function: multiple: number } | - | | +| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | function \| boolean \| { compare: function, multiple: number } | - | | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `ascend` `descend` `null` | `ascend` \| `descend` \| null | - | | | sortIcon | 自定义 sort 图标 | (props: { sortOrder }) => ReactNode | - | 5.6.0 | | title | 列头显示文字（函数用法 `3.10.0` 后支持） | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | | From 005575c5cdb28bfb0c7332cc2eb5138bf61a844f Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 6 Jul 2023 21:54:54 +0800 Subject: [PATCH 26/80] feat: ConfigProvider support Statistic className and style properties (#43408) --- .../config-provider/__tests__/style.test.tsx | 29 +++++++++++++++++++ components/config-provider/context.ts | 1 + components/config-provider/index.en-US.md | 1 + components/config-provider/index.tsx | 3 ++ components/config-provider/index.zh-CN.md | 1 + components/statistic/Statistic.tsx | 11 +++++-- 6 files changed, 44 insertions(+), 2 deletions(-) diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 7bee2542e2..953b65065c 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -37,6 +37,7 @@ import Skeleton from '../../skeleton'; import Slider from '../../slider'; import Space from '../../space'; import Spin from '../../spin'; +import Statistic from '../../statistic'; import Steps from '../../steps'; import Switch from '../../switch'; import Table from '../../table'; @@ -325,6 +326,34 @@ describe('ConfigProvider support style and className props', () => { expect(element).toHaveStyle({ backgroundColor: 'red' }); }); + it('Should Statistic className works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-statistic')).toHaveClass('test-class'); + }); + + it('Should Statistic style works', () => { + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-statistic')).toHaveStyle('color: red; font-size: 16px;'); + }); + it('Should Segmented className & style works', () => { const { container } = render( = (props) => { theme, componentDisabled, segmented, + statistic, spin, calendar, cascader, @@ -366,6 +368,7 @@ const ProviderChildren: React.FC = (props) => { iconPrefixCls, theme: mergedTheme, segmented, + statistic, spin, calendar, cascader, diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 01213d1600..6fea202f36 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -141,6 +141,7 @@ const { | switch | 设置 Switch 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | space | 设置 Space 的通用属性，参考 [Space](/components/space-cn) | { size: `small` \| `middle` \| `large` \| `number`, className?: string, style?: React.CSSProperties, classNames?: { item: string }, styles?: { item: React.CSSProperties } } | - | 5.6.0 | | spin | 设置 Spin 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | +| statistic | 设置 Statistic 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | steps | 设置 Steps 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | table | 设置 Table 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | | tabs | 设置 Tabs 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 | diff --git a/components/statistic/Statistic.tsx b/components/statistic/Statistic.tsx index 1fe537f9f9..19d49dade0 100644 --- a/components/statistic/Statistic.tsx +++ b/components/statistic/Statistic.tsx @@ -42,7 +42,8 @@ const Statistic: React.FC = (props) => { groupSeparator = ',', } = props; - const { getPrefixCls, direction } = React.useContext(ConfigContext); + const { getPrefixCls, direction, statistic } = + React.useContext(ConfigContext); const prefixCls = getPrefixCls('statistic', customizePrefixCls); @@ -63,13 +64,19 @@ const Statistic: React.FC = (props) => { { [`${prefixCls}-rtl`]: direction === 'rtl', }, + statistic?.className, className, rootClassName, hashId, ); return wrapSSR( -
+
{title &&
{title}
}
From f566e3b24bca0a1f73e4ff5c83f5302eadb32c37 Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Thu, 6 Jul 2023 23:54:03 +0800 Subject: [PATCH 27/80] type: supplementary React.FC type (#43410) * type: supplementary React.FC type * fix: remove useless code * revert: remove useStyle * revert: card-top * Update card-top.tsx --- components/button/demo/chinese-chars-loading.tsx | 4 ++-- components/color-picker/__tests__/index.test.tsx | 2 +- components/form/__tests__/index.test.tsx | 4 ++-- components/form/demo/validate-only.tsx | 2 +- .../image/demo/preview-group-top-progress.tsx | 4 ++-- components/input/__tests__/index.test.tsx | 2 +- components/input/__tests__/textarea.test.tsx | 2 +- components/table/__tests__/Table.filter.test.tsx | 2 +- components/tag/demo/draggable.tsx | 14 +++++++------- components/transfer/__tests__/index.test.tsx | 4 ++-- 10 files changed, 20 insertions(+), 20 deletions(-) diff --git a/components/button/demo/chinese-chars-loading.tsx b/components/button/demo/chinese-chars-loading.tsx index 8ddfea9a47..991e922c4a 100644 --- a/components/button/demo/chinese-chars-loading.tsx +++ b/components/button/demo/chinese-chars-loading.tsx @@ -1,13 +1,13 @@ // @ts-nocheck -import React from 'react'; import { PoweroffOutlined } from '@ant-design/icons'; import { Button, Space } from 'antd'; +import React from 'react'; const Text1 = () => '部署'; const Text2 = () => 部署; const Text3 = () => 'Submit'; -const App = () => ( +const App: React.FC = () => (