From 7503caeb1859fb45ec2f4a126da1ad5b51f69aff Mon Sep 17 00:00:00 2001 From: chrismorison-wt <104949709+chrismorison-wt@users.noreply.github.com> Date: Thu, 20 Oct 2022 14:52:58 +1300 Subject: [PATCH 01/27] docs: fix docs for Alert closeIcon prop. Fixes #38123 (#38124) --- components/alert/index.en-US.md | 2 +- components/alert/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md index 8b8992206b..982057c3cd 100644 --- a/components/alert/index.en-US.md +++ b/components/alert/index.en-US.md @@ -21,7 +21,7 @@ Alert component for feedback. | banner | Whether to show as banner | boolean | false | | | closable | Whether Alert can be closed | boolean | - | | | closeText | Close text to show | ReactNode | - | | -| closeIcon | Custom close icon | ReactNode | `` | 4.17.0 | +| closeIcon | Custom close icon | ReactNode | `` | 4.18.0 | | description | Additional content of Alert | ReactNode | - | | | icon | Custom icon, effective when `showIcon` is true | ReactNode | - | | | message | Content of Alert | ReactNode | - | | diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md index 8946f08330..ee0a63de85 100644 --- a/components/alert/index.zh-CN.md +++ b/components/alert/index.zh-CN.md @@ -22,7 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg | banner | 是否用作顶部公告 | boolean | false | | | closable | 默认不显示关闭按钮 | boolean | - | | | closeText | 自定义关闭按钮 | ReactNode | - | | -| closeIcon | 自定义关闭 Icon | ReactNode | `` | 4.17.0 | +| closeIcon | 自定义关闭 Icon | ReactNode | `` | 4.18.0 | | description | 警告提示的辅助性文字介绍 | ReactNode | - | | | icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - | | | message | 警告提示内容 | ReactNode | - | | From 769cb3c79ad94fc175cf214d188d1eff8b7a9376 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 20 Oct 2022 16:37:35 +0800 Subject: [PATCH 02/27] style: remove repeate method (#38133) * style: remove repeate method * fix: del break --- components/_util/reactNode.ts | 2 +- components/button/button.tsx | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/components/_util/reactNode.ts b/components/_util/reactNode.ts index 38e23ee422..8e5b73c016 100644 --- a/components/_util/reactNode.ts +++ b/components/_util/reactNode.ts @@ -2,7 +2,7 @@ import * as React from 'react'; export const { isValidElement } = React; -export function isFragment(child: React.ReactElement): boolean { +export function isFragment(child: any): boolean { return child && isValidElement(child) && child.type === React.Fragment; } diff --git a/components/button/button.tsx b/components/button/button.tsx index 469383a145..fd1a4ef8dc 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -7,7 +7,7 @@ import { ConfigContext } from '../config-provider'; import DisabledContext from '../config-provider/DisabledContext'; import type { SizeType } from '../config-provider/SizeContext'; import SizeContext from '../config-provider/SizeContext'; -import { cloneElement } from '../_util/reactNode'; +import { cloneElement, isFragment } from '../_util/reactNode'; import { tuple } from '../_util/type'; import warning from '../_util/warning'; import Wave from '../_util/wave'; @@ -24,10 +24,6 @@ function isUnBorderedButtonType(type: ButtonType | undefined) { return type === 'text' || type === 'link'; } -function isReactFragment(node: React.ReactNode) { - return React.isValidElement(node) && node.type === React.Fragment; -} - // Insert one space between two chinese characters automatically. function insertSpace(child: React.ReactElement | string | number, needInserted: boolean) { // Check the child if is undefined or null. @@ -49,7 +45,7 @@ function insertSpace(child: React.ReactElement | string | number, needInserted: if (typeof child === 'string') { return isTwoCNChar(child) ? {child.split('').join(SPACE)} : {child}; } - if (isReactFragment(child)) { + if (isFragment(child)) { return {child}; } return child; From 3eff12dd69a83be3eb941f3be65c3d5d616afa56 Mon Sep 17 00:00:00 2001 From: zty Date: Thu, 20 Oct 2022 18:05:29 +0800 Subject: [PATCH 03/27] docs: fix demo code (#38136) * docs: fix demo code * docs: fix demo code * docs: fix demo code --- docs/react/practical-projects.en-US.md | 25 ++++++++++++------------- docs/react/practical-projects.zh-CN.md | 16 ++++++---------- 2 files changed, 18 insertions(+), 23 deletions(-) diff --git a/docs/react/practical-projects.en-US.md b/docs/react/practical-projects.en-US.md index b94699ad91..08911ea7da 100644 --- a/docs/react/practical-projects.en-US.md +++ b/docs/react/practical-projects.en-US.md @@ -68,10 +68,13 @@ Let's create a `ProductList` component that we can use in multiple places to sho Create `src/components/ProductList.tsx` by typing: -```js +```tsx import { Table, Popconfirm, Button } from 'antd'; -const ProductList = ({ onDelete, products }) => { +const ProductList: React.FC<{ products: { name: string }[]; onDelete: (id: string) => void }> = ({ + onDelete, + products, +}) => { const columns = [ { title: 'Name', @@ -112,16 +115,12 @@ export function queryProductList() { export function queryProductList() { return new Promise(resolve => { setTimeout(() => { - resolve([ - { - id: 1, - name: 'dva', - }, - { - id: 2, - name: 'antd', - }, - ]); + resolve({ + data: [ + { id: 1, name: 'dva' }, + { id: 2, name: 'antd' }, + ], + }); }, 2000); }); } @@ -134,7 +133,7 @@ import { useRequest } from 'umi'; import { queryProductList } from '@/services/product'; export default function useProductList(params: { pageSize: number; current: number }) { - const msg = useRequest(() => queryUserList(params)); + const msg = useRequest(() => queryProductList(params)); const deleteProducts = async (id: string) => { try { diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md index 4751ce6ee9..dc15c52a11 100644 --- a/docs/react/practical-projects.zh-CN.md +++ b/docs/react/practical-projects.zh-CN.md @@ -109,16 +109,12 @@ export function queryProductList() { export function queryProductList() { return new Promise(resolve => { setTimeout(() => { - resolve([ - { - id: 1, - name: 'dva', - }, - { - id: 2, - name: 'antd', - }, - ]); + resolve({ + data: [ + { id: 1, name: 'dva' }, + { id: 2, name: 'antd' }, + ], + }); }, 2000); }); } From 3d33c340103152c7af9157d0023dd1c7db9cab62 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 21 Oct 2022 11:45:55 +0800 Subject: [PATCH 04/27] chore: use includes instead indexOf (#38139) * chore: use includes instead indexOf * fix: fix --- components/_util/wave.tsx | 4 ++-- components/badge/utils.tsx | 2 +- components/checkbox/Checkbox.tsx | 2 +- components/checkbox/Group.tsx | 4 ++-- components/form/util.ts | 2 +- components/progress/progress.tsx | 4 ++-- components/statistic/utils.tsx | 2 +- components/table/Table.tsx | 4 ++-- components/transfer/ListBody.tsx | 4 ++-- components/transfer/index.tsx | 12 ++++++------ components/transfer/list.tsx | 4 ++-- components/tree/utils/dictUtil.ts | 7 +------ components/typography/Title.tsx | 2 +- components/typography/__tests__/index.test.tsx | 10 +++++----- scripts/generate-authors.js | 2 +- site/theme/template/Color/Palette.jsx | 2 +- site/theme/template/Content/index.jsx | 2 +- 17 files changed, 32 insertions(+), 37 deletions(-) diff --git a/components/_util/wave.tsx b/components/_util/wave.tsx index 0569966e55..172c35f2ff 100644 --- a/components/_util/wave.tsx +++ b/components/_util/wave.tsx @@ -87,7 +87,7 @@ class Wave extends React.Component { onClick = (node: HTMLElement, waveColor: string) => { const { insertExtraNode, disabled } = this.props; - if (disabled || !node || isHidden(node) || node.className.indexOf('-leave') >= 0) { + if (disabled || !node || isHidden(node) || node.className.includes('-leave')) { return; } @@ -163,7 +163,7 @@ class Wave extends React.Component { !node || !node.getAttribute || node.getAttribute('disabled') || - node.className.indexOf('disabled') >= 0 + node.className.includes('disabled') ) { return; } diff --git a/components/badge/utils.tsx b/components/badge/utils.tsx index ada1c6580c..2c9a500e88 100644 --- a/components/badge/utils.tsx +++ b/components/badge/utils.tsx @@ -2,5 +2,5 @@ import { PresetColorTypes } from '../_util/colors'; // eslint-disable-next-line import/prefer-default-export export function isPresetColor(color?: string): boolean { - return (PresetColorTypes as any[]).indexOf(color) !== -1; + return (PresetColorTypes as any[]).includes(color); } diff --git a/components/checkbox/Checkbox.tsx b/components/checkbox/Checkbox.tsx index bed9a7e975..03449860d0 100644 --- a/components/checkbox/Checkbox.tsx +++ b/components/checkbox/Checkbox.tsx @@ -102,7 +102,7 @@ const InternalCheckbox: React.ForwardRefRenderFunction registeredValues.indexOf(val) !== -1) + .filter(val => registeredValues.includes(val)) .sort((a, b) => { const indexA = opts.findIndex(opt => opt.value === a); const indexB = opts.findIndex(opt => opt.value === b); @@ -122,7 +122,7 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction= 0; + const isIllegalName = formItemNameBlackList.includes(mergedId); return isIllegalName ? `${defaultItemNamePrefixCls}_${mergedId}` : mergedId; } diff --git a/components/progress/progress.tsx b/components/progress/progress.tsx index e0bb06a3e9..3d995b9440 100644 --- a/components/progress/progress.tsx +++ b/components/progress/progress.tsx @@ -75,7 +75,7 @@ const Progress: React.FC = (props: ProgressProps) => { function getProgressStatus() { const { status } = props; - if (ProgressStatuses.indexOf(status!) < 0 && getPercentNumber() >= 100) { + if (!ProgressStatuses.includes(status!) && getPercentNumber() >= 100) { return 'success'; } return status || 'normal'; @@ -119,7 +119,7 @@ const Progress: React.FC = (props: ProgressProps) => { const strokeColorNotArray = Array.isArray(strokeColor) ? strokeColor[0] : strokeColor; const strokeColorNotGradient = typeof strokeColor === 'string' || Array.isArray(strokeColor) ? strokeColor : undefined; - let progress; + let progress: React.ReactNode; // Render progress shape if (type === 'line') { progress = steps ? ( diff --git a/components/statistic/utils.tsx b/components/statistic/utils.tsx index 600abbe27f..91027740f4 100644 --- a/components/statistic/utils.tsx +++ b/components/statistic/utils.tsx @@ -41,7 +41,7 @@ export function formatTimeStr(duration: number, format: string) { const templateText = format.replace(escapeRegex, '[]'); const replacedText = timeUnits.reduce((current, [name, unit]) => { - if (current.indexOf(name) !== -1) { + if (current.includes(name)) { const value = Math.floor(leftDuration / unit); leftDuration -= value * unit; return current.replace(new RegExp(`${name}+`, 'g'), (match: string) => { diff --git a/components/table/Table.tsx b/components/table/Table.tsx index d08d1a5fb2..1c378c5ab7 100644 --- a/components/table/Table.tsx +++ b/components/table/Table.tsx @@ -482,8 +482,8 @@ function InternalTable( const defaultPosition = direction === 'rtl' ? 'left' : 'right'; const { position } = mergedPagination; if (position !== null && Array.isArray(position)) { - const topPos = position.find(p => p.indexOf('top') !== -1); - const bottomPos = position.find(p => p.indexOf('bottom') !== -1); + const topPos = position.find(p => p.includes('top')); + const bottomPos = position.find(p => p.includes('bottom')); const isDisable = position.every(p => `${p}` === 'none'); if (!topPos && !bottomPos && !isDisable) { bottomPaginationNode = renderPagination(defaultPosition); diff --git a/components/transfer/ListBody.tsx b/components/transfer/ListBody.tsx index d111f30f2b..e5f57703c3 100644 --- a/components/transfer/ListBody.tsx +++ b/components/transfer/ListBody.tsx @@ -71,7 +71,7 @@ class ListBody extends React.Component< onItemSelect = (item: RecordType) => { const { onItemSelect, selectedKeys } = this.props; - const checked = selectedKeys.indexOf(item.key) >= 0; + const checked = selectedKeys.includes(item.key); onItemSelect(item.key, !checked); }; @@ -144,7 +144,7 @@ class ListBody extends React.Component< > {this.getItems().map(({ renderedEl, renderedText, item }: RenderedItem) => { const { disabled } = item; - const checked = selectedKeys.indexOf(item.key) >= 0; + const checked = selectedKeys.includes(item.key); return ( extends React.Com const { selectedKeys = [], targetKeys = [] } = props; this.state = { - sourceSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) === -1), - targetSelectedKeys: selectedKeys.filter(key => targetKeys.indexOf(key) > -1), + sourceSelectedKeys: selectedKeys.filter(key => !targetKeys.includes(key)), + targetSelectedKeys: selectedKeys.filter(key => targetKeys.includes(key)), }; } @@ -198,7 +198,7 @@ class Transfer extends React.Com const newTargetKeys = direction === 'right' ? newMoveKeys.concat(targetKeys) - : targetKeys.filter(targetKey => newMoveKeys.indexOf(targetKey) === -1); + : targetKeys.filter(targetKey => !newMoveKeys.includes(targetKey)); // empty checked keys const oppositeDirection = direction === 'right' ? 'left' : 'right'; @@ -214,13 +214,13 @@ class Transfer extends React.Com onItemSelectAll = (direction: TransferDirection, selectedKeys: string[], checkAll: boolean) => { this.setStateKeys(direction, prevKeys => { - let mergedCheckedKeys = []; + let mergedCheckedKeys: string[] = []; if (checkAll) { // Merge current keys with origin key - mergedCheckedKeys = Array.from(new Set([...prevKeys, ...selectedKeys])); + mergedCheckedKeys = Array.from(new Set([...prevKeys, ...selectedKeys])); } else { // Remove current keys from origin keys - mergedCheckedKeys = prevKeys.filter((key: string) => selectedKeys.indexOf(key) === -1); + mergedCheckedKeys = prevKeys.filter(key => !selectedKeys.includes(key)); } this.handleSelectChange(direction, mergedCheckedKeys); diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index 00f9b5c685..a6e132b64d 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -109,7 +109,7 @@ export default class TransferList< if (checkedKeys.length === 0) { return 'none'; } - if (filteredItems.every(item => checkedKeys.indexOf(item.key) >= 0 || !!item.disabled)) { + if (filteredItems.every(item => checkedKeys.includes(item.key) || !!item.disabled)) { return 'all'; } return 'part'; @@ -161,7 +161,7 @@ export default class TransferList< if (filterOption) { return filterOption(filterValue, item); } - return text.indexOf(filterValue) >= 0; + return text.includes(filterValue); }; // =============================== Render =============================== diff --git a/components/tree/utils/dictUtil.ts b/components/tree/utils/dictUtil.ts index f1411c6a7e..bc6cfa0343 100644 --- a/components/tree/utils/dictUtil.ts +++ b/components/tree/utils/dictUtil.ts @@ -65,12 +65,7 @@ export function calcRangeKeys({ // Append selection keys.push(key); } - - if (expandedKeys.indexOf(key) === -1) { - return false; - } - - return true; + return expandedKeys.includes(key); }); return keys; diff --git a/components/typography/Title.tsx b/components/typography/Title.tsx index 2e0ab33b1d..1cd1f84246 100644 --- a/components/typography/Title.tsx +++ b/components/typography/Title.tsx @@ -19,7 +19,7 @@ const Title = React.forwardRef((props, ref) => { const { level = 1, ...restProps } = props; let component: keyof JSX.IntrinsicElements; - if (TITLE_ELE_LIST.indexOf(level) !== -1) { + if (TITLE_ELE_LIST.includes(level)) { component = `h${level}`; } else { warning( diff --git a/components/typography/__tests__/index.test.tsx b/components/typography/__tests__/index.test.tsx index 703efec890..ab2f767f24 100644 --- a/components/typography/__tests__/index.test.tsx +++ b/components/typography/__tests__/index.test.tsx @@ -262,14 +262,14 @@ describe('Typography', () => { , ); - if (triggerType === undefined || triggerType.indexOf('icon') !== -1) { + if (triggerType === undefined || triggerType.includes('icon')) { if (icon) { expect(wrapper.querySelectorAll('.anticon-highlight').length).toBeGreaterThan(0); } else { expect(wrapper.querySelectorAll('.anticon-edit').length).toBeGreaterThan(0); } - if (triggerType === undefined || triggerType.indexOf('text') === -1) { + if (triggerType === undefined || !triggerType.includes('text')) { fireEvent.click(wrapper.firstChild!); expect(onStart).not.toHaveBeenCalled(); } @@ -295,15 +295,15 @@ describe('Typography', () => { fireEvent.click(wrapper.querySelectorAll('.ant-typography-edit')[0]); expect(onStart).toHaveBeenCalled(); - if (triggerType !== undefined && triggerType.indexOf('text') !== -1) { + if (triggerType !== undefined && triggerType.includes('text')) { fireEvent.keyDown(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC }); fireEvent.keyUp(wrapper.querySelector('textarea')!, { keyCode: KeyCode.ESC }); expect(onChange).not.toHaveBeenCalled(); } } - if (triggerType !== undefined && triggerType.indexOf('text') !== -1) { - if (triggerType.indexOf('icon') === -1) { + if (triggerType !== undefined && triggerType.includes('text')) { + if (!triggerType.includes('icon')) { expect(wrapper.querySelectorAll('.anticon-highlight').length).toBe(0); expect(wrapper.querySelectorAll('.anticon-edit').length).toBe(0); } diff --git a/scripts/generate-authors.js b/scripts/generate-authors.js index 02ede750bd..716ecf8637 100644 --- a/scripts/generate-authors.js +++ b/scripts/generate-authors.js @@ -21,7 +21,7 @@ async function execute() { logs = _.remove(logs, ({ author_email: email }) => { for (let i = 0; i < excludes.length; i++) { const item = excludes[i]; - if (email.indexOf(item) !== -1) { + if (email.includes(item)) { return false; } } diff --git a/site/theme/template/Color/Palette.jsx b/site/theme/template/Color/Palette.jsx index f7bbb6ac49..cfff5d67ca 100644 --- a/site/theme/template/Color/Palette.jsx +++ b/site/theme/template/Color/Palette.jsx @@ -19,7 +19,7 @@ export default class Palette extends React.Component { this.hexColors = {}; Object.keys(this.colorNodes).forEach(key => { const computedColor = getComputedStyle(this.colorNodes[key])['background-color']; - if (computedColor.indexOf('rgba') >= 0) { + if (computedColor.includes('rgba')) { this.hexColors[key] = computedColor; } else { this.hexColors[key] = rgbToHex(computedColor); diff --git a/site/theme/template/Content/index.jsx b/site/theme/template/Content/index.jsx index b5129b4215..8e5a7b3c04 100644 --- a/site/theme/template/Content/index.jsx +++ b/site/theme/template/Content/index.jsx @@ -3,7 +3,7 @@ import MainContent from './MainContent'; import * as utils from '../utils'; function isChangelog(pathname) { - return pathname.indexOf('changelog') >= 0; + return pathname.includes('changelog'); } export default collect(async nextProps => { From be1a51e5fc7aeba4a6bcd8ed2748bf90080507ad Mon Sep 17 00:00:00 2001 From: hms181231 Date: Fri, 21 Oct 2022 15:06:11 +0800 Subject: [PATCH 05/27] test: Update form test case (#38143) --- components/form/__tests__/list.test.tsx | 117 +++++++++++++----------- 1 file changed, 65 insertions(+), 52 deletions(-) diff --git a/components/form/__tests__/list.test.tsx b/components/form/__tests__/list.test.tsx index 0010d782f7..671ada9994 100644 --- a/components/form/__tests__/list.test.tsx +++ b/components/form/__tests__/list.test.tsx @@ -1,27 +1,59 @@ import React from 'react'; import type { FormListFieldData, FormListOperation } from '..'; import Form from '..'; -import { fireEvent, render, sleep, act } from '../../../tests/utils'; +import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import Button from '../../button'; import Input from '../../input'; describe('Form.List', () => { - const change = async ( - wrapper: ReturnType['container'], - index: number, + // const change = async ( + // wrapper: ReturnType['container'], + // index: number, + // value: string, + // ) => { + // fireEvent.change(wrapper.getElementsByClassName('ant-input')?.[index], { target: { value } }); + // await sleep(); + // }; + + const changeValue = async ( + input: HTMLElement | null | number, value: string, + advTimer = 1000, ) => { - fireEvent.change(wrapper.getElementsByClassName('ant-input')?.[index], { target: { value } }); - await sleep(); + let element: HTMLElement; + + if (typeof input === 'number') { + element = document.querySelectorAll('input')[input]; + } + + expect(element!).toBeTruthy(); + + fireEvent.change(element!, { + target: { + value, + }, + }); + + if (advTimer) { + await waitFakeTimer(advTimer / 20); + } }; + beforeEach(() => { + document.body.innerHTML = ''; + jest.useFakeTimers(); + }); + + afterAll(() => { + jest.clearAllTimers(); + jest.useRealTimers(); + }); + const testList = ( name: string, renderField: (value: FormListFieldData) => React.ReactNode, ): void => { it(name, async () => { - jest.useFakeTimers(); - const { container } = render(
@@ -39,39 +71,31 @@ describe('Form.List', () => { , ); - function operate(className: string) { + async function operate(className: string) { fireEvent.click(container.querySelector(className)!); - act(() => { - jest.runAllTimers(); - }); + await waitFakeTimer(); } - operate('.add'); - expect(container.getElementsByClassName('ant-input').length).toBe(1); + await operate('.add'); + expect(container.querySelectorAll('.ant-input').length).toBe(1); - operate('.add'); - expect(container.getElementsByClassName('ant-input').length).toBe(2); + await operate('.add'); + expect(container.querySelectorAll('.ant-input').length).toBe(2); - operate('.add'); - expect(container.getElementsByClassName('ant-input').length).toBe(3); + await operate('.add'); + expect(container.querySelectorAll('.ant-input').length).toBe(3); - await change(container, 2, ''); - for (let i = 0; i < 10; i += 1) { - act(() => { - jest.runAllTimers(); - }); - } - expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(1); + await changeValue(2, ''); - operate('.remove-0'); - expect(container.getElementsByClassName('ant-input').length).toBe(2); - expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(1); + expect(container.querySelectorAll('.ant-form-item-explain').length).toBe(1); - operate('.remove-1'); - expect(container.getElementsByClassName('ant-input').length).toBe(1); - expect(container.getElementsByClassName('ant-form-item-explain').length).toBe(0); + await operate('.remove-0'); + expect(container.querySelectorAll('.ant-input').length).toBe(2); + expect(container.querySelectorAll('.ant-form-item-explain').length).toBe(1); - jest.useRealTimers(); + await operate('.remove-1'); + expect(container.querySelectorAll('.ant-input').length).toBe(1); + expect(container.querySelectorAll('.ant-form-item-explain').length).toBe(0); }); }; @@ -131,28 +155,26 @@ describe('Form.List', () => { ); await click(container, '.add'); - await change(container, 0, 'input1'); + await changeValue(0, 'input1'); fireEvent.submit(container.querySelector('form')!); - await sleep(); + await waitFakeTimer(); expect(onFinish).toHaveBeenLastCalledWith({ list: ['input1'] }); await click(container, '.add'); - await change(container, 1, 'input2'); + await changeValue(1, 'input2'); await click(container, '.add'); - await change(container, 2, 'input3'); + await changeValue(2, 'input3'); fireEvent.submit(container.querySelector('form')!); - await sleep(); + await waitFakeTimer(); expect(onFinish).toHaveBeenLastCalledWith({ list: ['input1', 'input2', 'input3'] }); await click(container, '.remove'); // will remove first input fireEvent.submit(container.querySelector('form')!); - await sleep(); + await waitFakeTimer(); expect(onFinish).toHaveBeenLastCalledWith({ list: ['input2', 'input3'] }); }); it('list errors', async () => { - jest.useFakeTimers(); - let operation: FormListOperation; const { container } = render(
@@ -177,15 +199,8 @@ describe('Form.List', () => { ); async function addItem() { - await act(async () => { - operation.add(); - await sleep(100); - jest.runAllTimers(); - }); - - act(() => { - jest.runAllTimers(); - }); + operation.add(); + await waitFakeTimer(); } await addItem(); @@ -193,8 +208,6 @@ describe('Form.List', () => { await addItem(); expect(container.getElementsByClassName('ant-form-item-explain div')).toHaveLength(0); - - jest.useRealTimers(); }); it('should render empty without errors', () => { @@ -243,7 +256,7 @@ describe('Form.List', () => { const { container } = render(); fireEvent.click(container.querySelector('button')!); - await sleep(); + await waitFakeTimer(); expect(errorSpy).not.toHaveBeenCalled(); From 30d2a248983b8c96d3e413c3c675ab2385806daa Mon Sep 17 00:00:00 2001 From: hms181231 Date: Fri, 21 Oct 2022 15:07:44 +0800 Subject: [PATCH 06/27] test: Update Dropdown test case (#38144) --- components/dropdown/__tests__/index.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/dropdown/__tests__/index.test.tsx b/components/dropdown/__tests__/index.test.tsx index 1bda134bc7..68dd830cfd 100644 --- a/components/dropdown/__tests__/index.test.tsx +++ b/components/dropdown/__tests__/index.test.tsx @@ -4,7 +4,7 @@ import Dropdown from '..'; import type { DropDownProps } from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { act, fireEvent, render, sleep } from '../../../tests/utils'; +import { act, fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import Menu from '../../menu'; let triggerProps: TriggerProps; @@ -55,6 +55,7 @@ describe('Dropdown', () => { }); it('support Menu expandIcon', async () => { + jest.useFakeTimers(); const props: DropDownProps = { overlay: ( }> @@ -73,8 +74,9 @@ describe('Dropdown', () => { , ); - await sleep(500); + await waitFakeTimer(); expect(container.querySelectorAll('#customExpandIcon').length).toBe(1); + jest.useRealTimers(); }); it('should warn if use topCenter or bottomCenter', () => { From dae4b673206f1ca07dca72d55c5426aa91f48bf1 Mon Sep 17 00:00:00 2001 From: hms181231 Date: Fri, 21 Oct 2022 15:09:21 +0800 Subject: [PATCH 07/27] test: Update Collapse test case (#38145) --- components/collapse/__tests__/index.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/components/collapse/__tests__/index.test.tsx b/components/collapse/__tests__/index.test.tsx index a054eca1ba..46fb8a0979 100644 --- a/components/collapse/__tests__/index.test.tsx +++ b/components/collapse/__tests__/index.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; -import { sleep, render, fireEvent } from '../../../tests/utils'; +import { waitFakeTimer, render, fireEvent } from '../../../tests/utils'; import { resetWarned } from '../../_util/warning'; describe('Collapse', () => { @@ -66,6 +66,7 @@ describe('Collapse', () => { }); it('could be expand and collapse', async () => { + jest.useFakeTimers(); const { container } = render( @@ -77,10 +78,11 @@ describe('Collapse', () => { container.querySelector('.ant-collapse-item')?.classList.contains('ant-collapse-item-active'), ).toBe(false); fireEvent.click(container.querySelector('.ant-collapse-header')!); - await sleep(400); + await waitFakeTimer(); expect( container.querySelector('.ant-collapse-item')?.classList.contains('ant-collapse-item-active'), ).toBe(true); + jest.useRealTimers(); }); it('could override default openMotion', () => { From 5159bb908401c41a06784537f4341d4ade4d4ee2 Mon Sep 17 00:00:00 2001 From: hms181231 Date: Fri, 21 Oct 2022 15:09:48 +0800 Subject: [PATCH 08/27] test: Update Carousel test case (#38146) --- components/carousel/__tests__/index.test.tsx | 22 +++++++------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/components/carousel/__tests__/index.test.tsx b/components/carousel/__tests__/index.test.tsx index 85e85fc458..3865f8f94f 100644 --- a/components/carousel/__tests__/index.test.tsx +++ b/components/carousel/__tests__/index.test.tsx @@ -3,7 +3,7 @@ import type { CarouselRef } from '..'; import Carousel from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { sleep, render, act } from '../../../tests/utils'; +import { waitFakeTimer, render } from '../../../tests/utils'; describe('Carousel', () => { mountTest(Carousel); @@ -17,14 +17,6 @@ describe('Carousel', () => { jest.useRealTimers(); }); - function runAllTimersWithAct(times = 1) { - for (let i = 0; i < times; i++) { - act(() => { - jest.runAllTimers(); - }); - } - } - it('should has innerSlider', () => { const ref = React.createRef(); render( @@ -51,16 +43,16 @@ describe('Carousel', () => { expect(typeof goTo).toBe('function'); expect(ref.current?.innerSlider.state.currentSlide).toBe(0); ref.current?.goTo(2); - runAllTimersWithAct(1); + await waitFakeTimer(); expect(ref.current?.innerSlider.state.currentSlide).toBe(2); // wait for animation to be finished - runAllTimersWithAct(2); + await waitFakeTimer(); ref.current?.prev(); - runAllTimersWithAct(1); + await waitFakeTimer(); expect(ref.current?.innerSlider.state.currentSlide).toBe(1); - runAllTimersWithAct(2); + await waitFakeTimer(); ref.current?.next(); - runAllTimersWithAct(1); + await waitFakeTimer(); expect(ref.current?.innerSlider.state.currentSlide).toBe(2); }); @@ -77,7 +69,7 @@ describe('Carousel', () => { const spy = jest.spyOn(ref.current?.innerSlider, 'autoPlay'); window.resizeTo(1000, window.outerHeight); expect(spy).not.toHaveBeenCalled(); - await sleep(500); + await waitFakeTimer(); expect(spy).toHaveBeenCalled(); }); From 2e389d73ab82009cad92fd33598df7c4165ac61b Mon Sep 17 00:00:00 2001 From: hms181231 Date: Fri, 21 Oct 2022 15:10:20 +0800 Subject: [PATCH 09/27] test: Update back-top test case (#38147) --- components/back-top/__tests__/index.test.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/components/back-top/__tests__/index.test.tsx b/components/back-top/__tests__/index.test.tsx index 0ff9cea619..a4e625e4b5 100644 --- a/components/back-top/__tests__/index.test.tsx +++ b/components/back-top/__tests__/index.test.tsx @@ -2,13 +2,15 @@ import React from 'react'; import BackTop from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { fireEvent, render, sleep } from '../../../tests/utils'; +import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; describe('BackTop', () => { mountTest(BackTop); rtlTest(BackTop); it('should scroll to top after click it', async () => { + jest.useFakeTimers(); + const { container } = render(); const scrollToSpy = jest.spyOn(window, 'scrollTo').mockImplementation((_, y) => { window.scrollY = y; @@ -18,9 +20,12 @@ describe('BackTop', () => { window.scrollTo(0, 400); expect(document.documentElement.scrollTop).toBe(400); fireEvent.click(container.querySelector('.ant-back-top')!); - await sleep(500); + await waitFakeTimer(); expect(document.documentElement.scrollTop).toBe(0); scrollToSpy.mockRestore(); + + jest.clearAllTimers(); + jest.useRealTimers(); }); it('support onClick', async () => { From 92acca41dec01b65c987bf13f3282cd265d27e14 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: Fri, 21 Oct 2022 16:25:42 +0800 Subject: [PATCH 10/27] docs: Add faq about breaking change (#38153) * docs: Add faq about breaking change * Update docs/react/faq.zh-CN.md Co-authored-by: afc163 * docs: update * docs: more desc Co-authored-by: afc163 --- docs/react/faq.en-US.md | 12 ++++++++++++ docs/react/faq.zh-CN.md | 12 ++++++++++++ 2 files changed, 24 insertions(+) diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md index 6305fe6360..5cd52ba748 100644 --- a/docs/react/faq.en-US.md +++ b/docs/react/faq.en-US.md @@ -49,6 +49,18 @@ See: https://ant.design/docs/react/customize-theme . While you can override a component's style, we don't recommend doing so. antd is not only a set of React components, but also a design specification as well. +## How to avoid breaking change when update version? + +antd will avoid breaking change in minor & patch version. You can safe do follow things: + +- Official demo usage +- FAQ suggestion. Including codesandbox sample, marked as FAQ issue + +And which you should avoid to do: + +- Bug as feature. It will break in any other case (e.g. Use div as Tabs children) +- Use magic code to realize requirement but which can be realized with normal API + ## How do I replace Moment.js with Day.js to reduce bundle size？ Please refer to [Replace Moment.js](/docs/react/replace-moment). diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index b328d25ec3..4e64a56f81 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -49,6 +49,18 @@ title: FAQ 你可以覆盖它们的样式，但是我们不推荐这么做。antd 是一系列 React 组件，但同样是一套设计规范。 +## 如何避免升级导致的破坏性变更？ + +antd 在 minor 和 patch 版本迭代中会避免引入破坏性变更，遵从以下原则会确保不会破坏你的代码： + +- 使用出现在官方 Demo 中的写法 +- FAQ 中出现的解法，包含代码片段以及 codesandbox 示例、issue 中当前版本标记 FAQ label 的 + +而下述变更则需要开发者自行校验： + +- 特定场景的错误用法，BUG as Feature（例如 Tabs 下直接包 div 的用法） +- 可以通过正常用法实现功能需求却魔改的 + ## 如何使用 Day.js 替换 Moment.js 来减小打包大小？ 可以参考[替换 Moment.js](/docs/react/replace-moment)。 From 8054769307de55194174d05ac50aac55bb1bb8eb Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 22 Oct 2022 15:00:26 +0800 Subject: [PATCH 11/27] refactor: delete defaultprops (#38154) * refactor: delete defaultprops * test: add test * fix: fix --- components/transfer/__tests__/list.test.tsx | 10 ++++++++++ components/transfer/list.tsx | 12 +++--------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/components/transfer/__tests__/list.test.tsx b/components/transfer/__tests__/list.test.tsx index 865ff42d37..1b8f65ec11 100644 --- a/components/transfer/__tests__/list.test.tsx +++ b/components/transfer/__tests__/list.test.tsx @@ -14,6 +14,11 @@ const listCommonProps: TransferListProps = { notFoundContent: 'Not Found', } as TransferListProps; +const listProps: TransferListProps = { + ...listCommonProps, + dataSource: undefined as unknown as any[], +}; + describe('Transfer.List', () => { it('should render correctly', () => { const { container } = render(); @@ -43,4 +48,9 @@ describe('Transfer.List', () => { expect(instance.current?.handleFilter({ target: 'test' })).toBe(undefined); expect(handleFilter).toHaveBeenCalled(); }); + it('should render correctly when dataSource is not exists', () => { + expect(() => { + render(); + }).not.toThrow(); + }); }); diff --git a/components/transfer/list.tsx b/components/transfer/list.tsx index a6e132b64d..725ef49dc4 100644 --- a/components/transfer/list.tsx +++ b/components/transfer/list.tsx @@ -81,12 +81,6 @@ interface TransferListState { export default class TransferList< RecordType extends KeyWiseTransferItem, > extends React.PureComponent, TransferListState> { - static defaultProps = { - dataSource: [], - titleText: '', - showSearch: false, - }; - timer: number; triggerScrollTimer: number; @@ -305,12 +299,12 @@ export default class TransferList< const { filterValue } = this.state; const { prefixCls, - dataSource, - titleText, + dataSource = [], + titleText = '', checkedKeys, disabled, footer, - showSearch, + showSearch = false, style, searchPlaceholder, notFoundContent, From a302d128e25927197a47d1bc35706e815d500c93 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Sat, 22 Oct 2022 18:43:36 +0800 Subject: [PATCH 12/27] refactor: delete defaultprops (#38164) * refactor: delete defaultprops * fix: fix eslint * fix: fix eslint * fix: fix eslint --- .../transfer/__tests__/customize.test.tsx | 3 ++- components/transfer/demo/table-transfer.md | 4 ++- components/transfer/index.tsx | 26 +++++++------------ 3 files changed, 14 insertions(+), 19 deletions(-) diff --git a/components/transfer/__tests__/customize.test.tsx b/components/transfer/__tests__/customize.test.tsx index 6731a92b9d..aae9558413 100644 --- a/components/transfer/__tests__/customize.test.tsx +++ b/components/transfer/__tests__/customize.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render } from '../../../tests/utils'; +import type { TransferProps } from '../index'; import Transfer from '../index'; describe('Transfer.Customize', () => { @@ -15,7 +16,7 @@ describe('Transfer.Customize', () => { it('props#body does not work anymore', () => { const body = jest.fn(); - const props = { body }; + const props = { body } as TransferProps; render(); expect(errorSpy).not.toHaveBeenCalled(); expect(body).not.toHaveBeenCalled(); diff --git a/components/transfer/demo/table-transfer.md b/components/transfer/demo/table-transfer.md index 3ba3ec8b2a..06ae3d7a3b 100644 --- a/components/transfer/demo/table-transfer.md +++ b/components/transfer/demo/table-transfer.md @@ -29,9 +29,11 @@ interface RecordType { } interface DataType { + key: string; title: string; - tag: string; description: string; + disabled: boolean; + tag: string; } interface TableTransferProps extends TransferProps { diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 05d85b5ee0..9c4eb45938 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -69,7 +69,7 @@ export interface TransferProps { prefixCls?: string; className?: string; disabled?: boolean; - dataSource: RecordType[]; + dataSource?: RecordType[]; targetKeys?: string[]; selectedKeys?: string[]; render?: TransferRender; @@ -116,13 +116,6 @@ class Transfer extends React.Com static Search = Search; - static defaultProps = { - dataSource: [], - locale: {}, - showSearch: false, - listStyle: () => {}, - }; - static getDerivedStateFromProps({ selectedKeys, targetKeys, @@ -180,11 +173,10 @@ class Transfer extends React.Com return this.props.titles ?? transferLocale.titles ?? []; } - getLocale = (transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) => ({ - ...transferLocale, - notFoundContent: renderEmpty('Transfer'), - ...this.props.locale, - }); + getLocale = (transferLocale: TransferLocale, renderEmpty: RenderEmptyHandler) => { + const { locale = {} } = this.props; + return { ...transferLocale, notFoundContent: renderEmpty('Transfer'), ...locale }; + }; moveTo = (direction: TransferDirection) => { const { targetKeys = [], dataSource = [], onChange } = this.props; @@ -192,7 +184,7 @@ class Transfer extends React.Com const moveKeys = direction === 'right' ? sourceSelectedKeys : targetSelectedKeys; // filter the disabled options const newMoveKeys = moveKeys.filter( - (key: string) => !dataSource.some(data => !!(key === data.key && data.disabled)), + key => !dataSource.some(data => !!(key === data.key && data.disabled)), ); // move items to target box const newTargetKeys = @@ -324,7 +316,7 @@ class Transfer extends React.Com }; separateDataSource() { - const { dataSource, rowKey, targetKeys = [] } = this.props; + const { dataSource = [], rowKey, targetKeys = [] } = this.props; const leftDataSource: KeyWise[] = []; const rightDataSource: KeyWise[] = new Array(targetKeys.length); @@ -365,10 +357,10 @@ class Transfer extends React.Com className, disabled, operations = [], - showSearch, + showSearch = false, footer, style, - listStyle, + listStyle = {}, operationStyle, filterOption, render, From ba3ab898d2251d582468231589b5933c64689a6f Mon Sep 17 00:00:00 2001 From: Marcia Sun Date: Sat, 22 Oct 2022 19:11:31 +0800 Subject: [PATCH 13/27] fix: incorrect transform-origin of tooltips (#38159) For tooltips with a placement value like 'topRight' or 'bottomLeft', the previous code would calculate an incorrect transform-origin, which is fixed here. --- components/tooltip/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 8dcc973b15..5f2a72d1b3 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -237,14 +237,14 @@ const Tooltip = React.forwardRef((props, ref) => { const transformOrigin = { top: '50%', left: '50%' }; - if (['top', 'Bottom'].includes(placement)) { + if (/top|Bottom/.test(placement)) { transformOrigin.top = `${rect.height - align.offset![1]}px`; - } else if (['Top', 'bottom'].includes(placement)) { + } else if (/Top|bottom/.test(placement)) { transformOrigin.top = `${-align.offset![1]}px`; } - if (['left', 'Right'].includes(placement)) { + if (/left|Right/.test(placement)) { transformOrigin.left = `${rect.width - align.offset![0]}px`; - } else if (['right', 'Left'].includes(placement)) { + } else if (/right|Left/.test(placement)) { transformOrigin.left = `${-align.offset![0]}px`; } domNode.style.transformOrigin = `${transformOrigin.left} ${transformOrigin.top}`; From 80ad128aeb92ad5b8b36a9e947745dd7c86ba1ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 23 Oct 2022 15:23:16 +0800 Subject: [PATCH 14/27] fix: add titles for transer in locale (#38168) Co-authored-by: tangwenhui --- components/locale/ar_EG.tsx | 1 + components/locale/bg_BG.tsx | 1 + components/locale/da_DK.tsx | 1 + components/locale/el_GR.tsx | 1 + components/locale/fi_FI.tsx | 1 + components/locale/fr_BE.tsx | 1 + components/locale/fr_CA.tsx | 1 + components/locale/gl_ES.tsx | 1 + components/locale/he_IL.tsx | 1 + components/locale/hu_HU.tsx | 1 + components/locale/is_IS.tsx | 1 + components/locale/it_IT.tsx | 4 ++-- components/locale/ja_JP.tsx | 1 + components/locale/km_KH.tsx | 1 + components/locale/kmr_IQ.tsx | 1 + components/locale/ko_KR.tsx | 1 + components/locale/ku_IQ.tsx | 1 + components/locale/lv_LV.tsx | 1 + components/locale/mk_MK.tsx | 1 + components/locale/mn_MN.tsx | 1 + components/locale/ms_MY.tsx | 1 + components/locale/sl_SI.tsx | 1 + components/locale/vi_VN.tsx | 1 + components/locale/zh_CN.tsx | 1 + components/locale/zh_HK.tsx | 1 + components/locale/zh_TW.tsx | 1 + 26 files changed, 27 insertions(+), 2 deletions(-) diff --git a/components/locale/ar_EG.tsx b/components/locale/ar_EG.tsx index 60e26b4944..9be2083032 100644 --- a/components/locale/ar_EG.tsx +++ b/components/locale/ar_EG.tsx @@ -40,6 +40,7 @@ const localeValues: Locale = { cancelText: 'إلغاء', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'ابحث هنا', itemUnit: 'عنصر', itemsUnit: 'عناصر', diff --git a/components/locale/bg_BG.tsx b/components/locale/bg_BG.tsx index f466fc1e79..a745b202f3 100644 --- a/components/locale/bg_BG.tsx +++ b/components/locale/bg_BG.tsx @@ -27,6 +27,7 @@ const localeValues: Locale = { cancelText: 'Отказ', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Търсене', itemUnit: 'избор', itemsUnit: 'избори', diff --git a/components/locale/da_DK.tsx b/components/locale/da_DK.tsx index 03414142c4..56f03be6f0 100644 --- a/components/locale/da_DK.tsx +++ b/components/locale/da_DK.tsx @@ -37,6 +37,7 @@ const localeValues: Locale = { cancelText: 'Afbryd', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Søg her', itemUnit: 'element', itemsUnit: 'elementer', diff --git a/components/locale/el_GR.tsx b/components/locale/el_GR.tsx index 644f7c6491..ba5e26b3da 100644 --- a/components/locale/el_GR.tsx +++ b/components/locale/el_GR.tsx @@ -27,6 +27,7 @@ const localeValues: Locale = { cancelText: 'Άκυρο', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Αναζήτηση', itemUnit: 'αντικείμενο', itemsUnit: 'αντικείμενα', diff --git a/components/locale/fi_FI.tsx b/components/locale/fi_FI.tsx index df9207831d..6b0cb7cbec 100644 --- a/components/locale/fi_FI.tsx +++ b/components/locale/fi_FI.tsx @@ -31,6 +31,7 @@ const localeValues: Locale = { cancelText: 'Peruuta', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Etsi täältä', itemUnit: 'kohde', itemsUnit: 'kohdetta', diff --git a/components/locale/fr_BE.tsx b/components/locale/fr_BE.tsx index d234603cf1..dd520c9f1b 100644 --- a/components/locale/fr_BE.tsx +++ b/components/locale/fr_BE.tsx @@ -26,6 +26,7 @@ const localeValues: Locale = { cancelText: 'Annuler', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Recherche', itemUnit: 'élément', itemsUnit: 'éléments', diff --git a/components/locale/fr_CA.tsx b/components/locale/fr_CA.tsx index 21eafa6624..bee3c7a04e 100644 --- a/components/locale/fr_CA.tsx +++ b/components/locale/fr_CA.tsx @@ -35,6 +35,7 @@ const localeValues: Locale = { cancelText: 'Annuler', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Rechercher', itemUnit: 'élément', itemsUnit: 'éléments', diff --git a/components/locale/gl_ES.tsx b/components/locale/gl_ES.tsx index b6b59a0899..8e1d135901 100644 --- a/components/locale/gl_ES.tsx +++ b/components/locale/gl_ES.tsx @@ -34,6 +34,7 @@ const localeValues: Locale = { cancelText: 'Cancelar', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Buscar aquí', itemUnit: 'elemento', itemsUnit: 'elementos', diff --git a/components/locale/he_IL.tsx b/components/locale/he_IL.tsx index b9c809f627..c0fc9a6f87 100644 --- a/components/locale/he_IL.tsx +++ b/components/locale/he_IL.tsx @@ -40,6 +40,7 @@ const localeValues: Locale = { cancelText: 'ביטול', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'חפש כאן', itemUnit: 'פריט', itemsUnit: 'פריטים', diff --git a/components/locale/hu_HU.tsx b/components/locale/hu_HU.tsx index cbdc228b10..d3385bf094 100644 --- a/components/locale/hu_HU.tsx +++ b/components/locale/hu_HU.tsx @@ -28,6 +28,7 @@ const localeValues: Locale = { cancelText: 'Visszavonás', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Keresés', itemUnit: 'elem', itemsUnit: 'elemek', diff --git a/components/locale/is_IS.tsx b/components/locale/is_IS.tsx index ce2905fc95..0ecec8f953 100644 --- a/components/locale/is_IS.tsx +++ b/components/locale/is_IS.tsx @@ -27,6 +27,7 @@ const localeValues: Locale = { cancelText: 'Hætta við', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Leita hér', itemUnit: 'færsla', itemsUnit: 'færslur', diff --git a/components/locale/it_IT.tsx b/components/locale/it_IT.tsx index e3b968839a..f5ccc038af 100644 --- a/components/locale/it_IT.tsx +++ b/components/locale/it_IT.tsx @@ -45,7 +45,7 @@ const localeValues: Locale = { cancelText: 'Annulla', }, Transfer: { - titles: ['', ''], + titles: ['', ''], searchPlaceholder: 'Cerca qui', itemUnit: 'elemento', itemsUnit: 'elementi', @@ -75,7 +75,7 @@ const localeValues: Locale = { copied: 'copia effettuata', expand: 'espandi', }, - PageHeader: { + PageHeader: { back: 'Torna', }, Form: { diff --git a/components/locale/ja_JP.tsx b/components/locale/ja_JP.tsx index 5e41daac51..2ee099d323 100644 --- a/components/locale/ja_JP.tsx +++ b/components/locale/ja_JP.tsx @@ -38,6 +38,7 @@ const localeValues: Locale = { cancelText: 'キャンセル', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'ここを検索', itemUnit: 'アイテム', itemsUnit: 'アイテム', diff --git a/components/locale/km_KH.tsx b/components/locale/km_KH.tsx index 33b04c8e84..79663471a7 100644 --- a/components/locale/km_KH.tsx +++ b/components/locale/km_KH.tsx @@ -40,6 +40,7 @@ const localeValues: Locale = { cancelText: 'បោះបង់', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'ស្វែងរកនៅទីនេះ', itemUnit: '', itemsUnit: 'items', diff --git a/components/locale/kmr_IQ.tsx b/components/locale/kmr_IQ.tsx index 8cd6d54bd3..147b15fbe6 100644 --- a/components/locale/kmr_IQ.tsx +++ b/components/locale/kmr_IQ.tsx @@ -27,6 +27,7 @@ const localeValues: Locale = { cancelText: 'Betal ke', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Lêgerîn', itemUnit: 'tişt', itemsUnit: 'tişt', diff --git a/components/locale/ko_KR.tsx b/components/locale/ko_KR.tsx index 647b432074..f02da311ef 100644 --- a/components/locale/ko_KR.tsx +++ b/components/locale/ko_KR.tsx @@ -32,6 +32,7 @@ const localeValues: Locale = { cancelText: '취소', }, Transfer: { + titles: ['', ''], searchPlaceholder: '여기에 검색하세요', itemUnit: '개', itemsUnit: '개', diff --git a/components/locale/ku_IQ.tsx b/components/locale/ku_IQ.tsx index d2384601f5..ca5839e3aa 100755 --- a/components/locale/ku_IQ.tsx +++ b/components/locale/ku_IQ.tsx @@ -31,6 +31,7 @@ const localeValues: Locale = { cancelText: 'Betal ke', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Lêgerîn', itemUnit: 'tişt', itemsUnit: 'tişt', diff --git a/components/locale/lv_LV.tsx b/components/locale/lv_LV.tsx index a7e711638f..26ad88713a 100644 --- a/components/locale/lv_LV.tsx +++ b/components/locale/lv_LV.tsx @@ -27,6 +27,7 @@ const localeValues: Locale = { cancelText: 'Atcelt', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Meklēt šeit', itemUnit: 'vienumu', itemsUnit: 'vienumus', diff --git a/components/locale/mk_MK.tsx b/components/locale/mk_MK.tsx index d0a387cdc9..c523b35c27 100644 --- a/components/locale/mk_MK.tsx +++ b/components/locale/mk_MK.tsx @@ -30,6 +30,7 @@ const localeValues: Locale = { cancelText: 'Откажи', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Пребарај тука', itemUnit: 'предмет', itemsUnit: 'предмети', diff --git a/components/locale/mn_MN.tsx b/components/locale/mn_MN.tsx index d3d6b7f58b..94c5fe4d2d 100644 --- a/components/locale/mn_MN.tsx +++ b/components/locale/mn_MN.tsx @@ -27,6 +27,7 @@ const localeValues: Locale = { cancelText: 'Цуцлах', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Хайх', itemUnit: 'Зүйл', itemsUnit: 'Зүйлүүд', diff --git a/components/locale/ms_MY.tsx b/components/locale/ms_MY.tsx index 736083e283..993c4b9fc2 100644 --- a/components/locale/ms_MY.tsx +++ b/components/locale/ms_MY.tsx @@ -43,6 +43,7 @@ const localeValues: Locale = { cancelText: 'Batal', }, Transfer: { + titles: ['', ''], notFoundContent: 'Tidak dijumpai', searchPlaceholder: 'Carian di sini', itemUnit: 'item', diff --git a/components/locale/sl_SI.tsx b/components/locale/sl_SI.tsx index 74ca51971a..ea02ff43c4 100644 --- a/components/locale/sl_SI.tsx +++ b/components/locale/sl_SI.tsx @@ -27,6 +27,7 @@ const localeValues: Locale = { cancelText: 'Prekliči', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Išči tukaj', itemUnit: 'Objekt', itemsUnit: 'Objektov', diff --git a/components/locale/vi_VN.tsx b/components/locale/vi_VN.tsx index 0af968dd01..369686728a 100644 --- a/components/locale/vi_VN.tsx +++ b/components/locale/vi_VN.tsx @@ -27,6 +27,7 @@ const localeValues: Locale = { cancelText: 'Huỷ', }, Transfer: { + titles: ['', ''], searchPlaceholder: 'Tìm ở đây', itemUnit: 'mục', itemsUnit: 'mục', diff --git a/components/locale/zh_CN.tsx b/components/locale/zh_CN.tsx index 66d38cecad..4750fb6c16 100644 --- a/components/locale/zh_CN.tsx +++ b/components/locale/zh_CN.tsx @@ -45,6 +45,7 @@ const localeValues: Locale = { okText: '确定', }, Transfer: { + titles: ['', ''], searchPlaceholder: '请输入搜索内容', itemUnit: '项', itemsUnit: '项', diff --git a/components/locale/zh_HK.tsx b/components/locale/zh_HK.tsx index f8dce3dbd2..d8eb4800e3 100644 --- a/components/locale/zh_HK.tsx +++ b/components/locale/zh_HK.tsx @@ -42,6 +42,7 @@ const localeValues: Locale = { cancelText: '取消', }, Transfer: { + titles: ['', ''], searchPlaceholder: '搜尋資料', itemUnit: '項目', itemsUnit: '項目', diff --git a/components/locale/zh_TW.tsx b/components/locale/zh_TW.tsx index 6b3445d8e3..07ca16f0e5 100644 --- a/components/locale/zh_TW.tsx +++ b/components/locale/zh_TW.tsx @@ -42,6 +42,7 @@ const localeValues: Locale = { cancelText: '取消', }, Transfer: { + titles: ['', ''], searchPlaceholder: '搜尋資料', itemUnit: '項目', itemsUnit: '項目', From 70232ab10b55426b73dd6bfc0f2a786172e2ed5e Mon Sep 17 00:00:00 2001 From: Chang Wei Date: Sun, 23 Oct 2022 15:26:51 +0800 Subject: [PATCH 15/27] chore: update icon category (#38177) * chore: add icon 'WhatsApp' to category 'logo' * chore: add icon 'Dingtalk' to category 'logo' --- site/theme/template/IconDisplay/fields.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/site/theme/template/IconDisplay/fields.ts b/site/theme/template/IconDisplay/fields.ts index 2e0f954bfe..de37e675cf 100644 --- a/site/theme/template/IconDisplay/fields.ts +++ b/site/theme/template/IconDisplay/fields.ts @@ -200,6 +200,8 @@ const logo = [ 'Yahoo', 'Reddit', 'Sketch', + 'WhatsApp', + 'Dingtalk', ]; const datum = [...direction, ...suggestion, ...editor, ...data, ...logo]; From 21c4bcf40ab3aea8b2681f70c45b23a4d37de43b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 23 Oct 2022 15:28:26 +0800 Subject: [PATCH 16/27] fix(table): aria-label should be use the first text content in element when column title is ReactElement in table (#38160) * fix: aria-lable should be use the first text content in element when title is ReactElement * fix: aria-label should be use the first text content in element when title is ReactElement * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: update snapshots * feat: update snapshots Co-authored-by: tangwenhui --- .../table/__tests__/Table.sorter.test.tsx | 26 +++++++++++++++++++ components/table/util.ts | 23 ++++++++++++++++ 2 files changed, 49 insertions(+) diff --git a/components/table/__tests__/Table.sorter.test.tsx b/components/table/__tests__/Table.sorter.test.tsx index 2509419833..8b0d93c5c5 100644 --- a/components/table/__tests__/Table.sorter.test.tsx +++ b/components/table/__tests__/Table.sorter.test.tsx @@ -108,6 +108,32 @@ describe('Table.sorter', () => { expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name sortable'); }); + it('aria-label should be use the first text content in element when title is ReactElement', () => { + const { container } = render( + createTable( + { + sortDirections: ['descend', 'ascend'], + }, + { + title: ( + + Name + kiner + + ), + defaultSortOrder: 'descend', + }, + ), + ); + + const getNameColumn = () => container.querySelector('th'); + fireEvent.click(container.querySelector('.ant-table-column-sorters')!); + expect(getNameColumn()?.getAttribute('aria-sort')).toEqual('ascending'); + expect(getNameColumn()?.getAttribute('aria-label')).toEqual(null); + fireEvent.click(container.querySelector('.ant-table-column-sorters')!); + expect(getNameColumn()?.getAttribute('aria-label')).toEqual('Name sortable'); + }); + it('sort records', () => { const { container } = render(createTable()); const getNameColumn = () => container.querySelector('th'); diff --git a/components/table/util.ts b/components/table/util.ts index 4a355c1ef7..e6394f186e 100644 --- a/components/table/util.ts +++ b/components/table/util.ts @@ -1,4 +1,5 @@ /* eslint-disable import/prefer-default-export */ +import React from 'react'; import type { ColumnTitle, ColumnTitleProps, ColumnType, Key } from './interface'; export function getColumnKey(column: ColumnType, defaultKey: string): Key { @@ -16,6 +17,22 @@ export function getColumnPos(index: number, pos?: string) { return pos ? `${pos}-${index}` : `${index}`; } +/** + * Get first text content in Element + * + * @param node + * @returns + */ +function getElementFirstTextContent(node: React.ReactElement): string { + if (!node || !node.props || !node.props.children) return ''; + if (typeof node.props.children === 'string') return node.props.children; + return ( + node.props.children?.map?.((item: React.ReactElement) => + getElementFirstTextContent(item), + )?.[0] || '' + ); +} + export function renderColumnTitle( title: ColumnTitle, props: ColumnTitleProps, @@ -23,6 +40,12 @@ export function renderColumnTitle( if (typeof title === 'function') { return title(props); } + // fix: #38155 + if (React.isValidElement(title)) { + // if title is a React Element, we should get first text content as result, + // if there has not text content in React Element, return origin title + return getElementFirstTextContent(title) || title; + } return title; } From 072fda0f1574057863e6ea1cb139a595f7ebcf8e Mon Sep 17 00:00:00 2001 From: zz <2418184580@qq.com> Date: Sun, 23 Oct 2022 16:05:31 +0800 Subject: [PATCH 17/27] refactor(Typography.Link): simplify code (#38181) --- components/typography/Link.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/components/typography/Link.tsx b/components/typography/Link.tsx index a576beaad9..36745f0f31 100644 --- a/components/typography/Link.tsx +++ b/components/typography/Link.tsx @@ -16,10 +16,6 @@ const Link = React.forwardRef(({ ellipsis, rel, ...restP '`ellipsis` only supports boolean value.', ); - const baseRef = React.useRef(null); - - React.useImperativeHandle(ref, () => baseRef.current); - const mergedProps = { ...restProps, rel: rel === undefined && restProps.target === '_blank' ? 'noopener noreferrer' : rel, @@ -28,7 +24,7 @@ const Link = React.forwardRef(({ ellipsis, rel, ...restP // @ts-expect-error: https://github.com/ant-design/ant-design/issues/26622 delete mergedProps.navigate; - return ; + return ; }); export default Link; From 2a1f2836f48adbb6ef862a07cc815ae73fd2a4b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 23 Oct 2022 16:06:50 +0800 Subject: [PATCH 18/27] fix: Transfer throw error when`titles` is undefined (#38182) Co-authored-by: tangwenhui --- components/transfer/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 9c4eb45938..771c870403 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -398,7 +398,7 @@ class Transfer extends React.Com
> prefixCls={`${prefixCls}-list`} - titleText={titles[0]} + titleText={titles?.[0]} dataSource={leftDataSource} filterOption={filterOption} style={this.handleListStyle(listStyle, 'left')} @@ -434,7 +434,7 @@ class Transfer extends React.Com /> > prefixCls={`${prefixCls}-list`} - titleText={titles[1]} + titleText={titles?.[1]} dataSource={rightDataSource} filterOption={filterOption} style={this.handleListStyle(listStyle, 'right')} From 9d9447e54f45b9673cc18856897bd1e55503184a Mon Sep 17 00:00:00 2001 From: zz <2418184580@qq.com> Date: Sun, 23 Oct 2022 18:33:47 +0800 Subject: [PATCH 19/27] refactor(DirectoryTree): simplify code (#38184) --- components/tree/DirectoryTree.tsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/components/tree/DirectoryTree.tsx b/components/tree/DirectoryTree.tsx index 96dfc84578..914973981a 100644 --- a/components/tree/DirectoryTree.tsx +++ b/components/tree/DirectoryTree.tsx @@ -52,10 +52,6 @@ const DirectoryTree: React.ForwardRefRenderFunction const cachedSelectedKeys = React.useRef(); - const treeRef = React.createRef(); - - React.useImperativeHandle(ref, () => treeRef.current!); - const getInitExpandedKeys = () => { const { keyEntities } = convertDataToEntities(getTreeData(props)); @@ -191,7 +187,7 @@ const DirectoryTree: React.ForwardRefRenderFunction return ( Date: Tue, 25 Oct 2022 00:07:18 +0800 Subject: [PATCH 20/27] fix: Remove redundant warnings (#38190) Co-authored-by: tangwenhui --- components/time-picker/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 22e3c34787..354c2c1b9b 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -23,11 +23,6 @@ export interface TimeRangePickerProps extends Omit, const RangePicker = React.forwardRef((props, ref) => { const { dropdownClassName, popupClassName } = props; - warning( - !dropdownClassName, - 'RangePicker', - '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.', - ); return ( Date: Tue, 25 Oct 2022 17:04:36 +0800 Subject: [PATCH 21/27] feat: compact theme (#38105) * feat: compact theme * chore: code clean * chore: code clean * chore: show dynamic theme in preview * chore: code clean * feat: compact algorithm --- components/alert/style/index.tsx | 16 ++-- components/button/style/index.tsx | 7 +- components/card/style/index.tsx | 26 +++--- components/collapse/style/index.tsx | 11 ++- .../config-provider/__tests__/theme.test.tsx | 30 +++++- components/list/style/index.tsx | 6 +- components/message/style/index.tsx | 2 +- components/modal/style/index.tsx | 2 +- components/notification/style/index.tsx | 4 +- components/popover/style/index.tsx | 6 +- components/radio/style/index.tsx | 6 +- components/slider/style/index.tsx | 8 +- components/steps/style/index.tsx | 4 +- components/steps/style/small.ts | 2 +- components/steps/style/vertical.ts | 4 +- components/switch/style/index.tsx | 14 +-- components/table/style/expand.tsx | 2 +- components/table/style/index.tsx | 3 +- components/tabs/style/index.tsx | 2 +- components/tag/style/index.tsx | 8 +- components/theme/export.ts | 2 + components/theme/interface.ts | 91 +++++++++++-------- .../themes/compact/genCompactSizeMapToken.ts | 17 ++++ components/theme/themes/compact/index.ts | 15 +++ components/theme/themes/dark/index.ts | 9 +- components/theme/themes/default/index.ts | 5 +- components/theme/themes/seed.ts | 4 - .../theme/themes/shared/genCommonMapToken.ts | 28 +----- .../theme/themes/shared/genSizeMapToken.ts | 17 ++++ components/theme/util/alias.ts | 40 ++++---- components/transfer/style/index.tsx | 5 +- site/bisheng.config.js | 6 ++ site/theme/template/Content/MainContent.jsx | 20 +--- .../template/Layout/DynamicTheme/index.tsx | 4 + site/theme/template/Layout/index.tsx | 13 ++- 35 files changed, 268 insertions(+), 171 deletions(-) create mode 100644 components/theme/themes/compact/genCompactSizeMapToken.ts create mode 100644 components/theme/themes/compact/index.ts create mode 100644 components/theme/themes/shared/genSizeMapToken.ts diff --git a/components/alert/style/index.tsx b/components/alert/style/index.tsx index 904d8ca28a..afa1d391d7 100644 --- a/components/alert/style/index.tsx +++ b/components/alert/style/index.tsx @@ -7,6 +7,7 @@ export interface ComponentToken {} type AlertToken = FullToken<'Alert'> & { alertIconSizeLG: number; + alertPaddingHorizontal: number; }; const genAlertTypeStyle = ( @@ -36,10 +37,10 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO motionEaseInOutCirc, alertIconSizeLG, colorText, - paddingSM, - paddingXS, - paddingTmp, - paddingLG, + paddingContentVerticalSM, + alertPaddingHorizontal, + paddingMD, + paddingContentHorizontalLG, } = token; return { @@ -48,7 +49,7 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO position: 'relative', display: 'flex', alignItems: 'center', - padding: `${paddingXS}px ${paddingSM}px`, + padding: `${paddingContentVerticalSM}px ${alertPaddingHorizontal}px`, // Fixed horizontal padding here. wordWrap: 'break-word', borderRadius, @@ -95,8 +96,8 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO [`${componentCls}-with-description`]: { alignItems: 'flex-start', - paddingInline: paddingLG, - paddingBlock: paddingTmp, + paddingInline: paddingContentHorizontalLG, + paddingBlock: paddingMD, [`${componentCls}-icon`]: { marginInlineEnd: marginSM, @@ -232,6 +233,7 @@ export default genComponentStyleHook('Alert', token => { const alertToken = mergeToken(token, { alertIconSizeLG: fontSizeHeading3, + alertPaddingHorizontal: 12, // Fixed value here. }); return [genAlertStyle(alertToken)]; diff --git a/components/button/style/index.tsx b/components/button/style/index.tsx index 74ea3acd2c..5db9af5623 100644 --- a/components/button/style/index.tsx +++ b/components/button/style/index.tsx @@ -10,6 +10,7 @@ export interface ComponentToken {} export interface ButtonToken extends FullToken<'Button'> { // FIXME: should be removed colorOutlineDefault: string; + buttonPaddingHorizontal: number; } // ============================== Shared ============================== @@ -344,7 +345,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS 0, (token.controlHeight - token.fontSize * token.lineHeight) / 2 - token.controlLineWidth, ); - const paddingHorizontal = token.padding - token.controlLineWidth; + const paddingHorizontal = token.buttonPaddingHorizontal - token.controlLineWidth; const iconOnlyCls = `${componentCls}-icon-only`; @@ -399,6 +400,7 @@ const genSizeSmallButtonStyle: GenerateStyle = token => { const smallToken = mergeToken(token, { controlHeight: token.controlHeightSM, padding: token.paddingXS, + buttonPaddingHorizontal: 8, // Fixed padding controlRadius: token.controlRadiusSM, }); @@ -417,10 +419,11 @@ const genSizeLargeButtonStyle: GenerateStyle = token => { // ============================== Export ============================== export default genComponentStyleHook('Button', token => { - const { controlTmpOutline } = token; + const { controlTmpOutline, paddingContentHorizontal } = token; const buttonToken = mergeToken(token, { colorOutlineDefault: controlTmpOutline, + buttonPaddingHorizontal: paddingContentHorizontal, }); return [ diff --git a/components/card/style/index.tsx b/components/card/style/index.tsx index e126b2d453..bc39e73ed1 100644 --- a/components/card/style/index.tsx +++ b/components/card/style/index.tsx @@ -4,10 +4,15 @@ import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken } from '../../theme'; import { clearFix, resetComponent } from '../../style'; +export interface ComponentToken {} + interface CardToken extends FullToken<'Card'> { + cardHeaderHeight: number; + cardHeaderHeightSM: number; cardShadow: string; cardHeadHeight: number; cardHeadPadding: number; + cardPaddingSM: number; cardPaddingBase: number; cardHeadTabsMarginBottom: number; cardInnerHeadPadding: number; @@ -236,9 +241,9 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { cardShadow, cardHeadHeight, cardHeadPadding, - cardPaddingBase, colorBorderSecondary, boxShadow, + cardPaddingBase, } = token; return { @@ -345,15 +350,14 @@ const genCardStyle: GenerateStyle = (token): CSSObject => { // ============================== Size ============================== const genCardSizeStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, cardPaddingBase, cardHeadPadding } = token; - const cardPaddingBaseSM = cardPaddingBase / 2; - const cardHeadPaddingSM = cardHeadPadding / 2; + const { componentCls, cardPaddingSM, fontSize, lineHeight, cardHeaderHeightSM } = token; + const cardHeadPaddingSM = (cardHeaderHeightSM - fontSize * lineHeight) / 2; return { [`${componentCls}-small`]: { [`> ${componentCls}-head`]: { - minHeight: cardHeadPaddingSM * 2 + token.fontSize, - padding: `0 ${cardPaddingBaseSM}px`, + minHeight: cardHeaderHeightSM, + padding: `0 ${cardPaddingSM}px`, fontSize: token.fontSize, [`> ${componentCls}-head-wrapper`]: { @@ -369,7 +373,7 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { }, [`> ${componentCls}-body`]: { - padding: cardPaddingBaseSM, + padding: cardPaddingSM, }, }, }; @@ -377,17 +381,17 @@ const genCardSizeStyle: GenerateStyle = (token): CSSObject => { // ============================== Export ============================== export default genComponentStyleHook('Card', token => { - const cardHeadPadding = token.padding; - const cardToken = mergeToken(token, { cardShadow: token.boxShadowCard, - cardHeadHeight: token.fontSizeLG + cardHeadPadding * 2, - cardHeadPadding, + cardHeaderHeight: token.fontSizeLG * token.lineHeightLG + token.padding * 2, + cardHeaderHeightSM: token.fontSize * token.lineHeight + token.paddingXS * 2, + cardHeadPadding: token.padding, cardPaddingBase: token.paddingLG, cardHeadTabsMarginBottom: -token.padding - token.lineWidth, cardInnerHeadPadding: token.paddingSM, cardActionsLiMargin: `${token.paddingSM}px 0`, cardActionsIconSize: token.fontSize, + cardPaddingSM: 12, // Fixed padding. }); return [ diff --git a/components/collapse/style/index.tsx b/components/collapse/style/index.tsx index c06b87ad6a..11ee4f5ccd 100644 --- a/components/collapse/style/index.tsx +++ b/components/collapse/style/index.tsx @@ -3,19 +3,22 @@ import type { FullToken, GenerateStyle } from '../../theme'; import { genComponentStyleHook, mergeToken } from '../../theme'; import { resetComponent, resetIcon } from '../../style'; +export interface ComponentToken {} + type CollapseToken = FullToken<'Collapse'> & { collapseContentBg: string; - collapseContentPadding: number; collapseHeaderBg: string; collapseHeaderPadding: string; collapsePanelBorderRadius: number; + collapseContentPaddingHorizontal: number; }; export const genBaseStyle: GenerateStyle = token => { const { componentCls, collapseContentBg, - collapseContentPadding, + padding, + collapseContentPaddingHorizontal, collapseHeaderBg, collapseHeaderPadding, collapsePanelBorderRadius, @@ -130,7 +133,7 @@ export const genBaseStyle: GenerateStyle = token => { borderTop: borderBase, [`& > ${componentCls}-content-box`]: { - padding: collapseContentPadding, + padding: `${padding}px ${collapseContentPaddingHorizontal}px`, }, [`&-hidden`]: { @@ -255,10 +258,10 @@ const genGhostStyle: GenerateStyle = token => { export default genComponentStyleHook('Collapse', token => { const collapseToken = mergeToken(token, { collapseContentBg: token.colorBgContainer, - collapseContentPadding: token.padding, collapseHeaderBg: token.colorFillAlter, collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`, collapsePanelBorderRadius: token.radiusLG, + collapseContentPaddingHorizontal: 16, // Fixed value }); return [ diff --git a/components/config-provider/__tests__/theme.test.tsx b/components/config-provider/__tests__/theme.test.tsx index 609f9ae827..3a4489625c 100644 --- a/components/config-provider/__tests__/theme.test.tsx +++ b/components/config-provider/__tests__/theme.test.tsx @@ -8,7 +8,8 @@ import { useToken } from '../../theme'; import theme from '../../theme/export'; import { resetWarned } from '../../_util/warning'; -const { defaultAlgorithm, darkAlgorithm, defaultAlgorithmV4, darkAlgorithmV4 } = theme; +const { defaultAlgorithm, darkAlgorithm, defaultAlgorithmV4, darkAlgorithmV4, compactAlgorithm } = + theme; let mockCanUseDom = true; @@ -102,6 +103,33 @@ describe('ConfigProvider.Theme', () => { expect(tokenRef?.colorPrimaryText).toBe('#177ddc'); }); + it('compactAlgorithm should work', () => { + let tokenRef: any; + const Demo = () => { + const [, token] = useToken(); + tokenRef = token; + return null; + }; + render( + + + , + ); + expect(tokenRef).toEqual( + expect.objectContaining({ + sizeXXL: 48, + sizeXL: 32, + sizeLG: 16, + sizeMD: 16, + sizeMS: 12, + size: 8, + sizeSM: 8, + sizeXS: 4, + sizeXXS: 4, + }), + ); + }); + it('should support algorithm array', () => { let tokenRef: any; const Demo = () => { diff --git a/components/list/style/index.tsx b/components/list/style/index.tsx index ec320cc84d..fffce5abe2 100644 --- a/components/list/style/index.tsx +++ b/components/list/style/index.tsx @@ -341,9 +341,9 @@ export default genComponentStyleHook( const listToken = mergeToken(token, { listBorderedCls: `${token.componentCls}-bordered`, minHeight: token.controlHeightLG, - listItemPadding: `${token.paddingSM}px 0`, - listItemPaddingSM: `${token.paddingXS}px ${token.padding}px`, - listItemPaddingLG: `${token.padding}px ${token.paddingLG}px`, + listItemPadding: `${token.paddingContentVertical}px ${token.paddingContentHorizontalLG}px`, + listItemPaddingSM: `${token.paddingContentVerticalSM}px ${token.paddingContentHorizontal}px`, + listItemPaddingLG: `${token.paddingContentVerticalLG}px ${token.paddingContentHorizontalLG}px`, }); return [genBaseStyle(listToken), genBorderedStyle(listToken), genResponsiveStyle(listToken)]; diff --git a/components/message/style/index.tsx b/components/message/style/index.tsx index 4a34a9e260..3d15e187ba 100644 --- a/components/message/style/index.tsx +++ b/components/message/style/index.tsx @@ -168,7 +168,7 @@ export default genComponentStyleHook( const combinedToken = mergeToken(token, { messageNoticeContentPadding: `${ (token.controlHeightLG - token.fontSize * token.lineHeight) / 2 - }px ${token.paddingSM}px`, + }px ${token.paddingContentVertical}px`, }); return [genMessageStyle(combinedToken)]; }, diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 07ac0afe4c..3018064fb3 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -165,7 +165,7 @@ const genModalStyle: GenerateStyle = token => { borderRadius: token.radiusLG, boxShadow: token.boxShadowSecondary, pointerEvents: 'auto', - padding: `${token.paddingTmp}px ${token.paddingLG}px`, + padding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, }, [`${componentCls}-close`]: { diff --git a/components/notification/style/index.tsx b/components/notification/style/index.tsx index 780b0c28b0..36f358764c 100644 --- a/components/notification/style/index.tsx +++ b/components/notification/style/index.tsx @@ -261,7 +261,7 @@ const genNotificationStyle: GenerateStyle = token => { export default genComponentStyleHook( 'Notification', token => { - const notificationPaddingVertical = token.paddingTmp; + const notificationPaddingVertical = token.paddingMD; const notificationPaddingHorizontal = token.paddingLG; const notificationToken = mergeToken(token, { @@ -270,7 +270,7 @@ export default genComponentStyleHook( notificationPaddingVertical, notificationPaddingHorizontal, // index.less variables - notificationPadding: `${notificationPaddingVertical}px ${notificationPaddingHorizontal}px`, + notificationPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, notificationMarginBottom: token.margin, notificationMarginEdge: token.marginLG, animationMaxHeight: 150, diff --git a/components/popover/style/index.tsx b/components/popover/style/index.tsx index 2151c3ea3e..ed1ef47421 100644 --- a/components/popover/style/index.tsx +++ b/components/popover/style/index.tsx @@ -12,7 +12,7 @@ export interface ComponentToken { export type PopoverToken = FullToken<'Popover'> & { popoverBg: string; popoverColor: string; - popoverPadding: number; + popoverPadding: number | string; }; const genBaseStyle: GenerateStyle = token => { @@ -158,12 +158,12 @@ const genWireframeStyle: GenerateStyle = token => { export default genComponentStyleHook( 'Popover', token => { - const { colorBgElevated, colorText, paddingSM, wireframe } = token; + const { colorBgElevated, colorText, wireframe } = token; const popoverToken = mergeToken(token, { popoverBg: colorBgElevated, popoverColor: colorText, - popoverPadding: paddingSM, + popoverPadding: 12, // Fixed Value }); return [ diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 959070c522..971bc88aac 100644 --- a/components/radio/style/index.tsx +++ b/components/radio/style/index.tsx @@ -496,7 +496,6 @@ export default genComponentStyleHook('Radio', token => { colorPrimary, marginXS, controlOutlineWidth, - paddingXXS, wireframe, } = token; @@ -506,10 +505,11 @@ export default genComponentStyleHook('Radio', token => { const radioSize = fontSizeLG; const radioTop = (Math.round(fontSize * lineHeight) - radioSize) / 2; - const radioDotDisabledSize = radioSize - paddingXXS * 2; + const dotPadding = 4; // Fixed value + const radioDotDisabledSize = radioSize - dotPadding * 2; const radioDotSize = wireframe ? radioDotDisabledSize - : radioSize - (paddingXXS + controlLineWidth) * 2; + : radioSize - (dotPadding + controlLineWidth) * 2; const radioCheckedColor = colorPrimary; // Radio buttons diff --git a/components/slider/style/index.tsx b/components/slider/style/index.tsx index a491c1908e..311d9fc95c 100644 --- a/components/slider/style/index.tsx +++ b/components/slider/style/index.tsx @@ -237,7 +237,7 @@ const genBaseStyle: GenerateStyle = token => { // ============================ Horizontal ============================ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject => { - const { componentCls, railSize, controlSize, handleSize, dotSize } = token; + const { componentCls, railSize, handleSize, dotSize } = token; const railPadding: keyof React.CSSProperties = horizontal ? 'paddingBlock' : 'paddingInline'; const full: keyof React.CSSProperties = horizontal ? 'width' : 'height'; @@ -247,7 +247,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject = return { [railPadding]: railSize, - [part]: controlSize, + [part]: railSize * 3, [`${componentCls}-rail`]: { [full]: '100%', @@ -259,7 +259,7 @@ const genDirectionStyle = (token: SliderToken, horizontal: boolean): CSSObject = }, [`${componentCls}-handle`]: { - [handlePos]: (controlSize - handleSize) / 2, + [handlePos]: (railSize * 3 - handleSize) / 2, }, [`${componentCls}-mark`]: { @@ -336,7 +336,7 @@ export default genComponentStyleHook( const handleLineWidthHover = token.lineWidth + increaseHandleWidth * 3; return { controlSize, - railSize: controlSize / 3, + railSize: 4, handleSize: controlSize, handleSizeHover: controlSizeHover, dotSize: (controlSize / 3) * 2, diff --git a/components/steps/style/index.tsx b/components/steps/style/index.tsx index 4e665efa06..1c27164c01 100644 --- a/components/steps/style/index.tsx +++ b/components/steps/style/index.tsx @@ -159,7 +159,7 @@ const genStepsItemStyle: GenerateStyle = token => { }, [`${stepsItemCls}-tail`]: { position: 'absolute', - top: token.marginSM, + top: token.stepsIconSize / 2 - token.lineWidth, insetInlineStart: 0, width: '100%', @@ -347,7 +347,7 @@ export default genComponentStyleHook( stepsIconSize, stepsIconCustomSize: stepsIconSize, stepsIconCustomTop: 0, - stepsIconCustomFontSize: fontSizeHeading3, + stepsIconCustomFontSize: controlHeightLG / 2, stepsIconTop: -0.5, // magic for ui experience stepsIconFontSize: fontSize, stepsTitleLineHeight: controlHeight, diff --git a/components/steps/style/small.ts b/components/steps/style/small.ts index 9ea9150d7b..868792ba0f 100644 --- a/components/steps/style/small.ts +++ b/components/steps/style/small.ts @@ -47,7 +47,7 @@ const genStepsSmallStyle: GenerateStyle = token => { fontSize: fontSizeBase, }, [`${componentCls}-item-tail`]: { - top: token.marginXS, + top: stepsSmallIconSize / 2 - token.lineWidth, }, [`${componentCls}-item-custom ${componentCls}-item-icon`]: { width: 'inherit', diff --git a/components/steps/style/vertical.ts b/components/steps/style/vertical.ts index f9b3c31497..a8ce48f0c9 100644 --- a/components/steps/style/vertical.ts +++ b/components/steps/style/vertical.ts @@ -35,7 +35,7 @@ const genStepsVerticalStyle: GenerateStyle = token => { [`> ${componentCls}-item > ${componentCls}-item-container > ${componentCls}-item-tail`]: { position: 'absolute', top: 0, - insetInlineStart: token.margin, + insetInlineStart: token.stepsIconSize / 2 - token.lineWidth, width: token.lineWidth, height: '100%', padding: `${stepsIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`, @@ -59,7 +59,7 @@ const genStepsVerticalStyle: GenerateStyle = token => { [`${componentCls}-item-tail`]: { position: 'absolute', top: 0, - insetInlineStart: token.marginSM, + insetInlineStart: token.stepsSmallIconSize / 2 - token.lineWidth, padding: `${stepsSmallIconSize + token.marginXXS * 1.5}px 0 ${token.marginXXS * 1.5}px`, }, [`${componentCls}-item-title`]: { diff --git a/components/switch/style/index.tsx b/components/switch/style/index.tsx index 78b94e1bcd..42e7190beb 100644 --- a/components/switch/style/index.tsx +++ b/components/switch/style/index.tsx @@ -226,15 +226,15 @@ const genSwitchInnerStyle: GenerateStyle = token => { [`&:not(${componentCls}-disabled):active`]: { [`&:not(${componentCls}-checked) ${switchInnerCls}`]: { [`${switchInnerCls}-unchecked`]: { - marginInlineStart: token.switchInnerMarginMax + token.marginXXS, - marginInlineEnd: token.switchInnerMarginMin - token.marginXXS, + marginInlineStart: token.switchInnerMarginMax + token.switchPadding * 2, + marginInlineEnd: token.switchInnerMarginMin - token.switchPadding * 2, }, }, [`&${componentCls}-checked ${switchInnerCls}`]: { [`${switchInnerCls}-checked`]: { - marginInlineStart: token.switchInnerMarginMin - token.marginXXS, - marginInlineEnd: token.switchInnerMarginMax + token.marginXXS, + marginInlineStart: token.switchInnerMarginMin - token.switchPadding * 2, + marginInlineEnd: token.switchInnerMarginMax + token.switchPadding * 2, }, }, }, @@ -299,7 +299,7 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => { export default genComponentStyleHook('Switch', token => { const switchHeight = token.fontSize * token.lineHeight; const switchHeightSM = token.controlHeight / 2; - const switchPadding = token.paddingXXS / 2; + const switchPadding = 2; // This is magic const switchPinSize = switchHeight - switchPadding * 2; const switchPinSizeSM = switchHeightSM - switchPadding * 2; @@ -310,14 +310,14 @@ export default genComponentStyleHook('Switch', token => { switchColor: token.colorPrimary, switchDisabledOpacity: token.opacityLoading, switchInnerMarginMin: switchPinSize / 2, - switchInnerMarginMax: switchPinSize + switchPadding + token.paddingXXS, + switchInnerMarginMax: switchPinSize + switchPadding + switchPadding * 2, switchPadding, switchPinSize, switchBg: token.colorBgContainer, switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2, switchHeightSM, switchInnerMarginMinSM: switchPinSizeSM / 2, - switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + token.paddingXXS, + switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + switchPadding * 2, switchPinSizeSM, switchHandleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`, switchLoadingIconSize: token.fontSizeIcon * 0.75, diff --git a/components/table/style/expand.tsx b/components/table/style/expand.tsx index f7772c2948..3eeb1b200f 100644 --- a/components/table/style/expand.tsx +++ b/components/table/style/expand.tsx @@ -10,7 +10,6 @@ const genExpandStyle: GenerateStyle = token => { controlInteractiveSize: checkboxSize, motionDurationSlow, controlLineWidth, - paddingXXS, paddingXS, controlLineType, tableBorderColor, @@ -24,6 +23,7 @@ const genExpandStyle: GenerateStyle = token => { tablePaddingVertical, tablePaddingHorizontal, tableExpandedRowBg, + paddingXXS, } = token; const halfInnerSize = checkboxSize / 2 - controlLineWidth; // must be odd number, unless it cannot align center diff --git a/components/table/style/index.tsx b/components/table/style/index.tsx index 62c3896cfa..02ea45b971 100644 --- a/components/table/style/index.tsx +++ b/components/table/style/index.tsx @@ -90,6 +90,7 @@ const genTableStyle: GenerateStyle = token => { tableSelectedRowHoverBg, tableFooterTextColor, tableFooterBg, + paddingContentVerticalLG, wireframe, } = token; const tableBorder = `${controlLineWidth}px ${controlLineType} ${tableBorderColor}`; @@ -122,7 +123,7 @@ const genTableStyle: GenerateStyle = token => { tfoot > tr > td `]: { position: 'relative', - padding: `${tablePaddingVertical}px ${tablePaddingHorizontal}px`, + padding: `${paddingContentVerticalLG}px ${tablePaddingHorizontal}px`, overflowWrap: 'break-word', }, diff --git a/components/tabs/style/index.tsx b/components/tabs/style/index.tsx index 6f8e7c8a2e..407c2eb4fb 100644 --- a/components/tabs/style/index.tsx +++ b/components/tabs/style/index.tsx @@ -880,7 +880,7 @@ export default genComponentStyleHook( }px ${token.padding}px`, tabsCardHeight, tabsCardGutter: token.marginXXS / 2, - tabsHorizontalGutter: token.marginXL, + tabsHorizontalGutter: 32, // Fixed Value tabsCardHeadBackground: token.colorFillAlter, dropdownEdgeChildVerticalPadding: token.paddingXXS, tabsActiveTextShadow: '0 0 0.25px currentcolor', diff --git a/components/tag/style/index.tsx b/components/tag/style/index.tsx index 877687f489..58b5b69b75 100644 --- a/components/tag/style/index.tsx +++ b/components/tag/style/index.tsx @@ -5,12 +5,15 @@ import { genComponentStyleHook, mergeToken, PresetColors } from '../../theme'; import capitalize from '../../_util/capitalize'; import { resetComponent } from '../../style'; +export interface ComponentToken {} + interface TagToken extends FullToken<'Tag'> { tagFontSize: number; tagLineHeight: React.CSSProperties['lineHeight']; tagDefaultBg: string; tagDefaultColor: string; tagIconSize: number; + tagPaddingHorizontal: number; } // ============================== Styles ============================== @@ -55,8 +58,8 @@ const genTagColorStyle = (token: TagToken): CSSInterpolation => }, {} as CSSObject); const genBaseStyle = (token: TagToken): CSSInterpolation => { - const { paddingXS, paddingXXS, controlLineWidth } = token; - const paddingInline = paddingXS - controlLineWidth; + const { paddingXXS, controlLineWidth, tagPaddingHorizontal } = token; + const paddingInline = tagPaddingHorizontal - controlLineWidth; const iconMarginInline = paddingXXS - controlLineWidth; return { @@ -160,6 +163,7 @@ export default genComponentStyleHook('Tag', token => { tagDefaultBg, tagDefaultColor, tagIconSize: fontSizeIcon - 2 * controlLineWidth, // Tag icon is much more smaller + tagPaddingHorizontal: 8, // Fixed padding. }); return [ diff --git a/components/theme/export.ts b/components/theme/export.ts index 1a6764f0fc..8edce6e437 100644 --- a/components/theme/export.ts +++ b/components/theme/export.ts @@ -2,6 +2,7 @@ import { useToken as useInternalToken, defaultConfig } from '.'; import defaultAlgorithm from './themes/default'; import darkAlgorithm from './themes/dark'; +import compactAlgorithm from './themes/compact'; import { defaultAlgorithmV4, darkAlgorithmV4 } from './themes/v4'; // ZombieJ: We export as object to user but array in internal. @@ -23,4 +24,5 @@ export default { darkAlgorithm, defaultAlgorithmV4, darkAlgorithmV4, + compactAlgorithm, }; diff --git a/components/theme/interface.ts b/components/theme/interface.ts index a350c4e268..16a6017b7c 100644 --- a/components/theme/interface.ts +++ b/components/theme/interface.ts @@ -6,9 +6,11 @@ import type { ComponentToken as BackTopComponentToken } from '../back-top/style' import type { ComponentToken as ButtonComponentToken } from '../button/style'; import type { ComponentToken as FloatButtonComponentToken } from '../float-button/style'; import type { ComponentToken as CalendarComponentToken } from '../calendar/style'; +import type { ComponentToken as CardComponentToken } from '../card/style'; import type { ComponentToken as CarouselComponentToken } from '../carousel/style'; import type { ComponentToken as CascaderComponentToken } from '../cascader/style'; import type { ComponentToken as CheckboxComponentToken } from '../checkbox/style'; +import type { ComponentToken as CollapseComponentToken } from '../collapse/style'; import type { ComponentToken as DatePickerComponentToken } from '../date-picker/style'; import type { ComponentToken as DividerComponentToken } from '../divider/style'; import type { ComponentToken as DropdownComponentToken } from '../dropdown/style'; @@ -38,6 +40,7 @@ import type { ComponentToken as SpinComponentToken } from '../spin/style'; import type { ComponentToken as StepsComponentToken } from '../steps/style'; import type { ComponentToken as TableComponentToken } from '../table/style'; import type { ComponentToken as TabsComponentToken } from '../tabs/style'; +import type { ComponentToken as TagComponentToken } from '../tag/style'; import type { ComponentToken as TimelineComponentToken } from '../timeline/style'; import type { ComponentToken as TooltipComponentToken } from '../tooltip/style'; import type { ComponentToken as TransferComponentToken } from '../transfer/style'; @@ -79,10 +82,11 @@ export interface ComponentTokenMap { Badge?: {}; Button?: ButtonComponentToken; Breadcrumb?: {}; + Card?: CardComponentToken; Carousel?: CarouselComponentToken; Cascader?: CascaderComponentToken; Checkbox?: CheckboxComponentToken; - Collapse?: {}; + Collapse?: CollapseComponentToken; DatePicker?: DatePickerComponentToken; Descriptions?: {}; Divider?: DividerComponentToken; @@ -112,7 +116,7 @@ export interface ComponentTokenMap { Spin?: SpinComponentToken; Statistic?: {}; Switch?: {}; - Tag?: {}; + Tag?: TagComponentToken; Tree?: {}; TreeSelect?: {}; Typography?: TypographyComponentToken; @@ -120,7 +124,6 @@ export interface ComponentTokenMap { Transfer?: TransferComponentToken; Tabs?: TabsComponentToken; Calendar?: CalendarComponentToken; - Card?: {}; Steps?: StepsComponentToken; Menu?: MenuComponentToken; Modal?: ModalComponentToken; @@ -159,10 +162,6 @@ export interface SeedToken extends PresetColorType { fontFamily: string; fontSizeBase: number; - // Grid - gridUnit: number; - gridBaseStep: number; - // Line /** Border width of base components */ lineWidth: number; @@ -296,24 +295,25 @@ export interface ColorMapToken extends NeutralColorMapToken { colorBgMask: string; } +export interface SizeMapToken { + // Size + sizeXXL: number; + sizeXL: number; + sizeLG: number; + sizeMD: number; + /** Same as size by default, but can be larger in compact mode */ + sizeMS: number; + size: number; + sizeSM: number; + sizeXS: number; + sizeXXS: number; +} + export interface CommonMapToken { // Font fontSizes: number[]; lineHeights: number[]; - // Size - sizeSpace: number; - sizeSpaceXS: number; - sizeSpaceXXS: number; - sizeSpaceSM: number; - - // Grid - gridSpaceSM: number; - gridSpaceBase: number; - gridSpaceLG: number; - gridSpaceXL: number; - gridSpaceXXL: number; - // Line lineWidthBold: number; @@ -339,7 +339,12 @@ export interface CommonMapToken { // == Map Token == // ====================================================================== // 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥 -export interface MapToken extends SeedToken, ColorPalettes, ColorMapToken, CommonMapToken {} +export interface MapToken + extends SeedToken, + ColorPalettes, + ColorMapToken, + SizeMapToken, + CommonMapToken {} // ====================================================================== // == Alias Token == @@ -422,11 +427,35 @@ export interface AliasToken extends MapToken { controlInteractiveSize: number; controlItemBgActiveDisabled: string; // Note. It also is a color - // =============== Legacy: should be remove =============== - opacityLoading: number; - + // Padding + paddingXXS: number; + paddingXS: number; + paddingSM: number; padding: number; + paddingMD: number; + paddingLG: number; + paddingXL: number; + + // Padding Content + paddingContentHorizontalLG: number; + paddingContentHorizontal: number; + paddingContentHorizontalSM: number; + paddingContentVerticalLG: number; + paddingContentVertical: number; + paddingContentVerticalSM: number; + + // Margin + marginXXS: number; + marginXS: number; + marginSM: number; margin: number; + marginMD: number; + marginLG: number; + marginXL: number; + marginXXL: number; + + // =============== Legacy: should be remove =============== + opacityLoading: number; boxShadow: string; boxShadowSecondary: string; @@ -438,20 +467,6 @@ export interface AliasToken extends MapToken { controlPaddingHorizontal: number; controlPaddingHorizontalSM: number; - paddingSM: number; - paddingXS: number; - paddingXXS: number; - paddingLG: number; - paddingXL: number; - paddingTmp: number; - marginXXS: number; - marginXS: number; - marginSM: number; - marginLG: number; - marginXL: number; - marginXXL: number; - marginTmp: number; - // Media queries breakpoints screenXS: number; screenXSMin: number; diff --git a/components/theme/themes/compact/genCompactSizeMapToken.ts b/components/theme/themes/compact/genCompactSizeMapToken.ts new file mode 100644 index 0000000000..454f114bb5 --- /dev/null +++ b/components/theme/themes/compact/genCompactSizeMapToken.ts @@ -0,0 +1,17 @@ +import type { SeedToken, SizeMapToken } from '../../interface'; + +export default function genSizeMapToken(token: SeedToken): SizeMapToken { + const { sizeUnit, sizeBaseStep } = token; + + return { + sizeXXL: sizeUnit * (sizeBaseStep + 10), + sizeXL: sizeUnit * (sizeBaseStep + 6), + sizeLG: sizeUnit * (sizeBaseStep + 2), + sizeMD: sizeUnit * (sizeBaseStep + 2), + sizeMS: sizeUnit * (sizeBaseStep + 1), + size: sizeUnit * sizeBaseStep, + sizeSM: sizeUnit * sizeBaseStep, + sizeXS: sizeUnit * (sizeBaseStep - 1), + sizeXXS: sizeUnit * (sizeBaseStep - 1), + }; +} diff --git a/components/theme/themes/compact/index.ts b/components/theme/themes/compact/index.ts new file mode 100644 index 0000000000..5eba1b6593 --- /dev/null +++ b/components/theme/themes/compact/index.ts @@ -0,0 +1,15 @@ +import type { DerivativeFunc } from '@ant-design/cssinjs'; +import type { SeedToken, MapToken } from '../../interface'; +import defaultAlgorithm from '../default'; +import genCompactSizeMapToken from './genCompactSizeMapToken'; + +const derivative: DerivativeFunc = (token, mapToken) => { + const mergedMapToken = mapToken ?? defaultAlgorithm(token); + + return { + ...mergedMapToken, + ...genCompactSizeMapToken(token), + }; +}; + +export default derivative; diff --git a/components/theme/themes/dark/index.ts b/components/theme/themes/dark/index.ts index f8cf6a2a19..8c719fcb3e 100644 --- a/components/theme/themes/dark/index.ts +++ b/components/theme/themes/dark/index.ts @@ -3,8 +3,8 @@ import type { DerivativeFunc } from '@ant-design/cssinjs'; import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; import { defaultPresetColors } from '../seed'; import genColorMapToken from '../shared/genColorMapToken'; -import genCommonMapToken from '../shared/genCommonMapToken'; import { generateColorPalettes, generateNeutralColorPalettes } from './colors'; +import defaultAlgorithm from '../default'; const derivative: DerivativeFunc = (token, mapToken) => { const colorPalettes = Object.keys(defaultPresetColors) @@ -24,11 +24,10 @@ const derivative: DerivativeFunc = (token, mapToken) => { return prev; }, {} as ColorPalettes); - return { - ...token, + const mergedMapToken = mapToken ?? defaultAlgorithm(token); - // Other tokens - ...(mapToken ?? genCommonMapToken(token)), + return { + ...mergedMapToken, // Dark tokens ...colorPalettes, diff --git a/components/theme/themes/default/index.ts b/components/theme/themes/default/index.ts index d6ef507623..7686415d95 100644 --- a/components/theme/themes/default/index.ts +++ b/components/theme/themes/default/index.ts @@ -1,4 +1,5 @@ import { generate } from '@ant-design/colors'; +import genSizeMapToken from '../shared/genSizeMapToken'; import type { ColorPalettes, MapToken, PresetColorType, SeedToken } from '../../interface'; import { defaultPresetColors } from '../seed'; import genColorMapToken from '../shared/genColorMapToken'; @@ -31,7 +32,9 @@ export default function derivative(token: SeedToken): MapToken { generateColorPalettes, generateNeutralColorPalettes, }), - + // Size + ...genSizeMapToken(token), + // Others ...genCommonMapToken(token), }; } diff --git a/components/theme/themes/seed.ts b/components/theme/themes/seed.ts index e690a44b94..70b1bc61e2 100644 --- a/components/theme/themes/seed.ts +++ b/components/theme/themes/seed.ts @@ -37,10 +37,6 @@ const seedToken: SeedToken = { 'Noto Color Emoji'`, fontSizeBase: 14, - // Grid - gridUnit: 4, - gridBaseStep: 2, - // Line lineWidth: 1, lineType: 'solid', diff --git a/components/theme/themes/shared/genCommonMapToken.ts b/components/theme/themes/shared/genCommonMapToken.ts index dd6da8f301..57ceb93f16 100644 --- a/components/theme/themes/shared/genCommonMapToken.ts +++ b/components/theme/themes/shared/genCommonMapToken.ts @@ -3,24 +3,13 @@ import genFontSizes from './genFontSizes'; import genRadius from './genRadius'; export default function genCommonMapToken(token: SeedToken): CommonMapToken { - const { - motionUnit, - motionBase, - fontSizeBase, - sizeUnit, - sizeBaseStep, - gridUnit, - gridBaseStep, - radiusBase, - controlHeight, - lineWidth, - } = token; + const { motionUnit, motionBase, fontSizeBase, radiusBase, controlHeight, lineWidth } = token; const fontSizes = genFontSizes(fontSizeBase); return { // motion - motionDurationFast: `${(motionBase + motionUnit * 1).toFixed(1)}s`, + motionDurationFast: `${(motionBase + motionUnit).toFixed(1)}s`, motionDurationMid: `${(motionBase + motionUnit * 2).toFixed(1)}s`, motionDurationSlow: `${(motionBase + motionUnit * 3).toFixed(1)}s`, @@ -28,19 +17,6 @@ export default function genCommonMapToken(token: SeedToken): CommonMapToken { fontSizes: fontSizes.map(fs => fs.size), lineHeights: fontSizes.map(fs => fs.lineHeight), - // size - sizeSpaceSM: sizeUnit * (sizeBaseStep - 1), - sizeSpace: sizeUnit * sizeBaseStep, - sizeSpaceXS: sizeUnit * (sizeBaseStep - 2), - sizeSpaceXXS: sizeUnit * (sizeBaseStep - 3), - - // grid - gridSpaceSM: gridUnit * (gridBaseStep - 1), - gridSpaceBase: gridUnit * gridBaseStep, - gridSpaceLG: gridUnit * (gridBaseStep + 1), - gridSpaceXL: gridUnit * (gridBaseStep + 2), - gridSpaceXXL: gridUnit * (gridBaseStep + 5), - // line lineWidthBold: lineWidth + 1, diff --git a/components/theme/themes/shared/genSizeMapToken.ts b/components/theme/themes/shared/genSizeMapToken.ts new file mode 100644 index 0000000000..4f28f4a648 --- /dev/null +++ b/components/theme/themes/shared/genSizeMapToken.ts @@ -0,0 +1,17 @@ +import type { SeedToken, SizeMapToken } from '../../interface'; + +export default function genSizeMapToken(token: SeedToken): SizeMapToken { + const { sizeUnit, sizeBaseStep } = token; + + return { + sizeXXL: sizeUnit * (sizeBaseStep + 8), // 48 + sizeXL: sizeUnit * (sizeBaseStep + 4), // 32 + sizeLG: sizeUnit * (sizeBaseStep + 2), // 24 + sizeMD: sizeUnit * (sizeBaseStep + 1), // 20 + sizeMS: sizeUnit * sizeBaseStep, // 16 + size: sizeUnit * sizeBaseStep, // 16 + sizeSM: sizeUnit * (sizeBaseStep - 1), // 12 + sizeXS: sizeUnit * (sizeBaseStep - 2), // 8 + sizeXXS: sizeUnit * (sizeBaseStep - 3), // 4 + }; +} diff --git a/components/theme/util/alias.ts b/components/theme/util/alias.ts index 933ac39c11..f5cefbb0e3 100644 --- a/components/theme/util/alias.ts +++ b/components/theme/util/alias.ts @@ -120,23 +120,29 @@ export default function formatToken(derivativeToken: RawMergedToken): AliasToken controlPaddingHorizontal: 12, controlPaddingHorizontalSM: 8, - padding: 16, - margin: 16, - - paddingXXS: 4, - paddingXS: 8, - paddingSM: 12, - paddingLG: 24, - paddingXL: 32, - paddingTmp: 20, - - marginXXS: 4, - marginXS: 8, - marginSM: 12, - marginLG: 24, - marginXL: 32, - marginXXL: 48, - marginTmp: 20, + paddingXXS: mergedToken.sizeXXS, + paddingXS: mergedToken.sizeXS, + paddingSM: mergedToken.sizeSM, + padding: mergedToken.size, + paddingMD: mergedToken.sizeMD, + paddingLG: mergedToken.sizeLG, + paddingXL: mergedToken.sizeXL, + + paddingContentHorizontalLG: mergedToken.sizeLG, + paddingContentVerticalLG: mergedToken.sizeMS, + paddingContentHorizontal: mergedToken.sizeMS, + paddingContentVertical: mergedToken.sizeSM, + paddingContentHorizontalSM: mergedToken.size, + paddingContentVerticalSM: mergedToken.sizeXS, + + marginXXS: mergedToken.sizeXXS, + marginXS: mergedToken.sizeXS, + marginSM: mergedToken.sizeSM, + margin: mergedToken.size, + marginMD: mergedToken.sizeMD, + marginLG: mergedToken.sizeLG, + marginXL: mergedToken.sizeXL, + marginXXL: mergedToken.sizeXXL, boxShadow: ` 0 1px 2px 0 rgba(0, 0, 0, 0.03), diff --git a/components/transfer/style/index.tsx b/components/transfer/style/index.tsx index e0fb4c2bc3..8ac9f56960 100644 --- a/components/transfer/style/index.tsx +++ b/components/transfer/style/index.tsx @@ -12,9 +12,9 @@ export interface ComponentToken { interface TransferToken extends FullToken<'Transfer'> { transferItemHeight: number; - transferHeaderHeight: number; transferHeaderVerticalPadding: number; transferItemPaddingVertical: number; + transferHeaderHeight: number; } const genTransferCustomizeStyle: GenerateStyle = ( @@ -99,7 +99,6 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken listHeight, listWidth, listWidthLG, - marginXXS, fontSizeIcon, marginXS, paddingSM, @@ -142,7 +141,7 @@ const genTransferListStyle: GenerateStyle = (token: TransferToken borderRadius: `${token.controlRadiusLG}px ${token.controlRadiusLG}px 0 0`, '> *:not(:last-child)': { - marginInlineEnd: marginXXS, + marginInlineEnd: 4, // This is magic and fixed number, DO NOT use token since it may change. }, '> *': { diff --git a/site/bisheng.config.js b/site/bisheng.config.js index 2e30880a74..3aecac4f5b 100644 --- a/site/bisheng.config.js +++ b/site/bisheng.config.js @@ -128,6 +128,12 @@ module.exports = { // eslint-disable-next-line no-console console.log('Site build with development mode...'); config.mode = 'development'; + + config.plugins.push( + new webpack.DefinePlugin({ + antdPreview: JSON.stringify(true), + }), + ); } // Split chunks diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx index 58ffe3505c..de528f7be4 100644 --- a/site/theme/template/Content/MainContent.jsx +++ b/site/theme/template/Content/MainContent.jsx @@ -1,18 +1,16 @@ import React, { cloneElement, Component } from 'react'; -import { Link, browserHistory } from 'bisheng/router'; -import { Row, Col, Menu, Affix, Tooltip, Avatar, Dropdown, Drawer } from 'antd'; -import { injectIntl, FormattedMessage } from 'react-intl'; +import { browserHistory, Link } from 'bisheng/router'; +import { Affix, Avatar, Col, Drawer, Menu, Row, Tooltip } from 'antd'; +import { FormattedMessage, injectIntl } from 'react-intl'; import { + DoubleRightOutlined, + ExportOutlined, LeftOutlined, RightOutlined, - ExportOutlined, - DoubleRightOutlined, } from '@ant-design/icons'; import ContributorsList from '@qixian.cs/github-contributors-list'; import classNames from 'classnames'; import get from 'lodash/get'; - -import ThemeIcon from './ThemeIcon'; import Article from './Article'; import PrevAndNext from './PrevAndNext'; import Footer from '../Layout/Footer'; @@ -513,7 +511,6 @@ class MainContent extends Component { {menuItems}
); - const componentPage = /^\/?components/.test(location.pathname); return (
@@ -551,13 +548,6 @@ class MainContent extends Component {
{this.renderMainContent({ theme, setIframeTheme })}
- {componentPage && ( -
- - } /> - -
- )}
, ); }; From 02ea0770d80291f4dcfa7afce209466a7775d2c2 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 27 Oct 2022 17:10:48 +0800 Subject: [PATCH 27/27] chore: bump version to 5.0.0-alpha.31 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d13591116f..43df5a51c2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.0.0-alpha.4", + "version": "5.0.0-alpha.31", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", "keywords": [