From 5e9ef6803b5c5eb1c9cb56d78bada940c0e4ff12 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: Mon, 7 Aug 2023 15:11:06 +0800 Subject: [PATCH 001/318] feat: Form requiredMark support renderProps (#44073) * feat: Form requiredMark support renderProps * test: add test case * test: update snapshot --- components/form/Form.tsx | 5 +- components/form/FormItemLabel.tsx | 10 ++- .../__snapshots__/demo-extend.test.ts.snap | 27 ++++++-- .../__snapshots__/demo.test.tsx.snap | 27 ++++++-- components/form/__tests__/index.test.tsx | 69 +++++++++++++------ components/form/demo/required-mark.tsx | 16 +++-- components/form/index.en-US.md | 2 +- components/form/index.zh-CN.md | 2 +- 8 files changed, 120 insertions(+), 38 deletions(-) diff --git a/components/form/Form.tsx b/components/form/Form.tsx index c853d9c30c55..aa7334ab9da0 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -19,7 +19,10 @@ import type { FormLabelAlign } from './interface'; import useStyle from './style'; import ValidateMessagesContext from './validateMessagesContext'; -export type RequiredMark = boolean | 'optional'; +export type RequiredMark = + | boolean + | 'optional' + | ((labelNode: React.ReactNode, info: { required: boolean }) => React.ReactNode); export type FormLayout = 'horizontal' | 'inline' | 'vertical'; export interface FormProps extends Omit, 'form'> { diff --git a/components/form/FormItemLabel.tsx b/components/form/FormItemLabel.tsx index 69fed60960d8..8d53fff2f317 100644 --- a/components/form/FormItemLabel.tsx +++ b/components/form/FormItemLabel.tsx @@ -114,7 +114,13 @@ const FormItemLabel: React.FC {labelChildren} @@ -127,7 +133,7 @@ const FormItemLabel: React.FC + diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 6d2a2cdabc01..2ed8bfc4e07c 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -6557,6 +6557,25 @@ exports[`renders components/form/demo/required-mark.tsx correctly 1`] = ` class="ant-radio-group ant-radio-group-outline" id="requiredMarkValue" > + diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index 4f434f47edd5..81169a08f1b4 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -1840,29 +1840,56 @@ describe('Form', () => { expect(onChange).toHaveBeenNthCalledWith(idx++, 'success'); }); - // https://user-images.githubusercontent.com/32004925/230819163-464fe90d-422d-4a6d-9e35-44a25d4c64f1.png - it('should not render `requiredMark` when Form.Item has no required prop', () => { - // Escaping TypeScript error - const genProps = (value: any) => ({ ...value }); + describe('requiredMark', () => { + // https://user-images.githubusercontent.com/32004925/230819163-464fe90d-422d-4a6d-9e35-44a25d4c64f1.png + it('should not render `requiredMark` when Form.Item has no required prop', () => { + // Escaping TypeScript error + const genProps = (value: any) => ({ ...value }); - const { container } = render( -
- - - - - - -
, - ); + const { container } = render( +
+ + + + + + +
, + ); + + expect(container.querySelectorAll('.ant-form-item-required')).toHaveLength(2); + expect(container.querySelectorAll('.ant-form-item-required-mark-optional')).toHaveLength(2); + }); + + it('customize logic', () => { + const { container } = render( +
`${label}: ${info.required}`}> + + + + + + +
, + ); - expect(container.querySelectorAll('.ant-form-item-required')).toHaveLength(2); - expect(container.querySelectorAll('.ant-form-item-required-mark-optional')).toHaveLength(2); + expect(container.querySelectorAll('.ant-form-item-label')[0].textContent).toEqual( + 'Required: true', + ); + expect(container.querySelectorAll('.ant-form-item-label')[1].textContent).toEqual( + 'Optional: false', + ); + }); }); it('children support comment', () => { diff --git a/components/form/demo/required-mark.tsx b/components/form/demo/required-mark.tsx index 876f94c6692c..0fe8a9ebe338 100644 --- a/components/form/demo/required-mark.tsx +++ b/components/form/demo/required-mark.tsx @@ -1,8 +1,15 @@ import React, { useState } from 'react'; import { InfoCircleOutlined } from '@ant-design/icons'; -import { Button, Form, Input, Radio } from 'antd'; +import { Button, Form, Input, Radio, Tag } from 'antd'; -type RequiredMark = boolean | 'optional'; +type RequiredMark = boolean | 'optional' | 'customize'; + +const customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => ( + <> + {required ? Required : optional} + {label} + +); const App: React.FC = () => { const [form] = Form.useForm(); @@ -18,13 +25,14 @@ const App: React.FC = () => { layout="vertical" initialValues={{ requiredMarkValue: requiredMark }} onValuesChange={onRequiredTypeChange} - requiredMark={requiredMark} + requiredMark={requiredMark === 'customize' ? customizeRequiredMark : requiredMark} > + Default Optional - Required Hidden + Customize diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 8faff8b8168a..90cca7376ccd 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -71,7 +71,7 @@ High performance Form component with data scope management. Including data colle | layout | Form layout | `horizontal` \| `vertical` \| `inline` | `horizontal` | | | name | Form name. Will be the prefix of Field `id` | string | - | | | preserve | Keep field value even when field removed | boolean | true | 4.4.0 | -| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean \| `optional` | true | 4.6.0 | +| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | true | `renderProps`: 5.9.0 | | scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) | false | | | size | Set field component size (antd components only) | `small` \| `middle` \| `large` | - | | | validateMessages | Validation prompt template, description [see below](#validatemessages) | [ValidateMessages](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134) | - | | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index d4dbe11b8389..ce78f81c8df9 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -72,7 +72,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA | layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` | | | name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | | | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | -| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| `optional` | true | 4.6.0 | +| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| `optional` \| ((label: ReactNode, info: { required: boolean }) => ReactNode) | true | `renderProps`: 5.9.0 | | scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [Options](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options) | false | | | size | 设置字段组件的尺寸（仅限 antd 组件） | `small` \| `middle` \| `large` | - | | | validateMessages | 验证提示模板，说明[见下](#validatemessages) | [ValidateMessages](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134) | - | | From 9436ece6e38cbd73f605f6285316a405c9ecda05 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: Mon, 7 Aug 2023 18:04:44 +0800 Subject: [PATCH 002/318] feat: upload support rootClassName (#44060) * feat: upload support rootClassName * feat: optimize code * feat: optimize code --- components/upload/Upload.tsx | 18 +++++++++++++----- components/upload/__tests__/demo.test.ts | 2 +- components/upload/interface.ts | 1 + 3 files changed, 15 insertions(+), 6 deletions(-) diff --git a/components/upload/Upload.tsx b/components/upload/Upload.tsx index c87a353cebb8..3d7f408bb02e 100644 --- a/components/upload/Upload.tsx +++ b/components/upload/Upload.tsx @@ -62,6 +62,7 @@ const InternalUpload: React.ForwardRefRenderFunction = ( action = '', accept = '', supportServerRender = true, + rootClassName, } = props; // ===================== Disabled ===================== @@ -405,11 +406,18 @@ const InternalUpload: React.ForwardRefRenderFunction = ( ); }; - const wrapperCls = classNames(`${prefixCls}-wrapper`, className, hashId, ctxUpload?.className, { - [`${prefixCls}-rtl`]: direction === 'rtl', - [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card', - [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle', - }); + const wrapperCls = classNames( + `${prefixCls}-wrapper`, + className, + rootClassName, + hashId, + ctxUpload?.className, + { + [`${prefixCls}-rtl`]: direction === 'rtl', + [`${prefixCls}-picture-card-wrapper`]: listType === 'picture-card', + [`${prefixCls}-picture-circle-wrapper`]: listType === 'picture-circle', + }, + ); const mergedStyle: React.CSSProperties = { ...ctxUpload?.style, ...style }; diff --git a/components/upload/__tests__/demo.test.ts b/components/upload/__tests__/demo.test.ts index dc181dc91409..ec1f577a6bc5 100644 --- a/components/upload/__tests__/demo.test.ts +++ b/components/upload/__tests__/demo.test.ts @@ -1,3 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('upload', { skip: ['crop-image.tsx'], testRootProps: false }); +demoTest('upload', { skip: ['crop-image.tsx'] }); diff --git a/components/upload/interface.ts b/components/upload/interface.ts index 0639346be407..7bb671165656 100755 --- a/components/upload/interface.ts +++ b/components/upload/interface.ts @@ -109,6 +109,7 @@ export interface UploadProps extends Pick { onDrop?: (event: React.DragEvent) => void; listType?: UploadListType; className?: string; + rootClassName?: string; onPreview?: (file: UploadFile) => void; onDownload?: (file: UploadFile) => void; onRemove?: (file: UploadFile) => void | boolean | Promise; From 915514f9de82a0c490febf8724408b90a88612d2 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: Mon, 7 Aug 2023 18:05:05 +0800 Subject: [PATCH 003/318] feat: TimePicker support rootClassName (#44059) * feat: TimePicker support rootClassName * feat: optimize code --- components/time-picker/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 2962158edc77..6f158927bda4 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -27,6 +27,7 @@ export interface TimePickerProps extends Omit, 'picker'> addon?: () => React.ReactNode; status?: InputStatus; popupClassName?: string; + rootClassName?: string; } const TimePicker = React.forwardRef( From 77ecdcba8ba4471891d4bea709ddbb6e961ceb65 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: Mon, 7 Aug 2023 18:05:34 +0800 Subject: [PATCH 004/318] feat(DatePicker): RangePicker support rootClassName (#44057) * feat: RangePicker support rootClassName * feat: optimize code * feat: optimize code * feat: optimize code --- components/date-picker/__tests__/demo.test.tsx | 11 ++++++++++- .../generatePicker/generateRangePicker.tsx | 5 ++++- 2 files changed, 14 insertions(+), 2 deletions(-) diff --git a/components/date-picker/__tests__/demo.test.tsx b/components/date-picker/__tests__/demo.test.tsx index e249126e32ea..db64682abc4a 100644 --- a/components/date-picker/__tests__/demo.test.tsx +++ b/components/date-picker/__tests__/demo.test.tsx @@ -4,7 +4,16 @@ import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; demoTest('date-picker', { skip: ['locale.tsx'], testRootProps: false }); -rootPropsTest('time-picker', (DatePicker, props) => , { +rootPropsTest('date-picker', (DatePicker, props) => , { findRootElements: () => document.querySelectorAll('.ant-picker, .ant-picker-dropdown'), expectCount: 2, }); + +rootPropsTest( + 'date-picker', + (DatePicker, props) => , + { + findRootElements: () => document.querySelectorAll('.ant-picker-range, .ant-picker-dropdown'), + expectCount: 2, + }, +); diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 503f2806ddfb..28ec17584e06 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -36,6 +36,7 @@ export default function generateRangePicker(generateConfig: GenerateCo */ dropdownClassName?: string; popupClassName?: string; + rootClassName?: string; }; const RangePicker = forwardRef< @@ -56,6 +57,7 @@ export default function generateRangePicker(generateConfig: GenerateCo status: customStatus, clearIcon, allowClear, + rootClassName, ...restProps } = props; @@ -139,6 +141,7 @@ export default function generateRangePicker(generateConfig: GenerateCo hashId, compactItemClassnames, className, + rootClassName, )} locale={locale.lang} prefixCls={prefixCls} @@ -146,7 +149,7 @@ export default function generateRangePicker(generateConfig: GenerateCo generateConfig={generateConfig} components={Components} direction={direction} - dropdownClassName={classNames(hashId, popupClassName || dropdownClassName)} + dropdownClassName={classNames(hashId, popupClassName || dropdownClassName, rootClassName)} allowClear={mergeAllowClear(allowClear, clearIcon, )} />, ); From dcba47bbf529032ab1bff7e09bd6450167427b28 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: Mon, 7 Aug 2023 18:06:06 +0800 Subject: [PATCH 005/318] feat: Input.TextArea support rootClassName (#44058) * feat: Input.TextArea support rootClassName * feat: optimize code * feat: optimize code * feat: add rootClassName test --- components/input/TextArea.tsx | 4 ++++ components/input/__tests__/demo.test.tsx | 4 ++++ 2 files changed, 8 insertions(+) diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx index e4d79a303f90..21a44e6dbd7a 100644 --- a/components/input/TextArea.tsx +++ b/components/input/TextArea.tsx @@ -21,6 +21,7 @@ export interface TextAreaProps extends Omit { bordered?: boolean; size?: SizeType; status?: InputStatus; + rootClassName?: string; } export interface TextAreaRef { @@ -39,6 +40,8 @@ const TextArea = forwardRef((props, ref) => { allowClear, showCount, classNames: classes, + rootClassName, + className, ...rest } = props; const { getPrefixCls, direction } = React.useContext(ConfigContext); @@ -87,6 +90,7 @@ const TextArea = forwardRef((props, ref) => { {...rest} disabled={mergedDisabled} allowClear={mergedAllowClear} + className={classNames(className, rootClassName)} classes={{ affixWrapper: classNames( `${prefixCls}-textarea-affix-wrapper`, diff --git a/components/input/__tests__/demo.test.tsx b/components/input/__tests__/demo.test.tsx index 4be9097dabce..999fcbc451fd 100644 --- a/components/input/__tests__/demo.test.tsx +++ b/components/input/__tests__/demo.test.tsx @@ -14,3 +14,7 @@ rootPropsTest( rootPropsTest('input', (Input, props) => , { name: 'password', }); + +rootPropsTest('input', (Input, props) => , { + name: 'textarea', +}); From 5351fac42a47dc90adf83f6f00b2f948dfacc438 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: Mon, 7 Aug 2023 18:06:44 +0800 Subject: [PATCH 006/318] feat: Badge.Ribbon support rootClassName (#44056) * feat: Badge.Ribbon support rootClassName * docs: update rootClassName description * feat: optimize code * feat: optimize code --- components/badge/Ribbon.tsx | 4 +++- .../{demo.test.ts.snap => demo.test.tsx.snap} | 0 components/badge/__tests__/demo.test.ts | 3 --- components/badge/__tests__/demo.test.tsx | 8 ++++++++ 4 files changed, 11 insertions(+), 4 deletions(-) rename components/badge/__tests__/__snapshots__/{demo.test.ts.snap => demo.test.tsx.snap} (100%) delete mode 100644 components/badge/__tests__/demo.test.ts create mode 100644 components/badge/__tests__/demo.test.tsx diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx index 453c071d0c61..6fdf1aff02af 100644 --- a/components/badge/Ribbon.tsx +++ b/components/badge/Ribbon.tsx @@ -16,6 +16,7 @@ export interface RibbonProps { color?: LiteralUnion; children?: React.ReactNode; placement?: RibbonPlacement; + rootClassName?: string; } const Ribbon: React.FC = (props) => { @@ -27,6 +28,7 @@ const Ribbon: React.FC = (props) => { children, text, placement = 'end', + rootClassName, } = props; const { getPrefixCls, direction } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('ribbon', customizePrefixCls); @@ -48,7 +50,7 @@ const Ribbon: React.FC = (props) => { cornerColorStyle.color = color; } return wrapSSR( -
+
{children}
{text} diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.tsx.snap similarity index 100% rename from components/badge/__tests__/__snapshots__/demo.test.ts.snap rename to components/badge/__tests__/__snapshots__/demo.test.tsx.snap diff --git a/components/badge/__tests__/demo.test.ts b/components/badge/__tests__/demo.test.ts deleted file mode 100644 index e1bdd02d5eee..000000000000 --- a/components/badge/__tests__/demo.test.ts +++ /dev/null @@ -1,3 +0,0 @@ -import demoTest from '../../../tests/shared/demoTest'; - -demoTest('badge'); diff --git a/components/badge/__tests__/demo.test.tsx b/components/badge/__tests__/demo.test.tsx new file mode 100644 index 000000000000..18e41f6256fb --- /dev/null +++ b/components/badge/__tests__/demo.test.tsx @@ -0,0 +1,8 @@ +import * as React from 'react'; +import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; + +demoTest('badge'); + +rootPropsTest('badge', (Badge, props) => , { + name: 'Badge.Ribbon', +}); From 9d122a6c107a402e77e74bebffaf6ea31b530312 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Tue, 8 Aug 2023 10:50:34 +0800 Subject: [PATCH 007/318] feat(AutoComplete): AutoComplete support rootClassName (#44055) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: AutoComplete support rootClassName * feat: AutoComplete support rootClassName * feat: update snap * feat: optimize code * feat: optimize code * Update components/auto-complete/demo/basic.tsx Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * feat: update snap * Update components/auto-complete/index.en-US.md Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * Update components/auto-complete/index.zh-CN.md Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> * feat: optimize code * feat: optimize code --------- Signed-off-by: kiner-tang(文辉) <1127031143@qq.com> --- .../{demo.test.ts.snap => demo.test.tsx.snap} | 0 components/auto-complete/__tests__/demo.test.ts | 3 --- components/auto-complete/__tests__/demo.test.tsx | 15 +++++++++++++++ components/select/index.tsx | 2 +- 4 files changed, 16 insertions(+), 4 deletions(-) rename components/auto-complete/__tests__/__snapshots__/{demo.test.ts.snap => demo.test.tsx.snap} (100%) delete mode 100644 components/auto-complete/__tests__/demo.test.ts create mode 100644 components/auto-complete/__tests__/demo.test.tsx diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap similarity index 100% rename from components/auto-complete/__tests__/__snapshots__/demo.test.ts.snap rename to components/auto-complete/__tests__/__snapshots__/demo.test.tsx.snap diff --git a/components/auto-complete/__tests__/demo.test.ts b/components/auto-complete/__tests__/demo.test.ts deleted file mode 100644 index 7386ce505ffb..000000000000 --- a/components/auto-complete/__tests__/demo.test.ts +++ /dev/null @@ -1,3 +0,0 @@ -import demoTest from '../../../tests/shared/demoTest'; - -demoTest('auto-complete'); diff --git a/components/auto-complete/__tests__/demo.test.tsx b/components/auto-complete/__tests__/demo.test.tsx new file mode 100644 index 000000000000..002b3e764648 --- /dev/null +++ b/components/auto-complete/__tests__/demo.test.tsx @@ -0,0 +1,15 @@ +import * as React from 'react'; +import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; + +demoTest('auto-complete', { + testRootProps: false, +}); + +rootPropsTest( + 'auto-complete', + (AutoComplete, props) => , + { + findRootElements: () => document.querySelectorAll('.ant-select, .ant-select-dropdown'), + expectCount: 2, + }, +); diff --git a/components/select/index.tsx b/components/select/index.tsx index ac07efdafa91..22d1342e0f23 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -42,6 +42,7 @@ export interface InternalSelectProps< ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType, > extends Omit, 'mode'> { + rootClassName?: string; suffixIcon?: React.ReactNode; size?: SizeType; disabled?: boolean; @@ -67,7 +68,6 @@ export interface SelectProps< popupClassName?: string; /** @deprecated Please use `popupClassName` instead */ dropdownClassName?: string; - rootClassName?: string; /** @deprecated Please use `popupMatchSelectWidth` instead */ dropdownMatchSelectWidth?: boolean | number; popupMatchSelectWidth?: boolean | number; From 4fe27ba027515281543fb363a21f26120999d487 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 8 Aug 2023 14:03:31 +0800 Subject: [PATCH 008/318] feat: button component token (#44090) * feat: button component token * chore: add demo * chore: update --- .../__snapshots__/demo-extend.test.ts.snap | 109 ++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 107 ++++++++ components/button/demo/component-token.md | 7 + components/button/demo/component-token.tsx | 44 +++ components/button/index.en-US.md | 1 + components/button/index.zh-CN.md | 1 + components/button/style/group.ts | 4 +- components/button/style/index.ts | 258 ++++++++++++++---- components/theme/interface/alias.ts | 1 + docs/react/migrate-less-variables.en-US.md | 55 +++- docs/react/migrate-less-variables.zh-CN.md | 49 +++- 11 files changed, 573 insertions(+), 63 deletions(-) create mode 100644 components/button/demo/component-token.md create mode 100644 components/button/demo/component-token.tsx diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap index 32146204d3e8..a4716f8eb00f 100644 --- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -388,6 +388,115 @@ exports[`renders components/button/demo/chinese-chars-loading.tsx extend context exports[`renders components/button/demo/chinese-chars-loading.tsx extend context correctly 2`] = `[]`; +exports[`renders components/button/demo/component-token.tsx extend context correctly 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+`; + +exports[`renders components/button/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/button/demo/danger.tsx extend context correctly 1`] = `
`; +exports[`renders components/button/demo/component-token.tsx correctly 1`] = ` +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+`; + exports[`renders components/button/demo/danger.tsx correctly 1`] = `
( + + + + + + + + + + + + + + +); + +export default App; diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 30903a111e40..985a4ddc2d59 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -47,6 +47,7 @@ And 4 other properties additionally. Block Button Deprecated Button Group Loading style bug +Component Token ## API diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index f24a0ec26388..e015c735cd7b 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -50,6 +50,7 @@ group: Block 按钮 废弃的 Block 组 加载中状态 bug 还原 +组件 Token ## API diff --git a/components/button/style/group.ts b/components/button/style/group.ts index f084f9971a05..887f00cae556 100644 --- a/components/button/style/group.ts +++ b/components/button/style/group.ts @@ -23,7 +23,7 @@ const genButtonBorderStyle = (buttonTypeCls: string, borderColor: string) => ({ }); const genGroupStyle: GenerateStyle = (token) => { - const { componentCls, fontSize, lineWidth, colorPrimaryHover, colorErrorHover } = token; + const { componentCls, fontSize, lineWidth, groupBorderColor, colorErrorHover } = token; return { [`${componentCls}-group`]: [ @@ -71,7 +71,7 @@ const genGroupStyle: GenerateStyle = (token) => { }, // Border Color - genButtonBorderStyle(`${componentCls}-primary`, colorPrimaryHover), + genButtonBorderStyle(`${componentCls}-primary`, groupBorderColor), genButtonBorderStyle(`${componentCls}-danger`, colorErrorHover), ], }; diff --git a/components/button/style/index.ts b/components/button/style/index.ts index 1631719dbc7a..fd0dd3c2fe23 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -1,4 +1,5 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import type { CSSProperties } from 'react'; import { genFocusStyle } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical'; @@ -7,25 +8,135 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genGroupStyle from './group'; /** Component only token. Which will handle additional calculation of alias token */ -export interface ComponentToken {} +export interface ComponentToken { + /** + * @desc 文字字重 + * @descEN Font weight of text + */ + fontWeight: CSSProperties['fontWeight']; + /** + * @desc 默认按钮阴影 + * @descEN Shadow of default button + */ + defaultShadow: string; + /** + * @desc 主要按钮阴影 + * @descEN Shadow of primary button + */ + primaryShadow: string; + /** + * @desc 危险按钮阴影 + * @descEN Shadow of danger button + */ + dangerShadow: string; + /** + * @desc 主要按钮文本颜色 + * @descEN Text color of primary button + */ + primaryColor: string; + /** + * @desc 默认按钮文本颜色 + * @descEN Text color of default button + */ + defaultColor: string; + /** + * @desc 默认按钮背景色 + * @descEN Background color of default button + */ + defaultBg: string; + /** + * @desc 默认按钮边框颜色 + * @descEN Border color of default button + */ + defaultBorderColor: string; + /** + * @desc 危险按钮文本颜色 + * @descEN Text color of danger button + */ + dangerColor: string; + /** + * @desc 禁用状态边框颜色 + * @descEN Border color of disabled button + */ + borderColorDisabled: string; + /** + * @desc 默认幽灵按钮文本颜色 + * @descEN Text color of default ghost button + */ + defaultGhostColor: string; + /** + * @desc 幽灵按钮背景色 + * @descEN Background color of ghost button + */ + ghostBg: string; + /** + * @desc 默认幽灵按钮边框颜色 + * @descEN Border color of default ghost button + */ + defaultGhostBorderColor: string; + /** + * @desc 按钮横向内间距 + * @descEN Horizontal padding of button + */ + paddingInline: CSSProperties['paddingInline']; + /** + * @desc 大号按钮横向内间距 + * @descEN Horizontal padding of large button + */ + paddingInlineLG: CSSProperties['paddingInline']; + /** + * @desc 小号按钮横向内间距 + * @descEN Horizontal padding of small button + */ + paddingInlineSM: CSSProperties['paddingInline']; + /** + * @desc 只有图标的按钮图标尺寸 + * @descEN Icon size of button which only contains icon + */ + onlyIconSize: number; + /** + * @desc 大号只有图标的按钮图标尺寸 + * @descEN Icon size of large button which only contains icon + */ + onlyIconSizeLG: number; + /** + * @desc 小号只有图标的按钮图标尺寸 + * @descEN Icon size of small button which only contains icon + */ + onlyIconSizeSM: number; + /** + * @desc 按钮组边框颜色 + * @descEN Border color of button group + */ + groupBorderColor: string; + /** + * @desc 链接按钮悬浮态背景色 + * @descEN Background color of link button when hover + */ + linkHoverBg: string; + /** + * @desc 文本按钮悬浮态背景色 + * @descEN Background color of text button when hover + */ + textHoverBg: string; +} export interface ButtonToken extends FullToken<'Button'> { colorOutlineDefault: string; - buttonPaddingHorizontal: number; + buttonPaddingHorizontal: CSSProperties['paddingInline']; buttonIconOnlyFontSize: number; - buttonFontWeight: number; } // ============================== Shared ============================== const genSharedButtonStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, iconCls, buttonFontWeight } = token; + const { componentCls, iconCls, fontWeight } = token; return { [componentCls]: { outline: 'none', position: 'relative', display: 'inline-block', - fontWeight: buttonFontWeight, + fontWeight, whiteSpace: 'nowrap', textAlign: 'center', backgroundImage: 'none', @@ -143,7 +254,7 @@ const genRoundButtonStyle: GenerateStyle = (token) => ({ // =============================== Type =============================== const genDisabledStyle: GenerateStyle = (token) => ({ cursor: 'not-allowed', - borderColor: token.colorBorder, + borderColor: token.borderColorDisabled, color: token.colorTextDisabled, backgroundColor: token.colorBgContainerDisabled, boxShadow: 'none', @@ -151,6 +262,7 @@ const genDisabledStyle: GenerateStyle = (token) => ({ const genGhostButtonStyle = ( btnCls: string, + background: string, textColor: string | false, borderColor: string | false, textColorDisabled: string | false, @@ -160,18 +272,18 @@ const genGhostButtonStyle = ( ): CSSObject => ({ [`&${btnCls}-background-ghost`]: { color: textColor || undefined, - backgroundColor: 'transparent', + backgroundColor: background, borderColor: borderColor || undefined, boxShadow: 'none', ...genHoverActiveButtonStyle( btnCls, { - backgroundColor: 'transparent', + backgroundColor: background, ...hoverStyle, }, { - backgroundColor: 'transparent', + backgroundColor: background, ...activeStyle, }, ), @@ -205,10 +317,11 @@ const genPureDisabledButtonStyle: GenerateStyle = (token const genDefaultButtonStyle: GenerateStyle = (token) => ({ ...genSolidButtonStyle(token), - backgroundColor: token.colorBgContainer, - borderColor: token.colorBorder, + backgroundColor: token.defaultBg, + borderColor: token.defaultBorderColor, + color: token.defaultColor, - boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`, + boxShadow: token.defaultShadow, ...genHoverActiveButtonStyle( token.componentCls, @@ -224,8 +337,9 @@ const genDefaultButtonStyle: GenerateStyle = (token) => ...genGhostButtonStyle( token.componentCls, - token.colorBgContainer, - token.colorBgContainer, + token.ghostBg, + token.defaultGhostColor, + token.defaultGhostBorderColor, token.colorTextDisabled, token.colorBorder, ), @@ -248,6 +362,7 @@ const genDefaultButtonStyle: GenerateStyle = (token) => ...genGhostButtonStyle( token.componentCls, + token.ghostBg, token.colorError, token.colorError, token.colorTextDisabled, @@ -261,10 +376,10 @@ const genDefaultButtonStyle: GenerateStyle = (token) => const genPrimaryButtonStyle: GenerateStyle = (token) => ({ ...genSolidButtonStyle(token), - color: token.colorTextLightSolid, + color: token.primaryColor, backgroundColor: token.colorPrimary, - boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`, + boxShadow: token.primaryShadow, ...genHoverActiveButtonStyle( token.componentCls, @@ -280,6 +395,7 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => ...genGhostButtonStyle( token.componentCls, + token.ghostBg, token.colorPrimary, token.colorPrimary, token.colorTextDisabled, @@ -296,7 +412,8 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => [`&${token.componentCls}-dangerous`]: { backgroundColor: token.colorError, - boxShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`, + boxShadow: token.dangerShadow, + color: token.dangerColor, ...genHoverActiveButtonStyle( token.componentCls, @@ -310,6 +427,7 @@ const genPrimaryButtonStyle: GenerateStyle = (token) => ...genGhostButtonStyle( token.componentCls, + token.ghostBg, token.colorError, token.colorError, token.colorTextDisabled, @@ -341,6 +459,7 @@ const genLinkButtonStyle: GenerateStyle = (token) => ({ token.componentCls, { color: token.colorLinkHover, + backgroundColor: token.linkHoverBg, }, { color: token.colorLinkActive, @@ -372,7 +491,7 @@ const genTextButtonStyle: GenerateStyle = (token) => ({ token.componentCls, { color: token.colorText, - backgroundColor: token.colorBgTextHover, + backgroundColor: token.textHoverBg, }, { color: token.colorText, @@ -411,6 +530,7 @@ const genTypeButtonStyle: GenerateStyle = (token) => { [`${componentCls}-text`]: genTextButtonStyle(token), [`${componentCls}-ghost`]: genGhostButtonStyle( token.componentCls, + token.ghostBg, token.colorBgContainer, token.colorBgContainer, token.colorTextDisabled, @@ -433,7 +553,6 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS } = token; const paddingVertical = Math.max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth); - const paddingHorizontal = buttonPaddingHorizontal - lineWidth; const iconOnlyCls = `${componentCls}-icon-only`; @@ -443,7 +562,7 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS [`${componentCls}${sizePrefixCls}`]: { fontSize, height: controlHeight, - padding: `${paddingVertical}px ${paddingHorizontal}px`, + padding: `${paddingVertical}px ${buttonPaddingHorizontal}px`, borderRadius, [`&${iconOnlyCls}`]: { @@ -486,9 +605,9 @@ const genSizeSmallButtonStyle: GenerateStyle = (token) => { const smallToken = mergeToken(token, { controlHeight: token.controlHeightSM, padding: token.paddingXS, - buttonPaddingHorizontal: 8, // Fixed padding + buttonPaddingHorizontal: token.paddingInlineSM, // Fixed padding borderRadius: token.borderRadiusSM, - buttonIconOnlyFontSize: token.fontSizeLG - 2, + buttonIconOnlyFontSize: token.onlyIconSizeSM, }); return genSizeButtonStyle(smallToken, `${token.componentCls}-sm`); @@ -498,8 +617,9 @@ const genSizeLargeButtonStyle: GenerateStyle = (token) => { const largeToken = mergeToken(token, { controlHeight: token.controlHeightLG, fontSize: token.fontSizeLG, + buttonPaddingHorizontal: token.paddingInlineLG, borderRadius: token.borderRadiusLG, - buttonIconOnlyFontSize: token.fontSizeLG + 2, + buttonIconOnlyFontSize: token.onlyIconSizeLG, }); return genSizeButtonStyle(largeToken, `${token.componentCls}-lg`); @@ -517,36 +637,62 @@ const genBlockButtonStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Button', (token) => { - const { controlTmpOutline, paddingContentHorizontal } = token; - - const buttonToken = mergeToken(token, { - colorOutlineDefault: controlTmpOutline, - buttonPaddingHorizontal: paddingContentHorizontal, - buttonIconOnlyFontSize: token.fontSizeLG, - buttonFontWeight: 400, - }); - - return [ - // Shared - genSharedButtonStyle(buttonToken), - - // Size - genSizeSmallButtonStyle(buttonToken), - genSizeBaseButtonStyle(buttonToken), - genSizeLargeButtonStyle(buttonToken), - - // Block - genBlockButtonStyle(buttonToken), - - // Group (type, ghost, danger, loading) - genTypeButtonStyle(buttonToken), - - // Button Group - genGroupStyle(buttonToken), - - // Space Compact - genCompactItemStyle(token), - genCompactItemVerticalStyle(token), - ]; -}); +export default genComponentStyleHook( + 'Button', + (token) => { + const { paddingInline, onlyIconSize } = token; + + const buttonToken = mergeToken(token, { + buttonPaddingHorizontal: paddingInline, + buttonIconOnlyFontSize: onlyIconSize, + }); + + return [ + // Shared + genSharedButtonStyle(buttonToken), + + // Size + genSizeSmallButtonStyle(buttonToken), + genSizeBaseButtonStyle(buttonToken), + genSizeLargeButtonStyle(buttonToken), + + // Block + genBlockButtonStyle(buttonToken), + + // Group (type, ghost, danger, loading) + genTypeButtonStyle(buttonToken), + + // Button Group + genGroupStyle(buttonToken), + + // Space Compact + genCompactItemStyle(token), + genCompactItemVerticalStyle(token), + ]; + }, + (token) => ({ + fontWeight: 400, + defaultShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlTmpOutline}`, + primaryShadow: `0 ${token.controlOutlineWidth}px 0 ${token.controlOutline}`, + dangerShadow: `0 ${token.controlOutlineWidth}px 0 ${token.colorErrorOutline}`, + primaryColor: token.colorTextLightSolid, + dangerColor: token.colorTextLightSolid, + borderColorDisabled: token.colorBorder, + defaultGhostColor: token.colorBgContainer, + ghostBg: 'transparent', + defaultGhostBorderColor: token.colorBgContainer, + paddingInline: token.paddingContentHorizontal - token.lineWidth, + paddingInlineLG: token.paddingContentHorizontal - token.lineWidth, + paddingInlineSM: 8 - token.lineWidth, + onlyIconSize: token.fontSizeLG, + onlyIconSizeSM: token.fontSizeLG - 2, + onlyIconSizeLG: token.fontSizeLG + 2, + groupBorderColor: token.colorPrimaryHover, + linkHoverBg: 'transparent', + textHoverBg: token.colorBgTextHover, + defaultColor: token.colorText, + defaultBg: token.colorBgContainer, + defaultBorderColor: token.colorBorder, + defaultBorderColorDisabled: token.colorBorder, + }), +); diff --git a/components/theme/interface/alias.ts b/components/theme/interface/alias.ts index a08f61d008c4..159661dc999c 100644 --- a/components/theme/interface/alias.ts +++ b/components/theme/interface/alias.ts @@ -580,6 +580,7 @@ export interface AliasToken extends MapToken { screenXXLMin: number; /** + * @deprecated * Used for DefaultButton, Switch which has default outline * @desc 默认样式的 Outline 颜色 * @descEN Default style outline color. diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index ec39acb61ee2..5260e528ab9e 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -58,7 +58,7 @@ export default App; ### Avatar -| less 变量 | Component Token | 备注 | +| Less variables | Component Token | Note | | --- | --- | --- | | `@avatar-size-base` | `containerSize` | - | | `@avatar-size-lg` | `containerSizeLG` | - | @@ -78,7 +78,7 @@ export default App; ### BreadCrumb -| Less 变量 | Component Token | 备注 | +| Less variables | Component Token | Note | | --- | --- | --- | | `@breadcrumb-base-color` | `itemColor` | - | | `@breadcrumb-last-item-color` | `lastItemColor` | - | @@ -89,7 +89,54 @@ export default App; | `@breadcrumb-separator-color` | `separatorColor` | - | | `@breadcrumb-separator-margin` | `separatorMargin` | - | - +### Button + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@btn-font-weight` | `fontWeight` | - | +| `@btn-border-radius-base` | `borderRadius` | Global Token | +| `@btn-border-radius-sm` | `borderRadisuSM` | Global Token | +| `@btn-border-width` | `lineWidth` | Global Token | +| `@btn-border-style` | `lineStyle` | Global Token | +| `@btn-shadow` | `defaultShadow` | - | +| `@btn-primary-shadow` | `primaryShadow` | - | +| `@btn-text-shadow` | - | Deprecated for no `text-shadow` any more | +| `@btn-primary-color` | `primaryColor` | - | +| `@btn-primary-bg` | `colorPrimary` | Global Token | +| `@btn-default-color` | `colorText` | Global Token | +| `@btn-default-bg` | `colorBgContainer` | Global Token | +| `@btn-default-border` | `colorBorder` | Global Token | +| `@btn-danger-color` | `dangerColor` | - | +| `@btn-danger-bg` | `colorError` | Global Token | +| `@btn-danger-border` | `colorError` | Global Token | +| `@btn-disable-color` | `colorTextDisabled` | Global Token | +| `@btn-disable-bg` | `colorBgContainerDisabled` | Global Token | +| `@btn-disable-border` | `borderColorDisabled` | - | +| `@btn-default-ghost-color` | `defaultGhostColor` | - | +| `@btn-default-ghost-bg` | `ghostBg` | - | +| `@btn-default-ghost-border` | `defaultGhostBorderColor` | - | +| `@btn-font-size-lg` | `fontSizeLG` | Global Token | +| `@btn-font-size-sm` | `fontSizeSM` | Global Token | +| `@btn-padding-horizontal-base` | `paddingInline` | - | +| `@btn-padding-horizontal-lg` | `paddingInlineLG` | - | +| `@btn-padding-horizontal-sm` | `paddingInlineSM` | - | +| `@btn-height-base` | `controlHeight` | Global Token | +| `@btn-height-lg` | `controlHeightLG` | Global Token | +| `@btn-height-sm` | `controlHeightSM` | Global Token | +| `@btn-line-height` | `lineHeight` | Global Token | +| `@btn-circle-size` | `controlHeight` | Global Token | +| `@btn-circle-size-lg` | `controlHeightLG` | Global Token | +| `@btn-circle-size-sm` | `controlHeightSM` | Global Token | +| `@btn-square-size` | `controlHeight` | Global Token | +| `@btn-square-size-lg` | `controlHeightLG` | Global Token | +| `@btn-square-size-sm` | `controlHeightSM` | Global Token | +| `@btn-square-only-icon-size` | `onlyIconSize` | - | +| `@btn-square-only-icon-size-sm` | `onlyIconSizeSM` | - | +| `@btn-square-only-icon-size-lg` | `onlyIconSizeLG` | - | +| `@btn-group-border` | `groupBorderColor` | - | +| `@btn-link-hover-bg` | `linkHoverBg` | - | +| `@btn-text-hover-bg` | `textHoverBg` | - | ### Calendar @@ -434,7 +481,7 @@ export default App; ### Slider -| Less 变量 | Component Token | 备注 | +| Less variables | Component Token | Note | | --- | --- | --- | | `@slider-margin` | - | Could be customized with `className` or `style` | | `@slider-rail-background-color` | `railBg` | - | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 0aee516140ae..92d37eeefc1d 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -89,7 +89,54 @@ export default App; | `@breadcrumb-separator-color` | `separatorColor` | - | | `@breadcrumb-separator-margin` | `separatorMargin` | - | - +### Button 按钮 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@btn-font-weight` | `fontWeight` | - | +| `@btn-border-radius-base` | `borderRadius` | 全局 Token | +| `@btn-border-radius-sm` | `borderRadisuSM` | 全局 Token | +| `@btn-border-width` | `lineWidth` | 全局 Token | +| `@btn-border-style` | `lineStyle` | 全局 Token | +| `@btn-shadow` | `defaultShadow` | - | +| `@btn-primary-shadow` | `primaryShadow` | - | +| `@btn-text-shadow` | - | 已废弃，v5 中不再有 `text-shadow` | +| `@btn-primary-color` | `primaryColor` | - | +| `@btn-primary-bg` | `colorPrimary` | 全局 Token | +| `@btn-default-color` | `defaultColor` | - | +| `@btn-default-bg` | `defaultBg` | - | +| `@btn-default-border` | `defaultBorderColor` | - | +| `@btn-danger-color` | `dangerColor` | - | +| `@btn-danger-bg` | `colorError` | 全局 Token | +| `@btn-danger-border` | `colorError` | 全局 Token | +| `@btn-disable-color` | `colorTextDisabled` | 全局 Token | +| `@btn-disable-bg` | `colorBgContainerDisabled` | 全局 Token | +| `@btn-disable-border` | `borderColorDisabled` | - | +| `@btn-default-ghost-color` | `defaultGhostColor` | - | +| `@btn-default-ghost-bg` | `ghostBg` | - | +| `@btn-default-ghost-border` | `defaultGhostBorderColor` | - | +| `@btn-font-size-lg` | `fontSizeLG` | 全局 Token | +| `@btn-font-size-sm` | `fontSizeSM` | 全局 Token | +| `@btn-padding-horizontal-base` | `paddingInline` | - | +| `@btn-padding-horizontal-lg` | `paddingInlineLG` | - | +| `@btn-padding-horizontal-sm` | `paddingInlineSM` | - | +| `@btn-height-base` | `controlHeight` | 全局 Token | +| `@btn-height-lg` | `controlHeightLG` | 全局 Token | +| `@btn-height-sm` | `controlHeightSM` | 全局 Token | +| `@btn-line-height` | `lineHeight` | 全局 Token | +| `@btn-circle-size` | `controlHeight` | 全局 Token | +| `@btn-circle-size-lg` | `controlHeightLG` | 全局 Token | +| `@btn-circle-size-sm` | `controlHeightSM` | 全局 Token | +| `@btn-square-size` | `controlHeight` | 全局 Token | +| `@btn-square-size-lg` | `controlHeightLG` | 全局 Token | +| `@btn-square-size-sm` | `controlHeightSM` | 全局 Token | +| `@btn-square-only-icon-size` | `onlyIconSize` | - | +| `@btn-square-only-icon-size-sm` | `onlyIconSizeSM` | - | +| `@btn-square-only-icon-size-lg` | `onlyIconSizeLG` | - | +| `@btn-group-border` | `groupBorderColor` | - | +| `@btn-link-hover-bg` | `linkHoverBg` | - | +| `@btn-text-hover-bg` | `textHoverBg` | - | ### Calendar 日历 From 8a3870fc3162471f244faddce8be2f2935a71962 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: Tue, 8 Aug 2023 16:48:26 +0800 Subject: [PATCH 009/318] feat: Watermark support nest Modal & Drawer (#44104) * docs: add demo * refactor: init * refactor: of it * refactor: simple content * chore: unique func * chore: refactor * chore: support modal watermark * feat: support nest watermark * test: add test case * chore: fix lint * chore: bump rc-image * test: add test case * refactor: use same func --- components/_util/wave/useWave.ts | 2 +- components/anchor/Anchor.tsx | 2 +- components/drawer/index.tsx | 6 + components/dropdown/dropdown.tsx | 4 +- components/menu/menu.tsx | 2 +- components/modal/Modal.tsx | 7 + .../__snapshots__/demo-extend.test.ts.snap | 44 +++ .../__tests__/__snapshots__/demo.test.ts.snap | 38 +++ components/watermark/__tests__/index.test.tsx | 32 ++ components/watermark/context.ts | 33 ++ components/watermark/demo/portal.md | 7 + components/watermark/demo/portal.tsx | 50 +++ components/watermark/index.en-US.md | 1 + components/watermark/index.tsx | 286 ++++++------------ components/watermark/index.zh-CN.md | 1 + components/watermark/useContent.tsx | 156 ++++++++++ components/watermark/useRafDebounce.tsx | 26 ++ components/watermark/useWatermark.tsx | 61 ++++ components/watermark/utils.ts | 6 +- package.json | 10 +- 20 files changed, 571 insertions(+), 203 deletions(-) create mode 100644 components/watermark/context.ts create mode 100644 components/watermark/demo/portal.md create mode 100644 components/watermark/demo/portal.tsx create mode 100644 components/watermark/useContent.tsx create mode 100644 components/watermark/useRafDebounce.tsx create mode 100644 components/watermark/useWatermark.tsx diff --git a/components/_util/wave/useWave.ts b/components/_util/wave/useWave.ts index 788141ebb7ad..24bee62e2243 100644 --- a/components/_util/wave/useWave.ts +++ b/components/_util/wave/useWave.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import useEvent from 'rc-util/lib/hooks/useEvent'; +import { useEvent } from 'rc-util'; import raf from 'rc-util/lib/raf'; import showWaveEffect from './WaveEffect'; import { ConfigContext } from '../../config-provider'; diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx index 0a8e510fcab7..af5436e79a8b 100644 --- a/components/anchor/Anchor.tsx +++ b/components/anchor/Anchor.tsx @@ -1,5 +1,5 @@ import classNames from 'classnames'; -import useEvent from 'rc-util/lib/hooks/useEvent'; +import { useEvent } from 'rc-util'; import * as React from 'react'; import scrollIntoView from 'scroll-into-view-if-needed'; diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 8b737f885d4f..b71ba51e56e9 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -16,6 +16,7 @@ import DrawerPanel from './DrawerPanel'; // CSSINJS import { NoCompactStyle } from '../space/Compact'; import useStyle from './style'; +import { usePanelRef } from '../watermark/context'; const SizeTypes = ['default', 'large'] as const; type sizeType = typeof SizeTypes[number]; @@ -137,6 +138,10 @@ const Drawer: React.FC & { motionDeadline: 500, }); + // ============================ Refs ============================ + // Select `ant-modal-content` by `panelRef` + const panelRef = usePanelRef(); + // =========================== Render =========================== return wrapSSR( @@ -157,6 +162,7 @@ const Drawer: React.FC & { rootClassName={drawerClassName} getContainer={getContainer} afterOpenChange={afterOpenChange ?? afterVisibleChange} + panelRef={panelRef} > diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx index ca92efd35b03..c9250140a33f 100644 --- a/components/dropdown/dropdown.tsx +++ b/components/dropdown/dropdown.tsx @@ -1,7 +1,7 @@ import RightOutlined from '@ant-design/icons/RightOutlined'; import classNames from 'classnames'; import RcDropdown from 'rc-dropdown'; -import useEvent from 'rc-util/lib/hooks/useEvent'; +import { useEvent } from 'rc-util'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; @@ -28,7 +28,7 @@ const Placements = [ 'bottom', ] as const; -type Placement = (typeof Placements)[number]; +type Placement = typeof Placements[number]; type DropdownPlacement = Exclude; type OverlayFunc = () => React.ReactElement; diff --git a/components/menu/menu.tsx b/components/menu/menu.tsx index 2bc36bf1852a..6a1e67f7472d 100644 --- a/components/menu/menu.tsx +++ b/components/menu/menu.tsx @@ -2,7 +2,7 @@ import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined'; import classNames from 'classnames'; import type { MenuProps as RcMenuProps, MenuRef as RcMenuRef } from 'rc-menu'; import RcMenu from 'rc-menu'; -import useEvent from 'rc-util/lib/hooks/useEvent'; +import { useEvent } from 'rc-util'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; import { forwardRef } from 'react'; diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx index 14974f4cbe44..7a5138ab5f2d 100644 --- a/components/modal/Modal.tsx +++ b/components/modal/Modal.tsx @@ -12,6 +12,7 @@ import { NoCompactStyle } from '../space/Compact'; import type { ModalProps, MousePosition } from './interface'; import { Footer, renderCloseIcon } from './shared'; import useStyle from './style'; +import { usePanelRef } from '../watermark/context'; let mousePosition: MousePosition; @@ -103,6 +104,11 @@ const Modal: React.FC = (props) => { true, ); + // ============================ Refs ============================ + // Select `ant-modal-content` by `panelRef` + const panelRef = usePanelRef(`.${prefixCls}-content`); + + // =========================== Render =========================== return wrapSSR( @@ -124,6 +130,7 @@ const Modal: React.FC = (props) => { maskTransitionName={getTransitionName(rootPrefixCls, 'fade', props.maskTransitionName)} className={classNames(hashId, className, modal?.className)} style={{ ...modal?.style, ...style }} + panelRef={panelRef} /> , diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap index b9505885a6e7..3892d5837c0d 100644 --- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1233,3 +1233,47 @@ exports[`renders components/watermark/demo/multi-line.tsx extend context correct `; exports[`renders components/watermark/demo/multi-line.tsx extend context correctly 2`] = `[]`; + +exports[`renders components/watermark/demo/portal.tsx extend context correctly 1`] = ` +Array [ +
+
+ +
+
+ +
+
, +
+
+
, +] +`; + +exports[`renders components/watermark/demo/portal.tsx extend context correctly 2`] = `[]`; diff --git a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap index 2f0ff2f26fc1..d11fb0d591eb 100644 --- a/components/watermark/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/watermark/__tests__/__snapshots__/demo.test.ts.snap @@ -795,3 +795,41 @@ exports[`renders components/watermark/demo/multi-line.tsx correctly 1`] = ` />
`; + +exports[`renders components/watermark/demo/portal.tsx correctly 1`] = ` +Array [ +
+
+ +
+
+ +
+
, +
, +] +`; diff --git a/components/watermark/__tests__/index.test.tsx b/components/watermark/__tests__/index.test.tsx index be45ffb33b0c..5ccf993c33ef 100644 --- a/components/watermark/__tests__/index.test.tsx +++ b/components/watermark/__tests__/index.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; import Watermark from '..'; +import Modal from '../../modal'; +import Drawer from '../../drawer'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { render, waitFakeTimer, waitFor } from '../../../tests/utils'; @@ -94,4 +96,34 @@ describe('Watermark', () => { await waitFor(() => expect(target).toBeTruthy()); expect(container).toMatchSnapshot(); }); + + describe('nest component', () => { + function test(name: string, children: React.ReactNode, getWatermarkElement: () => Node) { + it(name, async () => { + const { rerender } = render({children}); + await waitFakeTimer(); + + const watermark = getWatermarkElement(); + + expect(watermark).toHaveStyle({ + zIndex: '9', + }); + + // Not crash when children removed + rerender(); + }); + } + + test( + 'Modal', + , + () => document.body.querySelector('.ant-modal-content')!.lastChild!, + ); + + test( + 'Drawer', + , + () => document.body.querySelector('.ant-drawer-content')!.lastChild!, + ); + }); }); diff --git a/components/watermark/context.ts b/components/watermark/context.ts new file mode 100644 index 000000000000..d30a8add955b --- /dev/null +++ b/components/watermark/context.ts @@ -0,0 +1,33 @@ +import { useEvent } from 'rc-util'; +import * as React from 'react'; + +export interface WatermarkContextProps { + add: (ele: HTMLElement) => void; + remove: (ele: HTMLElement) => void; +} + +function voidFunc() {} + +const WatermarkContext = React.createContext({ + add: voidFunc, + remove: voidFunc, +}); + +export function usePanelRef(panelSelector?: string) { + const watermark = React.useContext(WatermarkContext); + + const panelEleRef = React.useRef(); + const panelRef = useEvent((ele: HTMLElement | null) => { + if (ele) { + const innerContentEle = panelSelector ? ele.querySelector(panelSelector)! : ele; + watermark.add(innerContentEle); + panelEleRef.current = innerContentEle; + } else { + watermark.remove(panelEleRef.current!); + } + }); + + return panelRef; +} + +export default WatermarkContext; diff --git a/components/watermark/demo/portal.md b/components/watermark/demo/portal.md new file mode 100644 index 000000000000..7ce87a489aaa --- /dev/null +++ b/components/watermark/demo/portal.md @@ -0,0 +1,7 @@ +## zh-CN + +在 Modal 与 Drawer 中使用。 + +## en-US + +Use in Modal and Drawer. diff --git a/components/watermark/demo/portal.tsx b/components/watermark/demo/portal.tsx new file mode 100644 index 000000000000..cfb1223fa751 --- /dev/null +++ b/components/watermark/demo/portal.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Watermark, Modal, Drawer, Button, Space } from 'antd'; + +const placeholder = ( +
+ A mock height +
+); + +const App: React.FC = () => { + const [showModal, setShowModal] = React.useState(false); + const [showDrawer, setShowDrawer] = React.useState(false); + + const closeModal = () => setShowModal(false); + const closeDrawer = () => setShowDrawer(false); + + return ( + <> + + + + + + + + {placeholder} + + + {placeholder} + + + + ); +}; + +export default App; diff --git a/components/watermark/index.en-US.md b/components/watermark/index.en-US.md index 59aceaa47880..1856b28341a2 100644 --- a/components/watermark/index.en-US.md +++ b/components/watermark/index.en-US.md @@ -22,6 +22,7 @@ Add specific text or patterns to the page. Multi-line watermark Image watermark Custom configuration +Modal or Drawer ## API diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx index 43d99510728f..f2d3ad270c8b 100644 --- a/components/watermark/index.tsx +++ b/components/watermark/index.tsx @@ -1,15 +1,13 @@ -import MutateObserver from '@rc-component/mutate-observer'; +import { useMutateObserver } from '@rc-component/mutate-observer'; import classNames from 'classnames'; -import React, { useEffect, useRef } from 'react'; -import { getPixelRatio, getStyleStr, reRendering, rotateWatermark } from './utils'; +import React, { useEffect } from 'react'; +import { reRendering } from './utils'; import theme from '../theme'; - -/** - * Base size of the canvas, 1 for parallel layout and 2 for alternate layout - * Only alternate layout is currently supported - */ -const BaseSize = 2; -const FontGap = 3; +import useWatermark from './useWatermark'; +import useRafDebounce from './useRafDebounce'; +import useContent from './useContent'; +import WatermarkContext from './context'; +import type { WatermarkContextProps } from './context'; export interface WatermarkProps { zIndex?: number; @@ -33,6 +31,14 @@ export interface WatermarkProps { children?: React.ReactNode; } +/** + * Only return `next` when size changed. + * This is only used for elements compare, not a shallow equal! + */ +function getSizeDiff(prev: Set, next: Set) { + return prev.size === next.size ? prev : next; +} + const Watermark: React.FC = (props) => { const { /** @@ -68,8 +74,8 @@ const Watermark: React.FC = (props) => { const offsetLeft = offset?.[0] ?? gapXCenter; const offsetTop = offset?.[1] ?? gapYCenter; - const getMarkStyle = () => { - const markStyle: React.CSSProperties = { + const markStyle = React.useMemo(() => { + const mergedStyle: React.CSSProperties = { zIndex, position: 'absolute', left: 0, @@ -84,197 +90,74 @@ const Watermark: React.FC = (props) => { let positionLeft = offsetLeft - gapXCenter; let positionTop = offsetTop - gapYCenter; if (positionLeft > 0) { - markStyle.left = `${positionLeft}px`; - markStyle.width = `calc(100% - ${positionLeft}px)`; + mergedStyle.left = `${positionLeft}px`; + mergedStyle.width = `calc(100% - ${positionLeft}px)`; positionLeft = 0; } if (positionTop > 0) { - markStyle.top = `${positionTop}px`; - markStyle.height = `calc(100% - ${positionTop}px)`; + mergedStyle.top = `${positionTop}px`; + mergedStyle.height = `calc(100% - ${positionTop}px)`; positionTop = 0; } - markStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`; - - return markStyle; - }; - - const containerRef = useRef(null); - const watermarkRef = useRef(); - const stopObservation = useRef(false); - - const destroyWatermark = () => { - if (watermarkRef.current) { - watermarkRef.current.remove(); - watermarkRef.current = undefined; - } - }; - - const appendWatermark = (base64Url: string, markWidth: number) => { - if (containerRef.current && watermarkRef.current) { - stopObservation.current = true; - watermarkRef.current.setAttribute( - 'style', - getStyleStr({ - ...getMarkStyle(), - backgroundImage: `url('${base64Url}')`, - backgroundSize: `${(gapX + markWidth) * BaseSize}px`, - }), - ); - containerRef.current?.append(watermarkRef.current); - // Delayed execution - setTimeout(() => { - stopObservation.current = false; - }); - } - }; + mergedStyle.backgroundPosition = `${positionLeft}px ${positionTop}px`; - /** - * Get the width and height of the watermark. The default values are as follows - * Image: [120, 64]; Content: It's calculated by content; - */ - const getMarkSize = (ctx: CanvasRenderingContext2D) => { - let defaultWidth = 120; - let defaultHeight = 64; - if (!image && ctx.measureText) { - ctx.font = `${Number(fontSize)}px ${fontFamily}`; - const contents = Array.isArray(content) ? content : [content]; - const widths = contents.map((item) => ctx.measureText(item!).width); - defaultWidth = Math.ceil(Math.max(...widths)); - defaultHeight = Number(fontSize) * contents.length + (contents.length - 1) * FontGap; - } - return [width ?? defaultWidth, height ?? defaultHeight] as const; - }; + return mergedStyle; + }, [zIndex, offsetLeft, gapXCenter, offsetTop, gapYCenter]); - const fillTexts = ( - ctx: CanvasRenderingContext2D, - drawX: number, - drawY: number, - drawWidth: number, - drawHeight: number, - ) => { - const ratio = getPixelRatio(); - const mergedFontSize = Number(fontSize) * ratio; - ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`; - ctx.fillStyle = color; - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - ctx.translate(drawWidth / 2, 0); - const contents = Array.isArray(content) ? content : [content]; - contents?.forEach((item, index) => { - ctx.fillText(item ?? '', drawX, drawY + index * (mergedFontSize + FontGap * ratio)); - }); - }; + const [container, setContainer] = React.useState(); - const drawText = ( - canvas: HTMLCanvasElement, - ctx: CanvasRenderingContext2D, - drawX: number, - drawY: number, - drawWidth: number, - drawHeight: number, - alternateRotateX: number, - alternateRotateY: number, - alternateDrawX: number, - alternateDrawY: number, - markWidth: number, - ) => { - fillTexts(ctx, drawX, drawY, drawWidth, drawHeight); - /** Fill the interleaved text after rotation */ - ctx.restore(); - rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate); - fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight); - appendWatermark(canvas.toDataURL(), markWidth); - }; + // Used for nest case like Modal, Drawer + const [subElements, setSubElements] = React.useState(new Set()); - const renderWatermark = () => { - const canvas = document.createElement('canvas'); - const ctx = canvas.getContext('2d'); + // Nest elements should also support watermark + const targetElements = React.useMemo(() => { + const list = container ? [container] : []; + return [...list, ...Array.from(subElements)]; + }, [container, subElements]); - if (ctx) { - if (!watermarkRef.current) { - watermarkRef.current = document.createElement('div'); - } + // ============================ Content ============================= + const [watermarkInfo, setWatermarkInfo] = React.useState<[base64: string, contentWidth: number]>( + null!, + ); - const ratio = getPixelRatio(); - const [markWidth, markHeight] = getMarkSize(ctx); - const canvasWidth = (gapX + markWidth) * ratio; - const canvasHeight = (gapY + markHeight) * ratio; - canvas.setAttribute('width', `${canvasWidth * BaseSize}px`); - canvas.setAttribute('height', `${canvasHeight * BaseSize}px`); + // Generate new Watermark content + const renderWatermark = useContent( + { + ...props, + rotate, + gap, + }, + (base64, contentWidth) => { + setWatermarkInfo([base64, contentWidth]); + }, + ); - const drawX = (gapX * ratio) / 2; - const drawY = (gapY * ratio) / 2; - const drawWidth = markWidth * ratio; - const drawHeight = markHeight * ratio; - const rotateX = (drawWidth + gapX * ratio) / 2; - const rotateY = (drawHeight + gapY * ratio) / 2; - /** Alternate drawing parameters */ - const alternateDrawX = drawX + canvasWidth; - const alternateDrawY = drawY + canvasHeight; - const alternateRotateX = rotateX + canvasWidth; - const alternateRotateY = rotateY + canvasHeight; + const syncWatermark = useRafDebounce(renderWatermark); - ctx.save(); - rotateWatermark(ctx, rotateX, rotateY, rotate); + // ============================= Effect ============================= + // Append watermark to the container + const [appendWatermark, removeWatermark, isWatermarkEle] = useWatermark(markStyle, gapX); - if (image) { - const img = new Image(); - img.onload = () => { - ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight); - /** Draw interleaved pictures after rotation */ - ctx.restore(); - rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate); - ctx.drawImage(img, alternateDrawX, alternateDrawY, drawWidth, drawHeight); - appendWatermark(canvas.toDataURL(), markWidth); - }; - img.onerror = () => - drawText( - canvas, - ctx, - drawX, - drawY, - drawWidth, - drawHeight, - alternateRotateX, - alternateRotateY, - alternateDrawX, - alternateDrawY, - markWidth, - ); - img.crossOrigin = 'anonymous'; - img.referrerPolicy = 'no-referrer'; - img.src = image; - } else { - drawText( - canvas, - ctx, - drawX, - drawY, - drawWidth, - drawHeight, - alternateRotateX, - alternateRotateY, - alternateDrawX, - alternateDrawY, - markWidth, - ); - } + useEffect(() => { + if (watermarkInfo) { + targetElements.forEach((holder) => { + appendWatermark(watermarkInfo[0], watermarkInfo[1], holder); + }); } - }; + }, [watermarkInfo, targetElements]); + // ============================ Observe ============================= const onMutate = (mutations: MutationRecord[]) => { - if (stopObservation.current) { - return; - } mutations.forEach((mutation) => { - if (reRendering(mutation, watermarkRef.current)) { - destroyWatermark(); - renderWatermark(); + if (reRendering(mutation, isWatermarkEle)) { + syncWatermark(); } }); }; - useEffect(renderWatermark, [ + useMutateObserver(targetElements, onMutate); + + useEffect(syncWatermark, [ rotate, zIndex, width, @@ -292,16 +175,39 @@ const Watermark: React.FC = (props) => { offsetTop, ]); + // ============================ Context ============================= + const watermarkContext = React.useMemo( + () => ({ + add: (ele) => { + setSubElements((prev) => { + const clone = new Set(prev); + clone.add(ele); + return getSizeDiff(prev, clone); + }); + }, + remove: (ele) => { + removeWatermark(ele); + + setSubElements((prev) => { + const clone = new Set(prev); + clone.delete(ele); + + return getSizeDiff(prev, clone); + }); + }, + }), + [], + ); + + // ============================= Render ============================= return ( - -
- {children} -
- +
+ {children} +
); }; diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md index 78f3c0601231..0cb3867d0576 100644 --- a/components/watermark/index.zh-CN.md +++ b/components/watermark/index.zh-CN.md @@ -23,6 +23,7 @@ demo: 多行水印 图片水印 自定义配置 +Modal 与 Drawer ## API diff --git a/components/watermark/useContent.tsx b/components/watermark/useContent.tsx new file mode 100644 index 000000000000..705bd8b7d512 --- /dev/null +++ b/components/watermark/useContent.tsx @@ -0,0 +1,156 @@ +import type { WatermarkProps } from '.'; +import useToken from '../theme/useToken'; +import { BaseSize, FontGap } from './useWatermark'; +import { getPixelRatio, rotateWatermark } from './utils'; + +export default function useContent( + props: Pick & + Required>, + callback: (base64Url: string, markWidth: number) => void, +) { + const { rotate, width, height, image, content, font = {}, gap } = props; + + const [, token] = useToken(); + + const { + color = token.colorFill, + fontSize = token.fontSizeLG, + fontWeight = 'normal', + fontStyle = 'normal', + fontFamily = 'sans-serif', + } = font; + + const [gapX, gapY] = gap; + + /** + * Get the width and height of the watermark. The default values are as follows + * Image: [120, 64]; Content: It's calculated by content; + */ + const getMarkSize = (ctx: CanvasRenderingContext2D) => { + let defaultWidth = 120; + let defaultHeight = 64; + if (!image && ctx.measureText) { + ctx.font = `${Number(fontSize)}px ${fontFamily}`; + const contents = Array.isArray(content) ? content : [content]; + const widths = contents.map((item) => ctx.measureText(item!).width); + defaultWidth = Math.ceil(Math.max(...widths)); + defaultHeight = Number(fontSize) * contents.length + (contents.length - 1) * FontGap; + } + return [width ?? defaultWidth, height ?? defaultHeight] as const; + }; + + const fillTexts = ( + ctx: CanvasRenderingContext2D, + drawX: number, + drawY: number, + drawWidth: number, + drawHeight: number, + ) => { + const ratio = getPixelRatio(); + const mergedFontSize = Number(fontSize) * ratio; + ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`; + ctx.fillStyle = color; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; + ctx.translate(drawWidth / 2, 0); + const contents = Array.isArray(content) ? content : [content]; + contents?.forEach((item, index) => { + ctx.fillText(item ?? '', drawX, drawY + index * (mergedFontSize + FontGap * ratio)); + }); + }; + + const drawText = ( + canvas: HTMLCanvasElement, + ctx: CanvasRenderingContext2D, + drawX: number, + drawY: number, + drawWidth: number, + drawHeight: number, + alternateRotateX: number, + alternateRotateY: number, + alternateDrawX: number, + alternateDrawY: number, + markWidth: number, + ) => { + fillTexts(ctx, drawX, drawY, drawWidth, drawHeight); + /** Fill the interleaved text after rotation */ + ctx.restore(); + rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate); + fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight); + callback(canvas.toDataURL(), markWidth); + }; + + const renderWatermark = () => { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d'); + + if (ctx) { + const ratio = getPixelRatio(); + const [markWidth, markHeight] = getMarkSize(ctx); + const canvasWidth = (gapX + markWidth) * ratio; + const canvasHeight = (gapY + markHeight) * ratio; + canvas.setAttribute('width', `${canvasWidth * BaseSize}px`); + canvas.setAttribute('height', `${canvasHeight * BaseSize}px`); + + const drawX = (gapX * ratio) / 2; + const drawY = (gapY * ratio) / 2; + const drawWidth = markWidth * ratio; + const drawHeight = markHeight * ratio; + const rotateX = (drawWidth + gapX * ratio) / 2; + const rotateY = (drawHeight + gapY * ratio) / 2; + /** Alternate drawing parameters */ + const alternateDrawX = drawX + canvasWidth; + const alternateDrawY = drawY + canvasHeight; + const alternateRotateX = rotateX + canvasWidth; + const alternateRotateY = rotateY + canvasHeight; + + ctx.save(); + rotateWatermark(ctx, rotateX, rotateY, rotate); + + if (image) { + const img = new Image(); + img.onload = () => { + ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight); + /** Draw interleaved pictures after rotation */ + ctx.restore(); + rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate); + ctx.drawImage(img, alternateDrawX, alternateDrawY, drawWidth, drawHeight); + callback(canvas.toDataURL(), markWidth); + }; + img.onerror = () => + drawText( + canvas, + ctx, + drawX, + drawY, + drawWidth, + drawHeight, + alternateRotateX, + alternateRotateY, + alternateDrawX, + alternateDrawY, + markWidth, + ); + img.crossOrigin = 'anonymous'; + img.referrerPolicy = 'no-referrer'; + img.src = image; + } else { + drawText( + canvas, + ctx, + drawX, + drawY, + drawWidth, + drawHeight, + alternateRotateX, + alternateRotateY, + alternateDrawX, + alternateDrawY, + markWidth, + ); + } + } + }; + + return renderWatermark; +} diff --git a/components/watermark/useRafDebounce.tsx b/components/watermark/useRafDebounce.tsx new file mode 100644 index 000000000000..6936dd14f520 --- /dev/null +++ b/components/watermark/useRafDebounce.tsx @@ -0,0 +1,26 @@ +import React from 'react'; +import raf from 'rc-util/lib/raf'; +import { useEvent } from 'rc-util'; + +/** + * Callback will only execute last one for each raf + */ +export default function useRafDebounce(callback: VoidFunction) { + const executeRef = React.useRef(false); + const rafRef = React.useRef(); + + const wrapperCallback = useEvent(callback); + + return () => { + if (executeRef.current) { + return; + } + + executeRef.current = true; + wrapperCallback(); + + rafRef.current = raf(() => { + executeRef.current = false; + }); + }; +} diff --git a/components/watermark/useWatermark.tsx b/components/watermark/useWatermark.tsx new file mode 100644 index 000000000000..ded73e570049 --- /dev/null +++ b/components/watermark/useWatermark.tsx @@ -0,0 +1,61 @@ +import * as React from 'react'; +import { getStyleStr } from './utils'; + +/** + * Base size of the canvas, 1 for parallel layout and 2 for alternate layout + * Only alternate layout is currently supported + */ +export const BaseSize = 2; +export const FontGap = 3; + +export type AppendWatermark = ( + base64Url: string, + markWidth: number, + container: HTMLElement, +) => void; + +export default function useWatermark( + markStyle: React.CSSProperties, + gapX: number, +): [ + appendWatermark: AppendWatermark, + removeWatermark: (container: HTMLElement) => void, + isWatermarkEle: (ele: Node) => boolean, +] { + const [watermarkMap] = React.useState(() => new Map()); + + const appendWatermark = (base64Url: string, markWidth: number, container: HTMLElement) => { + if (container) { + if (!watermarkMap.get(container)) { + const newWatermarkEle = document.createElement('div'); + watermarkMap.set(container, newWatermarkEle); + } + + const watermarkEle = watermarkMap.get(container)!; + + watermarkEle.setAttribute( + 'style', + getStyleStr({ + ...markStyle, + backgroundImage: `url('${base64Url}')`, + backgroundSize: `${(gapX + markWidth) * BaseSize}px`, + }), + ); + container.append(watermarkEle); + } + }; + + const removeWatermark = (container: HTMLElement) => { + const watermarkEle = watermarkMap.get(container); + + if (watermarkEle && container) { + container.removeChild(watermarkEle); + } + + watermarkMap.delete(container); + }; + + const isWatermarkEle = (ele: any) => Array.from(watermarkMap.values()).includes(ele); + + return [appendWatermark, removeWatermark, isWatermarkEle]; +} diff --git a/components/watermark/utils.ts b/components/watermark/utils.ts index 84103b59c533..e0fdc07a9bf2 100644 --- a/components/watermark/utils.ts +++ b/components/watermark/utils.ts @@ -27,14 +27,14 @@ export function rotateWatermark( } /** Whether to re-render the watermark */ -export const reRendering = (mutation: MutationRecord, watermarkElement?: HTMLElement) => { +export const reRendering = (mutation: MutationRecord, isWatermarkEle: (ele: any) => boolean) => { let flag = false; // Whether to delete the watermark node if (mutation.removedNodes.length) { - flag = Array.from(mutation.removedNodes).some((node) => node === watermarkElement); + flag = Array.from(mutation.removedNodes).some((node) => isWatermarkEle(node)); } // Whether the watermark dom property value has been modified - if (mutation.type === 'attributes' && mutation.target === watermarkElement) { + if (mutation.type === 'attributes' && isWatermarkEle(mutation.target)) { flag = true; } return flag; diff --git a/package.json b/package.json index 721cb2e92601..b2c3f3883af8 100644 --- a/package.json +++ b/package.json @@ -116,7 +116,7 @@ "@babel/runtime": "^7.18.3", "@ctrl/tinycolor": "^3.6.0", "@rc-component/color-picker": "~1.4.0", - "@rc-component/mutate-observer": "^1.0.0", + "@rc-component/mutate-observer": "^1.1.0", "@rc-component/tour": "~1.8.1", "@rc-component/trigger": "^1.15.0", "classnames": "^2.2.6", @@ -126,11 +126,11 @@ "rc-cascader": "~3.14.0", "rc-checkbox": "~3.1.0", "rc-collapse": "~3.7.0", - "rc-dialog": "~9.1.0", - "rc-drawer": "~6.2.0", + "rc-dialog": "~9.2.0", + "rc-drawer": "~6.4.1", "rc-dropdown": "~4.1.0", "rc-field-form": "~1.36.0", - "rc-image": "~7.1.0", + "rc-image": "~7.2.0", "rc-input": "~1.1.0", "rc-input-number": "~8.0.2", "rc-mentions": "~2.5.0", @@ -154,7 +154,7 @@ "rc-tree": "~5.7.6", "rc-tree-select": "~5.11.0", "rc-upload": "~4.3.0", - "rc-util": "^5.32.0", + "rc-util": "^5.36.0", "scroll-into-view-if-needed": "^3.0.3", "throttle-debounce": "^5.0.0" }, From 5465975b1a59870676ac96a6e404181fdb04abdf Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 9 Aug 2023 10:52:39 +0800 Subject: [PATCH 010/318] feat: table component token (#44118) * feat: table component token * chore: add typedoc --- .../__snapshots__/demo-extend.test.ts.snap | 2566 +++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 2356 +++++++++++++++ components/table/demo/component-token.md | 7 + components/table/demo/component-token.tsx | 313 ++ components/table/index.en-US.md | 1 + components/table/index.zh-CN.md | 1 + components/table/style/filter.ts | 2 + components/table/style/index.ts | 440 ++- components/table/style/sticky.ts | 3 +- docs/react/migrate-less-variables.en-US.md | 41 +- docs/react/migrate-less-variables.zh-CN.md | 41 +- 11 files changed, 5661 insertions(+), 110 deletions(-) create mode 100644 components/table/demo/component-token.md create mode 100644 components/table/demo/component-token.tsx diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap index b3046b05859f..c367c23c1759 100644 --- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -867,6 +867,2572 @@ exports[`renders components/table/demo/colspan-rowspan.tsx extend context correc exports[`renders components/table/demo/colspan-rowspan.tsx extend context correctly 2`] = `[]`; +exports[`renders components/table/demo/component-token.tsx extend context correctly 1`] = ` +Array [ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
, +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ 		+ Name + +
+ + Age + + + + +
+
+
+
+ +
+
+
+
+ + Address + + + + + + +
+
+ +
+
+ + Action + + + + +
+
+
+
+ +
+
+
+ + + + John Brown + + 12 + + New York No. 1 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 22 + + New York No. 2 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 32 + + New York No. 3 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 42 + + New York No. 4 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 52 + + New York No. 5 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 62 + + New York No. 6 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 72 + + New York No. 7 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 82 + + New York No. 8 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 92 + + New York No. 9 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 102 + + New York No. 10 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+
+
+
+ Here is footer +
+
+
    +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • +
+
+
+
, +] +`; + +exports[`renders components/table/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/table/demo/custom-filter-panel.tsx extend context correctly 1`] = `
`; +exports[`renders components/table/demo/component-token.tsx correctly 1`] = ` +Array [ +
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ + + + +
+
+
+
+
+
+
, +
+
+
+
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +
+ +
+ 		+ Name + +
+ + Age + + + + +
+ 		+
+ + Address + + + + + + +
+ 		+
+ + Action + + + + +
+
+ + + + John Brown + + 12 + + New York No. 1 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 22 + + New York No. 2 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 32 + + New York No. 3 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 42 + + New York No. 4 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 52 + + New York No. 5 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 62 + + New York No. 6 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 72 + + New York No. 7 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 82 + + New York No. 8 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 92 + + New York No. 9 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+ + + + John Brown + + 102 + + New York No. 10 Lake Park + +
+
+ + Delete + +
+
+ +
+
+ More actions +
+
+ + + +
+
+ +
+
+
+
+
+
+ Here is footer +
+
+
    +
  • + +
    • +
  • + + 1 + +
    • +
  • + +
    • +
+
+
+
, +] +`; + exports[`renders components/table/demo/custom-filter-panel.tsx correctly 1`] = `
= [ + { + title: 'Name', + dataIndex: 'name', + }, + { + title: 'Age', + dataIndex: 'age', + sorter: (a, b) => a.age - b.age, + }, + { + title: 'Address', + dataIndex: 'address', + filters: [ + { + text: 'London', + value: 'London', + }, + { + text: 'New York', + value: 'New York', + }, + ], + onFilter: (value, record) => record.address.indexOf(value as string) === 0, + }, + { + title: 'Action', + key: 'action', + sorter: true, + render: () => ( + + Delete + + + More actions + + + + + ), + }, +]; + +const data: DataType[] = []; +for (let i = 1; i <= 10; i++) { + data.push({ + key: i, + name: 'John Brown', + age: Number(`${i}2`), + address: `New York No. ${i} Lake Park`, + description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`, + }); +} + +const defaultExpandable = { expandedRowRender: (record: DataType) =>

{record.description}

}; +const defaultTitle = () => 'Here is title'; +const defaultFooter = () => 'Here is footer'; + +const App: React.FC = () => { + const [bordered, setBordered] = useState(false); + const [loading, setLoading] = useState(false); + const [size, setSize] = useState('large'); + const [expandable, setExpandable] = useState | undefined>( + defaultExpandable, + ); + const [showTitle, setShowTitle] = useState(false); + const [showHeader, setShowHeader] = useState(true); + const [showfooter, setShowFooter] = useState(true); + const [rowSelection, setRowSelection] = useState | undefined>({}); + const [hasData, setHasData] = useState(true); + const [tableLayout, setTableLayout] = useState(); + const [top, setTop] = useState('none'); + const [bottom, setBottom] = useState('bottomRight'); + const [ellipsis, setEllipsis] = useState(false); + const [yScroll, setYScroll] = useState(false); + const [xScroll, setXScroll] = useState(); + + const handleBorderChange = (enable: boolean) => { + setBordered(enable); + }; + + const handleLoadingChange = (enable: boolean) => { + setLoading(enable); + }; + + const handleSizeChange = (e: RadioChangeEvent) => { + setSize(e.target.value); + }; + + const handleTableLayoutChange = (e: RadioChangeEvent) => { + setTableLayout(e.target.value); + }; + + const handleExpandChange = (enable: boolean) => { + setExpandable(enable ? defaultExpandable : undefined); + }; + + const handleEllipsisChange = (enable: boolean) => { + setEllipsis(enable); + }; + + const handleTitleChange = (enable: boolean) => { + setShowTitle(enable); + }; + + const handleHeaderChange = (enable: boolean) => { + setShowHeader(enable); + }; + + const handleFooterChange = (enable: boolean) => { + setShowFooter(enable); + }; + + const handleRowSelectionChange = (enable: boolean) => { + setRowSelection(enable ? {} : undefined); + }; + + const handleYScrollChange = (enable: boolean) => { + setYScroll(enable); + }; + + const handleXScrollChange = (e: RadioChangeEvent) => { + setXScroll(e.target.value); + }; + + const handleDataChange = (newHasData: boolean) => { + setHasData(newHasData); + }; + + const scroll: { x?: number | string; y?: number | string } = {}; + if (yScroll) { + scroll.y = 240; + } + if (xScroll) { + scroll.x = '100vw'; + } + + const tableColumns = columns.map((item) => ({ ...item, ellipsis })); + if (xScroll === 'fixed') { + tableColumns[0].fixed = true; + tableColumns[tableColumns.length - 1].fixed = 'right'; + } + + const tableProps: TableProps = { + bordered, + loading, + size, + expandable, + title: showTitle ? defaultTitle : undefined, + showHeader, + footer: showfooter ? defaultFooter : undefined, + rowSelection, + scroll, + tableLayout, + }; + + return ( + <> +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + Large + Middle + Small + + + + + Unset + Scroll + Fixed Columns + + + + + Unset + Fixed + + + + { + setTop(e.target.value); + }} + > + TopLeft + TopCenter + TopRight + None + + + + { + setBottom(e.target.value); + }} + > + BottomLeft + BottomCenter + BottomRight + None + + +
+ + + + + ); +}; + +export default App; diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index d0b24b0a5a80..7e13638a2ea1 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -105,6 +105,7 @@ const columns = [ Fixed header and scroll bar with the pageDynamic Settingsselections with icon +Component Token ## API diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index b35ce8051cc6..818c831fc5f6 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -106,6 +106,7 @@ const columns = [ 随页面滚动的固定表头和滚动条动态控制表格属性带下拉箭头的表头 +组件 Token ## API diff --git a/components/table/style/filter.ts b/components/table/style/filter.ts index bd04f1d92a28..d86a223d7bf6 100644 --- a/components/table/style/filter.ts +++ b/components/table/style/filter.ts @@ -29,6 +29,7 @@ const genFilterStyle: GenerateStyle = (token) => { controlItemBgHover, controlItemBgActive, boxShadowSecondary, + filterDropdownMenuBg, } = token; const dropdownPrefixCls = `${antCls}-dropdown`; const tableFilterDropdownPrefixCls = `${componentCls}-filter-dropdown`; @@ -88,6 +89,7 @@ const genFilterStyle: GenerateStyle = (token) => { border: 0, boxShadow: 'none', borderRadius: 'unset', + backgroundColor: filterDropdownMenuBg, '&:empty::after': { display: 'block', diff --git a/components/table/style/index.ts b/components/table/style/index.ts index f1ffe8b34c18..6a11ccef9166 100644 --- a/components/table/style/index.ts +++ b/components/table/style/index.ts @@ -18,7 +18,163 @@ import genSorterStyle from './sorter'; import genStickyStyle from './sticky'; import genSummaryStyle from './summary'; -export interface ComponentToken {} +export interface ComponentToken { + /** + * @desc 表头背景 + * @descEN Background of table header + */ + headerBg: string; + /** + * @desc 表头文字颜色 + * @descEN Color of table header text + */ + headerColor: string; + /** + * @desc 表头排序激活态背景色 + * @descEN Background color of table header when sorted + */ + headerSortActiveBg: string; + /** + * @desc 表头排序激活态悬浮背景色 + * @descEN Background color of table header when sorted and hovered + */ + headerSortHoverBg: string; + /** + * @desc 表格排序列背景色 + * @descEN Background color of table sorted column + */ + bodySortBg: string; + /** + * @desc 表格行悬浮背景色 + * @descEN Background color of table hovered row + */ + rowHoverBg: string; + /** + * @desc 表格行选中背景色 + * @descEN Background color of table selected row + */ + rowSelectedBg: string; + /** + * @desc 表格行选中悬浮背景色 + * @descEN Background color of table selected row when hovered + */ + rowSelectedHoverBg: string; + /** + * @desc 表格行展开背景色 + * @descEN Background color of table expanded row + */ + rowExpandedBg: string; + /** + * @desc 单元格纵向内间距 + * @descEN Vertical padding of table cell + */ + cellPaddingBlock: number; + /** + * @desc 单元格横向内间距（默认大尺寸） + * @descEN Horizontal padding of table cell (large size by default) + */ + cellPaddingInline: number; + /** + * @desc 单元格纵向内间距（中等尺寸） + * @descEN Vertical padding of table cell (middle size) + */ + cellPaddingBlockMD: number; + /** + * @desc 单元格横向内间距（中等尺寸） + * @descEN Horizontal padding of table cell (middle size) + */ + cellPaddingInlineMD: number; + /** + * @desc 单元格纵向内间距（小尺寸） + * @descEN Vertical padding of table cell (small size) + */ + cellPaddingBlockSM: number; + /** + * @desc 单元格横向内间距（小尺寸） + * @descEN Horizontal padding of table cell (small size) + */ + cellPaddingInlineSM: number; + /** + * @desc 表格边框/分割线颜色 + * @descEN Border color of table + */ + borderColor: string; + /** + * @desc 表头圆角 + * @descEN Border radius of table header + */ + headerBorderRadius: number; + /** + * @desc 表格底部背景色 + * @descEN Background of footer + */ + footerBg: string; + /** + * @desc 表格底部文字颜色 + * @descEN Color of footer text + */ + footerColor: string; + /** + * @desc 单元格文字大小（默认大尺寸） + * @descEN Font size of table cell (large size by default) + */ + cellFontSize: number; + /** + * @desc 单元格文字大小（中等尺寸） + * @descEN Font size of table cell (middle size) + */ + cellFontSizeMD: number; + /** + * @desc 单元格文字大小（小尺寸） + * @descEN Font size of table cell (small size) + */ + cellFontSizeSM: number; + /** + * @desc 表头分割线颜色 + * @descEN Split border color of table header + */ + headerSplitColor: string; + /** + * @desc 固定表头排序激活态背景色 + * @descEN Background color of fixed table header when sorted + */ + fixedHeaderSortActiveBg: string; + /** + * @desc 表头过滤按钮悬浮背景色 + * @descEN Background color of table header filter button when hovered + */ + headerFilterHoverBg: string; + /** + * @desc 过滤下拉菜单选项背景 + * @descEN Background of filter dropdown menu item + */ + filterDropdownMenuBg: string; + /** + * @desc 过滤下拉菜单颜色 + * @descEN Color of filter dropdown + */ + filterDropdownBg: string; + /** + * @desc 展开按钮背景色 + * @descEN Background of expand button + */ + expandIconBg: string; + /** + * @desc 选择列宽度 + * @descEN Width of selection column + */ + selectionColumnWidth: number; + /** + * @desc Sticky 模式下滚动条背景色 + * @descEN Background of sticky scrollbar + */ + stickyScrollBarBg: string; + /** + * @desc Sticky 模式下滚动条圆角 + * @descEN Border radius of sticky scrollbar + */ + stickyScrollBarBorderRadius: number; +} export interface TableToken extends FullToken<'Table'> { tableFontSize: number; @@ -238,118 +394,188 @@ const genTableStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Table', (token) => { - const { - controlItemBgActive, - controlItemBgActiveHover, - colorTextPlaceholder, - colorTextHeading, - colorSplit, - colorBorderSecondary, - fontSize, - padding, - paddingXS, - paddingSM, - controlHeight, - colorFillAlter, - colorIcon, - colorIconHover, - opacityLoading, - colorBgContainer, - borderRadiusLG, - colorFillContent, - colorFillSecondary, - controlInteractiveSize: checkboxSize, - } = token; +export default genComponentStyleHook( + 'Table', + (token) => { + const { + colorTextHeading, + colorSplit, + colorIcon, + colorIconHover, + opacityLoading, + colorBgContainer, + controlInteractiveSize: checkboxSize, + headerBg, + headerColor, + headerSortActiveBg, + headerSortHoverBg, + bodySortBg, + rowHoverBg, + rowSelectedBg, + rowSelectedHoverBg, + rowExpandedBg, + cellPaddingBlock, + cellPaddingInline, + cellPaddingBlockMD, + cellPaddingInlineMD, + cellPaddingBlockSM, + cellPaddingInlineSM, + borderColor, + footerBg, + footerColor, + headerBorderRadius, + cellFontSize, + cellFontSizeMD, + cellFontSizeSM, + headerSplitColor, + fixedHeaderSortActiveBg, + headerFilterHoverBg, + filterDropdownBg, + expandIconBg, + selectionColumnWidth, + stickyScrollBarBg, + } = token; - const baseColorAction = new TinyColor(colorIcon); - const baseColorActionHover = new TinyColor(colorIconHover); + const baseColorAction = new TinyColor(colorIcon); + const baseColorActionHover = new TinyColor(colorIconHover); - const tableSelectedRowBg = controlItemBgActive; - const zIndexTableFixed: number = 2; + const zIndexTableFixed: number = 2; - const colorFillSecondarySolid = new TinyColor(colorFillSecondary) - .onBackground(colorBgContainer) - .toHexShortString(); - const colorFillContentSolid = new TinyColor(colorFillContent) - .onBackground(colorBgContainer) - .toHexShortString(); + const tableToken = mergeToken(token, { + tableFontSize: cellFontSize, + tableBg: colorBgContainer, + tableRadius: headerBorderRadius, - const colorFillAlterSolid = new TinyColor(colorFillAlter) - .onBackground(colorBgContainer) - .toHexShortString(); + tablePaddingVertical: cellPaddingBlock, + tablePaddingHorizontal: cellPaddingInline, + tablePaddingVerticalMiddle: cellPaddingBlockMD, + tablePaddingHorizontalMiddle: cellPaddingInlineMD, + tablePaddingVerticalSmall: cellPaddingBlockSM, + tablePaddingHorizontalSmall: cellPaddingInlineSM, + tableBorderColor: borderColor, + tableHeaderTextColor: headerColor, + tableHeaderBg: headerBg, + tableFooterTextColor: footerColor, + tableFooterBg: footerBg, + tableHeaderCellSplitColor: headerSplitColor, + tableHeaderSortBg: headerSortActiveBg, + tableHeaderSortHoverBg: headerSortHoverBg, + tableHeaderIconColor: baseColorAction + .clone() + .setAlpha(baseColorAction.getAlpha() * opacityLoading) + .toRgbString(), + tableHeaderIconColorHover: baseColorActionHover + .clone() + .setAlpha(baseColorActionHover.getAlpha() * opacityLoading) + .toRgbString(), + tableBodySortBg: bodySortBg, + tableFixedHeaderSortActiveBg: fixedHeaderSortActiveBg, + tableHeaderFilterActiveBg: headerFilterHoverBg, + tableFilterDropdownBg: filterDropdownBg, + tableRowHoverBg: rowHoverBg, + tableSelectedRowBg: rowSelectedBg, + tableSelectedRowHoverBg: rowSelectedHoverBg, + zIndexTableFixed, + zIndexTableSticky: zIndexTableFixed + 1, + tableFontSizeMiddle: cellFontSizeMD, + tableFontSizeSmall: cellFontSizeSM, + tableSelectionColumnWidth: selectionColumnWidth, + tableExpandIconBg: expandIconBg, + tableExpandColumnWidth: checkboxSize + 2 * token.padding, + tableExpandedRowBg: rowExpandedBg, - const tableToken = mergeToken(token, { - tableFontSize: fontSize, - tableBg: colorBgContainer, - tableRadius: borderRadiusLG, + // Dropdown + tableFilterDropdownWidth: 120, + tableFilterDropdownHeight: 264, + tableFilterDropdownSearchWidth: 140, - tablePaddingVertical: padding, - tablePaddingHorizontal: padding, - tablePaddingVerticalMiddle: paddingSM, - tablePaddingHorizontalMiddle: paddingXS, - tablePaddingVerticalSmall: paddingXS, - tablePaddingHorizontalSmall: paddingXS, - tableBorderColor: colorBorderSecondary, - tableHeaderTextColor: colorTextHeading, - tableHeaderBg: colorFillAlterSolid, - tableFooterTextColor: colorTextHeading, - tableFooterBg: colorFillAlterSolid, - tableHeaderCellSplitColor: colorBorderSecondary, - tableHeaderSortBg: colorFillSecondarySolid, - tableHeaderSortHoverBg: colorFillContentSolid, - tableHeaderIconColor: baseColorAction - .clone() - .setAlpha(baseColorAction.getAlpha() * opacityLoading) - .toRgbString(), - tableHeaderIconColorHover: baseColorActionHover - .clone() - .setAlpha(baseColorActionHover.getAlpha() * opacityLoading) - .toRgbString(), - tableBodySortBg: colorFillAlterSolid, - tableFixedHeaderSortActiveBg: colorFillSecondarySolid, - tableHeaderFilterActiveBg: colorFillContent, - tableFilterDropdownBg: colorBgContainer, - tableRowHoverBg: colorFillAlterSolid, - tableSelectedRowBg, - tableSelectedRowHoverBg: controlItemBgActiveHover, - zIndexTableFixed, - zIndexTableSticky: zIndexTableFixed + 1, - tableFontSizeMiddle: fontSize, - tableFontSizeSmall: fontSize, - tableSelectionColumnWidth: controlHeight, - tableExpandIconBg: colorBgContainer, - tableExpandColumnWidth: checkboxSize + 2 * token.padding, - tableExpandedRowBg: colorFillAlter, + // Virtual Scroll Bar + tableScrollThumbSize: 8, // Mac scroll bar size + tableScrollThumbBg: stickyScrollBarBg, + tableScrollThumbBgHover: colorTextHeading, + tableScrollBg: colorSplit, + }); - // Dropdown - tableFilterDropdownWidth: 120, - tableFilterDropdownHeight: 264, - tableFilterDropdownSearchWidth: 140, + return [ + genTableStyle(tableToken), + genPaginationStyle(tableToken), + genSummaryStyle(tableToken), + genSorterStyle(tableToken), + genFilterStyle(tableToken), + genBorderedStyle(tableToken), + genRadiusStyle(tableToken), + genExpandStyle(tableToken), + genSummaryStyle(tableToken), + genEmptyStyle(tableToken), + genSelectionStyle(tableToken), + genFixedStyle(tableToken), + genStickyStyle(tableToken), + genEllipsisStyle(tableToken), + genSizeStyle(tableToken), + genRtlStyle(tableToken), + ]; + }, + (token) => { + const { + colorFillAlter, + colorBgContainer, + colorTextHeading, + colorFillSecondary, + colorFillContent, + controlItemBgActive, + controlItemBgActiveHover, + padding, + paddingSM, + paddingXS, + colorBorderSecondary, + borderRadiusLG, + fontSize, + controlHeight, + colorTextPlaceholder, + } = token; - // Virtual Scroll Bar - tableScrollThumbSize: 8, // Mac scroll bar size - tableScrollThumbBg: colorTextPlaceholder, - tableScrollThumbBgHover: colorTextHeading, - tableScrollBg: colorSplit, - }); + const colorFillSecondarySolid = new TinyColor(colorFillSecondary) + .onBackground(colorBgContainer) + .toHexShortString(); + const colorFillContentSolid = new TinyColor(colorFillContent) + .onBackground(colorBgContainer) + .toHexShortString(); + const colorFillAlterSolid = new TinyColor(colorFillAlter) + .onBackground(colorBgContainer) + .toHexShortString(); - return [ - genTableStyle(tableToken), - genPaginationStyle(tableToken), - genSummaryStyle(tableToken), - genSorterStyle(tableToken), - genFilterStyle(tableToken), - genBorderedStyle(tableToken), - genRadiusStyle(tableToken), - genExpandStyle(tableToken), - genSummaryStyle(tableToken), - genEmptyStyle(tableToken), - genSelectionStyle(tableToken), - genFixedStyle(tableToken), - genStickyStyle(tableToken), - genEllipsisStyle(tableToken), - genSizeStyle(tableToken), - genRtlStyle(tableToken), - ]; -}); + return { + headerBg: colorFillAlterSolid, + headerColor: colorTextHeading, + headerSortActiveBg: colorFillSecondarySolid, + headerSortHoverBg: colorFillContentSolid, + bodySortBg: colorFillAlterSolid, + rowHoverBg: colorFillAlterSolid, + rowSelectedBg: controlItemBgActive, + rowSelectedHoverBg: controlItemBgActiveHover, + rowExpandedBg: colorFillAlter, + cellPaddingBlock: padding, + cellPaddingInline: padding, + cellPaddingBlockMD: paddingSM, + cellPaddingInlineMD: paddingXS, + cellPaddingBlockSM: paddingXS, + cellPaddingInlineSM: paddingXS, + borderColor: colorBorderSecondary, + headerBorderRadius: borderRadiusLG, + footerBg: colorFillAlterSolid, + footerColor: colorTextHeading, + cellFontSize: fontSize, + cellFontSizeMD: fontSize, + cellFontSizeSM: fontSize, + headerSplitColor: colorBorderSecondary, + fixedHeaderSortActiveBg: colorFillSecondarySolid, + headerFilterHoverBg: colorFillContent, + filterDropdownMenuBg: colorBgContainer, + filterDropdownBg: colorBgContainer, + expandIconBg: colorBgContainer, + selectionColumnWidth: controlHeight, + stickyScrollBarBg: colorTextPlaceholder, + stickyScrollBarBorderRadius: 100, + }; + }, +); diff --git a/components/table/style/sticky.ts b/components/table/style/sticky.ts index f0ea859a7d7a..a0c2d347037d 100644 --- a/components/table/style/sticky.ts +++ b/components/table/style/sticky.ts @@ -11,6 +11,7 @@ const genStickyStyle: GenerateStyle = (token) => { tableScrollThumbSize, tableScrollBg, zIndexTableSticky, + stickyScrollBarBorderRadius, } = token; const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`; return { @@ -41,7 +42,7 @@ const genStickyStyle: GenerateStyle = (token) => { '&-bar': { height: tableScrollThumbSize, backgroundColor: tableScrollThumbBg, - borderRadius: 100, + borderRadius: stickyScrollBarBorderRadius, transition: `all ${token.motionDurationSlow}, transform none`, position: 'absolute', bottom: 0, diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 5260e528ab9e..a361053e455b 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -542,7 +542,46 @@ export default App; - +### Table + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@table-bg` | `colorBgContainer` | Global Token | +| `@table-header-bg` | `headerBg` | - | +| `@table-header-color` | `headerColor` | - | +| `@table-header-sort-bg` | `headerSortActiveBg` | - | +| `@table-body-sort-bg` | `bodySortActiveBg` | - | +| `@table-row-hover-bg` | `rowHoverBg` | - | +| `@table-selected-row-color` | `colorText` | Global Token | +| `@table-selected-row-bg` | `rowSelectedBg` | - | +| `@table-body-selected-sort-bg` | - | Deprecated, same as `rowSelectedBg` | +| `@table-selected-row-hover-bg` | `rowSelectedHoverBg` | - | +| `@table-expanded-row-bg` | `rowExpandedBg` | - | +| `@table-padding-vertical` | `cellPaddingBlock` | - | +| `@table-padding-horizontal` | `cellPaddingInline` | - | +| `@table-padding-vertical-md` | `cellPaddingBlockMD` | - | +| `@table-padding-horizontal-md` | `cellPaddingInlineMD` | - | +| `@table-padding-vertical-sm` | `cellPaddingBlockSM` | - | +| `@table-padding-horizontal-sm` | `cellPaddingInlineSM` | - | +| `@table-border-color` | `borderColor` | - | +| `@table-border-radius-base` | `headerBorderRadius` | - | +| `@table-footer-bg` | `footerBg` | - | +| `@table-footer-color` | `footerColor` | - | +| `@table-header-bg-sm` | - | Deprecated, same as `headerBg` | +| `@table-font-size` | `cellFontSize` | - | +| `@table-font-size-md` | `cellFontSizeMD` | - | +| `@table-font-size-sm` | `cellFontSizeSM` | - | +| `@table-header-cell-split-color` | `headerSplitColor` | - | +| `@table-header-sort-active-bg` | `headerSortHoverBg` | Misused in v4, and used as hover bg actually | +| `@table-fixed-header-sort-active-bg` | `fixedHeaderSortActiveBg` | - | +| `@table-header-filter-active-bg` | `headerFilterHoverBg` | - | +| `@table-filter-btns-bg` | - | Deprecated, same as `filterDropdownBg` | +| `@table-filter-dropdown-bg` | `filterDropdownBg` | - | +| `@table-expand-icon-bg` | `expandIconBg` | - | +| `@table-selection-column-width` | `selectionColumnWidth` | - | +| `@table-sticky-scroll-bar-bg` | `stickyScrollBarBg` | - | +| `@table-sticky-scroll-bar-radius` | `stickyScrollBarBorderRadius` | - | ### Tabs diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 92d37eeefc1d..b813da1d0cb9 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -539,7 +539,46 @@ Mentions 提及 - +### Table 表格 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@table-bg` | `colorBgContainer` | 全局 Token | +| `@table-header-bg` | `headerBg` | - | +| `@table-header-color` | `headerColor` | - | +| `@table-header-sort-bg` | `headerSortActiveBg` | - | +| `@table-body-sort-bg` | `bodySortActiveBg` | - | +| `@table-row-hover-bg` | `rowHoverBg` | - | +| `@table-selected-row-color` | `colorText` | 全局 Token | +| `@table-selected-row-bg` | `rowSelectedBg` | - | +| `@table-body-selected-sort-bg` | - | 已废弃，同 `rowSelectedBg` | +| `@table-selected-row-hover-bg` | `rowSelectedHoverBg` | - | +| `@table-expanded-row-bg` | `rowExpandedBg` | - | +| `@table-padding-vertical` | `cellPaddingBlock` | - | +| `@table-padding-horizontal` | `cellPaddingInline` | - | +| `@table-padding-vertical-md` | `cellPaddingBlockMD` | - | +| `@table-padding-horizontal-md` | `cellPaddingInlineMD` | - | +| `@table-padding-vertical-sm` | `cellPaddingBlockSM` | - | +| `@table-padding-horizontal-sm` | `cellPaddingInlineSM` | - | +| `@table-border-color` | `borderColor` | - | +| `@table-border-radius-base` | `headerBorderRadius` | - | +| `@table-footer-bg` | `footerBg` | - | +| `@table-footer-color` | `footerColor` | - | +| `@table-header-bg-sm` | - | 已废弃，同 `headerBg` | +| `@table-font-size` | `cellFontSize` | - | +| `@table-font-size-md` | `cellFontSizeMD` | - | +| `@table-font-size-sm` | `cellFontSizeSM` | - | +| `@table-header-cell-split-color` | `headerSplitColor` | - | +| `@table-header-sort-active-bg` | `headerSortHoverBg` | v4 中有误，实际上用于悬浮背景色 | +| `@table-fixed-header-sort-active-bg` | `fixedHeaderSortActiveBg` | - | +| `@table-header-filter-active-bg` | `headerFilterHoverBg` | - | +| `@table-filter-btns-bg` | - | 已废弃，同 `filterDropdownBg` | +| `@table-filter-dropdown-bg` | `filterDropdownBg` | - | +| `@table-expand-icon-bg` | `expandIconBg` | - | +| `@table-selection-column-width` | `selectionColumnWidth` | - | +| `@table-sticky-scroll-bar-bg` | `stickyScrollBarBg` | - | +| `@table-sticky-scroll-bar-radius` | `stickyScrollBarBorderRadius` | - | ### Tabs 标签页 From cfdc4463ba1aa8ee8067903a6925f77942744149 Mon Sep 17 00:00:00 2001 From: daisy <47104575+linxianxi@users.noreply.github.com> Date: Wed, 9 Aug 2023 11:52:35 +0800 Subject: [PATCH 011/318] docs(Image): fix render originalNode ts (#44125) --- components/image/index.en-US.md | 8 ++++---- components/image/index.zh-CN.md | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index 9a642febcc21..6b6405d9d526 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -64,8 +64,8 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El | maxScale | Max scale | number | 50 | 5.7.0 | | closeIcon | Custom close icon | React.ReactNode | - | 5.7.0 | | forceRender | Force render preview dialog | boolean | - | - | -| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 | -| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#transformtype) }) => React.ReactNode | - | 5.7.0 | +| toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 | +| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype) }) => React.ReactNode | - | 5.7.0 | | onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 | | onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean) => void | - | - | @@ -94,8 +94,8 @@ Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/El | closeIcon | Custom close icon | React.ReactNode | - | 5.7.0 | | forceRender | Force render preview dialog | boolean | - | - | | countRender | Custom preview count content | (current: number, total: number) => React.ReactNode | - | 4.20.0 | -| toolbarRender | Custom toolbar render | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0 | -| imageRender | Custom preview content | (originalNode: React.ReactNode, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 | +| toolbarRender | Custom toolbar render | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0 | +| imageRender | Custom preview content | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 | | onTransform | Callback when the transform of image changed | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 | | onChange | Callback when switch preview image | (current: number, prevCurrent: number) => void | - | 5.3.0 | | onVisibleChange | Callback when `visible` changed | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 | diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 4d23572afa13..694aeec35fda 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -65,8 +65,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA | maxScale | 最大放大倍数 | number | 50 | 5.7.0 | | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 | | forceRender | 强制渲染预览图 | boolean | - | - | -| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 | -| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#transformtype) }) => React.ReactNode | - | 5.7.0 | +| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit<[ToolbarRenderInfoType](#toolbarrenderinfotype), 'current' \| 'total'>) => React.ReactNode | - | 5.7.0 | +| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype) }) => React.ReactNode | - | 5.7.0 | | onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 | | onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean) => void | - | - | @@ -95,8 +95,8 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA | closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 | | forceRender | 强制渲染预览图 | boolean | - | - | | countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 | -| toolbarRender | 自定义工具栏 | (originalNode: React.ReactNode, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0 | -| imageRender | 自定义预览内容 | (originalNode: React.ReactNode, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 | +| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: [ToolbarRenderInfoType](#toolbarrenderinfotype)) => React.ReactNode | - | 5.7.0 | +| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: [TransformType](#transformtype), current: number }) => React.ReactNode | - | 5.7.0 | | onTransform | 预览图 transform 变化的回调 | { transform: [TransformType](#transformtype), action: [TransformAction](#transformaction) } | - | 5.7.0 | | onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 | | onVisibleChange | 当 `visible` 发生改变时的回调 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 | From a67f943d39859ad45e40677f614014f163e6abb7 Mon Sep 17 00:00:00 2001 From: daisy <47104575+linxianxi@users.noreply.github.com> Date: Wed, 9 Aug 2023 11:57:01 +0800 Subject: [PATCH 012/318] feat(Cascader): support autoClearSearchValue (#44033) * feat(Cascader): support autoClearSearchValue * type: add type --- components/cascader/index.en-US.md | 1 + components/cascader/index.tsx | 1 + components/cascader/index.zh-CN.md | 1 + package.json | 2 +- 4 files changed, 4 insertions(+), 1 deletion(-) diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index d96307858763..6a8b94f9d973 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -47,6 +47,7 @@ Cascade selection box. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type | +| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `multiple` is `true` | boolean | true | 5.9.0 | | autoFocus | If get focus when component mounted | boolean | false | | | bordered | Whether has border style | boolean | true | | | changeOnSelect | (Work on single select) Change value on each selection if set to true, see above demo for details | boolean | false | | diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 23f48cfd6659..67e1a3f2a178 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -130,6 +130,7 @@ export type CascaderProps = suffixIcon?: React.ReactNode; options?: DataNodeType[]; status?: InputStatus; + autoClearSearchValue?: boolean; rootClassName?: string; popupClassName?: string; diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 143afa33ae24..af236e4b3e6f 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -48,6 +48,7 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 | +| autoClearSearchValue | 是否在选中项后清空搜索框，只在 `multiple` 为 `true` 时有效 | boolean | true | 5.9.0 | | autoFocus | 自动获取焦点 | boolean | false | | | bordered | 是否有边框 | boolean | true | | | changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | | diff --git a/package.json b/package.json index b2c3f3883af8..266b66c9908a 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "copy-to-clipboard": "^3.2.0", "dayjs": "^1.11.1", "qrcode.react": "^3.1.0", - "rc-cascader": "~3.14.0", + "rc-cascader": "~3.15.0", "rc-checkbox": "~3.1.0", "rc-collapse": "~3.7.0", "rc-dialog": "~9.2.0", From 1a86204053665c56e700eecedde4286366c72144 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: Wed, 9 Aug 2023 16:35:19 +0800 Subject: [PATCH 013/318] feat: Form validateFields support recursive (#44130) --- components/form/index.en-US.md | 2 +- components/form/index.zh-CN.md | 2 +- package.json | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 353cb54a7477..65af8a8ca1ef 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -297,7 +297,7 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au | setFieldValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | | setFieldsValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void | | | submit | Submit the form. It's same as click `submit` button | () => void | | -| validateFields | Validate fields | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 | +| validateFields | Validate fields. Use `recursive` to validate all the field in the path | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0, `recursive`: 5.9.0 | #### validateFields return sample diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index c78305d6e938..c463a93906c9 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -296,7 +296,7 @@ Form.List 渲染表单相关操作函数。 | setFieldValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | | setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void | | | submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void | | -| validateFields | 触发表单验证 | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 | +| validateFields | 触发表单验证，设置 `recursive` 时会递归校验所有包含的路径 | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean, recursive?: boolean }) => Promise | `validateOnly`: 5.5.0, `recursive`: 5.9.0 | #### validateFields 返回示例 diff --git a/package.json b/package.json index 266b66c9908a..5dab0e9623de 100644 --- a/package.json +++ b/package.json @@ -129,7 +129,7 @@ "rc-dialog": "~9.2.0", "rc-drawer": "~6.4.1", "rc-dropdown": "~4.1.0", - "rc-field-form": "~1.36.0", + "rc-field-form": "~1.37.0", "rc-image": "~7.2.0", "rc-input": "~1.1.0", "rc-input-number": "~8.0.2", From 1c1ebbe36d992494ec3ef37bb0c112833af35003 Mon Sep 17 00:00:00 2001 From: hms181231 Date: Fri, 11 Aug 2023 13:43:44 +0800 Subject: [PATCH 014/318] feat: Divider Component Token (#42627) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: Divider Component Token * feat: 更改token命名规范 * feat: 增加token demo * test: Update Test Snapshots * feat: token * chore: update * fix: lint * chore: lint * chore: update snapshot --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 77 +++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 75 ++++++++++++++++++ components/divider/demo/component-token.md | 7 ++ components/divider/demo/component-token.tsx | 58 ++++++++++++++ components/divider/index.en-US.md | 1 + components/divider/index.zh-CN.md | 1 + components/divider/style/index.ts | 53 +++++++++---- docs/react/migrate-less-variables.en-US.md | 11 ++- docs/react/migrate-less-variables.zh-CN.md | 10 ++- 9 files changed, 278 insertions(+), 15 deletions(-) create mode 100644 components/divider/demo/component-token.md create mode 100644 components/divider/demo/component-token.tsx diff --git a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap index e232e1f78198..e20e15157cfb 100644 --- a/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/divider/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1,5 +1,82 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[`renders components/divider/demo/component-token.tsx extend context correctly 1`] = ` +Array [ +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, +] +`; + +exports[`renders components/divider/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/divider/demo/customize-style.tsx extend context correctly 1`] = ` Array [
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, + , +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo. +

, +] +`; + exports[`renders components/divider/demo/customize-style.tsx correctly 1`] = ` Array [
( + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ Text +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ Left Text +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ Right Text +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ + Left Text with 0 orientationMargin + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ + Right Text with 50px orientationMargin + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista + probare, quae sunt a te dicta? Refert tamen, quo modo. +

+ +); + +export default App; diff --git a/components/divider/index.en-US.md b/components/divider/index.en-US.md index a42f90e9a3d7..76b0a34f712f 100644 --- a/components/divider/index.en-US.md +++ b/components/divider/index.en-US.md @@ -25,6 +25,7 @@ A divider line separates different content. Text without heading style Vertical Style Customization +Component Token ## API diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index c5005e407992..b4d96b0f627e 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -26,6 +26,7 @@ group: 分割文字使用正文样式 垂直分割线 样式自定义 +组件 Token ## API diff --git a/components/divider/style/index.ts b/components/divider/style/index.ts index adb3c8725544..11ad427643e0 100644 --- a/components/divider/style/index.ts +++ b/components/divider/style/index.ts @@ -1,22 +1,45 @@ import type { CSSObject } from '@ant-design/cssinjs'; +import type { CSSProperties } from 'react'; import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { - sizePaddingEdgeHorizontal: number; + /** + * @desc 文本横向内间距 + * @descEN Horizontal padding of text + */ + textPaddingInline: CSSProperties['paddingInline']; + /** + * @desc 文本与边缘距离，取值 0 ～ 1 + * @descEN Distance between text and edge, which should be a number between 0 and 1. + */ + orientationMargin: number; + /** + * @desc 纵向分割线的横向外间距 + * @descEN Horizontal margin of vertical Divider + */ + verticalMarginInline: CSSProperties['marginInline']; } interface DividerToken extends FullToken<'Divider'> { - dividerVerticalGutterMargin: number; + sizePaddingEdgeHorizontal: number; dividerHorizontalWithTextGutterMargin: number; dividerHorizontalGutterMargin: number; } // ============================== Shared ============================== const genSharedDividerStyle: GenerateStyle = (token): CSSObject => { - const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token; + const { + componentCls, + sizePaddingEdgeHorizontal, + colorSplit, + lineWidth, + textPaddingInline, + orientationMargin, + verticalMarginInline, + } = token; return { [componentCls]: { @@ -29,7 +52,8 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => top: '-0.06em', display: 'inline-block', height: '0.9em', - margin: `0 ${token.dividerVerticalGutterMargin}px`, + marginInline: verticalMarginInline, + marginBlock: 0, verticalAlign: 'middle', borderTop: 0, borderInlineStart: `${lineWidth}px solid ${colorSplit}`, @@ -68,27 +92,28 @@ const genSharedDividerStyle: GenerateStyle = (token): CSSObject => [`&-horizontal${componentCls}-with-text-left`]: { '&::before': { - width: '5%', + width: `${orientationMargin * 100}%`, }, '&::after': { - width: '95%', + width: `${100 - orientationMargin * 100}%`, }, }, [`&-horizontal${componentCls}-with-text-right`]: { '&::before': { - width: '95%', + width: `${100 - orientationMargin * 100}%`, }, '&::after': { - width: '5%', + width: `${orientationMargin * 100}%`, }, }, [`${componentCls}-inner-text`]: { display: 'inline-block', - padding: '0 1em', + paddingBlock: 0, + paddingInline: textPaddingInline, }, '&-dashed': { @@ -155,13 +180,15 @@ export default genComponentStyleHook( 'Divider', (token) => { const dividerToken = mergeToken(token, { - dividerVerticalGutterMargin: token.marginXS, dividerHorizontalWithTextGutterMargin: token.margin, dividerHorizontalGutterMargin: token.marginLG, + sizePaddingEdgeHorizontal: 0, }); return [genSharedDividerStyle(dividerToken)]; }, - { - sizePaddingEdgeHorizontal: 0, - }, + (token) => ({ + textPaddingInline: '1em', + orientationMargin: 0.05, + verticalMarginInline: token.marginXS, + }), ); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index a361053e455b..26b9d0776f41 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -220,7 +220,16 @@ export default App; | `@descriptions-item-label-colon-margin-left` | `colonMarginLeft` | - | | `@descriptions-extra-color` | `extraColor` | - | - +### Divider + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| --- | --- | --- | +| `@divider-text-padding` | `textPaddingInline` | - | +| `@divider-orientation-margin` | `orientationMargin` | - | +| `@divider-color` | `colorSplit` | Global Token | +| `@divider-vertical-gutter` | `verticalMarginInline` | - | ### Drawer diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index b813da1d0cb9..05b06b30e4d5 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -218,7 +218,15 @@ export default App; | `@descriptions-item-label-colon-margin-left` | `colonMarginLeft` | - | | `@descriptions-extra-color` | `extraColor` | - | - +### Divider 分割线 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@divider-text-padding` | `textPaddingInline` | - | +| `@divider-orientation-margin` | `orientationMargin` | - | +| `@divider-color` | `colorSplit` | 全局 Token | +| `@divider-vertical-gutter` | `verticalMarginInline` | - | ### Drawer 抽屉 From a5203ebb80cad5f1aec6718c2f18f9005487dc20 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Fri, 11 Aug 2023 19:37:44 +0800 Subject: [PATCH 015/318] feat: layout token (#44174) * feat: layout token * feat: layout component token --- .../__snapshots__/demo-extend.test.ts.snap | 959 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 273 +++++ components/layout/demo/component-token.md | 7 + components/layout/demo/component-token.tsx | 86 ++ components/layout/index.en-US.md | 1 + components/layout/index.zh-CN.md | 1 + components/layout/style/index.ts | 218 ++-- components/layout/style/light.ts | 14 +- docs/react/migrate-less-variables.en-US.md | 22 +- docs/react/migrate-less-variables.zh-CN.md | 22 +- 10 files changed, 1535 insertions(+), 68 deletions(-) create mode 100644 components/layout/demo/component-token.md create mode 100644 components/layout/demo/component-token.tsx diff --git a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap index eeef2ff6f6f0..a15962b36264 100644 --- a/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/layout/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -159,6 +159,965 @@ exports[`renders components/layout/demo/basic.tsx extend context correctly 1`] = exports[`renders components/layout/demo/basic.tsx extend context correctly 2`] = `[]`; +exports[`renders components/layout/demo/component-token.tsx extend context correctly 1`] = ` +
+
+
+
+ +
+ +
+ Content +
+
+
+
+`; + +exports[`renders components/layout/demo/component-token.tsx extend context correctly 2`] = ` +[ + "Warning: [antd: Breadcrumb] \`Breadcrumb.Item and Breadcrumb.Separator\` is deprecated. Please use \`items\` instead.", +] +`; + exports[`renders components/layout/demo/custom-trigger.tsx extend context correctly 1`] = `
`; +exports[`renders components/layout/demo/component-token.tsx correctly 1`] = ` +
+
+
+
+ +
+ +
+ Content +
+
+
+
+`; + exports[`renders components/layout/demo/custom-trigger.tsx correctly 1`] = `
{ + const key = String(index + 1); + + return { + key: `sub${key}`, + icon: React.createElement(icon), + label: `subnav ${key}`, + + children: new Array(4).fill(null).map((_, j) => { + const subKey = index * 4 + j + 1; + return { + key: subKey, + label: `option${subKey}`, + }; + }), + }; + }, +); + +const App: React.FC = () => { + const { + token: { colorBgContainer }, + } = theme.useToken(); + + return ( + + +
+
+
Ant Design
+
+ + + + + + + Home + List + App + + + Content + + + + + + ); +}; + +export default App; diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md index ea141269a296..3c15fe6cdbe6 100644 --- a/components/layout/index.en-US.md +++ b/components/layout/index.en-US.md @@ -69,6 +69,7 @@ Style of a navigation should conform to its level. Fixed Header Fixed Sider Custom trigger debug +Component Token ## API diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md index 7d7527bd6be0..3e4c8064f91c 100644 --- a/components/layout/index.zh-CN.md +++ b/components/layout/index.zh-CN.md @@ -70,6 +70,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA 固定头部 固定侧边栏 自定义触发器 Debug +组件 Token ## API diff --git a/components/layout/style/index.ts b/components/layout/style/index.ts index 8aee8327038c..7905a4be3d04 100644 --- a/components/layout/style/index.ts +++ b/components/layout/style/index.ts @@ -1,43 +1,123 @@ import type { CSSObject } from '@ant-design/cssinjs'; +import type { CSSProperties } from 'react'; import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import { genComponentStyleHook } from '../../theme/internal'; import genLayoutLightStyle from './light'; export interface ComponentToken { + /** @deprecated Use headerBg instead */ colorBgHeader: string; + /** @deprecated Use bodyBg instead */ colorBgBody: string; + /** @deprecated Use triggerBg instead */ colorBgTrigger: string; -} -export interface LayoutToken extends FullToken<'Layout'> { - // Layout - layoutHeaderHeight: number; - layoutHeaderPaddingInline: number; - layoutHeaderColor: string; - layoutFooterPadding: string; - layoutTriggerHeight: number; - layoutZeroTriggerSize: number; + /** + * @desc 主体部分背景色 + * @descEN Background Color of body + */ + bodyBg: string; + /** + * @desc 顶部背景色 + * @descEN Background Color of header + */ + headerBg: string; + /** + * @desc 顶部高度 + * @descEN Height of header + */ + headerHeight: number; + /** + * @desc 顶部内边距 + * @descEN Padding of header + */ + headerPadding: CSSProperties['padding']; + /** + * @desc 顶部文字颜色 + * @descEN Text color of header + */ + headerColor: string; + /** + * @desc 页脚内边距 + * @descEN Padding of footer + */ + footerPadding: CSSProperties['padding']; + /** + * @desc 页脚背景色 + * @descEN Background Color of footer + */ + footerBg: string; + /** + * @desc 侧边栏背景色 + * @descEN Background Color of sider + */ + siderBg: string; + /** + * @desc 侧边栏开关高度 + * @descEN Height of sider trigger + */ + triggerHeight: number; + /** + * @desc 侧边栏开关背景色 + * @descEN Background Color of sider trigger + */ + triggerBg: string; + /** + * @desc 侧边栏开关颜色 + * @descEN Color of sider trigger + */ + triggerColor: string; + /** + * @desc collapse 为 0 时侧边栏开关宽度 + * @descEN Width of sider trigger when collapse is 0 + */ + zeroTriggerWidth: number; + /** + * @desc collapse 为 0 时侧边栏开关高度 + * @descEN Height of sider trigger when collapse is 0 + */ + zeroTriggerHeight: number; + /** + * @desc 亮色主题侧边栏背景色 + * @descEN Background Color of light theme sider + */ + lightSiderBg: string; + /** + * @desc 亮色主题侧边栏开关背景色 + * @descEN Background Color of light theme sider trigger + */ + lightTriggerBg: string; + /** + * @desc 亮色主题侧边栏开关颜色 + * @descEN Color of light theme sider trigger + */ + lightTriggerColor: string; } +export interface LayoutToken extends FullToken<'Layout'> {} + const genLayoutStyle: GenerateStyle = (token) => { const { antCls, // .ant componentCls, // .ant-layout colorText, - colorTextLightSolid, - colorBgHeader, - colorBgBody, - colorBgTrigger, - layoutHeaderHeight, - layoutHeaderPaddingInline, - layoutHeaderColor, - layoutFooterPadding, - layoutTriggerHeight, - layoutZeroTriggerSize, + triggerColor, + footerBg, + triggerBg, + headerHeight, + headerPadding, + headerColor, + footerPadding, + triggerHeight, + zeroTriggerHeight, + zeroTriggerWidth, motionDurationMid, motionDurationSlow, fontSize, borderRadius, + bodyBg, + headerBg, + siderBg, } = token; return { @@ -48,7 +128,7 @@ const genLayoutStyle: GenerateStyle = (token) => { /* fix firefox can't set height smaller than content on flex item */ minHeight: 0, - background: colorBgBody, + background: bodyBg, '&, *': { boxSizing: 'border-box', @@ -71,7 +151,7 @@ const genLayoutStyle: GenerateStyle = (token) => { // fix firefox can't set width smaller than content on flex item minWidth: 0, - background: colorBgHeader, + background: siderBg, transition: `all ${motionDurationMid}, background 0s`, '&-children': { @@ -88,7 +168,7 @@ const genLayoutStyle: GenerateStyle = (token) => { }, '&-has-trigger': { - paddingBottom: layoutTriggerHeight, + paddingBottom: triggerHeight, }, '&-right': { @@ -99,11 +179,11 @@ const genLayoutStyle: GenerateStyle = (token) => { position: 'fixed', bottom: 0, zIndex: 1, - height: layoutTriggerHeight, - color: colorTextLightSolid, - lineHeight: `${layoutTriggerHeight}px`, + height: triggerHeight, + color: triggerColor, + lineHeight: `${triggerHeight}px`, textAlign: 'center', - background: colorBgTrigger, + background: triggerBg, cursor: 'pointer', transition: `all ${motionDurationMid}`, }, @@ -115,17 +195,17 @@ const genLayoutStyle: GenerateStyle = (token) => { '&-trigger': { position: 'absolute', - top: layoutHeaderHeight, - insetInlineEnd: -layoutZeroTriggerSize, + top: headerHeight, + insetInlineEnd: -zeroTriggerWidth, zIndex: 1, - width: layoutZeroTriggerSize, - height: layoutZeroTriggerSize, - color: colorTextLightSolid, + width: zeroTriggerWidth, + height: zeroTriggerHeight, + color: triggerColor, fontSize: token.fontSizeXL, display: 'flex', alignItems: 'center', justifyContent: 'center', - background: colorBgHeader, + background: siderBg, borderStartStartRadius: 0, borderStartEndRadius: borderRadius, borderEndEndRadius: borderRadius, @@ -143,12 +223,11 @@ const genLayoutStyle: GenerateStyle = (token) => { }, '&:hover::after': { - // FIXME: Hardcode, but seems no need to create a token for this background: `rgba(255, 255, 255, 0.2)`, }, '&-right': { - insetInlineStart: -layoutZeroTriggerSize, + insetInlineStart: -zeroTriggerWidth, borderStartStartRadius: borderRadius, borderStartEndRadius: 0, borderEndEndRadius: 0, @@ -167,11 +246,11 @@ const genLayoutStyle: GenerateStyle = (token) => { // ==================== Header ==================== [`${componentCls}-header`]: { - height: layoutHeaderHeight, - paddingInline: layoutHeaderPaddingInline, - color: layoutHeaderColor, - lineHeight: `${layoutHeaderHeight}px`, - background: colorBgHeader, + height: headerHeight, + padding: headerPadding, + color: headerColor, + lineHeight: `${headerHeight}px`, + background: headerBg, // Other components/menu/style/index.less line:686 // Integration with header element so menu items have the same height @@ -182,10 +261,10 @@ const genLayoutStyle: GenerateStyle = (token) => { // ==================== Footer ==================== [`${componentCls}-footer`]: { - padding: layoutFooterPadding, + padding: footerPadding, color: colorText, fontSize, - background: colorBgBody, + background: footerBg, }, // =================== Content ==================== @@ -201,29 +280,50 @@ const genLayoutStyle: GenerateStyle = (token) => { // ============================== Export ============================== export default genComponentStyleHook( 'Layout', + (token) => [genLayoutStyle(token)], (token) => { - const { colorText, controlHeightSM, controlHeight, controlHeightLG, marginXXS } = token; - const layoutHeaderPaddingInline = controlHeightLG * 1.25; - - const layoutToken = mergeToken(token, { - // Layout - layoutHeaderHeight: controlHeight * 2, - layoutHeaderPaddingInline, - layoutHeaderColor: colorText, - layoutFooterPadding: `${controlHeightSM}px ${layoutHeaderPaddingInline}px`, - layoutTriggerHeight: controlHeightLG + marginXXS * 2, // = item height + margin - layoutZeroTriggerSize: controlHeightLG, - }); - - return [genLayoutStyle(layoutToken)]; - }, - (token) => { - const { colorBgLayout } = token; + const { + colorBgLayout, + controlHeight, + controlHeightLG, + colorText, + controlHeightSM, + marginXXS, + colorTextLightSolid, + colorBgContainer, + } = token; + + const paddingInline = controlHeightLG * 1.25; return { + // Deprecated colorBgHeader: '#001529', colorBgBody: colorBgLayout, colorBgTrigger: '#002140', + + bodyBg: colorBgLayout, + headerBg: '#001529', + headerHeight: controlHeight * 2, + headerPadding: `0 ${paddingInline}px`, + headerColor: colorText, + footerPadding: `${controlHeightSM}px ${paddingInline}px`, + footerBg: colorBgLayout, + siderBg: '#001529', + triggerHeight: controlHeightLG + marginXXS * 2, + triggerBg: '#002140', + triggerColor: colorTextLightSolid, + zeroTriggerWidth: controlHeightLG, + zeroTriggerHeight: controlHeightLG, + lightSiderBg: colorBgContainer, + lightTriggerBg: colorBgContainer, + lightTriggerColor: colorText, }; }, + { + deprecatedTokens: [ + ['colorBgBody', 'bodyBg'], + ['colorBgHeader', 'headerBg'], + ['colorBgTrigger', 'triggerBg'], + ], + }, ); diff --git a/components/layout/style/light.ts b/components/layout/style/light.ts index 8213f1e3f452..da2aa7435fd2 100644 --- a/components/layout/style/light.ts +++ b/components/layout/style/light.ts @@ -3,21 +3,21 @@ import type { LayoutToken } from '.'; import type { GenerateStyle } from '../../theme/internal'; const genLayoutLightStyle: GenerateStyle = (token) => { - const { componentCls, colorBgContainer, colorBgBody, colorText } = token; + const { componentCls, bodyBg, lightSiderBg, lightTriggerBg, lightTriggerColor } = token; return { [`${componentCls}-sider-light`]: { - background: colorBgContainer, + background: lightSiderBg, [`${componentCls}-sider-trigger`]: { - color: colorText, - background: colorBgContainer, + color: lightTriggerColor, + background: lightTriggerBg, }, [`${componentCls}-sider-zero-width-trigger`]: { - color: colorText, - background: colorBgContainer, - border: `1px solid ${colorBgBody}`, // Safe to modify to any other color + color: lightTriggerColor, + background: lightTriggerBg, + border: `1px solid ${bodyBg}`, // Safe to modify to any other color borderInlineStart: 0, }, }, diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 26b9d0776f41..f64cce6e1da4 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -276,7 +276,27 @@ export default App; - +### Layout + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@layout-body-background` | `bodyBg` | - | +| `@layout-header-background` | `headerBg` | - | +| `@layout-header-height` | `headerHeight` | - | +| `@layout-header-padding` | `headerPadding` | - | +| `@layout-header-color` | `headerColor` | - | +| `@layout-footer-padding` | `footerPadding` | - | +| `@layout-footer-background` | `footerBg` | - | +| `@layout-sider-background` | `siderBg` | - | +| `@layout-trigger-height` | `triggerHeight` | - | +| `@layout-trigger-background` | `triggerBg` | - | +| `@layout-trigger-color` | `triggerColor` | - | +| `@layout-zero-trigger-width` | `zeroTriggerWidth` | - | +| `@layout-zero-trigger-height` | `zeroTriggerHeight` | - | +| `@layout-sider-background-light` | `lightSiderBg` | - | +| `@layout-trigger-background-light` | `lightTriggerBg` | - | +| `@layout-trigger-color-light` | `lightTriggerColor` | - | ### List diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 05b06b30e4d5..b221488d7e0e 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -273,7 +273,27 @@ export default App; - +### Layout 布局 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@layout-body-background` | `bodyBg` | - | +| `@layout-header-background` | `headerBg` | - | +| `@layout-header-height` | `headerHeight` | - | +| `@layout-header-padding` | `headerPadding` | - | +| `@layout-header-color` | `headerColor` | - | +| `@layout-footer-padding` | `footerPadding` | - | +| `@layout-footer-background` | `footerBg` | - | +| `@layout-sider-background` | `siderBg` | - | +| `@layout-trigger-height` | `triggerHeight` | - | +| `@layout-trigger-background` | `triggerBg` | - | +| `@layout-trigger-color` | `triggerColor` | - | +| `@layout-zero-trigger-width` | `zeroTriggerWidth` | - | +| `@layout-zero-trigger-height` | `zeroTriggerHeight` | - | +| `@layout-sider-background-light` | `lightSiderBg` | - | +| `@layout-trigger-background-light` | `lightTriggerBg` | - | +| `@layout-trigger-color-light` | `lightTriggerColor` | - | ### List 列表 From 5ddec3ab8296d574caf3c9646d0c9b7d1d45f770 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: Sat, 12 Aug 2023 00:36:34 +0800 Subject: [PATCH 016/318] chore: CI of PR welcome (#44184) --- .github/workflows/pr-contributor-welcome.yml | 28 ++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 .github/workflows/pr-contributor-welcome.yml diff --git a/.github/workflows/pr-contributor-welcome.yml b/.github/workflows/pr-contributor-welcome.yml new file mode 100644 index 000000000000..302e9c71535b --- /dev/null +++ b/.github/workflows/pr-contributor-welcome.yml @@ -0,0 +1,28 @@ +# 当 PR 被合并时，留言欢迎加入共建群 +name: PullRequest Contributor Welcome + +on: + pull_request_target: + types: + - closed + paths: + - 'components/**' + +jobs: + check-merged: + runs-on: ubuntu-latest + needs: read-file + if: github.event.pull_request.merged == true + steps: + - uses: actions-cool/maintain-one-comment@v3 + with: + token: ${{ secrets.GITHUB_TOKEN }} + body: | + 🎉 Thanks for contribution. Please feel free to join DingTalk Social Community (Provide the PR link please). + + 🎉 感谢参与贡献，欢迎扫码加入钉钉社区（进群后请提供 PR 地址）。 + + + + + body-include: '' \ No newline at end of file From 56f2bc5072f558b042c309686f4540f1e89f3ec1 Mon Sep 17 00:00:00 2001 From: Electrolux <59329360+yilaikesi@users.noreply.github.com> Date: Mon, 14 Aug 2023 12:08:25 +0800 Subject: [PATCH 017/318] fix: (tabs)Unexpected color change in the click area of the mobile tabs component (#44200) --- components/tabs/style/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index c010b20f457c..43c2f34ddaee 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -663,6 +663,8 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { return { [tabCls]: { position: 'relative', + WebkitTouchCallout: 'none', + WebkitTapHighlightColor: 'transparent', display: 'inline-flex', alignItems: 'center', padding: horizontalItemPadding, From 72b449a1a4feb80c16b7c7b6371b83fdc0b914d4 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: Mon, 14 Aug 2023 13:32:57 +0800 Subject: [PATCH 018/318] docs: update faq (#44198) * docs: update faq * chore: update lint * chore: update lint * chore: use returnType --- .dumi/theme/builtins/IconSearch/Category.tsx | 2 +- .dumi/theme/layouts/DocLayout/index.tsx | 2 +- .dumi/theme/slots/Header/index.tsx | 2 +- components/_util/ActionButton.tsx | 2 +- components/affix/index.tsx | 2 +- components/button/button.tsx | 2 +- components/form/index.en-US.md | 4 ++-- components/form/index.zh-CN.md | 4 ++-- components/input/hooks/useRemovePasswordTimeout.ts | 2 +- components/modal/confirm.tsx | 2 +- components/statistic/Countdown.tsx | 2 +- components/typography/Base/index.tsx | 2 +- 12 files changed, 14 insertions(+), 14 deletions(-) diff --git a/.dumi/theme/builtins/IconSearch/Category.tsx b/.dumi/theme/builtins/IconSearch/Category.tsx index 83b70a309eea..1cbbdf4c57c6 100644 --- a/.dumi/theme/builtins/IconSearch/Category.tsx +++ b/.dumi/theme/builtins/IconSearch/Category.tsx @@ -16,7 +16,7 @@ const Category: React.FC = (props) => { const { icons, title, newIcons, theme } = props; const intl = useIntl(); const [justCopied, setJustCopied] = React.useState(null); - const copyId = React.useRef(null); + const copyId = React.useRef | null>(null); const onCopied = React.useCallback((type: string, text: string) => { message.success( diff --git a/.dumi/theme/layouts/DocLayout/index.tsx b/.dumi/theme/layouts/DocLayout/index.tsx index f5af2a0a7876..4e910e6edc9b 100644 --- a/.dumi/theme/layouts/DocLayout/index.tsx +++ b/.dumi/theme/layouts/DocLayout/index.tsx @@ -32,7 +32,7 @@ const DocLayout: React.FC = () => { const location = useLocation(); const { pathname, search, hash } = location; const [locale, lang] = useLocale(locales); - const timerRef = useRef(null); + const timerRef = useRef | null>(null); const { direction } = useContext(SiteContext); const { loading } = useSiteData(); diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index ae41778b685d..fecc9c97568f 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -139,7 +139,7 @@ const Header: React.FC = () => { searching: false, }); const { direction, isMobile, updateSiteConfig } = useContext(SiteContext); - const pingTimer = useRef(null); + const pingTimer = useRef | null>(null); const location = useLocation(); const { pathname, search } = location; diff --git a/components/_util/ActionButton.tsx b/components/_util/ActionButton.tsx index aed3cd743997..18552030c216 100644 --- a/components/_util/ActionButton.tsx +++ b/components/_util/ActionButton.tsx @@ -48,7 +48,7 @@ const ActionButton: React.FC = (props) => { }; React.useEffect(() => { - let timeoutId: NodeJS.Timer | null = null; + let timeoutId: ReturnType | null = null; if (autoFocus) { timeoutId = setTimeout(() => { buttonRef.current?.focus(); diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 9f60cdf6661b..3f4fb4b17651 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -71,7 +71,7 @@ class InternalAffix extends React.Component { private fixedNodeRef = createRef(); - private timer: NodeJS.Timeout | null; + private timer: ReturnType | null; context: ConfigConsumerProps; diff --git a/components/button/button.tsx b/components/button/button.tsx index 8fbc7f8807fe..64bdc20e413d 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -145,7 +145,7 @@ const InternalButton: React.ForwardRefRenderFunction< const needInserted = Children.count(children) === 1 && !icon && !isUnBorderedButtonType(type); useEffect(() => { - let delayTimer: NodeJS.Timer | null = null; + let delayTimer: ReturnType | null = null; if (loadingOrDelay.delay > 0) { delayTimer = setTimeout(() => { delayTimer = null; diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 4363236da885..2b52c06c7dc0 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -296,8 +296,8 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au | resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#namepath)\[]) => void | | | scrollToField | Scroll to field position | (name: [NamePath](#namepath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | | | setFields | Set fields status | (fields: [FieldData](#fielddata)\[]) => void | | -| setFieldValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | -| setFieldsValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void | | +| setFieldValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | +| setFieldsValue | Set fields value(Will directly pass to form store and **reset validation message**. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void | | | submit | Submit the form. It's same as click `submit` button | () => void | | | validateFields | Validate fields | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 98ae05170e46..f1c735c07897 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -295,8 +295,8 @@ Form.List 渲染表单相关操作函数。 | resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#namepath)\[]) => void | | | scrollToField | 滚动到对应字段位置 | (name: [NamePath](#namepath), options: [ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)) => void | | | setFields | 设置一组字段状态 | (fields: [FieldData](#fielddata)\[]) => void | | -| setFieldValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | -| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void | | +| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 | +| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且**重置错误信息**。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void | | | submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void | | | validateFields | 触发表单验证 | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 | diff --git a/components/input/hooks/useRemovePasswordTimeout.ts b/components/input/hooks/useRemovePasswordTimeout.ts index b67d7ae9ce3c..94bf78a8279f 100644 --- a/components/input/hooks/useRemovePasswordTimeout.ts +++ b/components/input/hooks/useRemovePasswordTimeout.ts @@ -5,7 +5,7 @@ export default function useRemovePasswordTimeout( inputRef: React.RefObject, triggerOnMount?: boolean, ) { - const removePasswordTimeoutRef = useRef([]); + const removePasswordTimeoutRef = useRef[]>([]); const removePasswordTimeout = () => { removePasswordTimeoutRef.current.push( setTimeout(() => { diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx index 5dc126aaae91..26a6883d0e94 100644 --- a/components/modal/confirm.tsx +++ b/components/modal/confirm.tsx @@ -31,7 +31,7 @@ export default function confirm(config: ModalFuncProps) { const container = document.createDocumentFragment(); // eslint-disable-next-line @typescript-eslint/no-use-before-define let currentConfig = { ...config, close, open: true } as any; - let timeoutId: NodeJS.Timeout; + let timeoutId: ReturnType; function destroy(...args: any[]) { const triggerCancel = args.some((param) => param && param.triggerCancel); diff --git a/components/statistic/Countdown.tsx b/components/statistic/Countdown.tsx index 4fcd5c95eeba..6fbdf5de1bc6 100644 --- a/components/statistic/Countdown.tsx +++ b/components/statistic/Countdown.tsx @@ -24,7 +24,7 @@ const Countdown: React.FC = (props) => { const forceUpdate = useForceUpdate(); - const countdown = React.useRef(null); + const countdown = React.useRef | null>(null); const stopTimer = () => { onFinish?.(); diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx index 56cef15b4775..7baefd7711de 100644 --- a/components/typography/Base/index.tsx +++ b/components/typography/Base/index.tsx @@ -193,7 +193,7 @@ const Base = React.forwardRef((props, ref) => { // ========================== Copyable ========================== const [enableCopy, copyConfig] = useMergedConfig(copyable); const [copied, setCopied] = React.useState(false); - const copyIdRef = React.useRef(null); + const copyIdRef = React.useRef | null>(null); const copyOptions: Pick = {}; if (copyConfig.format) { From 6de03aef3755e5fd6faaa65d91aa3be314355d53 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 14 Aug 2023 15:00:30 +0800 Subject: [PATCH 019/318] feat: Tabs support token (#44201) --- components/tabs/demo/component-token.tsx | 1 + components/tabs/style/index.ts | 8 ++++++++ 2 files changed, 9 insertions(+) diff --git a/components/tabs/demo/component-token.tsx b/components/tabs/demo/component-token.tsx index 576c777e316f..b3b2e9fb60e6 100644 --- a/components/tabs/demo/component-token.tsx +++ b/components/tabs/demo/component-token.tsx @@ -22,6 +22,7 @@ const App: React.FC = () => ( horizontalItemPaddingLG: `20px`, verticalItemPadding: `8px`, verticalItemMargin: `4px 0 0 0`, + itemColor: 'rgba(0,0,0,0.85)', itemSelectedColor: '#389e0d', itemHoverColor: '#d9f7be', itemActiveColor: '#b7eb8f', diff --git a/components/tabs/style/index.ts b/components/tabs/style/index.ts index 43c2f34ddaee..bcfd002fd0ec 100644 --- a/components/tabs/style/index.ts +++ b/components/tabs/style/index.ts @@ -100,6 +100,11 @@ export interface ComponentToken { * @descEN Vertical margin of vertical tab item */ verticalItemMargin: string; + /** + * @desc 标签文本颜色 + * @descEN Text color of tab + */ + itemColor: string; /** * @desc 标签激活态文本颜色 * @descEN Text color of active tab @@ -656,6 +661,7 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { tabsHorizontalItemMargin, horizontalItemPadding, itemSelectedColor, + itemColor, } = token; const tabCls = `${componentCls}-tab`; @@ -673,6 +679,7 @@ const genTabStyle: GenerateStyle = (token: TabsToken) => { border: 0, outline: 'none', cursor: 'pointer', + color: itemColor, '&-btn, &-remove': { '&:focus:not(:focus-visible), &:active': { color: itemActiveColor, @@ -1052,6 +1059,7 @@ export default genComponentStyleHook( horizontalItemPaddingLG: `${token.padding}px 0`, verticalItemPadding: `${token.paddingXS}px ${token.paddingLG}px`, verticalItemMargin: `${token.margin}px 0 0 0`, + itemColor: token.colorText, itemSelectedColor: token.colorPrimary, itemHoverColor: token.colorPrimaryHover, itemActiveColor: token.colorPrimaryActive, From db07a2fe0ace159d2f60e17e58ba126c80ecaa6c Mon Sep 17 00:00:00 2001 From: hms181231 Date: Mon, 14 Aug 2023 15:24:01 +0800 Subject: [PATCH 020/318] feat: Progress Component Token (#42757) * feat: Progress Component Token * feat: add defaultColor&circleTextColor update infoTextColor -> textColor * chore: update * chore: add comment * chore: update snapshot * chore: fix lint * chore: rm ignore file --------- Signed-off-by: MadCcc <1075746765@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 631 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 581 ++++++++++++++++ components/progress/demo/component-token.md | 7 + components/progress/demo/component-token.tsx | 52 ++ components/progress/style/index.tsx | 100 ++- docs/react/migrate-less-variables.en-US.md | 14 +- docs/react/migrate-less-variables.zh-CN.md | 14 +- 7 files changed, 1362 insertions(+), 37 deletions(-) create mode 100644 components/progress/demo/component-token.md create mode 100644 components/progress/demo/component-token.tsx diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap index 51a62b88a3da..0dfc62e074d5 100644 --- a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -643,6 +643,637 @@ exports[`renders components/progress/demo/circle-mini.tsx extend context correct exports[`renders components/progress/demo/circle-mini.tsx extend context correctly 2`] = `[]`; +exports[`renders components/progress/demo/component-token.tsx extend context correctly 1`] = ` +Array [ +
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
, +
, +
, +
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + +
+
+
+ +
+
+
+
+
+
, +
, +
, +
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + +
+
+
+ +
+
+
+
+
+
, +
, +
, +
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
, +] +`; + +exports[`renders components/progress/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/progress/demo/dashboard.tsx extend context correctly 1`] = `
`; +exports[`renders components/progress/demo/component-token.tsx correctly 1`] = ` +Array [ +
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
, +
, +
, +
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + +
+
+
+
, +
, +
, +
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + 50% + +
+
+
+
+
+
+ + + + + + + +
+
+
+
, +
, +
, +
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
+
+
+
+
+
+ + 50% + +
+
+
+
, +] +`; + exports[`renders components/progress/demo/dashboard.tsx correctly 1`] = `
( + + + + + + +
+
+ + + + + +
+
+ + + + + +
+
+ + + + + + + +); + +export default App; diff --git a/components/progress/style/index.tsx b/components/progress/style/index.tsx index b68ae667c0da..206aa45229de 100644 --- a/components/progress/style/index.tsx +++ b/components/progress/style/index.tsx @@ -4,13 +4,35 @@ import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -export interface ComponentToken {} +export interface ComponentToken { + /** + * @desc 进度条默认颜色 + * @descEN Default color of progress bar + */ + defaultColor: string; + /** + * @desc 进度条剩余部分颜色 + * @descEN Color of remaining part of progress bar + */ + remainingColor: string; + /** + * @desc 圆形进度条文字颜色 + * @descEN Text color of circular progress bar + */ + circleTextColor: string; + /** + * @desc 条状进度条圆角 + * @descEN Border radius of line progress bar + */ + lineBorderRadius: number; + /** + * @desc 圆形进度条文本大小 + * @descEN Text size of circular progress bar + */ + circleTextFontSize: string; +} interface ProgressToken extends FullToken<'Progress'> { - progressLineRadius: number; - progressInfoTextColor: string; - progressRemainingColor: string; - progressDefaultColor: string; progressStepMinWidth: number; progressStepMarginInlineEnd: number; progressActiveMotionDuration: string; @@ -73,20 +95,20 @@ const genBaseStyle: GenerateStyle = (token) => { width: '100%', overflow: 'hidden', verticalAlign: 'middle', - backgroundColor: token.progressRemainingColor, - borderRadius: token.progressLineRadius, + backgroundColor: token.remainingColor, + borderRadius: token.lineBorderRadius, }, [`${progressCls}-inner:not(${progressCls}-circle-gradient)`]: { [`${progressCls}-circle-path`]: { - stroke: token.colorInfo, + stroke: token.defaultColor, }, }, [`${progressCls}-success-bg, ${progressCls}-bg`]: { position: 'relative', - backgroundColor: token.colorInfo, - borderRadius: token.progressLineRadius, + backgroundColor: token.defaultColor, + borderRadius: token.lineBorderRadius, transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`, }, @@ -101,7 +123,7 @@ const genBaseStyle: GenerateStyle = (token) => { display: 'inline-block', width: '2em', marginInlineStart: token.marginXS, - color: token.progressInfoTextColor, + color: token.colorText, lineHeight: 1, whiteSpace: 'nowrap', textAlign: 'start', @@ -117,7 +139,7 @@ const genBaseStyle: GenerateStyle = (token) => { position: 'absolute', inset: 0, backgroundColor: token.colorBgContainer, - borderRadius: token.progressLineRadius, + borderRadius: token.lineBorderRadius, opacity: 0, animationName: genAntProgressActive(), animationDuration: token.progressActiveMotionDuration, @@ -173,7 +195,7 @@ const genCircleStyle: GenerateStyle = (token) => { return { [progressCls]: { [`${progressCls}-circle-trail`]: { - stroke: token.progressRemainingColor, + stroke: token.remainingColor, }, [`&${progressCls}-circle ${progressCls}-inner`]: { @@ -189,7 +211,8 @@ const genCircleStyle: GenerateStyle = (token) => { width: '100%', margin: 0, padding: 0, - color: token.colorText, + color: token.circleTextColor, + fontSize: token.circleTextFontSize, lineHeight: 1, whiteSpace: 'normal', textAlign: 'center', @@ -237,11 +260,11 @@ const genStepStyle: GenerateStyle = (token: ProgressToken): CSSOb flexShrink: 0, minWidth: token.progressStepMinWidth, marginInlineEnd: token.progressStepMarginInlineEnd, - backgroundColor: token.progressRemainingColor, + backgroundColor: token.remainingColor, transition: `all ${token.motionDurationSlow}`, '&-active': { - backgroundColor: token.colorInfo, + backgroundColor: token.defaultColor, }, }, }, @@ -262,22 +285,29 @@ const genSmallLine: GenerateStyle = (token: ProgressToken): CSSOb }; }; -export default genComponentStyleHook('Progress', (token) => { - const progressStepMarginInlineEnd = token.marginXXS / 2; - - const progressToken = mergeToken(token, { - progressLineRadius: 100, // magic for capsule shape, should be a very large number - progressInfoTextColor: token.colorText, - progressDefaultColor: token.colorInfo, - progressRemainingColor: token.colorFillSecondary, - progressStepMarginInlineEnd, - progressStepMinWidth: progressStepMarginInlineEnd, - progressActiveMotionDuration: '2.4s', - }); - return [ - genBaseStyle(progressToken), - genCircleStyle(progressToken), - genStepStyle(progressToken), - genSmallLine(progressToken), - ]; -}); +export default genComponentStyleHook( + 'Progress', + (token) => { + const progressStepMarginInlineEnd = token.marginXXS / 2; + + const progressToken = mergeToken(token, { + progressStepMarginInlineEnd, + progressStepMinWidth: progressStepMarginInlineEnd, + progressActiveMotionDuration: '2.4s', + }); + + return [ + genBaseStyle(progressToken), + genCircleStyle(progressToken), + genStepStyle(progressToken), + genSmallLine(progressToken), + ]; + }, + (token) => ({ + circleTextColor: token.colorText, + defaultColor: token.colorInfo, + remainingColor: token.colorFillSecondary, + lineBorderRadius: 100, // magic for capsule shape, should be a very large number + circleTextFontSize: '1em', + }), +); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index f64cce6e1da4..22c1901e0516 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -436,7 +436,19 @@ export default App; | `@popover-distance` | `marginXXS` | Global Token | | `@popover-padding-horizontal` | - | Deprecated for style change | - +### Progress + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@progress-default-color` | `defaultColor` | - | +| `@progress-remaining-color` | `remainingColor` | - | +| `@progress-info-text-color` | `colorText` | Global Token | +| `@progress-text-color` | `circleTextColor` | - | +| `@progress-radius` | `lineBorderRadius` | - | +| `@progress-steps-item-bg` | `remainingColor` | - | +| `@progress-text-font-size` | `fontSizeSM` | Global Token | +| `@progress-circle-text-font-size` | `circleTextFontSize` | - | ### Radio diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index b221488d7e0e..2d16cdea7bb9 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -433,7 +433,19 @@ Mentions 提及 | `@popover-distance` | `marginXXS` | 全局 Token | | `@popover-padding-horizontal` | - | 已废弃 | - +### Progress 进度条 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@progress-default-color` | `defaultColor` | - | +| `@progress-remaining-color` | `remainingColor` | - | +| `@progress-info-text-color` | `colorText` | 全局 Token | +| `@progress-text-color` | `circleTextColor` | - | +| `@progress-radius` | `lineBorderRadius` | - | +| `@progress-steps-item-bg` | `remainingColor` | - | +| `@progress-text-font-size` | `fontSizeSM` | 全局 Token | +| `@progress-circle-text-font-size` | `circleTextFontSize` | - | ### Radio 单选框 From ee984fee0a81d81248799fddb2ccd606ac87b744 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: Mon, 14 Aug 2023 16:31:57 +0800 Subject: [PATCH 021/318] fix: Modal open should not block dropdown hidden (#44204) * refactor: adjust style * fix: not event when hovering * chore: add comment --- components/modal/style/index.tsx | 21 +++++++++------------ 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/components/modal/style/index.tsx b/components/modal/style/index.tsx index 77e007673b0a..14d18166250e 100644 --- a/components/modal/style/index.tsx +++ b/components/modal/style/index.tsx @@ -62,10 +62,7 @@ export interface ModalToken extends FullToken<'Modal'> { function box(position: React.CSSProperties['position']): React.CSSProperties { return { position, - top: 0, - insetInlineEnd: 0, - bottom: 0, - insetInlineStart: 0, + inset: 0, }; } @@ -95,6 +92,7 @@ export const genModalMaskStyle: GenerateStyle> = zIndex: token.zIndexPopupBase, height: '100%', backgroundColor: token.colorBgMask, + pointerEvents: 'none', [`${componentCls}-hidden`]: { display: 'none', @@ -103,9 +101,16 @@ export const genModalMaskStyle: GenerateStyle> = [`${componentCls}-wrap`]: { ...box('fixed'), + zIndex: token.zIndexPopupBase, overflow: 'auto', outline: 0, WebkitOverflowScrolling: 'touch', + + // Note: Firefox not support `:has` yet + [`&:has(${componentCls}${antCls}-zoom-enter), &:has(${componentCls}${antCls}-zoom-appear)`]: + { + pointerEvents: 'none', + }, }, }, }, @@ -120,14 +125,6 @@ const genModalStyle: GenerateStyle = (token) => { // ======================== Root ========================= { [`${componentCls}-root`]: { - [`${componentCls}-wrap`]: { - zIndex: token.zIndexPopupBase, - position: 'fixed', - inset: 0, - overflow: 'auto', - outline: 0, - WebkitOverflowScrolling: 'touch', - }, [`${componentCls}-wrap-rtl`]: { direction: 'rtl', }, From 6a6f1b741f9a0b62f7dcaea36110043969e9dfd7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Mon, 14 Aug 2023 17:18:42 +0800 Subject: [PATCH 022/318] feat(badge): migrate less to token (#42778) * chore: update * docs: add component token demo * test: update snapshot * chore: update * test: update snapshot * feat: token * chore: update snapshot * chore: code clean * chore: code clean * chore: code clean * chore: code clean * chore: update * chore: fix lint * fix: fontsizesm --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 141 ++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 139 ++++++++++++++ components/badge/demo/component-token.md | 7 + components/badge/demo/component-token.tsx | 32 ++++ components/badge/index.en-US.md | 1 + components/badge/index.zh-CN.md | 1 + components/badge/style/index.ts | 179 +++++++++++------- components/theme/interface/components.ts | 3 +- docs/react/migrate-less-variables.en-US.md | 18 +- docs/react/migrate-less-variables.zh-CN.md | 18 +- 10 files changed, 466 insertions(+), 73 deletions(-) create mode 100644 components/badge/demo/component-token.md create mode 100644 components/badge/demo/component-token.tsx diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index 4d00eec5cdd2..fc77b1a71531 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1390,6 +1390,147 @@ Array [ exports[`renders components/badge/demo/colorful-with-count-debug.tsx extend context correctly 2`] = `[]`; +exports[`renders components/badge/demo/component-token.tsx extend context correctly 1`] = ` +
+
+ + + + + + + + 5 + + + + +
+
+ + + + + 2 + + + + + 6 + + + + +
+
+ + + + + + +
+
+ + + + Success + + +
+
+ + + 0 + + +
+
+`; + +exports[`renders components/badge/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/badge/demo/dot.tsx extend context correctly 1`] = `
+
+ + + + + + + + 5 + + + + +
+
+ + + + + 2 + + + + + 6 + + + + +
+
+ + + + + + +
+
+ + + + Success + + +
+
+ + + 0 + + +
+
+`; + exports[`renders components/badge/demo/dot.tsx correctly 1`] = `
( + + + + + + + + + + + + + +); diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 253195ffb89b..13e5e401bbc2 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -32,6 +32,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca Mixed usage Title Colorful Badge support count Debug +Component Token ## API diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 83640d7aa28a..bd1866bf75f3 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -33,6 +33,7 @@ group: 数据展示 各种混用的情况 自定义标题 多彩徽标支持 count 显示 Debug +组件 Token ## API diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index 44b0cbdf18c2..9ed0afaef9d3 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -4,19 +4,56 @@ import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, genPresetColor, mergeToken } from '../../theme/internal'; +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + // Component token here + /** + * @desc 徽标 z-index + * @descEN z-index of badge + */ + indicatorZIndex: number | string; + /** + * @desc 徽标高度 + * @descEN Height of badge + */ + indicatorHeight: number; + /** + * @desc 小号徽标高度 + * @descEN Height of small badge + */ + indicatorHeightSM: number; + /** + * @desc 点状徽标尺寸 + * @descEN Size of dot badge + */ + dotSize: number; + /** + * @desc 徽标文本尺寸 + * @descEN Font size of badge text + */ + textFontSize: number; + /** + * @desc 小号徽标文本尺寸 + * @descEN Font size of small badge text + */ + textFontSizeSM: number; + /** + * @desc 徽标文本粗细 + * @descEN Font weight of badge text + */ + textFontWeight: number | string; + /** + * @desc 状态徽标尺寸 + * @descEN Size of status badge + */ + statusSize: number; +} + interface BadgeToken extends FullToken<'Badge'> { badgeFontHeight: number; - badgeZIndex: number | string; - badgeHeight: number; - badgeHeightSm: number; badgeTextColor: string; - badgeFontWeight: string; - badgeFontSize: number; badgeColor: string; badgeColorHover: string; - badgeDotSize: number; - badgeFontSizeSm: number; - badgeStatusSize: number; badgeShadowSize: number; badgeShadowColor: string; badgeProcessingDuration: string; @@ -63,9 +100,14 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO antCls, badgeFontHeight, badgeShadowSize, - badgeHeightSm, motionDurationSlow, - badgeStatusSize, + textFontSize, + textFontSizeSM, + statusSize, + dotSize, + textFontWeight, + indicatorHeight, + indicatorHeightSM, marginXS, badgeRibbonOffset, } = token; @@ -98,17 +140,17 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO lineHeight: 1, [`${componentCls}-count`]: { - zIndex: token.badgeZIndex, - minWidth: token.badgeHeight, - height: token.badgeHeight, + zIndex: token.indicatorZIndex, + minWidth: indicatorHeight, + height: indicatorHeight, color: token.badgeTextColor, - fontWeight: token.badgeFontWeight, - fontSize: token.badgeFontSize, - lineHeight: `${token.badgeHeight}px`, + fontWeight: textFontWeight, + fontSize: textFontSize, + lineHeight: `${indicatorHeight}px`, whiteSpace: 'nowrap', textAlign: 'center', background: token.badgeColor, - borderRadius: token.badgeHeight / 2, + borderRadius: indicatorHeight / 2, boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`, transition: `background ${token.motionDurationMid}`, @@ -124,11 +166,11 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }, }, [`${componentCls}-count-sm`]: { - minWidth: badgeHeightSm, - height: badgeHeightSm, - fontSize: token.badgeFontSizeSm, - lineHeight: `${badgeHeightSm}px`, - borderRadius: badgeHeightSm / 2, + minWidth: indicatorHeightSM, + height: indicatorHeightSM, + fontSize: textFontSizeSM, + lineHeight: `${indicatorHeightSM}px`, + borderRadius: indicatorHeightSM / 2, }, [`${componentCls}-multiple-words`]: { @@ -136,10 +178,10 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }, [`${componentCls}-dot`]: { - zIndex: token.badgeZIndex, - width: token.badgeDotSize, - minWidth: token.badgeDotSize, - height: token.badgeDotSize, + zIndex: token.indicatorZIndex, + width: dotSize, + minWidth: dotSize, + height: dotSize, background: token.badgeColor, borderRadius: '100%', boxShadow: `0 0 0 ${badgeShadowSize}px ${token.badgeShadowColor}`, @@ -168,8 +210,8 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO position: 'relative', top: -1, // Magic number, but seems better experience display: 'inline-block', - width: badgeStatusSize, - height: badgeStatusSize, + width: statusSize, + height: statusSize, verticalAlign: 'middle', borderRadius: '50%', }, @@ -259,12 +301,12 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO [`${numberPrefixCls}-only`]: { position: 'relative', display: 'inline-block', - height: token.badgeHeight, + height: indicatorHeight, transition: `all ${token.motionDurationSlow} ${token.motionEaseOutBack}`, WebkitTransformStyle: 'preserve-3d', WebkitBackfaceVisibility: 'hidden', [`> p${numberPrefixCls}-only-unit`]: { - height: token.badgeHeight, + height: indicatorHeight, margin: 0, WebkitTransformStyle: 'preserve-3d', WebkitBackfaceVisibility: 'hidden', @@ -334,45 +376,46 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO }; // ============================== Export ============================== -export default genComponentStyleHook('Badge', (token) => { - const { fontSize, lineHeight, fontSizeSM, lineWidth, marginXS, colorBorderBg } = token; +export default genComponentStyleHook( + 'Badge', + (token) => { + const { fontSize, lineHeight, lineWidth, marginXS, colorBorderBg } = token; - const badgeFontHeight = Math.round(fontSize * lineHeight); - const badgeShadowSize = lineWidth; - const badgeZIndex = 'auto'; - const badgeHeight = badgeFontHeight - 2 * badgeShadowSize; - const badgeTextColor = token.colorBgContainer; - const badgeFontWeight = 'normal'; - const badgeFontSize = fontSizeSM; - const badgeColor = token.colorError; - const badgeColorHover = token.colorErrorHover; - const badgeHeightSm = fontSize; - const badgeDotSize = fontSizeSM / 2; - const badgeFontSizeSm = fontSizeSM; - const badgeStatusSize = fontSizeSM / 2; + const badgeFontHeight = Math.round(fontSize * lineHeight); + const badgeShadowSize = lineWidth; + const badgeTextColor = token.colorBgContainer; + const badgeColor = token.colorError; + const badgeColorHover = token.colorErrorHover; - const badgeToken = mergeToken(token, { - badgeFontHeight, - badgeShadowSize, - badgeZIndex, - badgeHeight, - badgeTextColor, - badgeFontWeight, - badgeFontSize, - badgeColor, - badgeColorHover, - badgeShadowColor: colorBorderBg, - badgeHeightSm, - badgeDotSize, - badgeFontSizeSm, - badgeStatusSize, - badgeProcessingDuration: '1.2s', - badgeRibbonOffset: marginXS, + const badgeToken = mergeToken(token, { + badgeFontHeight, + badgeShadowSize, + badgeTextColor, + badgeColor, + badgeColorHover, + badgeShadowColor: colorBorderBg, + badgeProcessingDuration: '1.2s', + badgeRibbonOffset: marginXS, - // Follow token just by Design. Not related with token - badgeRibbonCornerTransform: 'scaleY(0.75)', - badgeRibbonCornerFilter: `brightness(75%)`, - }); + // Follow token just by Design. Not related with token + badgeRibbonCornerTransform: 'scaleY(0.75)', + badgeRibbonCornerFilter: `brightness(75%)`, + }); - return [genSharedBadgeStyle(badgeToken)]; -}); + return [genSharedBadgeStyle(badgeToken)]; + }, + (token) => { + const { fontSize, lineHeight, fontSizeSM, lineWidth } = token; + + return { + indicatorZIndex: 'auto', + indicatorHeight: Math.round(fontSize * lineHeight) - 2 * lineWidth, + indicatorHeightSM: fontSize, + dotSize: fontSizeSM / 2, + textFontSize: fontSizeSM, + textFontSizeSM: fontSizeSM, + textFontWeight: 'normal', + statusSize: fontSizeSM / 2, + }; + }, +); diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 8ae0623864f0..94904fc3ddef 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -4,6 +4,7 @@ import type { ComponentToken as AnchorComponentToken } from '../../anchor/style' import type { ComponentToken as AppComponentToken } from '../../app/style'; import type { ComponentToken as AvatarComponentToken } from '../../avatar/style'; import type { ComponentToken as BackTopComponentToken } from '../../back-top/style'; +import type { ComponentToken as BadgeComponentToken } from '../../badge/style'; import type { ComponentToken as BreadcrumbComponentToken } from '../../breadcrumb/style'; import type { ComponentToken as ButtonComponentToken } from '../../button/style'; import type { ComponentToken as CalendarComponentToken } from '../../calendar/style'; @@ -61,7 +62,7 @@ export interface ComponentTokenMap { Anchor?: AnchorComponentToken; Avatar?: AvatarComponentToken; BackTop?: BackTopComponentToken; - Badge?: {}; + Badge?: BadgeComponentToken; Button?: ButtonComponentToken; Breadcrumb?: BreadcrumbComponentToken; Card?: CardComponentToken; diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 22c1901e0516..2abe7ca35c67 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -14,8 +14,8 @@ This document contains the correspondence between all the less variables related We could configure global token and component token for each component through the `theme` property of ConfigProvider. ```tsx -import React from 'react'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import React from 'react'; const App: React.FC = () => ( +### Badge + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@zindex-badge` | `indicatorZIndex` | - | +| `@badge-height` | `indicatorHeight` | - | +| `@badge-height-sm` | `indicatorHeightSM` | - | +| `@badge-dot-size` | `dotSize` | - | +| `@badge-font-size` | `textFontSize` | - | +| `@badge-font-size-sm` | `textFontSizeSM` | - | +| `@badge-font-weight` | `textFontWeight` | - | +| `@badge-status-size` | `statusSize` | - | +| `@badge-text-color` | `colorBgContainer` | Global Token | +| `@badge-color` | `colorError` | Global Token | ### BreadCrumb diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 2d16cdea7bb9..79f41d62240c 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -14,8 +14,8 @@ title: 从 Less 变量到 Design Token 通过 ConfigProvider 的 `theme` 属性，我们可以对每一个组件单独配置全局 Token 和组件 Token ```tsx -import React from 'react'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import React from 'react'; const App: React.FC = () => ( +### Badge 徽标数 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@zindex-badge` | `indicatorZIndex` | - | +| `@badge-height` | `indicatorHeight` | - | +| `@badge-height-sm` | `indicatorHeightSM` | - | +| `@badge-dot-size` | `dotSize` | - | +| `@badge-font-size` | `textFontSize` | - | +| `@badge-font-size-sm` | `textFontSizeSM` | - | +| `@badge-font-weight` | `textFontWeight` | - | +| `@badge-status-size` | `statusSize` | - | +| `@badge-text-color` | `colorBgContainer` | 全局 Token | +| `@badge-color` | `colorError` | 全局 Token | ### BreadCrumb 面包屑 From d1bd2d060556214018bd381cb7703721ff4f13e4 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 14 Aug 2023 18:27:05 +0800 Subject: [PATCH 023/318] docs: Update recommendation (#44207) * Update recommendation.zh-CN.md Signed-off-by: afc163 * Update recommendation.en-US.md Signed-off-by: afc163 --------- Signed-off-by: afc163 --- docs/react/recommendation.en-US.md | 2 +- docs/react/recommendation.zh-CN.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index 3e5a150649bf..df36112bee2e 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -41,8 +41,8 @@ title: Third-Party Libraries | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) | | Page Footer | [rc-footer](https://github.com/react-component/footer) | | Number/Currency | [react-countup](https://www.npmjs.com/package/react-countup) [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-field](https://github.com/cchanxzy/react-currency-input-field) | - | Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | +| Flow-based UI | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | ## Products we are using ✨ diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index e023933178df..792439417357 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/docs/react/recommendation.zh-CN.md @@ -44,6 +44,7 @@ title: 社区精选组件 | 数字/金额 | [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-fiel](https://github.com/cchanxzy/react-currency-input-field) | | 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) | | 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | +| Flow 流 | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | ## 推荐产品 ✨ From e0e373f30191ca2bac5a49f674a1bdeb7c7c891d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8C=AB=E7=8C=AB?= Date: Mon, 14 Aug 2023 19:14:46 +0800 Subject: [PATCH 024/318] fix(badge): fix badge number is rtl (#43998) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(badge): fix badge number is rtl * test: fix snapshots * feat: use dir attribute instead of bdi * test: update snapshots * test: back of snapshot --------- Co-authored-by: 二货机器人 --- .../__snapshots__/demo-extend.test.ts.snap | 32 +- .../__snapshots__/demo.test.tsx.snap | 32 +- components/badge/ScrollNumber.tsx | 22 +- .../__snapshots__/demo-extend.test.ts.snap | 686 ++++++++++-------- .../__tests__/__snapshots__/demo.test.ts.snap | 686 ++++++++++-------- .../__snapshots__/index.test.tsx.snap | 666 +++++++++-------- components/badge/style/index.ts | 4 + .../__snapshots__/components.test.tsx.snap | 112 +-- .../__snapshots__/demo-extend.test.ts.snap | 106 +-- .../__tests__/__snapshots__/demo.test.ts.snap | 106 +-- .../__snapshots__/demo-extend.test.ts.snap | 32 +- .../__snapshots__/demo.test.tsx.snap | 32 +- 12 files changed, 1353 insertions(+), 1163 deletions(-) diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap index a0f571456c6a..e59a79d34005 100644 --- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx extend context correctly 1`] = data-show="true" title="1" > - + - 1 + + 1 + - +
@@ -531,16 +533,18 @@ Array [ data-show="true" title="1" > - + - 1 + + 1 + - +
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap index 6f87ea0a1eb5..9c10e9e3a429 100644 --- a/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/avatar/__tests__/__snapshots__/demo.test.tsx.snap @@ -39,16 +39,18 @@ exports[`renders components/avatar/demo/badge.tsx correctly 1`] = ` data-show="true" title="1" > - + - 1 + + 1 + - +
@@ -438,16 +440,18 @@ Array [ data-show="true" title="1" > - + - 1 + + 1 + - +
diff --git a/components/badge/ScrollNumber.tsx b/components/badge/ScrollNumber.tsx index a71762ac2c6e..79414bcde678 100644 --- a/components/badge/ScrollNumber.tsx +++ b/components/badge/ScrollNumber.tsx @@ -51,15 +51,19 @@ const ScrollNumber = React.forwardRef((props, re if (count && Number(count) % 1 === 0) { const numberList = String(count).split(''); - numberNodes = numberList.map((num, i) => ( - - )); + numberNodes = ( + + {numberList.map((num, i) => ( + + ))} + + ); } // allow specify the border diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index 4d00eec5cdd2..a5b47e06e3fd 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] = data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -136,16 +138,18 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] = data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -655,26 +659,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -695,26 +701,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -735,26 +743,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -775,26 +785,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -815,26 +827,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -855,26 +869,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -895,26 +911,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -935,26 +953,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -975,26 +995,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -1015,26 +1037,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -1055,26 +1079,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -1095,26 +1121,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -1135,26 +1163,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -1469,16 +1499,18 @@ exports[`renders components/badge/demo/link.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1519,16 +1551,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -1552,16 +1586,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -1585,16 +1621,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -1619,16 +1657,18 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = ` style="background: rgb(250, 84, 28);" title="5" > - + - 5 + + 5 + - +
@@ -1894,26 +1934,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1 style="background: rgb(250, 173, 20);" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - +
@@ -1929,26 +1971,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx extend context correctly 1 data-show="true" title="25" > - + - 2 + + 2 + - - - 5 + + 5 + - +
@@ -2023,16 +2067,18 @@ exports[`renders components/badge/demo/offset.tsx extend context correctly 1`] = style="margin-top: 10px; right: -10px;" title="5" > - + - 5 + + 5 + - + `; @@ -2063,26 +2109,28 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`] data-show="true" title="99" > - + - 9 + + 9 + - - - 9 + + 9 + - +
@@ -2704,16 +2752,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -2736,16 +2786,18 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -2937,16 +2989,18 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] = data-show="true" title="Custom hover text" > - + - 5 + + 5 + - +
@@ -2969,26 +3023,28 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] = data-show="true" title="Negative" > - + - - + + - + - - - 5 + + 5 + - +
diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap index 337d80134b2d..3b028617d6e9 100644 --- a/components/badge/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo.test.ts.snap @@ -24,16 +24,18 @@ exports[`renders components/badge/demo/basic.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -134,16 +136,18 @@ exports[`renders components/badge/demo/change.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -650,26 +654,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -690,26 +696,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -730,26 +738,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -770,26 +780,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -810,26 +822,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -850,26 +864,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -890,26 +906,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - +
@@ -930,26 +948,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -970,26 +990,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1010,26 +1032,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1050,26 +1074,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1090,26 +1116,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1130,26 +1158,28 @@ Array [ data-show="true" title="44" > - + - 4 + + 4 + - - - 4 + + 4 + - + @@ -1460,16 +1490,18 @@ exports[`renders components/badge/demo/link.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1508,16 +1540,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1541,16 +1575,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1574,16 +1610,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -1608,16 +1646,18 @@ exports[`renders components/badge/demo/mix.tsx correctly 1`] = ` style="background:#fa541c" title="5" > - + - 5 + + 5 + - + @@ -1881,26 +1921,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = ` style="background:#faad14" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - + @@ -1916,26 +1958,28 @@ exports[`renders components/badge/demo/no-wrapper.tsx correctly 1`] = ` data-show="true" title="25" > - + - 2 + + 2 + - - - 5 + + 5 + - + @@ -2008,16 +2052,18 @@ exports[`renders components/badge/demo/offset.tsx correctly 1`] = ` style="margin-top:10px;right:-10px" title="5" > - + - 5 + + 5 + - + `; @@ -2046,26 +2092,28 @@ exports[`renders components/badge/demo/overflow.tsx correctly 1`] = ` data-show="true" title="99" > - + - 9 + + 9 + - - - 9 + + 9 + - + @@ -2681,16 +2729,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -2713,16 +2763,18 @@ exports[`renders components/badge/demo/size.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + @@ -2910,16 +2962,18 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = ` data-show="true" title="Custom hover text" > - + - 5 + + 5 + - + @@ -2942,26 +2996,28 @@ exports[`renders components/badge/demo/title.tsx correctly 1`] = ` data-show="true" title="Negative" > - + - - + + - + - - - 5 + + 5 + - + diff --git a/components/badge/__tests__/__snapshots__/index.test.tsx.snap b/components/badge/__tests__/__snapshots__/index.test.tsx.snap index 05ea8ed2e09c..ca44c0f66b97 100644 --- a/components/badge/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/badge/__tests__/__snapshots__/index.test.tsx.snap @@ -11,16 +11,18 @@ exports[`Badge render Badge status/color when contains children 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + @@ -79,36 +85,38 @@ exports[`Badge render correct with negative number 1`] = ` data-show="true" title="-10" > - + - - + + - + - - - 1 + + 1 + - - - 0 + + 0 + - + - + - - + + - + - - - 1 + + 1 + - - - 0 + + 0 + - + @@ -176,16 +186,18 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio style="margin-top: 10px; left: 10px;" title="5" > - + - 5 + + 5 + - + `; @@ -200,16 +212,18 @@ exports[`Badge should be compatible with borderColor style 1`] = ` style="background-color: rgb(255, 255, 255); color: rgb(153, 153, 153); border-color: #d9d9d9; box-shadow: 0 0 0 1px #d9d9d9 inset;" title="4" > - + - 4 + + 4 + - + `; @@ -274,86 +288,88 @@ exports[`Badge should render when count is changed 1`] = ` data-show="true" title="10" > - - - 1 - - - - - 0 - + - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - - - 8 - - - 9 + + 1 + - 0 + + 0 + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 0 + - + `; @@ -367,86 +383,88 @@ exports[`Badge should render when count is changed 2`] = ` data-show="true" title="11" > - - - 1 - - - - - 1 - + - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - - - 8 - - - 9 - - - 0 + + 1 + - 1 + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + + + 0 + + + 1 + - + `; @@ -460,27 +478,29 @@ exports[`Badge should render when count is changed 3`] = ` data-show="true" title="11" > - + - 1 + + 1 + - - - 1 + + 1 + - + `; @@ -508,26 +528,28 @@ exports[`Badge should render when count is changed 5`] = ` data-show="true" title="10" > - + - 1 + + 1 + - - - 0 + + 0 + - + `; @@ -541,76 +563,78 @@ exports[`Badge should render when count is changed 6`] = ` data-show="true" title="9" > - - - 9 - - - 0 - - - 1 - - - 2 - - - 3 - - - 4 - - - 5 - - - 6 - - - 7 - + - 8 - - - 9 + + 9 + + + 0 + + + 1 + + + 2 + + + 3 + + + 4 + + + 5 + + + 6 + + + 7 + + + 8 + + + 9 + - + `; diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts index 44b0cbdf18c2..a55e14abc6fd 100644 --- a/components/badge/style/index.ts +++ b/components/badge/style/index.ts @@ -133,6 +133,10 @@ const genSharedBadgeStyle: GenerateStyle = (token: BadgeToken): CSSO [`${componentCls}-multiple-words`]: { padding: `0 ${token.paddingXS}px`, + + bdi: { + unicodeBidi: 'plaintext', + }, }, [`${componentCls}-dot`]: { diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 571042719a1b..7d98439570c6 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -901,16 +901,18 @@ exports[`ConfigProvider components Badge configProvider 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - + - + - 5 + + 5 + - +
- + - 5 + + 5 + - + @@ -264,26 +268,28 @@ Array [ data-show="true" title="12" > - + - 1 + + 1 + - - - 2 + + 2 + - + @@ -330,36 +336,38 @@ Array [ data-show="true" title="123" > - + - 1 + + 1 + - - - 2 + + 2 + - - - 3 + + 3 + - + diff --git a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap index 9bae2695d30a..be61b15beb15 100644 --- a/components/float-button/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/float-button/__tests__/__snapshots__/demo.test.ts.snap @@ -122,16 +122,18 @@ Array [ data-show="true" title="5" > - + - 5 + + 5 + - + @@ -178,16 +180,18 @@ Array [ data-show="true" title="5" > - + - 5 + + 5 + - + @@ -241,26 +245,28 @@ Array [ data-show="true" title="12" > - + - 1 + + 1 + - - - 2 + + 2 + - + @@ -307,36 +313,38 @@ Array [ data-show="true" title="123" > - + - 1 + + 1 + - - - 2 + + 2 + - - - 3 + + 3 + - + diff --git a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap index 988eaaa17e64..affb88bff622 100644 --- a/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/radio/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx extend context correctly 1`] = data-show="true" title="1" > - + - 1 + + 1 + - + - + - 2 + + 2 + - +
diff --git a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap index 224b99ac45af..70bd7a5ab9ad 100644 --- a/components/radio/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/radio/__tests__/__snapshots__/demo.test.tsx.snap @@ -31,16 +31,18 @@ exports[`renders components/radio/demo/badge.tsx correctly 1`] = ` data-show="true" title="1" > - + - 1 + + 1 + - + - + - 2 + + 2 + - + From 1b479c4b45065794a3ca60dbf615a0328673f527 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Mon, 14 Aug 2023 19:19:32 +0800 Subject: [PATCH 025/318] feat(collapse): migrate less to token (#42938) * feat(collapse): migrate less to token * docs: add component token demo * test: update snapshot * chore: update snapshot * chore: code clean * chore: code clean * chore: update * chore: update demo * chore: style * chore: fix lint --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .../__snapshots__/demo-extend.test.ts.snap | 129 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 127 +++++++++++++++++ components/collapse/demo/component-token.md | 7 + components/collapse/demo/component-token.tsx | 30 ++++ components/collapse/index.en-US.md | 1 + components/collapse/index.zh-CN.md | 1 + components/collapse/style/index.ts | 80 ++++++----- docs/react/migrate-less-variables.en-US.md | 12 +- docs/react/migrate-less-variables.zh-CN.md | 12 +- 9 files changed, 360 insertions(+), 39 deletions(-) create mode 100644 components/collapse/demo/component-token.md create mode 100644 components/collapse/demo/component-token.tsx diff --git a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap index 567f8fc959dc..3f2467119840 100644 --- a/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/collapse/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -595,6 +595,135 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct exports[`renders components/collapse/demo/collapsible.tsx extend context correctly 2`] = `[]`; +exports[`renders components/collapse/demo/component-token.tsx extend context correctly 1`] = ` +
+
+ +
+
+ +
+
+ +
+
+`; + +exports[`renders components/collapse/demo/component-token.tsx extend context correctly 2`] = `[]`; + exports[`renders components/collapse/demo/custom.tsx extend context correctly 1`] = `
`; +exports[`renders components/collapse/demo/component-token.tsx correctly 1`] = ` +
+
+ +
+
+ +
+
+ +
+
+`; + exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
( + + + +); diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index df600e772a93..fec2d3e42eb0 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -69,6 +69,7 @@ const items: CollapseProps['items'] = [ Extra node Ghost Collapse Collapsible +Component Token ## API diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index c87916fa67ef..7086faa51fb0 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -70,6 +70,7 @@ const items: CollapseProps['items'] = [ 额外节点 幽灵折叠面板 可折叠触发区域 +组件 Token ## API diff --git a/components/collapse/style/index.ts b/components/collapse/style/index.ts index 6f9b7a7947e3..d83deecfe094 100644 --- a/components/collapse/style/index.ts +++ b/components/collapse/style/index.ts @@ -1,28 +1,31 @@ +import type { CSSProperties } from 'react'; import { resetComponent, resetIcon } from '../../style'; import { genCollapseMotion } from '../../style/motion'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -export interface ComponentToken {} +/** Component only token. Which will handle additional calculation of alias token */ +export interface ComponentToken { + // Component token here + headerPadding: CSSProperties['padding']; + headerBg: string; + contentPadding: CSSProperties['padding']; + contentBg: string; +} type CollapseToken = FullToken<'Collapse'> & { - collapseContentBg: string; - collapseHeaderBg: string; - collapseHeaderPadding: string; collapseHeaderPaddingSM: string; collapseHeaderPaddingLG: string; collapsePanelBorderRadius: number; - collapseContentPaddingHorizontal: number; }; export const genBaseStyle: GenerateStyle = (token) => { const { componentCls, - collapseContentBg, + contentBg, padding, - collapseContentPaddingHorizontal, - collapseHeaderBg, - collapseHeaderPadding, + headerBg, + headerPadding, collapseHeaderPaddingSM, collapseHeaderPaddingLG, collapsePanelBorderRadius, @@ -42,6 +45,7 @@ export const genBaseStyle: GenerateStyle = (token) => { paddingXS, motionDurationSlow, fontSizeIcon, + contentPadding, } = token; const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`; @@ -49,7 +53,7 @@ export const genBaseStyle: GenerateStyle = (token) => { return { [componentCls]: { ...resetComponent(token), - backgroundColor: collapseHeaderBg, + backgroundColor: headerBg, border: borderBase, borderBottom: 0, borderRadius: `${collapsePanelBorderRadius}px`, @@ -73,8 +77,7 @@ export const genBaseStyle: GenerateStyle = (token) => { display: 'flex', flexWrap: 'nowrap', alignItems: 'flex-start', - padding: collapseHeaderPadding, - paddingInlineStart: paddingSM, + padding: headerPadding, color: colorTextHeading, lineHeight, cursor: 'pointer', @@ -94,8 +97,6 @@ export const genBaseStyle: GenerateStyle = (token) => { display: 'flex', alignItems: 'center', paddingInlineEnd: marginSM, - // Arrow offset - marginInlineStart: padding - paddingSM, }, [`${componentCls}-arrow`]: { @@ -133,11 +134,11 @@ export const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-content`]: { color: colorText, - backgroundColor: collapseContentBg, + backgroundColor: contentBg, borderTop: borderBase, [`& > ${componentCls}-content-box`]: { - padding: `${padding}px ${collapseContentPaddingHorizontal}px`, + padding: contentPadding, }, [`&-hidden`]: { @@ -231,7 +232,7 @@ const genArrowStyle: GenerateStyle = (token) => { const genBorderlessStyle: GenerateStyle = (token) => { const { componentCls, - collapseHeaderBg, + headerBg, paddingXXS, colorBorder, @@ -239,7 +240,7 @@ const genBorderlessStyle: GenerateStyle = (token) => { return { [`${componentCls}-borderless`]: { - backgroundColor: collapseHeaderBg, + backgroundColor: headerBg, border: 0, [`> ${componentCls}-item`]: { @@ -290,22 +291,27 @@ const genGhostStyle: GenerateStyle = (token) => { }; }; -export default genComponentStyleHook('Collapse', (token) => { - const collapseToken = mergeToken(token, { - collapseContentBg: token.colorBgContainer, - collapseHeaderBg: token.colorFillAlter, - collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`, - collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`, - collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`, - collapsePanelBorderRadius: token.borderRadiusLG, - collapseContentPaddingHorizontal: 16, // Fixed value - }); - - return [ - genBaseStyle(collapseToken), - genBorderlessStyle(collapseToken), - genGhostStyle(collapseToken), - genArrowStyle(collapseToken), - genCollapseMotion(collapseToken), - ]; -}); +export default genComponentStyleHook( + 'Collapse', + (token) => { + const collapseToken = mergeToken(token, { + collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`, + collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`, + collapsePanelBorderRadius: token.borderRadiusLG, + }); + + return [ + genBaseStyle(collapseToken), + genBorderlessStyle(collapseToken), + genGhostStyle(collapseToken), + genArrowStyle(collapseToken), + genCollapseMotion(collapseToken), + ]; + }, + (token) => ({ + headerPadding: `${token.paddingSM}px ${token.padding}px`, + headerBg: token.colorFillAlter, + contentPadding: `${token.padding}px 16px`, // Fixed Value + contentBg: token.colorBgContainer, + }), +); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 2abe7ca35c67..a832a5dd9bfb 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -216,7 +216,17 @@ export default App; | `@checkbox-border-radius` | `borderRadiusSM` | - | | `@checkbox-group-item-margin-right` | - | Deprecated for style change | - +### Collapse + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@collapse-header-padding` | `headerPadding` | - | +| `@collapse-header-padding-extra` | - | Depreacated | +| `@collapse-header-bg` | `headerBg` | - | +| `@collapse-content-padding` | `contentPadding` | - | +| `@collapse-content-bg` | `contentBg` | - | +| `@collapse-header-arrow-left` | - | Deprecated | ### Descriptions diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 79f41d62240c..b1eced5c3dd2 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -214,7 +214,17 @@ export default App; | `@checkbox-border-radius` | `borderRadiusSM` | - | | `@checkbox-group-item-margin-right` | - | 由于样式变化已废弃 | - +### Collapse 折叠面板 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@collapse-header-padding` | `headerPadding` | - | +| `@collapse-header-padding-extra` | - | 已废弃 | +| `@collapse-header-bg` | `headerBg` | - | +| `@collapse-content-padding` | `contentPadding` | - | +| `@collapse-content-bg` | `contentBg` | - | +| `@collapse-header-arrow-left` | - | 已废弃 | ### Descriptions 描述列表 From 009779c21e43a2f0231d7688ad66fe5306f03a9c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 14 Aug 2023 20:39:31 +0800 Subject: [PATCH 026/318] chore: collapse token meta (#44211) --- components/badge/index.en-US.md | 14 +------------- components/collapse/style/index.ts | 16 ++++++++++++++++ 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 13e5e401bbc2..c4e5563e61a3 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -41,19 +41,7 @@ Common props ref：[Common props](/docs/react/common-props) ### Badge | Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| color | Customize Badge dot color | string | - | | -| count | Number to show in badge | ReactNode | - | | -| classNames | Semantic DOM class | Record | - | 5.7.0 | -| dot | Whether to display a red dot instead of `count` | boolean | false | | -| offset | Set offset of the badge dot | \[number, number] | - | | -| overflowCount | Max count to show | number | 99 | | -| showZero | Whether to show badge when `count` is zero | boolean | false | | -| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 | -| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | | -| styles | Semantic DOM style | Record | - | 5.7.0 | -| text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | | -| title | Text to show when hovering over the badge | string | - | | +| -------- | ----------- | ---- | ------- | ------- | ### Badge.Ribbon (4.5.0+) diff --git a/components/collapse/style/index.ts b/components/collapse/style/index.ts index d83deecfe094..18630323b9f5 100644 --- a/components/collapse/style/index.ts +++ b/components/collapse/style/index.ts @@ -7,9 +7,25 @@ import { genComponentStyleHook, mergeToken } from '../../theme/internal'; /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { // Component token here + /** + * @desc 折叠面板头部内边距 + * @descEN Padding of header + */ headerPadding: CSSProperties['padding']; + /** + * @desc 折叠面板头部背景 + * @descEN Background of header + */ headerBg: string; + /** + * @desc 折叠面板内容内部编辑 + * @descEN Padding of content + */ contentPadding: CSSProperties['padding']; + /** + * @desc 折叠面板内容背景 + * @descEN Background of content + */ contentBg: string; } From 41cb8be60859f255c4f6221c6bd8e90d8c549d79 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: Mon, 14 Aug 2023 20:59:34 +0800 Subject: [PATCH 027/318] fix(DatePicker): optimize RangePicker's range area style (#44206) * feat: optimize range-picker's range area style * feat: optimize range-picker's range area style * feat: optimize range-picker's range area style --- .../generatePicker/generateRangePicker.tsx | 4 +--- components/date-picker/style/index.ts | 14 ++++++++++---- 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index 503f2806ddfb..e601f0e70e75 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -68,9 +68,7 @@ export default function generateRangePicker(generateConfig: GenerateCo const [wrapSSR, hashId] = useStyle(prefixCls); - let additionalOverrideProps: any = {}; - additionalOverrideProps = { - ...additionalOverrideProps, + const additionalOverrideProps: any = { ...(showTime ? getTimeProps({ format, picker, ...showTime }) : {}), ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}), }; diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 340ad44eb9cd..8eda2d030c94 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -130,6 +130,12 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { borderRadius: borderRadiusSM, transition: `background ${motionDurationMid}, border ${motionDurationMid}`, }, + [`&-range-hover-start, &-range-hover-end`]: { + [pickerCellInnerCls]: { + borderStartEndRadius: 0, + borderEndEndRadius: 0, + }, + }, // >>> Hover [`&:hover:not(${pickerCellCls}-in-view), @@ -263,8 +269,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-range-hover-start::after`]: { insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, - borderStartStartRadius: lineWidth, - borderEndStartRadius: lineWidth, + borderStartStartRadius: borderRadiusSM, + borderEndStartRadius: borderRadiusSM, }, // Edge end @@ -275,8 +281,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-range-hover-end::after`]: { insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, - borderStartEndRadius: lineWidth, - borderEndEndRadius: lineWidth, + borderStartEndRadius: borderRadiusSM, + borderEndEndRadius: borderRadiusSM, }, // >>> Disabled From 16f0738177368ef1788940b4bde9341a3095b179 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 14 Aug 2023 21:58:08 +0800 Subject: [PATCH 028/318] chore(deps-dev): bump lint-staged from 13.3.0 to 14.0.0 (#44212) Bumps [lint-staged](https://github.com/okonet/lint-staged) from 13.3.0 to 14.0.0. - [Release notes](https://github.com/okonet/lint-staged/releases) - [Commits](https://github.com/okonet/lint-staged/compare/v13.3.0...v14.0.0) --- updated-dependencies: - dependency-name: lint-staged dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index fa6a79bf0bc3..16d19c57dad7 100644 --- a/package.json +++ b/package.json @@ -256,7 +256,7 @@ "jsdom": "^22.0.0", "jsonml-to-react-element": "^1.1.11", "jsonml.js": "^0.1.0", - "lint-staged": "^13.0.3", + "lint-staged": "^14.0.0", "lodash": "^4.17.21", "lz-string": "^1.4.4", "mockdate": "^3.0.0", From 20cb8fc49fd8fa3623972bf52cade456c70eae58 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 15 Aug 2023 09:31:49 +0800 Subject: [PATCH 029/318] site: revert lost api description (#44216) --- components/badge/index.en-US.md | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index c4e5563e61a3..13e5e401bbc2 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -41,7 +41,19 @@ Common props ref：[Common props](/docs/react/common-props) ### Badge | Property | Description | Type | Default | Version | -| -------- | ----------- | ---- | ------- | ------- | +| --- | --- | --- | --- | --- | +| color | Customize Badge dot color | string | - | | +| count | Number to show in badge | ReactNode | - | | +| classNames | Semantic DOM class | Record | - | 5.7.0 | +| dot | Whether to display a red dot instead of `count` | boolean | false | | +| offset | Set offset of the badge dot | \[number, number] | - | | +| overflowCount | Max count to show | number | 99 | | +| showZero | Whether to show badge when `count` is zero | boolean | false | | +| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 | +| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | | +| styles | Semantic DOM style | Record | - | 5.7.0 | +| text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | | +| title | Text to show when hovering over the badge | string | - | | ### Badge.Ribbon (4.5.0+) From d493594ffee869639ec3ee1a6ae3b370db663f94 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 15 Aug 2023 13:42:28 +0800 Subject: [PATCH 030/318] docs: fix menu sider-current demo (#44222) --- components/menu/demo/sider-current.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/menu/demo/sider-current.tsx b/components/menu/demo/sider-current.tsx index 37f497b1af06..5c3a0afa6c68 100644 --- a/components/menu/demo/sider-current.tsx +++ b/components/menu/demo/sider-current.tsx @@ -49,7 +49,7 @@ const App: React.FC = () => { const onOpenChange: MenuProps['onOpenChange'] = (keys) => { const latestOpenKey = keys.find((key) => openKeys.indexOf(key) === -1); - if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) { + if (latestOpenKey && rootSubmenuKeys.indexOf(latestOpenKey!) === -1) { setOpenKeys(keys); } else { setOpenKeys(latestOpenKey ? [latestOpenKey] : []); From aff2bb72eff193749b8b30696b4a0a7e0a810615 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: Tue, 15 Aug 2023 14:14:36 +0800 Subject: [PATCH 031/318] chore: update pagination (#44226) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 16d19c57dad7..db2ace7212dd 100644 --- a/package.json +++ b/package.json @@ -137,7 +137,7 @@ "rc-menu": "~9.10.0", "rc-motion": "^2.7.3", "rc-notification": "~5.0.4", - "rc-pagination": "~3.5.0", + "rc-pagination": "~3.6.0", "rc-picker": "~3.13.0", "rc-progress": "~3.4.1", "rc-rate": "~2.12.0", From 9ec85346fdadaad12f17a2c4c97d6e514057e54c Mon Sep 17 00:00:00 2001 From: Kyriewen <64134946+zbw-zbw@users.noreply.github.com> Date: Tue, 15 Aug 2023 15:12:45 +0800 Subject: [PATCH 032/318] docs(cascader): fix allowClear default value in doc (#44230) Co-authored-by: zbw01218944 --- components/cascader/index.en-US.md | 2 +- components/cascader/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index 05c674426685..940cb1f3a683 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: Support object type | +| allowClear | Show clear button | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: Support object type | | autoFocus | If get focus when component mounted | boolean | false | | | bordered | Whether has border style | boolean | true | | | changeOnSelect | (Work on single select) Change value on each selection if set to true, see above demo for details | boolean | false | | diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index e16b45bf6c29..8e371fdfc46b 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -49,7 +49,7 @@ demo: | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象形式 | +| allowClear | 支持清除 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象形式 | | autoFocus | 自动获取焦点 | boolean | false | | | bordered | 是否有边框 | boolean | true | | | changeOnSelect | （单选时生效）当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | | From 4fb448ffac808ed015621b25c51e548a41a4b498 Mon Sep 17 00:00:00 2001 From: Wing <1587315093@qq.com> Date: Tue, 15 Aug 2023 15:13:04 +0800 Subject: [PATCH 033/318] doc: upload doc line break (#44234) --- components/upload/index.en-US.md | 10 ++++++---- components/upload/index.zh-CN.md | 14 ++++++++------ 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index a31fe17e110b..49a2c7d48c64 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -98,7 +98,7 @@ Extends File with additional props. When uploading state change, it returns: -```js +```jsx { file: { /* ... */ }, fileList: [ /* ... */ ], @@ -108,11 +108,11 @@ When uploading state change, it returns: 1. `file` File object for the current operation. - ```js + ```jsx { uid: 'uid', // unique identifier, negative is recommended, to prevent interference with internally generated id name: 'xx.png', // file name - status: 'done', // options： uploading, done, error, removed. Intercepted file by beforeUpload doesn't have a status field. + status: 'done' | 'uploading' | 'error' | 'removed', // Intercepted file by beforeUpload doesn't have a status field. response: '{"status": "success"}', // response from server linkProps: '{"download": "image"}', // additional HTML props of file link xhr: 'XMLHttpRequest{ ... }', // XMLHttpRequest Header @@ -152,7 +152,9 @@ For compatible case, we return File object when `beforeUpload` return `false`. I ### Why sometimes Chrome can not upload? -Chrome update will also break native upload. Please restart Chrome to finish the upload work. Ref: +Chrome update will also break native upload. Please restart Chrome to finish the upload work. + +Ref: - [#32672](https://github.com/ant-design/ant-design/issues/32672) - [#32913](https://github.com/ant-design/ant-design/issues/32913) diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 6d91bba9ca77..d3685cce05e5 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -99,7 +99,7 @@ demo: 文件状态改变的回调，返回为： -```js +```jsx { file: { /* ... */ }, fileList: [ /* ... */ ], @@ -109,11 +109,11 @@ demo: 1. `file` 当前操作的文件对象。 - ```js + ```jsx { uid: 'uid', // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突 name: 'xx.png', // 文件名 - status: 'done', // 状态有：uploading done error removed，被 beforeUpload 拦截的文件没有 status 属性 + status: 'done' | 'uploading' | 'error' | 'removed' , // beforeUpload 拦截的文件没有 status 状态属性 response: '{"status": "success"}', // 服务端响应内容 linkProps: '{"download": "image"}', // 下载链接额外的 HTML 属性 } @@ -136,7 +136,7 @@ demo: ### 如何显示下载链接？ -请使用 fileList 属性设置数组项的 url 属性进行展示控制。 +请使用 `fileList` 属性设置数组项的 `url` 属性进行展示控制。 ### `customRequest` 怎么使用？ @@ -148,11 +148,13 @@ demo: ### `onChange` 为什么有时候返回 File 有时候返回 { originFileObj: File }？ -历史原因，在 `beforeUpload` 返回 `false` 时，会返回 File 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 File 写法。你可以提前切换。 +历史原因，在 `beforeUpload` 返回 `false` 时，会返回 `File` 对象。在下个大版本我们会统一返回 `{ originFileObj: File }` 对象。当前版本已经兼容所有场景下 `info.file.originFileObj` 获取原 `File` 写法。你可以提前切换。 ### 为何有时 Chrome 点击 Upload 无法弹出文件选择框？ -与 antd 无关，原生上传也会失败。请重启 Chrome 浏览器，让其完成升级工作。相关 issue： +与 `antd` 无关，原生上传也会失败。请重启 `Chrome` 浏览器，让其完成升级工作。 + +相关 `issue`： - [#32672](https://github.com/ant-design/ant-design/issues/32672) - [#32913](https://github.com/ant-design/ant-design/issues/32913) From 3f0e74702e71aba4739cbe37dfd6b714192cb1fa Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 15 Aug 2023 15:57:04 +0800 Subject: [PATCH 034/318] docs: fix theme editor page (#44232) --- .dumi/pages/theme-editor/index.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/.dumi/pages/theme-editor/index.tsx b/.dumi/pages/theme-editor/index.tsx index d67fa4ca52d6..9b62a90e8014 100644 --- a/.dumi/pages/theme-editor/index.tsx +++ b/.dumi/pages/theme-editor/index.tsx @@ -44,11 +44,6 @@ const CustomTheme = () => { const storedConfig = localStorage.getItem(ANT_DESIGN_V5_THEME_EDITOR_THEME); if (storedConfig) { const themeConfig = JSON.parse(storedConfig); - const originThemeConfig = { - json: themeConfig, - text: undefined, - }; - setThemeConfigContent(originThemeConfig); setTheme(themeConfig); } }, []); From 65989b4effc3abf257d633cf23fc107304160224 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 15 Aug 2023 17:05:06 +0800 Subject: [PATCH 035/318] feat: select component token (#44228) * feat: select token * feat: select token * docs: add demo --- .../select/__tests__/demo-extend.test.ts | 2 +- components/select/__tests__/demo.test.tsx | 2 +- components/select/demo/component-token.md | 7 + components/select/demo/component-token.tsx | 53 +++++++ components/select/index.en-US.md | 1 + components/select/index.zh-CN.md | 1 + components/select/style/dropdown.tsx | 18 +-- components/select/style/index.tsx | 147 +++++++++++++++++- components/select/style/multiple.tsx | 14 +- components/select/style/single.tsx | 2 +- docs/react/migrate-less-variables.en-US.md | 27 +++- docs/react/migrate-less-variables.zh-CN.md | 29 +++- 12 files changed, 276 insertions(+), 27 deletions(-) create mode 100644 components/select/demo/component-token.md create mode 100644 components/select/demo/component-token.tsx diff --git a/components/select/__tests__/demo-extend.test.ts b/components/select/__tests__/demo-extend.test.ts index 770b2233ca1f..13f655dd72a1 100644 --- a/components/select/__tests__/demo-extend.test.ts +++ b/components/select/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('select', { skip: ['render-panel.tsx', 'big-data.tsx'] }); +extendTest('select', { skip: ['render-panel.tsx', 'big-data.tsx', 'component-token.tsx'] }); diff --git a/components/select/__tests__/demo.test.tsx b/components/select/__tests__/demo.test.tsx index ce4fb72cc731..ab5b0dd5b3bc 100644 --- a/components/select/__tests__/demo.test.tsx +++ b/components/select/__tests__/demo.test.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; demoTest('select', { - skip: ['render-panel.tsx'], + skip: ['render-panel.tsx', 'component-token.tsx'], testRootProps: false, }); diff --git a/components/select/demo/component-token.md b/components/select/demo/component-token.md new file mode 100644 index 000000000000..83366668fe40 --- /dev/null +++ b/components/select/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +组件 Token + +## en-US + +Component Token diff --git a/components/select/demo/component-token.tsx b/components/select/demo/component-token.tsx new file mode 100644 index 000000000000..f3d398fac603 --- /dev/null +++ b/components/select/demo/component-token.tsx @@ -0,0 +1,53 @@ +import React from 'react'; +import { ConfigProvider, Select, Space } from 'antd'; +import type { SelectProps } from 'antd'; + +const options: SelectProps['options'] = []; + +for (let i = 10; i < 36; i++) { + options.push({ + label: i.toString(36) + i, + value: i.toString(36) + i, + }); +} + +const handleChange = (value: string[]) => { + console.log(`selected ${value}`); +}; + +const App: React.FC = () => ( + + + + + +); + +export default App; diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index c6f940e1ebf6..8d0c68a11134 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -45,6 +45,7 @@ Select component to select value from options. \_InternalPanelDoNotUseOrYouWillBeFired Options label Centered Flip + Shift +Component Token ## API diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 468ca665b110..1850ac83b685 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -46,6 +46,7 @@ demo: \_InternalPanelDoNotUseOrYouWillBeFired 选项文本居中 翻转+偏移 +组件 Token ## API diff --git a/components/select/style/dropdown.tsx b/components/select/style/dropdown.tsx index f690e3033c0e..a0ab4410f564 100644 --- a/components/select/style/dropdown.tsx +++ b/components/select/style/dropdown.tsx @@ -12,17 +12,17 @@ import { import type { GenerateStyle } from '../../theme/internal'; const genItemStyle: GenerateStyle = (token) => { - const { controlPaddingHorizontal, controlHeight, fontSize, lineHeight } = token; + const { optionHeight, optionFontSize, optionLineHeight, optionPadding } = token; return { position: 'relative', display: 'block', - minHeight: controlHeight, - padding: `${(controlHeight - fontSize * lineHeight) / 2}px ${controlPaddingHorizontal}px`, + minHeight: optionHeight, + padding: optionPadding, color: token.colorText, fontWeight: 'normal', - fontSize, - lineHeight, + fontSize: optionFontSize, + lineHeight: optionLineHeight, boxSizing: 'border-box', }; }; @@ -120,13 +120,13 @@ const genSingleStyle: GenerateStyle = (token) => { }, [`&-active:not(${selectItemCls}-option-disabled)`]: { - backgroundColor: token.controlItemBgHover, + backgroundColor: token.optionActiveBg, }, [`&-selected:not(${selectItemCls}-option-disabled)`]: { - color: token.colorText, - fontWeight: token.fontWeightStrong, - backgroundColor: token.controlItemBgActive, + color: token.optionSelectedColor, + fontWeight: token.optionSelectedFontWeight, + backgroundColor: token.optionSelectedBg, [`${selectItemCls}-option-state`]: { color: token.colorPrimary, diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index 1c7b683fa00b..e00e8f0c1444 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -1,4 +1,5 @@ import type { CSSObject } from '@ant-design/cssinjs'; +import type { CSSProperties } from 'react'; import { resetComponent, resetIcon, textEllipsis } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; import type { FullToken, GenerateStyle } from '../../theme/internal'; @@ -13,20 +14,111 @@ export interface ComponentToken { * @descEN z-index of dropdown */ zIndexPopup: number; + /** + * @desc 选项选中时文本颜色 + * @descEN Text color when option is selected + */ + optionSelectedColor: string; + /** + * @desc 选项选中时文本字重 + * @descEN Font weight when option is selected + */ + optionSelectedFontWeight: CSSProperties['fontWeight']; + /** + * @desc 选项选中时背景色 + * @descEN Background color when option is selected + */ + optionSelectedBg: string; + /** + * @desc 选项激活态时背景色 + * @descEN Background color when option is active + */ + optionActiveBg: string; + /** + * @desc 选项内间距 + * @descEN Padding of option + */ + optionPadding: CSSProperties['padding']; + /** + * @desc 选项字体大小 + * @descEN Font size of option + */ + optionFontSize: number; + /** + * @desc 选项行高 + * @descEN Line height of option + */ + optionLineHeight: CSSProperties['lineHeight']; + /** + * @desc 选项高度 + * @descEN Height of option + */ + optionHeight: number; + /** + * @desc 选框背景色 + * @descEN Background color of selector + */ + selectorBg: string; + /** + * @desc 清空按钮背景色 + * @descEN Background color of clear button + */ + clearBg: string; + /** + * @desc 单选大号回填项高度 + * @descEN Height of single selected item with large size + */ + singleItemHeightLG: number; + /** + * @desc 多选标签背景色 + * @descEN Background color of multiple tag + */ + multipleItemBg: string; + /** + * @desc 多选标签边框色 + * @descEN Border color of multiple tag + */ + multipleItemBorderColor: string; + /** + * @desc 多选标签高度 + * @descEN Height of multiple tag + */ + multipleItemHeight: number; + /** + * @desc 大号多选标签高度 + * @descEN Height of multiple tag with large size + */ + multipleItemHeightLG: number; + /** + * @desc 多选框禁用背景 + * @descEN Background color of multiple selector when disabled + */ + multipleSelectorBgDisabled: string; + /** + * @desc 多选标签禁用文本颜色 + * @descEN Text color of multiple tag when disabled + */ + multipleItemColorDisabled: string; + /** + * @desc 多选标签禁用边框色 + * @descEN Border color of multiple tag when disabled + */ + multipleItemBorderColorDisabled: string; } export interface SelectToken extends FullToken<'Select'> { rootPrefixCls: string; inputPaddingHorizontalBase: number; + multipleSelectItemHeight: number; } // ============================= Selector ============================= const genSelectorStyle: GenerateStyle = (token) => { - const { componentCls } = token; + const { componentCls, selectorBg } = token; return { position: 'relative', - backgroundColor: token.colorBgContainer, + backgroundColor: selectorBg, border: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`, transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`, @@ -49,7 +141,7 @@ const genSelectorStyle: GenerateStyle = (token) => { cursor: 'not-allowed', [`${componentCls}-multiple&`]: { - background: token.colorBgContainerDisabled, + background: token.multipleSelectorBgDisabled, }, input: { @@ -214,7 +306,7 @@ const genBaseStyle: GenerateStyle = (token) => { lineHeight: 1, textAlign: 'center', textTransform: 'none', - background: token.colorBgContainer, + background: token.clearBg, cursor: 'pointer', opacity: 0, transition: `color ${token.motionDurationMid} ease, opacity ${token.motionDurationSlow} ease`, @@ -333,11 +425,52 @@ export default genComponentStyleHook( const selectToken: SelectToken = mergeToken(token, { rootPrefixCls, inputPaddingHorizontalBase: token.paddingSM - 1, + multipleSelectItemHeight: token.multipleItemHeight, }); return [genSelectStyle(selectToken)]; }, - (token) => ({ - zIndexPopup: token.zIndexPopupBase + 50, - }), + (token) => { + const { + fontSize, + lineHeight, + controlHeight, + controlPaddingHorizontal, + zIndexPopupBase, + colorText, + fontWeightStrong, + controlItemBgActive, + controlItemBgHover, + colorBgContainer, + colorFillSecondary, + controlHeightLG, + controlHeightSM, + colorBgContainerDisabled, + colorTextDisabled, + } = token; + + return { + zIndexPopup: zIndexPopupBase + 50, + optionSelectedColor: colorText, + optionSelectedFontWeight: fontWeightStrong, + optionSelectedBg: controlItemBgActive, + optionActiveBg: controlItemBgHover, + optionPadding: `${ + (controlHeight - fontSize * lineHeight) / 2 + }px ${controlPaddingHorizontal}px`, + optionFontSize: fontSize, + optionLineHeight: lineHeight, + optionHeight: controlHeight, + selectorBg: colorBgContainer, + clearBg: colorBgContainer, + singleItemHeightLG: controlHeightLG, + multipleItemBg: colorFillSecondary, + multipleItemBorderColor: 'transparent', + multipleItemHeight: controlHeightSM, + multipleItemHeightLG: controlHeight, + multipleSelectorBgDisabled: colorBgContainerDisabled, + multipleItemColorDisabled: colorTextDisabled, + multipleItemBorderColorDisabled: 'transparent', + }; + }, ); diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index 157115dbad74..c65691a1151b 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -20,7 +20,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { const selectOverflowPrefixCls = `${componentCls}-selection-overflow`; - const selectItemHeight = token.controlHeightSM; + const selectItemHeight = token.multipleSelectItemHeight; const [selectItemDist] = getSelectItemStyle(token); const suffixCls = suffix ? `${componentCls}-${suffix}` : ''; @@ -63,7 +63,7 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { }, [`${componentCls}-disabled&`]: { - background: token.colorBgContainerDisabled, + background: token.multipleSelectorBgDisabled, cursor: 'not-allowed', }, @@ -95,7 +95,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { marginTop: FIXED_ITEM_MARGIN, marginBottom: FIXED_ITEM_MARGIN, lineHeight: `${selectItemHeight - token.lineWidth * 2}px`, - background: token.colorFillSecondary, + background: token.multipleItemBg, + border: `${token.lineWidth}px ${token.lineType} ${token.multipleItemBorderColor}`, borderRadius: token.borderRadiusSM, cursor: 'default', transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`, @@ -105,7 +106,8 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { paddingInlineEnd: token.paddingXS / 2, [`${componentCls}-disabled&`]: { - color: token.colorTextDisabled, + color: token.multipleItemColorDisabled, + borderColor: token.multipleItemBorderColorDisabled, cursor: 'not-allowed', }, @@ -196,7 +198,7 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => { const smallToken = mergeToken(token, { controlHeight: token.controlHeightSM, - controlHeightSM: token.controlHeightXS, + multipleSelectItemHeight: token.controlHeightXS, borderRadius: token.borderRadiusSM, borderRadiusSM: token.borderRadiusXS, }); @@ -204,7 +206,7 @@ const genMultipleStyle = (token: SelectToken): CSSInterpolation => { const largeToken = mergeToken(token, { fontSize: token.fontSizeLG, controlHeight: token.controlHeightLG, - controlHeightSM: token.controlHeight, + multipleSelectItemHeight: token.multipleItemHeightLG, borderRadius: token.borderRadiusLG, borderRadiusSM: token.borderRadius, }); diff --git a/components/select/style/single.tsx b/components/select/style/single.tsx index 06c4fdf19b74..654dc81bfd31 100644 --- a/components/select/style/single.tsx +++ b/components/select/style/single.tsx @@ -182,7 +182,7 @@ export default function genSingleStyle(token: SelectToken): CSSInterpolation { // Shared genSizeStyle( mergeToken(token, { - controlHeight: token.controlHeightLG, + controlHeight: token.singleItemHeightLG, fontSize: token.fontSizeLG, borderRadius: token.borderRadiusLG, }), diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index a832a5dd9bfb..2deb35b6de37 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -528,7 +528,32 @@ export default App; | `@segmented-label-hover-color` | `itemHoverColor` | - | | `@segmented-selected-bg` | `itemSelectedBg` | - | - +### Select + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@select-border-color` | `colorBorder` | Global Token | +| `@select-item-selected-color` | `optionSelectedColor` | - | +| `@select-item-selected-font-weight` | `optionSelectedFontWeight` | - | +| `@select-dropdown-bg` | `colorBgElevated` | Global Token | +| `@select-item-selected-bg` | `optionSelectedBg` | - | +| `@select-item-active-bg` | `optionActiveBg` | - | +| `@select-dropdown-vertical-padding` | `optionPadding` | Control the whole padding | +| `@select-dropdown-font-size` | `optionFontSize` | - | +| `@select-dropdown-line-height` | `optionLineHeight` | - | +| `@select-dropdown-height` | `optionHeight` | - | +| `@select-background` | `selectorBg` | - | +| `@select-clear-background` | `clearBg` | - | +| `@select-selection-item-bg` | `multipleItemBg` | - | +| `@select-selection-item-border-color` | `multipleItemBorderColor` | - | +| `@select-single-item-height-lg` | `singleItemHeightLG` | - | +| `@select-multiple-item-height` | `multipleItemHeight` | - | +| `@select-multiple-item-height-lg` | `multipleItemHeightLG` | - | +| `@select-multiple-item-spacing-half` | - | Deprecated | +| `@select-multiple-disabled-background` | `multipleSelectorBgDisabled` | - | +| `@select-multiple-item-disabled-color` | `multipleItemColorDisabled` | - | +| `@select-multiple-item-disabled-border-color` | `multipleItemBorderColorDisabled` | - | ### Skeleton diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index b1eced5c3dd2..5e70890fe1a2 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -319,6 +319,8 @@ export default App; | `@layout-trigger-background-light` | `lightTriggerBg` | - | | `@layout-trigger-color-light` | `lightTriggerColor` | - | +ssgit chekcout featuregit pucheckout featire'uregit pull + ### List 列表 @@ -524,7 +526,32 @@ Mentions 提及 | `@segmented-label-hover-color` | `itemHoverColor` | - | | `@segmented-selected-bg` | `itemSelectedBg` | - | - +### Select 选择器 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@select-border-color` | `colorBorder` | 全局 Token | +| `@select-item-selected-color` | `optionSelectedColor` | - | +| `@select-item-selected-font-weight` | `optionSelectedFontWeight` | - | +| `@select-dropdown-bg` | `colorBgElevated` | 全局 Token | +| `@select-item-selected-bg` | `optionSelectedBg` | - | +| `@select-item-active-bg` | `optionActiveBg` | - | +| `@select-dropdown-vertical-padding` | `optionPadding` | 控制整体内间距 | +| `@select-dropdown-font-size` | `optionFontSize` | - | +| `@select-dropdown-line-height` | `optionLineHeight` | - | +| `@select-dropdown-height` | `optionHeight` | - | +| `@select-background` | `selectorBg` | - | +| `@select-clear-background` | `clearBg` | - | +| `@select-selection-item-bg` | `multipleItemBg` | - | +| `@select-selection-item-border-color` | `multipleItemBorderColor` | - | +| `@select-single-item-height-lg` | `singleItemHeightLG` | - | +| `@select-multiple-item-height` | `multipleItemHeight` | - | +| `@select-multiple-item-height-lg` | `multipleItemHeightLG` | - | +| `@select-multiple-item-spacing-half` | - | 已废弃 | +| `@select-multiple-disabled-background` | `multipleSelectorBgDisabled` | - | +| `@select-multiple-item-disabled-color` | `multipleItemColorDisabled` | - | +| `@select-multiple-item-disabled-border-color` | `multipleItemBorderColorDisabled` | - | ### Skeleton 骨架屏 From 8a65ad65156f4f5eb1ff869c44fe766aae7e7f68 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 15 Aug 2023 19:10:32 +0800 Subject: [PATCH 036/318] docs: fix font color (#44236) --- .dumi/theme/builtins/TokenCompare/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.dumi/theme/builtins/TokenCompare/index.tsx b/.dumi/theme/builtins/TokenCompare/index.tsx index a44ffcda8da2..9ae37389f0b0 100644 --- a/.dumi/theme/builtins/TokenCompare/index.tsx +++ b/.dumi/theme/builtins/TokenCompare/index.tsx @@ -4,7 +4,7 @@ import classNames from 'classnames'; import { TinyColor } from '@ctrl/tinycolor'; import { createStyles } from 'antd-style'; import tokenMeta from 'antd/es/version/token-meta.json'; -import { theme, Space } from 'antd'; +import { Space, theme } from 'antd'; import useLocale from '../../../hooks/useLocale'; const useStyle = createStyles(({ token, css }) => { @@ -29,7 +29,7 @@ const useStyle = createStyles(({ token, css }) => { display: flex; align-items: center; justify-content: center; - + color: rgba(0,0,0,0.88); border-right: 1px solid rgba(0, 0, 0, 0.1); `, From 83e3b5218af3c91b47b00cdcd1dd5e5879578502 Mon Sep 17 00:00:00 2001 From: Konv Suu <2583695112@qq.com> Date: Tue, 15 Aug 2023 19:24:40 +0800 Subject: [PATCH 037/318] docs(Tabs): update animated prop's description (#44227) --- components/tabs/index.en-US.md | 2 +- components/tabs/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 404628eeb2d7..7ae5cc22cb04 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | activeKey | Current TabPane's key | string | - | | | addIcon | Customize add icon | ReactNode | - | 4.4.0 | -| animated | Whether to change tabs with animation. Only works while `tabPosition="top"` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | Whether to change tabs with animation.` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | Centers tabs | boolean | false | 4.4.0 | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 1ba9899eddfb..bbef94ed431f 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -50,7 +50,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | --- | --- | --- | --- | --- | | activeKey | 当前激活 tab 面板的 key | string | - | | | addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | -| animated | 是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | 是否使用动画切换 Tabs` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | 标签居中展示 | boolean | false | 4.4.0 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | From a92a883b7798fba5c19b1da4d12ddf299938e38f Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 16 Aug 2023 18:19:11 +0800 Subject: [PATCH 038/318] docs: render china mirror link before hydration (#44233) * docs: render china mirror link before hydration * docs: fix pre render error * chore: hide first * chore: show china mirror link always --- .dumi/theme/slots/Header/Navigation.tsx | 39 ++++++++++++++++++------- .dumi/theme/slots/Header/index.tsx | 3 -- .dumi/theme/slots/Header/interface.ts | 1 - 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/.dumi/theme/slots/Header/Navigation.tsx b/.dumi/theme/slots/Header/Navigation.tsx index 6bdb4b5012dc..597dc1fd3101 100644 --- a/.dumi/theme/slots/Header/Navigation.tsx +++ b/.dumi/theme/slots/Header/Navigation.tsx @@ -30,7 +30,8 @@ const locales = { // ============================= Style ============================= const useStyle = createStyles(({ token }) => { - const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary } = token; + const { antCls, iconCls, fontFamily, headerHeight, menuItemBorder, colorPrimary, colorText } = + token; return { nav: css` @@ -56,6 +57,17 @@ const useStyle = createStyles(({ token }) => { left: 12px; border-width: ${menuItemBorder}px; } + + a { + color: ${colorText}; + } + + a:before { + position: absolute; + inset: 0; + background-color: transparent; + content: ""; + } } & ${antCls}-menu-submenu-title ${iconCls} { @@ -97,7 +109,6 @@ const useStyle = createStyles(({ token }) => { export interface NavigationProps extends SharedProps { isMobile: boolean; - isClient: boolean; responsive: null | 'narrow' | 'crowded'; directionText: string; onLangChange: () => void; @@ -106,7 +117,6 @@ export interface NavigationProps extends SharedProps { export default ({ isZhCN, - isClient, isMobile, responsive, directionText, @@ -224,16 +234,21 @@ export default ({ ), key: 'docs/resources', }, - isZhCN && - isClient && - window.location.host !== 'ant-design.antgroup.com' && - window.location.host !== 'ant-design.gitee.io' + isZhCN ? { - label: '国内镜像', + label: ( + + 国内镜像 + + ), key: 'mirror', children: [ { - label: 官方镜像, + label: ( + + 官方镜像 + + ), icon: ( logoGitee 镜像, + label: ( + + Gitee 镜像 + + ), icon: ( gitee { - const [isClient, setIsClient] = React.useState(false); const [, lang] = useLocale(); const { pkg } = useSiteData(); @@ -166,7 +165,6 @@ const Header: React.FC = () => { }, [location]); useEffect(() => { - setIsClient(typeof window !== 'undefined'); onWindowResize(); window.addEventListener('resize', onWindowResize); pingTimer.current = ping((status) => { @@ -273,7 +271,6 @@ const Header: React.FC = () => { const sharedProps: SharedProps = { isZhCN, isRTL, - isClient, }; const navigationNode = ( diff --git a/.dumi/theme/slots/Header/interface.ts b/.dumi/theme/slots/Header/interface.ts index 4c8824787310..8a0755c1bf0e 100644 --- a/.dumi/theme/slots/Header/interface.ts +++ b/.dumi/theme/slots/Header/interface.ts @@ -1,5 +1,4 @@ export interface SharedProps { isZhCN: boolean; isRTL: boolean; - isClient: boolean; } From b9f77fde6c51e3fba945d25fbca008d62c0d8ca1 Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Wed, 16 Aug 2023 19:17:12 +0800 Subject: [PATCH 039/318] feat: migrate less to token for Switch (#42192) * feat: migrate less to token for Switch * chore: add demo * chore: code clean * chore: update demo * docs: update docs en * chore: code clean --------- Co-authored-by: MadCcc <1075746765@qq.com> --- .../switch/__tests__/demo-extend.test.ts | 4 +- components/switch/__tests__/demo.test.ts | 4 +- components/switch/demo/component-token.md | 7 + components/switch/demo/component-token.tsx | 30 ++ components/switch/index.en-US.md | 1 + components/switch/index.zh-CN.md | 1 + components/switch/style/index.ts | 303 +++++++++++------- components/theme/interface/components.ts | 3 +- docs/react/migrate-less-variables.en-US.md | 19 +- docs/react/migrate-less-variables.zh-CN.md | 19 +- 10 files changed, 271 insertions(+), 120 deletions(-) create mode 100644 components/switch/demo/component-token.md create mode 100644 components/switch/demo/component-token.tsx diff --git a/components/switch/__tests__/demo-extend.test.ts b/components/switch/__tests__/demo-extend.test.ts index 8cf514da22d9..fdf34ca249ae 100644 --- a/components/switch/__tests__/demo-extend.test.ts +++ b/components/switch/__tests__/demo-extend.test.ts @@ -1,3 +1,5 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('switch'); +extendTest('switch', { + skip: ['component-token.tsx'], +}); diff --git a/components/switch/__tests__/demo.test.ts b/components/switch/__tests__/demo.test.ts index 212cd1b8bac9..cc6be37be7d3 100644 --- a/components/switch/__tests__/demo.test.ts +++ b/components/switch/__tests__/demo.test.ts @@ -1,3 +1,5 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('switch'); +demoTest('switch', { + skip: ['component-token.tsx'], +}); diff --git a/components/switch/demo/component-token.md b/components/switch/demo/component-token.md new file mode 100644 index 000000000000..135a6b277037 --- /dev/null +++ b/components/switch/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +自定义组件 Token。 + +## en-US + +Custom component token. diff --git a/components/switch/demo/component-token.tsx b/components/switch/demo/component-token.tsx new file mode 100644 index 000000000000..ec80cb27714b --- /dev/null +++ b/components/switch/demo/component-token.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { ConfigProvider, Space, Switch } from 'antd'; + +const App: React.FC = () => ( + + + + + +); + +export default App; diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md index 2f4bca45aeef..3f7be9494c4b 100644 --- a/components/switch/index.en-US.md +++ b/components/switch/index.en-US.md @@ -23,6 +23,7 @@ Switching Selector. Text & icon Two sizes Loading +Custom component token ## API diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 51402a7f8f7a..dbff8205cefc 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -24,6 +24,7 @@ demo: 文字和图标 两种大小 加载中 +自定义组件 Token ## API diff --git a/components/switch/style/index.ts b/components/switch/style/index.ts index 213c058b8784..92d292931a90 100644 --- a/components/switch/style/index.ts +++ b/components/switch/style/index.ts @@ -4,89 +4,152 @@ import { genFocusStyle, resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +export interface ComponentToken { + /** + * @desc 开关高度 + * @descEN Height of Switch + */ + trackHeight: number; + /** + * @desc 小号开关高度 + * @descEN Height of small Switch + */ + trackHeightSM: number; + /** + * @desc 开关最小宽度 + * @descEN Minimum width of Switch + */ + trackMinWidth: number; + /** + * @desc 小号开关最小宽度 + * @descEN Minimum width of small Switch + */ + trackMinWidthSM: number; + /** + * @desc 开关内边距 + * @descEN Padding of Switch + */ + trackPadding: number; + /** + * @desc 开关把手背景色 + * @descEN Background color of Switch handle + */ + handleBg: string; + /** + * @desc 开关把手阴影 + * @descEN Shadow of Switch handle + */ + handleShadow: string; + /** + * @desc 开关把手大小 + * @descEN Size of Switch handle + */ + handleSize: number; + /** + * @desc 小号开关把手大小 + * @descEN Size of small Switch handle + */ + handleSizeSM: number; + /** + * @desc 内容区域最小边距 + * @descEN Minimum margin of content area + */ + innerMinMargin: number; + /** + * @desc 内容区域最大边距 + * @descEN Maximum margin of content area + */ + innerMaxMargin: number; + /** + * @desc 小号开关内容区域最小边距 + * @descEN Minimum margin of content area of small Switch + */ + innerMinMarginSM: number; + /** + * @desc 小号开关内容区域最大边距 + * @descEN Maximum margin of content area of small Switch + */ + innerMaxMarginSM: number; +} + interface SwitchToken extends FullToken<'Switch'> { - switchMinWidth: number; - switchHeight: number; switchDuration: string; switchColor: string; switchDisabledOpacity: number; - switchInnerMarginMin: number; - switchInnerMarginMax: number; - switchPadding: number; - switchPinSize: number; - switchBg: string; - switchMinWidthSM: number; - switchHeightSM: number; - switchInnerMarginMinSM: number; - switchInnerMarginMaxSM: number; - switchPinSizeSM: number; - switchHandleShadow: string; switchLoadingIconSize: number; switchLoadingIconColor: string; switchHandleActiveInset: string; } const genSwitchSmallStyle: GenerateStyle = (token) => { - const { componentCls } = token; + const { + componentCls, + trackHeightSM, + trackPadding, + trackMinWidthSM, + innerMinMarginSM, + innerMaxMarginSM, + handleSizeSM, + } = token; const switchInnerCls = `${componentCls}-inner`; return { [componentCls]: { [`&${componentCls}-small`]: { - minWidth: token.switchMinWidthSM, - height: token.switchHeightSM, - lineHeight: `${token.switchHeightSM}px`, + minWidth: trackMinWidthSM, + height: trackHeightSM, + lineHeight: `${trackHeightSM}px`, [`${componentCls}-inner`]: { - paddingInlineStart: token.switchInnerMarginMaxSM, - paddingInlineEnd: token.switchInnerMarginMinSM, + paddingInlineStart: innerMaxMarginSM, + paddingInlineEnd: innerMinMarginSM, [`${switchInnerCls}-checked`]: { - marginInlineStart: `calc(-100% + ${ - token.switchPinSizeSM + token.switchPadding * 2 - }px - ${token.switchInnerMarginMaxSM * 2}px)`, - marginInlineEnd: `calc(100% - ${token.switchPinSizeSM + token.switchPadding * 2}px + ${ - token.switchInnerMarginMaxSM * 2 + marginInlineStart: `calc(-100% + ${handleSizeSM + trackPadding * 2}px - ${ + innerMaxMarginSM * 2 + }px)`, + marginInlineEnd: `calc(100% - ${handleSizeSM + trackPadding * 2}px + ${ + innerMaxMarginSM * 2 }px)`, }, [`${switchInnerCls}-unchecked`]: { - marginTop: -token.switchHeightSM, + marginTop: -trackHeightSM, marginInlineStart: 0, marginInlineEnd: 0, }, }, [`${componentCls}-handle`]: { - width: token.switchPinSizeSM, - height: token.switchPinSizeSM, + width: handleSizeSM, + height: handleSizeSM, }, [`${componentCls}-loading-icon`]: { - top: (token.switchPinSizeSM - token.switchLoadingIconSize) / 2, + top: (handleSizeSM - token.switchLoadingIconSize) / 2, fontSize: token.switchLoadingIconSize, }, [`&${componentCls}-checked`]: { [`${componentCls}-inner`]: { - paddingInlineStart: token.switchInnerMarginMinSM, - paddingInlineEnd: token.switchInnerMarginMaxSM, + paddingInlineStart: innerMinMarginSM, + paddingInlineEnd: innerMaxMarginSM, [`${switchInnerCls}-checked`]: { marginInlineStart: 0, marginInlineEnd: 0, }, [`${switchInnerCls}-unchecked`]: { - marginInlineStart: `calc(100% - ${ - token.switchPinSizeSM + token.switchPadding * 2 - }px + ${token.switchInnerMarginMaxSM * 2}px)`, - marginInlineEnd: `calc(-100% + ${ - token.switchPinSizeSM + token.switchPadding * 2 - }px - ${token.switchInnerMarginMaxSM * 2}px)`, + marginInlineStart: `calc(100% - ${handleSizeSM + trackPadding * 2}px + ${ + innerMaxMarginSM * 2 + }px)`, + marginInlineEnd: `calc(-100% + ${handleSizeSM + trackPadding * 2}px - ${ + innerMaxMarginSM * 2 + }px)`, }, }, [`${componentCls}-handle`]: { - insetInlineStart: `calc(100% - ${token.switchPinSizeSM + token.switchPadding}px)`, + insetInlineStart: `calc(100% - ${handleSizeSM + trackPadding}px)`, }, }, @@ -111,13 +174,13 @@ const genSwitchSmallStyle: GenerateStyle = (token) => { }; const genSwitchLoadingStyle: GenerateStyle = (token) => { - const { componentCls } = token; + const { componentCls, handleSize } = token; return { [componentCls]: { [`${componentCls}-loading-icon${token.iconCls}`]: { position: 'relative', - top: (token.switchPinSize - token.fontSize) / 2, + top: (handleSize - token.fontSize) / 2, color: token.switchLoadingIconColor, verticalAlign: 'top', }, @@ -130,17 +193,17 @@ const genSwitchLoadingStyle: GenerateStyle = (token) => }; const genSwitchHandleStyle: GenerateStyle = (token) => { - const { componentCls, motion } = token; + const { componentCls, motion, trackPadding, handleBg, handleShadow, handleSize } = token; const switchHandleCls = `${componentCls}-handle`; return { [componentCls]: { [switchHandleCls]: { position: 'absolute', - top: token.switchPadding, - insetInlineStart: token.switchPadding, - width: token.switchPinSize, - height: token.switchPinSize, + top: trackPadding, + insetInlineStart: trackPadding, + width: handleSize, + height: handleSize, transition: `all ${token.switchDuration} ease-in-out`, '&::before': { @@ -149,16 +212,16 @@ const genSwitchHandleStyle: GenerateStyle = (token) => { insetInlineEnd: 0, bottom: 0, insetInlineStart: 0, - backgroundColor: token.colorWhite, - borderRadius: token.switchPinSize / 2, - boxShadow: token.switchHandleShadow, + backgroundColor: handleBg, + borderRadius: handleSize / 2, + boxShadow: handleShadow, transition: `all ${token.switchDuration} ease-in-out`, content: '""', }, }, [`&${componentCls}-checked ${switchHandleCls}`]: { - insetInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding}px)`, + insetInlineStart: `calc(100% - ${handleSize + trackPadding}px)`, }, [`&:not(${componentCls}-disabled):active`]: motion @@ -180,7 +243,8 @@ const genSwitchHandleStyle: GenerateStyle = (token) => { }; const genSwitchInnerStyle: GenerateStyle = (token) => { - const { componentCls } = token; + const { componentCls, trackHeight, trackPadding, innerMinMargin, innerMaxMargin, handleSize } = + token; const switchInnerCls = `${componentCls}-inner`; return { @@ -190,8 +254,8 @@ const genSwitchInnerStyle: GenerateStyle = (token) => { overflow: 'hidden', borderRadius: 100, height: '100%', - paddingInlineStart: token.switchInnerMarginMax, - paddingInlineEnd: token.switchInnerMarginMin, + paddingInlineStart: innerMaxMargin, + paddingInlineEnd: innerMinMargin, transition: `padding-inline-start ${token.switchDuration} ease-in-out, padding-inline-end ${token.switchDuration} ease-in-out`, [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: { @@ -203,35 +267,35 @@ const genSwitchInnerStyle: GenerateStyle = (token) => { }, [`${switchInnerCls}-checked`]: { - marginInlineStart: `calc(-100% + ${token.switchPinSize + token.switchPadding * 2}px - ${ - token.switchInnerMarginMax * 2 + marginInlineStart: `calc(-100% + ${handleSize + trackPadding * 2}px - ${ + innerMaxMargin * 2 }px)`, - marginInlineEnd: `calc(100% - ${token.switchPinSize + token.switchPadding * 2}px + ${ - token.switchInnerMarginMax * 2 + marginInlineEnd: `calc(100% - ${handleSize + trackPadding * 2}px + ${ + innerMaxMargin * 2 }px)`, }, [`${switchInnerCls}-unchecked`]: { - marginTop: -token.switchHeight, + marginTop: -trackHeight, marginInlineStart: 0, marginInlineEnd: 0, }, }, [`&${componentCls}-checked ${switchInnerCls}`]: { - paddingInlineStart: token.switchInnerMarginMin, - paddingInlineEnd: token.switchInnerMarginMax, + paddingInlineStart: innerMinMargin, + paddingInlineEnd: innerMaxMargin, [`${switchInnerCls}-checked`]: { marginInlineStart: 0, marginInlineEnd: 0, }, [`${switchInnerCls}-unchecked`]: { - marginInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding * 2}px + ${ - token.switchInnerMarginMax * 2 + marginInlineStart: `calc(100% - ${handleSize + trackPadding * 2}px + ${ + innerMaxMargin * 2 }px)`, - marginInlineEnd: `calc(-100% + ${token.switchPinSize + token.switchPadding * 2}px - ${ - token.switchInnerMarginMax * 2 + marginInlineEnd: `calc(-100% + ${handleSize + trackPadding * 2}px - ${ + innerMaxMargin * 2 }px)`, }, }, @@ -239,15 +303,15 @@ const genSwitchInnerStyle: GenerateStyle = (token) => { [`&:not(${componentCls}-disabled):active`]: { [`&:not(${componentCls}-checked) ${switchInnerCls}`]: { [`${switchInnerCls}-unchecked`]: { - marginInlineStart: token.switchPadding * 2, - marginInlineEnd: -token.switchPadding * 2, + marginInlineStart: trackPadding * 2, + marginInlineEnd: -trackPadding * 2, }, }, [`&${componentCls}-checked ${switchInnerCls}`]: { [`${switchInnerCls}-checked`]: { - marginInlineStart: -token.switchPadding * 2, - marginInlineEnd: token.switchPadding * 2, + marginInlineStart: -trackPadding * 2, + marginInlineEnd: trackPadding * 2, }, }, }, @@ -256,7 +320,7 @@ const genSwitchInnerStyle: GenerateStyle = (token) => { }; const genSwitchStyle = (token: SwitchToken): CSSObject => { - const { componentCls } = token; + const { componentCls, trackHeight, trackMinWidth } = token; return { [componentCls]: { @@ -265,9 +329,9 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => { position: 'relative', display: 'inline-block', boxSizing: 'border-box', - minWidth: token.switchMinWidth, - height: token.switchHeight, - lineHeight: `${token.switchHeight}px`, + minWidth: trackMinWidth, + height: trackHeight, + lineHeight: `${trackHeight}px`, verticalAlign: 'middle', background: token.colorTextQuaternary, border: '0', @@ -309,48 +373,57 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => { }; // ============================== Export ============================== -export default genComponentStyleHook('Switch', (token) => { - const switchHeight = token.fontSize * token.lineHeight; - const switchHeightSM = token.controlHeight / 2; - const switchPadding = 2; // This is magic - const switchPinSize = switchHeight - switchPadding * 2; - const switchPinSizeSM = switchHeightSM - switchPadding * 2; - - const switchToken = mergeToken(token, { - switchMinWidth: switchPinSize * 2 + switchPadding * 4, - switchHeight, - switchDuration: token.motionDurationMid, - switchColor: token.colorPrimary, - switchDisabledOpacity: token.opacityLoading, - switchInnerMarginMin: switchPinSize / 2, - switchInnerMarginMax: switchPinSize + switchPadding + switchPadding * 2, - switchPadding, - switchPinSize, - switchBg: token.colorBgContainer, - switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2, - switchHeightSM, - switchInnerMarginMinSM: switchPinSizeSM / 2, - switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + switchPadding * 2, - switchPinSizeSM, - switchHandleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`, - switchLoadingIconSize: token.fontSizeIcon * 0.75, - switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`, - switchHandleActiveInset: '-30%', - }); - - return [ - genSwitchStyle(switchToken), - - // inner style - genSwitchInnerStyle(switchToken), - - // handle style - genSwitchHandleStyle(switchToken), - - // loading style - genSwitchLoadingStyle(switchToken), - - // small style - genSwitchSmallStyle(switchToken), - ]; -}); +export default genComponentStyleHook( + 'Switch', + (token) => { + const switchToken = mergeToken(token, { + switchDuration: token.motionDurationMid, + switchColor: token.colorPrimary, + switchDisabledOpacity: token.opacityLoading, + switchLoadingIconSize: token.fontSizeIcon * 0.75, + switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`, + switchHandleActiveInset: '-30%', + }); + + return [ + genSwitchStyle(switchToken), + + // inner style + genSwitchInnerStyle(switchToken), + + // handle style + genSwitchHandleStyle(switchToken), + + // loading style + genSwitchLoadingStyle(switchToken), + + // small style + genSwitchSmallStyle(switchToken), + ]; + }, + (token) => { + const { fontSize, lineHeight, controlHeight, colorWhite } = token; + + const height = fontSize * lineHeight; + const heightSM = controlHeight / 2; + const padding = 2; // Fixed value + const handleSize = height - padding * 2; + const handleSizeSM = heightSM - padding * 2; + + return { + trackHeight: height, + trackHeightSM: heightSM, + trackMinWidth: handleSize * 2 + padding * 4, + trackMinWidthSM: handleSizeSM * 2 + padding * 2, + trackPadding: padding, // Fixed value + handleBg: colorWhite, + handleSize, + handleSizeSM, + handleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`, + innerMinMargin: handleSize / 2, + innerMaxMargin: handleSize + padding + padding * 2, + innerMinMarginSM: handleSizeSM / 2, + innerMaxMarginSM: handleSizeSM + padding + padding * 2, + }; + }, +); diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 94904fc3ddef..b035cecedb64 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -46,6 +46,7 @@ import type { ComponentToken as SpaceComponentToken } from '../../space/style'; import type { ComponentToken as SpinComponentToken } from '../../spin/style'; import type { ComponentToken as StatisticComponentToken } from '../../statistic/style'; import type { ComponentToken as StepsComponentToken } from '../../steps/style'; +import type { ComponentToken as SwitchComponentToken } from '../../switch/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'; @@ -99,7 +100,7 @@ export interface ComponentTokenMap { Slider?: SliderComponentToken; Spin?: SpinComponentToken; Statistic?: StatisticComponentToken; - Switch?: {}; + Switch?: SwitchComponentToken; Tag?: TagComponentToken; Tree?: {}; TreeSelect?: {}; diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 2deb35b6de37..6918d0189b47 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -630,7 +630,24 @@ export default App; | `@steps-vertical-tail-width` | - | Deprecated | | `@steps-vertical-tail-width-sm` | - | Deprecated | - +### Switch + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@switch-height` | `trackHeight` | - | +| `@switch-sm-height` | `trackHeightSM` | - | +| `@switch-min-width` | `trackMinWidth` | - | +| `@switch-sm-min-width` | `trackMinWidthSM` | - | +| `@switch-disabled-opacity` | `opacityLoading` | Global Token | +| `@switch-color` | `colorPrimary` | Global Token | +| `@switch-bg` | `handleBg` | - | +| `@switch-shadow-color` | `handleShadow` | Control `box-shadow`, not only shadow color | +| `@switch-padding` | `trackPadding` | - | +| `@switch-inner-margin-min` | `innerMinMargin` | - | +| `@switch-inner-margin-max` | `innerMaxMargin` | - | +| `@switch-sm-inner-margin-min` | `innerMinMarginSM` | - | +| `@switch-sm-inner-margin-max` | `innerMaxMarginSM` | - | ### Table diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 5e70890fe1a2..ad35eeb528fb 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -628,7 +628,24 @@ Mentions 提及 | `@steps-vertical-tail-width` | - | 已废弃 | | `@steps-vertical-tail-width-sm` | - | 已废弃 | - +### Switch 开关 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@switch-height` | `trackHeight` | - | +| `@switch-sm-height` | `trackHeightSM` | - | +| `@switch-min-width` | `trackMinWidth` | - | +| `@switch-sm-min-width` | `trackMinWidthSM` | - | +| `@switch-disabled-opacity` | `opacityLoading` | 全局 Token | +| `@switch-color` | `colorPrimary` | 全局 Token | +| `@switch-bg` | `handleBg` | - | +| `@switch-shadow-color` | `handleShadow` | 控制把手阴影，不仅是颜色 | +| `@switch-padding` | `trackPadding` | - | +| `@switch-inner-margin-min` | `innerMinMargin` | - | +| `@switch-inner-margin-max` | `innerMaxMargin` | - | +| `@switch-sm-inner-margin-min` | `innerMinMarginSM` | - | +| `@switch-sm-inner-margin-max` | `innerMaxMarginSM` | - | ### Table 表格 From 947ea38325812ad0194800cc7c57db946f8ab210 Mon Sep 17 00:00:00 2001 From: Grant Chan <877881506@qq.com> Date: Wed, 16 Aug 2023 20:14:32 +0800 Subject: [PATCH 040/318] fix(Button): fix fontSizeSM token not working (#44217) Co-authored-by: Grant Chan --- components/button/style/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/button/style/index.ts b/components/button/style/index.ts index fd0dd3c2fe23..f7cfd3a0b466 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -604,6 +604,7 @@ const genSizeBaseButtonStyle: GenerateStyle = (token) => genSizeBut const genSizeSmallButtonStyle: GenerateStyle = (token) => { const smallToken = mergeToken(token, { controlHeight: token.controlHeightSM, + fontSize: token.fontSizeSM, padding: token.paddingXS, buttonPaddingHorizontal: token.paddingInlineSM, // Fixed padding borderRadius: token.borderRadiusSM, @@ -694,5 +695,6 @@ export default genComponentStyleHook( defaultBg: token.colorBgContainer, defaultBorderColor: token.colorBorder, defaultBorderColorDisabled: token.colorBorder, + fontSizeSM: token.fontSize, }), ); From 9ba9da244ada53338d7d42589707f9f3804a66dd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=8B=9F=E5=9F=B9=E7=83=9C?= <2021211067@stu.hit.edu.cn> Date: Wed, 16 Aug 2023 20:45:39 +0800 Subject: [PATCH 041/318] fix: ColorPicker HEX input cursor jump bug (#44137) * fix(color-picker): when inputting in the HEX,if you input a lowercase letter,the cursor will jump to the tail,and me fixed it. * test: fix ColorPicker snapshot --------- Co-authored-by: afc163 --- .../__snapshots__/demo-extend.test.ts.snap | 44 +++++++++---------- .../__snapshots__/index.test.tsx.snap | 4 +- .../color-picker/components/ColorHexInput.tsx | 2 +- components/color-picker/style/input.ts | 1 + 4 files changed, 26 insertions(+), 25 deletions(-) diff --git a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap index 46c42fd96141..717c27014ec1 100644 --- a/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/color-picker/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -296,7 +296,7 @@ Array [
@@ -680,7 +680,7 @@ Array [
@@ -1066,7 +1066,7 @@ exports[`renders components/color-picker/demo/change-completed.tsx extend contex @@ -1450,7 +1450,7 @@ Array [ @@ -1839,7 +1839,7 @@ Array [ @@ -2202,7 +2202,7 @@ Array [ @@ -2530,7 +2530,7 @@ exports[`renders components/color-picker/demo/format.tsx extend context correctl @@ -4222,7 +4222,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co @@ -5055,7 +5055,7 @@ exports[`renders components/color-picker/demo/panel-render.tsx extend context co @@ -5446,7 +5446,7 @@ Array [ @@ -6207,7 +6207,7 @@ exports[`renders components/color-picker/demo/pure-panel.tsx extend context corr @@ -6605,7 +6605,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -6987,7 +6987,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -7368,7 +7368,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -7763,7 +7763,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8150,7 +8150,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8536,7 +8536,7 @@ exports[`renders components/color-picker/demo/size.tsx extend context correctly @@ -8934,7 +8934,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -9323,7 +9323,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -9728,7 +9728,7 @@ exports[`renders components/color-picker/demo/text-render.tsx extend context cor @@ -10110,7 +10110,7 @@ Array [ @@ -10494,7 +10494,7 @@ Array [ diff --git a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap index d81f2ecdf702..abf3be3921fa 100644 --- a/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/color-picker/__tests__/__snapshots__/index.test.tsx.snap @@ -216,7 +216,7 @@ exports[`ColorPicker Should panelRender work 1`] = ` @@ -505,7 +505,7 @@ exports[`ColorPicker Should panelRender work 2`] = ` diff --git a/components/color-picker/components/ColorHexInput.tsx b/components/color-picker/components/ColorHexInput.tsx index f98bf6520fa1..92130806c76d 100644 --- a/components/color-picker/components/ColorHexInput.tsx +++ b/components/color-picker/components/ColorHexInput.tsx @@ -37,7 +37,7 @@ const ColorHexInput: FC = ({ prefixCls, value, onChange }) = return ( = (token) => { padding: `0 ${paddingXS}px`, [`${antCls}-input`]: { fontSize: fontSizeSM, + textTransform: 'uppercase', lineHeight: `${controlHeightSM - 2 * lineWidth}px`, }, [`${antCls}-input-prefix`]: { From 808452e49d6f4e61a3d09bfa910d1503bae8a852 Mon Sep 17 00:00:00 2001 From: AN <455454007@qq.com> Date: Thu, 17 Aug 2023 13:15:26 +0800 Subject: [PATCH 042/318] fix(DataPicker):fix picker content is not centered (#44245) * Update index.ts fix(DataPicker):fix picker content is not centered Signed-off-by: AN <455454007@qq.com> * fix(DataPicker):fix picker content is not centered Signed-off-by: AN <455454007@qq.com> --------- Signed-off-by: AN <455454007@qq.com> --- components/date-picker/style/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 8eda2d030c94..62ef3f039d5b 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -807,6 +807,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { th: { width: pickerPanelCellWidth, + boxSizing: 'border-box', + padding: 0, }, }, }, From 27e54c9e97376053da66e23751e8083b1954e796 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 17 Aug 2023 13:51:39 +0800 Subject: [PATCH 043/318] feat: Button support contentFontSize token (#44257) * feat: Button support contentFontSize token * fix: token --- components/button/style/index.ts | 31 ++++++++++++++++++++++++++----- 1 file changed, 26 insertions(+), 5 deletions(-) diff --git a/components/button/style/index.ts b/components/button/style/index.ts index f7cfd3a0b466..1ad770149b9a 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -119,10 +119,24 @@ export interface ComponentToken { * @descEN Background color of text button when hover */ textHoverBg: string; + /** + * @desc 按钮内容字体大小 + * @descEN Font size of button content + */ + contentFontSize: number; + /** + * @desc 大号按钮内容字体大小 + * @descEN Font size of large button content + */ + contentFontSizeLG: number; + /** + * @desc 小号按钮内容字体大小 + * @descEN Font size of small button content + */ + contentFontSizeSM: number; } export interface ButtonToken extends FullToken<'Button'> { - colorOutlineDefault: string; buttonPaddingHorizontal: CSSProperties['paddingInline']; buttonIconOnlyFontSize: number; } @@ -599,12 +613,17 @@ const genSizeButtonStyle = (token: ButtonToken, sizePrefixCls: string = ''): CSS ]; }; -const genSizeBaseButtonStyle: GenerateStyle = (token) => genSizeButtonStyle(token); +const genSizeBaseButtonStyle: GenerateStyle = (token) => + genSizeButtonStyle( + mergeToken(token, { + fontSize: token.contentFontSize, + }), + ); const genSizeSmallButtonStyle: GenerateStyle = (token) => { const smallToken = mergeToken(token, { controlHeight: token.controlHeightSM, - fontSize: token.fontSizeSM, + fontSize: token.contentFontSizeSM, padding: token.paddingXS, buttonPaddingHorizontal: token.paddingInlineSM, // Fixed padding borderRadius: token.borderRadiusSM, @@ -617,7 +636,7 @@ const genSizeSmallButtonStyle: GenerateStyle = (token) => { const genSizeLargeButtonStyle: GenerateStyle = (token) => { const largeToken = mergeToken(token, { controlHeight: token.controlHeightLG, - fontSize: token.fontSizeLG, + fontSize: token.contentFontSizeLG, buttonPaddingHorizontal: token.paddingInlineLG, borderRadius: token.borderRadiusLG, buttonIconOnlyFontSize: token.onlyIconSizeLG, @@ -695,6 +714,8 @@ export default genComponentStyleHook( defaultBg: token.colorBgContainer, defaultBorderColor: token.colorBorder, defaultBorderColorDisabled: token.colorBorder, - fontSizeSM: token.fontSize, + contentFontSize: token.fontSize, + contentFontSizeSM: token.fontSize, + contentFontSizeLG: token.fontSizeLG, }), ); From cdc4e508738d1e2cc0ff25d731d9c854e0248c8f Mon Sep 17 00:00:00 2001 From: "@linhf2023" <32009993+linhf123@users.noreply.github.com> Date: Thu, 17 Aug 2023 15:00:04 +0800 Subject: [PATCH 044/318] feat: migrate less to token for Alert (#42142) * feat: migrate less to token for Alert * fix: lint * feat(alert): add component token demo * test: add snap * Update docs/react/migrate-less-variables.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> * feat(alert): update token name * feat(alert): update demo * feat: update snap * doc: update migrate * chore: code clean * feat: alert token * chore: code clean * chore: fix lint --------- Co-authored-by: @linhf2023 <32009993+any1024@users.noreply.github.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .../alert/__tests__/demo-extend.test.ts | 2 +- components/alert/__tests__/demo.test.ts | 2 +- components/alert/demo/component-token.md | 7 ++ components/alert/demo/component-token.tsx | 28 ++++++++ components/alert/index.en-US.md | 1 + components/alert/index.zh-CN.md | 1 + components/alert/style/index.ts | 68 ++++++++++++------- docs/react/migrate-less-variables.en-US.md | 30 +++++++- docs/react/migrate-less-variables.zh-CN.md | 30 +++++++- 9 files changed, 140 insertions(+), 29 deletions(-) create mode 100644 components/alert/demo/component-token.md create mode 100644 components/alert/demo/component-token.tsx diff --git a/components/alert/__tests__/demo-extend.test.ts b/components/alert/__tests__/demo-extend.test.ts index 1bc1fb586944..e8239ae80a13 100644 --- a/components/alert/__tests__/demo-extend.test.ts +++ b/components/alert/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('alert', { skip: ['loop-banner.tsx'] }); +extendTest('alert', { skip: ['loop-banner.tsx', 'component-token.tsx'] }); diff --git a/components/alert/__tests__/demo.test.ts b/components/alert/__tests__/demo.test.ts index 07b6d8ed6a91..297254360ad5 100644 --- a/components/alert/__tests__/demo.test.ts +++ b/components/alert/__tests__/demo.test.ts @@ -1,3 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('alert', { skip: ['loop-banner.tsx'] }); +demoTest('alert', { skip: ['loop-banner.tsx', 'component-token.tsx'] }); diff --git a/components/alert/demo/component-token.md b/components/alert/demo/component-token.md new file mode 100644 index 000000000000..135a6b277037 --- /dev/null +++ b/components/alert/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +自定义组件 Token。 + +## en-US + +Custom component token. diff --git a/components/alert/demo/component-token.tsx b/components/alert/demo/component-token.tsx new file mode 100644 index 000000000000..4e9af03e5204 --- /dev/null +++ b/components/alert/demo/component-token.tsx @@ -0,0 +1,28 @@ +import { SmileOutlined } from '@ant-design/icons'; +import React from 'react'; +import { Alert, ConfigProvider } from 'antd'; + +const icon = ; + +const App: React.FC = () => ( + + + +); + +export default App; diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md index f8b0b5dcc84e..2f58fc22d9b1 100644 --- a/components/alert/index.en-US.md +++ b/components/alert/index.en-US.md @@ -31,6 +31,7 @@ Alert component for feedback. ErrorBoundary Custom Icon Custom action +Component Token ## API diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md index 4bfa12cd5ae6..92819c29d374 100644 --- a/components/alert/index.zh-CN.md +++ b/components/alert/index.zh-CN.md @@ -32,6 +32,7 @@ group: React 错误处理 自定义图标 操作 +组件 Token ## API diff --git a/components/alert/style/index.ts b/components/alert/style/index.ts index 74628f09ae94..37267a5156e3 100644 --- a/components/alert/style/index.ts +++ b/components/alert/style/index.ts @@ -1,13 +1,30 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; +import type { CSSProperties } from 'react'; import { resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook, mergeToken } from '../../theme/internal'; - -export interface ComponentToken {} +import { genComponentStyleHook } from '../../theme/internal'; + +export interface ComponentToken { + // Component token here + /** + * @desc 默认内间距 + * @descEN Default padding + */ + defaultPadding: CSSProperties['padding']; + /** + * @desc 带有描述的内间距 + * @descEN Padding with description + */ + withDescriptionPadding: CSSProperties['padding']; + /** + * @desc 带有描述时的图标尺寸 + * @descEN Icon size with description + */ + withDescriptionIconSize: number; +} type AlertToken = FullToken<'Alert'> & { - alertIconSizeLG: number; - alertPaddingHorizontal: number; + // Custom token here }; const genAlertTypeStyle = ( @@ -35,13 +52,11 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO lineHeight, borderRadiusLG: borderRadius, motionEaseInOutCirc, - alertIconSizeLG, + withDescriptionIconSize, colorText, - paddingContentVerticalSM, - alertPaddingHorizontal, - paddingMD, - paddingContentHorizontalLG, colorTextHeading, + withDescriptionPadding, + defaultPadding, } = token; return { @@ -50,7 +65,7 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO position: 'relative', display: 'flex', alignItems: 'center', - padding: `${paddingContentVerticalSM}px ${alertPaddingHorizontal}px`, // Fixed horizontal padding here. + padding: defaultPadding, wordWrap: 'break-word', borderRadius, @@ -75,7 +90,7 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO }, '&-message': { - color: colorText, + color: colorTextHeading, }, [`&${componentCls}-motion-leave`]: { @@ -97,12 +112,11 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO [`${componentCls}-with-description`]: { alignItems: 'flex-start', - paddingInline: paddingContentHorizontalLG, - paddingBlock: paddingMD, + padding: withDescriptionPadding, [`${componentCls}-icon`]: { marginInlineEnd: marginSM, - fontSize: alertIconSizeLG, + fontSize: withDescriptionIconSize, lineHeight: 0, }, @@ -115,6 +129,7 @@ export const genBaseStyle: GenerateStyle = (token: AlertToken): CSSO [`${componentCls}-description`]: { display: 'block', + color: colorText, }, }, @@ -229,13 +244,16 @@ export const genAlertStyle: GenerateStyle = (token: AlertToken): CSS genActionStyle(token), ]; -export default genComponentStyleHook('Alert', (token) => { - const { fontSizeHeading3 } = token; - - const alertToken = mergeToken(token, { - alertIconSizeLG: fontSizeHeading3, - alertPaddingHorizontal: 12, // Fixed value here. - }); - - return [genAlertStyle(alertToken)]; -}); +export default genComponentStyleHook( + 'Alert', + (token) => [genAlertStyle(token)], + (token) => { + const paddingHorizontal = 12; // Fixed value here. + + return { + withDescriptionIconSize: token.fontSizeHeading3, + defaultPadding: `${token.paddingContentVerticalSM}px ${paddingHorizontal}px`, + withDescriptionPadding: `${token.paddingMD}px ${token.paddingContentHorizontalLG}px`, + }; + }, +); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 6918d0189b47..b55c417c505d 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -42,7 +42,35 @@ export default App; ## Component Token - +## Alert + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@alert-success-border-color` | `colorSuccessBorder` | Global token | +| `@alert-success-bg-color` | `colorSuccessBg` | Global token | +| `@alert-success-icon-color` | `colorSuccess` | Global token | +| `@alert-info-border-color` | `colorInfoBorder` | Global token | +| `@alert-info-bg-color` | `colorInfoBg` | Global token | +| `@alert-info-icon-color` | `colorInfo` | Global token | +| `@alert-warning-border-color` | `colorWarningBorder` | Global token | +| `@alert-warning-bg-color` | `colorWarningBg` | Global token | +| `@alert-warning-icon-color` | `colorWarning` | Global token | +| `@alert-error-border-color` | `colorErrorBorder` | Global token | +| `@alert-error-bg-color` | `colorErrorBg` | Global token | +| `@alert-error-icon-color` | `colorError` | Global token | +| `@alert-message-color` | `colorTextHeading` | Global token | +| `@alert-text-color` | `colorText` | Global Token | +| `@alert-close-color` | `colorIcon` | Global token | +| `@alert-close-hover-color` | `colorIconHover` | Global token | +| `@alert-padding-vertical` | `defaultPadding` | Control the whole padding | +| `@alert-padding-horizontal` | `defaultPadding` | Control the whole padding | +| `@alert-no-icon-padding-vertical` | - | Deprecated | +| `@alert-with-description-no-icon-padding-vertical` | `withDescriptionPadding` | Control the whole padding | +| `@alert-with-description-padding-vertical` | `withDescriptionPadding` | Control the whole padding | +| `@alert-with-description-padding` | `withDescriptionPadding` | Control the whole padding | +| `@alert-icon-top` | - | Deprecated | +| `@alert-with-description-icon-size` | `withDescriptionIconSize` | - | ### Anchor diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index ad35eeb528fb..dbb89a7ec671 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -42,7 +42,35 @@ export default App; ## 组件变量 - +## Alert 警告提示 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@alert-success-border-color` | `colorSuccessBorder` | 全局 token | +| `@alert-success-bg-color` | `colorSuccessBg` | 全局 token | +| `@alert-success-icon-color` | `colorSuccess` | 全局 token | +| `@alert-info-border-color` | `colorInfoBorder` | 全局 token | +| `@alert-info-bg-color` | `colorInfoBg` | 全局 token | +| `@alert-info-icon-color` | `colorInfo` | 全局 token | +| `@alert-warning-border-color` | `colorWarningBorder` | 全局 token | +| `@alert-warning-bg-color` | `colorWarningBg` | 全局 token | +| `@alert-warning-icon-color` | `colorWarning` | 全局 token | +| `@alert-error-border-color` | `colorErrorBorder` | 全局 token | +| `@alert-error-bg-color` | `colorErrorBg` | 全局 token | +| `@alert-error-icon-color` | `colorError` | 全局 token | +| `@alert-message-color` | `colorTextHeading` | 全局 token | +| `@alert-text-color` | `colorText` | 全局 Token | +| `@alert-close-color` | `colorIcon` | 全局 token | +| `@alert-close-hover-color` | `colorIconHover` | 全局 token | +| `@alert-padding-vertical` | `defaultPadding` | 统一控制 | +| `@alert-padding-horizontal` | `defaultPadding` | 统一控制 | +| `@alert-no-icon-padding-vertical` | - | 已废弃 | +| `@alert-with-description-no-icon-padding-vertical` | `withDescriptionPadding` | 统一控制 | +| `@alert-with-description-padding-vertical` | `withDescriptionPadding` | 统一控制 | +| `@alert-with-description-padding` | `withDescriptionPadding` | 统一控制 | +| `@alert-icon-top` | - | 已废弃 | +| `@alert-with-description-icon-size` | `withDescriptionIconSize` | - | ### Anchor 锚点 From 030f38594cd4bf10cd749c31da5b19f5c103b6a3 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 17 Aug 2023 15:03:23 +0800 Subject: [PATCH 045/318] feat: cascader token (#44261) * feat: cascader token * docs: en --- components/cascader/style/index.ts | 57 +++++++++++++++++----- docs/react/migrate-less-variables.en-US.md | 14 +++++- docs/react/migrate-less-variables.zh-CN.md | 14 +++++- 3 files changed, 70 insertions(+), 15 deletions(-) diff --git a/components/cascader/style/index.ts b/components/cascader/style/index.ts index 319f2e6b1ada..fd9f46bf9e36 100644 --- a/components/cascader/style/index.ts +++ b/components/cascader/style/index.ts @@ -1,3 +1,4 @@ +import type { CSSProperties } from 'react'; import { getStyle as getCheckboxStyle } from '../../checkbox/style'; import { textEllipsis } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; @@ -20,6 +21,26 @@ export interface ComponentToken { * @descEN Height of dropdown */ dropdownHeight: number; + /** + * @desc 选项选中时背景色 + * @descEN Background color of selected item + */ + optionSelectedBg: string; + /** + * @desc 选项选中时字重 + * @descEN Font weight of selected item + */ + optionSelectedFontWeight: CSSProperties['fontWeight']; + /** + * @desc 选项内间距 + * @descEN Padding of menu item + */ + optionPadding: CSSProperties['padding']; + /** + * @desc 选项菜单（单列）内间距 + * @descEN Padding of menu item (single column) + */ + menuPadding: CSSProperties['padding']; } type CascaderToken = FullToken<'Cascader'>; @@ -33,10 +54,6 @@ const genBaseStyle: GenerateStyle = (token) => { ${cascaderMenuItemCls}-loading-icon `; - const itemPaddingVertical = Math.round( - (token.controlHeight - token.fontSize * token.lineHeight) / 2, - ); - return [ // ===================================================== // == Control == @@ -91,7 +108,7 @@ const genBaseStyle: GenerateStyle = (token) => { minWidth: token.controlItemWidth, height: token.dropdownHeight, margin: 0, - padding: token.paddingXXS, + padding: token.menuPadding, overflow: 'auto', verticalAlign: 'top', listStyle: 'none', @@ -106,7 +123,7 @@ const genBaseStyle: GenerateStyle = (token) => { display: 'flex', flexWrap: 'nowrap', alignItems: 'center', - padding: `${itemPaddingVertical}px ${token.paddingSM}px`, + padding: token.optionPadding, lineHeight: token.lineHeight, cursor: 'pointer', transition: `all ${token.motionDurationMid}`, @@ -130,8 +147,8 @@ const genBaseStyle: GenerateStyle = (token) => { [`&-active:not(${cascaderMenuItemCls}-disabled)`]: { [`&, &:hover`]: { - fontWeight: token.fontWeightStrong, - backgroundColor: token.controlItemBgActive, + fontWeight: token.optionSelectedFontWeight, + backgroundColor: token.optionSelectedBg, }, }, @@ -170,8 +187,22 @@ const genBaseStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Cascader', (token) => [genBaseStyle(token)], { - controlWidth: 184, - controlItemWidth: 111, - dropdownHeight: 180, -}); +export default genComponentStyleHook( + 'Cascader', + (token) => [genBaseStyle(token)], + (token) => { + const itemPaddingVertical = Math.round( + (token.controlHeight - token.fontSize * token.lineHeight) / 2, + ); + + return { + controlWidth: 184, + controlItemWidth: 111, + dropdownHeight: 180, + optionSelectedBg: token.controlItemBgActive, + optionSelectedFontWeight: token.fontWeightStrong, + optionPadding: `${itemPaddingVertical}px ${token.paddingSM}px`, + menuPadding: token.paddingXXS, + }; + }, +); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index b55c417c505d..2c2f5e6da571 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -227,7 +227,19 @@ export default App; | `@carousel-dot-height` | `dotHeight` | - | | `@carousel-dot-active-width` | `dotActiveWidth` | - | - +### Cascader + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@cascader-bg` | - | Deprecated | +| `@cascader-item-selected-bg` | `optionSelectedBg` | - | +| `@cascader-menu-bg` | - | Deprecated | +| `@cascader-menu-border-color-split` | `colorSplit` | Global Token | +| `@cascader-dropdown-vertical-padding` | `optionPadding` | - | +| `@cascader-dropdown-edge-child-vertical-padding` | `menuPadding` | - | +| `@cascader-dropdown-font-size` | - | Deprecated | +| `@cascader-dropdown-line-height` | `lineHeight` | Global Token | diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index dbb89a7ec671..0a538643c205 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -227,7 +227,19 @@ export default App; | `@carousel-dot-height` | `dotHeight` | - | | `@carousel-dot-active-width` | `dotActiveWidth` | - | - +### Cascader 级联选择 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@cascader-bg` | - | 已废弃 | +| `@cascader-item-selected-bg` | `optionSelectedBg` | - | +| `@cascader-menu-bg` | - | 已废弃 | +| `@cascader-menu-border-color-split` | `colorSplit` | 全局 Token | +| `@cascader-dropdown-vertical-padding` | `optionPadding` | - | +| `@cascader-dropdown-edge-child-vertical-padding` | `menuPadding` | - | +| `@cascader-dropdown-font-size` | - | 已废弃 | +| `@cascader-dropdown-line-height` | `lineHeight` | 全局 Token | ### Checkbox 多选框 From f1c38bf9e0e92c02694247a09ca5424c6bab8c4f 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: Thu, 17 Aug 2023 17:12:51 +0800 Subject: [PATCH 046/318] site(Calendar): add lunar calendar demo (#44166) * feat: update demo * feat: update demo * feat: update demo * feat: update demo * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code --- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../calendar/__tests__/demo-extend.test.ts | 2 +- components/calendar/__tests__/demo.test.ts | 1 + components/calendar/demo/basic.tsx | 4 +- components/calendar/demo/card.tsx | 4 +- components/calendar/demo/component-token.tsx | 4 +- components/calendar/demo/customize-header.tsx | 4 +- components/calendar/demo/lunar.md | 7 + components/calendar/demo/lunar.tsx | 233 ++++++++++++++++++ components/calendar/demo/notice-calendar.tsx | 7 +- components/calendar/index.en-US.md | 1 + components/calendar/index.zh-CN.md | 1 + package.json | 1 + 14 files changed, 258 insertions(+), 15 deletions(-) create mode 100644 components/calendar/demo/lunar.md create mode 100644 components/calendar/demo/lunar.tsx diff --git a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap index 410db2eea5c1..69a258a0a8b4 100644 --- a/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -9282,7 +9282,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx extend context cor - This is very long usual event。。.... + This is very long usual event...... diff --git a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap index 8c6ffc118b29..6d3ec9a8624d 100644 --- a/components/calendar/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/calendar/__tests__/__snapshots__/demo.test.ts.snap @@ -5418,7 +5418,7 @@ exports[`renders components/calendar/demo/notice-calendar.tsx correctly 1`] = ` - This is very long usual event。。.... + This is very long usual event...... diff --git a/components/calendar/__tests__/demo-extend.test.ts b/components/calendar/__tests__/demo-extend.test.ts index 943a699b5e64..d5dc6e118d5a 100644 --- a/components/calendar/__tests__/demo-extend.test.ts +++ b/components/calendar/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('calendar'); +extendTest('calendar', { skip: ['lunar.tsx'] }); diff --git a/components/calendar/__tests__/demo.test.ts b/components/calendar/__tests__/demo.test.ts index d8ead2ddc9d3..a29e22786fd0 100644 --- a/components/calendar/__tests__/demo.test.ts +++ b/components/calendar/__tests__/demo.test.ts @@ -5,4 +5,5 @@ demoTest('calendar', { testRootProps: { value: dayjs(), }, + skip: ['lunar.tsx'], }); diff --git a/components/calendar/demo/basic.tsx b/components/calendar/demo/basic.tsx index c95cd92fd37c..0255c4beceb6 100644 --- a/components/calendar/demo/basic.tsx +++ b/components/calendar/demo/basic.tsx @@ -1,10 +1,10 @@ import React from 'react'; import type { Dayjs } from 'dayjs'; import { Calendar } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; const App: React.FC = () => { - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/card.tsx b/components/calendar/demo/card.tsx index 2d4ea63e9328..aa08fc1690b6 100644 --- a/components/calendar/demo/card.tsx +++ b/components/calendar/demo/card.tsx @@ -1,9 +1,9 @@ import type { Dayjs } from 'dayjs'; import React from 'react'; import { Calendar, theme } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; -const onPanelChange = (value: Dayjs, mode: CalendarMode) => { +const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/component-token.tsx b/components/calendar/demo/component-token.tsx index 37629d39c613..90c3223d2fcb 100644 --- a/components/calendar/demo/component-token.tsx +++ b/components/calendar/demo/component-token.tsx @@ -1,11 +1,11 @@ import type { Dayjs } from 'dayjs'; import React from 'react'; import { Calendar, ConfigProvider } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; /** Test usage. Do not use in your production. */ export default () => { - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/customize-header.tsx b/components/calendar/demo/customize-header.tsx index 175150ba9375..4b969e0f33c1 100644 --- a/components/calendar/demo/customize-header.tsx +++ b/components/calendar/demo/customize-header.tsx @@ -4,14 +4,14 @@ import 'dayjs/locale/zh-cn'; import type { Dayjs } from 'dayjs'; import dayLocaleData from 'dayjs/plugin/localeData'; import { Calendar, Col, Radio, Row, Select, Typography, theme } from 'antd'; -import type { CalendarMode } from 'antd/es/calendar/generateCalendar'; +import type { CalendarProps } from 'antd'; dayjs.extend(dayLocaleData); const App: React.FC = () => { const { token } = theme.useToken(); - const onPanelChange = (value: Dayjs, mode: CalendarMode) => { + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { console.log(value.format('YYYY-MM-DD'), mode); }; diff --git a/components/calendar/demo/lunar.md b/components/calendar/demo/lunar.md new file mode 100644 index 000000000000..1e6f795fe0b1 --- /dev/null +++ b/components/calendar/demo/lunar.md @@ -0,0 +1,7 @@ +## zh-CN + +展示农历、节气等信息。 + +## en-US + +Display lunar calendar, solar terms and other information. diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx new file mode 100644 index 000000000000..b5476d5f8968 --- /dev/null +++ b/components/calendar/demo/lunar.tsx @@ -0,0 +1,233 @@ +import dayjs, { type Dayjs } from 'dayjs'; +import React from 'react'; +import lunisolar from 'lunisolar'; +import zhCn from 'lunisolar/locale/zh-cn'; +import { createStyles } from 'antd-style'; +import classNames from 'classnames'; +import { Calendar, Col, Radio, Row, Select } from 'antd'; +import type { CalendarProps } from 'antd'; + +lunisolar.locale(zhCn); + +const useStyle = createStyles(({ token, css, cx }) => { + const lunar = css` + color: ${token.colorTextTertiary}; + font-size: ${token.fontSizeSM}px; + `; + return { + wrapper: css` + width: 400px; + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusOuter}; + padding: 5px; + `, + dateCell: css` + position: relative; + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + max-width: 40px; + max-height: 40px; + background: transparent; + transition: background 300ms; + border-radius: ${token.borderRadiusOuter}px; + border: 1px solid transparent; + box-sizing: border-box; + } + &:hover:before { + background: rgba(0, 0, 0, 0.04); + } + `, + today: css` + &:before { + border: 1px solid ${token.colorPrimary}; + } + `, + text: css` + position: relative; + z-index: 1; + `, + lunar, + current: css` + color: ${token.colorTextLightSolid}; + &:before { + background: ${token.colorPrimary}; + } + &:hover:before { + background: ${token.colorPrimary}; + opacity: .8; + } + .${cx(lunar)} { + color: ${token.colorTextLightSolid}; + opacity: .9; + } + `, + monthCell: css` + width: 120px; + color: ${token.colorTextBase}; + border-radius: ${token.borderRadiusOuter}px; + padding: 5px 0; + &:hover { + background: rgba(0, 0, 0, 0.04); + } + `, + monthCellCurrent: css` + color: ${token.colorTextLightSolid}; + background: ${token.colorPrimary}; + &:hover { + background: ${token.colorPrimary}; + opacity: .8; + } + `, + }; +}); + +const App: React.FC = () => { + const { styles } = useStyle({ test: true }); + + const [selectDate, setSelectDate] = React.useState(dayjs()); + + const onPanelChange = (value: Dayjs, mode: CalendarProps['mode']) => { + console.log(value.format('YYYY-MM-DD'), mode); + setSelectDate(value); + }; + + const onDateChange = (value: Dayjs) => { + setSelectDate(value); + }; + + const cellRender: CalendarProps['fullCellRender'] = (date, info) => { + const d = lunisolar(date.toDate()); + const lunar = d.lunar.getDayName(); + const solarTerm = d.solarTerm?.name; + if (info.type === 'date') { + return React.cloneElement(info.originNode, { + ...info.originNode.props, + className: classNames(styles.dateCell, { + [styles.current]: selectDate.isSame(date, 'date'), + [styles.today]: date.isSame(dayjs(), 'date'), + }), + children: ( +
+ {date.get('date')} + {info.type === 'date' &&
{solarTerm || lunar}
} +
+ ), + }); + } + + if (info.type === 'month') { + // Due to the fact that a solar month is part of the lunar month X and part of the lunar month X+1, + // when rendering a month, always take X as the lunar month of the month + const d2 = lunisolar(new Date(date.get('year'), date.get('month'))); + const month = d2.lunar.getMonthName(); + return ( +
+ {date.get('month') + 1}月（{month}） +
+ ); + } + }; + + const getYearLabel = (year: number) => { + const d = lunisolar(new Date(year + 1, 0)); + return `${year}年（${d.format('cYcZ年')}）`; + }; + + const getMonthLabel = (month: number, value: Dayjs) => { + const d = lunisolar(new Date(value.year(), month)); + const lunar = d.lunar.getMonthName(); + return `${month + 1}月（${lunar}）`; + }; + + return ( +
+ { + const start = 0; + const end = 12; + const monthOptions = []; + + let current = value.clone(); + const localeData = value.localeData(); + const months = []; + for (let i = 0; i < 12; i++) { + current = current.month(i); + months.push(localeData.monthsShort(current)); + } + + for (let i = start; i < end; i++) { + monthOptions.push({ + label: getMonthLabel(i, value), + value: i, + }); + } + + const year = value.year(); + const month = value.month(); + const options = []; + for (let i = year - 10; i < year + 10; i += 1) { + options.push({ + label: getYearLabel(i), + value: i, + }); + } + return ( + +
+ { + const now = value.clone().month(newMonth); + onChange(now); + }} + /> + + + onTypeChange(e.target.value)} + value={type} + > + 月 + 年 + + + + ); + }} + /> + + ); +}; + +export default App; diff --git a/components/calendar/demo/notice-calendar.tsx b/components/calendar/demo/notice-calendar.tsx index 3051372a8895..fbf6aa24bddb 100644 --- a/components/calendar/demo/notice-calendar.tsx +++ b/components/calendar/demo/notice-calendar.tsx @@ -1,7 +1,6 @@ import React from 'react'; import type { Dayjs } from 'dayjs'; -import type { CellRenderInfo } from 'rc-picker/lib/interface'; -import type { BadgeProps } from 'antd'; +import type { BadgeProps, CalendarProps } from 'antd'; import { Badge, Calendar } from 'antd'; const getListData = (value: Dayjs) => { @@ -23,7 +22,7 @@ const getListData = (value: Dayjs) => { case 15: listData = [ { type: 'warning', content: 'This is warning event' }, - { type: 'success', content: 'This is very long usual event。。....' }, + { type: 'success', content: 'This is very long usual event......' }, { type: 'error', content: 'This is error event 1.' }, { type: 'error', content: 'This is error event 2.' }, { type: 'error', content: 'This is error event 3.' }, @@ -65,7 +64,7 @@ const App: React.FC = () => { ); }; - const cellRender = (current: Dayjs, info: CellRenderInfo) => { + const cellRender: CalendarProps['cellRender'] = (current, info) => { if (info.type === 'date') return dateCellRender(current); if (info.type === 'month') return monthCellRender(current); return info.originNode; diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 61e71d774862..4480bc7fffb7 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -19,6 +19,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda Notice Calendar Card Selectable Calendar +Lunar Calendar Customize Header Component Token diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index c3cdb4730b96..592b5838cb65 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -20,6 +20,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA 通知事项日历 卡片模式 选择功能 +农历日历 自定义头部 组件 Token diff --git a/package.json b/package.json index db2ace7212dd..2617fa74c459 100644 --- a/package.json +++ b/package.json @@ -258,6 +258,7 @@ "jsonml.js": "^0.1.0", "lint-staged": "^14.0.0", "lodash": "^4.17.21", + "lunisolar": "^2.2.2", "lz-string": "^1.4.4", "mockdate": "^3.0.0", "node-notifier": "^10.0.1", From 2e18b63cec88037bec60f873c682b4248cdc91fb Mon Sep 17 00:00:00 2001 From: JiaQi <112228030+Yuiai01@users.noreply.github.com> Date: Thu, 17 Aug 2023 17:55:46 +0800 Subject: [PATCH 047/318] feat(list): list support using the componentSize configuration size from ConfigProvider (#44267) * feat(list): list support using the componentSize configuration size from ConfigProvider * chore: update snapshot --- .../__snapshots__/components.test.tsx.snap | 4 ++-- components/list/__tests__/index.test.tsx | 17 +++++++++++++++++ components/list/index.tsx | 7 +++++-- 3 files changed, 24 insertions(+), 4 deletions(-) diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 571042719a1b..04ae950c9ecf 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -17472,7 +17472,7 @@ exports[`ConfigProvider components List configProvider componentDisabled 1`] = ` exports[`ConfigProvider components List configProvider componentSize large 1`] = `
{ ); expect(container.querySelector('div.ant-list')?.getAttribute('locale')).toBe(null); }); + + it('should apply the componentSize of ConfigProvider', () => { + const { container } = render( + <> + + , + + + , + + , + ); + + expect(container.querySelector('.ant-list-sm')).toBeTruthy(); + expect(container.querySelector('.ant-list-lg')).toBeTruthy(); + }); }); diff --git a/components/list/index.tsx b/components/list/index.tsx index 4ce8fedb58fc..2548438db731 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -19,6 +19,7 @@ import Item from './Item'; // CSSINJS import { ListContext } from './context'; import useStyle from './style'; +import useSize from '../config-provider/hooks/useSize'; export type { ListItemMetaProps, ListItemProps } from './Item'; export type { ListConsumerProps } from './context'; @@ -83,7 +84,7 @@ function List({ loadMore, grid, dataSource = [], - size, + size: customizeSize, header, footer, loading = false, @@ -154,10 +155,12 @@ function List({ } const isLoading = loadingProp && loadingProp.spinning; + const mergedSize = useSize(customizeSize); + // large => lg // small => sm let sizeCls = ''; - switch (size) { + switch (mergedSize) { case 'large': sizeCls = 'lg'; break; From 3525966682ec137ce6b8e7610d6b9d3d418bd8af Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 17 Aug 2023 19:12:26 +0800 Subject: [PATCH 048/318] docs: Update faq.zh-CN.md (#44274) * docs: Update faq.zh-CN.md Signed-off-by: afc163 * Update faq.zh-CN.md Signed-off-by: afc163 --------- Signed-off-by: afc163 --- docs/react/faq.zh-CN.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md index 43fe3c03a93f..886b8d98d390 100644 --- a/docs/react/faq.zh-CN.md +++ b/docs/react/faq.zh-CN.md @@ -11,7 +11,7 @@ title: FAQ ## `undefined` 和 `null` 在 `antd` 的受控组件中有区别吗？ -**有。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。** +**有区别。antd 约定：`undefined` 是非受控的标志，`null` 作为显式的受控空值。** 在输入元素中，React 认为 `undefined` 和 `null` 都属于非受控的标志。当 `value` 由非空值转化为 `undefined` 或 `null` 时，组件不再受控，这通常是一些意外情况发生的原因。 @@ -107,12 +107,19 @@ antd 内部会对 props 进行浅比较实现性能优化。当状态变更， 有的，你可以访问 https://ant-design.antgroup.com/index-cn 或 https://ant-design.gitee.io/index-cn 。 -历史版本: - -- 4.x: https://4x-ant-design.antgroup.com -- 3.x: https://ant-design-3x.gitee.io/ -- 2.x: https://ant-design-2x.gitee.io/ -- 1.x: https://ant-design-1x.gitee.io/ +| 产品/版本 | 地址 | +| --- | --- | +| Ant Design 5.x | https://ant-design.antgroup.com
https://ant-design.gitee.io | +| Ant Design 4.x | https://4x-ant-design.antgroup.com | +| Ant Design 3.x | https://ant-design-3x.gitee.io | +| Ant Design 2.x | https://ant-design-2x.gitee.io | +| Ant Design 1.x | https://ant-design-1x.gitee.io | +| Ant Design Pro | https://ant-design-pro.gitee.io/ | +| Ant Design Mobile | https://ant-design-mobile.antgroup.com/zh
https://antd-mobile.gitee.io/ | +| Ant Design Mini | https://ant-design-mini.antgroup.com/zh
https://antd-mobile.gitee.io/ | +| Ant Design Charts | https://ant-design-charts.antgroup.com
https://antd-mobile.gitee.io/ | +| AntV | https://antv.antgroup.com | +| Ant Motion | https://ant-motion.gitee.io | ## `antd` 可以像 `React` 那样使用单文件引入吗？ From 7179dc8d4c518e7d73ededc2c201c9188b9a2642 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 17 Aug 2023 19:12:34 +0800 Subject: [PATCH 049/318] docs: update footer links (#44272) --- .dumi/theme/slots/Footer/index.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx index f65a6a3e23b2..6b34e18ed5aa 100644 --- a/.dumi/theme/slots/Footer/index.tsx +++ b/.dumi/theme/slots/Footer/index.tsx @@ -102,7 +102,7 @@ const Footer: React.FC = () => { items: [ { title: 'Ant Design Charts', - url: 'https://charts.ant.design', + url: isZhCN ? 'https://ant-design-charts.antgroup.com' : 'https://charts.ant.design', openExternal: true, }, { @@ -117,12 +117,12 @@ const Footer: React.FC = () => { }, { title: 'Ant Design Mobile', - url: 'https://mobile.ant.design', + url: isZhCN ? 'https://ant-design-mobile.antgroup.com/zh' : 'https://mobile.ant.design', openExternal: true, }, { title: 'Ant Design Mini', - url: 'https://mini.ant.design', + url: isZhCN ? 'https://ant-design-mini.antgroup.com/' : 'https://mini.ant.design', openExternal: true, }, { @@ -338,7 +338,7 @@ const Footer: React.FC = () => { /> ), title: 'AntV', - url: 'https://antv.vision', + url: 'https://antv.antgroup.com', description: , openExternal: true, }, From 73cfd37b770293b251cce5c705fe433f62b61580 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Thu, 17 Aug 2023 21:12:10 +0800 Subject: [PATCH 050/318] fix: `Descriptions` key prop issue (#44278) * fix: descriptions throw react key prop error in jsx mode * chore: update test --------- Co-authored-by: MadCcc <1075746765@qq.com> --- components/descriptions/__tests__/index.test.tsx | 16 ++++++++++++++++ components/descriptions/hooks/useRow.ts | 2 +- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx index 5b652e350493..54669dbe6523 100644 --- a/components/descriptions/__tests__/index.test.tsx +++ b/components/descriptions/__tests__/index.test.tsx @@ -320,4 +320,20 @@ describe('Descriptions', () => { const view = nestDesc.querySelector('.ant-descriptions-view'); expect(getComputedStyle(view!).border).toBeFalsy(); }); + + it('Should Descriptions not throw react key prop error in jsx mode', () => { + render( + + + Zhou Maomao + + 1810000000 + , + ); + expect(errorSpy).not.toHaveBeenCalledWith( + expect.stringContaining('`key` is not a prop'), + expect.anything(), + expect.anything(), + ); + }); }); diff --git a/components/descriptions/hooks/useRow.ts b/components/descriptions/hooks/useRow.ts index 40e4b05039b7..0b44fe06314e 100644 --- a/components/descriptions/hooks/useRow.ts +++ b/components/descriptions/hooks/useRow.ts @@ -27,7 +27,7 @@ function getFilledItem( // Convert children into items const transChildren2Items = (childNodes?: React.ReactNode) => - toArray(childNodes).map((node) => node?.props); + toArray(childNodes).map((node) => ({ ...node?.props })); // Calculate the sum of span in a row function getCalcRows(rowItems: DescriptionsItemType[], mergedColumn: number) { From affd62f78c907af170629afa931d9ceb9932154b Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Thu, 17 Aug 2023 23:18:15 +0800 Subject: [PATCH 051/318] chore(deps-dev): bump @testing-library/jest-dom from 5.17.0 to 6.0.0 (#44277) Bumps [@testing-library/jest-dom](https://github.com/testing-library/jest-dom) from 5.17.0 to 6.0.0. - [Release notes](https://github.com/testing-library/jest-dom/releases) - [Changelog](https://github.com/testing-library/jest-dom/blob/main/CHANGELOG.md) - [Commits](https://github.com/testing-library/jest-dom/compare/v5.17.0...v6.0.0) --- updated-dependencies: - dependency-name: "@testing-library/jest-dom" dependency-type: direct:development update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2617fa74c459..37571a6196b9 100644 --- a/package.json +++ b/package.json @@ -178,7 +178,7 @@ "@swc/core": "^1.3.50", "@swc/helpers": "^0.5.0", "@testing-library/dom": "^9.0.0", - "@testing-library/jest-dom": "^5.16.3", + "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.2", "@types/fs-extra": "^11.0.1", From ce687c50b1c13e77553ec21164abad28d8680235 Mon Sep 17 00:00:00 2001 From: kouchao <1396726559@qq.com> Date: Fri, 18 Aug 2023 10:04:01 +0800 Subject: [PATCH 052/318] fix(ColorPicker): color clear deformation (#44258) (#44273) * fix(ColorPicker): color clear deformation (#44258) * chore: merge styles --- components/color-picker/style/index.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/color-picker/style/index.ts b/components/color-picker/style/index.ts index b7c035b83550..3294bf25f78a 100644 --- a/components/color-picker/style/index.ts +++ b/components/color-picker/style/index.ts @@ -134,7 +134,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => { minWidth: controlHeightLG, height: controlHeightLG, borderRadius: borderRadiusLG, - [`${componentCls}-color-block`]: { + [`${componentCls}-color-block, ${componentCls}-clear`]: { width: controlHeight, height: controlHeight, borderRadius, @@ -147,7 +147,7 @@ const genSizeStyle = (token: ColorPickerToken): CSSObject => { minWidth: controlHeightSM, height: controlHeightSM, borderRadius: borderRadiusSM, - [`${componentCls}-color-block`]: { + [`${componentCls}-color-block, ${componentCls}-clear`]: { width: controlHeightXS, height: controlHeightXS, borderRadius: borderRadiusXS, From 74d965442325851f34fc99e975970c1d7a308561 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Fri, 18 Aug 2023 10:23:57 +0800 Subject: [PATCH 053/318] feat: tree token (#44282) --- components/theme/interface/components.ts | 6 +- .../tree-select/__tests__/demo-extend.test.ts | 2 +- .../tree-select/__tests__/demo.test.tsx | 1 + .../tree-select/demo/component-token.md | 7 + .../tree-select/demo/component-token.tsx | 69 +++++++++ components/tree-select/index.en-US.md | 1 + components/tree-select/index.zh-CN.md | 1 + components/tree-select/style/index.ts | 19 ++- components/tree/__tests__/demo-extend.test.ts | 2 +- components/tree/__tests__/demo.test.ts | 2 +- components/tree/demo/component-token.md | 7 + components/tree/demo/component-token.tsx | 68 +++++++++ components/tree/index.en-US.md | 3 +- components/tree/index.zh-CN.md | 3 +- components/tree/style/index.ts | 132 +++++++++++++----- docs/react/migrate-less-variables.zh-CN.md | 15 +- 16 files changed, 286 insertions(+), 52 deletions(-) create mode 100644 components/tree-select/demo/component-token.md create mode 100644 components/tree-select/demo/component-token.tsx create mode 100644 components/tree/demo/component-token.md create mode 100644 components/tree/demo/component-token.tsx diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index b035cecedb64..9f8a34ac649b 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -54,6 +54,8 @@ import type { ComponentToken as TimelineComponentToken } from '../../timeline/st import type { ComponentToken as TooltipComponentToken } from '../../tooltip/style'; import type { ComponentToken as TourComponentToken } from '../../tour/style'; import type { ComponentToken as TransferComponentToken } from '../../transfer/style'; +import type { ComponentToken as TreeComponentToken } from '../../tree/style'; +import type { ComponentToken as TreeSelectComponentToken } from '../../tree-select/style'; import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; import type { ComponentToken as UploadComponentToken } from '../../upload/style'; @@ -102,8 +104,8 @@ export interface ComponentTokenMap { Statistic?: StatisticComponentToken; Switch?: SwitchComponentToken; Tag?: TagComponentToken; - Tree?: {}; - TreeSelect?: {}; + Tree?: TreeComponentToken; + TreeSelect?: TreeSelectComponentToken; Typography?: TypographyComponentToken; Timeline?: TimelineComponentToken; Transfer?: TransferComponentToken; diff --git a/components/tree-select/__tests__/demo-extend.test.ts b/components/tree-select/__tests__/demo-extend.test.ts index 9d532e1aaea3..e9f3ebe539c8 100644 --- a/components/tree-select/__tests__/demo-extend.test.ts +++ b/components/tree-select/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('tree-select'); +extendTest('tree-select', { skip: ['component-token.tsx'] }); diff --git a/components/tree-select/__tests__/demo.test.tsx b/components/tree-select/__tests__/demo.test.tsx index 61d664cb8f91..65cda3e27316 100644 --- a/components/tree-select/__tests__/demo.test.tsx +++ b/components/tree-select/__tests__/demo.test.tsx @@ -3,6 +3,7 @@ import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; demoTest('tree-select', { testRootProps: false, + skip: ['component-token.tsx'], }); rootPropsTest('tree-select', (TreeSelect, props) => , { diff --git a/components/tree-select/demo/component-token.md b/components/tree-select/demo/component-token.md new file mode 100644 index 000000000000..83366668fe40 --- /dev/null +++ b/components/tree-select/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +组件 Token + +## en-US + +Component Token diff --git a/components/tree-select/demo/component-token.tsx b/components/tree-select/demo/component-token.tsx new file mode 100644 index 000000000000..5d62fa518f72 --- /dev/null +++ b/components/tree-select/demo/component-token.tsx @@ -0,0 +1,69 @@ +import React, { useState } from 'react'; +import { ConfigProvider, TreeSelect } from 'antd'; + +const treeData = [ + { + value: 'parent 1', + title: 'parent 1', + children: [ + { + value: 'parent 1-0', + title: 'parent 1-0', + children: [ + { + value: 'leaf1', + title: 'leaf1', + }, + { + value: 'leaf2', + title: 'leaf2', + }, + ], + }, + { + value: 'parent 1-1', + title: 'parent 1-1', + children: [ + { + value: 'leaf3', + title: leaf3, + }, + ], + }, + ], + }, +]; +const App: React.FC = () => { + const [value, setValue] = useState(); + + const onChange = (newValue: string) => { + setValue(newValue); + }; + + return ( + + + + ); +}; + +export default App; diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md index b7e8c3dfa594..3ef94ecdb375 100644 --- a/components/tree-select/index.en-US.md +++ b/components/tree-select/index.en-US.md @@ -27,6 +27,7 @@ Tree selection control. Status Suffix _InternalPanelDoNotUseOrYouWillBeFired +Component Token ## API diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 00a15d34dd7b..3dff748c624d 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -28,6 +28,7 @@ demo: 自定义状态 后缀图标 \_InternalPanelDoNotUseOrYouWillBeFired +组件 Token ## API diff --git a/components/tree-select/style/index.ts b/components/tree-select/style/index.ts index ab1319ebd626..f2c12500b802 100644 --- a/components/tree-select/style/index.ts +++ b/components/tree-select/style/index.ts @@ -1,7 +1,10 @@ import { getStyle as getCheckboxStyle } from '../../checkbox/style'; import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -import { genTreeStyle } from '../../tree/style'; +import type { TreeSharedToken } from '../../tree/style'; +import { genTreeStyle, initComponentToken } from '../../tree/style'; + +export interface ComponentToken extends TreeSharedToken {} interface TreeSelectToken extends FullToken<'TreeSelect'> { treePrefixCls: string; @@ -25,7 +28,7 @@ const genBaseStyle: GenerateStyle = (token) => { // ====================== Tree ====================== genTreeStyle( treePrefixCls, - mergeToken(token, { colorBgContainer: colorBgElevated }), + mergeToken(token, { colorBgContainer: colorBgElevated }), ), { [treeCls]: { @@ -64,8 +67,12 @@ const genBaseStyle: GenerateStyle = (token) => { // ============================== Export ============================== export default function useTreeSelectStyle(prefixCls: string, treePrefixCls: string) { - return genComponentStyleHook('TreeSelect', (token) => { - const treeSelectToken = mergeToken(token, { treePrefixCls }); - return [genBaseStyle(treeSelectToken)]; - })(prefixCls); + return genComponentStyleHook( + 'TreeSelect', + (token) => { + const treeSelectToken = mergeToken(token, { treePrefixCls }); + return [genBaseStyle(treeSelectToken)]; + }, + initComponentToken, + )(prefixCls); } diff --git a/components/tree/__tests__/demo-extend.test.ts b/components/tree/__tests__/demo-extend.test.ts index 7003968a239c..ad3af91aff94 100644 --- a/components/tree/__tests__/demo-extend.test.ts +++ b/components/tree/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx'] }); +extendTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx'] }); diff --git a/components/tree/__tests__/demo.test.ts b/components/tree/__tests__/demo.test.ts index 6a3aa1be48c8..9d0466c44dc6 100644 --- a/components/tree/__tests__/demo.test.ts +++ b/components/tree/__tests__/demo.test.ts @@ -1,3 +1,3 @@ import demoTest from '../../../tests/shared/demoTest'; -demoTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx'] }); +demoTest('tree', { skip: ['big-data.tsx', 'virtual-scroll.tsx', 'component-token.tsx'] }); diff --git a/components/tree/demo/component-token.md b/components/tree/demo/component-token.md new file mode 100644 index 000000000000..83366668fe40 --- /dev/null +++ b/components/tree/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +组件 Token + +## en-US + +Component Token diff --git a/components/tree/demo/component-token.tsx b/components/tree/demo/component-token.tsx new file mode 100644 index 000000000000..2a9ae5665b4a --- /dev/null +++ b/components/tree/demo/component-token.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { ConfigProvider, Tree } from 'antd'; +import type { DataNode, TreeProps } from 'antd/es/tree'; + +const treeData: DataNode[] = [ + { + title: 'parent 1', + key: '0-0', + children: [ + { + title: 'parent 1-0', + key: '0-0-0', + disabled: true, + children: [ + { + title: 'leaf', + key: '0-0-0-0', + disableCheckbox: true, + }, + { + title: 'leaf', + key: '0-0-0-1', + }, + ], + }, + { + title: 'parent 1-1', + key: '0-0-1', + children: [{ title: sss, key: '0-0-1-0' }], + }, + ], + }, +]; + +const App: React.FC = () => { + const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => { + console.log('selected', selectedKeys, info); + }; + + const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => { + console.log('onCheck', checkedKeys, info); + }; + + return ( + + + + ); +}; + +export default App; diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md index 627e60231f07..77de6459e144 100644 --- a/components/tree/index.en-US.md +++ b/components/tree/index.en-US.md @@ -30,6 +30,7 @@ Almost anything can be represented in a tree structure. Examples include directo Drag Debug Big data Block Node +Component Token ## API @@ -126,7 +127,7 @@ Before `3.4.0`: The number of treeNodes can be very large, but when `checkable=t ## Design Token - + ## FAQ diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index c4d985bdaf8c..810614e11841 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -31,6 +31,7 @@ demo: Drag Debug 大数据 占据整行 +组件 Token ## API @@ -128,7 +129,7 @@ demo: ## Design Token - + ## FAQ diff --git a/components/tree/style/index.ts b/components/tree/style/index.ts index b40addd20209..e6c1e0a11fef 100644 --- a/components/tree/style/index.ts +++ b/components/tree/style/index.ts @@ -3,9 +3,40 @@ import { Keyframes } from '@ant-design/cssinjs'; import { getStyle as getCheckboxStyle } from '../../checkbox/style'; import { genFocusOutline, resetComponent } from '../../style'; import { genCollapseMotion } from '../../style/motion'; -import type { DerivativeToken } from '../../theme/internal'; +import type { AliasToken, DerivativeToken, FullToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +export interface TreeSharedToken { + /** + * @desc 节点标题高度 + * @descEN Node title height + */ + titleHeight: number; + /** + * @desc 节点悬浮态背景色 + * @descEN Background color of hovered node + */ + nodeHoverBg: string; + /** + * @desc 节点选中态背景色 + * @descEN Background color of selected node + */ + nodeSelectedBg: string; +} + +export interface ComponentToken extends TreeSharedToken { + /** + * @desc 目录树节点选中文字颜色 + * @descEN Text color of selected directory node + */ + directoryNodeSelectedColor: string; + /** + * @desc 目录树节点选中背景色 + * @descEN Background color of selected directory node + */ + directoryNodeSelectedBg: string; +} + // ============================ Keyframes ============================= const treeNodeFX = new Keyframes('ant-tree-node-fx-do-not-use', { '0%': { @@ -55,15 +86,14 @@ const getDropIndicatorStyle = (prefixCls: string, token: DerivativeToken) => ({ }); // =============================== Base =============================== -type TreeToken = DerivativeToken & { +type TreeToken = FullToken<'Tree'> & { treeCls: string; treeNodeCls: string; treeNodePadding: number; - treeTitleHeight: number; }; export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => { - const { treeCls, treeNodeCls, treeNodePadding, treeTitleHeight } = token; + const { treeCls, treeNodeCls, treeNodePadding, titleHeight, nodeSelectedBg, nodeHoverBg } = token; const treeCheckBoxMarginHorizontal = token.paddingXS; return { @@ -163,8 +193,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => [`${treeCls}-draggable-icon`]: { // https://github.com/ant-design/ant-design/issues/41915 flexShrink: 0, - width: treeTitleHeight, - lineHeight: `${treeTitleHeight}px`, + width: titleHeight, + lineHeight: `${titleHeight}px`, textAlign: 'center', visibility: 'visible', opacity: 0.2, @@ -190,7 +220,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => userSelect: 'none', '&-unit': { display: 'inline-block', - width: treeTitleHeight, + width: titleHeight, }, }, @@ -205,9 +235,9 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => position: 'relative', flex: 'none', alignSelf: 'stretch', - width: treeTitleHeight, + width: titleHeight, margin: 0, - lineHeight: `${treeTitleHeight}px`, + lineHeight: `${titleHeight}px`, textAlign: 'center', cursor: 'pointer', userSelect: 'none', @@ -239,7 +269,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => '&:before': { position: 'absolute', top: 0, - insetInlineEnd: treeTitleHeight / 2, + insetInlineEnd: titleHeight / 2, bottom: -treeNodePadding, marginInlineStart: -1, borderInlineEnd: `1px solid ${token.colorBorder}`, @@ -248,8 +278,8 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => '&:after': { position: 'absolute', - width: (treeTitleHeight / 2) * 0.8, - height: treeTitleHeight / 2, + width: (titleHeight / 2) * 0.8, + height: titleHeight / 2, borderBottom: `1px solid ${token.colorBorder}`, content: '""', }, @@ -267,30 +297,30 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => [`${treeCls}-node-content-wrapper, ${treeCls}-checkbox + span`]: { position: 'relative', zIndex: 'auto', - minHeight: treeTitleHeight, + minHeight: titleHeight, margin: 0, padding: `0 ${token.paddingXS / 2}px`, color: 'inherit', - lineHeight: `${treeTitleHeight}px`, + lineHeight: `${titleHeight}px`, background: 'transparent', borderRadius: token.borderRadius, cursor: 'pointer', transition: `all ${token.motionDurationMid}, border 0s, line-height 0s, box-shadow 0s`, '&:hover': { - backgroundColor: token.controlItemBgHover, + backgroundColor: nodeHoverBg, }, [`&${treeCls}-node-selected`]: { - backgroundColor: token.controlItemBgActive, + backgroundColor: nodeSelectedBg, }, // Icon [`${treeCls}-iconEle`]: { display: 'inline-block', - width: treeTitleHeight, - height: treeTitleHeight, - lineHeight: `${treeTitleHeight}px`, + width: titleHeight, + height: titleHeight, + lineHeight: `${titleHeight}px`, textAlign: 'center', verticalAlign: 'top', @@ -307,7 +337,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => // ==================== Draggable ===================== [`${treeCls}-node-content-wrapper`]: { - lineHeight: `${treeTitleHeight}px`, + lineHeight: `${titleHeight}px`, userSelect: 'none', ...getDropIndicatorStyle(prefixCls, token), @@ -330,7 +360,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => '&:before': { position: 'absolute', top: 0, - insetInlineEnd: treeTitleHeight / 2, + insetInlineEnd: titleHeight / 2, bottom: -treeNodePadding, borderInlineEnd: `1px solid ${token.colorBorder}`, content: '""', @@ -361,7 +391,7 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => '&:before': { top: 'auto !important', bottom: 'auto !important', - height: `${treeTitleHeight / 2}px !important`, + height: `${titleHeight / 2}px !important`, }, }, }, @@ -372,7 +402,13 @@ export const genBaseStyle = (prefixCls: string, token: TreeToken): CSSObject => // ============================ Directory ============================= export const genDirectoryStyle = (token: TreeToken): CSSObject => { - const { treeCls, treeNodeCls, treeNodePadding } = token; + const { + treeCls, + treeNodeCls, + treeNodePadding, + directoryNodeSelectedBg, + directoryNodeSelectedColor, + } = token; return { [`${treeCls}${treeCls}-directory`]: { @@ -418,7 +454,7 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => { }, [`&${treeCls}-node-selected`]: { - color: token.colorTextLightSolid, + color: directoryNodeSelectedColor, background: 'transparent', }, }, @@ -429,17 +465,17 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => { &:hover::before, &::before `]: { - background: token.colorPrimary, + background: directoryNodeSelectedBg, }, // >>> Switcher [`${treeCls}-switcher`]: { - color: token.colorTextLightSolid, + color: directoryNodeSelectedColor, }, // >>> Title [`${treeCls}-node-content-wrapper`]: { - color: token.colorTextLightSolid, + color: directoryNodeSelectedColor, background: 'transparent', }, }, @@ -449,18 +485,19 @@ export const genDirectoryStyle = (token: TreeToken): CSSObject => { }; // ============================== Merged ============================== -export const genTreeStyle = (prefixCls: string, token: DerivativeToken): CSSInterpolation => { +export const genTreeStyle = ( + prefixCls: string, + token: AliasToken & TreeSharedToken, +): CSSInterpolation => { const treeCls = `.${prefixCls}`; const treeNodeCls = `${treeCls}-treenode`; const treeNodePadding = token.paddingXS / 2; - const treeTitleHeight = token.controlHeightSM; const treeToken = mergeToken(token, { treeCls, treeNodeCls, treeNodePadding, - treeTitleHeight, }); return [ @@ -471,11 +508,32 @@ export const genTreeStyle = (prefixCls: string, token: DerivativeToken): CSSInte ]; }; -// ============================== Export ============================== -export default genComponentStyleHook('Tree', (token, { prefixCls }) => [ - { - [token.componentCls]: getCheckboxStyle(`${prefixCls}-checkbox`, token), +export const initComponentToken = (token: AliasToken): TreeSharedToken => { + const { controlHeightSM } = token; + + return { + titleHeight: controlHeightSM, + nodeHoverBg: token.controlItemBgHover, + nodeSelectedBg: token.controlItemBgActive, + }; +}; + +export default genComponentStyleHook( + 'Tree', + (token, { prefixCls }) => [ + { + [token.componentCls]: getCheckboxStyle(`${prefixCls}-checkbox`, token), + }, + genTreeStyle(prefixCls, token), + genCollapseMotion(token), + ], + (token) => { + const { colorTextLightSolid, colorPrimary } = token; + + return { + ...initComponentToken(token), + directoryNodeSelectedColor: colorTextLightSolid, + directoryNodeSelectedBg: colorPrimary, + }; }, - genTreeStyle(prefixCls, token), - genCollapseMotion(token), -]); +); diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 0a538643c205..77738aade6d8 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -797,7 +797,7 @@ Mentions 提及 | `@tooltip-arrow-color` | - | 同 `@tooltip-bg`，已废弃 | | `@tooltip-border-radius` | `borderRadius` | 全局 Token | -Transfer 穿梭框 +### Transfer 穿梭框 | Less variables | Component Token | Note | @@ -811,7 +811,18 @@ Transfer 穿梭框 | `@transfer-item-padding-vertical` | `itemPaddingBlock` | - | | `@transfer-list-search-icon-top` | - | 已废弃 | - +### Tree 树形控件 + + +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@tree-bg` | `colorBgContainer` | 全局 Token | +| `@tree-title-height` | `titleHeight` | - | +| `@tree-child-padding` | - | 已废弃 | +| `@tree-directory-selected-color` | `directoryNodeSelectedColor` | - | +| `@tree-directory-selected-bg` | `directoryNodeSelectedBg` | - | +| `@tree-node-hover-bg` | `nodeHoverBg` | - | +| `@tree-node-selected-bg` | `nodeSelectedBg` | - | ### Typography 排版 From 3b913cf17ba6517dc4e6d5f8eeb1b97f951796ae Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 18 Aug 2023 10:41:45 +0800 Subject: [PATCH 054/318] site: add internationalization for docs (#44263) * site: add internationalization for docs * fix * Update .dumi/theme/common/Color/ColorPaletteTool.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix * fix: fix * fix: fix * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .dumi/theme/common/Color/ColorPaletteTool.tsx | 28 +++- .../common/Color/ColorPaletteToolDark.tsx | 26 +++- .dumi/theme/common/Color/ColorPatterns.tsx | 12 +- components/calendar/demo/lunar.tsx | 120 +++++++++--------- package.json | 2 +- 5 files changed, 114 insertions(+), 74 deletions(-) diff --git a/.dumi/theme/common/Color/ColorPaletteTool.tsx b/.dumi/theme/common/Color/ColorPaletteTool.tsx index 5f9b4319eb68..2c2de6d3f9ef 100644 --- a/.dumi/theme/common/Color/ColorPaletteTool.tsx +++ b/.dumi/theme/common/Color/ColorPaletteTool.tsx @@ -3,26 +3,44 @@ import React, { useMemo, useState } from 'react'; import { ColorPicker } from 'antd'; import type { Color } from 'antd/es/color-picker'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); + const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); setPrimaryColorInstance(color); }; + const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return {text.trim()}; @@ -32,7 +50,9 @@ const ColorPaletteTool: React.FC = () => {
-
{ColorPatterns({ color: primaryColor })}
+
+ +
diff --git a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx index 2c81fa008a5c..59400cfae121 100644 --- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx +++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx @@ -2,14 +2,30 @@ import { FormattedMessage } from 'dumi'; import React, { useMemo, useState } from 'react'; import { Col, ColorPicker, Row } from 'antd'; import ColorPatterns from './ColorPatterns'; +import useLocale from '../../../hooks/useLocale'; const primaryMinSaturation = 70; // 主色推荐最小饱和度 const primaryMinBrightness = 70; // 主色推荐最小亮度 +const locales = { + cn: { + saturation: (s: string) => `饱和度建议不低于${primaryMinSaturation}（现在${s}）`, + brightness: (b: string) => `亮度建议不低于${primaryMinBrightness}（现在${b}）`, + }, + en: { + saturation: (s: string) => + `Saturation is recommended not to be lower than ${primaryMinSaturation}（currently${s}）`, + brightness: (b: string) => + `Brightness is recommended not to be lower than ${primaryMinBrightness}（currently${b}）`, + }, +}; + const ColorPaletteTool: React.FC = () => { const [primaryColor, setPrimaryColor] = useState('#1890ff'); const [backgroundColor, setBackgroundColor] = useState('#141414'); - const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + const [primaryColorInstance, setPrimaryColorInstance] = useState(null); + + const [locale] = useLocale(locales); const handleChangeColor = (color: Color, hex: string) => { setPrimaryColor(hex); @@ -23,12 +39,12 @@ const ColorPaletteTool: React.FC = () => { const colorValidation = useMemo(() => { let text = ''; if (primaryColorInstance) { - const { s, b } = primaryColorInstance.toHsb(); + const { s, b } = primaryColorInstance.toHsb() || {}; if (s * 100 < primaryMinSaturation) { - text += ` 饱和度建议不低于${primaryMinSaturation}（现在 ${(s * 100).toFixed(2)}）`; + text += locale.saturation((s * 100).toFixed(2)); } if (b * 100 < primaryMinBrightness) { - text += ` 亮度建议不低于${primaryMinBrightness}（现在 ${(b * 100).toFixed(2)}）`; + text += locale.brightness((s * 100).toFixed(2)); } } return ( @@ -41,7 +57,7 @@ const ColorPaletteTool: React.FC = () => { return (
- {ColorPatterns({ color: primaryColor, dark: true, backgroundColor })} +
diff --git a/.dumi/theme/common/Color/ColorPatterns.tsx b/.dumi/theme/common/Color/ColorPatterns.tsx index d40d88a0c997..080b5651cea9 100644 --- a/.dumi/theme/common/Color/ColorPatterns.tsx +++ b/.dumi/theme/common/Color/ColorPatterns.tsx @@ -9,11 +9,15 @@ interface ColorPatternsProps { backgroundColor?: string; } -const ColorPatterns = ({ color, dark, backgroundColor }: ColorPatternsProps) => { +const ColorPatterns: React.FC = ({ color, dark, backgroundColor }) => { const colors = generate(color, dark ? { theme: 'dark', backgroundColor } : {}); - return uniq(colors).map((colorString, i) => ( - - )); + return ( + <> + {uniq(colors).map((colorString, i) => ( + + ))} + + ); }; export default ColorPatterns; diff --git a/components/calendar/demo/lunar.tsx b/components/calendar/demo/lunar.tsx index b5476d5f8968..f23d5bdb0d54 100644 --- a/components/calendar/demo/lunar.tsx +++ b/components/calendar/demo/lunar.tsx @@ -16,74 +16,74 @@ const useStyle = createStyles(({ token, css, cx }) => { `; return { wrapper: css` - width: 400px; - border: 1px solid ${token.colorBorderSecondary}; - border-radius: ${token.borderRadiusOuter}; - padding: 5px; - `, + width: 400px; + border: 1px solid ${token.colorBorderSecondary}; + border-radius: ${token.borderRadiusOuter}; + padding: 5px; + `, dateCell: css` - position: relative; - &:before { - content: ''; - position: absolute; - left: 0; - right: 0; - top: 0; - bottom: 0; - margin: auto; - max-width: 40px; - max-height: 40px; - background: transparent; - transition: background 300ms; - border-radius: ${token.borderRadiusOuter}px; - border: 1px solid transparent; - box-sizing: border-box; - } - &:hover:before { - background: rgba(0, 0, 0, 0.04); - } - `, + position: relative; + &:before { + content: ''; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + margin: auto; + max-width: 40px; + max-height: 40px; + background: transparent; + transition: background 300ms; + border-radius: ${token.borderRadiusOuter}px; + border: 1px solid transparent; + box-sizing: border-box; + } + &:hover:before { + background: rgba(0, 0, 0, 0.04); + } + `, today: css` - &:before { - border: 1px solid ${token.colorPrimary}; - } + &:before { + border: 1px solid ${token.colorPrimary}; + } `, text: css` - position: relative; - z-index: 1; - `, + position: relative; + z-index: 1; + `, lunar, current: css` - color: ${token.colorTextLightSolid}; - &:before { - background: ${token.colorPrimary}; - } - &:hover:before { - background: ${token.colorPrimary}; - opacity: .8; - } - .${cx(lunar)} { - color: ${token.colorTextLightSolid}; - opacity: .9; - } - `, + color: ${token.colorTextLightSolid}; + &:before { + background: ${token.colorPrimary}; + } + &:hover:before { + background: ${token.colorPrimary}; + opacity: 0.8; + } + .${cx(lunar)} { + color: ${token.colorTextLightSolid}; + opacity: 0.9; + } + `, monthCell: css` - width: 120px; - color: ${token.colorTextBase}; - border-radius: ${token.borderRadiusOuter}px; - padding: 5px 0; - &:hover { - background: rgba(0, 0, 0, 0.04); - } - `, + width: 120px; + color: ${token.colorTextBase}; + border-radius: ${token.borderRadiusOuter}px; + padding: 5px 0; + &:hover { + background: rgba(0, 0, 0, 0.04); + } + `, monthCellCurrent: css` - color: ${token.colorTextLightSolid}; - background: ${token.colorPrimary}; - &:hover { - background: ${token.colorPrimary}; - opacity: .8; - } - `, + color: ${token.colorTextLightSolid}; + background: ${token.colorPrimary}; + &:hover { + background: ${token.colorPrimary}; + opacity: 0.8; + } + `, }; }); diff --git a/package.json b/package.json index 37571a6196b9..29527721dc5d 100644 --- a/package.json +++ b/package.json @@ -159,7 +159,7 @@ "throttle-debounce": "^5.0.0" }, "devDependencies": { - "@ant-design/compatible": "^5.1.1", + "@ant-design/compatible": "^5.1.2", "@ant-design/happy-work-theme": "^1.0.0", "@ant-design/tools": "^17.0.0", "@antv/g6": "^4.8.13", From d375cbd1b6831e973544717df4750ffc111fe932 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Fri, 18 Aug 2023 14:54:35 +0800 Subject: [PATCH 055/318] feat: Avatar support size from ConfigProvider (#44288) * feat: Avatar support size from ConfigProvider * Update components/avatar/avatar.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * test: update snap * Update components/avatar/AvatarContext.ts Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- components/avatar/AvatarContext.ts | 2 +- components/avatar/__tests__/Avatar.test.tsx | 16 ++++++++++++++++ components/avatar/avatar.tsx | 5 +++-- .../__snapshots__/components.test.tsx.snap | 8 ++++---- 4 files changed, 24 insertions(+), 7 deletions(-) diff --git a/components/avatar/AvatarContext.ts b/components/avatar/AvatarContext.ts index 755b48c6c5f7..b56bfeab71d3 100644 --- a/components/avatar/AvatarContext.ts +++ b/components/avatar/AvatarContext.ts @@ -8,6 +8,6 @@ export interface AvatarContextType { shape?: 'circle' | 'square'; } -const AvatarContext = React.createContext({ size: 'default', shape: undefined }); +const AvatarContext = React.createContext({}); export default AvatarContext; diff --git a/components/avatar/__tests__/Avatar.test.tsx b/components/avatar/__tests__/Avatar.test.tsx index 66ca70034ba3..8bbd0688d0a7 100644 --- a/components/avatar/__tests__/Avatar.test.tsx +++ b/components/avatar/__tests__/Avatar.test.tsx @@ -4,6 +4,7 @@ import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, render } from '../../../tests/utils'; import useBreakpoint from '../../grid/hooks/useBreakpoint'; +import ConfigProvider from '../../config-provider'; jest.mock('../../grid/hooks/useBreakpoint'); @@ -205,4 +206,19 @@ describe('Avatar Render', () => { expect(avatars?.[2]).toHaveClass('ant-avatar-square'); expect(avatars?.[3]).toHaveClass('ant-avatar-circle'); }); + + it('should apply the componentSize of CP', () => { + const { container } = render( + <> + + test + + + test + + , + ); + expect(container.querySelector('.ant-avatar-sm')).toBeTruthy(); + expect(container.querySelector('.ant-avatar-lg')).toBeTruthy(); + }); }); diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx index 109447118083..54ef0175b12c 100644 --- a/components/avatar/avatar.tsx +++ b/components/avatar/avatar.tsx @@ -10,6 +10,7 @@ import useBreakpoint from '../grid/hooks/useBreakpoint'; import type { AvatarContextType, AvatarSize } from './AvatarContext'; import AvatarContext from './AvatarContext'; import useStyle from './style'; +import useSize from '../config-provider/hooks/useSize'; export interface AvatarProps { /** Shape of avatar, options: `circle`, `square` */ @@ -93,7 +94,7 @@ const InternalAvatar: React.ForwardRefRenderFunction customSize ?? avatarCtx?.size ?? ctxSize ?? 'default'); const needResponsive = Object.keys(typeof size === 'object' ? size || {} : {}).some((key) => ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].includes(key), diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap index 04ae950c9ecf..3a4b5b6fd539 100644 --- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap +++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap @@ -599,7 +599,7 @@ exports[`ConfigProvider components Avatar configProvider componentDisabled 1`] = exports[`ConfigProvider components Avatar configProvider componentSize large 1`] = ` Date: Fri, 18 Aug 2023 11:18:51 +0400 Subject: [PATCH 056/318] docs: add third-party library to the development section (#44283) * Add `antd-phone-input` as a third-party library Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> * Update recommendation.zh-CN.md regarding to the en-US docs Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> * Update docs/react/recommendation.en-US.md Co-authored-by: afc163 Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> * Update docs/react/recommendation.zh-CN.md Co-authored-by: afc163 Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> --------- Signed-off-by: Artyom Vancyan <44609997+ArtyomVancyan@users.noreply.github.com> Co-authored-by: afc163 --- docs/react/recommendation.en-US.md | 1 + docs/react/recommendation.zh-CN.md | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md index df36112bee2e..de423fe0c4cb 100644 --- a/docs/react/recommendation.en-US.md +++ b/docs/react/recommendation.en-US.md @@ -43,6 +43,7 @@ title: Third-Party Libraries | Number/Currency | [react-countup](https://www.npmjs.com/package/react-countup) [react-number-format](https://github.com/s-yadav/react-number-format) [react-currency-input-field](https://github.com/cchanxzy/react-currency-input-field) | | Application Frameworks | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | | Flow-based UI | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | +| Phone Input | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) | ## Products we are using ✨ diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md index 792439417357..9d37c6568670 100644 --- a/docs/react/recommendation.zh-CN.md +++ b/docs/react/recommendation.zh-CN.md @@ -45,6 +45,7 @@ title: 社区精选组件 | 移动端探测 | [react-device-detect](https://github.com/duskload/react-device-detect) | | 应用程序框架 | [umi](https://github.com/umijs/umi/) [remix](https://github.com/remix-run/remix) [refine](https://github.com/pankod/refine) | | Flow 流 | [react-flow](https://github.com/wbkd/react-flow) [x6](https://github.com/antvis/x6) | +| 电话输入 | [react-phone-number-input](https://gitlab.com/catamphetamine/react-phone-number-input) [antd-phone-input](https://github.com/ArtyomVancyan/antd-phone-input/) | ## 推荐产品 ✨ From 8177c5235d5a09f0078bd202a248b107fa2f7658 Mon Sep 17 00:00:00 2001 From: xrkffgg Date: Fri, 18 Aug 2023 16:59:12 +0800 Subject: [PATCH 057/318] docs: add changelog 5.8.4 (#44293) * docs: add changelog 5.8.4 * fix: lint * fix: typo --- CHANGELOG.en-US.md | 17 +++++++++++++++++ CHANGELOG.zh-CN.md | 17 +++++++++++++++++ package.json | 2 +- 3 files changed, 35 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index dc13f5c553a7..12e8f7c4c226 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,23 @@ tag: vVERSION --- +## 5.8.4 + +`2023-08-18` + +- ColorPicker + - 🐞 Fix the cursor jumps when entering lowercase English letters in the ColorPicker color value input box. [#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666) + - 🐞 Fix the ColorPicker style is deformed under different sizes. [#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao) +- 🐞 Fix Descriptions throwing `key is not a prop` error message. [#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue) +- 🐞 Fix the node is still rendered when Pagination `itemRender` is customized to `null`. [#44226](https://github.com/ant-design/ant-design/pull/44226) +- 🐞 Fix Modal in Dropdown `menu.items`, rapid mouse movement when expanding Modal will make Dropdown reopen. [#44204](https://github.com/ant-design/ant-design/pull/44204) +- DatePicker + - 💄 Fix DatePicker content is not centered. [#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502) + - 💄 Optimize DatePicker selection range style. [#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang) +- 💄 Fix clicking on the Tabs area on the mobile terminal triggers a color change. [#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi) +- RTL + - 💄 Fix the numbers in the Badge are also RTL when the text direction of the page is RTL. [#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko) + ## 5.8.3 `2023-08-11` diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 6ba8ef008e4d..9eab1234e88a 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,23 @@ tag: vVERSION --- +## 5.8.4 + +`2023-08-18` + +- ColorPicker + - 🐞 修复 ColorPicker 色值输入框输入小写英文字母时光标跳动的问题。[#44137](https://github.com/ant-design/ant-design/pull/44137) [@gouge666](https://github.com/gouge666) + - 🐞 修复 ColorPicker 在不同尺寸下样式变形的问题。[#44273](https://github.com/ant-design/ant-design/pull/44273) [@kouchao](https://github.com/kouchao) +- 🐞 修复 Descriptions 抛出 `key is not a prop` 的错误提示。[#44278](https://github.com/ant-design/ant-design/pull/44278) [@RedJue](https://github.com/RedJue) +- 🐞 修复 Pagination `itemRender` 自定义为 `null` 时，仍然渲染节点的问题。[#44226](https://github.com/ant-design/ant-design/pull/44226) +- 🐞 修复 Modal 在 Dropdown `menu.items` 中，展开 Modal 时快速移动鼠标会使 Dropdown 重新打开的问题。[#44204](https://github.com/ant-design/ant-design/pull/44204) +- DatePicker + - 💄 修复 DatePicker 内容不居中问题。[#44245](https://github.com/ant-design/ant-design/pull/44245) [@Zian502](https://github.com/Zian502) + - 💄 优化 DatePicker 中范围选择区域样式。[#44206](https://github.com/ant-design/ant-design/pull/44206) [@kiner-tang](https://github.com/kiner-tang) +- 💄 修复移动端点击 Tabs 区域触发颜色改变的问题。[#44200](https://github.com/ant-design/ant-design/pull/44200) [@yilaikesi](https://github.com/yilaikesi) +- RTL + - 💄 修复了当页面的文字方向为 RTL 时 Badge 里面的数字也是 RTL 的问题。[#43998](https://github.com/ant-design/ant-design/pull/43998) [@NotEvenANeko](https://github.com/NotEvenANeko) + ## 5.8.3 `2023-08-11` diff --git a/package.json b/package.json index 29527721dc5d..c1121909aac7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.8.3", + "version": "5.8.4", "packageManager": "^npm@9.0.0", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", From 80bd54f5154c98f45a2d9020a627e1e4813418e8 Mon Sep 17 00:00:00 2001 From: iola1999 Date: Fri, 18 Aug 2023 18:29:44 +0800 Subject: [PATCH 058/318] chore: redirect with rest url (#44298) --- .dumi/theme/slots/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 386c2914565e..163a8dec1a69 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -182,7 +182,7 @@ const Header: React.FC = () => { closable: true, zIndex: 99999, onOk() { - window.open('https://ant-design.antgroup.com', '_self'); + window.location.host = 'ant-design.antgroup.com'; disableAntdMirrorModal(); }, onCancel() { From 8afbe6939ea5c9e41e02de878ec4a1b29643dfce Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Sun, 20 Aug 2023 20:32:09 +0800 Subject: [PATCH 059/318] docs(demo): Replace backticks with single quotes (#44302) --- components/tabs/demo/animated.tsx | 12 ++++++------ components/tabs/demo/basic.tsx | 12 ++++++------ components/tabs/demo/custom-tab-bar-node.tsx | 6 +++--- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/components/tabs/demo/animated.tsx b/components/tabs/demo/animated.tsx index 4fd231f33d57..fc1fd3cff35e 100644 --- a/components/tabs/demo/animated.tsx +++ b/components/tabs/demo/animated.tsx @@ -26,27 +26,27 @@ const App: React.FC = () => { animated={{ inkBar, tabPane }} items={[ { - label: `Bamboo`, + label: 'Bamboo', key: '1', - children: `Hello Bamboo!`, + children: 'Hello Bamboo!', style: { height: 200, boxShadow: '0 0 3px rgba(255, 0, 0, 0.5)', }, }, { - label: `Little`, + label: 'Little', key: '2', - children: `Hi Little!`, + children: 'Hi Little!', style: { height: 300, boxShadow: '0 0 3px rgba(0, 255, 0, 0.5)', }, }, { - label: `Light`, + label: 'Light', key: '3', - children: `Welcome Light!`, + children: 'Welcome Light!', style: { height: 100, boxShadow: '0 0 3px rgba(0, 0, 255, 0.5)', diff --git a/components/tabs/demo/basic.tsx b/components/tabs/demo/basic.tsx index 2b954ec312a6..085ea73bb3f1 100644 --- a/components/tabs/demo/basic.tsx +++ b/components/tabs/demo/basic.tsx @@ -9,18 +9,18 @@ const onChange = (key: string) => { const items: TabsProps['items'] = [ { key: '1', - label: `Tab 1`, - children: `Content of Tab Pane 1`, + label: 'Tab 1', + children: 'Content of Tab Pane 1', }, { key: '2', - label: `Tab 2`, - children: `Content of Tab Pane 2`, + label: 'Tab 2', + children: 'Content of Tab Pane 2', }, { key: '3', - label: `Tab 3`, - children: `Content of Tab Pane 3`, + label: 'Tab 3', + children: 'Content of Tab Pane 3', }, ]; diff --git a/components/tabs/demo/custom-tab-bar-node.tsx b/components/tabs/demo/custom-tab-bar-node.tsx index ed429f99bd81..b28bacd05e34 100644 --- a/components/tabs/demo/custom-tab-bar-node.tsx +++ b/components/tabs/demo/custom-tab-bar-node.tsx @@ -38,17 +38,17 @@ const App: React.FC = () => { const [items, setItems] = useState([ { key: '1', - label: `Tab 1`, + label: 'Tab 1', children: 'Content of Tab Pane 1', }, { key: '2', - label: `Tab 2`, + label: 'Tab 2', children: 'Content of Tab Pane 2', }, { key: '3', - label: `Tab 3`, + label: 'Tab 3', children: 'Content of Tab Pane 3', }, ]); From f91bc7baa4613194e3d0e56b8be84f5651dac4a6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A0=97=E5=98=89=E7=94=B7?= <574980606@qq.com> Date: Mon, 21 Aug 2023 00:26:32 +0800 Subject: [PATCH 060/318] test: update snap --- .../__snapshots__/demo-extend.test.ts.snap | 46 ++++++++++--------- .../__snapshots__/demo.test.tsx.snap | 46 ++++++++++--------- 2 files changed, 50 insertions(+), 42 deletions(-) diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap index 14d9f613f497..e2046f2b9179 100644 --- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1444,16 +1444,18 @@ exports[`renders components/badge/demo/component-token.tsx extend context correc data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -1469,26 +1471,28 @@ exports[`renders components/badge/demo/component-token.tsx extend context correc data-show="true" title="26" > - + - 2 + + 2 + - - - 6 + + 6 + - +
diff --git a/components/badge/__tests__/__snapshots__/demo.test.tsx.snap b/components/badge/__tests__/__snapshots__/demo.test.tsx.snap index 02bafea7261e..ee0193a72844 100644 --- a/components/badge/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/badge/__tests__/__snapshots__/demo.test.tsx.snap @@ -1437,16 +1437,18 @@ exports[`renders components/badge/demo/component-token.tsx correctly 1`] = ` data-show="true" title="5" > - + - 5 + + 5 + - +
@@ -1462,26 +1464,28 @@ exports[`renders components/badge/demo/component-token.tsx correctly 1`] = ` data-show="true" title="26" > - + - 2 + + 2 + - - - 6 + + 6 + - +
From 65fd05c344d7fa3fe79900f2d2d5e1421b0658e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Mon, 21 Aug 2023 10:03:15 +0800 Subject: [PATCH 061/318] style: add prettier-plugin-sort-imports (#44287) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * style: sort * style: sort * style: sort * style: sort * style: 规则调整 * style: 规则调整 --- .eslintrc.js | 1 + .prettierrc | 4 ++++ components/affix/index.tsx | 4 +++- components/collapse/__tests__/index.test.tsx | 2 ++ components/color-picker/ColorPicker.tsx | 6 ++++-- components/tabs/demo/custom-tab-bar.tsx | 3 ++- package.json | 1 + 7 files changed, 17 insertions(+), 4 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index a341d58bb440..1178d08ee021 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -205,6 +205,7 @@ module.exports = { '@typescript-eslint/no-shadow': [2, { ignoreTypeValueShadow: true }], // https://github.com/typescript-eslint/typescript-eslint/issues/2528#issuecomment-689369395 'no-undef': 0, + 'import/order': 0, }, globals: { gtag: true, diff --git a/.prettierrc b/.prettierrc index 9d5b9bf640c1..d1c91d8d042d 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,6 +4,10 @@ "trailingComma": "all", "printWidth": 100, "proseWrap": "never", + "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", ".*"], + "importOrderSeparation": true, + "importOrderSortSpecifiers": true, + "plugins": ["@trivago/prettier-plugin-sort-imports"], "overrides": [ { "files": ".prettierrc", diff --git a/components/affix/index.tsx b/components/affix/index.tsx index 3f4fb4b17651..af3c9e3f54c0 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -1,9 +1,11 @@ 'use client'; +import React, { createRef, forwardRef, useContext } from 'react'; + import classNames from 'classnames'; import ResizeObserver from 'rc-resize-observer'; import omit from 'rc-util/lib/omit'; -import React, { createRef, forwardRef, useContext } from 'react'; + import throttleByAnimationFrame from '../_util/throttleByAnimationFrame'; import type { ConfigConsumerProps } from '../config-provider'; import { ConfigContext } from '../config-provider'; diff --git a/components/collapse/__tests__/index.test.tsx b/components/collapse/__tests__/index.test.tsx index 143b487049de..a7e23f68e618 100644 --- a/components/collapse/__tests__/index.test.tsx +++ b/components/collapse/__tests__/index.test.tsx @@ -1,5 +1,7 @@ import React from 'react'; + import { act } from 'react-dom/test-utils'; + import { fireEvent, render, waitFakeTimer } from '../../../tests/utils'; import { resetWarned } from '../../_util/warning'; diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index d71fe4c64859..abdc869311fd 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -1,11 +1,13 @@ +import type { CSSProperties, FC } from 'react'; +import React, { useContext, useMemo, useRef, useState } from 'react'; + import type { HsbaColorType, ColorPickerProps as RcColorPickerProps, } from '@rc-component/color-picker'; import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; -import type { CSSProperties, FC } from 'react'; -import React, { useContext, useMemo, useRef, useState } from 'react'; + import genPurePanel from '../_util/PurePanel'; import { getStatusClassNames } from '../_util/statusUtils'; import warning from '../_util/warning'; diff --git a/components/tabs/demo/custom-tab-bar.tsx b/components/tabs/demo/custom-tab-bar.tsx index 5a5fc4898441..1e538404a7ef 100644 --- a/components/tabs/demo/custom-tab-bar.tsx +++ b/components/tabs/demo/custom-tab-bar.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import StickyBox from 'react-sticky-box'; + import type { TabsProps } from 'antd'; import { Tabs, theme } from 'antd'; +import StickyBox from 'react-sticky-box'; const items = new Array(3).fill(null).map((_, i) => { const id = String(i + 1); diff --git a/package.json b/package.json index c1121909aac7..77b4966344b1 100644 --- a/package.json +++ b/package.json @@ -181,6 +181,7 @@ "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.2", + "@trivago/prettier-plugin-sort-imports": "^4.2.0", "@types/fs-extra": "^11.0.1", "@types/gtag.js": "^0.0.13", "@types/http-server": "^0.12.1", From 3b5e3e84bc495e0588bac12ee57d0f96da949716 Mon Sep 17 00:00:00 2001 From: thinkasany <117748716+thinkasany@users.noreply.github.com> Date: Mon, 21 Aug 2023 10:03:48 +0800 Subject: [PATCH 062/318] docs(tabs): remove useless string in Description (#44307) --- components/tabs/index.en-US.md | 2 +- components/tabs/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 7ae5cc22cb04..de4ef153840a 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -48,7 +48,7 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | activeKey | Current TabPane's key | string | - | | | addIcon | Customize add icon | ReactNode | - | 4.4.0 | -| animated | Whether to change tabs with animation.` | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | Whether to change tabs with animation. | boolean \| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | Centers tabs | boolean | false | 4.4.0 | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index bbef94ed431f..e6f60916bb1a 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -50,7 +50,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | --- | --- | --- | --- | --- | | activeKey | 当前激活 tab 面板的 key | string | - | | | addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | -| animated | 是否使用动画切换 Tabs` | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | +| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | | | centered | 标签居中展示 | boolean | false | 4.4.0 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | From b50928fb88946783258960f0f8f1d59a4028541e Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 21 Aug 2023 14:38:22 +0800 Subject: [PATCH 063/318] chore: split previewer (#44310) --- .dumi/theme/builtins/Previewer/Previewer.tsx | 21 ++++++++++++++++ .dumi/theme/builtins/Previewer/index.tsx | 25 ++++++-------------- 2 files changed, 28 insertions(+), 18 deletions(-) create mode 100644 .dumi/theme/builtins/Previewer/Previewer.tsx diff --git a/.dumi/theme/builtins/Previewer/Previewer.tsx b/.dumi/theme/builtins/Previewer/Previewer.tsx new file mode 100644 index 000000000000..a37144956fd6 --- /dev/null +++ b/.dumi/theme/builtins/Previewer/Previewer.tsx @@ -0,0 +1,21 @@ +import type { IPreviewerProps } from 'dumi'; +import { useTabMeta } from 'dumi'; +import React from 'react'; +import CodePreviewer from './CodePreviewer'; +import DesignPreviewer from './DesignPreviewer'; + +export interface AntdPreviewerProps extends IPreviewerProps { + originDebug?: IPreviewerProps['debug']; +} + +const Previewer: React.FC = (props) => { + const tab = useTabMeta(); + + if (tab?.frontmatter.title === 'Design') { + return ; + } + + return ; +}; + +export default Previewer; diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index a37144956fd6..ff79fd82a952 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,21 +1,10 @@ +import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; -import { useTabMeta } from 'dumi'; -import React from 'react'; -import CodePreviewer from './CodePreviewer'; -import DesignPreviewer from './DesignPreviewer'; -export interface AntdPreviewerProps extends IPreviewerProps { - originDebug?: IPreviewerProps['debug']; -} +const Previewer = React.lazy(() => import('./Previewer')); -const Previewer: React.FC = (props) => { - const tab = useTabMeta(); - - if (tab?.frontmatter.title === 'Design') { - return ; - } - - return ; -}; - -export default Previewer; +export default (props: IPreviewerProps) => ( + + + +); From 8e7d02cf53f2594b7cdaca9145ae724aa07809da 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: Mon, 21 Aug 2023 17:02:31 +0800 Subject: [PATCH 064/318] feat: support closeIcon (#44312) * feat: support closeIcon * feat: update comment * feat: optimize code --- .../__snapshots__/demo-extend.test.ts.snap | 301 ++++++++++-------- .../__snapshots__/demo.test.tsx.snap | 111 ++++--- .../__snapshots__/index.test.tsx.snap | 190 ++++++----- components/tour/__tests__/index.test.tsx | 103 ++++++ components/tour/index.en-US.md | 2 + components/tour/index.zh-CN.md | 2 + components/tour/panelRender.tsx | 30 +- package.json | 2 +- 8 files changed, 472 insertions(+), 269 deletions(-) diff --git a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap index 7bb1d2342104..6174ddb05153 100644 --- a/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tour/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -91,25 +91,29 @@ Array [ class="ant-tour-inner" > - + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
- + +
{ expect(container.querySelector('.ant-tour-primary .ant-tour-content')).toBeTruthy(); expect(baseElement).toMatchSnapshot(); }); + + it('support closeIcon', () => { + const Demo = ({ closeIcon = false }: { closeIcon?: React.ReactNode }) => { + const createBtnRef = useRef(null); + const updateBtnRef = useRef(null); + const deleteBtnRef = useRef(null); + return ( +
+
+ +
+ + +
+
+ + createBtnRef.current!, + mask: true, + }, + { + title: '更新', + closeIcon: !closeIcon, + description: ( +
+ 更新一条数据 + +
+ ), + target: () => updateBtnRef.current!, + }, + { + title: '删除', + closeIcon: Close, + description: ( +
+ 危险操作:删除一条数据 + +
+ ), + target: () => deleteBtnRef.current!, + }, + ]} + /> +
+ ); + }; + + const { baseElement, rerender } = render(); + const resetIndex = () => { + // reset + fireEvent.click(baseElement.querySelector('.ant-tour-prev-btn')!); + fireEvent.click(baseElement.querySelector('.ant-tour-prev-btn')!); + }; + expect(baseElement.querySelector('.ant-tour-close')).toBeFalsy(); + fireEvent.click(baseElement.querySelector('.ant-tour-next-btn')!); + expect(baseElement.querySelector('.ant-tour-close')).toBeTruthy(); + expect(baseElement.querySelector('.ant-tour-close-icon')).toBeTruthy(); + fireEvent.click(baseElement.querySelector('.ant-tour-next-btn')!); + expect(baseElement.querySelector('.ant-tour-close')).toBeTruthy(); + expect(baseElement.querySelector('.ant-tour-close-icon')).toBeFalsy(); + expect(baseElement.querySelector('.custom-del-close-icon')).toBeTruthy(); + + resetIndex(); + + rerender(); + expect(baseElement.querySelector('.ant-tour-close')).toBeTruthy(); + expect(baseElement.querySelector('.ant-tour-close-icon')).toBeTruthy(); + fireEvent.click(baseElement.querySelector('.ant-tour-next-btn')!); + expect(baseElement.querySelector('.ant-tour-close')).toBeFalsy(); + expect(baseElement.querySelector('.ant-tour-close-icon')).toBeFalsy(); + fireEvent.click(baseElement.querySelector('.ant-tour-next-btn')!); + expect(baseElement.querySelector('.ant-tour-close')).toBeTruthy(); + expect(baseElement.querySelector('.ant-tour-close-icon')).toBeFalsy(); + expect(baseElement.querySelector('.custom-del-close-icon')).toBeTruthy(); + + resetIndex(); + + rerender(X} />); + expect(baseElement.querySelector('.ant-tour-close')).toBeTruthy(); + expect(baseElement.querySelector('.custom-global-close-icon')).toBeTruthy(); + fireEvent.click(baseElement.querySelector('.ant-tour-next-btn')!); + expect(baseElement.querySelector('.ant-tour-close')).toBeFalsy(); + expect(baseElement.querySelector('.ant-tour-close-icon')).toBeFalsy(); + expect(baseElement.querySelector('.custom-global-close-icon')).toBeFalsy(); + fireEvent.click(baseElement.querySelector('.ant-tour-next-btn')!); + expect(baseElement.querySelector('.ant-tour-close')).toBeTruthy(); + expect(baseElement.querySelector('.ant-tour-close-icon')).toBeFalsy(); + expect(baseElement.querySelector('.custom-del-close-icon')).toBeTruthy(); + + resetIndex(); + }); }); diff --git a/components/tour/index.en-US.md b/components/tour/index.en-US.md index afbabbf7e97b..8dbcc589c1c6 100644 --- a/components/tour/index.en-US.md +++ b/components/tour/index.en-US.md @@ -34,6 +34,7 @@ Common props ref：[Common props](/docs/react/common-props) | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean`\|`{ pointAtCenter: boolean}` | `true` | | +| closeIcon | Customize close icon | `React.ReactNode` | `true` | 5.9.0 | | placement | Position of the guide card relative to the target element | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | | | onClose | Callback function on shutdown | `Function` | - | | | mask | Whether to enable masking, change mask style and fill color by pass custom props | `boolean \| { style?: React.CSSProperties; color?: string; }` | `true` | | @@ -51,6 +52,7 @@ Common props ref：[Common props](/docs/react/common-props) | --- | --- | --- | --- | --- | | target | Get the element the guide card points to. Empty makes it show in center of screen | `() => HTMLElement` `HTMLElement` | - | | | arrow | Whether to show the arrow, including the configuration whether to point to the center of the element | `boolean` `{ pointAtCenter: boolean}` | `true` | | +| closeIcon | Customize close icon | `React.ReactNode` | `true` | 5.9.0 | | cover | Displayed pictures or videos | `ReactNode` | - | | | title | title | `ReactNode` | - | | | description | description | `ReactNode` | - | | diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md index 3e09e4d85dc6..430dc1ae25a1 100644 --- a/components/tour/index.zh-CN.md +++ b/components/tour/index.zh-CN.md @@ -35,6 +35,7 @@ tag: New | 属性 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | | +| closeIcon | 自定义关闭按钮 | `React.ReactNode` | `true` | 5.9.0 | | placement | 引导卡片相对于目标元素的位置 | `center` `left` `leftTop` `leftBottom` `right` `rightTop` `rightBottom` `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | `bottom` | | | onClose | 关闭引导时的回调函数 | `Function` | - | | | onFinish | 引导完成时的回调 | `Function` | - | | @@ -53,6 +54,7 @@ tag: New | --- | --- | --- | --- | --- | | target | 获取引导卡片指向的元素，为空时居中于屏幕 | `() => HTMLElement` \| `HTMLElement` | - | | | arrow | 是否显示箭头，包含是否指向元素中心的配置 | `boolean` \| `{ pointAtCenter: boolean}` | `true` | | +| closeIcon | 自定义关闭按钮 | `React.ReactNode` | `true` | 5.9.0 | | cover | 展示的图片或者视频 | `ReactNode` | - | | | title | 标题 | `ReactNode` | - | | | description | 主要描述部分 | `ReactNode` | - | | diff --git a/components/tour/panelRender.tsx b/components/tour/panelRender.tsx index 039c5f7a28c5..1d56851738be 100644 --- a/components/tour/panelRender.tsx +++ b/components/tour/panelRender.tsx @@ -7,6 +7,7 @@ import Button from '../button'; import { useLocale } from '../locale'; import defaultLocale from '../locale/en_US'; import type { TourStepProps } from './interface'; +import useClosable from '../_util/hooks/useClosable'; function isValidNode(node: ReactNode): boolean { return node !== undefined && node !== null; @@ -17,9 +18,18 @@ interface TourPanelProps { current: number; type: TourStepProps['type']; indicatorsRender?: TourStepProps['indicatorsRender']; + closeIcon?: ReactNode; } -const TourPanel: React.FC = ({ stepProps, current, type, indicatorsRender }) => { +// Due to the independent design of Panel, it will be too coupled to put in rc-tour, +// so a set of Panel logic is implemented separately in antd. +const TourPanel: React.FC = ({ + stepProps, + current, + type, + indicatorsRender, + closeIcon, +}) => { const { prefixCls, total = 1, @@ -34,10 +44,26 @@ const TourPanel: React.FC = ({ stepProps, current, type, indicat prevButtonProps, type: stepType, className, + closeIcon: stepCloseIcon, } = stepProps; const mergedType = stepType ?? type; + const mergedCloseIcon = stepCloseIcon ?? closeIcon; + const mergedClosable = mergedCloseIcon !== false && mergedCloseIcon !== null; + + const [closable, mergedDisplayCloseIcon] = useClosable( + mergedClosable, + mergedCloseIcon, + (icon) => ( + + {icon} + + ), + , + true, + ); + const isLastStep = current === total - 1; const prevBtnClick = () => { @@ -96,7 +122,7 @@ const TourPanel: React.FC = ({ stepProps, current, type, indicat return (
- + {closable && mergedDisplayCloseIcon} {coverNode} {headerNode} {descriptionNode} diff --git a/package.json b/package.json index 6111cd2365c5..a10c21d44e51 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "@ctrl/tinycolor": "^3.6.0", "@rc-component/color-picker": "~1.4.0", "@rc-component/mutate-observer": "^1.1.0", - "@rc-component/tour": "~1.8.1", + "@rc-component/tour": "~1.9.0", "@rc-component/trigger": "^1.15.0", "classnames": "^2.2.6", "copy-to-clipboard": "^3.2.0", From e02e53b817fac7e99ac0c9af6a7ddc7aca2e3e20 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 21 Aug 2023 19:48:50 +0800 Subject: [PATCH 065/318] docs: link preload => prefetch (#44320) --- .dumirc.ts | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index f9aed1f0e5ec..a83b20d755c2 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -44,56 +44,56 @@ export default defineConfig({ }, links: [ { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.woff', type: 'font/woff', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_6e11e43nfj.ttf', type: 'font/ttf', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.woff', type: 'font/woff', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/t/webfont_exesdog9toj.ttf', type: 'font/ttf', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'preload', + rel: 'prefetch', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff', type: 'font/woff2', From 21a2265efd1481f39d17a15322f384934e0983d7 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 21 Aug 2023 19:51:47 +0800 Subject: [PATCH 066/318] docs: show mirror modal on page load (#44291) * docs: show mirror modal on page load * chore: code clean * chore: update * fix: pathname reg * chore: escape * feat: add lang check * chore: add langcheck * feat: use src file * chore: update css * chore: update link * Update .dumi/mirror-modal.js Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: MadCcc <1075746765@qq.com> --------- Signed-off-by: MadCcc <1075746765@qq.com> Co-authored-by: lijianan <574980606@qq.com> --- .dumi/mirror-modal.js | 172 +++++++++++++++++++++++++++++ .dumi/theme/slots/Header/index.tsx | 39 +------ .dumirc.ts | 7 ++ 3 files changed, 181 insertions(+), 37 deletions(-) create mode 100644 .dumi/mirror-modal.js diff --git a/.dumi/mirror-modal.js b/.dumi/mirror-modal.js new file mode 100644 index 000000000000..71ce7b2e28f4 --- /dev/null +++ b/.dumi/mirror-modal.js @@ -0,0 +1,172 @@ +(function createMirrorModal() { + if ( + (navigator.languages.includes('zh') || navigator.languages.includes('zh-CN')) && + /-cn\/?$/.test(window.location.pathname) && + !['ant-design.gitee.io', 'ant-design.antgroup.com'].includes(window.location.hostname) + ) { + const ANTD_DOT_NOT_SHOW_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; + + const lastShowTime = window.localStorage.getItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL); + if ( + lastShowTime && + lastShowTime !== 'true' && + Date.now() - new Date(lastShowTime).getTime() < 7 * 24 * 60 * 60 * 1000 + ) { + return; + } + + const style = document.createElement('style'); + style.innerHTML = ` + @keyframes mirror-fade-in { + from { + opacity: 0; + } + to { + opacity: 1; + } + } + + @keyframes mirror-zoom-in { + from { + transform: scale(0.8); + } + to { + transform: scale(1); + } + } + + .mirror-modal-mask { + position: fixed; + inset: 0; + height: '100vh'; + width: '100vw'; + background: rgba(0, 0, 0, 0.3); + z-index: 9999; + animation: mirror-fade-in 0.3s forwards; + } + + .mirror-modal-dialog { + position: fixed; + inset: 0; + top: 120px; + margin-left: auto; + margin-right: auto; + width: 400px; + height: 120px; + display: flex; + align-items: center; + flex-direction: column; + border-radius: 8px; + border: 1px solid #eee; + background: #fff; + padding: 20px 24px; + box-shadow: 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05); + animation: mirror-zoom-in 0.3s forwards; + } + + .mirror-modal-title { + font-size: 16px; + font-weight: 500; + align-self: flex-start; + margin-bottom: 8px; + } + + .mirror-modal-content { + font-size: 14px; + align-self: flex-start; + margin-bottom: 16px; + } + + .mirror-modal-btns { + align-self: flex-end; + margin-top: auto; + display: flex; + align-items: center; + } + + .mirror-modal-btn { + border-radius: 6px; + cursor: pointer; + height: 32px; + box-sizing: border-box; + font-size: 14px; + padding: 4px 16px; + display: inline-flex; + align-items: center; + text-decoration: none; + transition: all 0.2s; + } + + .mirror-modal-confirm-btn { + background: #1677ff; + color: #fff; + } + + .mirror-modal-confirm-btn:hover { + background: #4096ff; + } + + .mirror-modal-confirm-btn:active { + background: #0958d9; + } + + .mirror-modal-cancel-btn { + border: 1px solid #eee; + color: #000; + margin-right: 8px; + } + + .mirror-modal-cancel-btn:hover { + border-color: #4096ff; + color: #4096ff + } + + .mirror-modal-cancel-btn:active { + border-color: #0958d9; + color: #0958d9; + } + `; + document.head.append(style); + + const modal = document.createElement('div'); + modal.className = 'mirror-modal-mask'; + + const dialog = document.createElement('div'); + dialog.className = 'mirror-modal-dialog'; + modal.append(dialog); + + const title = document.createElement('div'); + title.className = 'mirror-modal-title'; + title.innerText = '提示'; + dialog.append(title); + + const content = document.createElement('div'); + content.className = 'mirror-modal-content'; + content.innerText = '国内用户推荐访问国内镜像以获得极速体验～'; + dialog.append(content); + + const btnWrapper = document.createElement('div'); + btnWrapper.className = 'mirror-modal-btns'; + dialog.append(btnWrapper); + + const cancelBtn = document.createElement('a'); + cancelBtn.className = 'mirror-modal-cancel-btn mirror-modal-btn'; + cancelBtn.innerText = '7 天内不再显示'; + btnWrapper.append(cancelBtn); + cancelBtn.addEventListener('click', () => { + window.localStorage.setItem(ANTD_DOT_NOT_SHOW_MIRROR_MODAL, new Date().toISOString()); + document.body.removeChild(modal); + document.head.removeChild(style); + document.body.style.overflow = ''; + }); + + const confirmBtn = document.createElement('a'); + confirmBtn.className = 'mirror-modal-confirm-btn mirror-modal-btn'; + confirmBtn.href = window.location.href.replace(window.location.host, 'ant-design.antgroup.com'); + confirmBtn.innerText = '🚀 立刻前往'; + btnWrapper.append(confirmBtn); + + document.body.append(modal); + document.body.style.overflow = 'hidden'; + } +})(); diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 163a8dec1a69..4e68fe78ae60 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -4,11 +4,11 @@ import classNames from 'classnames'; import { useLocation, useSiteData } from 'dumi'; import DumiSearchBar from 'dumi/theme-default/slots/SearchBar'; import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'; -import { Col, Modal, Popover, Row, Select } from 'antd'; +import { Col, Popover, Row, Select } from 'antd'; import useLocale from '../../../hooks/useLocale'; import DirectionIcon from '../../common/DirectionIcon'; import * as utils from '../../utils'; -import { getThemeConfig, ping } from '../../utils'; +import { getThemeConfig } from '../../utils'; import type { SiteContextProps } from '../SiteContext'; import SiteContext from '../SiteContext'; import Logo from './Logo'; @@ -109,16 +109,6 @@ const useStyle = createStyles(({ token, css }) => { }; }); -const SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL = 'ANT_DESIGN_DO_NOT_OPEN_MIRROR_MODAL'; - -function disableAntdMirrorModal() { - window.localStorage.setItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL, 'true'); -} - -function shouldOpenAntdMirrorModal() { - return !window.localStorage.getItem(SHOULD_OPEN_ANT_DESIGN_MIRROR_MODAL); -} - interface HeaderState { menuVisible: boolean; windowWidth: number; @@ -167,31 +157,6 @@ const Header: React.FC = () => { useEffect(() => { onWindowResize(); window.addEventListener('resize', onWindowResize); - pingTimer.current = ping((status) => { - if (status !== 'timeout' && status !== 'error') { - if ( - // process.env.NODE_ENV === 'production' && - window.location.host !== 'ant-design.antgroup.com' && - shouldOpenAntdMirrorModal() - ) { - Modal.confirm({ - title: '提示', - content: '内网用户推荐访问国内镜像以获得极速体验～', - okText: '🚀 立刻前往', - cancelText: '不再弹出', - closable: true, - zIndex: 99999, - onOk() { - window.location.host = 'ant-design.antgroup.com'; - disableAntdMirrorModal(); - }, - onCancel() { - disableAntdMirrorModal(); - }, - }); - } - } - }); return () => { window.removeEventListener('resize', onWindowResize); if (pingTimer.current) { diff --git a/.dumirc.ts b/.dumirc.ts index a83b20d755c2..a374f7a8f795 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -3,6 +3,7 @@ import path from 'path'; import rehypeAntd from './.dumi/rehypeAntd'; import remarkAntd from './.dumi/remarkAntd'; import { version } from './package.json'; +import * as fs from 'fs-extra'; export default defineConfig({ conventionRoutes: { @@ -158,4 +159,10 @@ export default defineConfig({ })(); `, ], + scripts: [ + { + async: true, + content: fs.readFileSync(path.join(__dirname, '.dumi', 'mirror-modal.js')).toString(), + }, + ], }); From b26e3a77f99527e6531e767bac005a6e642724ba 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: Mon, 21 Aug 2023 20:15:49 +0800 Subject: [PATCH 067/318] fix: WaterMark clip logic (#44321) * fix: cut logic * chore: fix size * test: update snapshot * chore: rm useless code --- .../__snapshots__/demo-extend.test.ts.snap | 10 +- .../__tests__/__snapshots__/demo.test.ts.snap | 6 +- .../__snapshots__/index.test.tsx.snap | 12 +- components/watermark/__tests__/index.test.tsx | 2 +- components/watermark/demo/custom.tsx | 2 +- components/watermark/index.tsx | 145 +++++------------- components/watermark/useClips.ts | 136 ++++++++++++++++ components/watermark/utils.ts | 12 -- 8 files changed, 194 insertions(+), 131 deletions(-) create mode 100644 components/watermark/useClips.ts diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap index 6eb701ceba52..845deb9ec148 100644 --- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -9,7 +9,7 @@ exports[`renders components/watermark/demo/basic.tsx extend context correctly 1` style="height: 500px;" />
`; @@ -49,7 +49,7 @@ exports[`renders components/watermark/demo/custom.tsx extend context correctly 1 style="z-index: 10; width: 100%; max-width: 800px; position: relative;" />
diff --git a/components/watermark/__tests__/__snapshots__/index.test.tsx.snap b/components/watermark/__tests__/__snapshots__/index.test.tsx.snap index 8744905df39d..a19ad3c7de10 100644 --- a/components/watermark/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/watermark/__tests__/__snapshots__/index.test.tsx.snap @@ -7,7 +7,7 @@ exports[`Watermark Image watermark snapshot 1`] = ` style="position: relative;" >
@@ -20,7 +20,7 @@ exports[`Watermark Interleaved watermark backgroundSize is correct 1`] = ` style="position: relative;" >
@@ -33,7 +33,7 @@ exports[`Watermark Invalid image watermark 1`] = ` style="position: relative;" >
@@ -46,7 +46,7 @@ exports[`Watermark MutationObserver should work properly 1`] = ` style="position: relative;" >
@@ -59,7 +59,7 @@ exports[`Watermark Observe the modification of style 1`] = ` style="position: relative;" >
@@ -85,7 +85,7 @@ exports[`Watermark The watermark should render successfully 1`] = ` style="position: relative;" >
diff --git a/components/watermark/__tests__/index.test.tsx b/components/watermark/__tests__/index.test.tsx index be45ffb33b0c..8de5a7aaf21b 100644 --- a/components/watermark/__tests__/index.test.tsx +++ b/components/watermark/__tests__/index.test.tsx @@ -53,7 +53,7 @@ describe('Watermark', () => { />, ); const target = container.querySelector('.watermark div'); - expect(target?.style.backgroundSize).toBe('600px'); + expect(target?.style.backgroundSize).toBe('720px'); expect(container).toMatchSnapshot(); }); diff --git a/components/watermark/demo/custom.tsx b/components/watermark/demo/custom.tsx index c73c01a86826..54a4fac98c7c 100644 --- a/components/watermark/demo/custom.tsx +++ b/components/watermark/demo/custom.tsx @@ -103,7 +103,7 @@ const App: React.FC = () => { - + diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx index 43d99510728f..fa5b54c86b28 100644 --- a/components/watermark/index.tsx +++ b/components/watermark/index.tsx @@ -1,15 +1,11 @@ +import React, { useEffect, useRef } from 'react'; + import MutateObserver from '@rc-component/mutate-observer'; import classNames from 'classnames'; -import React, { useEffect, useRef } from 'react'; -import { getPixelRatio, getStyleStr, reRendering, rotateWatermark } from './utils'; -import theme from '../theme'; -/** - * Base size of the canvas, 1 for parallel layout and 2 for alternate layout - * Only alternate layout is currently supported - */ -const BaseSize = 2; -const FontGap = 3; +import theme from '../theme'; +import useClips, { FontGap } from './useClips'; +import { getPixelRatio, getStyleStr, reRendering } from './utils'; export interface WatermarkProps { zIndex?: number; @@ -117,7 +113,7 @@ const Watermark: React.FC = (props) => { getStyleStr({ ...getMarkStyle(), backgroundImage: `url('${base64Url}')`, - backgroundSize: `${(gapX + markWidth) * BaseSize}px`, + backgroundSize: `${Math.floor(markWidth)}px`, }), ); containerRef.current?.append(watermarkRef.current); @@ -138,53 +134,20 @@ const Watermark: React.FC = (props) => { if (!image && ctx.measureText) { ctx.font = `${Number(fontSize)}px ${fontFamily}`; const contents = Array.isArray(content) ? content : [content]; - const widths = contents.map((item) => ctx.measureText(item!).width); - defaultWidth = Math.ceil(Math.max(...widths)); - defaultHeight = Number(fontSize) * contents.length + (contents.length - 1) * FontGap; + const sizes = contents.map((item) => { + const metrics = ctx.measureText(item!); + + return [metrics.width, metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent]; + }); + defaultWidth = Math.ceil(Math.max(...sizes.map((size) => size[0]))); + defaultHeight = + Math.ceil(Math.max(...sizes.map((size) => size[1]))) * contents.length + + (contents.length - 1) * FontGap; } return [width ?? defaultWidth, height ?? defaultHeight] as const; }; - const fillTexts = ( - ctx: CanvasRenderingContext2D, - drawX: number, - drawY: number, - drawWidth: number, - drawHeight: number, - ) => { - const ratio = getPixelRatio(); - const mergedFontSize = Number(fontSize) * ratio; - ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${drawHeight}px ${fontFamily}`; - ctx.fillStyle = color; - ctx.textAlign = 'center'; - ctx.textBaseline = 'top'; - ctx.translate(drawWidth / 2, 0); - const contents = Array.isArray(content) ? content : [content]; - contents?.forEach((item, index) => { - ctx.fillText(item ?? '', drawX, drawY + index * (mergedFontSize + FontGap * ratio)); - }); - }; - - const drawText = ( - canvas: HTMLCanvasElement, - ctx: CanvasRenderingContext2D, - drawX: number, - drawY: number, - drawWidth: number, - drawHeight: number, - alternateRotateX: number, - alternateRotateY: number, - alternateDrawX: number, - alternateDrawY: number, - markWidth: number, - ) => { - fillTexts(ctx, drawX, drawY, drawWidth, drawHeight); - /** Fill the interleaved text after rotation */ - ctx.restore(); - rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate); - fillTexts(ctx, alternateDrawX, alternateDrawY, drawWidth, drawHeight); - appendWatermark(canvas.toDataURL(), markWidth); - }; + const getClips = useClips(); const renderWatermark = () => { const canvas = document.createElement('canvas'); @@ -197,67 +160,43 @@ const Watermark: React.FC = (props) => { const ratio = getPixelRatio(); const [markWidth, markHeight] = getMarkSize(ctx); - const canvasWidth = (gapX + markWidth) * ratio; - const canvasHeight = (gapY + markHeight) * ratio; - canvas.setAttribute('width', `${canvasWidth * BaseSize}px`); - canvas.setAttribute('height', `${canvasHeight * BaseSize}px`); - const drawX = (gapX * ratio) / 2; - const drawY = (gapY * ratio) / 2; - const drawWidth = markWidth * ratio; - const drawHeight = markHeight * ratio; - const rotateX = (drawWidth + gapX * ratio) / 2; - const rotateY = (drawHeight + gapY * ratio) / 2; - /** Alternate drawing parameters */ - const alternateDrawX = drawX + canvasWidth; - const alternateDrawY = drawY + canvasHeight; - const alternateRotateX = rotateX + canvasWidth; - const alternateRotateY = rotateY + canvasHeight; + const drawCanvas = ( + drawContent?: NonNullable | HTMLImageElement, + ) => { + const [textClips, clipWidth] = getClips( + drawContent || '', + rotate, + ratio, + markWidth, + markHeight, + { + color, + fontSize, + fontStyle, + fontWeight, + fontFamily, + }, + gapX, + gapY, + ); - ctx.save(); - rotateWatermark(ctx, rotateX, rotateY, rotate); + appendWatermark(textClips, clipWidth); + }; if (image) { const img = new Image(); img.onload = () => { - ctx.drawImage(img, drawX, drawY, drawWidth, drawHeight); - /** Draw interleaved pictures after rotation */ - ctx.restore(); - rotateWatermark(ctx, alternateRotateX, alternateRotateY, rotate); - ctx.drawImage(img, alternateDrawX, alternateDrawY, drawWidth, drawHeight); - appendWatermark(canvas.toDataURL(), markWidth); + drawCanvas(img); + }; + img.onerror = () => { + drawCanvas(content); }; - img.onerror = () => - drawText( - canvas, - ctx, - drawX, - drawY, - drawWidth, - drawHeight, - alternateRotateX, - alternateRotateY, - alternateDrawX, - alternateDrawY, - markWidth, - ); img.crossOrigin = 'anonymous'; img.referrerPolicy = 'no-referrer'; img.src = image; } else { - drawText( - canvas, - ctx, - drawX, - drawY, - drawWidth, - drawHeight, - alternateRotateX, - alternateRotateY, - alternateDrawX, - alternateDrawY, - markWidth, - ); + drawCanvas(content); } } }; diff --git a/components/watermark/useClips.ts b/components/watermark/useClips.ts new file mode 100644 index 000000000000..2392e67d6a88 --- /dev/null +++ b/components/watermark/useClips.ts @@ -0,0 +1,136 @@ +import type { WatermarkProps } from '.'; + +export const FontGap = 3; + +function prepareCanvas( + width: number, + height: number, + ratio: number = 1, +): [ + ctx: CanvasRenderingContext2D, + canvas: HTMLCanvasElement, + realWidth: number, + realHeight: number, +] { + const canvas = document.createElement('canvas'); + const ctx = canvas.getContext('2d')!; + + const realWidth = width * ratio; + const realHeight = height * ratio; + canvas.setAttribute('width', `${realWidth}px`); + canvas.setAttribute('height', `${realHeight}px`); + ctx.save(); + + return [ctx, canvas, realWidth, realHeight]; +} + +/** + * Get the clips of text content. + * This is a lazy hook function since SSR no need this + */ +export default function useClips() { + // Get single clips + function getClips( + content: NonNullable | HTMLImageElement, + rotate: number, + ratio: number, + width: number, + height: number, + font: Required>, + gapX: number, + gapY: number, + ): [dataURL: string, finalWidth: number, finalHeight: number] { + // ================= Text / Image ================= + const [ctx, canvas, contentWidth, contentHeight] = prepareCanvas(width, height, ratio); + + if (content instanceof HTMLImageElement) { + // Image + ctx.drawImage(content, 0, 0, contentWidth, contentHeight); + } else { + // Text + const { color, fontSize, fontStyle, fontWeight, fontFamily } = font; + const mergedFontSize = Number(fontSize) * ratio; + + ctx.font = `${fontStyle} normal ${fontWeight} ${mergedFontSize}px/${height}px ${fontFamily}`; + ctx.fillStyle = color; + ctx.textAlign = 'center'; + ctx.textBaseline = 'top'; + const contents = Array.isArray(content) ? content : [content]; + contents?.forEach((item, index) => { + ctx.fillText(item ?? '', contentWidth / 2, index * (mergedFontSize + FontGap * ratio)); + }); + } + + // ==================== Rotate ==================== + const angle = (Math.PI / 180) * Number(rotate); + const maxSize = Math.max(width, height); + const [rCtx, rCanvas, realMaxSize] = prepareCanvas(maxSize, maxSize, ratio); + + // Copy from `ctx` and rotate + rCtx.translate(realMaxSize / 2, realMaxSize / 2); + rCtx.rotate(angle); + rCtx.drawImage(canvas, -contentWidth / 2, -contentHeight / 2); + + // Get boundary of rotated text + function getRotatePos(x: number, y: number) { + const targetX = x * Math.cos(angle) - y * Math.sin(angle); + const targetY = x * Math.sin(angle) + y * Math.cos(angle); + return [targetX, targetY]; + } + + let left = 0; + let right = 0; + let top = 0; + let bottom = 0; + + const halfWidth = contentWidth / 2; + const halfHeight = contentHeight / 2; + const points = [ + [0 - halfWidth, 0 - halfHeight], + [0 + halfWidth, 0 - halfHeight], + [0 + halfWidth, 0 + halfHeight], + [0 - halfWidth, 0 + halfHeight], + ]; + points.forEach(([x, y]) => { + const [targetX, targetY] = getRotatePos(x, y); + left = Math.min(left, targetX); + right = Math.max(right, targetX); + top = Math.min(top, targetY); + bottom = Math.max(bottom, targetY); + }); + + const cutLeft = left + realMaxSize / 2; + const cutTop = top + realMaxSize / 2; + const cutWidth = right - left; + const cutHeight = bottom - top; + + // ================ Fill Alternate ================ + const realGapX = gapX * ratio; + const realGapY = gapY * ratio; + const filledWidth = (cutWidth + realGapX) * 2; + const filledHeight = cutHeight + realGapY; + + const [fCtx, fCanvas] = prepareCanvas(filledWidth, filledHeight); + + function drawImg(targetX = 0, targetY = 0) { + fCtx.drawImage( + rCanvas, + cutLeft, + cutTop, + cutWidth, + cutHeight, + targetX, + targetY, + cutWidth, + cutHeight, + ); + } + drawImg(); + drawImg(cutWidth + realGapX, -cutHeight / 2 - realGapY / 2); + drawImg(cutWidth + realGapX, +cutHeight / 2 + realGapY / 2); + + return [fCanvas.toDataURL(), filledWidth / ratio, filledHeight / ratio]; + } + + return getClips; +} diff --git a/components/watermark/utils.ts b/components/watermark/utils.ts index 84103b59c533..e2ba19f73c4a 100644 --- a/components/watermark/utils.ts +++ b/components/watermark/utils.ts @@ -14,18 +14,6 @@ export function getPixelRatio() { return window.devicePixelRatio || 1; } -/** Rotate with the watermark as the center point */ -export function rotateWatermark( - ctx: CanvasRenderingContext2D, - rotateX: number, - rotateY: number, - rotate: number, -) { - ctx.translate(rotateX, rotateY); - ctx.rotate((Math.PI / 180) * Number(rotate)); - ctx.translate(-rotateX, -rotateY); -} - /** Whether to re-render the watermark */ export const reRendering = (mutation: MutationRecord, watermarkElement?: HTMLElement) => { let flag = false; From 73c5ce12946aec841d6ada6912e0e5e0e53e416a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 21 Aug 2023 22:07:56 +0800 Subject: [PATCH 068/318] test: update snapshot --- .../watermark/__tests__/__snapshots__/demo-extend.test.ts.snap | 2 +- components/watermark/useWatermark.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap index 5b17f33f5b70..1b915c583d14 100644 --- a/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/watermark/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1271,7 +1271,7 @@ Array [ style="position: relative;" >
, ] diff --git a/components/watermark/useWatermark.tsx b/components/watermark/useWatermark.tsx index 94b9d6d442ad..1da29c06675f 100644 --- a/components/watermark/useWatermark.tsx +++ b/components/watermark/useWatermark.tsx @@ -39,7 +39,7 @@ export default function useWatermark( getStyleStr({ ...markStyle, backgroundImage: `url('${base64Url}')`, - backgroundSize: `${markWidth}px`, + backgroundSize: `${Math.floor(markWidth)}px`, }), ); container.append(watermarkEle); From be80d1fb5c4bddf1c4bb9ccff2eb29773eb50ee5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 21 Aug 2023 23:09:49 +0800 Subject: [PATCH 069/318] chore: clean up --- components/watermark/useWatermark.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/components/watermark/useWatermark.tsx b/components/watermark/useWatermark.tsx index 1da29c06675f..89cc9f5ed46c 100644 --- a/components/watermark/useWatermark.tsx +++ b/components/watermark/useWatermark.tsx @@ -17,7 +17,6 @@ export type AppendWatermark = ( export default function useWatermark( markStyle: React.CSSProperties, - gapX: number, ): [ appendWatermark: AppendWatermark, removeWatermark: (container: HTMLElement) => void, From beb61e675137da0f978e19ce93f972428a68304b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Mon, 21 Aug 2023 23:22:36 +0800 Subject: [PATCH 070/318] chore: fix lint --- components/watermark/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/watermark/index.tsx b/components/watermark/index.tsx index 26b07563c492..259f039becd7 100644 --- a/components/watermark/index.tsx +++ b/components/watermark/index.tsx @@ -200,7 +200,7 @@ const Watermark: React.FC = (props) => { // ============================= Effect ============================= // Append watermark to the container - const [appendWatermark, removeWatermark, isWatermarkEle] = useWatermark(markStyle, gapX); + const [appendWatermark, removeWatermark, isWatermarkEle] = useWatermark(markStyle); useEffect(() => { if (watermarkInfo) { From da699b11bedd43bdb0624a90ac652a5d9e1c98b4 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 21 Aug 2023 23:28:14 +0800 Subject: [PATCH 071/318] docs: add fallback for previewer (#44327) * docs: add fallback for previewer * chore: code clean --- .dumi/theme/builtins/Previewer/index.tsx | 36 ++++++++++++++++++++---- 1 file changed, 31 insertions(+), 5 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index ff79fd82a952..b987d57bc3f0 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,10 +1,36 @@ import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; +import { Skeleton } from 'antd'; +import { createStyles } from 'antd-style'; const Previewer = React.lazy(() => import('./Previewer')); -export default (props: IPreviewerProps) => ( - - - -); +const useStyle = createStyles(({ css }) => ({ + skeletonWrapper: css` + width: 100% !important; + height: 500px; + margin-bottom: 16px; + `, +})); + +export default (props: IPreviewerProps) => { + const { styles } = useStyle(); + return ( + + {' '} + + } + > + + + ); +}; From d1d3b57dcb9a2ea0cc0cf4fa9f1baa07ed2450b1 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 22 Aug 2023 09:38:11 +0800 Subject: [PATCH 072/318] feat: input token (#44325) * feat: input token * feat: input number token * feat: input token * fix: date-picker & calendar * fix: calendar style * fix: token use --- components/calendar/style/index.ts | 24 +-- components/date-picker/style/index.ts | 43 +++-- components/input-number/style/index.ts | 74 +++++--- components/input/style/index.ts | 202 +++++++++++++-------- components/mentions/style/index.ts | 20 +- components/pagination/style/index.ts | 6 +- components/theme/interface/components.ts | 3 +- components/typography/style/mixins.ts | 6 +- docs/react/migrate-less-variables.en-US.md | 38 +++- docs/react/migrate-less-variables.zh-CN.md | 38 +++- 10 files changed, 305 insertions(+), 149 deletions(-) diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index bacf33270cb4..cf11ecb93d59 100644 --- a/components/calendar/style/index.ts +++ b/components/calendar/style/index.ts @@ -1,8 +1,6 @@ import type { CSSObject } from '@ant-design/cssinjs'; import type { PickerPanelToken } from '../../date-picker/style'; import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style'; -import type { InputToken } from '../../input/style'; -import { initInputToken } from '../../input/style'; import { resetComponent } from '../../style'; import type { FullToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; @@ -40,7 +38,7 @@ export interface ComponentToken { itemActiveBg: string; } -interface CalendarToken extends InputToken>, PickerPanelToken { +interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken { calendarCls: string; dateValueHeight: number; weekHeight: number; @@ -215,18 +213,14 @@ export default genComponentStyleHook( 'Calendar', (token) => { const calendarCls = `${token.componentCls}-calendar`; - const calendarToken = mergeToken( - initInputToken>(token), - initPickerPanelToken(token), - { - calendarCls, - pickerCellInnerCls: `${token.componentCls}-cell-inner`, - dateValueHeight: token.controlHeightSM, - weekHeight: token.controlHeightSM * 0.75, - dateContentHeight: - (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2, - }, - ); + const calendarToken = mergeToken(token, initPickerPanelToken(token), { + calendarCls, + pickerCellInnerCls: `${token.componentCls}-cell-inner`, + dateValueHeight: token.controlHeightSM, + weekHeight: token.controlHeightSM * 0.75, + dateContentHeight: + (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2, + }); return [genCalendarStyles(calendarToken)]; }, diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 62ef3f039d5b..8173b72f45c6 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -1,10 +1,11 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { TinyColor } from '@ctrl/tinycolor'; -import type { InputToken } from '../../input/style'; +import type { SharedComponentToken, SharedInputToken } from '../../input/style'; import { genActiveStyle, genBasicInputStyle, genHoverStyle, + initComponentToken, initInputToken, } from '../../input/style'; import { resetComponent, roundedArrow, textEllipsis } from '../../style'; @@ -22,7 +23,7 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; -export interface ComponentToken { +export interface ComponentToken extends Exclude { /** * @desc 预设区域宽度 * @descEN Width of preset area @@ -61,9 +62,9 @@ export type PickerPanelToken = { pickerControlIconBorderWidth: number; }; -type PickerToken = InputToken> & PickerPanelToken; +type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken; -type SharedPickerToken = Omit; +type SharedPickerToken = TokenWithCommonCls & PickerPanelToken; const genPikerPadding = ( token: PickerToken, @@ -951,8 +952,8 @@ const genPickerStatusStyle: GenerateStyle = (token) => { [`&${componentCls}-focused, &:focus`]: { ...genActiveStyle( mergeToken(token, { - inputBorderActiveColor: colorError, - inputBorderHoverColor: colorError, + activeBorderColor: colorError, + hoverBorderColor: colorError, controlOutline: colorErrorOutline, }), ), @@ -972,8 +973,8 @@ const genPickerStatusStyle: GenerateStyle = (token) => { [`&${componentCls}-focused, &:focus`]: { ...genActiveStyle( mergeToken(token, { - inputBorderActiveColor: colorWarning, - inputBorderHoverColor: colorWarning, + activeBorderColor: colorWarning, + hoverBorderColor: colorWarning, controlOutline: colorWarningOutline, }), ), @@ -993,7 +994,7 @@ const genPickerStyle: GenerateStyle = (token) => { antCls, controlHeight, fontSize, - inputPaddingHorizontal, + paddingInline, colorBgContainer, lineWidth, lineType, @@ -1006,7 +1007,7 @@ const genPickerStyle: GenerateStyle = (token) => { controlHeightLG, fontSizeLG, controlHeightSM, - inputPaddingHorizontalSM, + paddingInlineSM, paddingXS, marginXS, colorTextDescription, @@ -1039,7 +1040,7 @@ const genPickerStyle: GenerateStyle = (token) => { { [componentCls]: { ...resetComponent(token), - ...genPikerPadding(token, controlHeight, fontSize, inputPaddingHorizontal), + ...genPikerPadding(token, controlHeight, fontSize, paddingInline), position: 'relative', display: 'inline-flex', alignItems: 'center', @@ -1117,7 +1118,7 @@ const genPickerStyle: GenerateStyle = (token) => { // Size '&-large': { - ...genPikerPadding(token, controlHeightLG, fontSizeLG, inputPaddingHorizontal), + ...genPikerPadding(token, controlHeightLG, fontSizeLG, paddingInline), [`${componentCls}-input > input`]: { fontSize: fontSizeLG, @@ -1125,7 +1126,7 @@ const genPickerStyle: GenerateStyle = (token) => { }, '&-small': { - ...genPikerPadding(token, controlHeightSM, fontSize, inputPaddingHorizontalSM), + ...genPikerPadding(token, controlHeightSM, fontSize, paddingInlineSM), }, [`${componentCls}-suffix`]: { @@ -1195,7 +1196,7 @@ const genPickerStyle: GenerateStyle = (token) => { // Clear [`${componentCls}-clear`]: { - insetInlineEnd: inputPaddingHorizontal, + insetInlineEnd: paddingInline, }, '&:hover': { @@ -1208,7 +1209,7 @@ const genPickerStyle: GenerateStyle = (token) => { [`${componentCls}-active-bar`]: { bottom: -lineWidth, height: lineWidthBold, - marginInlineStart: inputPaddingHorizontal, + marginInlineStart: paddingInline, background: colorPrimary, opacity: 0, transition: `all ${motionDurationSlow} ease-out`, @@ -1229,11 +1230,11 @@ const genPickerStyle: GenerateStyle = (token) => { [`&${componentCls}-small`]: { [`${componentCls}-clear`]: { - insetInlineEnd: inputPaddingHorizontalSM, + insetInlineEnd: paddingInlineSM, }, [`${componentCls}-active-bar`]: { - marginInlineStart: inputPaddingHorizontalSM, + marginInlineStart: paddingInlineSM, }, }, }, @@ -1342,7 +1343,7 @@ const genPickerStyle: GenerateStyle = (token) => { position: 'absolute', zIndex: 1, display: 'none', - marginInlineStart: inputPaddingHorizontal * 1.5, + marginInlineStart: paddingInline * 1.5, transition: `left ${motionDurationSlow} ease-out`, ...roundedArrow( sizePopupArrow, @@ -1501,10 +1502,7 @@ export const initPickerPanelToken = (token: TokenWithCommonCls): Pi export default genComponentStyleHook( 'DatePicker', (token) => { - const pickerToken = mergeToken( - initInputToken>(token), - initPickerPanelToken(token), - ); + const pickerToken = mergeToken(initInputToken(token), initPickerPanelToken(token)); return [ genPickerStyle(pickerToken), genPickerStatusStyle(pickerToken), @@ -1517,6 +1515,7 @@ export default genComponentStyleHook( ]; }, (token) => ({ + ...initComponentToken(token), presetsWidth: 120, presetsMaxWidth: 200, zIndexPopup: token.zIndexPopupBase + 50, diff --git a/components/input-number/style/index.ts b/components/input-number/style/index.ts index 07032b4a338b..c9002a364d03 100644 --- a/components/input-number/style/index.ts +++ b/components/input-number/style/index.ts @@ -1,5 +1,7 @@ -import type { InputToken } from '../../input/style'; +import type { SharedInputToken, SharedComponentToken } from '../../input/style'; import { + initComponentToken, + initInputToken, genActiveStyle, genBasicInputStyle, genDisabledStyle, @@ -7,14 +9,13 @@ import { genInputGroupStyle, genPlaceholderStyle, genStatusStyle, - initInputToken, } from '../../input/style'; import { resetComponent, resetIcon } from '../../style'; import { genCompactItemStyle } from '../../style/compact-item'; import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -export interface ComponentToken { +export interface ComponentToken extends SharedComponentToken { /** * @desc 输入框宽度 * @descEN Width of input @@ -36,9 +37,29 @@ export interface ComponentToken { * @descEN Handle visible */ handleVisible: 'auto' | true; + /** + * @desc 操作按钮背景色 + * @descEN Background color of handle + */ + handleBg: string; + /** + * @desc 操作按钮激活背景色 + * @descEN Active background color of handle + */ + handleActiveBg: string; + /** + * @desc 操作按钮悬浮颜色 + * @descEN Hover color of handle + */ + handleHoverColor: string; + /** + * @desc 操作按钮边框颜色 + * @descEN Border color of handle + */ + handleBorderColor: string; } -type InputNumberToken = InputToken>; +type InputNumberToken = FullToken<'InputNumber'> & SharedInputToken; export const genRadiusStyle = ( { componentCls, borderRadiusSM, borderRadiusLG }: InputNumberToken, @@ -72,18 +93,20 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe controlHeightLG, controlHeightSM, colorError, - inputPaddingHorizontalSM, + paddingInlineSM, colorTextDescription, motionDurationMid, - colorPrimary, - inputPaddingHorizontal, - inputPaddingVertical, - colorBgContainer, + handleHoverColor, + paddingInline, + paddingBlock, + handleBg, + handleActiveBg, colorTextDisabled, borderRadiusSM, borderRadiusLG, controlWidth, handleVisible, + handleBorderColor, } = token; return [ @@ -124,7 +147,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe [`input${componentCls}-input`]: { height: controlHeightSM - 2 * lineWidth, - padding: `0 ${inputPaddingHorizontalSM}px`, + padding: `0 ${paddingInlineSM}px`, }, }, @@ -186,7 +209,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe '&-input': { ...resetComponent(token), width: '100%', - padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`, + padding: `${paddingBlock}px ${paddingInline}px`, textAlign: 'start', backgroundColor: 'transparent', border: 0, @@ -222,7 +245,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe insetInlineEnd: 0, width: token.handleWidth, height: '100%', - background: colorBgContainer, + background: handleBg, borderStartStartRadius: 0, borderStartEndRadius: borderRadius, borderEndEndRadius: borderRadius, @@ -261,10 +284,10 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe lineHeight: 0, textAlign: 'center', cursor: 'pointer', - borderInlineStart: `${lineWidth}px ${lineType} ${colorBorder}`, + borderInlineStart: `${lineWidth}px ${lineType} ${handleBorderColor}`, transition: `all ${motionDurationMid} linear`, '&:active': { - background: token.colorFillAlter, + background: handleActiveBg, }, // Hover @@ -275,7 +298,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe ${componentCls}-handler-up-inner, ${componentCls}-handler-down-inner `]: { - color: colorPrimary, + color: handleHoverColor, }, }, @@ -293,7 +316,7 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe }, [`${componentCls}-handler-down`]: { - borderBlockStart: `${lineWidth}px ${lineType} ${colorBorder}`, + borderBlockStart: `${lineWidth}px ${lineType} ${handleBorderColor}`, borderEndEndRadius: borderRadius, }, @@ -344,8 +367,8 @@ const genInputNumberStyles: GenerateStyle = (token: InputNumbe const genAffixWrapperStyles: GenerateStyle = (token: InputNumberToken) => { const { componentCls, - inputPaddingVertical, - inputPaddingHorizontal, + paddingBlock, + paddingInline, inputAffixPadding, controlWidth, borderRadiusLG, @@ -361,7 +384,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb display: 'inline-flex', width: controlWidth, padding: 0, - paddingInlineStart: inputPaddingHorizontal, + paddingInlineStart: paddingInline, '&-lg': { borderRadius: borderRadiusLG, @@ -395,7 +418,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb }, [`input${componentCls}-input`]: { - padding: `${inputPaddingVertical}px 0`, + padding: `${paddingBlock}px 0`, }, '&::before': { @@ -427,7 +450,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb insetInlineEnd: 0, zIndex: 1, height: '100%', - marginInlineEnd: inputPaddingHorizontal, + marginInlineEnd: paddingInline, marginInlineStart: inputAffixPadding, }, }, @@ -439,7 +462,7 @@ const genAffixWrapperStyles: GenerateStyle = (token: InputNumb export default genComponentStyleHook( 'InputNumber', (token) => { - const inputNumberToken = initInputToken>(token); + const inputNumberToken = mergeToken(token, initInputToken(token)); return [ genInputNumberStyles(inputNumberToken), genAffixWrapperStyles(inputNumberToken), @@ -450,9 +473,14 @@ export default genComponentStyleHook( ]; }, (token) => ({ + ...initComponentToken(token), controlWidth: 90, handleWidth: token.controlHeightSM - token.lineWidth * 2, handleFontSize: token.fontSize / 2, handleVisible: 'auto', + handleActiveBg: token.colorFillAlter, + handleBg: token.colorBgContainer, + handleHoverColor: token.colorPrimary, + handleBorderColor: token.colorBorder, }), ); diff --git a/components/input/style/index.ts b/components/input/style/index.ts index 1c8d6a99d889..ade0de6474c5 100644 --- a/components/input/style/index.ts +++ b/components/input/style/index.ts @@ -5,17 +5,61 @@ import type { GlobalToken } from '../../theme/interface'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -export type InputToken> = T & { +export interface SharedComponentToken { + /** + * @desc 输入框横向内边距 + * @descEN Horizontal padding of input + */ + paddingInline: number; + /** + * @desc 小号输入框横向内边距 + * @descEN Horizontal padding of small input + */ + paddingInlineSM: number; + /** + * @desc 大号输入框横向内边距 + * @descEN Horizontal padding of large input + */ + paddingInlineLG: number; + /** + * @desc 输入框纵向内边距 + * @descEN Vertical padding of input + */ + paddingBlock: number; + /** + * @desc 小号输入框纵向内边距 + * @descEN Vertical padding of small input + */ + paddingBlockSM: number; + /** + * @desc 大号输入框纵向内边距 + * @descEN Vertical padding of large input + */ + paddingBlockLG: number; + /** + * @desc 前/后置标签背景色 + * @descEN Background color of addon + */ + addonBg: string; + /** + * @desc 悬浮态边框色 + * @descEN Hover border color + */ + hoverBorderColor: string; + /** + * @desc 激活态边框色 + * @descEN Active border color + */ + activeBorderColor: string; +} + +export interface ComponentToken extends SharedComponentToken {} + +export interface SharedInputToken { inputAffixPadding: number; - inputPaddingVertical: number; - inputPaddingVerticalLG: number; - inputPaddingVerticalSM: number; - inputPaddingHorizontal: number; - inputPaddingHorizontalLG: number; - inputPaddingHorizontalSM: number; - inputBorderHoverColor: string; - inputBorderActiveColor: string; -}; +} + +interface InputToken extends FullToken<'Input'>, SharedInputToken {} export const genPlaceholderStyle = (color: string): CSSObject => ({ // Firefox @@ -32,12 +76,12 @@ export const genPlaceholderStyle = (color: string): CSSObject => ({ }); export const genHoverStyle = (token: InputToken): CSSObject => ({ - borderColor: token.inputBorderHoverColor, + borderColor: token.hoverBorderColor, borderInlineEndWidth: token.lineWidth, }); export const genActiveStyle = (token: InputToken) => ({ - borderColor: token.inputBorderHoverColor, + borderColor: token.activeBorderColor, boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`, borderInlineEndWidth: token.lineWidth, outline: 0, @@ -52,21 +96,15 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({ opacity: 1, '&:hover': { - ...genHoverStyle(mergeToken(token, { inputBorderHoverColor: token.colorBorder })), + ...genHoverStyle(mergeToken(token, { hoverBorderColor: token.colorBorder })), }, }); const genInputLargeStyle = (token: InputToken): CSSObject => { - const { - inputPaddingVerticalLG, - fontSizeLG, - lineHeightLG, - borderRadiusLG, - inputPaddingHorizontalLG, - } = token; + const { paddingBlockLG, fontSizeLG, lineHeightLG, borderRadiusLG, paddingInlineLG } = token; return { - padding: `${inputPaddingVerticalLG}px ${inputPaddingHorizontalLG}px`, + padding: `${paddingBlockLG}px ${paddingInlineLG}px`, fontSize: fontSizeLG, lineHeight: lineHeightLG, borderRadius: borderRadiusLG, @@ -74,7 +112,7 @@ const genInputLargeStyle = (token: InputToken): CSSObject => { }; export const genInputSmallStyle = (token: InputToken): CSSObject => ({ - padding: `${token.inputPaddingVerticalSM}px ${token.controlPaddingHorizontalSM - 1}px`, + padding: `${token.paddingBlockSM}px ${token.paddingInlineSM}px`, borderRadius: token.borderRadiusSM, }); @@ -100,8 +138,8 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject '&:focus, &-focused': { ...genActiveStyle( mergeToken(token, { - inputBorderActiveColor: colorError, - inputBorderHoverColor: colorError, + activeBorderColor: colorError, + hoverBorderColor: colorError, controlOutline: colorErrorOutline, }), ), @@ -121,8 +159,8 @@ export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject '&:focus, &-focused': { ...genActiveStyle( mergeToken(token, { - inputBorderActiveColor: colorWarning, - inputBorderHoverColor: colorWarning, + activeBorderColor: colorWarning, + hoverBorderColor: colorWarning, controlOutline: colorWarningOutline, }), ), @@ -140,7 +178,7 @@ export const genBasicInputStyle = (token: InputToken): CSSObject => ({ display: 'inline-block', width: '100%', minWidth: 0, - padding: `${token.inputPaddingVertical}px ${token.inputPaddingHorizontal}px`, + padding: `${token.paddingBlock}px ${token.paddingInline}px`, color: token.colorText, fontSize: token.fontSize, lineHeight: token.lineHeight, @@ -265,7 +303,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { '&-addon': { position: 'relative', - padding: `0 ${token.inputPaddingHorizontal}px`, + padding: `0 ${token.paddingInline}px`, color: token.colorText, fontWeight: 'normal', fontSize: token.fontSize, @@ -278,7 +316,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { // Reset Select's style in addon [`${antCls}-select`]: { - margin: `-${token.inputPaddingVertical + 1}px -${token.inputPaddingHorizontal}px`, + margin: `-${token.paddingBlock + 1}px -${token.paddingInline}px`, [`&${antCls}-select-single:not(${antCls}-select-customize-input)`]: { [`${antCls}-select-selector`]: { @@ -297,7 +335,7 @@ export const genInputGroupStyle = (token: InputToken): CSSObject => { // https://github.com/ant-design/ant-design/issues/31333 [`${antCls}-cascader-picker`]: { - margin: `-9px -${token.inputPaddingHorizontal}px`, + margin: `-9px -${token.paddingInline}px`, backgroundColor: 'transparent', [`${antCls}-cascader-input`]: { textAlign: 'start', @@ -870,31 +908,6 @@ const genSearchInputStyle: GenerateStyle = (token: InputToken) => { }; }; -export function initInputToken(token: T): InputToken { - // @ts-ignore - return mergeToken>(token, { - inputAffixPadding: token.paddingXXS, - inputPaddingVertical: Math.max( - Math.round(((token.controlHeight - token.fontSize * token.lineHeight) / 2) * 10) / 10 - - token.lineWidth, - 3, - ), - inputPaddingVerticalLG: - Math.ceil(((token.controlHeightLG - token.fontSizeLG * token.lineHeightLG) / 2) * 10) / 10 - - token.lineWidth, - inputPaddingVerticalSM: Math.max( - Math.round(((token.controlHeightSM - token.fontSize * token.lineHeight) / 2) * 10) / 10 - - token.lineWidth, - 0, - ), - inputPaddingHorizontal: token.paddingSM - token.lineWidth, - inputPaddingHorizontalSM: token.paddingXS - token.lineWidth, - inputPaddingHorizontalLG: token.controlPaddingHorizontal - token.lineWidth, - inputBorderHoverColor: token.colorPrimaryHover, - inputBorderActiveColor: token.colorPrimaryHover, - }); -} - const genTextAreaStyle: GenerateStyle = (token) => { const { componentCls, paddingLG } = token; const textareaPrefixCls = `${componentCls}-textarea`; @@ -962,7 +975,7 @@ const genTextAreaStyle: GenerateStyle = (token) => { [`${textareaPrefixCls}-suffix`]: { position: 'absolute', top: 0, - insetInlineEnd: token.inputPaddingHorizontal, + insetInlineEnd: token.paddingInline, bottom: 0, zIndex: 1, display: 'inline-flex', @@ -976,19 +989,66 @@ const genTextAreaStyle: GenerateStyle = (token) => { }; }; +export function initInputToken(token: GlobalToken): SharedInputToken { + return mergeToken(token, { + inputAffixPadding: token.paddingXXS, + }); +} + +export const initComponentToken = (token: GlobalToken): SharedComponentToken => { + const { + controlHeight, + fontSize, + lineHeight, + lineWidth, + controlHeightSM, + controlHeightLG, + fontSizeLG, + lineHeightLG, + paddingSM, + controlPaddingHorizontalSM, + controlPaddingHorizontal, + colorFillAlter, + colorPrimaryHover, + } = token; + + return { + paddingBlock: Math.max( + Math.round(((controlHeight - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth, + 3, + ), + paddingBlockSM: Math.max( + Math.round(((controlHeightSM - fontSize * lineHeight) / 2) * 10) / 10 - lineWidth, + 0, + ), + paddingBlockLG: + Math.ceil(((controlHeightLG - fontSizeLG * lineHeightLG) / 2) * 10) / 10 - lineWidth, + paddingInline: paddingSM - lineWidth, + paddingInlineSM: controlPaddingHorizontalSM - lineWidth, + paddingInlineLG: controlPaddingHorizontal - lineWidth, + addonBg: colorFillAlter, + activeBorderColor: colorPrimaryHover, + hoverBorderColor: colorPrimaryHover, + }; +}; + // ============================== Export ============================== -export default genComponentStyleHook('Input', (token) => { - const inputToken = initInputToken>(token); - - return [ - genInputStyle(inputToken), - genTextAreaStyle(inputToken), - genAffixStyle(inputToken), - genGroupStyle(inputToken), - genSearchInputStyle(inputToken), - // ===================================================== - // == Space Compact == - // ===================================================== - genCompactItemStyle(inputToken), - ]; -}); +export default genComponentStyleHook( + 'Input', + (token) => { + const inputToken = mergeToken(token, initInputToken(token)); + + return [ + genInputStyle(inputToken), + genTextAreaStyle(inputToken), + genAffixStyle(inputToken), + genGroupStyle(inputToken), + genSearchInputStyle(inputToken), + // ===================================================== + // == Space Compact == + // ===================================================== + genCompactItemStyle(inputToken), + ]; + }, + initComponentToken, +); diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts index b7e8adfeb152..f8937451af5b 100644 --- a/components/mentions/style/index.ts +++ b/components/mentions/style/index.ts @@ -1,17 +1,18 @@ -import type { InputToken } from '../../input/style'; +import type { SharedComponentToken, SharedInputToken } from '../../input/style'; import { genActiveStyle, genBasicInputStyle, genDisabledStyle, genPlaceholderStyle, genStatusStyle, + initComponentToken, initInputToken, } from '../../input/style'; import { resetComponent, textEllipsis } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; -export interface ComponentToken { +export interface ComponentToken extends SharedComponentToken { /** * @desc 弹层 z-index * @descEN z-index of popup @@ -29,7 +30,7 @@ export interface ComponentToken { controlItemWidth: number; } -type MentionsToken = InputToken>; +type MentionsToken = FullToken<'Mentions'> & SharedInputToken; const genMentionsStyle: GenerateStyle = (token) => { const { @@ -41,8 +42,8 @@ const genMentionsStyle: GenerateStyle = (token) => { motionDurationSlow, lineHeight, controlHeight, - inputPaddingHorizontal, - inputPaddingVertical, + paddingInline, + paddingBlock, fontSize, colorBgElevated, paddingXXS, @@ -84,7 +85,7 @@ const genMentionsStyle: GenerateStyle = (token) => { [`&-affix-wrapper ${componentCls}-suffix`]: { position: 'absolute', top: 0, - insetInlineEnd: inputPaddingHorizontal, + insetInlineEnd: paddingInline, bottom: 0, zIndex: 1, display: 'inline-flex', @@ -98,7 +99,7 @@ const genMentionsStyle: GenerateStyle = (token) => { boxSizing: 'border-box', minHeight: controlHeight - 2, margin: 0, - padding: `${inputPaddingVertical}px ${inputPaddingHorizontal}px`, + padding: `${paddingBlock}px ${paddingInline}px`, overflow: 'inherit', overflowX: 'hidden', overflowY: 'auto', @@ -223,10 +224,11 @@ const genMentionsStyle: GenerateStyle = (token) => { export default genComponentStyleHook( 'Mentions', (token) => { - const mentionsToken = initInputToken>(token); + const mentionsToken = mergeToken(token, initInputToken(token)); return [genMentionsStyle(mentionsToken)]; }, (token) => ({ + ...initComponentToken(token), dropdownHeight: 250, controlItemWidth: 100, zIndexPopup: token.zIndexPopupBase + 50, diff --git a/components/pagination/style/index.ts b/components/pagination/style/index.ts index 31f4a79606b0..8ac5eda734fa 100644 --- a/components/pagination/style/index.ts +++ b/components/pagination/style/index.ts @@ -2,9 +2,10 @@ import type { CSSObject } from '@ant-design/cssinjs'; import { genBasicInputStyle, genInputSmallStyle, + initComponentToken, initInputToken, - type InputToken, } from '../../input/style'; +import type { SharedComponentToken, SharedInputToken } from '../../input/style'; import { genFocusOutline, genFocusStyle, resetComponent } from '../../style'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; @@ -57,7 +58,7 @@ export interface ComponentToken { miniOptionsSizeChangerTop: number; } -interface PaginationToken extends InputToken> { +interface PaginationToken extends FullToken<'Pagination'>, SharedComponentToken, SharedInputToken { inputOutlineOffset: number; paginationMiniOptionsMarginInlineStart: number; paginationMiniQuickJumperInputWidth: number; @@ -751,6 +752,7 @@ export default genComponentStyleHook( paginationEllipsisTextIndent: '0.13em', // magic for ui experience }, initInputToken(token), + initComponentToken(token), ); return [ genPaginationStyle(paginationToken), diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 9f8a34ac649b..6664100cdaf8 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -22,6 +22,7 @@ import type { ComponentToken as DropdownComponentToken } from '../../dropdown/st import type { ComponentToken as EmptyComponentToken } from '../../empty/style'; import type { ComponentToken as FloatButtonComponentToken } from '../../float-button/style'; import type { ComponentToken as ImageComponentToken } from '../../image/style'; +import type { ComponentToken as InputComponentToken } from '../../input/style'; import type { ComponentToken as InputNumberComponentToken } from '../../input-number/style'; import type { ComponentToken as LayoutComponentToken } from '../../layout/style'; import type { ComponentToken as ListComponentToken } from '../../list/style'; @@ -84,7 +85,7 @@ export interface ComponentTokenMap { Form?: {}; Grid?: {}; Image?: ImageComponentToken; - Input?: {}; + Input?: InputComponentToken; InputNumber?: InputNumberComponentToken; Layout?: LayoutComponentToken; List?: ListComponentToken; diff --git a/components/typography/style/mixins.ts b/components/typography/style/mixins.ts index b905b082887c..c11286227a17 100644 --- a/components/typography/style/mixins.ts +++ b/components/typography/style/mixins.ts @@ -10,7 +10,6 @@ import { gold } from '@ant-design/colors'; import type { CSSObject } from '@ant-design/cssinjs'; import type { TypographyToken } from '.'; -import { initInputToken } from '../../input/style'; import { operationUnit } from '../../style'; import type { GenerateStyle } from '../../theme/internal'; @@ -187,10 +186,9 @@ export const getResetStyles: GenerateStyle = (token) }); export const getEditableStyles: GenerateStyle = (token) => { - const { componentCls } = token; + const { componentCls, paddingSM } = token; - const inputToken = initInputToken(token); - const inputShift = inputToken.inputPaddingVertical + 1; + const inputShift = paddingSM; return { '&-edit-content': { position: 'relative', diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 2c2f5e6da571..363795fa3e53 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -338,7 +338,43 @@ export default App; | `@image-preview-operation-color` | `previewOperationColor` | - | | `@image-preview-operation-disabled-color` | `previewOperationColorDisabled` | - | - +### Input + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@input-height-base` | `controlHeight` | Global Token | +| `@input-height-lg` | `controlHeightLG` | Global Token | +| `@input-height-sm` | `controlHeightSM` | Global Token | +| `@input-padding-horizontal` | `paddingInline` | - | +| `@input-padding-horizontal-base` | `paddingInline` | - | +| `@input-padding-horizontal-sm` | `paddingInlineSM` | - | +| `@input-padding-horizontal-lg` | `paddingInlineLG` | - | +| `@input-padding-vertical-base` | `paddinBlock` | - | +| `@input-padding-vertical-sm` | `paddingBlockSM` | - | +| `@input-padding-vertical-lg` | `paddingBlockLG` | - | +| `@input-placeholder-color` | `colorTextPlaceholder` | Global Token | +| `@input-color` | `colorText` | Global Token | +| `@input-icon-color` | - | 已废弃 | +| `@input-border-color` | `colorBorder` | Global Token | +| `@input-bg` | `colorBgContainer` | Global Token | +| `@input-addon-bg` | `addonBg` | - | +| `@input-hover-border-color` | `hoverBorderColor` | - | +| `@input-disabled-bg` | `colorBgContainerDisabled` | Global Token | +| `@input-outline-offset` | `activeShadow` | Control box-shadow when active | +| `@input-icon-hover-color` | `colorIconHover` | Global Token | +| `@input-disabled-color` | `colorTextDisabled` | Global Token | + +### InputNumber + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@input-number-hover-border-color` | `hoverBorderColor` | - | +| `@input-number-handler-active-bg` | `handleActiveBg` | - | +| `@input-number-handler-hover-bg` | `handleHoverColor` | Wrong usage in 4.x, which is actually text color | +| `@input-number-handler-bg` | `handleBg` | - | +| `@input-number-handler-border-color` | `handleBorderColor` | - | ### Layout diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 77738aade6d8..6bb36f1ffdef 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -335,7 +335,43 @@ export default App; | `@image-preview-operation-color` | `previewOperationColor` | - | | `@image-preview-operation-disabled-color` | `previewOperationColorDisabled` | - | - +### Input 输入框 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@input-height-base` | `controlHeight` | 全局 Token | +| `@input-height-lg` | `controlHeightLG` | 全局 Token | +| `@input-height-sm` | `controlHeightSM` | 全局 Token | +| `@input-padding-horizontal` | `paddingInline` | - | +| `@input-padding-horizontal-base` | `paddingInline` | - | +| `@input-padding-horizontal-sm` | `paddingInlineSM` | - | +| `@input-padding-horizontal-lg` | `paddingInlineLG` | - | +| `@input-padding-vertical-base` | `paddinBlock` | - | +| `@input-padding-vertical-sm` | `paddingBlockSM` | - | +| `@input-padding-vertical-lg` | `paddingBlockLG` | - | +| `@input-placeholder-color` | `colorTextPlaceholder` | 全局 Token | +| `@input-color` | `colorText` | 全局 Token | +| `@input-icon-color` | - | 已废弃 | +| `@input-border-color` | `colorBorder` | 全局 Token | +| `@input-bg` | `colorBgContainer` | 全局 Token | +| `@input-addon-bg` | `addonBg` | - | +| `@input-hover-border-color` | `hoverBorderColor` | - | +| `@input-disabled-bg` | `colorBgContainerDisabled` | 全局 Token | +| `@input-outline-offset` | `activeShadow` | 控制激活态阴影 | +| `@input-icon-hover-color` | `colorIconHover` | 全局 Token | +| `@input-disabled-color` | `colorTextDisabled` | 全局 Token | + +### InputNumber 数字输入框 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@input-number-hover-border-color` | `hoverBorderColor` | - | +| `@input-number-handler-active-bg` | `handleActiveBg` | - | +| `@input-number-handler-hover-bg` | `handleHoverColor` | 4.x 中命名有误，实际上是 color | +| `@input-number-handler-bg` | `handleBg` | - | +| `@input-number-handler-border-color` | `handleBorderColor` | - | ### Layout 布局 From 06d1c9a6e7d608836915b5be3fb129e3797abbf2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Aug 2023 11:31:49 +0800 Subject: [PATCH 073/318] docs: font flash in home page (#44333) Signed-off-by: afc163 --- .dumirc.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.dumirc.ts b/.dumirc.ts index a374f7a8f795..b6aa833febbd 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -87,14 +87,14 @@ export default defineConfig({ crossorigin: true, }, { - rel: 'prefetch', + rel: 'preload', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/Gsw2PSKrftc1yNWMNlXgw.woff2', type: 'font/woff2', crossorigin: true, }, { - rel: 'prefetch', + rel: 'preload', as: 'font', href: '//at.alicdn.com/wf/webfont/exMpJIukiCms/vtu73by4O2gEBcvBuLgeu.woff', type: 'font/woff2', From 820a9213c334cbc7d7d5130ee7d3d42c1c8c7f57 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 22 Aug 2023 11:47:07 +0800 Subject: [PATCH 074/318] feat: Spin token (#44334) * feat: Spin token * chore: code clean --- components/spin/style/index.tsx | 64 +++++++++++++--------- docs/react/migrate-less-variables.en-US.md | 11 +++- docs/react/migrate-less-variables.zh-CN.md | 11 +++- 3 files changed, 58 insertions(+), 28 deletions(-) diff --git a/components/spin/style/index.tsx b/components/spin/style/index.tsx index 28b73f9f6499..2ee6ddd5bde0 100644 --- a/components/spin/style/index.tsx +++ b/components/spin/style/index.tsx @@ -10,13 +10,25 @@ export interface ComponentToken { * @descEN Height of content area */ contentHeight: number; + /** + * @desc 加载图标尺寸 + * @descEN Loading icon size + */ + dotSize: number; + /** + * @desc 小号加载图标尺寸 + * @descEN Small loading icon size + */ + dotSizeSM: number; + /** + * @desc 大号加载图标尺寸 + * @descEN Large loading icon size + */ + dotSizeLG: number; } interface SpinToken extends FullToken<'Spin'> { spinDotDefault: string; - spinDotSize: number; - spinDotSizeSM: number; - spinDotSizeLG: number; } const antSpinMove = new Keyframes('antSpinMove', { @@ -61,43 +73,43 @@ const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => position: 'absolute', top: '50%', insetInlineStart: '50%', - margin: -token.spinDotSize / 2, + margin: -token.dotSize / 2, }, [`${token.componentCls}-text`]: { position: 'absolute', top: '50%', width: '100%', - paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2, + paddingTop: (token.dotSize - token.fontSize) / 2 + 2, textShadow: `0 1px 2px ${token.colorBgContainer}`, // FIXME: shadow fontSize: token.fontSize, }, [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: { - marginTop: -(token.spinDotSize / 2) - 10, + marginTop: -(token.dotSize / 2) - 10, }, '&-sm': { [`${token.componentCls}-dot`]: { - margin: -token.spinDotSizeSM / 2, + margin: -token.dotSizeSM / 2, }, [`${token.componentCls}-text`]: { - paddingTop: (token.spinDotSizeSM - token.fontSize) / 2 + 2, + paddingTop: (token.dotSizeSM - token.fontSize) / 2 + 2, }, [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: { - marginTop: -(token.spinDotSizeSM / 2) - 10, + marginTop: -(token.dotSizeSM / 2) - 10, }, }, '&-lg': { [`${token.componentCls}-dot`]: { - margin: -(token.spinDotSizeLG / 2), + margin: -(token.dotSizeLG / 2), }, [`${token.componentCls}-text`]: { - paddingTop: (token.spinDotSizeLG - token.fontSize) / 2 + 2, + paddingTop: (token.dotSizeLG - token.fontSize) / 2 + 2, }, [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: { - marginTop: -(token.spinDotSizeLG / 2) - 10, + marginTop: -(token.dotSizeLG / 2) - 10, }, }, }, @@ -147,15 +159,15 @@ const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => [`${token.componentCls}-dot`]: { position: 'relative', display: 'inline-block', - fontSize: token.spinDotSize, + fontSize: token.dotSize, width: '1em', height: '1em', '&-item': { position: 'absolute', display: 'block', - width: (token.spinDotSize - token.marginXXS / 2) / 2, - height: (token.spinDotSize - token.marginXXS / 2) / 2, + width: (token.dotSize - token.marginXXS / 2) / 2, + height: (token.dotSize - token.marginXXS / 2) / 2, backgroundColor: token.colorPrimary, borderRadius: '100%', transform: 'scale(0.75)', @@ -205,21 +217,21 @@ const genSpinStyle: GenerateStyle = (token: SpinToken): CSSObject => // small [`&-sm ${token.componentCls}-dot`]: { - fontSize: token.spinDotSizeSM, + fontSize: token.dotSizeSM, i: { - width: (token.spinDotSizeSM - token.marginXXS / 2) / 2, - height: (token.spinDotSizeSM - token.marginXXS / 2) / 2, + width: (token.dotSizeSM - token.marginXXS / 2) / 2, + height: (token.dotSizeSM - token.marginXXS / 2) / 2, }, }, // large [`&-lg ${token.componentCls}-dot`]: { - fontSize: token.spinDotSizeLG, + fontSize: token.dotSizeLG, i: { - width: (token.spinDotSizeLG - token.marginXXS) / 2, - height: (token.spinDotSizeLG - token.marginXXS) / 2, + width: (token.dotSizeLG - token.marginXXS) / 2, + height: (token.dotSizeLG - token.marginXXS) / 2, }, }, @@ -235,13 +247,13 @@ export default genComponentStyleHook( (token) => { const spinToken = mergeToken(token, { spinDotDefault: token.colorTextDescription, - spinDotSize: token.controlHeightLG / 2, - spinDotSizeSM: token.controlHeightLG * 0.35, - spinDotSizeLG: token.controlHeight, }); return [genSpinStyle(spinToken)]; }, - { + (token) => ({ contentHeight: 400, - }, + dotSize: token.controlHeightLG / 2, + dotSizeSM: token.controlHeightLG * 0.35, + dotSizeLG: token.controlHeight, + }), ); diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 363795fa3e53..d107536a315a 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -14,8 +14,8 @@ This document contains the correspondence between all the less variables related We could configure global token and component token for each component through the `theme` property of ConfigProvider. ```tsx -import { Checkbox, ConfigProvider, Radio } from 'antd'; import React from 'react'; +import { Checkbox, ConfigProvider, Radio } from 'antd'; const App: React.FC = () => ( +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@spin-dot-size-sm` | `dotSizeSM` | - | +| `@spin-dot-size` | `dotSize` | - | +| `@spin-dot-size-lg` | `dotSizeLG` | - | + ### Statistic diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 6bb36f1ffdef..13c236e58db1 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -14,8 +14,8 @@ title: 从 Less 变量到 Design Token 通过 ConfigProvider 的 `theme` 属性，我们可以对每一个组件单独配置全局 Token 和组件 Token ```tsx -import { Checkbox, ConfigProvider, Radio } from 'antd'; import React from 'react'; +import { Checkbox, ConfigProvider, Radio } from 'antd'; const App: React.FC = () => ( +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@spin-dot-size-sm` | `dotSizeSM` | - | +| `@spin-dot-size` | `dotSize` | - | +| `@spin-dot-size-lg` | `dotSizeLG` | - | + ### Statistic 统计数值 From af301a982206b25b1030e1f84a2cff14c09ce431 Mon Sep 17 00:00:00 2001 From: AN <455454007@qq.com> Date: Tue, 22 Aug 2023 13:00:42 +0800 Subject: [PATCH 075/318] fix(date-picker):fix format type processing for showTime. (#44306) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(date-picker):fix format type processing for showTime. * test✅: Add showTime should work correctly when format is Array test --- .../date-picker/__tests__/DatePicker.test.tsx | 19 +++++++++++++++++++ components/date-picker/util.ts | 5 +++++ 2 files changed, 24 insertions(+) diff --git a/components/date-picker/__tests__/DatePicker.test.tsx b/components/date-picker/__tests__/DatePicker.test.tsx index 54c91b3bbfb5..00270af3faf6 100644 --- a/components/date-picker/__tests__/DatePicker.test.tsx +++ b/components/date-picker/__tests__/DatePicker.test.tsx @@ -186,6 +186,25 @@ describe('DatePicker', () => { expect(mouseDownEvent).not.toThrow(); }); + it('showTime should work correctly when format is Array', () => { + const { container } = render( + , + ); + const fuousEvent = () => { + fireEvent.focus(container.querySelector('input')!); + }; + const mouseDownEvent = () => { + fireEvent.mouseDown(container.querySelector('input')!); + }; + expect(fuousEvent).not.toThrow(); + expect(mouseDownEvent).not.toThrow(); + }); + it('12 hours', () => { const { container } = render( , diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts index f624b5aebba0..c308fad42260 100644 --- a/components/date-picker/util.ts +++ b/components/date-picker/util.ts @@ -126,6 +126,11 @@ export function getTimeProps( const firstFormat = toArray(format)[0]; const showTimeObj = { ...props }; + // https://github.com/ant-design/ant-design/issues/44275 + if (format && Array.isArray(format)) { + showTimeObj.format = firstFormat; + } + if (firstFormat && typeof firstFormat === 'string') { if (!firstFormat.includes('s') && showSecond === undefined) { showTimeObj.showSecond = false; From 80e1bc87bc3d39b6f39f2d90a8dd78306d59bd0c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Tue, 22 Aug 2023 13:11:18 +0800 Subject: [PATCH 076/318] style: remove importOrderSeparation from prettier config (#44336) --- .dumi/theme/builtins/Previewer/Previewer.tsx | 3 ++- .prettierrc | 6 ++---- package.json | 2 +- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/Previewer.tsx b/.dumi/theme/builtins/Previewer/Previewer.tsx index a37144956fd6..fb23c55e0f71 100644 --- a/.dumi/theme/builtins/Previewer/Previewer.tsx +++ b/.dumi/theme/builtins/Previewer/Previewer.tsx @@ -1,6 +1,7 @@ +import React from 'react'; import type { IPreviewerProps } from 'dumi'; import { useTabMeta } from 'dumi'; -import React from 'react'; + import CodePreviewer from './CodePreviewer'; import DesignPreviewer from './DesignPreviewer'; diff --git a/.prettierrc b/.prettierrc index d1c91d8d042d..73e7db810cd9 100644 --- a/.prettierrc +++ b/.prettierrc @@ -4,10 +4,8 @@ "trailingComma": "all", "printWidth": 100, "proseWrap": "never", - "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", ".*"], - "importOrderSeparation": true, - "importOrderSortSpecifiers": true, - "plugins": ["@trivago/prettier-plugin-sort-imports"], + "importOrder": ["^(react|react-dom)$", "^([a-z]|@[a-z])", "", ".*"], + "plugins": ["@ianvs/prettier-plugin-sort-imports"], "overrides": [ { "files": ".prettierrc", diff --git a/package.json b/package.json index 77b4966344b1..0a13a017caa5 100644 --- a/package.json +++ b/package.json @@ -172,6 +172,7 @@ "@dnd-kit/utilities": "^3.2.1", "@emotion/react": "^11.10.4", "@emotion/server": "^11.4.0", + "@ianvs/prettier-plugin-sort-imports": "^4.1.0", "@qixian.cs/github-contributors-list": "^1.1.0", "@size-limit/file": "^8.1.0", "@stackblitz/sdk": "^1.3.0", @@ -181,7 +182,6 @@ "@testing-library/jest-dom": "^6.0.0", "@testing-library/react": "^14.0.0", "@testing-library/user-event": "^14.4.2", - "@trivago/prettier-plugin-sort-imports": "^4.2.0", "@types/fs-extra": "^11.0.1", "@types/gtag.js": "^0.0.13", "@types/http-server": "^0.12.1", From d57c86d92c9aeb449ae160eb1428f35e151b83bf Mon Sep 17 00:00:00 2001 From: dingkang Date: Tue, 22 Aug 2023 16:28:20 +0800 Subject: [PATCH 077/318] feat: migrate less to token for DatePicker (#42607) * feat: migrate less to token for time-picker * feat: add component-token demo * feat:update token with API Naming rules * feat: migrate less to token for Time-pikker * chore: code clean * chore: code clean * chore: udpate * feat: picker token * chore: add comment --------- Co-authored-by: MadCcc <1075746765@qq.com> --- components/calendar/style/index.ts | 31 ++- .../date-picker/__tests__/demo-extend.test.ts | 2 +- .../date-picker/__tests__/demo.test.tsx | 2 +- .../date-picker/demo/component-token.md | 7 + .../date-picker/demo/component-token.tsx | 51 ++++ components/date-picker/index.en-US.md | 5 +- components/date-picker/index.zh-CN.md | 6 +- components/date-picker/style/index.ts | 245 +++++++++++------- docs/react/migrate-less-variables.en-US.md | 25 +- docs/react/migrate-less-variables.zh-CN.md | 25 +- 10 files changed, 285 insertions(+), 114 deletions(-) create mode 100644 components/date-picker/demo/component-token.md create mode 100644 components/date-picker/demo/component-token.tsx diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts index cf11ecb93d59..5d81b2276091 100644 --- a/components/calendar/style/index.ts +++ b/components/calendar/style/index.ts @@ -1,6 +1,10 @@ import type { CSSObject } from '@ant-design/cssinjs'; -import type { PickerPanelToken } from '../../date-picker/style'; -import { genPanelStyle, initPickerPanelToken } from '../../date-picker/style'; +import type { PanelComponentToken, PickerPanelToken } from '../../date-picker/style'; +import { + genPanelStyle, + initPanelComponentToken, + initPickerPanelToken, +} from '../../date-picker/style'; import { resetComponent } from '../../style'; import type { FullToken } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; @@ -38,7 +42,7 @@ export interface ComponentToken { itemActiveBg: string; } -interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken { +interface CalendarToken extends FullToken<'Calendar'>, PickerPanelToken, PanelComponentToken { calendarCls: string; dateValueHeight: number; weekHeight: number; @@ -213,14 +217,19 @@ export default genComponentStyleHook( 'Calendar', (token) => { const calendarCls = `${token.componentCls}-calendar`; - const calendarToken = mergeToken(token, initPickerPanelToken(token), { - calendarCls, - pickerCellInnerCls: `${token.componentCls}-cell-inner`, - dateValueHeight: token.controlHeightSM, - weekHeight: token.controlHeightSM * 0.75, - dateContentHeight: - (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2, - }); + const calendarToken = mergeToken( + token, + initPickerPanelToken(token), + initPanelComponentToken(token), + { + calendarCls, + pickerCellInnerCls: `${token.componentCls}-cell-inner`, + dateValueHeight: token.controlHeightSM, + weekHeight: token.controlHeightSM * 0.75, + dateContentHeight: + (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2, + }, + ); return [genCalendarStyles(calendarToken)]; }, diff --git a/components/date-picker/__tests__/demo-extend.test.ts b/components/date-picker/__tests__/demo-extend.test.ts index b0867412e2e9..ec36011f2d20 100644 --- a/components/date-picker/__tests__/demo-extend.test.ts +++ b/components/date-picker/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('date-picker', { skip: ['locale.tsx'] }); +extendTest('date-picker', { skip: ['locale.tsx', 'component-token.tsx'] }); diff --git a/components/date-picker/__tests__/demo.test.tsx b/components/date-picker/__tests__/demo.test.tsx index db64682abc4a..162c3a5a2668 100644 --- a/components/date-picker/__tests__/demo.test.tsx +++ b/components/date-picker/__tests__/demo.test.tsx @@ -2,7 +2,7 @@ import dayjs from 'dayjs'; import * as React from 'react'; import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; -demoTest('date-picker', { skip: ['locale.tsx'], testRootProps: false }); +demoTest('date-picker', { skip: ['locale.tsx', 'component-token.tsx'], testRootProps: false }); rootPropsTest('date-picker', (DatePicker, props) => , { findRootElements: () => document.querySelectorAll('.ant-picker, .ant-picker-dropdown'), diff --git a/components/date-picker/demo/component-token.md b/components/date-picker/demo/component-token.md new file mode 100644 index 000000000000..de91480d0a7d --- /dev/null +++ b/components/date-picker/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +Component Token Debug. + +## en-US + +Component Token Debug. diff --git a/components/date-picker/demo/component-token.tsx b/components/date-picker/demo/component-token.tsx new file mode 100644 index 000000000000..97b57100f3fd --- /dev/null +++ b/components/date-picker/demo/component-token.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import type { DatePickerProps } from 'antd'; +import { ConfigProvider, DatePicker, Space, TimePicker } from 'antd'; +import dayjs from 'dayjs'; + +/** Test usage. Do not use in your production. */ + +const { RangePicker } = DatePicker; + +const onChange: DatePickerProps['onChange'] = (date, dateString) => { + console.log(date, dateString); +}; + +const App: React.FC = () => ( + + + + + + + + +); + +export default App; diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index 66568076c3b8..b2a25e7646ad 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -35,6 +35,7 @@ By clicking the input box, you can select a date from a popup calendar. Customized Range Picker Suffix \_InternalPanelDoNotUseOrYouWillBeFired +Component Token ## API @@ -56,17 +57,17 @@ The default locale is en-US, if you need to use other languages, recommend to us If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json). ```jsx -import 'dayjs/locale/zh-cn'; import locale from 'antd/es/date-picker/locale/zh_CN'; +import 'dayjs/locale/zh-cn'; ; ``` ```jsx // The default locale is en-US, if you want to use other locale, just set locale in entry file globally. +import locale from 'antd/locale/zh_CN'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; -import locale from 'antd/locale/zh_CN'; diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index bcb7e655e222..d4bf19f26556 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -36,6 +36,7 @@ demo: 自定义日期范围选择 后缀图标 \_InternalPanelDoNotUseOrYouWillBeFired +组件 Token ## API @@ -57,17 +58,17 @@ demo: 如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。 ```jsx -import 'dayjs/locale/zh-cn'; import locale from 'antd/es/date-picker/locale/zh_CN'; +import 'dayjs/locale/zh-cn'; ; ``` ```jsx // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale +import locale from 'antd/locale/zh_CN'; import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; -import locale from 'antd/locale/zh_CN'; @@ -245,7 +246,6 @@ export type FormatType = Generic | GenericFn | Array; ```js import dayjs from 'dayjs'; import 'dayjs/locale/zh-cn'; - import updateLocale from 'dayjs/plugin/updateLocale'; dayjs.extend(updateLocale); diff --git a/components/date-picker/style/index.ts b/components/date-picker/style/index.ts index 8173b72f45c6..0d86348d7de3 100644 --- a/components/date-picker/style/index.ts +++ b/components/date-picker/style/index.ts @@ -23,7 +23,72 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import type { TokenWithCommonCls } from '../../theme/util/genComponentStyleHook'; -export interface ComponentToken extends Exclude { +export interface PanelComponentToken { + /** + * @desc 单元格悬浮态背景色 + * @descEN Background color of cell hover state + */ + cellHoverBg: string; + /** + * @desc 选取范围内的单元格背景色 + * @descEN Background color of cell in range + */ + cellActiveWithRangeBg: string; + /** + * @desc 选取范围内的单元格悬浮态背景色 + * @descEN Background color of hovered cell in range + */ + cellHoverWithRangeBg: string; + /** + * @desc 单元格禁用态背景色 + * @descEN Background color of disabled cell + */ + cellBgDisabled: string; + /** + * @desc 选取范围时单元格边框色 + * @descEN Border color of cell in range when picking + */ + cellRangeBorderColor: string; + /** + * @desc 时间列宽度 + * @descEN Width of time column + */ + timeColumnWidth: number; + /** + * @desc 时间列高度 + * @descEN Height of time column + */ + timeColumnHeight: number; + /** + * @desc 时间单元格高度 + * @descEN Height of time cell + */ + timeCellHeight: number; + /** + * @desc 单元格高度 + * @descEN Height of cell + */ + cellHeight: number; + /** + * @desc 单元格宽度 + * @descEN Width of cell + */ + cellWidth: number; + /** + * @desc 单元格文本高度 + * @descEN Height of cell text + */ + textHeight: number; + /** + * @desc 十年/年/季/月/周单元格高度 + * @descEN Height of decade/year/quarter/month/week cell + */ + withoutTimeCellHeight: number; +} + +export interface ComponentToken + extends Exclude, + PanelComponentToken { /** * @desc 预设区域宽度 * @descEN Width of preset area @@ -44,17 +109,8 @@ export interface ComponentToken extends Exclude export type PickerPanelToken = { pickerCellCls: string; pickerCellInnerCls: string; - pickerTextHeight: number; - pickerPanelCellWidth: number; - pickerPanelCellHeight: number; - pickerDateHoverRangeBorderColor: string; - pickerBasicCellHoverWithRangeColor: string; - pickerPanelWithoutTimeCellHeight: number; pickerDatePanelPaddingHorizontal: number; pickerYearMonthCellWidth: number; - pickerTimePanelColumnHeight: number; - pickerTimePanelColumnWidth: number; - pickerTimePanelCellHeight: number; pickerCellPaddingVertical: number; pickerQuarterPanelContentHeight: number; pickerCellBorderGap: number; @@ -64,7 +120,7 @@ export type PickerPanelToken = { type PickerToken = FullToken<'DatePicker'> & PickerPanelToken & SharedInputToken; -type SharedPickerToken = TokenWithCommonCls & PickerPanelToken; +type SharedPickerToken = TokenWithCommonCls & PickerPanelToken & PanelComponentToken; const genPikerPadding = ( token: PickerToken, @@ -88,23 +144,23 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { componentCls, pickerCellCls, pickerCellInnerCls, - pickerPanelCellHeight, + cellHeight, motionDurationSlow, borderRadiusSM, motionDurationMid, - controlItemBgHover, + cellHoverBg, lineWidth, lineType, colorPrimary, - controlItemBgActive, + cellActiveWithRangeBg, colorTextLightSolid, controlHeightSM, - pickerDateHoverRangeBorderColor, + cellRangeBorderColor, pickerCellBorderGap, - pickerBasicCellHoverWithRangeColor, - pickerPanelCellWidth, + cellHoverWithRangeBg, + cellWidth, colorTextDisabled, - colorBgContainerDisabled, + cellBgDisabled, } = token; return { @@ -114,7 +170,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { insetInlineStart: 0, insetInlineEnd: 0, zIndex: 1, - height: pickerPanelCellHeight, + height: cellHeight, transform: 'translateY(-50%)', transition: `all ${motionDurationSlow}`, content: '""', @@ -125,9 +181,9 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { position: 'relative', zIndex: 2, display: 'inline-block', - minWidth: pickerPanelCellHeight, - height: pickerPanelCellHeight, - lineHeight: `${pickerPanelCellHeight}px`, + minWidth: cellHeight, + height: cellHeight, + lineHeight: `${cellHeight}px`, borderRadius: borderRadiusSM, transition: `background ${motionDurationMid}, border ${motionDurationMid}`, }, @@ -143,7 +199,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]: { [pickerCellInnerCls]: { - background: controlItemBgHover, + background: cellHoverBg, }, }, @@ -167,7 +223,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { position: 'relative', '&::before': { - background: controlItemBgActive, + background: cellActiveWithRangeBg, }, }, @@ -182,7 +238,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single), &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: { '&::before': { - background: controlItemBgActive, + background: cellActiveWithRangeBg, }, }, @@ -207,8 +263,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { top: '50%', zIndex: 0, height: controlHeightSM, - borderTop: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, - borderBottom: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderTop: `${lineWidth}px dashed ${cellRangeBorderColor}`, + borderBottom: `${lineWidth}px dashed ${cellRangeBorderColor}`, transform: 'translateY(-50%)', transition: `all ${motionDurationSlow}`, content: '""', @@ -237,7 +293,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { ${componentCls}-panel > :not(${componentCls}-date-panel) &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: { - background: pickerBasicCellHoverWithRangeColor, + background: cellHoverWithRangeBg, }, // range start border-radius @@ -268,8 +324,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-start${pickerCellCls}-range-hover-edge-start${pickerCellCls}-range-hover-edge-start-near-range::after, &-in-view${pickerCellCls}-range-hover-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after, &-in-view${pickerCellCls}-range-hover-start::after`]: { - insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + insetInlineStart: (cellWidth - cellHeight) / 2, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, borderStartStartRadius: borderRadiusSM, borderEndStartRadius: borderRadiusSM, }, @@ -280,8 +336,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { &-in-view${pickerCellCls}-end${pickerCellCls}-range-hover-edge-end${pickerCellCls}-range-hover-edge-end-near-range::after, &-in-view${pickerCellCls}-range-hover-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after, &-in-view${pickerCellCls}-range-hover-end::after`]: { - insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + insetInlineEnd: (cellWidth - cellHeight) / 2, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, borderStartEndRadius: borderRadiusSM, borderEndEndRadius: borderRadiusSM, }, @@ -296,7 +352,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { }, '&::before': { - background: colorBgContainerDisabled, + background: cellBgDisabled, }, }, [`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: { @@ -312,7 +368,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { pickerCellInnerCls, pickerYearMonthCellWidth, pickerControlIconSize, - pickerPanelCellWidth, + cellWidth, paddingSM, paddingXS, paddingXXS, @@ -325,35 +381,35 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { colorSplit, pickerControlIconBorderWidth, colorIcon, - pickerTextHeight, + textHeight, motionDurationMid, colorIconHover, fontWeightStrong, - pickerPanelCellHeight, + cellHeight, pickerCellPaddingVertical, colorTextDisabled, colorText, fontSize, - pickerBasicCellHoverWithRangeColor, + cellHoverWithRangeBg, motionDurationSlow, - pickerPanelWithoutTimeCellHeight, + withoutTimeCellHeight, pickerQuarterPanelContentHeight, colorLink, colorLinkActive, colorLinkHover, - pickerDateHoverRangeBorderColor, + cellRangeBorderColor, borderRadiusSM, colorTextLightSolid, - controlItemBgHover, - pickerTimePanelColumnHeight, - pickerTimePanelColumnWidth, - pickerTimePanelCellHeight, + cellHoverBg, + timeColumnHeight, + timeColumnWidth, + timeCellHeight, controlItemBgActive, marginXXS, pickerDatePanelPaddingHorizontal, } = token; - const pickerPanelWidth = pickerPanelCellWidth * 7 + pickerDatePanelPaddingHorizontal * 2; + const pickerPanelWidth = cellWidth * 7 + pickerDatePanelPaddingHorizontal * 2; const commonHoverCellFixedDistance = (pickerPanelWidth - paddingXS * 2) / 3 - pickerYearMonthCellWidth - paddingSM; @@ -419,7 +475,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { button: { padding: 0, color: colorIcon, - lineHeight: `${pickerTextHeight}px`, + lineHeight: `${textHeight}px`, background: 'transparent', border: 0, cursor: 'pointer', @@ -439,7 +495,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { '&-view': { flex: 'auto', fontWeight: fontWeightStrong, - lineHeight: `${pickerTextHeight}px`, + lineHeight: `${textHeight}px`, button: { color: 'inherit', @@ -518,12 +574,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { 'th, td': { position: 'relative', - minWidth: pickerPanelCellHeight, + minWidth: cellHeight, fontWeight: 'normal', }, th: { - height: pickerPanelCellHeight + pickerCellPaddingVertical * 2, + height: cellHeight + pickerCellPaddingVertical * 2, color: colorText, verticalAlign: 'middle', }, @@ -551,7 +607,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { top: 0, bottom: 0, zIndex: -1, - background: pickerBasicCellHoverWithRangeColor, + background: cellHoverWithRangeBg, transition: `all ${motionDurationSlow}`, content: '""', }, @@ -560,14 +616,14 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-start ${pickerCellInnerCls}::after`]: { - insetInlineEnd: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2, + insetInlineEnd: -(cellWidth - cellHeight) / 2, insetInlineStart: 0, }, [`&-date-panel ${componentCls}-cell-in-view${componentCls}-cell-in-range${componentCls}-cell-range-hover-end ${pickerCellInnerCls}::after`]: { insetInlineEnd: 0, - insetInlineStart: -(pickerPanelCellWidth - pickerPanelCellHeight) / 2, + insetInlineStart: -(cellWidth - cellHeight) / 2, }, // Hover with range start & end @@ -580,7 +636,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { &-quarter-panel, &-month-panel`]: { [`${componentCls}-content`]: { - height: pickerPanelWithoutTimeCellHeight * 4, + height: withoutTimeCellHeight * 4, }, [pickerCellInnerCls]: { @@ -596,20 +652,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { // Quarter Panel Special Style [`${componentCls}-cell-range-hover-start::after`]: { insetInlineStart: quarterHoverCellFixedDistance, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, [`${componentCls}-panel-rtl &`]: { insetInlineEnd: quarterHoverCellFixedDistance, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, }, }, [`${componentCls}-cell-range-hover-end::after`]: { insetInlineEnd: quarterHoverCellFixedDistance, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, [`${componentCls}-panel-rtl &`]: { insetInlineStart: quarterHoverCellFixedDistance, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, }, }, }, @@ -622,12 +678,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { '&-footer': { width: 'min-content', minWidth: '100%', - lineHeight: `${pickerTextHeight - 2 * lineWidth}px`, + lineHeight: `${textHeight - 2 * lineWidth}px`, textAlign: 'center', '&-extra': { padding: `0 ${paddingSM}`, - lineHeight: `${pickerTextHeight - 2 * lineWidth}px`, + lineHeight: `${textHeight - 2 * lineWidth}px`, textAlign: 'start', '&:not(:last-child)': { @@ -716,20 +772,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { &-month-panel`]: { [`${componentCls}-cell-range-hover-start::after`]: { insetInlineStart: commonHoverCellFixedDistance, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, [`${componentCls}-panel-rtl &`]: { insetInlineEnd: commonHoverCellFixedDistance, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, }, }, [`${componentCls}-cell-range-hover-end::after`]: { insetInlineEnd: commonHoverCellFixedDistance, - borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineEnd: `${lineWidth}px dashed ${cellRangeBorderColor}`, [`${componentCls}-panel-rtl &`]: { insetInlineStart: commonHoverCellFixedDistance, - borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`, + borderInlineStart: `${lineWidth}px dashed ${cellRangeBorderColor}`, }, }, }, @@ -768,7 +824,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { [`&:hover td`]: { '&:before': { - background: controlItemBgHover, + background: cellHoverBg, }, }, @@ -804,10 +860,10 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { }, [`${componentCls}-content`]: { - width: pickerPanelCellWidth * 7, + width: cellWidth * 7, th: { - width: pickerPanelCellWidth, + width: cellWidth, boxSizing: 'border-box', padding: 0, }, @@ -849,12 +905,12 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { [`${componentCls}-content`]: { display: 'flex', flex: 'auto', - height: pickerTimePanelColumnHeight, + height: timeColumnHeight, }, '&-column': { flex: '1 0 auto', - width: pickerTimePanelColumnWidth, + width: timeColumnWidth, margin: `${paddingXXS}px 0`, padding: 0, overflowY: 'hidden', @@ -865,7 +921,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { '&::after': { display: 'block', - height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight, + height: timeColumnHeight - timeCellHeight, content: '""', }, @@ -889,20 +945,20 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { marginInline: marginXXS, [`${componentCls}-time-panel-cell-inner`]: { display: 'block', - width: pickerTimePanelColumnWidth - 2 * marginXXS, - height: pickerTimePanelCellHeight, + width: timeColumnWidth - 2 * marginXXS, + height: timeCellHeight, margin: 0, paddingBlock: 0, paddingInlineEnd: 0, - paddingInlineStart: (pickerTimePanelColumnWidth - pickerTimePanelCellHeight) / 2, + paddingInlineStart: (timeColumnWidth - timeCellHeight) / 2, color: colorText, - lineHeight: `${pickerTimePanelCellHeight}px`, + lineHeight: `${timeCellHeight}px`, borderRadius: borderRadiusSM, cursor: 'pointer', transition: `background ${motionDurationMid}`, '&:hover': { - background: controlItemBgHover, + background: cellHoverBg, }, }, @@ -925,7 +981,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { }, // https://github.com/ant-design/ant-design/issues/39227 [`&-datetime-panel ${componentCls}-time-panel-column:after`]: { - height: pickerTimePanelColumnHeight - pickerTimePanelCellHeight + paddingXXS * 2, + height: timeColumnHeight - timeCellHeight + paddingXXS * 2, }, }, }; @@ -1018,8 +1074,8 @@ const genPickerStyle: GenerateStyle = (token) => { zIndexPopup, paddingXXS, paddingSM, - pickerTextHeight, - controlItemBgActive, + textHeight, + cellActiveWithRangeBg, colorPrimaryBorder, sizePopupArrow, borderRadiusXS, @@ -1029,7 +1085,7 @@ const genPickerStyle: GenerateStyle = (token) => { boxShadowSecondary, borderRadiusSM, colorSplit, - controlItemBgHover, + cellHoverBg, presetsWidth, presetsMaxWidth, boxShadowPopoverArrow, @@ -1311,7 +1367,7 @@ const genPickerStyle: GenerateStyle = (token) => { marginBottom: 0, padding: `${paddingXXS}px ${paddingSM}px`, overflow: 'hidden', - lineHeight: `${pickerTextHeight - 2 * lineWidth - paddingXS / 2}px`, + lineHeight: `${textHeight - 2 * lineWidth - paddingXS / 2}px`, textAlign: 'start', listStyle: 'none', display: 'flex', @@ -1324,7 +1380,7 @@ const genPickerStyle: GenerateStyle = (token) => { // https://github.com/ant-design/ant-design/issues/23687 [`${componentCls}-preset > ${antCls}-tag-blue`]: { color: colorPrimary, - background: controlItemBgActive, + background: cellActiveWithRangeBg, borderColor: colorPrimaryBorder, cursor: 'pointer', }, @@ -1398,7 +1454,7 @@ const genPickerStyle: GenerateStyle = (token) => { }, '&:hover': { - background: controlItemBgHover, + background: cellHoverBg, }, }, }, @@ -1472,23 +1528,12 @@ const genPickerStyle: GenerateStyle = (token) => { }; export const initPickerPanelToken = (token: TokenWithCommonCls): PickerPanelToken => { - const pickerTimePanelCellHeight = 28; - const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS, padding } = - token; + const { componentCls, controlHeightLG, paddingXXS, padding } = token; return { pickerCellCls: `${componentCls}-cell`, pickerCellInnerCls: `${componentCls}-cell-inner`, - pickerTextHeight: controlHeightLG, - pickerPanelCellWidth: controlHeightSM * 1.5, - pickerPanelCellHeight: controlHeightSM, - pickerDateHoverRangeBorderColor: new TinyColor(colorPrimary).lighten(20).toHexString(), - pickerBasicCellHoverWithRangeColor: new TinyColor(colorPrimary).lighten(35).toHexString(), - pickerPanelWithoutTimeCellHeight: controlHeightLG * 1.65, pickerYearMonthCellWidth: controlHeightLG * 1.5, - pickerTimePanelColumnHeight: pickerTimePanelCellHeight * 8, - pickerTimePanelColumnWidth: controlHeightLG * 1.4, - pickerTimePanelCellHeight, pickerQuarterPanelContentHeight: controlHeightLG * 1.4, pickerCellPaddingVertical: paddingXXS + paddingXXS / 2, pickerCellBorderGap: 2, // Magic for gap between cells @@ -1498,6 +1543,21 @@ export const initPickerPanelToken = (token: TokenWithCommonCls): Pi }; }; +export const initPanelComponentToken = (token: GlobalToken): PanelComponentToken => ({ + cellHoverBg: token.controlItemBgHover, + cellActiveWithRangeBg: token.controlItemBgActive, + cellHoverWithRangeBg: new TinyColor(token.colorPrimary).lighten(35).toHexString(), + cellRangeBorderColor: new TinyColor(token.colorPrimary).lighten(20).toHexString(), + cellBgDisabled: token.colorBgContainerDisabled, + timeColumnWidth: token.controlHeightLG * 1.4, + timeColumnHeight: 28 * 8, + timeCellHeight: 28, + cellWidth: token.controlHeightSM * 1.5, + cellHeight: token.controlHeightSM, + textHeight: token.controlHeightLG, + withoutTimeCellHeight: token.controlHeightLG * 1.65, +}); + // ============================== Export ============================== export default genComponentStyleHook( 'DatePicker', @@ -1516,6 +1576,7 @@ export default genComponentStyleHook( }, (token) => ({ ...initComponentToken(token), + ...initPanelComponentToken(token), presetsWidth: 120, presetsMaxWidth: 200, zIndexPopup: token.zIndexPopupBase + 50, diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index d107536a315a..7d9d6217ef4f 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -17,6 +17,8 @@ We could configure global token and component token for each component through t import React from 'react'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import { Checkbox, ConfigProvider, Radio } from 'antd'; + const App: React.FC = () => ( +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@picker-bg` | `colorBgContainer` | Global Token | +| `@picker-basic-cell-hover-color` | `cellHoverBg` | - | +| `@picker-basic-cell-active-with-range-color` | `cellActiveWithRangeBg` | - | +| `@picker-basic-cell-hover-with-range-color` | `cellHoverWithRangeBg` | - | +| `@picker-basic-cell-disabled-bg` | `cellBgDisabled` | - | +| `@picker-border-color` | `colorSplit` | Global Token | +| `@picker-date-hover-range-border-color` | `cellRangeBorderColor` | - | +| `@picker-date-hover-range-color` | `cellHoverWithRangeColor` | - | +| `@picker-time-panel-column-width` | `timeColumnWidth` | - | +| `@picker-time-panel-column-height` | `timeColumnHeight` | - | +| `@picker-time-panel-cell-height` | `timeCellHeight` | - | +| `@picker-panel-cell-height` | `cellHeight` | - | +| `@picker-panel-cell-width` | `cellWidth` | - | +| `@picker-text-height` | `textHeight` | - | +| `@picker-panel-without-time-cell-height` | `withoutTimeCellHeight` | - | + ### Descriptions @@ -829,8 +852,6 @@ export default App; | `@timeline-dot-bg` | `dotBg` | - | | `@timeline-item-padding-bottom` | `itemPaddingBottom` | - | - - ### Tooltip diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index 13c236e58db1..c607b2e685b4 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -17,6 +17,8 @@ title: 从 Less 变量到 Design Token import React from 'react'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import { Checkbox, ConfigProvider, Radio } from 'antd'; + const App: React.FC = () => ( +| Less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@picker-bg` | `colorBgContainer` | 全局 Token | +| `@picker-basic-cell-hover-color` | `cellHoverBg` | - | +| `@picker-basic-cell-active-with-range-color` | `cellActiveWithRangeBg` | - | +| `@picker-basic-cell-hover-with-range-color` | `cellHoverWithRangeBg` | - | +| `@picker-basic-cell-disabled-bg` | `cellBgDisabled` | - | +| `@picker-border-color` | `colorSplit` | 全局 Token | +| `@picker-date-hover-range-border-color` | `cellRangeBorderColor` | - | +| `@picker-date-hover-range-color` | `cellHoverWithRangeColor` | - | +| `@picker-time-panel-column-width` | `timeColumnWidth` | - | +| `@picker-time-panel-column-height` | `timeColumnHeight` | - | +| `@picker-time-panel-cell-height` | `timeCellHeight` | - | +| `@picker-panel-cell-height` | `cellHeight` | - | +| `@picker-panel-cell-width` | `cellWidth` | - | +| `@picker-text-height` | `textHeight` | - | +| `@picker-panel-without-time-cell-height` | `withoutTimeCellHeight` | - | + ### Descriptions 描述列表 @@ -827,8 +850,6 @@ Mentions 提及 | `@timeline-dot-bg` | `dotBg` | - | | `@timeline-item-padding-bottom` | `itemPaddingBottom` | - | - - ### Tooltip 文字提示 From 477b1ec2f31d6cb881b8f2ef61addcc8ab2af388 Mon Sep 17 00:00:00 2001 From: dingkang Date: Tue, 22 Aug 2023 17:05:56 +0800 Subject: [PATCH 078/318] feat: migrate less to token for Form (#42774) * docs: migrate less to token for Form * feat: migrate less to token for Form * feat: migrate less to token for Form * test: update form snapshots * feat: migrate less to token for Form * chore: code clean * chore: code clean * feat: form token * chore: add comment * chore: update docs --------- Co-authored-by: MadCcc <1075746765@qq.com> --- components/form/__tests__/demo-extend.test.ts | 2 +- components/form/__tests__/demo.test.tsx | 2 +- components/form/demo/component-token.md | 7 + components/form/demo/component-token.tsx | 47 +++++++ components/form/index.en-US.md | 1 + components/form/index.zh-CN.md | 1 + components/form/style/index.ts | 132 ++++++++++++++---- components/theme/interface/components.ts | 3 +- docs/react/migrate-less-variables.en-US.md | 35 ++++- docs/react/migrate-less-variables.zh-CN.md | 20 ++- 10 files changed, 214 insertions(+), 36 deletions(-) create mode 100644 components/form/demo/component-token.md create mode 100644 components/form/demo/component-token.tsx diff --git a/components/form/__tests__/demo-extend.test.ts b/components/form/__tests__/demo-extend.test.ts index 8d11afd95add..2de71673c7b1 100644 --- a/components/form/__tests__/demo-extend.test.ts +++ b/components/form/__tests__/demo-extend.test.ts @@ -1,3 +1,3 @@ import { extendTest } from '../../../tests/shared/demoTest'; -extendTest('form', { skip: ['complex-form-control.tsx', 'dep-debug.tsx'] }); +extendTest('form', { skip: ['complex-form-control.tsx', 'dep-debug.tsx', 'component-token.tsx'] }); diff --git a/components/form/__tests__/demo.test.tsx b/components/form/__tests__/demo.test.tsx index d7ab665e7b81..c60b1f56ee2a 100644 --- a/components/form/__tests__/demo.test.tsx +++ b/components/form/__tests__/demo.test.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import demoTest, { rootPropsTest } from '../../../tests/shared/demoTest'; -demoTest('form', { skip: ['complex-form-control.tsx', 'dep-debug.tsx'] }); +demoTest('form', { skip: ['complex-form-control.tsx', 'dep-debug.tsx', 'component-token.tsx'] }); rootPropsTest('form', (Form, props) => , { name: 'Form.Item', diff --git a/components/form/demo/component-token.md b/components/form/demo/component-token.md new file mode 100644 index 000000000000..de91480d0a7d --- /dev/null +++ b/components/form/demo/component-token.md @@ -0,0 +1,7 @@ +## zh-CN + +Component Token Debug. + +## en-US + +Component Token Debug. diff --git a/components/form/demo/component-token.tsx b/components/form/demo/component-token.tsx new file mode 100644 index 000000000000..e2c175994500 --- /dev/null +++ b/components/form/demo/component-token.tsx @@ -0,0 +1,47 @@ +import { ConfigProvider, Form, Input } from 'antd'; +import React from 'react'; + +const App: React.FC = () => ( + + + + + + + + + + + +); + +export default App; diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index de401b7bb156..9e9226c6847c 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -52,6 +52,7 @@ High performance Form component with data scope management. Including data colle label ellipsis Test col 24 usage Ref item +Component Token ## API diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 9e5a7b147196..02dae6b8d7cd 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -53,6 +53,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA 测试 label 省略 测试特殊 col 24 用法 引用字段 +组件 Token ## API diff --git a/components/form/style/index.ts b/components/form/style/index.ts index a78320f37cbc..ed01a76ec615 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -4,6 +4,55 @@ import { genCollapseMotion, zoomIn } from '../../style/motion'; import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genFormValidateMotionStyle from './explain'; +import type { CSSProperties } from 'react'; + +export interface ComponentToken { + /** + * @desc 必填项标记颜色 + * @descEN Required mark color + */ + labelRequiredMarkColor: string; + /** + * @desc 标签颜色 + * @descEN Label color + */ + labelColor: string; + /** + * @desc 标签字体大小 + * @descEN Label font size + */ + labelFontSize: number; + /** + * @desc 标签高度 + * @descEN Label height + */ + labelHeight: number; + /** + * @desc 标签冒号前间距 + * @descEN Label colon margin-inline-start + */ + labelColonMarginInlineStart: number; + /** + * @desc 标签冒号后间距 + * @descEN Label colon margin-inline-end + */ + labelColonMarginInlineEnd: number; + /** + * @desc 表单项间距 + * @descEN Form item margin bottom + */ + itemMarginBottom: number; + /** + * @desc 垂直布局标签内边距 + * @descEN Vertical layout label padding + */ + verticalLabelPadding: CSSProperties['padding']; + /** + * @desc 垂直布局标签外边距 + * @descEN Vertical layout label margin + */ + verticalLabelMargin: CSSProperties['margin']; +} export interface FormToken extends FullToken<'Form'> { formItemCls: string; @@ -113,13 +162,25 @@ const genFormStyle: GenerateStyle = (token) => { }; const genFormItemStyle: GenerateStyle = (token) => { - const { formItemCls, iconCls, componentCls, rootPrefixCls } = token; + const { + formItemCls, + iconCls, + componentCls, + rootPrefixCls, + labelRequiredMarkColor, + labelColor, + labelFontSize, + labelHeight, + labelColonMarginInlineStart, + labelColonMarginInlineEnd, + itemMarginBottom, + } = token; return { [formItemCls]: { ...resetComponent(token), - marginBottom: token.marginLG, + marginBottom: itemMarginBottom, verticalAlign: 'top', '&-with-help': { @@ -170,9 +231,9 @@ const genFormItemStyle: GenerateStyle = (token) => { display: 'inline-flex', alignItems: 'center', maxWidth: '100%', - height: token.controlHeight, - color: token.colorTextHeading, - fontSize: token.fontSize, + height: labelHeight, + color: labelColor, + fontSize: labelFontSize, [`> ${iconCls}`]: { fontSize: token.fontSize, @@ -183,7 +244,7 @@ const genFormItemStyle: GenerateStyle = (token) => { [`&${formItemCls}-required:not(${formItemCls}-required-mark-optional)::before`]: { display: 'inline-block', marginInlineEnd: token.marginXXS, - color: token.colorError, + color: labelRequiredMarkColor, fontSize: token.fontSize, fontFamily: 'SimSun, sans-serif', lineHeight: 1, @@ -217,8 +278,8 @@ const genFormItemStyle: GenerateStyle = (token) => { content: '":"', position: 'relative', marginBlock: 0, - marginInlineStart: token.marginXXS / 2, - marginInlineEnd: token.marginXS, + marginInlineStart: labelColonMarginInlineStart, + marginInlineEnd: labelColonMarginInlineEnd, }, [`&${formItemCls}-no-colon::after`]: { @@ -346,7 +407,7 @@ const genHorizontalStyle: GenerateStyle = (token) => { }; const genInlineStyle: GenerateStyle = (token) => { - const { componentCls, formItemCls } = token; + const { componentCls, formItemCls, itemMarginBottom } = token; return { [`${componentCls}-inline`]: { @@ -363,7 +424,7 @@ const genInlineStyle: GenerateStyle = (token) => { }, '&-with-help': { - marginBottom: token.marginLG, + marginBottom: itemMarginBottom, }, [`> ${formItemCls}-label, @@ -389,7 +450,8 @@ const genInlineStyle: GenerateStyle = (token) => { }; const makeVerticalLayoutLabel = (token: FormToken): CSSObject => ({ - padding: `0 0 ${token.paddingXS}px`, + padding: token.verticalLabelPadding, + margin: token.verticalLabelMargin, whiteSpace: 'initial', textAlign: 'start', @@ -476,20 +538,34 @@ const genVerticalStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => { - const formToken = mergeToken(token, { - formItemCls: `${token.componentCls}-item`, - rootPrefixCls, - }); - - return [ - genFormStyle(formToken), - genFormItemStyle(formToken), - genFormValidateMotionStyle(formToken), - genHorizontalStyle(formToken), - genInlineStyle(formToken), - genVerticalStyle(formToken), - genCollapseMotion(formToken), - zoomIn, - ]; -}); +export default genComponentStyleHook( + 'Form', + (token, { rootPrefixCls }) => { + const formToken = mergeToken(token, { + formItemCls: `${token.componentCls}-item`, + rootPrefixCls, + }); + + return [ + genFormStyle(formToken), + genFormItemStyle(formToken), + genFormValidateMotionStyle(formToken), + genHorizontalStyle(formToken), + genInlineStyle(formToken), + genVerticalStyle(formToken), + genCollapseMotion(formToken), + zoomIn, + ]; + }, + (token) => ({ + labelRequiredMarkColor: token.colorError, + labelColor: token.colorTextHeading, + labelFontSize: token.fontSize, + labelHeight: token.controlHeight, + labelColonMarginInlineStart: token.marginXXS / 2, + labelColonMarginInlineEnd: token.marginXS, + itemMarginBottom: token.marginLG, + verticalLabelPadding: `0 0 ${token.paddingXS}px`, + verticalLabelMargin: 0, + }), +); diff --git a/components/theme/interface/components.ts b/components/theme/interface/components.ts index 6664100cdaf8..296efdfa0080 100644 --- a/components/theme/interface/components.ts +++ b/components/theme/interface/components.ts @@ -59,6 +59,7 @@ import type { ComponentToken as TreeComponentToken } from '../../tree/style'; import type { ComponentToken as TreeSelectComponentToken } from '../../tree-select/style'; import type { ComponentToken as TypographyComponentToken } from '../../typography/style'; import type { ComponentToken as UploadComponentToken } from '../../upload/style'; +import type { ComponentToken as FormComponentToken } from '../../form/style'; export interface ComponentTokenMap { Affix?: {}; @@ -82,7 +83,7 @@ export interface ComponentTokenMap { Dropdown?: DropdownComponentToken; Empty?: EmptyComponentToken; FloatButton?: FloatButtonComponentToken; - Form?: {}; + Form?: FormComponentToken; Grid?: {}; Image?: ImageComponentToken; Input?: InputComponentToken; diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md index 7d9d6217ef4f..629632b02a87 100644 --- a/docs/react/migrate-less-variables.en-US.md +++ b/docs/react/migrate-less-variables.en-US.md @@ -19,6 +19,8 @@ import { Checkbox, ConfigProvider, Radio } from 'antd'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import { Checkbox, ConfigProvider, Radio } from 'antd'; + const App: React.FC = () => ( - ### Checkbox @@ -346,7 +346,23 @@ export default App; | --- | --- | --- | | `@empty-font-size` | `fontSize` | GlobalToken | - +### Form + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@label-required-color` | `labelRequiredMarkColor` | - | +| `@label-color` | `labelColor` | - | +| `@form-warning-input-bg` | - | Deprecated | +| `@form-item-margin-bottom` | `itemMarginBottom` | - | +| `@form-item-trailing-colon` | - | Deprecated | +| `@form-vertical-label-padding` | `verticalLabelPadding` | - | +| `@form-vertical-label-margin` | `verticalLabelMargin` | - | +| `@form-item-label-font-size` | `labelFontSize` | - | +| `@form-item-label-height` | `labelHeight` | - | +| `@form-item-label-colon-margin-right` | `labelColonMarginInlineEnd` | - | +| `@form-item-label-colon-margin-left` | `labelColonMarginInlineStart` | - | +| `@form-error-input-bg` | - | Deprecated | ### Image @@ -879,7 +895,18 @@ export default App; | `@transfer-item-padding-vertical` | `itemPaddingBlock` | - | | `@transfer-list-search-icon-top` | - | Deprecated | - +### Tree 树形控件 + + +| Less variables | Component Token | Note | +| --- | --- | --- | +| `@tree-bg` | `colorBgContainer` | Global Token | +| `@tree-title-height` | `titleHeight` | - | +| `@tree-child-padding` | - | Deprecated | +| `@tree-directory-selected-color` | `directoryNodeSelectedColor` | - | +| `@tree-directory-selected-bg` | `directoryNodeSelectedBg` | - | +| `@tree-node-hover-bg` | `nodeHoverBg` | - | +| `@tree-node-selected-bg` | `nodeSelectedBg` | - | ### Typography diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md index c607b2e685b4..bbf6d3129724 100644 --- a/docs/react/migrate-less-variables.zh-CN.md +++ b/docs/react/migrate-less-variables.zh-CN.md @@ -19,6 +19,8 @@ import { Checkbox, ConfigProvider, Radio } from 'antd'; import { Checkbox, ConfigProvider, Radio } from 'antd'; +import { Checkbox, ConfigProvider, Radio } from 'antd'; + const App: React.FC = () => ( +### Form 表单 + + +| less 变量 | Component Token | 备注 | +| --- | --- | --- | +| `@label-required-color` | `labelRequiredMarkColor` | - | +| `@label-color` | `labelColor` | - | +| `@form-warning-input-bg` | - | 由于样式变化已废弃 | +| `@form-item-margin-bottom` | `itemMarginBottom` | - | +| `@form-item-trailing-colon` | - | 由于样式变化已废弃 | +| `@form-vertical-label-padding` | `verticalLabelPadding` | - | +| `@form-vertical-label-margin` | `verticalLabelMargin` | - | +| `@form-item-label-font-size` | `labelFontSize` | - | +| `@form-item-label-height` | `labelHeight` | - | +| `@form-item-label-colon-margin-right` | `labelColonMarginInlineEnd` | - | +| `@form-item-label-colon-margin-left` | `labelColonMarginInlineStart` | - | +| `@form-error-input-bg` | - | 由于样式变化已废弃 | ### Image 图片 From 70d9a909c4aef7a11509e924069b5f2399b87015 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 22 Aug 2023 17:48:53 +0800 Subject: [PATCH 079/318] docs: fix anchor positioning (#44348) --- .dumi/theme/common/styles/Common.tsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/.dumi/theme/common/styles/Common.tsx b/.dumi/theme/common/styles/Common.tsx index a805422a238c..6cf0de24b2a7 100644 --- a/.dumi/theme/common/styles/Common.tsx +++ b/.dumi/theme/common/styles/Common.tsx @@ -1,9 +1,13 @@ import { css, Global } from '@emotion/react'; import React from 'react'; +import { useTheme } from 'antd-style'; -export default () => ( - { + const { headerHeight, margin } = useTheme(); + + return ( + ( vertical-align: middle; border-style: none; } + + html { + scroll-padding-top: ${headerHeight + margin}px; + } `} - /> -); + /> + ); +}; From 0295322564a8a2908063e2fbd04e3ec159038dc7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Aug 2023 19:00:06 +0800 Subject: [PATCH 080/318] docs: prevent highlight code initially (#44344) --- .../builtins/Previewer/CodePreviewer.tsx | 48 ++------- .dumi/theme/builtins/Previewer/index.tsx | 38 ++++--- .dumi/theme/common/CodePreview.tsx | 100 ++++++++++++++---- 3 files changed, 109 insertions(+), 77 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 9bbd9b08d2dc..66033bec7dde 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -8,10 +8,7 @@ import type { Project } from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk'; import classNames from 'classnames'; import { FormattedMessage, useSiteData } from 'dumi'; -import toReactElement from 'jsonml-to-react-element'; -import JsonML from 'jsonml.js/lib/utils'; import LZString from 'lz-string'; -import Prism from 'prismjs'; import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; import { Alert, Badge, Space, Tooltip } from 'antd'; @@ -31,28 +28,6 @@ import { ping } from '../../utils'; const { ErrorBoundary } = Alert; -function toReactComponent(jsonML: any) { - return toReactElement(jsonML, [ - [ - (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', - (node: any, index: any) => { - // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 - const attr = JsonML.getAttributes(node); - return React.createElement( - 'pre', - { - key: index, - className: `language-${attr.lang}`, - }, - React.createElement('code', { - dangerouslySetInnerHTML: { __html: attr.highlighted }, - }), - ); - }, - ], - ]); -} - function compress(string: string): string { return LZString.compressToBase64(string) .replace(/\+/g, '-') // Convert '+' to '-' @@ -130,13 +105,6 @@ const CodePreviewer: React.FC = (props) => { const [showOnlineUrl, setShowOnlineUrl] = useState(false); - const highlightedCodes = { - jsx: Prism.highlight(jsx, Prism.languages.javascript, 'jsx'), - tsx: Prism.highlight(entryCode, Prism.languages.javascript, 'jsx'), - }; - - const highlightedStyle = style ? Prism.highlight(style, Prism.languages.css, 'css') : ''; - useEffect(() => { const regexp = /preview-(\d+)-ant-design/; // matching PR preview addresses setShowOnlineUrl( @@ -538,17 +506,11 @@ createRoot(document.getElementById('container')).render(); {codeExpand && (
setCodeType(type)} /> - {highlightedStyle ? ( -
- 
-                
-
-
- ) : null}
)} @@ -560,7 +522,9 @@ createRoot(document.getElementById('container')).render(); // resulting in some response delays like following issue: // https://github.com/ant-design/ant-design/issues/39995 // So we insert style tag into head tag. - if (!style) return; + if (!style) { + return; + } const styleTag = document.createElement('style'); styleTag.type = 'text/css'; styleTag.innerHTML = style; diff --git a/.dumi/theme/builtins/Previewer/index.tsx b/.dumi/theme/builtins/Previewer/index.tsx index b987d57bc3f0..e36c556112f8 100644 --- a/.dumi/theme/builtins/Previewer/index.tsx +++ b/.dumi/theme/builtins/Previewer/index.tsx @@ -1,8 +1,10 @@ import React, { Suspense } from 'react'; import type { IPreviewerProps } from 'dumi'; -import { Skeleton } from 'antd'; +import { Skeleton, Alert } from 'antd'; import { createStyles } from 'antd-style'; +const { ErrorBoundary } = Alert; + const Previewer = React.lazy(() => import('./Previewer')); const useStyle = createStyles(({ css }) => ({ @@ -16,21 +18,23 @@ const useStyle = createStyles(({ css }) => ({ export default (props: IPreviewerProps) => { const { styles } = useStyle(); return ( - - {' '} - - } - > - - + + + {' '} + + } + > + + + ); }; diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx index 93c9c4580710..b69303dae1fe 100644 --- a/.dumi/theme/common/CodePreview.tsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -1,37 +1,101 @@ -import React from 'react'; +import React, { useEffect, useMemo } from 'react'; +import Prism from 'prismjs'; +import toReactElement from 'jsonml-to-react-element'; +import JsonML from 'jsonml.js/lib/utils'; import { Tabs } from 'antd'; const LANGS = { tsx: 'TypeScript', jsx: 'JavaScript', + style: 'CSS', }; interface CodePreviewProps { - codes?: Record; - toReactComponent?: (node: any) => React.ReactNode; + sourceCode?: string; + jsxCode?: string; + styleCode?: string; onCodeTypeChange?: (activeKey: string) => void; } -const CodePreview: React.FC = ({ toReactComponent, codes, onCodeTypeChange }) => { - const langList = Object.keys(codes).sort().reverse(); +function toReactComponent(jsonML: any) { + return toReactElement(jsonML, [ + [ + (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', + (node: any, index: any) => { + // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 + const attr = JsonML.getAttributes(node); + return React.createElement( + 'pre', + { + key: index, + className: `language-${attr.lang}`, + }, + React.createElement('code', { + dangerouslySetInnerHTML: { __html: attr.highlighted }, + }), + ); + }, + ], + ]); +} + +const CodePreview: React.FC = ({ + sourceCode = '', + jsxCode = '', + styleCode = '', + onCodeTypeChange, +}) => { + // 避免 Tabs 数量不稳定的闪动问题 + const initialCodes = {}; + if (sourceCode) { + initialCodes.tsx = ''; + } + if (jsxCode) { + initialCodes.jsx = ''; + } + if (styleCode) { + initialCodes.style = ''; + } + const [highlightedCodes, setHighlightedCodes] = React.useState(initialCodes); + + useEffect(() => { + const codes = { + tsx: Prism.highlight(sourceCode, Prism.languages.javascript, 'jsx'), + jsx: Prism.highlight(jsxCode, Prism.languages.javascript, 'jsx'), + style: Prism.highlight(styleCode, Prism.languages.css, 'css'), + }; + // 去掉空的代码类型 + Object.keys(codes).forEach((key) => { + if (!codes[key]) { + delete codes[key]; + } + }); + setHighlightedCodes(codes); + }, [jsxCode, sourceCode, styleCode]); + + const langList = Object.keys(highlightedCodes); + const items = useMemo( + () => + langList.map((lang) => ({ + label: LANGS[lang], + key: lang, + children: toReactComponent(['pre', { lang, highlighted: highlightedCodes[lang] }]), + })), + [JSON.stringify(highlightedCodes)], + ); + + if (!langList.length) { + return null; + } + if (langList.length === 1) { return toReactComponent([ 'pre', - { lang: langList[0], highlighted: codes[langList[0]], className: 'highlight' }, + { lang: langList[0], highlighted: highlightedCodes[langList[0]], className: 'highlight' }, ]); } - return ( - ({ - label: LANGS[lang], - key: lang, - children: toReactComponent(['pre', { lang, highlighted: codes[lang] }]), - }))} - /> - ); + + return ; }; export default CodePreview; From 4d12efed316138f889470de92b023295f279854c Mon Sep 17 00:00:00 2001 From: afc163 Date: Tue, 22 Aug 2023 19:01:34 +0800 Subject: [PATCH 081/318] chore: Update pr-contributor-welcome.yml (#44340) * chore: Update pr-contributor-welcome.yml Signed-off-by: afc163 * Apply suggestions from code review Signed-off-by: afc163 --------- Signed-off-by: afc163 --- .github/workflows/pr-contributor-welcome.yml | 28 +++++++++++++++++++- 1 file changed, 27 insertions(+), 1 deletion(-) diff --git a/.github/workflows/pr-contributor-welcome.yml b/.github/workflows/pr-contributor-welcome.yml index 302e9c71535b..b8610144b645 100644 --- a/.github/workflows/pr-contributor-welcome.yml +++ b/.github/workflows/pr-contributor-welcome.yml @@ -9,6 +9,32 @@ on: - 'components/**' jobs: + read-file: + runs-on: ubuntu-latest + outputs: + require-result: ${{ steps.contributors.outputs.content }} + steps: + - name: Checkout + uses: actions/checkout@v3 + - name: Read contributors.json + id: contributors + uses: juliangruber/read-file-action@v1 + with: + path: ./contributors.json + + output-log: + runs-on: ubuntu-latest + needs: read-file + steps: + - name: contributors.json + run: echo "${{ needs.read-file.outputs.require-result }}" + - name: creator + run: echo "${{ github.event.pull_request.user.login }}" + - name: contains + run: echo "${{ contains(fromJSON(needs.read-file.outputs.require-result), github.event.pull_request.user.login) }}" + - name: merged + run: echo "${{ github.event.pull_request.merged }}" + check-merged: runs-on: ubuntu-latest needs: read-file @@ -25,4 +51,4 @@ jobs: - body-include: '' \ No newline at end of file + body-include: '' From 24d055ed579f2c88ef11054204ae6a640e687fb5 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 22 Aug 2023 22:08:39 +0800 Subject: [PATCH 082/318] chore(deps-dev): bump vanilla-jsoneditor from 0.17.10 to 0.18.0 (#44352) Bumps [vanilla-jsoneditor](https://github.com/josdejong/svelte-jsoneditor) from 0.17.10 to 0.18.0. - [Release notes](https://github.com/josdejong/svelte-jsoneditor/releases) - [Changelog](https://github.com/josdejong/svelte-jsoneditor/blob/main/CHANGELOG.md) - [Commits](https://github.com/josdejong/svelte-jsoneditor/compare/v0.17.10...v0.18.0) --- updated-dependencies: - dependency-name: vanilla-jsoneditor dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0a13a017caa5..7ae4fd84bb03 100644 --- a/package.json +++ b/package.json @@ -304,7 +304,7 @@ "ts-node": "^10.8.2", "typedoc": "^0.24.8", "typescript": "~5.1.3", - "vanilla-jsoneditor": "^0.17.1", + "vanilla-jsoneditor": "^0.18.0", "webpack-bundle-analyzer": "^4.1.0", "xhr-mock": "^2.4.1" }, From f5fcb7010d6f8425d6b9160a1198d54bdfb22bef 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: Tue, 22 Aug 2023 23:53:18 +0800 Subject: [PATCH 083/318] fix: rm useless form inline style (#44360) --- components/form/style/index.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/components/form/style/index.ts b/components/form/style/index.ts index a78320f37cbc..4664972a1d84 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -362,10 +362,6 @@ const genInlineStyle: GenerateStyle = (token) => { flexWrap: 'nowrap', }, - '&-with-help': { - marginBottom: token.marginLG, - }, - [`> ${formItemCls}-label, > ${formItemCls}-control`]: { display: 'inline-block', From 5d522a374a375b1db83631ed5b5ba27233e5e37a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2?= Date: Wed, 23 Aug 2023 12:26:05 +0800 Subject: [PATCH 084/318] chore: remove duplicate styles (#44368) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit genBasicInputStyle 方法中已经包括 genActiveStyle 了 --- components/mentions/style/index.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/components/mentions/style/index.ts b/components/mentions/style/index.ts index b7e8adfeb152..c106f4b82bc4 100644 --- a/components/mentions/style/index.ts +++ b/components/mentions/style/index.ts @@ -1,6 +1,5 @@ import type { InputToken } from '../../input/style'; import { - genActiveStyle, genBasicInputStyle, genDisabledStyle, genPlaceholderStyle, @@ -77,10 +76,6 @@ const genMentionsStyle: GenerateStyle = (token) => { }, }, - '&-focused': { - ...genActiveStyle(token), - }, - [`&-affix-wrapper ${componentCls}-suffix`]: { position: 'absolute', top: 0, From 79825c06edd30fc1bd2fe27853a109599c3bdef0 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 23 Aug 2023 19:23:25 +0800 Subject: [PATCH 085/318] fix: Table should not crash if filterDropdown is boolean (#44357) * fix: Table should not crash if filterDropdown is boolean * chore: code clean * chore: use supportNodeRef --- components/menu/OverrideContext.tsx | 7 ++++++- .../table/__tests__/Table.filter.test.tsx | 20 +++++++++++++++++++ package.json | 2 +- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/components/menu/OverrideContext.tsx b/components/menu/OverrideContext.tsx index bec81a456b42..f8b9720379ce 100644 --- a/components/menu/OverrideContext.tsx +++ b/components/menu/OverrideContext.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { NoCompactStyle } from '../space/Compact'; import type { MenuProps } from './menu'; +import { supportNodeRef } from 'rc-util'; // Used for Dropdown only export interface OverrideContextProps { @@ -36,7 +37,11 @@ export const OverrideProvider = React.forwardRef< return ( - {React.cloneElement(children as React.ReactElement, { ref })} + + {supportNodeRef(children) + ? React.cloneElement(children as React.ReactElement, { ref }) + : children} + ); }); diff --git a/components/table/__tests__/Table.filter.test.tsx b/components/table/__tests__/Table.filter.test.tsx index 129f1d9c4761..df1ffe210589 100644 --- a/components/table/__tests__/Table.filter.test.tsx +++ b/components/table/__tests__/Table.filter.test.tsx @@ -2834,4 +2834,24 @@ describe('Table.filter', () => { true, ); }); + + it('should not crash when filterDropdown is boolean', () => { + const tableProps = { + key: 'stabletable', + rowKey: 'name', + dataSource: [], + columns: [ + { + title: 'Name', + dataIndex: 'name', + filterDropdown: true, + }, + ], + }; + + const { container } = render(createTable(tableProps)); + + // User opens filter Dropdown. + fireEvent.click(container.querySelector('.ant-dropdown-trigger.ant-table-filter-trigger')!); + }); }); diff --git a/package.json b/package.json index 7ae4fd84bb03..33487b37dc7e 100644 --- a/package.json +++ b/package.json @@ -154,7 +154,7 @@ "rc-tree": "~5.7.6", "rc-tree-select": "~5.11.0", "rc-upload": "~4.3.0", - "rc-util": "^5.32.0", + "rc-util": "^5.37.0", "scroll-into-view-if-needed": "^3.0.3", "throttle-debounce": "^5.0.0" }, From 4cf3ba1b008112e4032024c767b9024181761637 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: Wed, 23 Aug 2023 20:12:26 +0800 Subject: [PATCH 086/318] fix: Select popup size in transform layout (#44378) --- .../__snapshots__/index.test.tsx.snap | 4 ++-- .../__snapshots__/components.test.tsx.snap | 24 +++++++++---------- .../__snapshots__/pagination.test.tsx.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 4 ++-- .../__snapshots__/index.test.tsx.snap | 2 +- package.json | 6 ++--- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/components/cascader/__tests__/__snapshots__/index.test.tsx.snap b/components/cascader/__tests__/__snapshots__/index.test.tsx.snap index 42c6eb05f9ee..eb798111ddd3 100644 --- a/components/cascader/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/cascader/__tests__/__snapshots__/index.test.tsx.snap @@ -1676,7 +1676,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader wi exports[`Cascader should render not found content 1`] = `
@@ -41552,7 +41552,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize large
@@ -41688,7 +41688,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize middl
@@ -41824,7 +41824,7 @@ exports[`ConfigProvider components TreeSelect configProvider componentSize small
@@ -41960,7 +41960,7 @@ exports[`ConfigProvider components TreeSelect normal 1`] = `
@@ -42096,7 +42096,7 @@ exports[`ConfigProvider components TreeSelect prefixCls 1`] = `
diff --git a/components/list/__tests__/__snapshots__/pagination.test.tsx.snap b/components/list/__tests__/__snapshots__/pagination.test.tsx.snap index e12c64ea9e75..5c62459fec11 100644 --- a/components/list/__tests__/__snapshots__/pagination.test.tsx.snap +++ b/components/list/__tests__/__snapshots__/pagination.test.tsx.snap @@ -478,7 +478,7 @@ exports[`List.pagination should change page size work 2`] = `
@@ -1682,7 +1682,7 @@ exports[`renders components/tree-select/demo/render-panel.tsx extend context cor
diff --git a/components/tree-select/__tests__/__snapshots__/index.test.tsx.snap b/components/tree-select/__tests__/__snapshots__/index.test.tsx.snap index d203a002599f..4fc72fa2fcee 100644 --- a/components/tree-select/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/tree-select/__tests__/__snapshots__/index.test.tsx.snap @@ -34,7 +34,7 @@ exports[`TreeSelect TreeSelect Custom Icons should \`treeIcon\` work 1`] = `
diff --git a/package.json b/package.json index fbc77a3395c1..896eae2aae82 100644 --- a/package.json +++ b/package.json @@ -123,7 +123,7 @@ "copy-to-clipboard": "^3.2.0", "dayjs": "^1.11.1", "qrcode.react": "^3.1.0", - "rc-cascader": "~3.15.0", + "rc-cascader": "~3.16.0", "rc-checkbox": "~3.1.0", "rc-collapse": "~3.7.0", "rc-dialog": "~9.2.0", @@ -143,7 +143,7 @@ "rc-rate": "~2.12.0", "rc-resize-observer": "^1.2.0", "rc-segmented": "~2.2.0", - "rc-select": "~14.7.1", + "rc-select": "~14.8.0", "rc-slider": "~10.1.0", "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", @@ -152,7 +152,7 @@ "rc-textarea": "~1.3.3", "rc-tooltip": "~6.0.0", "rc-tree": "~5.7.6", - "rc-tree-select": "~5.11.0", + "rc-tree-select": "~5.12.0", "rc-upload": "~4.3.0", "rc-util": "^5.36.0", "scroll-into-view-if-needed": "^3.0.3", From e91f92778451ca31c8647225fd4bb1e38744d58c Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 24 Aug 2023 09:47:24 +0800 Subject: [PATCH 087/318] fix: radio should work in tree (#44380) * fix: radio should work in tree * chore: code clean --- components/radio/style/index.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 18bdc10dd3fe..f2bf9bb8e0cb 100644 --- a/components/radio/style/index.tsx +++ b/components/radio/style/index.tsx @@ -223,14 +223,7 @@ const getRadioBasicStyle: GenerateStyle = (token) => { [`${componentCls}-input`]: { position: 'absolute', - insetBlockStart: 0, - insetInlineEnd: 0, - insetBlockEnd: 0, - insetInlineStart: 0, - width: 0, - height: 0, - padding: 0, - margin: 0, + inset: 0, zIndex: 1, cursor: 'pointer', opacity: 0, From a3bd7a797f62585f852c170215d0628c6e08cf65 Mon Sep 17 00:00:00 2001 From: Amumu Date: Thu, 24 Aug 2023 10:47:02 +0800 Subject: [PATCH 088/318] fix: rm useless form inline style (#44375) --- components/form/style/index.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/components/form/style/index.ts b/components/form/style/index.ts index ed01a76ec615..6609d954f52f 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -407,7 +407,7 @@ const genHorizontalStyle: GenerateStyle = (token) => { }; const genInlineStyle: GenerateStyle = (token) => { - const { componentCls, formItemCls, itemMarginBottom } = token; + const { componentCls, formItemCls } = token; return { [`${componentCls}-inline`]: { @@ -423,10 +423,6 @@ const genInlineStyle: GenerateStyle = (token) => { flexWrap: 'nowrap', }, - '&-with-help': { - marginBottom: itemMarginBottom, - }, - [`> ${formItemCls}-label, > ${formItemCls}-control`]: { display: 'inline-block', From 4321cf9b5173ddf49afd80a57f0c3cd705fe7b78 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Thu, 24 Aug 2023 11:30:08 +0800 Subject: [PATCH 089/318] feat: Tour support horizontal gap (#44377) * chore: bump @rc-component/tour * chore: increase size-limit * chore: increase size-limit --- package.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index 896eae2aae82..817d6e890365 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "@ctrl/tinycolor": "^3.6.0", "@rc-component/color-picker": "~1.4.0", "@rc-component/mutate-observer": "^1.1.0", - "@rc-component/tour": "~1.9.0", + "@rc-component/tour": "~1.10.0", "@rc-component/trigger": "^1.15.0", "classnames": "^2.2.6", "copy-to-clipboard": "^3.2.0", @@ -318,11 +318,11 @@ "size-limit": [ { "path": "./dist/antd.min.js", - "limit": "390 KiB" + "limit": "395 KiB" }, { "path": "./dist/antd-with-locales.min.js", - "limit": "449 KiB" + "limit": "454 KiB" } ], "tnpm": { @@ -332,4 +332,4 @@ "*.{ts,tsx,js,jsx}": "rome format --write", "*.{json,less,md}": "prettier --ignore-unknown --write" } -} +} \ No newline at end of file From 2096c01016be1d6c380425f2ce35fae9f1ce1761 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Thu, 24 Aug 2023 11:51:15 +0800 Subject: [PATCH 090/318] feat: Radio add component token (#44389) --- components/radio/style/index.tsx | 36 ++++++++++++++++++++++++++------ 1 file changed, 30 insertions(+), 6 deletions(-) diff --git a/components/radio/style/index.tsx b/components/radio/style/index.tsx index 18bdc10dd3fe..77b37a09eb47 100644 --- a/components/radio/style/index.tsx +++ b/components/radio/style/index.tsx @@ -57,6 +57,21 @@ export interface ComponentToken { * @descEN Color of checked solid Radio button text */ buttonSolidCheckedColor: string; + /** + * @desc 单选框实色按钮选中时的背景色 + * @descEN Background color of checked solid Radio button text + */ + buttonSolidCheckedBg: string; + /** + * @desc 单选框实色按钮选中时的悬浮态背景色 + * @descEN Background color of checked solid Radio button text when hover + */ + buttonSolidCheckedHoverBg: string; + /** + * @desc 单选框实色按钮选中时的激活态背景色 + * @descEN Background color of checked solid Radio button text when active + */ + buttonSolidCheckedActiveBg: string; /** * @desc 单选框右间距 * @descEN Margin right of Radio button @@ -319,6 +334,9 @@ const getRadioButtonStyle: GenerateStyle = (token) => { colorPrimary, colorPrimaryHover, colorPrimaryActive, + buttonSolidCheckedBg, + buttonSolidCheckedHoverBg, + buttonSolidCheckedActiveBg, } = token; return { [`${componentCls}-button-wrapper`]: { @@ -474,19 +492,19 @@ const getRadioButtonStyle: GenerateStyle = (token) => { [`${componentCls}-group-solid &-checked:not(${componentCls}-button-wrapper-disabled)`]: { color: buttonSolidCheckedColor, - background: colorPrimary, - borderColor: colorPrimary, + background: buttonSolidCheckedBg, + borderColor: buttonSolidCheckedBg, '&:hover': { color: buttonSolidCheckedColor, - background: colorPrimaryHover, - borderColor: colorPrimaryHover, + background: buttonSolidCheckedHoverBg, + borderColor: buttonSolidCheckedHoverBg, }, '&:active': { color: buttonSolidCheckedColor, - background: colorPrimaryActive, - borderColor: colorPrimaryActive, + background: buttonSolidCheckedActiveBg, + borderColor: buttonSolidCheckedActiveBg, }, }, @@ -552,6 +570,9 @@ export default genComponentStyleHook( colorTextDisabled, controlItemBgActiveDisabled, colorTextLightSolid, + colorPrimary, + colorPrimaryHover, + colorPrimaryActive, } = token; const dotPadding = 4; // Fixed value @@ -568,6 +589,9 @@ export default genComponentStyleHook( // Radio buttons buttonSolidCheckedColor: colorTextLightSolid, + buttonSolidCheckedBg: colorPrimary, + buttonSolidCheckedHoverBg: colorPrimaryHover, + buttonSolidCheckedActiveBg: colorPrimaryActive, buttonBg: colorBgContainer, buttonCheckedBg: colorBgContainer, buttonColor: colorText, From eaa86351e4051f90c769462fbd71938333ad53c0 Mon Sep 17 00:00:00 2001 From: xr0master Date: Thu, 24 Aug 2023 08:26:26 +0300 Subject: [PATCH 091/318] ColorPresets: fix duplicate keys (#44370) * ColorPresets: fix duplicate keys Signed-off-by: xr0master * Update components/color-picker/components/ColorPresets.tsx add lint disable Signed-off-by: xr0master --------- Signed-off-by: xr0master --- components/color-picker/components/ColorPresets.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/components/color-picker/components/ColorPresets.tsx b/components/color-picker/components/ColorPresets.tsx index 0d5cdaacbe31..a6b99f1fecc3 100644 --- a/components/color-picker/components/ColorPresets.tsx +++ b/components/color-picker/components/ColorPresets.tsx @@ -59,9 +59,10 @@ const ColorPresets: FC = ({ prefixCls, presets, value: color, children: (
{Array.isArray(preset?.colors) && preset.colors?.length > 0 ? ( - preset.colors.map((presetColor: Color) => ( + preset.colors.map((presetColor: Color, index: number) => ( Date: Thu, 24 Aug 2023 13:27:59 +0800 Subject: [PATCH 092/318] docs: Fix Form provider demo (#44391) * docs: fix provider demo * test: update snapshot --- .../__snapshots__/demo-extend.test.ts.snap | 25 ++++++++++++++++++- .../__snapshots__/demo.test.tsx.snap | 19 ++++++++++++++ components/form/demo/form-context.tsx | 12 ++++++--- 3 files changed, 52 insertions(+), 4 deletions(-) diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 23adac0b8e45..6426df8ec537 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -6833,6 +6833,25 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly
+
+
+
+
+
+
+
+
+
@@ -6928,7 +6947,11 @@ exports[`renders components/form/demo/form-context.tsx extend context correctly `; -exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = `[]`; +exports[`renders components/form/demo/form-context.tsx extend context correctly 2`] = ` +[ + "Warning: [antd: Form.Item] \`name\` is only used for validate React element. If you are using Form.Item as layout display, please remove \`name\` instead.", +] +`; exports[`renders components/form/demo/form-in-modal.tsx extend context correctly 1`] = `
diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 76849810c1f1..ca2c8593097b 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -4025,6 +4025,25 @@ exports[`renders components/form/demo/form-context.tsx correctly 1`] = `
+
+
+
+
+
+
+
+
+
diff --git a/components/form/demo/form-context.tsx b/components/form/demo/form-context.tsx index 2b689925eadc..284cda9537e6 100644 --- a/components/form/demo/form-context.tsx +++ b/components/form/demo/form-context.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useRef, useState } from 'react'; import { SmileOutlined, UserOutlined } from '@ant-design/icons'; -import { Avatar, Button, Form, Input, InputNumber, Modal, Typography } from 'antd'; +import { Avatar, Button, Form, Input, InputNumber, Modal, Space, Typography } from 'antd'; import type { FormInstance } from 'antd/es/form'; const layout = { @@ -93,6 +93,10 @@ const App: React.FC = () => { + + {/* Create a hidden field to make Form instance record this */} +
- + ); }; -// Usage -const columns = [ - { title: 'A', dataIndex: 'key', width: 150 }, - { title: 'B', dataIndex: 'key' }, - { title: 'C', dataIndex: 'key' }, - { title: 'D', dataIndex: 'key' }, - { title: 'E', dataIndex: 'key', width: 200 }, - { title: 'F', dataIndex: 'key', width: 100 }, -]; - -const data = Array.from({ length: 100000 }, (_, key) => ({ key })); - -const App: React.FC = () => ( - -); - export default App; diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 57be4a557d0e..8b6e4cff816b 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -97,7 +97,7 @@ const columns = [ ellipsis column ellipsis column custom tooltip Summary -Virtual list +Virtual list Responsive Nested Bordered Table Debug Pagination Settings diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index cb65b949a94f..125d3f3eeb1b 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -98,7 +98,7 @@ const columns = [ 单元格自动省略 自定义单元格省略提示 总结栏 -虚拟列表 +虚拟列表 响应式 嵌套带边框的表格 Debug 分页设置 diff --git a/components/table/style/index.ts b/components/table/style/index.ts index 6a11ccef9166..8fd9eadba4bc 100644 --- a/components/table/style/index.ts +++ b/components/table/style/index.ts @@ -17,6 +17,7 @@ import genSizeStyle from './size'; import genSorterStyle from './sorter'; import genStickyStyle from './sticky'; import genSummaryStyle from './summary'; +import genVirtualStyle from './virtual'; export interface ComponentToken { /** @@ -272,6 +273,7 @@ const genTableStyle: GenerateStyle = (token) => { // ============================= Cell ============================= [` + ${componentCls}-cell, ${componentCls}-thead > tr > th, ${componentCls}-tbody > tr > th, ${componentCls}-tbody > tr > td, @@ -513,6 +515,7 @@ export default genComponentStyleHook( genEllipsisStyle(tableToken), genSizeStyle(tableToken), genRtlStyle(tableToken), + genVirtualStyle(tableToken), ]; }, (token) => { diff --git a/components/table/style/size.ts b/components/table/style/size.ts index 9b669647f89a..b656c07af660 100644 --- a/components/table/style/size.ts +++ b/components/table/style/size.ts @@ -15,6 +15,7 @@ const genSizeStyle: GenerateStyle = (token) => { [` ${componentCls}-title, ${componentCls}-footer, + ${componentCls}-cell, ${componentCls}-thead > tr > th, ${componentCls}-tbody > tr > th, ${componentCls}-tbody > tr > td, diff --git a/components/table/style/virtual.ts b/components/table/style/virtual.ts new file mode 100644 index 000000000000..757ed9d98de1 --- /dev/null +++ b/components/table/style/virtual.ts @@ -0,0 +1,65 @@ +import type { CSSObject } from '@ant-design/cssinjs'; +import type { GenerateStyle } from '../../theme/internal'; +import type { TableToken } from './index'; + +const genVirtualStyle: GenerateStyle = (token) => { + const { componentCls } = token; + + const tableBorder = `${token.lineWidth}px ${token.lineType} ${token.tableBorderColor}`; + + const rowCellCls = `${componentCls}-expanded-row-cell`; + + return { + [`${componentCls}-wrapper`]: { + // ========================== Row ========================== + [`${componentCls}-tbody-virtual`]: { + [`${componentCls}-row`]: { + display: 'flex', + boxSizing: 'border-box', + width: '100%', + }, + + [`${componentCls}-cell`]: { + borderBottom: tableBorder, + }, + + [`${componentCls}-expanded-row`]: { + [`${rowCellCls}${rowCellCls}-fixed`]: { + position: 'sticky', + insetInlineStart: 0, + overflow: 'hidden', + width: `calc(var(--virtual-width) - ${token.lineWidth}px)`, + borderInlineEnd: 'none', + }, + }, + }, + + // ======================== Border ========================= + [`${componentCls}-bordered`]: { + [`${componentCls}-tbody-virtual`]: { + '&:after': { + content: '""', + insetInline: 0, + bottom: 0, + borderBottom: tableBorder, + position: 'absolute', + }, + + [`${componentCls}-cell`]: { + borderInlineEnd: tableBorder, + + [`&${componentCls}-cell-fix-right-first:before`]: { + content: '""', + position: 'absolute', + insetBlock: 0, + insetInlineStart: -token.lineWidth, + borderInlineStart: tableBorder, + }, + }, + }, + }, + }, + }; +}; + +export default genVirtualStyle; diff --git a/package.json b/package.json index d241a6ce5a86..9d385d4ec7f9 100644 --- a/package.json +++ b/package.json @@ -147,7 +147,7 @@ "rc-slider": "~10.1.0", "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", - "rc-table": "~7.32.1", + "rc-table": "~7.33.1", "rc-tabs": "~12.9.0", "rc-textarea": "~1.3.3", "rc-tooltip": "~6.0.0", @@ -204,7 +204,6 @@ "@types/react-dom": "^18.0.0", "@types/react-highlight-words": "^0.16.4", "@types/react-resizable": "^3.0.0", - "@types/react-window": "^1.8.2", "@types/throttle-debounce": "^5.0.0", "@types/warning": "^3.0.0", "@typescript-eslint/eslint-plugin": "^5.40.0", @@ -285,7 +284,6 @@ "react-resizable": "^3.0.1", "react-router-dom": "^6.0.2", "react-sticky-box": "^2.0.0", - "react-window": "^1.8.5", "regenerator-runtime": "^0.14.0", "remark": "^14.0.1", "remark-cli": "^11.0.0", From 97b03dc9386d2cbe2d8575e6040c73cecfe6506c 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: Mon, 28 Aug 2023 19:38:03 +0800 Subject: [PATCH 116/318] fix: rm useless ts def of upload (#44468) --- components/upload/index.en-US.md | 2 +- components/upload/index.zh-CN.md | 2 +- components/upload/interface.ts | 5 +++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md index 49a2c7d48c64..08928a434239 100644 --- a/components/upload/index.en-US.md +++ b/components/upload/index.en-US.md @@ -87,7 +87,7 @@ Extends File with additional props. | crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 | | name | File name | string | - | - | | percent | Upload progress percent | number | - | - | -| status | Upload status. Show different style when configured | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - | +| status | Upload status. Show different style when configured | `error` \| `done` \| `uploading` \| `removed` | - | - | | thumbUrl | Thumb image url | string | - | - | | uid | unique id. Will auto-generate when not provided | string | - | - | | url | Download url | string | - | - | diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index d3685cce05e5..8d42a0ae82fe 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -88,7 +88,7 @@ demo: | crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 4.20.0 | | name | 文件名 | string | - | - | | percent | 上传进度 | number | - | - | -| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `success` \| `done` \| `uploading` \| `removed` | - | - | +| status | 上传状态，不同状态展示颜色也会有所不同 | `error` \| `done` \| `uploading` \| `removed` | - | - | | thumbUrl | 缩略图地址 | string | - | - | | uid | 唯一标识符，不设置时会自动生成 | string | - | - | | url | 下载地址 | string | - | - | diff --git a/components/upload/interface.ts b/components/upload/interface.ts index 0639346be407..928919a6a5ba 100755 --- a/components/upload/interface.ts +++ b/components/upload/interface.ts @@ -1,16 +1,17 @@ +import type * as React from 'react'; import type { RcFile as OriRcFile, UploadRequestOption as RcCustomRequestOptions, UploadProps as RcUploadProps, } from 'rc-upload/lib/interface'; -import type * as React from 'react'; + import type { ProgressAriaProps, ProgressProps } from '../progress'; export interface RcFile extends OriRcFile { readonly lastModifiedDate: Date; } -export type UploadFileStatus = 'error' | 'success' | 'done' | 'uploading' | 'removed'; +export type UploadFileStatus = 'error' | 'done' | 'uploading' | 'removed'; export interface HttpRequestHeader { [key: string]: string; From 07056fa791ea9dd3926000c014783bdeb0242e86 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 28 Aug 2023 19:48:55 +0800 Subject: [PATCH 117/318] docs: fix theme card style in Firefox (#44473) --- .dumi/pages/index/components/Theme/ThemePicker.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/.dumi/pages/index/components/Theme/ThemePicker.tsx b/.dumi/pages/index/components/Theme/ThemePicker.tsx index e99b1cd13872..790a553fc498 100644 --- a/.dumi/pages/index/components/Theme/ThemePicker.tsx +++ b/.dumi/pages/index/components/Theme/ThemePicker.tsx @@ -43,6 +43,7 @@ const useStyle = createStyles(({ token, css }) => ({ width: 0; height: 0; opacity: 0; + position: absolute; } img { From 4d1bac4651e1adfd54a871792c8d157433cc88cc Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 28 Aug 2023 20:10:40 +0800 Subject: [PATCH 118/318] site: add code-hide Button for CodePreviewer (#44449) * site: add code-hide Button for CodePreviewer * fix: fix style * add token * fix: fix css props * fix * fix: fix * fix: fix * Update .dumi/theme/builtins/Previewer/CodePreviewer.tsx Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: lijianan <574980606@qq.com> * fix: fix --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> --- .../builtins/Previewer/CodePreviewer.tsx | 41 +++++++++++++++++-- .dumi/theme/common/CodePreview.tsx | 22 ++++------ .dumi/theme/common/styles/Demo.tsx | 2 +- .dumi/theme/locales/en-US.json | 1 + .dumi/theme/locales/zh-CN.json | 1 + 5 files changed, 49 insertions(+), 18 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 66033bec7dde..60024d8afcef 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -1,17 +1,21 @@ +/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ +import React, { useContext, useEffect, useRef, useState } from 'react'; import { CheckOutlined, LinkOutlined, SnippetsOutlined, ThunderboltOutlined, + UpOutlined, } from '@ant-design/icons'; import type { Project } from '@stackblitz/sdk'; import stackblitzSdk from '@stackblitz/sdk'; +import { Alert, Badge, Space, Tooltip } from 'antd'; +import { createStyles, css } from 'antd-style'; import classNames from 'classnames'; import { FormattedMessage, useSiteData } from 'dumi'; import LZString from 'lz-string'; -import React, { useContext, useEffect, useRef, useState } from 'react'; import CopyToClipboard from 'react-copy-to-clipboard'; -import { Alert, Badge, Space, Tooltip } from 'antd'; + import type { AntdPreviewerProps } from '.'; import useLocation from '../../../hooks/useLocation'; import BrowserFrame from '../../common/BrowserFrame'; @@ -63,6 +67,31 @@ function useShowRiddleButton() { return showRiddleButton; } +const useStyle = createStyles(({ token }) => { + const { borderRadius } = token; + return { + codeHideBtn: css` + width: 100%; + height: 40px; + display: flex; + justify-content: center; + align-items: center; + border-radius: 0 0 ${borderRadius}px ${borderRadius}px; + border-top: 1px solid ${token.colorSplit}; + color: ${token.colorTextSecondary}; + transition: all 0.2s ease-in-out; + background-color: ${token.colorBgElevated}; + cursor: pointer; + &:hover { + color: ${token.colorPrimary}; + } + span { + margin-right: ${token.marginXXS}px; + } + `, + }; +}); + const CodePreviewer: React.FC = (props) => { const { asset, @@ -86,6 +115,8 @@ const CodePreviewer: React.FC = (props) => { const { pkg } = useSiteData(); const location = useLocation(); + const { styles } = useStyle(); + const entryCode = asset.dependencies['index.tsx'].value; const showRiddleButton = useShowRiddleButton(); @@ -509,8 +540,12 @@ createRoot(document.getElementById('container')).render(); sourceCode={entryCode} jsxCode={jsx} styleCode={style} - onCodeTypeChange={(type) => setCodeType(type)} + onCodeTypeChange={setCodeType} /> +
setCodeExpand(false)}> + + +
)} diff --git a/.dumi/theme/common/CodePreview.tsx b/.dumi/theme/common/CodePreview.tsx index b69303dae1fe..827630fcc014 100644 --- a/.dumi/theme/common/CodePreview.tsx +++ b/.dumi/theme/common/CodePreview.tsx @@ -1,8 +1,8 @@ import React, { useEffect, useMemo } from 'react'; -import Prism from 'prismjs'; +import { Tabs } from 'antd'; import toReactElement from 'jsonml-to-react-element'; import JsonML from 'jsonml.js/lib/utils'; -import { Tabs } from 'antd'; +import Prism from 'prismjs'; const LANGS = { tsx: 'TypeScript', @@ -17,22 +17,16 @@ interface CodePreviewProps { onCodeTypeChange?: (activeKey: string) => void; } -function toReactComponent(jsonML: any) { +function toReactComponent(jsonML: any[]) { return toReactElement(jsonML, [ [ (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre', - (node: any, index: any) => { - // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7 + (node: any, index: number) => { const attr = JsonML.getAttributes(node); - return React.createElement( - 'pre', - { - key: index, - className: `language-${attr.lang}`, - }, - React.createElement('code', { - dangerouslySetInnerHTML: { __html: attr.highlighted }, - }), + return ( + 
+            
+
); }, ], diff --git a/.dumi/theme/common/styles/Demo.tsx b/.dumi/theme/common/styles/Demo.tsx index c7b9b6fc5c75..9b0d8c1faa96 100644 --- a/.dumi/theme/common/styles/Demo.tsx +++ b/.dumi/theme/common/styles/Demo.tsx @@ -1,5 +1,5 @@ -import { css, Global } from '@emotion/react'; import React from 'react'; +import { css, Global } from '@emotion/react'; import { useTheme } from 'antd-style'; const GlobalDemoStyles: React.FC = () => { diff --git a/.dumi/theme/locales/en-US.json b/.dumi/theme/locales/en-US.json index 7a9f792abbd9..6ca8a49d35ef 100644 --- a/.dumi/theme/locales/en-US.json +++ b/.dumi/theme/locales/en-US.json @@ -31,6 +31,7 @@ "app.demo.copied": "Copied!", "app.demo.code.show": "Show code", "app.demo.code.hide": "Hide code", + "app.demo.code.hide.simplify": "Hide", "app.demo.codepen": "Open in CodePen", "app.demo.codesandbox": "Open in CodeSandbox", "app.demo.stackblitz": "Open in Stackblitz", diff --git a/.dumi/theme/locales/zh-CN.json b/.dumi/theme/locales/zh-CN.json index 3618d9dabbd6..2a37d63e3ea7 100644 --- a/.dumi/theme/locales/zh-CN.json +++ b/.dumi/theme/locales/zh-CN.json @@ -31,6 +31,7 @@ "app.demo.copied": "复制成功", "app.demo.code.show": "显示代码", "app.demo.code.hide": "收起代码", + "app.demo.code.hide.simplify": "收起", "app.demo.codepen": "在 CodePen 中打开", "app.demo.codesandbox": "在 CodeSandbox 中打开", "app.demo.stackblitz": "在 Stackblitz 中打开", From 2d1d98790e5ec438b77645cfd1f49b194d810ae9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Mon, 28 Aug 2023 20:16:34 +0800 Subject: [PATCH 119/318] fix: color picker open popup when disabled (#44466) --- components/color-picker/ColorPicker.tsx | 7 ++- .../color-picker/__tests__/index.test.tsx | 45 +++++++++++++++++-- 2 files changed, 45 insertions(+), 7 deletions(-) diff --git a/components/color-picker/ColorPicker.tsx b/components/color-picker/ColorPicker.tsx index abdc869311fd..7b9eab1e51c9 100644 --- a/components/color-picker/ColorPicker.tsx +++ b/components/color-picker/ColorPicker.tsx @@ -1,6 +1,5 @@ import type { CSSProperties, FC } from 'react'; import React, { useContext, useMemo, useRef, useState } from 'react'; - import type { HsbaColorType, ColorPickerProps as RcColorPickerProps, @@ -11,16 +10,16 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState'; import genPurePanel from '../_util/PurePanel'; import { getStatusClassNames } from '../_util/statusUtils'; import warning from '../_util/warning'; -import type { SizeType } from '../config-provider/SizeContext'; import type { ConfigConsumerProps } from '../config-provider/context'; import { ConfigContext } from '../config-provider/context'; import useSize from '../config-provider/hooks/useSize'; +import type { SizeType } from '../config-provider/SizeContext'; import { FormItemInputContext, NoFormStyle } from '../form/context'; import type { PopoverProps } from '../popover'; import Popover from '../popover'; import theme from '../theme'; -import ColorPickerPanel from './ColorPickerPanel'; import type { Color } from './color'; +import ColorPickerPanel from './ColorPickerPanel'; import ColorTrigger from './components/ColorTrigger'; import useColorState from './hooks/useColorState'; import type { @@ -229,7 +228,7 @@ const ColorPicker: CompoundedComponent = (props) => { style={styles?.popup} overlayInnerStyle={styles?.popupOverlayInner} onOpenChange={(visible) => { - if (popupAllowCloseRef.current) { + if (popupAllowCloseRef.current && !disabled) { setPopupOpen(visible); } }} diff --git a/components/color-picker/__tests__/index.test.tsx b/components/color-picker/__tests__/index.test.tsx index a005aefb84a2..4c6763a0d21e 100644 --- a/components/color-picker/__tests__/index.test.tsx +++ b/components/color-picker/__tests__/index.test.tsx @@ -1,16 +1,18 @@ +import React, { useMemo, useState } from 'react'; import { createEvent, fireEvent, render } from '@testing-library/react'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; -import React, { useMemo, useState } from 'react'; + +import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { waitFakeTimer } from '../../../tests/utils'; -import { resetWarned } from '../../_util/warning'; +import Button from '../../button'; import ConfigProvider from '../../config-provider'; import Form from '../../form'; import theme from '../../theme'; +import type { Color } from '../color'; import type { ColorPickerProps } from '../ColorPicker'; import ColorPicker from '../ColorPicker'; -import type { Color } from '../color'; function doMouseMove( container: HTMLElement, @@ -518,4 +520,41 @@ describe('ColorPicker', () => { render(); expect(errorSpy).not.toHaveBeenCalled(); }); + + it('Should not show popup when disabled', async () => { + const Demo = () => { + const [disabled, setDisabled] = useState(false); + return ( +
+ +
+ + +
+
+ ); + }; + const { container } = render(); + fireEvent.click(container.querySelector('.disabled-btn')!); + fireEvent.click(container.querySelector('.ant-color-picker-trigger')!); + await waitFakeTimer(); + fireEvent.click(container.querySelector('.active-btn')!); + expect(document.body.querySelector('.ant-popover')).toBeFalsy(); + }); }); From a95662d0e11dea39a4b3f69aa3d5bf2410b37529 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: Mon, 28 Aug 2023 21:42:39 +0800 Subject: [PATCH 120/318] refactor: button default not use compact style (#44475) * refactor: button default not use compact style * chore: clean up --- components/button/button.tsx | 17 +++++++++++------ components/button/style/compactCmp.ts | 16 ++++++++++++++++ components/button/style/index.ts | 16 +++++++++------- components/theme/internal.ts | 4 +++- components/theme/util/genComponentStyleHook.ts | 17 ++++++++++++++++- 5 files changed, 55 insertions(+), 15 deletions(-) create mode 100644 components/button/style/compactCmp.ts diff --git a/components/button/button.tsx b/components/button/button.tsx index 64bdc20e413d..47c8b2bf50c4 100644 --- a/components/button/button.tsx +++ b/components/button/button.tsx @@ -1,7 +1,4 @@ /* eslint-disable react/button-has-type */ -import classNames from 'classnames'; -import omit from 'rc-util/lib/omit'; -import { composeRef } from 'rc-util/lib/ref'; import React, { Children, createRef, @@ -11,19 +8,24 @@ import React, { useMemo, useState, } from 'react'; +import classNames from 'classnames'; +import omit from 'rc-util/lib/omit'; +import { composeRef } from 'rc-util/lib/ref'; + import warning from '../_util/warning'; import Wave from '../_util/wave'; import { ConfigContext } from '../config-provider'; import DisabledContext from '../config-provider/DisabledContext'; -import type { SizeType } from '../config-provider/SizeContext'; import useSize from '../config-provider/hooks/useSize'; +import type { SizeType } from '../config-provider/SizeContext'; import { useCompactItemContext } from '../space/Compact'; -import IconWrapper from './IconWrapper'; -import LoadingIcon from './LoadingIcon'; import Group, { GroupSizeContext } from './button-group'; import type { ButtonHTMLType, ButtonShape, ButtonType } from './buttonHelpers'; import { isTwoCNChar, isUnBorderedButtonType, spaceChildren } from './buttonHelpers'; +import IconWrapper from './IconWrapper'; +import LoadingIcon from './LoadingIcon'; import useStyle from './style'; +import CompactStyle from './style/compactCmp'; export type LegacyButtonType = ButtonType | 'danger'; @@ -285,6 +287,9 @@ const InternalButton: React.ForwardRefRenderFunction< > {iconNode} {kids} + + {/* Styles: compact */} + {compactItemClassnames && } ); diff --git a/components/button/style/compactCmp.ts b/components/button/style/compactCmp.ts new file mode 100644 index 000000000000..ef3f4550329a --- /dev/null +++ b/components/button/style/compactCmp.ts @@ -0,0 +1,16 @@ +// Style as inline component +import { prepareToken } from '.'; +import { genCompactItemStyle } from '../../style/compact-item'; +import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical'; +import { genSubStyleComponent } from '../../theme/internal'; + +// ============================== Export ============================== +export default genSubStyleComponent(['Button', 'compact'], (token) => { + const buttonToken = prepareToken(token); + + return [ + // Space Compact + genCompactItemStyle(buttonToken), + genCompactItemVerticalStyle(buttonToken), + ]; +}); diff --git a/components/button/style/index.ts b/components/button/style/index.ts index 1631719dbc7a..9994801a2f37 100644 --- a/components/button/style/index.ts +++ b/components/button/style/index.ts @@ -1,9 +1,9 @@ import type { CSSInterpolation, CSSObject } from '@ant-design/cssinjs'; + import { genFocusStyle } from '../../style'; -import { genCompactItemStyle } from '../../style/compact-item'; -import { genCompactItemVerticalStyle } from '../../style/compact-item-vertical'; import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; +import type { GenStyleFn } from '../../theme/util/genComponentStyleHook'; import genGroupStyle from './group'; /** Component only token. Which will handle additional calculation of alias token */ @@ -517,7 +517,7 @@ const genBlockButtonStyle: GenerateStyle = (token) => { }; // ============================== Export ============================== -export default genComponentStyleHook('Button', (token) => { +export const prepareToken: (token: Parameters>[0]) => ButtonToken = (token) => { const { controlTmpOutline, paddingContentHorizontal } = token; const buttonToken = mergeToken(token, { @@ -527,6 +527,12 @@ export default genComponentStyleHook('Button', (token) => { buttonFontWeight: 400, }); + return buttonToken; +}; + +export default genComponentStyleHook('Button', (token) => { + const buttonToken = prepareToken(token); + return [ // Shared genSharedButtonStyle(buttonToken), @@ -544,9 +550,5 @@ export default genComponentStyleHook('Button', (token) => { // Button Group genGroupStyle(buttonToken), - - // Space Compact - genCompactItemStyle(token), - genCompactItemVerticalStyle(token), ]; }); diff --git a/components/theme/internal.ts b/components/theme/internal.ts index b686ad7d351a..23bf38fc7748 100644 --- a/components/theme/internal.ts +++ b/components/theme/internal.ts @@ -1,4 +1,5 @@ import { useStyleRegister } from '@ant-design/cssinjs'; + import type { AliasToken, GenerateStyle, @@ -10,7 +11,7 @@ import type { import { PresetColors } from './interface'; import useToken from './useToken'; import type { FullToken } from './util/genComponentStyleHook'; -import genComponentStyleHook from './util/genComponentStyleHook'; +import genComponentStyleHook, { genSubStyleComponent } from './util/genComponentStyleHook'; import genPresetColor from './util/genPresetColor'; import statisticToken, { merge as mergeToken } from './util/statistic'; import useResetIconStyle from './util/useResetIconStyle'; @@ -19,6 +20,7 @@ export { DesignTokenContext, defaultConfig } from './context'; export { PresetColors, genComponentStyleHook, + genSubStyleComponent, genPresetColor, mergeToken, statisticToken, diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts index 1420cfee7395..f729e8682fd6 100644 --- a/components/theme/util/genComponentStyleHook.ts +++ b/components/theme/util/genComponentStyleHook.ts @@ -1,5 +1,5 @@ /* eslint-disable no-redeclare */ -import { useContext } from 'react'; +import { useContext, type ComponentType } from 'react'; import type { CSSInterpolation } from '@ant-design/cssinjs'; import { useStyleRegister } from '@ant-design/cssinjs'; import { warning } from 'rc-util'; @@ -174,3 +174,18 @@ export default function genComponentStyleHook( + ...args: Parameters> +): ComponentType { + const useStyle = genComponentStyleHook(...args); + + return ({ prefixCls }: SubStyleComponentProps) => { + useStyle(prefixCls); + return null; + }; +} From 345a3a0624c18b4eceb130dd3fd20b64de11976b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=8F=B6=E6=9E=AB?= <7971419+crazyair@users.noreply.github.com> Date: Mon, 28 Aug 2023 22:10:47 +0800 Subject: [PATCH 121/318] =?UTF-8?q?fix:=20Form=20=E4=B8=8E=20Grid=20?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=86=B2=E7=AA=81=E9=97=AE=E9=A2=98=20=20(#4?= =?UTF-8?q?4472)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: style * fix: style * chore: ref --- components/grid/style/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/components/grid/style/index.ts b/components/grid/style/index.ts index 1772f59e8f03..c90796dbd977 100644 --- a/components/grid/style/index.ts +++ b/components/grid/style/index.ts @@ -1,4 +1,5 @@ import type { CSSObject } from '@ant-design/cssinjs'; + import type { FullToken, GenerateStyle } from '../../theme/internal'; import { genComponentStyleHook, mergeToken } from '../../theme/internal'; @@ -92,7 +93,8 @@ const genLoopGridColumnsStyle = (token: GridColToken, sizeCls: string): CSSObjec const gridColumnsStyle: CSSObject = {}; for (let i = gridColumns; i >= 0; i--) { if (i === 0) { - gridColumnsStyle[`${componentCls}${sizeCls}-${i}`] = { + // ref: https://github.com/ant-design/ant-design/issues/44456 + gridColumnsStyle[`${componentCls}${componentCls}${componentCls}${sizeCls}-${i}`] = { display: 'none', }; gridColumnsStyle[`${componentCls}-push-${i}`] = { From fec423ea1bb3300f4b2defa0007ffcef27c8dbad Mon Sep 17 00:00:00 2001 From: William Entriken Date: Mon, 28 Aug 2023 21:14:48 -0400 Subject: [PATCH 122/318] docs: Update definition for dashed button (#44481) This updates the English documentation for the dashed button. This updates the English to better translate the [Chinese version](https://github.com/ant-design/ant-design/blob/345a3a0624c18b4eceb130dd3fd20b64de11976b/components/button/index.zh-CN.md). (I'm assuming the Chinese version is normative.) Signed-off-by: William Entriken --- components/button/index.en-US.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index 6016061b5780..f26397bb1722 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -20,7 +20,7 @@ In Ant Design we provide 5 types of button. - Primary button: indicate the main action, one primary button at most in one section. - Default button: indicate a series of actions without priority. -- Dashed button: used for adding action commonly. +- Dashed button: commonly used for adding more actions. - Text button: used for the most secondary action. - Link button: used for external links. From c70ba365407f2e441b0f7a4adef50f8c5c674021 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Tue, 29 Aug 2023 14:33:56 +0800 Subject: [PATCH 123/318] chore: disabled compat/compat in test files (#44496) --- .eslintrc.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/.eslintrc.js b/.eslintrc.js index 1178d08ee021..12e49328d21e 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -126,6 +126,12 @@ module.exports = { 'comma-dangle': 0, }, }, + { + files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'], + rules: { + 'compat/compat': 0, + }, + }, ], rules: { 'react/jsx-one-expression-per-line': 0, From fae1fef77dfd4c506c16b8405687f927c26db3f3 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 29 Aug 2023 15:04:03 +0800 Subject: [PATCH 124/318] fix: add role="button" props to div (#44494) * fix: add role="button" props to div * fix: fix --- .dumi/theme/builtins/Previewer/CodePreviewer.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index 60024d8afcef..e97ee0d8faf0 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -1,4 +1,3 @@ -/* eslint-disable jsx-a11y/no-noninteractive-tabindex */ import React, { useContext, useEffect, useRef, useState } from 'react'; import { CheckOutlined, @@ -542,7 +541,12 @@ createRoot(document.getElementById('container')).render(); styleCode={style} onCodeTypeChange={setCodeType} /> -
setCodeExpand(false)}> +
setCodeExpand(false)} + >
From 457feb7933b82c5d67d755cd06b55d54be71761a Mon Sep 17 00:00:00 2001 From: Andy Hsu Date: Tue, 29 Aug 2023 15:42:26 +0800 Subject: [PATCH 125/318] docs(select): fix incorrect link of AutoComplete (#44500) * docs: fix incorrect link of `AutoComplete` Signed-off-by: Andy Hsu * docs(select): sync `AutoComplete` related content in `zh-CN` to `en-US` Signed-off-by: Andy Hsu --------- Signed-off-by: Andy Hsu --- components/select/index.en-US.md | 1 + components/select/index.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md index c6f940e1ebf6..d12000821709 100644 --- a/components/select/index.en-US.md +++ b/components/select/index.en-US.md @@ -14,6 +14,7 @@ Select component to select value from options. - A dropdown menu for displaying choices - an elegant alternative to the native ` +
+ + + + +
+
+
+ +
+
+
+
+ +
+
+
+
+
+
+

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

+ 
+      {}
+
+
+ +`; + +exports[`renders components/form/demo/dependencies.tsx extend context correctly 2`] = `[]`; + exports[`renders components/form/demo/disabled.tsx extend context correctly 1`] = ` Array [
- -
- + ); }; diff --git a/components/tree/Tree.tsx b/components/tree/Tree.tsx index 697a4eefbc2c..9ba5c27dcfbd 100644 --- a/components/tree/Tree.tsx +++ b/components/tree/Tree.tsx @@ -1,11 +1,12 @@ +import type { Component } from 'react'; +import React from 'react'; import HolderOutlined from '@ant-design/icons/HolderOutlined'; import classNames from 'classnames'; +import type { CSSMotionProps } from 'rc-motion'; import type { BasicDataNode, TreeProps as RcTreeProps } from 'rc-tree'; import RcTree from 'rc-tree'; import type { DataNode, Key } from 'rc-tree/lib/interface'; -import type { Component } from 'react'; -import React from 'react'; -import type { CSSMotionProps } from 'rc-motion'; + import initCollapseMotion from '../_util/motion'; import { ConfigContext } from '../config-provider'; import useStyle from './style'; diff --git a/docs/blog/check-conduct.en-US.md b/docs/blog/check-conduct.en-US.md index a4cc6a61f1ba..5daed16240c9 100644 --- a/docs/blog/check-conduct.en-US.md +++ b/docs/blog/check-conduct.en-US.md @@ -10,7 +10,7 @@ In the Tree or similar components (such as TreeSelect, Cascader), needs check fu Before we start, let's establish a consensus. That is, when a node is `disabled`, it cannot be clicked `checked`. Then we take the following Tree structure as an example: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*eMq8S7Pq0lQAAAAAAAAAAAAADrJ8AQ/original) +Tree Next, we check the root node `parent 1`, and analyze the similarities and differences of different check transmission strategies. @@ -18,31 +18,31 @@ Next, we check the root node `parent 1`, and analyze the similarities and differ This is the most intuitive strategy, all nodes will be checked: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QQp-R4EMteAAAAAAAAAAAAAADrJ8AQ/original) +Tree You can immediately see the problem with this strategy, we mentioned earlier that `disabled` nodes are not allowed to be `checked`. But when the parent node is not `disabled`, its child nodes will be forcibly checked. This will cause the `disabled` node to "can" be checked, which is obviously unreasonable. ### All checkable nodes are checked -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BzrZRbT1gCEAAAAAAAAAAAAADrJ8AQ/original) +Tree From the checkbox interaction, it looks good, but it's not intuitive. After `parent 1` is checked, `leaf 2` is checked by conduction. But the middle node `parent 1-0` is not checked. At some deep enough level, this strategy can cause the user to be unaware that a check has been propagated: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3mHLQZvTgWsAAAAAAAAAAAAADrJ8AQ/original) +Tree When there is no scrolling, the user can't realize that the upper `disabled` is not checked, but the top is checked: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xTqPQbdX6B0AAAAAAAAAAAAADrJ8AQ/original) +Tree ### Check only reachable checkable nodes This is also the current strategy of antd, when a node is checked, it will propagate upwards and downwards from the node until `disabled` stops. When there are multiple `disabled` in the node, they will each check the status management: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EIK0Rbq92CMAAAAAAAAAAAAADrJ8AQ/original) +Tree Conversely check `leaf 2`, it will not conduct: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Ytr9SrJUvD4AAAAAAAAAAAAADrJ8AQ/original) +Tree The advantage of this strategy is that users can clearly see the selection process. Compared with the previous strategy, users only need a small area to understand the check logic in the scrolling scene. @@ -54,19 +54,19 @@ Note: We only introduce simple conduction logic here. Please refer to [actual co When a node is checked, we will add `key` to `checkedKeys`. We iterate over each `key` in the new `checkedKeys` for conduction checks. The first step will be conduction from top to bottom (in the example below we check `0-0`): -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*30UnR60SSD8AAAAAAAAAAAAADrJ8AQ/original) +Tree We record the current node `0-0` and the transmitted `0-0-0` and `0-0-1`: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*jo7wQZVX9S0AAAAAAAAAAAAADrJ8AQ/original) +Tree In the second step, we will conduct upwards from this node: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k5hoSKM1OMYAAAAAAAAAAAAADrJ8AQ/original) +Tree Similarly, record the node `0` that was passed on: -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yqBETbq8ugQAAAAAAAAAAAAADrJ8AQ/original) +Tree When the parent node is checked, the parent node of the parent node may also be checked, so we need to continue to conduct upward until the root node or `disabled` node. diff --git a/docs/blog/check-conduct.zh-CN.md b/docs/blog/check-conduct.zh-CN.md index d123808bc7be..3f037db36128 100644 --- a/docs/blog/check-conduct.zh-CN.md +++ b/docs/blog/check-conduct.zh-CN.md @@ -10,7 +10,7 @@ author: zombieJ 在开始之前，我们先确定一个共识。那就是当一个节点被 `disabled` 后，它是不能被点击 `checked` 的。接着我们以如下 Tree 结构做示例： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*eMq8S7Pq0lQAAAAAAAAAAAAADrJ8AQ/original) +Tree 接下来我们勾选根节点 `parent 1`，并分析一下不同的勾选传导策略的异同。 @@ -18,31 +18,31 @@ author: zombieJ 这是最直观的一种策略，所有的节点都会被勾选： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*QQp-R4EMteAAAAAAAAAAAAAADrJ8AQ/original) +Tree 你立刻就会发现这种策略的问题所在，我们前面提到过 `disabled` 节点不允许被 `checked`。但是当父节点不是 `disabled` 时，它的子节点会被强制勾选。这样就会导致 `disabled` 节点“可以”被勾选，显然不合理。 ### 所有的可勾选节点都被勾选 -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*BzrZRbT1gCEAAAAAAAAAAAAADrJ8AQ/original) +Tree 从勾选交互看，它看起来不错，但是并不符合直觉。`parent 1` 勾选后，`leaf 2` 被传导勾选。但是其中间节点 `parent 1-0` 却没有勾选。在一些足够深的层级下，这种策略会导致用户并不知道勾选被传导出去了： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3mHLQZvTgWsAAAAAAAAAAAAADrJ8AQ/original) +Tree 没有滚动时，用户并不能意识到上层 `disabled` 都没有被勾选时，而最上面被勾选了： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*xTqPQbdX6B0AAAAAAAAAAAAADrJ8AQ/original) +Tree ### 只勾选可触达的可勾选节点 这也是 antd 现在的策略，当节点被勾选时，它会从节点起向上向下传导，直到 `disabled` 停止。节点中存在多个 `disabled` 时会各自进行勾选状态管理： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*EIK0Rbq92CMAAAAAAAAAAAAADrJ8AQ/original) +Tree 反过来勾选 `leaf 2`，也不会传导： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Ytr9SrJUvD4AAAAAAAAAAAAADrJ8AQ/original) +Tree 这种策略的好处是，用户可以清晰的看到勾选的传导过程。相对于上一个策略，在滚动场景用户只需要很小的区域就能理解勾选逻辑。 @@ -54,19 +54,19 @@ author: zombieJ 当勾选节点后，我们会将 `key` 加入到 `checkedKeys` 中。我们会遍历新的 `checkedKeys` 中的每个 `key` 进行传导检查。第一步会自上而下进行传导（下图示例我们勾选 `0-0`）： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*30UnR60SSD8AAAAAAAAAAAAADrJ8AQ/original) +Tree 我们将当前节点 `0-0` 和被传导的 `0-0-0`与 `0-0-1` 记录下来： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*jo7wQZVX9S0AAAAAAAAAAAAADrJ8AQ/original) +Tree 第二步，我们会从该节点向上传导： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*k5hoSKM1OMYAAAAAAAAAAAAADrJ8AQ/original) +Tree 同样的，将被传导的节点 `0` 记录下来： -![Tree](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*yqBETbq8ugQAAAAAAAAAAAAADrJ8AQ/original) +Tree 当父节点被传导勾选时，该父节点的父节点勾选也可能会被传导，所以我们需要继续向上传导，直到 根节点 或者 `disabled` 节点为止。 diff --git a/docs/blog/getContainer.en-US.md b/docs/blog/getContainer.en-US.md index 0db68493614c..08669bffcc2c 100644 --- a/docs/blog/getContainer.en-US.md +++ b/docs/blog/getContainer.en-US.md @@ -6,11 +6,11 @@ author: zombieJ We often encounter the need for pop-up elements when developing, such as the Select drop-down box, or the Modal component. When it is directly rendered under the current node, it may be clipped by the `overflow: hidden` of the parent node: -![Overflow](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Noh-TYJ0BdcAAAAAAAAAAAAADrJ8AQ/original) +Overflow Therefore we render it under `body` by default in Ant Design, but this will bring new problems. Since they are not under the same container, when the user scrolls the screen, they will find that the popup layer does not follow the scrolling: -![Scroll](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d44KQqkTX90AAAAAAAAAAAAADrJ8AQ/original) +Scroll To solve this problem, we provide the `getContainer` property, which allows users to customize the rendered container. The `getContainer` method will be called when the component is mounted, returning a container node, and the component will be rendered under this node through `createPortal`. diff --git a/docs/blog/getContainer.zh-CN.md b/docs/blog/getContainer.zh-CN.md index 76804dda5b24..7f950bd82d36 100644 --- a/docs/blog/getContainer.zh-CN.md +++ b/docs/blog/getContainer.zh-CN.md @@ -6,11 +6,11 @@ author: zombieJ 在网页开发中，我们时常会遇到弹出元素的需求，比如 Select 的下拉框、或者是 Modal 组件。直接将其渲染到当前节点下时，可能会被父节点的 `overflow: hidden` 裁剪掉： -![Overflow](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Noh-TYJ0BdcAAAAAAAAAAAAADrJ8AQ/original) +Overflow 因而在 Ant Design 中，我们默认将其渲染到 `body` 下，但是这又会带来新的问题。由于不在同一个容器下，当用户滚动屏幕时会发现弹出层并未跟随滚动： -![Scroll](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d44KQqkTX90AAAAAAAAAAAAADrJ8AQ/original) +Scroll 为了解决这个问题，我们提供了 `getContainer` 属性，让用户可以自定义渲染的容器。`getContainer` 方法会在组件挂载时调用，返回一个容器节点，组件会通过 `createPortal` 渲染到这个节点下。 diff --git a/docs/blog/virtual-table.en-US.md b/docs/blog/virtual-table.en-US.md new file mode 100644 index 000000000000..02ed7ad4b8cd --- /dev/null +++ b/docs/blog/virtual-table.en-US.md @@ -0,0 +1,161 @@ +--- +title: Virtual Table is here! +date: 2023-08-29 +author: zombieJ +--- + +## Preface + +In v4, we added a custom `components` example for Table, which replaces the default `` with `components.body` to achieve virtual scrolling. But many developers feedback that the virtual table in the Demo has many functions that cannot be implemented. For example, fixed columns, merged rows and columns, expandable rows, etc. + +So we proposed [[RFC] StaticTable for fast perf & virtual scroll support](https://github.com/ant-design/ant-design/discussions/41500) in v5. The RFC expects to provide a high-performance Table.StaticTable, which will support virtual scrolling by default. But as the development progressed, we eventually decided to implement StaticTable on the underlying `rc-table`, and on the antd side, we only need to enable it with `
`. + +## TL;DR + +Table supports virtual scrolling by setting the `virtual` prop. At the same time, the original Table's functions except `components.body` can be used normally: + +```tsx +
+``` + +### Fixed columns + +![Fixed Columns](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*V2FcS7ZAReMAAAAAAAAAAAAADrJ8AQ/original) + +### Expandable + +![Expandable](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nd61R4YsknsAAAAAAAAAAAAADrJ8AQ/original) + +### RowSpan & ColSpan + +![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original) + +You can visit the [virtual list](/components/table#components-table-demo-virtual-list) example to experience it. + +## Some details + +Table in antd internally uses the `rc-table` component. Our virtual scrolling feature also reuses the `components` property mentioned above. Replace the middle `` with `rc-virtual-list`, which is widely used in various virtual scrolling scenarios of antd like Select and Tree. `rc-virtual-list` itself does not support horizontal scrolling, so we also added horizontal scrolling support for it in this refactoring. + +### Fixed columns + +In v4, we refactored the fixed columns of Table into `position: sticky`. This CSS allows you to fix an element at a certain position when scrolling. So as to avoid the need to render an extra Table in v3 to achieve the fixed position effect: + +Sticky + +For overlapping fixed columns, you only need to configure different offsets: + +Stack Sticky + +We can also use this feature in virtual scrolling. Just reuse the `sticky` style to achieve the effect of fixed columns. `rc-virtual-list` only needs to provide horizontal scrolling, and does not need to care about the implementation of fixed columns. + +### Expandable + +We will flatten the tree structure of `dataSource` through `useFlattenRecords` in `rc-table`, so as to support developers' custom virtual scrolling capabilities. Thanks to [@crawler-django](https://github.com/react-component/table/pull/619) for his contribution at that time, so we don't need to implement the flattening logic again. + +But in testing, we found a strange phenomenon. When the table is rendered for the first time or re-render, there will be a very large lag. When debugging, it comes from the `useFlattenRecords` hook. It's strange that test code itself does not use the expandable tree function. It was found that there were a lot of GC operations in `useFlattenRecords`. And these operations are caused by a piece of inconspicuous code: + +```tsx +// Fake code. Not used in real word +function flatten(data: T[] = []) { + let tmpList: T[] = []; + + for (let i = 0; i < data.length; i += 1) { + const record = data[i]; + tmpList = [...tmpList, record, ...flatten(record.children)]; + } + + return tmpList; +} +``` + +When traversing, although `children` is empty and only enters recursion once. But when looping through each Record, a temporary empty array will be created. But when `dataSource` data is huge, they will continue to trigger GC to clean up these temporary arrays. So we added logic to avoid unnecessary consumption: + +```tsx +// Fake code. Not used in real word +function flatten(data: T[] = [], list: T[] = []) { + for (let i = 0; i < data.length; i += 1) { + const record = data[i]; + list.push(record); + flatten(record.children, list); + } + + return list; +} +``` + +### RowSpan & ColSpan + +If you are familiar with the implementation of Table, you will know that row and column merging is achieved through `rowSpan` and `colSpan`. In virtual scrolling, since not all nodes are rendered, there will be cases where the rows and columns to be rendered do not exist: + +RowSpan + +To render this content, we need to calculate the `rowSpan` and `colSpan` of all Records in the current visible area. And this calculation process is very complicated. We need to traverse all Records and calculate the `rowSpan` and `colSpan` of each Record. Obviously, this is a very time-consuming operation, and when the `rowSpan` data is too far away from the visible area, the amount of content it needs to render will also be very large: + +Huge Size + +Maybe you will think of whether we can calculate the `rowSpan` in advance and then get these data when scrolling. This is actually not possible. The row and column data is provided by `onCell`, and calculating `onCell` every time when rendering the parent node will cause huge performance loss: + +```jsx +const Demo = () => { + const [spanCount, setSpanCount] = useState(3); + + const columns = [ + { + dataIndex: 'group', + onCell: (_, index) => ({ + rowSpan: index % spanCount === 0 ? spanCount : 0, + }), + }, + ]; + + // WOW! + React.useEffect(() => { + setSpanCount(5); + }, []); + + return
; +}; +``` + +Thus, even if we count the `rowSpan` data and render the rows outside the screen, it is still not enough. It may appear that `rowSpan` alternates: + +Multiple Row Span + +And for the worst case, all rows have `rowSpan` with other rows, then the amount of content we need to render will be the entire `dataSource`. That is, virtual scrolling is no longer virtual. Therefore, we need to clip it to render only the `rowSpan` in the visible area, and remove the irrelevant parts outside the screen: + +cut off + +So, think backwards. We only need to start from the visible area. Then get the Records affected by `rowSpan` up and down. Then only render the `cell` that provides `rowSpan`: + +fully cut off + +`rc-virtual-list` provides the `extraRender` method, which will provide the row number currently rendered in virtual scrolling. We only need to execute `onCell` on each Record in this range to get the `rowSpan` and `colSpan` information of each `cell`. So we can know whether the current row has `rowSpan`: + +```tsx +// Fake code. Not used in real word +const extraRender = ({ start, end }) => { + // Start record + const startRecord = flattenData[start]; + columns.forEach((col) => { + // `rowSpan` === 0 means upper record has `rowSpan` + const { rowSpan } = col.onCell(startRecord, start); + }); + + // End record + const endRecord = flattenData[end]; + columns.forEach((col) => { + // `rowSpan` > 1 means it should extend to next records + const { rowSpan } = col.onCell(endRecord, end); + }); +}; +``` + +You should note that, in the actual collection process, we will record all `cell` with `rowSpan` in the range instead of just the head and tail Record. Then render these `cell` through the `extraRender` method (and skip rendering for `cell` affected by `rowSpan` in the original Record). This ensures the correctness of `rowSpan`. + +Of course, this implementation is based on the assumption that `rowSpan > 1` and `rowSpan = 0` will appear. It does not support the case where `rowSpan` is used to squeeze to the lower level, but for data tables, this is enough. + +## Finally + +Virtual scrolling is a very complex feature, and there are many factors to consider. But we believe that it is worth spending this effort, and developers no longer need to choose between functionality and performance. Instead, you can have both. However, it should be noted that since we have implemented virtual scrolling through `components.body`, developers cannot override the `body` part of the component. + +That's all. diff --git a/docs/blog/virtual-table.zh-CN.md b/docs/blog/virtual-table.zh-CN.md new file mode 100644 index 000000000000..d70f2343f3d0 --- /dev/null +++ b/docs/blog/virtual-table.zh-CN.md @@ -0,0 +1,161 @@ +--- +title: 虚拟表格来了！ +date: 2023-08-29 +author: zombieJ +--- + +## 前言 + +在 v4 时期，我们为 Table 添加了一个自定义 `components` 的示例，通过 `components.body` 替换默认的 ``，实现虚拟滚动的效果。但是很多开发者反馈 Demo 中的虚拟表格有很多功能无法实现。例如 固定列、合并行列、展开行 等等。 + +所以在 v5 中，我们提出了 [[RFC] StaticTable for fast perf & virtual scroll support](https://github.com/ant-design/ant-design/discussions/41500)。该 RFC 期望提供一个高性能的 Table.StaticTable，它会默认支持虚拟滚动。但是随着开发进行，我们最终决定 StaticTable 在底层 `rc-table` 上实现，而在 antd 侧则只需要通过 `
` 即可开启。 + +## 太长不看 + +Table 通过 `virtual` 属性即可开启虚拟滚动能力。同时，原 Table 的功能（除自定义 `components.body` 外）都能正常使用： + +```tsx +
+``` + +### 固定列 + +![Fixed Columns](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*V2FcS7ZAReMAAAAAAAAAAAAADrJ8AQ/original) + +### 可展开 + +![Expandable](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*nd61R4YsknsAAAAAAAAAAAAADrJ8AQ/original) + +### 行列组合 + +![Rowspan & Colspan](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*DYkYQo8tU6sAAAAAAAAAAAAADrJ8AQ/original) + +你可以直接访问 [虚拟列表](/components/table#components-table-demo-virtual-list) 示例进行体验。 + +## 一些细节 + +antd 的 Table 底层使用了 `rc-table` 组件，我们的虚拟滚动功能也是复用了上文提到的 `components` 属性。将中间的 `` 替换为 `rc-virtual-list`，该组件广泛应用于 antd 的各个虚拟滚动场景中。例如 Select、Tree 都可以见到它的身影。而 `rc-virtual-list` 本身并不支持横向滚动能力，因而我们在这次改造中，也为其添加了横向滚动的支持。 + +### 固定列 + +在 v4 时期，我们便将 Table 的固定列改造成了 `position: sticky` 实现。该 CSS 允许你在滚动时，将元素固定在某个位置。从而避免 v3 时期需要额外渲染一份 Table 用于实现固定位置的效果： + +Sticky + +对于叠加固定，只需要配置不同的偏移量即可： + +Stack Sticky + +在虚拟滚动中，我们同样可以利用该特性。直接复用 `sticky` 样式，即可实现固定列的效果。而 `rc-virtual-list` 需要付出的仅仅是提供横向滚动，而不需要关心固定列的实现。 + +### 可展开 + +在 `rc-table` 中，我们会将 `dataSource` 通过 `useFlattenRecords` 将树状结构打平，从而支持开发者自定义的虚拟滚动能力。感谢 [@crawler-django](https://github.com/react-component/table/pull/619) 当年的贡献，因而我们这次并不需要再实现一次打平逻辑。 + +但是在测试时，我们发现一个奇怪的现象。表格在首次、再次渲染时，会有非常大的卡顿。在进行断点时，它来自于 `useFlattenRecords` hooks。而测试的代码本身并没有使用可展开树的功能，于是我们对其进行了排查。发现在 `useFlattenRecords` 中，存在大量的 GC 操作。而这些操作是由于一段不起眼的代码引起的： + +```tsx +// Fake code. Not used in real word +function flatten(data: T[] = []) { + let tmpList: T[] = []; + + for (let i = 0; i < data.length; i += 1) { + const record = data[i]; + tmpList = [...tmpList, record, ...flatten(record.children)]; + } + + return tmpList; +} +``` + +在遍历过程中，虽然 `children` 为空只会进入一次递归。但是在循环每个 Record 时都会创建一次临时的空数组。但是当 `dataSource` 数据巨大时，它们会不断触发 GC 清理这些临时数组。因而我们通过改造添加逻辑以避免不必要的消耗： + +```tsx +// Fake code. Not used in real word +function flatten(data: T[] = [], list: T[] = []) { + for (let i = 0; i < data.length; i += 1) { + const record = data[i]; + list.push(record); + flatten(record.children, list); + } + + return list; +} +``` + +### 行列组合 + +如果你对 Table 的实现有所了解，那么你会知道行列合并是通过 `rowSpan` 和 `colSpan` 实现的。而在虚拟滚动中，由于并不是所有节点都是渲染，所以会出现需要渲染的行列并不存在的情况： + +RowSpan + +为了渲染该项内容，我们就需要计算出当前屏幕区域内的所有 Record 相关的 `rowSpan` 和 `colSpan`。而这个计算过程是非常复杂的，我们需要遍历所有的 Record，计算出每个 Record 的 `rowSpan` 和 `colSpan`。显然这是一个非常耗时的操作，而且当 `rowSpan` 数据距离可见区域过远时，它需要额外渲染的内容量也会非常大： + +Huge Size + +对于 `rowSpan`，你可能会想到我们是否可以提前把 `rowSpan` 计算好，然后在滚动时获取这些数据。这其实是不行的，行列数据由 `onCell` 提供，而在父节点渲染时都全部计算一次 `onCell` 会产生巨量的性能损耗： + +```jsx +const Demo = () => { + const [spanCount, setSpanCount] = useState(3); + + const columns = [ + { + dataIndex: 'group', + onCell: (_, index) => ({ + rowSpan: index % spanCount === 0 ? spanCount : 0, + }), + }, + ]; + + // WOW! + React.useEffect(() => { + setSpanCount(5); + }, []); + + return
; +}; +``` + +此外，即便我们统计了 `rowSpan` 的数据，并且将屏幕外的行也进行渲染仍然不够。它可能会出现 `rowSpan` 交替的情况： + +Multiple Row Span + +假设出现最糟的情况，所有的行都和其他的行有 `rowSpan`，那么我们需要渲染的内容量将会是整个 `dataSource`。即虚拟滚动不再虚拟。因而，我们需要对其进行裁剪，只渲染可见区域内的 `rowSpan`，而将屏幕外的无关部分去除： + +cut off + +所以，反向思考。我们只需要从可见区域出发。然后向上、向下获取被 `rowSpan` 影响到的 Record。然后仅对提供 `rowSpan` 的 `cell` 进行渲染即可： + +fully cut off + +`rc-virtual-list` 提供了 `extraRender` 方法，它会提供当前虚拟滚动中所渲染的行号。我们只需要对这个范围内的 Record 执行一次 `onCell` 获取每个 `cell` 的 `rowSpan` 和 `colSpan` 信息。既可以知道当前行是否存在对外的 `rowSpan` 依赖： + +```tsx +// Fake code. Not used in real word +const extraRender = ({ start, end }) => { + // Start record + const startRecord = flattenData[start]; + columns.forEach((col) => { + // `rowSpan` === 0 means upper record has `rowSpan` + const { rowSpan } = col.onCell(startRecord, start); + }); + + // End record + const endRecord = flattenData[end]; + columns.forEach((col) => { + // `rowSpan` > 1 means it should extend to next records + const { rowSpan } = col.onCell(endRecord, end); + }); +}; +``` + +需要注意的是，在实际收集过程中，我们会将整个范围有 `rowSpan` 的 `cell` 都记录下来而不仅仅是头尾的 Record。然后通过 `extraRender` 方法将这些 `cell` 渲染出来（而原本的 Record 对于被 `rowSpan` 影响到的 `cell` 则跳过渲染）。这样就可以保证 `rowSpan` 的正确性了。 + +当然，这种实现是基于 `rowSpan > 1` 和 `rowSpan = 0` 会匹配出现的假设。它不支持 `rowSpan` 用于挤压至下层的情况，但是对于数据表格而言，这已经足够了。 + +## 总结 + +虚拟滚动是一个非常复杂的功能，它需要考虑的因素非常多。但是我们相信花费这些精力是值得的，开发者不用再在功能和性能之间做取舍。而是可以同时拥有两者。不过需要注意的是，由于我们是通过 `components.body` 进行了虚拟滚动支持。这也意味着开发者不能覆盖 `body` 部分的组件。 + +以上。 From b0dd138fba546f045fe1fc4081d38df2f1951faa Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Wed, 30 Aug 2023 21:28:45 +0800 Subject: [PATCH 141/318] feat: ConfigProvider support Tabs `indicatorSize` (#44517) * feat: ConfigProvider support tabs.indicatorLength * feat: ConfigProvider support card.tabProps * Revert "feat: ConfigProvider support card.tabProps" This reverts commit 817af9a6bbed64d0da4418676e35e1cf2ec6082b. * chore: rename * docs: add demo --- .../__tests__/components.test.tsx | 1 - components/config-provider/context.ts | 3 +- components/config-provider/index.tsx | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 141 ++++++++++++++++++ .../__tests__/__snapshots__/demo.test.ts.snap | 114 ++++++++++++++ components/tabs/__tests__/index.test.tsx | 15 ++ components/tabs/demo/custom-indicator.md | 7 + components/tabs/demo/custom-indicator.tsx | 36 +++++ components/tabs/index.en-US.md | 3 +- components/tabs/index.tsx | 2 + components/tabs/index.zh-CN.md | 3 +- package.json | 2 +- 12 files changed, 324 insertions(+), 6 deletions(-) create mode 100644 components/tabs/demo/custom-indicator.md create mode 100644 components/tabs/demo/custom-indicator.tsx diff --git a/components/config-provider/__tests__/components.test.tsx b/components/config-provider/__tests__/components.test.tsx index 66e830700709..32037dc26bc3 100644 --- a/components/config-provider/__tests__/components.test.tsx +++ b/components/config-provider/__tests__/components.test.tsx @@ -39,7 +39,6 @@ import Select from '../../select'; import Skeleton from '../../skeleton'; import type { SliderTooltipProps } from '../../slider'; import Slider from '../../slider'; -// eslint-disable-next-line import/no-named-as-default import { render } from '../../../tests/utils'; import Spin from '../../spin'; import Statistic from '../../statistic'; diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts index dc2c1944106b..d01049f9d2b0 100644 --- a/components/config-provider/context.ts +++ b/components/config-provider/context.ts @@ -11,6 +11,7 @@ import type { AliasToken, MappingAlgorithm, OverrideToken } from '../theme/inter import type { SizeType } from './SizeContext'; import type { RenderEmptyHandler } from './defaultRenderEmpty'; import type { ShowWaveEffect } from '../_util/wave/interface'; +import type { TabsProps } from '../tabs'; export const defaultIconPrefixCls = 'anticon'; @@ -143,7 +144,7 @@ export interface ConfigConsumerProps { tag?: ComponentStyleConfig; table?: ComponentStyleConfig; card?: ComponentStyleConfig; - tabs?: ComponentStyleConfig; + tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 4dab026c78cc..88647bbb4815 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -43,6 +43,7 @@ import type { SizeType } from './SizeContext'; import SizeContext, { SizeContextProvider } from './SizeContext'; import useStyle from './style'; import { defaultTheme } from '../theme/context'; +import type { TabsProps } from '../tabs'; /** * Since too many feedback using static method like `Modal.confirm` not getting theme, we record the @@ -180,7 +181,7 @@ export interface ConfigProviderProps { tag?: ComponentStyleConfig; table?: ComponentStyleConfig; card?: ComponentStyleConfig; - tabs?: ComponentStyleConfig; + tabs?: ComponentStyleConfig & Pick; timeline?: ComponentStyleConfig; timePicker?: ComponentStyleConfig; upload?: ComponentStyleConfig; diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap index 01e230e03cff..1ee0943fbf1a 100644 --- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1992,6 +1992,147 @@ exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context corr exports[`renders components/tabs/demo/custom-add-trigger.tsx extend context correctly 2`] = `[]`; +exports[`renders components/tabs/demo/custom-indicator.tsx extend context correctly 1`] = ` +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
    + +
+
+
+
+
+ Content of Tab Pane 1 +
+
+
+
+`; + +exports[`renders components/tabs/demo/custom-indicator.tsx extend context correctly 2`] = `[]`; + exports[`renders components/tabs/demo/custom-tab-bar.tsx extend context correctly 1`] = `
`; +exports[`renders components/tabs/demo/custom-indicator.tsx correctly 1`] = ` +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+
+ +
+
+
+
+
+ Content of Tab Pane 1 +
+
+
+
+`; + exports[`renders components/tabs/demo/custom-tab-bar.tsx correctly 1`] = `
{ ); errorSpy.mockRestore(); }); + + it('indicator in ConfigProvider should work', () => { + const { container } = render( + + + + + , + ); + + expect(container.querySelector('.Tabs_1 .ant-tabs-ink-bar')).toHaveStyle({ width: 12 }); + expect(container.querySelector('.Tabs_2 .ant-tabs-ink-bar')).toHaveStyle({ width: 12 }); + expect(container.querySelector('.Tabs_3 .ant-tabs-ink-bar')).toHaveStyle({ width: 4 }); + }); }); diff --git a/components/tabs/demo/custom-indicator.md b/components/tabs/demo/custom-indicator.md new file mode 100644 index 000000000000..59424ef38d6c --- /dev/null +++ b/components/tabs/demo/custom-indicator.md @@ -0,0 +1,7 @@ +## zh-CN + +自定义指示器宽度 + +## en-US + +Custom indicator size diff --git a/components/tabs/demo/custom-indicator.tsx b/components/tabs/demo/custom-indicator.tsx new file mode 100644 index 000000000000..30be73c8b070 --- /dev/null +++ b/components/tabs/demo/custom-indicator.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { Tabs } from 'antd'; +import type { TabsProps } from 'antd'; + +const onChange = (key: string) => { + console.log(key); +}; + +const items: TabsProps['items'] = [ + { + key: '1', + label: 'Tab 1', + children: 'Content of Tab Pane 1', + }, + { + key: '2', + label: 'Tab 2', + children: 'Content of Tab Pane 2', + }, + { + key: '3', + label: 'Tab 3', + children: 'Content of Tab Pane 3', + }, +]; + +const App: React.FC = () => ( + origin - 16} + /> +); + +export default App; diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 9b96f7ada940..6dba1a34c162 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -23,6 +23,7 @@ Ant Design has 3 types of Tabs for different situations. Disabled Centered Icon +Indicator Slide Extra content Size @@ -52,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props) | centered | Centers tabs | boolean | false | 4.4.0 | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | -| indicatorLength | Customize length of indicator, which is the same as tab by default | number \| (origin: number) => number | - | 5.9.0 | +| indicatorSize | Customize length of indicator, which is the same as tab by default | number \| (origin: number) => number | - | 5.9.0 | | items | Configure tab content | [TabItemType](#tabitemtype) | [] | 4.23.0 | | moreIcon | The custom icon of ellipsis | ReactNode | <EllipsisOutlined /> | 4.14.0 | | popupClassName | `className` for more dropdown. | string | - | 4.21.0 | diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index afe8ee6e72ad..54315945f2df 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -48,6 +48,7 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { items, animated, style, + indicatorSize, ...otherProps } = props; const { prefixCls: customizePrefixCls, moreIcon = } = otherProps; @@ -107,6 +108,7 @@ const Tabs: React.FC & { TabPane: typeof TabPane } = (props) => { moreIcon={moreIcon} prefixCls={prefixCls} animated={mergedAnimated} + indicatorSize={indicatorSize ?? tabs?.indicatorSize} />, ); }; diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index 0f415ba72eda..ad4d33cb4f20 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -26,6 +26,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 禁用 居中 图标 +指示条 滑动 附加内容 大小 @@ -54,7 +55,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | centered | 标签居中展示 | boolean | false | 4.4.0 | | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | -| indicatorLength | 自定义指示条长度，默认与 tab 等宽 | number \| (origin: number) => number | - | 5.9.0 | +| indicatorSize | 自定义指示条长度，默认与 tab 等宽 | number \| (origin: number) => number | - | 5.9.0 | | items | 配置选项卡内容 | [TabItemType](#tabitemtype) | [] | 4.23.0 | | moreIcon | 自定义折叠 icon | ReactNode | <EllipsisOutlined /> | 4.14.0 | | popupClassName | 更多菜单的 `className` | string | - | 4.21.0 | diff --git a/package.json b/package.json index 84f70c5ba16c..19abc16e9c33 100644 --- a/package.json +++ b/package.json @@ -148,7 +148,7 @@ "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.33.1", - "rc-tabs": "~12.11.0", + "rc-tabs": "~12.11.1", "rc-textarea": "~1.3.3", "rc-tooltip": "~6.0.0", "rc-tree": "~5.7.6", From cbfb126690b836460bb3ffb93859f1dde88ffa8e 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: Wed, 30 Aug 2023 22:09:32 +0800 Subject: [PATCH 142/318] feat: Descriptions `items.span` support responsive config (#44534) * feat: Desc items support responsive * refactor: useBreakPoint * docs: update docs * test: add test case * chore: update def * chore: fix def --- components/_util/responsiveObserver.ts | 12 +++ components/descriptions/Row.tsx | 7 +- .../__snapshots__/demo-extend.test.ts.snap | 21 ++++- .../__tests__/__snapshots__/demo.test.ts.snap | 19 ++++- .../descriptions/__tests__/index.test.tsx | 39 ++++++++- components/descriptions/constant.ts | 12 +++ components/descriptions/demo/responsive.tsx | 22 +++-- components/descriptions/hooks/useItems.ts | 33 ++++++++ components/descriptions/hooks/useRow.ts | 32 ++----- components/descriptions/index.en-US.md | 12 +-- components/descriptions/index.tsx | 83 ++++++++----------- components/descriptions/index.zh-CN.md | 12 +-- 12 files changed, 200 insertions(+), 104 deletions(-) create mode 100644 components/descriptions/constant.ts create mode 100644 components/descriptions/hooks/useItems.ts diff --git a/components/_util/responsiveObserver.ts b/components/_util/responsiveObserver.ts index a8fd54df78eb..ca4b3f7844ea 100644 --- a/components/_util/responsiveObserver.ts +++ b/components/_util/responsiveObserver.ts @@ -1,4 +1,5 @@ import React from 'react'; + import type { GlobalToken } from '../theme/interface'; import { useToken } from '../theme/internal'; @@ -124,3 +125,14 @@ export default function useResponsiveObserver() { }; }, [token]); } + +export const matchScreen = (screens: ScreenMap, screenSizes?: ScreenSizeMap) => { + if (screenSizes && typeof screenSizes === 'object') { + for (let i = 0; i < responsiveArray.length; i++) { + const breakpoint: Breakpoint = responsiveArray[i]; + if (screens[breakpoint] && screenSizes[breakpoint] !== undefined) { + return screenSizes[breakpoint]; + } + } + } +}; diff --git a/components/descriptions/Row.tsx b/components/descriptions/Row.tsx index 2242c0a0bb37..b2e7d62c109e 100644 --- a/components/descriptions/Row.tsx +++ b/components/descriptions/Row.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import type { DescriptionsItemType } from '.'; + +import type { InternalDescriptionsItemType } from '.'; import Cell from './Cell'; import type { DescriptionsContextProps } from './DescriptionsContext'; import DescriptionsContext from './DescriptionsContext'; @@ -12,7 +13,7 @@ interface CellConfig { } function renderCells( - items: DescriptionsItemType[], + items: InternalDescriptionsItemType[], { colon, prefixCls, bordered }: RowProps, { component, @@ -87,7 +88,7 @@ function renderCells( export interface RowProps { prefixCls: string; vertical: boolean; - row: DescriptionsItemType[]; + row: InternalDescriptionsItemType[]; bordered?: boolean; colon: boolean; index: number; diff --git a/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap index 4017157a71f8..aeff57355369 100644 --- a/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/descriptions/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1116,13 +1116,32 @@ exports[`renders components/descriptions/demo/responsive.tsx extend context corr Database version: 3.4
Package: dds.mongo.mid + + + +
+ + diff --git a/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap b/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap index c09c543df75f..06ca917c6ff4 100644 --- a/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/descriptions/__tests__/__snapshots__/demo.test.ts.snap @@ -1004,7 +1004,7 @@ exports[`renders components/descriptions/demo/responsive.tsx correctly 1`] = ` + + diff --git a/components/descriptions/__tests__/index.test.tsx b/components/descriptions/__tests__/index.test.tsx index 54669dbe6523..59f182f5d385 100644 --- a/components/descriptions/__tests__/index.test.tsx +++ b/components/descriptions/__tests__/index.test.tsx @@ -1,9 +1,10 @@ -import MockDate from 'mockdate'; import React from 'react'; +import MockDate from 'mockdate'; + import Descriptions from '..'; +import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; import { render } from '../../../tests/utils'; -import { resetWarned } from '../../_util/warning'; import ConfigProvider from '../../config-provider'; describe('Descriptions', () => { @@ -20,7 +21,7 @@ describe('Descriptions', () => { errorSpy.mockRestore(); }); - it('when max-width: 575px，column=1', () => { + it('when max-width: 575px, column=1', () => { const wrapper = render( Cloud Database @@ -35,7 +36,7 @@ describe('Descriptions', () => { wrapper.unmount(); }); - it('when max-width: 575px，column=2', () => { + it('when max-width: 575px, column=2', () => { // eslint-disable-next-line global-require const wrapper = render( @@ -49,6 +50,36 @@ describe('Descriptions', () => { wrapper.unmount(); }); + it('when max-width: 575px, column=2, span=2', () => { + // eslint-disable-next-line global-require + const { container } = render( + , + ); + + expect(container.querySelectorAll('.ant-descriptions-item')[0]).toHaveAttribute('colSpan', '2'); + expect(container.querySelectorAll('.ant-descriptions-item')[1]).toHaveAttribute('colSpan', '1'); + expect(container.querySelectorAll('.ant-descriptions-item')[2]).toHaveAttribute('colSpan', '1'); + }); + it('column is number', () => { // eslint-disable-next-line global-require const wrapper = render( diff --git a/components/descriptions/constant.ts b/components/descriptions/constant.ts new file mode 100644 index 000000000000..a42d33092dd5 --- /dev/null +++ b/components/descriptions/constant.ts @@ -0,0 +1,12 @@ +import type { Breakpoint } from '../_util/responsiveObserver'; + +const DEFAULT_COLUMN_MAP: Record = { + xxl: 3, + xl: 3, + lg: 3, + md: 3, + sm: 2, + xs: 1, +}; + +export default DEFAULT_COLUMN_MAP; diff --git a/components/descriptions/demo/responsive.tsx b/components/descriptions/demo/responsive.tsx index 3ff9e3f05a14..3116f285b260 100644 --- a/components/descriptions/demo/responsive.tsx +++ b/components/descriptions/demo/responsive.tsx @@ -4,38 +4,34 @@ import type { DescriptionsProps } from 'antd'; const items: DescriptionsProps['items'] = [ { - key: '1', label: 'Product', children: 'Cloud Database', }, { - key: '2', label: 'Billing', children: 'Prepaid', }, { - key: '3', label: 'Time', children: '18:00:00', }, { - key: '4', label: 'Amount', children: '$80.00', }, { - key: '5', label: 'Discount', + span: { xl: 2, xxl: 2 }, children: '$20.00', }, { - key: '6', label: 'Official', + span: { xl: 2, xxl: 2 }, children: '$60.00', }, { - key: '7', label: 'Config Info', + span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 }, children: ( <> Data disk type: MongoDB @@ -43,13 +39,21 @@ const items: DescriptionsProps['items'] = [ Database version: 3.4
Package: dds.mongo.mid + + ), + }, + { + label: 'Hardware Info', + span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 }, + children: ( + <> + CPU: 6 Core 3.5 GHz
Storage space: 10 GB
Replication factor: 3
Region: East China 1 -
), }, @@ -59,7 +63,7 @@ const App: React.FC = () => ( ); diff --git a/components/descriptions/hooks/useItems.ts b/components/descriptions/hooks/useItems.ts new file mode 100644 index 000000000000..357385bde1a5 --- /dev/null +++ b/components/descriptions/hooks/useItems.ts @@ -0,0 +1,33 @@ +import * as React from 'react'; +import toArray from 'rc-util/lib/Children/toArray'; + +import type { DescriptionsItemType, InternalDescriptionsItemType } from '..'; +import { matchScreen, type ScreenMap } from '../../_util/responsiveObserver'; + +// Convert children into items +const transChildren2Items = (childNodes?: React.ReactNode) => + toArray(childNodes).map((node) => ({ ...node?.props })); + +export default function useItems( + screens: ScreenMap, + items?: DescriptionsItemType[], + children?: React.ReactNode, +) { + const mergedItems = React.useMemo( + () => + // Take `items` first or convert `children` into items + items || transChildren2Items(children), + [items, children], + ); + + const responsiveItems = React.useMemo( + () => + mergedItems.map(({ span, ...restItem }) => ({ + ...restItem, + span: typeof span === 'number' ? span : matchScreen(screens, span), + })), + [mergedItems, screens], + ); + + return responsiveItems; +} diff --git a/components/descriptions/hooks/useRow.ts b/components/descriptions/hooks/useRow.ts index 0b44fe06314e..de2c3fcaad4b 100644 --- a/components/descriptions/hooks/useRow.ts +++ b/components/descriptions/hooks/useRow.ts @@ -1,14 +1,13 @@ -import toArray from 'rc-util/lib/Children/toArray'; -import type React from 'react'; import { useMemo } from 'react'; -import type { DescriptionsItemType } from '..'; + +import type { InternalDescriptionsItemType } from '..'; import warning from '../../_util/warning'; function getFilledItem( - rowItem: DescriptionsItemType, + rowItem: InternalDescriptionsItemType, rowRestCol: number, span?: number, -): DescriptionsItemType { +): InternalDescriptionsItemType { let clone = rowItem; if (span === undefined || span > rowRestCol) { @@ -25,14 +24,10 @@ function getFilledItem( return clone; } -// Convert children into items -const transChildren2Items = (childNodes?: React.ReactNode) => - toArray(childNodes).map((node) => ({ ...node?.props })); - // Calculate the sum of span in a row -function getCalcRows(rowItems: DescriptionsItemType[], mergedColumn: number) { - const rows: DescriptionsItemType[][] = []; - let tmpRow: DescriptionsItemType[] = []; +function getCalcRows(rowItems: InternalDescriptionsItemType[], mergedColumn: number) { + const rows: InternalDescriptionsItemType[][] = []; + let tmpRow: InternalDescriptionsItemType[] = []; let rowRestCol = mergedColumn; rowItems @@ -62,17 +57,8 @@ function getCalcRows(rowItems: DescriptionsItemType[], mergedColumn: number) { return rows; } -const useRow = ( - mergedColumn: number, - items?: DescriptionsItemType[], - children?: React.ReactNode, -) => { - const rows = useMemo(() => { - if (Array.isArray(items)) { - return getCalcRows(items, mergedColumn); - } - return getCalcRows(transChildren2Items(children), mergedColumn); - }, [items, children, mergedColumn]); +const useRow = (mergedColumn: number, items: InternalDescriptionsItemType[]) => { + const rows = useMemo(() => getCalcRows(items, mergedColumn), [items, mergedColumn]); return rows; }; diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md index dc18f189de01..91969f1efa14 100644 --- a/components/descriptions/index.en-US.md +++ b/components/descriptions/index.en-US.md @@ -93,12 +93,12 @@ Common props ref：[Common props](/docs/react/common-props) ### DescriptionItem -| Property | Description | Type | Default | Version | -| ------------ | ------------------------------ | ------------- | ------- | ------- | -| contentStyle | Customize content style | CSSProperties | - | 4.9.0 | -| label | The description of the content | ReactNode | - | | -| labelStyle | Customize label style | CSSProperties | - | 4.9.0 | -| span | The number of columns included | number | 1 | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| contentStyle | Customize content style | CSSProperties | - | 4.9.0 | +| label | The description of the content | ReactNode | - | | +| labelStyle | Customize label style | CSSProperties | - | 4.9.0 | +| span | The number of columns included | number \| [Screens](/components/grid#col) | 1 | `screens: 5.9.0` | > The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both `style` and `labelStyle`(or `contentStyle`) configured, both of them will work. And next one will overwrite first when conflict. diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 6fc7edec2be3..6108108c79e3 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -1,53 +1,35 @@ 'use client'; /* eslint-disable react/no-array-index-key */ -import classNames from 'classnames'; import * as React from 'react'; -import type { Breakpoint, ScreenMap } from '../_util/responsiveObserver'; -import useResponsiveObserver, { responsiveArray } from '../_util/responsiveObserver'; +import classNames from 'classnames'; + +import type { Breakpoint } from '../_util/responsiveObserver'; +import { matchScreen } from '../_util/responsiveObserver'; import { ConfigContext } from '../config-provider'; import useSize from '../config-provider/hooks/useSize'; +import useBreakpoint from '../grid/hooks/useBreakpoint'; +import DEFAULT_COLUMN_MAP from './constant'; import DescriptionsContext from './DescriptionsContext'; +import useItems from './hooks/useItems'; +import useRow from './hooks/useRow'; import type { DescriptionsItemProps } from './Item'; import DescriptionsItem from './Item'; import Row from './Row'; -import useRow from './hooks/useRow'; import useStyle from './style'; -const DEFAULT_COLUMN_MAP: Record = { - xxl: 3, - xl: 3, - lg: 3, - md: 3, - sm: 2, - xs: 1, -}; - -function getColumn(column: DescriptionsProps['column'], screens: ScreenMap): number { - if (typeof column === 'number') { - return column; - } - - if (typeof column === 'object') { - for (let i = 0; i < responsiveArray.length; i++) { - const breakpoint: Breakpoint = responsiveArray[i]; - if (screens[breakpoint] && column[breakpoint] !== undefined) { - return column[breakpoint] || DEFAULT_COLUMN_MAP[breakpoint]; - } - } - } - - return 3; -} - interface CompoundedComponent { Item: typeof DescriptionsItem; } -export interface DescriptionsItemType extends DescriptionsItemProps { +export interface InternalDescriptionsItemType extends DescriptionsItemProps { key?: React.Key; } +export interface DescriptionsItemType extends Omit { + span?: number | { [key in Breakpoint]?: number }; +} + export interface DescriptionsProps { prefixCls?: string; className?: string; @@ -74,7 +56,7 @@ const Descriptions: React.FC & CompoundedComponent = (props) prefixCls: customizePrefixCls, title, extra, - column = DEFAULT_COLUMN_MAP, + column, colon = true, bordered, layout, @@ -90,28 +72,29 @@ const Descriptions: React.FC & CompoundedComponent = (props) } = props; const { getPrefixCls, direction, descriptions } = React.useContext(ConfigContext); const prefixCls = getPrefixCls('descriptions', customizePrefixCls); - const [screens, setScreens] = React.useState({}); - const mergedColumn = getColumn(column, screens); + const screens = useBreakpoint(); + + // Column count + const mergedColumn = React.useMemo(() => { + if (typeof column === 'number') { + return column; + } + + return ( + matchScreen(screens, { + ...DEFAULT_COLUMN_MAP, + ...column, + }) ?? 3 + ); + }, [screens, column]); + + // Items with responsive + const mergedItems = useItems(screens, items, children); const mergedSize = useSize(customizeSize); - const rows = useRow(mergedColumn, items, children); + const rows = useRow(mergedColumn, mergedItems); const [wrapSSR, hashId] = useStyle(prefixCls); - const responsiveObserver = useResponsiveObserver(); - - // Responsive - React.useEffect(() => { - const token = responsiveObserver.subscribe((newScreens) => { - if (typeof column !== 'object') { - return; - } - setScreens(newScreens); - }); - - return () => { - responsiveObserver.unsubscribe(token); - }; - }, []); // ======================== Render ======================== const contextValue = React.useMemo( diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index d61a1e9eae68..8d32de7ee754 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -94,12 +94,12 @@ const items: DescriptionsProps['items'] = [ ### DescriptionItem -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------ | -------------- | ------------- | ------ | ----- | -| contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 | -| label | 内容的描述 | ReactNode | - | | -| labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 | -| span | 包含列的数量 | number | 1 | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| contentStyle | 自定义内容样式 | CSSProperties | - | 4.9.0 | +| label | 内容的描述 | ReactNode | - | | +| labelStyle | 自定义标签样式 | CSSProperties | - | 4.9.0 | +| span | 包含列的数量 | number \| [Screens](/components/grid#col) | 1 | `screens: 5.9.0` | > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。 From 3f148d9112c7d64c7f4a78b9871e06b74674350f Mon Sep 17 00:00:00 2001 From: afc163 Date: Wed, 30 Aug 2023 23:02:35 +0800 Subject: [PATCH 143/318] docs: add help text for token customization --- .../builtins/ComponentTokenTable/index.tsx | 42 ++++++++++++++++--- components/anchor/index.zh-CN.md | 2 +- components/app/index.zh-CN.md | 7 ++-- components/auto-complete/index.zh-CN.md | 2 +- components/avatar/index.zh-CN.md | 2 +- components/badge/index.zh-CN.md | 2 +- components/breadcrumb/index.zh-CN.md | 2 +- components/button/index.zh-CN.md | 2 +- components/calendar/index.zh-CN.md | 2 +- components/card/index.zh-CN.md | 2 +- components/carousel/index.zh-CN.md | 2 +- components/cascader/index.zh-CN.md | 2 +- components/checkbox/index.zh-CN.md | 2 +- components/collapse/index.zh-CN.md | 2 +- components/date-picker/index.zh-CN.md | 6 ++- components/descriptions/index.zh-CN.md | 2 +- components/divider/index.zh-CN.md | 2 +- components/drawer/index.zh-CN.md | 2 +- components/dropdown/index.zh-CN.md | 2 +- components/empty/index.zh-CN.md | 2 +- components/float-button/index.zh-CN.md | 2 +- components/form/index.zh-CN.md | 2 +- components/grid/index.zh-CN.md | 2 +- components/icon/index.zh-CN.md | 7 ++-- components/image/index.zh-CN.md | 2 +- components/input-number/index.zh-CN.md | 2 +- components/input/index.zh-CN.md | 2 +- components/layout/index.zh-CN.md | 2 +- components/list/index.zh-CN.md | 2 +- components/mentions/index.zh-CN.md | 2 +- components/menu/index.zh-CN.md | 2 +- components/message/index.zh-CN.md | 2 +- components/modal/index.zh-CN.md | 2 +- components/notification/index.zh-CN.md | 2 +- components/pagination/index.zh-CN.md | 2 +- components/popconfirm/index.zh-CN.md | 2 +- components/popover/index.zh-CN.md | 2 +- components/progress/index.zh-CN.md | 2 +- components/qr-code/index.zh-CN.md | 2 +- components/radio/index.zh-CN.md | 2 +- components/rate/index.zh-CN.md | 2 +- components/result/index.zh-CN.md | 2 +- components/segmented/index.zh-CN.md | 2 +- components/select/index.zh-CN.md | 2 +- components/skeleton/index.zh-CN.md | 2 +- components/slider/index.zh-CN.md | 2 +- components/space/index.zh-CN.md | 2 +- components/spin/index.zh-CN.md | 2 +- components/statistic/index.zh-CN.md | 2 +- components/steps/index.zh-CN.md | 2 +- components/switch/index.zh-CN.md | 2 +- components/table/index.zh-CN.md | 4 +- components/tabs/index.zh-CN.md | 2 +- components/tag/index.zh-CN.md | 2 +- components/time-picker/index.zh-CN.md | 2 +- components/timeline/index.zh-CN.md | 2 +- components/tooltip/index.zh-CN.md | 2 +- components/tour/index.zh-CN.md | 2 +- components/transfer/index.zh-CN.md | 2 +- components/tree-select/index.zh-CN.md | 2 +- components/tree/index.zh-CN.md | 2 +- components/typography/index.zh-CN.md | 2 +- components/upload/index.zh-CN.md | 2 +- components/watermark/index.zh-CN.md | 2 +- 64 files changed, 111 insertions(+), 73 deletions(-) diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index c67edab7b904..54f645583a09 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -1,5 +1,6 @@ import { RightOutlined } from '@ant-design/icons'; import { createStyles, css, useTheme } from 'antd-style'; +import Link from '../../common/Link'; import { getDesignToken } from 'antd-token-previewer'; import React, { useMemo, useState } from 'react'; import tokenMeta from 'antd/es/version/token-meta.json'; @@ -18,6 +19,9 @@ const locales = { value: '默认值', componentToken: '组件 Token', globalToken: '全局 Token', + help: '如何定制？', + customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量', + customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改主题变量', }, en: { token: 'Token Name', @@ -26,6 +30,9 @@ const locales = { value: 'Default Value', componentToken: 'Component Token', globalToken: 'Global Token', + help: 'How to customize?', + customizeTokenLink: '/docs/react/customize-theme#customize-design-token', + customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token', }, }; @@ -45,16 +52,32 @@ const useStyle = createStyles(() => ({ transition: all 0.3s; } `, + help: css` + margin-left: 6px; + font-size: 13px; + font-weight: normal; + color: #999; + a { + color: #999; + } + `, })); interface SubTokenTableProps { defaultOpen?: boolean; title: string; + help: React.ReactNode; tokens: string[]; component?: string; } -const SubTokenTable: React.FC = ({ defaultOpen, tokens, title, component }) => { +const SubTokenTable: React.FC = ({ + defaultOpen, + help, + tokens, + title, + component, +}) => { const [, lang] = useLocale(locales); const token = useTheme(); const columns = useColumns(); @@ -105,10 +128,13 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl .filter(Boolean); return ( -
+ <>
setOpen(!open)}> -

{title}

+

+ {title} + ({help}) +

{open && ( @@ -123,7 +149,7 @@ const SubTokenTable: React.FC = ({ defaultOpen, tokens, titl /> )} -
+ ); }; @@ -152,11 +178,17 @@ const ComponentTokenTable: React.FC = ({ component }) {tokenMeta.components[component] && ( {locale.help}} tokens={tokenMeta.components[component].map((item) => item.token)} component={component} + defaultOpen /> )} - + {locale.help}} + tokens={mergedGlobalTokens} + /> ); }; diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index fc988e824e4c..5745c52bb40b 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -76,6 +76,6 @@ group: | target | 该属性指定在何处显示链接的资源 | string | - | | | title | 文字内容 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/app/index.zh-CN.md b/components/app/index.zh-CN.md index 2be00c5bd562..7d6ee0c9704f 100644 --- a/components/app/index.zh-CN.md +++ b/components/app/index.zh-CN.md @@ -30,8 +30,8 @@ tag: New App 组件通过 `Context` 提供上下文方法调用，因而 useApp 需要作为子组件才能使用，我们推荐在应用中顶层包裹 App。 ```tsx -import { App } from 'antd'; import React from 'react'; +import { App } from 'antd'; const MyPage: React.FC = () => { const { message, notification, modal } = App.useApp(); @@ -103,8 +103,9 @@ export { message, notification, modal }; ```tsx // sub page -import { Button, Space } from 'antd'; import React from 'react'; +import { Button, Space } from 'antd'; + import { message } from './store'; export default () => { @@ -133,6 +134,6 @@ export default () => { | message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 | | notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index 7c358bc32f81..edd2df6dd9e4 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -79,7 +79,7 @@ demo: | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md index cf242ff013a9..1424b00085b2 100644 --- a/components/avatar/index.zh-CN.md +++ b/components/avatar/index.zh-CN.md @@ -62,6 +62,6 @@ group: | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 | | shape | 设置头像的形状 | `circle` \| `square` | `circle` | 5.8.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 132cec6b254c..29b6014c4b12 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -70,6 +70,6 @@ group: 数据展示 | root | 设置根元素 | 5.7.0 | | indicator | 设置徽标元素 | 5.7.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index ad95f7263255..25754eaf0dbb 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -131,6 +131,6 @@ function itemRender(item, params, items, paths) { return ; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 46fda89b226a..8a8bafce16b0 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -85,7 +85,7 @@ group: | ---- | ------------ | ----- | | icon | 设置图标元素 | 5.5.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 592b5838cb65..dbda79cb72e9 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -66,7 +66,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA | onPanelChange | 日期面板变化回调 | function(date: Dayjs, mode: string) | - | | | onSelect | 选择日期回调，包含来源信息 | function(date: Dayjs, info: { source: 'year' \| 'month' \| 'date' \| 'customize' }) | - | `info`: 5.6.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 8aff97ab1a31..776e76f44926 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -76,6 +76,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA | style | 定义容器类名的样式 | CSSProperties | - | | | title | 标题内容 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index 2c545c879efe..4b53c62f128a 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -51,7 +51,7 @@ demo: 更多 API 可参考： -## Design Token +## 主题变量（Design Token） diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 8e371fdfc46b..2a2141fcf476 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -123,6 +123,6 @@ interface Option { > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index 727c7d90c2b0..d55074ba349b 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -73,6 +73,6 @@ interface Option { | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index c87916fa67ef..6a66ce57c621 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -105,6 +105,6 @@ const items: CollapseProps['items'] = [ | key | 对应 activeKey | string \| number | - | | | showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true | | -## Design Token +## 主题变量（Design Token） diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index bcb7e655e222..d9f1dc1371ba 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -58,6 +58,7 @@ demo: ```jsx import 'dayjs/locale/zh-cn'; + import locale from 'antd/es/date-picker/locale/zh_CN'; ; @@ -66,7 +67,9 @@ import locale from 'antd/es/date-picker/locale/zh_CN'; ```jsx // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale import dayjs from 'dayjs'; + import 'dayjs/locale/zh-cn'; + import locale from 'antd/locale/zh_CN'; @@ -216,7 +219,7 @@ type GenericFn = (value: Dayjs) => string; export type FormatType = Generic | GenericFn | Array; ``` -## Design Token +## 主题变量（Design Token） @@ -244,6 +247,7 @@ export type FormatType = Generic | GenericFn | Array; ```js import dayjs from 'dayjs'; + import 'dayjs/locale/zh-cn'; import updateLocale from 'dayjs/plugin/updateLocale'; diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index d61a1e9eae68..8b5c51a62f54 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -103,6 +103,6 @@ const items: DescriptionsProps['items'] = [ > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。 -## Design Token +## 主题变量（Design Token） diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index c5005e407992..50196b3ada01 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -42,6 +42,6 @@ group: | style | 分割线样式对象 | CSSProperties | - | | | type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | | -## Design Token +## 主题变量（Design Token） diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md index 06ac5808f7dd..28bdd2a4473d 100644 --- a/components/drawer/index.zh-CN.md +++ b/components/drawer/index.zh-CN.md @@ -72,6 +72,6 @@ demo: | zIndex | 设置 Drawer 的 `z-index` | number | 1000 | | | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index b460404089be..0d2e12f4cbda 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -80,7 +80,7 @@ demo: 请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 -## Design Token +## 主题变量（Design Token） diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md index 568a4fb64c8a..f2f5499fd609 100644 --- a/components/empty/index.zh-CN.md +++ b/components/empty/index.zh-CN.md @@ -66,6 +66,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA } -## Design Token +## 主题变量（Design Token） diff --git a/components/float-button/index.zh-CN.md b/components/float-button/index.zh-CN.md index 165cb9872668..3b9efdc5e8d5 100644 --- a/components/float-button/index.zh-CN.md +++ b/components/float-button/index.zh-CN.md @@ -71,6 +71,6 @@ tag: New | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | | | onClick | 点击按钮的回调函数 | () => void | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index a46c1327c4fb..df72b0ec72fd 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -524,7 +524,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); | form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 | | preserve | 是否监视没有对应的 `Form.Item` 的字段 | boolean | false | 5.4.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md index 3dbf1c9229b2..44fcace7b836 100644 --- a/components/grid/index.zh-CN.md +++ b/components/grid/index.zh-CN.md @@ -87,6 +87,6 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index 9d6434e3efb8..f9274c2cc703 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -103,8 +103,8 @@ getTwoToneColor(); // #eb2f96 ```jsx import React from 'react'; -import ReactDOM from 'react-dom/client'; import { createFromIconfontCN } from '@ant-design/icons'; +import ReactDOM from 'react-dom/client'; const MyIcon = createFromIconfontCN({ scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成 @@ -152,9 +152,10 @@ module.exports = { ```jsx import React from 'react'; -import ReactDOM from 'react-dom/client'; import Icon from '@ant-design/icons'; import MessageSvg from 'path/to/message.svg'; // 你的 '*.svg' 文件路径 +import ReactDOM from 'react-dom/client'; + // in create-react-app: // import { ReactComponent as MessageSvg } from 'path/to/message.svg'; @@ -171,6 +172,6 @@ ReactDOM.createRoot(mountNode).render(); | style | 计算后的 `svg` 元素样式 | CSSProperties | - | | | width | `svg` 元素宽度 | string \| number | `1em` | | -## Design Token +## 主题变量（Design Token） diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 197b3a00545d..4b4669867a4d 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -162,6 +162,6 @@ type TransformAction = } ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 243cbefb0ce7..7f6b2c5382ce 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -71,7 +71,7 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 21f46a9e0ead..bdf1e7ebbc29 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -141,7 +141,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el | textarea | `textarea` 元素 | 5.4.0 | | count | 文字计数元素 | 5.4.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md index 7d7527bd6be0..414358ccfb62 100644 --- a/components/layout/index.zh-CN.md +++ b/components/layout/index.zh-CN.md @@ -131,6 +131,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*HdS6Q5vUCDcAAA } ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index e7d26b9c0da6..8e7aa1c5e653 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -92,6 +92,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA | description | 列表元素的描述内容 | ReactNode | - | | | title | 列表元素的标题 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md index cd9bb5804149..11136657e27c 100644 --- a/components/mentions/index.zh-CN.md +++ b/components/mentions/index.zh-CN.md @@ -92,6 +92,6 @@ return ( | className | css 类名 | string | - | | style | 选项样式 | React.CSSProperties | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index 6440e3c8973a..3321db025268 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -146,6 +146,6 @@ Menu 初始化时会先全部渲染，然后根据宽度裁剪内容。当处于 ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index b140e999dc0c..9fcf97ac229f 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -112,7 +112,7 @@ message.config({ | rtl | 是否开启 RTL 模式 | boolean | false | | | top | 消息距离顶部的位置 | number | 8 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index a293e7b14676..1cc62dd224a4 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -181,7 +181,7 @@ return
{contextHolder}
; const confirmed = await modal.confirm({ ... }); ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 53bdfb4e08dc..cc84cfccd8db 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -110,7 +110,7 @@ notification.config({ | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | | | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md index 7085ca158947..cd390892df5a 100644 --- a/components/pagination/index.zh-CN.md +++ b/components/pagination/index.zh-CN.md @@ -60,6 +60,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*WM86SrBC8TsAAA | onChange | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | | | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md index 7f289f4b013d..743256bbb927 100644 --- a/components/popconfirm/index.zh-CN.md +++ b/components/popconfirm/index.zh-CN.md @@ -52,7 +52,7 @@ demo: 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md index 27ded634f532..218e67f14496 100644 --- a/components/popover/index.zh-CN.md +++ b/components/popover/index.zh-CN.md @@ -45,7 +45,7 @@ demo: 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 -## Design Token +## 主题变量（Design Token） diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md index 646c1ecdc6e6..4e8a4d6cbacc 100644 --- a/components/progress/index.zh-CN.md +++ b/components/progress/index.zh-CN.md @@ -77,6 +77,6 @@ demo: | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - | | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/qr-code/index.zh-CN.md b/components/qr-code/index.zh-CN.md index b14cd3b2aa25..1e31634998c4 100644 --- a/components/qr-code/index.zh-CN.md +++ b/components/qr-code/index.zh-CN.md @@ -53,7 +53,7 @@ tag: New | status | 二维码状态 | `active \| expired \| loading ` | `active` | | onRefresh | 点击"点击刷新"的回调 | `() => void` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md index f7c35d6f8744..4a9d2ef1dc91 100644 --- a/components/radio/index.zh-CN.md +++ b/components/radio/index.zh-CN.md @@ -74,6 +74,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md index cb0b4293639e..d554adbf538c 100644 --- a/components/rate/index.zh-CN.md +++ b/components/rate/index.zh-CN.md @@ -58,6 +58,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md index afb3d7bff3f8..1867fb58350e 100644 --- a/components/result/index.zh-CN.md +++ b/components/result/index.zh-CN.md @@ -38,6 +38,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA | subTitle | subTitle 文字 | ReactNode | - | | title | title 文字 | ReactNode | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/segmented/index.zh-CN.md b/components/segmented/index.zh-CN.md index c38be07ee8ee..8962c30fe51a 100644 --- a/components/segmented/index.zh-CN.md +++ b/components/segmented/index.zh-CN.md @@ -50,6 +50,6 @@ demo: | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` | | | value | 当前选中的值 | string \| number | | | -## Design Token +## 主题变量（Design Token） diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 4e4937f9c6fd..1dd288826d50 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -136,7 +136,7 @@ demo: | key | Key | string | - | | | label | 组名 | string \| React.Element | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md index c5b12708c1b4..3b670bbbc84a 100644 --- a/components/skeleton/index.zh-CN.md +++ b/components/skeleton/index.zh-CN.md @@ -79,6 +79,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA | active | 是否展示动画效果 | boolean | false | | size | 设置输入框的大小 | `large` \| `small` \| `default` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index 438a12a56be8..1bf140a85f0a 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -80,6 +80,6 @@ demo: | blur() | 移除焦点 | | | focus() | 获取焦点 | | -## Design Token +## 主题变量（Design Token） diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md index 1c3f05aea4d1..6bc6b2011438 100644 --- a/components/space/index.zh-CN.md +++ b/components/space/index.zh-CN.md @@ -81,6 +81,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA | ---- | --------------------- | ----- | | item | 设置 `Space` 包裹的子组件 | 5.6.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index 47eefecae496..ad3f977fca92 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -45,6 +45,6 @@ demo: 你可以自定义全局默认 Spin 的元素。 -## Design Token +## 主题变量（Design Token） diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index 363b4915632f..ec0224fcd164 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -58,6 +58,6 @@ demo: | onFinish | 倒计时完成时触发 | () => void | - | | | onChange | 倒计时时间变化时触发 | (value: number) => void | - | 4.16.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index 768fdf55463b..596915b0f227 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -84,6 +84,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAA | subTitle | 子标题 | ReactNode | - | | | title | 标题 | ReactNode | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 51402a7f8f7a..386829a6a32a 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -50,6 +50,6 @@ demo: | blur() | 移除焦点 | | focus() | 获取焦点 | -## Design Token +## 主题变量（Design Token） diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 4b81b5fe7fdf..c85414db1392 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -290,9 +290,9 @@ const columns = [ ## 在 TypeScript 中使用 ```tsx +import React from 'react'; import { Table } from 'antd'; import type { ColumnsType } from 'antd/es/table'; -import React from 'react'; interface User { key: number; @@ -329,7 +329,7 @@ export default Demo; TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。 -## Design Token +## 主题变量（Design Token） diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index e6f60916bb1a..0a76a2d7c959 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -83,6 +83,6 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 | label | 选项卡头显示文字 | ReactNode | - | | children | 选项卡头显示内容 | ReactNode | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index 2898ec49b829..f2706c2f2f4d 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -54,6 +54,6 @@ demo: | checked | 设置标签的选中状态 | boolean | false | | onChange | 点击标签时触发的回调 | (checked) => void | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md index 07364a66ea69..1702aae7870b 100644 --- a/components/time-picker/index.zh-CN.md +++ b/components/time-picker/index.zh-CN.md @@ -121,7 +121,7 @@ type RangeDisabledTime = ( }; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md index d25d9d7f0a9a..8879f4ef46f6 100644 --- a/components/timeline/index.zh-CN.md +++ b/components/timeline/index.zh-CN.md @@ -70,6 +70,6 @@ return ( | children | 设置内容 | ReactNode | - | | position | 自定义节点位置 | `left` \| `right` | - | -## Design Token +## 主题变量（Design Token） diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md index f0de98cdfc83..23d538f7e515 100644 --- a/components/tooltip/index.zh-CN.md +++ b/components/tooltip/index.zh-CN.md @@ -63,7 +63,7 @@ demo: | zIndex | 设置 Tooltip 的 `z-index` | number | - | | | onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/tour/index.zh-CN.md b/components/tour/index.zh-CN.md index 3e09e4d85dc6..348293ee8b48 100644 --- a/components/tour/index.zh-CN.md +++ b/components/tour/index.zh-CN.md @@ -64,6 +64,6 @@ tag: New | prevButtonProps | 上一步按钮的属性 | `{ children: ReactNode; onClick: Function }` | - | | | scrollIntoViewOptions | 是否支持当前元素滚动到视窗内，也可传入配置指定滚动视窗的相关参数，默认跟随 Tour 的 `scrollIntoViewOptions` 属性 | `boolean \| ScrollIntoViewOptions` | `true` | 5.2.0 | -## Design Token +## 主题变量（Design Token） diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md index 4a61c6304be3..555549f6574c 100644 --- a/components/transfer/index.zh-CN.md +++ b/components/transfer/index.zh-CN.md @@ -97,7 +97,7 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数 return record.uid} />; ``` -## Design Token +## 主题变量（Design Token） diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md index 00a15d34dd7b..8c2fbd8b2126 100644 --- a/components/tree-select/index.zh-CN.md +++ b/components/tree-select/index.zh-CN.md @@ -110,7 +110,7 @@ demo: | title | 树节点显示的内容 | ReactNode | `---` | | | value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md index c4d985bdaf8c..58fc9db305ab 100644 --- a/components/tree/index.zh-CN.md +++ b/components/tree/index.zh-CN.md @@ -126,7 +126,7 @@ demo: | --- | --- | | scrollTo({ key: string \| number; align?: 'top' \| 'bottom' \| 'auto'; offset?: number }) | 虚拟滚动下，滚动到指定 key 条目 | -## Design Token +## 主题变量（Design Token） diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md index c9af276415a3..8ef789c95d9c 100644 --- a/components/typography/index.zh-CN.md +++ b/components/typography/index.zh-CN.md @@ -156,7 +156,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 | | onExpand | 点击展开时的回调 | function(event) | - | | -## Design Token +## 主题变量（Design Token） diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md index 8a2cd417cd2a..08f2ede31837 100644 --- a/components/upload/index.zh-CN.md +++ b/components/upload/index.zh-CN.md @@ -123,7 +123,7 @@ demo: 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。 -## Design Token +## 主题变量（Design Token） diff --git a/components/watermark/index.zh-CN.md b/components/watermark/index.zh-CN.md index 7fbe6b894742..d68a6d031c58 100644 --- a/components/watermark/index.zh-CN.md +++ b/components/watermark/index.zh-CN.md @@ -54,7 +54,7 @@ tag: New | fontFamily | 字体类型 | string | sans-serif | | | fontStyle | 字体样式 | `none` \| `normal` \| `italic` \| `oblique` | normal | | -## Design Token +## 主题变量（Design Token） From a265257e7dec17bcb178fc3af535525d706d0b12 Mon Sep 17 00:00:00 2001 From: AKing <827088092@qq.com> Date: Wed, 30 Aug 2023 23:24:19 +0800 Subject: [PATCH 144/318] fix: record the completed length of the last calculation as the transison length (#43058) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: record the completed width of the last calculation as the transition width in the calculation * test: add test case * test: correct test case name * refactor：rename conut to count --------- Co-authored-by: afc163 --- components/typography/Base/Ellipsis.tsx | 7 ++ .../typography/__tests__/ellipsis.test.tsx | 76 ++++++++++++++++++- 2 files changed, 82 insertions(+), 1 deletion(-) diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx index 9e840e3a0453..9383e1369460 100644 --- a/components/typography/Base/Ellipsis.tsx +++ b/components/typography/Base/Ellipsis.tsx @@ -86,6 +86,8 @@ const Ellipsis: React.FC = ({ const [[startLen, midLen, endLen], setCutLength] = React.useState< [startLen: number, midLen: number, endLen: number] >([0, 0, 0]); + // record last done with ellipsis width + const [lastLen, setLastLen] = React.useState(0); const [walkingState, setWalkingState] = React.useState(NONE); const [singleRowHeight, setSingleRowHeight] = React.useState(0); @@ -98,6 +100,10 @@ const Ellipsis: React.FC = ({ const mergedChildren = React.useMemo(() => { if (!enabledMeasure || walkingState !== DONE_WITH_ELLIPSIS) { + // if has lastLen, use it as temporary width to avoid lots of text to squeeze space. + if (lastLen && walkingState !== DONE_WITHOUT_ELLIPSIS && enabledMeasure) + return children(sliceNodes(nodeList, lastLen), lastLen < totalLen); + return children(nodeList, false); } @@ -153,6 +159,7 @@ const Ellipsis: React.FC = ({ setCutLength([nextStartLen, nextMidLen, nextEndLen]); } else { setWalkingState(DONE_WITH_ELLIPSIS); + setLastLen(midLen); onEllipsis(true); } } diff --git a/components/typography/__tests__/ellipsis.test.tsx b/components/typography/__tests__/ellipsis.test.tsx index 0306cad46f52..e50a47e06d41 100644 --- a/components/typography/__tests__/ellipsis.test.tsx +++ b/components/typography/__tests__/ellipsis.test.tsx @@ -45,7 +45,7 @@ describe('Typography.Ellipsis', () => { computeSpy = jest .spyOn(window, 'getComputedStyle') - .mockImplementation(() => ({ fontSize: 12 } as unknown as CSSStyleDeclaration)); + .mockImplementation(() => ({ fontSize: 12 }) as unknown as CSSStyleDeclaration); }); afterEach(() => { @@ -433,4 +433,78 @@ describe('Typography.Ellipsis', () => { }); mockRectSpy.mockRestore(); }); + + it('should not throw default dom nodes', async () => { + let currentWidth = 100; + // string count is different with different width + const getLineStrCount = (width: number) => { + const res = width === 100 ? 20 : 17; + return res; + }; + + const ref = React.createRef(); + const resize = (width: number) => { + currentWidth = width; + if (ref.current) triggerResize(ref.current); + }; + + mockRectSpy = spyElementPrototypes(HTMLElement, { + offsetHeight: { + get() { + let html = this.innerHTML; + html = html.replace(/<[^>]*>/g, ''); + const lines = Math.ceil(html.length / getLineStrCount(currentWidth)); + + return lines * 16; + }, + }, + offsetWidth: { + get: () => currentWidth, + }, + getBoundingClientRect() { + let html = this.innerHTML; + html = html.replace(/<[^>]*>/g, ''); + const lines = Math.ceil(html.length / getLineStrCount(currentWidth)); + return { height: lines * 16 }; + }, + }); + + const { container } = render( + + {fullStr} + , + ); + + // hijackings Math.ceil + const originalCeil = Math.ceil; + let hasDefaultStr = false; + + // Math.ceil will be used for ellipsis's calculations; + Math.ceil = (value) => { + const text = container.querySelector('p')?.innerHTML.replace(/<[^>]*>/g, ''); + if (text && !text.includes('...')) { + hasDefaultStr = true; + } + return originalCeil.call(Math, value); + }; + + resize(50); + await waitFakeTimer(20, 1); + // ignore last result + hasDefaultStr = false; + resize(100); + await waitFakeTimer(); + + expect(hasDefaultStr).not.toBeTruthy(); + // reset + mockRectSpy.mockRestore(); + Math.ceil = originalCeil; + }); }); From d0cc758d0e5110ea960c070c3bef8381d8e19149 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Thu, 31 Aug 2023 09:37:51 +0800 Subject: [PATCH 145/318] fix: Form sm 24 not working (#44541) * fix: Form sm 24 not working * chore: comment it --- components/form/style/index.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/components/form/style/index.ts b/components/form/style/index.ts index 66e435054a98..ae82154bf88f 100644 --- a/components/form/style/index.ts +++ b/components/form/style/index.ts @@ -323,7 +323,7 @@ const genFormItemStyle: GenerateStyle = (token) => { }; const genHorizontalStyle: GenerateStyle = (token) => { - const { componentCls, formItemCls, rootPrefixCls } = token; + const { componentCls, formItemCls } = token; return { [`${componentCls}-horizontal`]: { @@ -338,9 +338,14 @@ const genHorizontalStyle: GenerateStyle = (token) => { minWidth: 0, }, + // Do not change this to `ant-col-24`! `-24` match all the responsive rules // https://github.com/ant-design/ant-design/issues/32980 - [`${formItemCls}-label.${rootPrefixCls}-col-24 + ${formItemCls}-control`]: { - minWidth: 'unset', + // https://github.com/ant-design/ant-design/issues/34903 + // https://github.com/ant-design/ant-design/issues/44538 + [`${formItemCls}-label[class$='-24'], ${formItemCls}-label[class*='-24 ']`]: { + [`& + ${formItemCls}-control`]: { + minWidth: 'unset', + }, }, }, }; From ae53a452f2da2b25d6c741bbee4e454e35e38208 Mon Sep 17 00:00:00 2001 From: afc163 Date: Thu, 31 Aug 2023 09:48:54 +0800 Subject: [PATCH 146/318] docs: add help text for token customization (#44540) * docs: add help text for token customization * docs: add help text for token customization * docs: add help text for token customization * docs: add help text for token customization --- .../builtins/ComponentTokenTable/index.tsx | 66 +++++++++++++++---- 1 file changed, 54 insertions(+), 12 deletions(-) diff --git a/.dumi/theme/builtins/ComponentTokenTable/index.tsx b/.dumi/theme/builtins/ComponentTokenTable/index.tsx index 54f645583a09..7d64eb2d5aed 100644 --- a/.dumi/theme/builtins/ComponentTokenTable/index.tsx +++ b/.dumi/theme/builtins/ComponentTokenTable/index.tsx @@ -1,11 +1,10 @@ -import { RightOutlined } from '@ant-design/icons'; +import { RightOutlined, LinkOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { createStyles, css, useTheme } from 'antd-style'; -import Link from '../../common/Link'; import { getDesignToken } from 'antd-token-previewer'; import React, { useMemo, useState } from 'react'; import tokenMeta from 'antd/es/version/token-meta.json'; import tokenData from 'antd/es/version/token.json'; -import { ConfigProvider, Table } from 'antd'; +import { ConfigProvider, Table, Popover, Typography } from 'antd'; import useLocale from '../../../hooks/useLocale'; import { useColumns } from '../TokenTable'; @@ -21,7 +20,7 @@ const locales = { globalToken: '全局 Token', help: '如何定制？', customizeTokenLink: '/docs/react/customize-theme-cn#修改主题变量', - customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改主题变量', + customizeComponentTokenLink: '/docs/react/customize-theme-cn#修改组件变量', }, en: { token: 'Token Name', @@ -30,7 +29,7 @@ const locales = { value: 'Default Value', componentToken: 'Component Token', globalToken: 'Global Token', - help: 'How to customize?', + help: 'How to use?', customizeTokenLink: '/docs/react/customize-theme#customize-design-token', customizeComponentTokenLink: 'docs/react/customize-theme#customize-component-token', }, @@ -53,8 +52,8 @@ const useStyle = createStyles(() => ({ } `, help: css` - margin-left: 6px; - font-size: 13px; + margin-left: 8px; + font-size: 12px; font-weight: normal; color: #999; a { @@ -66,16 +65,18 @@ const useStyle = createStyles(() => ({ interface SubTokenTableProps { defaultOpen?: boolean; title: string; - help: React.ReactNode; + helpText: React.ReactNode; + helpLink: string; tokens: string[]; component?: string; } const SubTokenTable: React.FC = ({ defaultOpen, - help, tokens, title, + helpText, + helpLink, component, }) => { const [, lang] = useLocale(locales); @@ -127,13 +128,52 @@ const SubTokenTable: React.FC = ({ }) .filter(Boolean); + const code = component + ? ` + ... +` + : ` + ... +`; + return ( <>
setOpen(!open)}>

{title} - ({help}) + + 
{code}
+ + + {helpText} + + + } + > + + + {helpText} + +

{open && ( @@ -178,7 +218,8 @@ const ComponentTokenTable: React.FC = ({ component }) {tokenMeta.components[component] && ( {locale.help}} + helpText={locale.help} + helpLink={locale.customizeTokenLink} tokens={tokenMeta.components[component].map((item) => item.token)} component={component} defaultOpen @@ -186,7 +227,8 @@ const ComponentTokenTable: React.FC = ({ component }) )} {locale.help}} + helpText={locale.help} + helpLink={locale.customizeComponentTokenLink} tokens={mergedGlobalTokens} /> From a608bfa08a1098280b323cbfc87599c14dac21c2 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Thu, 31 Aug 2023 21:23:02 +0800 Subject: [PATCH 147/318] chore: fix form demo error (#44549) * fix: fix form demo error * update snap --- components/form/__tests__/__snapshots__/demo.test.tsx.snap | 1 + components/form/demo/inline-login.tsx | 5 +++-- package.json | 2 +- 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/components/form/__tests__/__snapshots__/demo.test.tsx.snap b/components/form/__tests__/__snapshots__/demo.test.tsx.snap index 9f8cd97d21a5..a8c366ca6fe2 100644 --- a/components/form/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/form/__tests__/__snapshots__/demo.test.tsx.snap @@ -4563,6 +4563,7 @@ exports[`renders components/form/demo/inline-login.tsx correctly 1`] = ` > - - -); -``` - -### كتابة السكربيت - -الخاصية `antd` مكتوبة في TypeScript مع تعريفات كاملة ، تحقق [Use in TypeScript](https://ant.design/docs/react/use-in-typescript) للبدء. - -## 🌍 التدويل - -يتم دعم عشرات اللغات في`antd`, انظر [i18n](https://ant.design/docs/react/i18n). - -## 🔗 الروابط - -- [الصفحة الرئيسية](https://ant.design/) -- [نظرة عامة على المكونات](https://ant.design/components/overview) -- [برنامج Ant Design Pro](https://pro.ant.design/) -- [تغير الدخول](CHANGELOG.en-US.md) -- [مكونات](https://react-component.github.io/) -- [موبايل UI](https://mobile.ant.design) -- [برنامج صغير UI](https://mini.ant.design) -- [مكونات Ant Design Pro](https://procomponents.ant.design) -- [رسوم بيانية Ant Design](https://charts.ant.design) -- [أيقونات Ant Design](https://github.com/ant-design/ant-design-icons) -- [ألوان Ant Design](https://github.com/ant-design/ant-design-colors) -- [صفحة لاند](https://landing.ant.design) -- [حركة](https://motion.ant.design) -- [سوق Scaffold](https://scaffold.ant.design) -- [تعليمات المطورين](https://github.com/ant-design/ant-design/wiki/Development) -- [إعداد نسخ الاصدارات](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [أسئلة مكرة](https://ant.design/docs/react/faq) -- [قالب CodeSandbox](https://u.ant.design/codesandbox-repro) -- [تخصيص ثيم](https://ant.design/docs/react/customize-theme) -- [كيفية التقدم بطلب المشاركة كمتعاون](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## ⌨️ التطوير - -استخدم Gitpod, بيئة تطوير مجانية عبر الإنترنت لـ GitHub. - -[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design) - -أو انسخه محلياً: - -```bash -$ git clone git@github.com:ant-design/ant-design.git -$ cd ant-design -$ npm install -$ npm start -``` - -افتح متصفحك وقم بزيارة http://127.0.0.1:8001 , شاهد المزيد [Development](https://github.com/ant-design/ant-design/wiki/Development). - -## 🤝 المساهمة [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) - -أقرأ [دليل المساهمة](https://ant.design/docs/react/contributing) ودعونا نبني معاً الأفضل. - -نرحب بجميع المساهمات. يرجى قراءة [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) أولاً. يمكنك تقديم أي أفكار [pull requests](https://github.com/ant-design/ant-design/pulls) أو [GitHub issues](https://github.com/ant-design/ant-design/issues). إذا كنت ترغب في تحسين التعليمات البرمجية ، تحقق من [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) وأتمنى لك وقتاً ممتعاً! :) - -إذا كنت مساهماً ، فيرجى اتباع [Pull Request principle](https://github.com/ant-design/ant-design/wiki/PR-principle) لإنشاء طلب مساهمة مع [collaborator template](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md). - -[![Let's fund issues in this repository](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) - -## ❤️ الرعاة والداعمون [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) diff --git a/README-ja_JP.md b/README-ja_JP.md deleted file mode 100644 index 875f8faddf56..000000000000 --- a/README-ja_JP.md +++ /dev/null @@ -1,157 +0,0 @@ -

- - - -

- -

Ant Design

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

- - - -

- -

Ant Design

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

- - - -

- -

Ant Design

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

- - - -

- -

Ant Design

- -
- -Мова інтерфейсу корпоративного класу та React UI бібліотека. - -[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] - -[![][bundlephobia-image]][bundlephobia-url] [![][bundlesize-js-image]][unpkg-js-url] [![FOSSA Status][fossa-image]][fossa-url] [![Covered by Argos Visual Testing][argos-ci-image]][argos-ci-url] - -[![Follow Twitter][twitter-image]][twitter-url] [![Renovate status][renovate-image]][renovate-dashboard-url] [![][issues-helper-image]][issues-helper-url] [![dumi][dumi-image]][dumi-url] [![Issues need help][help-wanted-image]][help-wanted-url] - -[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square -[npm-url]: http://npmjs.org/package/antd -[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg -[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22 -[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square -[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master -[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square -[download-url]: https://npmjs.org/package/antd -[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield -[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield -[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open -[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22 -[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design -[twitter-url]: https://twitter.com/AntDesignUI -[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square -[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js -[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/antd?style=flat-square -[bundlephobia-url]: https://bundlephobia.com/package/antd -[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square -[issues-helper-url]: https://github.com/actions-cool/issues-helper -[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square -[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498 -[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square -[dumi-url]: https://github.com/umijs/dumi -[argos-ci-image]: https://argos-ci.com/badge.svg -[argos-ci-url]: https://app.argos-ci.com/ant-design/ant-design/reference - -
- -[![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) - -[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | Українською | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md) - -## ✨ Особливості - -- 🌈 UI корпоративного класу, призначений для веб-додатків. -- 📦 Набір високоякісних компонентів React з коробки. -- 🛡 Написано на TypeScript із вбудованими статичними типами. -- ⚙️ Весь пакет дизайнерських ресурсів та засобів розробки. -- 🌍 Підтримка інтернаціоналізації для десятків мов. -- 🎨 Потужне налаштування теми в кожній деталі. - -## 🖥 Підтримка навколишнього середовища - -- Сучасні браузери -- Рендеринг на стороні сервера (SSR) -- [Electron](https://www.electronjs.org/) - -| [Edge](http://godban.github.io/browsers-support-badges/)
Edge | [Firefox](http://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](http://godban.github.io/browsers-support-badges/)
Chrome | [Safari](http://godban.github.io/browsers-support-badges/)
Safari | [Electron](http://godban.github.io/browsers-support-badges/)
Electron | -| --- | --- | --- | --- | --- | -| Edge | 2 останні версії | 2 останні версії | 2 останні версії | 2 останні версії | - -## 📦 Встановлення - -```bash -npm install antd -``` - -```bash -yarn add antd -``` - -## 🔨 Використання - -```jsx -import React from 'react'; -import { Button, DatePicker } from 'antd'; - -const App = () => ( - <> - - - -); -``` - -### TypeScript - -`antd` написано на TypeScript із повною типізацією, вибери [Використання у TypeScript](https://ant.design/docs/react/use-in-typescript) щоб розпочати. - -## 🌍 Інтернаціоналізація - -Десятки мов підтримуються в `antd`, дивись [i18n](https://ant.design/docs/react/i18n). - -## 🔗 Посилання - -- [Домашня сторінка](https://ant.design/) -- [Компоненти](https://ant.design/components/overview) -- [Ant Design Pro](http://pro.ant.design/) -- [Change Log](CHANGELOG.en-US.md) -- [rc-components](http://react-component.github.io/) -- [Mobile UI](http://mobile.ant.design) -- [Mini Program UI](http://mini.ant.design) -- [Ant Design Pro Components](https://procomponents.ant.design) -- [Ant Design Charts](https://charts.ant.design) -- [Ant Design Icons](https://github.com/ant-design/ant-design-icons) -- [Ant Design Colors](https://github.com/ant-design/ant-design-colors) -- [Лендінги](https://landing.ant.design) -- [Motion](https://motion.ant.design) -- [Scaffold Market](http://scaffold.ant.design) -- [Інструкція розробника](https://github.com/ant-design/ant-design/wiki/Development) -- [Примітка до випуску версій](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B) -- [FAQ](https://ant.design/docs/react/faq) -- [CodeSandbox темплейт](https://u.ant.design/codesandbox-repro) для звітів про помилки -- [Кастомізація теми](https://ant.design/docs/react/customize-theme) -- [Як подати заявку на участь у програмі Співавторства](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator) - -## ⌨️ Розробка - -Використовуй Gitpod, безкоштовне середовище розробки для GitHub. - -[![Відкрити у Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design) - -Або клонуй локально: - -```bash -$ git clone git@github.com:ant-design/ant-design.git -$ cd ant-design -$ npm install -$ npm start -``` - -Відкрий у браузері http://127.0.0.1:8001, докладніше дивись [Розробка](https://github.com/ant-design/ant-design/wiki/Development). - -## 🤝 Контрибьютинг [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com) - -Прочитай наш [посібник контриб'ютора](https://ant.design/docs/react/contributing) і давай будувати кращий antd разом. - -Ми вітаємо всі внески. Будь ласка, прочитай наш [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) спочатку. Ти можеш пропонувати будь-які ідеї як [Pull Request](https://github.com/ant-design/ant-design/pulls) або як [GitHub issues](https://github.com/ant-design/ant-design/issues). Якщо ти хочеш вдосконалити код, переглянь [Інструкції з розробки](https://github.com/ant-design/ant-design/wiki/Development) та добре проведи час! :) - -Якщо ти співавтор, дотримуйся нашого [Pull Request принципу](https://github.com/ant-design/ant-design/wiki/PR-principle) щоб створити Pull Request за [темплейтом співавтора](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md). - -[![Let's fund issues in this repository](https://raw.githubusercontent.com/BoostIO/issuehunt-materials/master/v1/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884) - -## ❤️ Спонсори та Меценати [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) - -[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support) diff --git a/README-zh_CN.md b/README-zh_CN.md index a2ea18292633..71c26a3921a6 100644 --- a/README-zh_CN.md +++ b/README-zh_CN.md @@ -47,7 +47,7 @@ [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) -[English](./README.md) | [Português](./README-pt_BR.md) | 简体中文 | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md) +[English](./README.md) | 中文 ## ✨ 特性 diff --git a/README.md b/README.md index 7b49ac006cde..954eb3e7d830 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ An enterprise-class UI design language and React UI library. [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design) -English | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md) | [العربية](./README-ar_EG.md) +English | [中文](./README-zh_CN.md) ## ✨ Features From 27d8f622ad4c80de488f7cd8b9f7065475dc59a5 Mon Sep 17 00:00:00 2001 From: Kyriewen <64134946+zbw-zbw@users.noreply.github.com> Date: Sat, 2 Sep 2023 18:38:54 +0800 Subject: [PATCH 162/318] chore(float-button): remove unused css code (#44587) * fix(float-button): fix componentCls display props * chore(float-button): remove useless styles --- components/float-button/style/index.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/components/float-button/style/index.ts b/components/float-button/style/index.ts index a0c031f5998c..0e70ad8a6a39 100644 --- a/components/float-button/style/index.ts +++ b/components/float-button/style/index.ts @@ -220,9 +220,6 @@ const sharedFloatButtonStyle: GenerateStyle = (toke position: 'fixed', cursor: 'pointer', zIndex: 99, - display: 'block', - justifyContent: 'center', - alignItems: 'center', width: floatButtonSize, height: floatButtonSize, insetInlineEnd: token.floatButtonInsetInlineEnd, From 5706f21dfb4f4c86c24cf4278f3fac0f698d05a7 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 2 Sep 2023 19:05:46 +0800 Subject: [PATCH 163/318] chore: skip husky install in ci environment (#44600) https://typicode.github.io/husky/guide.html#with-is-ci --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 9e83c9d82f38..2c06740e6899 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "unpkg": "dist/antd.min.js", "typings": "es/index.d.ts", "scripts": { - "prepare": "husky install", + "prepare": "is-ci || husky install", "api-collection": "antd-tools run api-collection", "authors": "ts-node --esm --project tsconfig.node.json scripts/generate-authors.ts", "build": "npm run compile && NODE_OPTIONS='--max-old-space-size=4096' npm run dist", @@ -246,6 +246,7 @@ "identity-obj-proxy": "^3.0.0", "immer": "^10.0.1", "inquirer": "^9.1.2", + "is-ci": "^3.0.1", "isomorphic-fetch": "^3.0.0", "jest": "^29.4.1", "jest-axe": "^8.0.0", From 8099247df477b8dcded35d04e91069a91a67fea9 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sat, 2 Sep 2023 19:25:43 +0800 Subject: [PATCH 164/318] docs(:sparkles:): release 5.8.6 (#44597) * docs(:sparkles:): release 5.8.6 * chore: add changelog * Apply suggestions from code review Signed-off-by: afc163 --------- Signed-off-by: afc163 --- CHANGELOG.en-US.md | 39 +++++++++++++++++++++++++++++++-------- CHANGELOG.zh-CN.md | 35 +++++++++++++++++++++++++++++------ package.json | 2 +- 3 files changed, 61 insertions(+), 15 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index c57025a57aa3..8720832f787a 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,12 +16,35 @@ tag: vVERSION --- +## 5.8.6 + +`2023-09-02` + +- 🛠 Optimize some styles size in document.head by extracting unused styles. + - 🛠 Notification and Message only generate styles when displayed. [#44488](https://github.com/ant-design/ant-design/pull/44488) + - 🛠 Extract Tag status & preset color style which will only generate by needed. [#44512](https://github.com/ant-design/ant-design/pull/44512) + - 🛠 Extract Button compact style, now only the corresponding style will be generated when Space.Compact is used. [#44475](https://github.com/ant-design/ant-design/pull/44475) +- 📦 Remove `lodash/camelCase` from `@ant-design/icons` dependencies to reduce bundle size. [ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595) +- Form + - 🐞 Fix Form.Item children not hidden when `wrapperCol.span` is `0`. [#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair) + - 🐞 Fix Form `wrapperCol` to be 24 not working when `labelCol` is set to 24. [#44541](https://github.com/ant-design/ant-design/pull/44541) +- 🐞 Fix Watermark that would crash if `content` is empty string. [#44501](https://github.com/ant-design/ant-design/pull/44501) +- 🐞 Fix ColorPicker popup still working when `disabled` is `true`. [#44466](https://github.com/ant-design/ant-design/pull/44466) [@RedJue](https://github.com/RedJue) +- 🐞 Fix Transfer trigger `onSelectChange` twice sometimes when click checkbox. [#44471](https://github.com/ant-design/ant-design/pull/44471) [@kovsu](https://github.com/kovsu) +- 🐞 Fix Typography scrollbar flush problem when enable `ellipsis`. [#43058](https://github.com/ant-design/ant-design/pull/43058) [@bbb169](https://github.com/bbb169) +- Slider + - 🐞 Fix Slider draggable track unpredictable behavior. [#44503](https://github.com/ant-design/ant-design/pull/44503) [@BoyYangzai](https://github.com/BoyYangzai) [@yoyo837](https://github.com/yoyo837) + - ⌨️ Improve Slider a11y behavior by adding `aria-orientation`. [react-component/slider#859](https://github.com/react-component/slider/pull/859) [@5im0n](https://github.com/5im0n) +- 🐞 Fix Steps `type="nav"` last item did not hide arrow properly. [#44582](https://github.com/ant-design/ant-design/pull/44582) [@ohhoney1](https://github.com/ohhoney1) +- TypeScript + - 🤖 Fix Upload file `status` definition to remove unused success status. [#44468](https://github.com/ant-design/ant-design/pull/44468) + ## 5.8.5 `2023-08-28` - 🛠 Refactor Badge style logic and take Ribbon style out to reduce SSR inline style size. [#44451](https://github.com/ant-design/ant-design/pull/44451) -- 🐞 Fix the issue of abnormal icon styling when using `@ant-design/icons`` within App. [#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144) +- 🐞 Fix the issue of abnormal icon styling when using `@ant-design/icons` within App. [#41208](https://github.com/ant-design/ant-design/pull/41208) [@Wxh16144](https://github.com/Wxh16144) - 🐞 Fix the issue of vertical dragging malfunction in Carousel. [#44460](https://github.com/ant-design/ant-design/pull/44460) [@RedJue](https://github.com/RedJue) - 🐞 Fix Tour panel use wrong design token. [#44428](https://github.com/ant-design/ant-design/pull/44428) - 🐞 Fix Form `wrapperCol` with responsive `xs` config not working. [#44388](https://github.com/ant-design/ant-design/pull/44388) @@ -104,7 +127,7 @@ tag: vVERSION - 🆕 Descriptions support `items` prop. [#43483](https://github.com/ant-design/ant-design/pull/43483) [@RedJue](https://github.com/RedJue) - 🆕 ColorPicker support `disabledAlpha` prop. [#43355](https://github.com/ant-design/ant-design/pull/43355) [@RedJue](https://github.com/RedJue) - 🆕 Avatar.Group support `shape` prop. [#43817](https://github.com/ant-design/ant-design/pull/43817) [@li-jia-nan](https://github.com/li-jia-nan) -- 🆕 AutoComplete/Cascader/DatePicker/Input.Textarea/TimePicker/TreeSelect support `allowClear` prop to customize clear button。[#43582](https://github.com/ant-design/ant-design/discussions/43582) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 AutoComplete/Cascader/DatePicker/Input.Textarea/TimePicker/TreeSelect support `allowClear` prop to customize clear button. [#43582](https://github.com/ant-design/ant-design/discussions/43582) [@kiner-tang](https://github.com/kiner-tang) - 🆕 DatePicker.RangePicker `presets` support callback functions. [#43476](https://github.com/ant-design/ant-design/pull/43476) [@Wxh16144](https://github.com/Wxh16144) - 🆕 Added the `preview={{ movable: Boolean }}` prop to the Image component to support dragging and dropping into folders. [#43823](https://github.com/ant-design/ant-design/pull/43823) [@linxianxi](https://github.com/linxianxi) - 🆕 Slider `tooltip` support `autoAdjustOverflow` prop. [#43788](https://github.com/ant-design/ant-design/pull/43788) @@ -196,7 +219,7 @@ tag: vVERSION - 🐞 MISC: Fixed an issue where some browsers had scroll bars that were not redrawn when style feature support was detected. [#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM) - 🐞 Fixed an issue where the Tab component of Card would not be displayed at all when tabList is empty. [#43416](https://github.com/ant-design/ant-design/pull/43416) [@linxianxi](https://github.com/linxianxi) - 🐞 Fixed an issue where the `form.validateMessages` configuration would be lost when using ConfigProvider nestedly. [#43239](https://github.com/ant-design/ant-design/pull/43239) [@Wxh16144](https://github.com/Wxh16144) -- 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element .[#43402](https://github.com/ant-design/ant-design/pull/43402) +- 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element. [#43402](https://github.com/ant-design/ant-design/pull/43402) - 🐞 Fixed an issue where clicking "now" in DatePicker when switching to the year-month panel would not work. [#43367](https://github.com/ant-design/ant-design/pull/43367) [@Yuiai01](https://github.com/Yuiai01) - 🐞 Fixed an issue where the height set for the Input.TextArea component would become invalid when the screen size changed. [#43169](https://github.com/ant-design/ant-design/pull/43169) [@MadCcc](https://github.com/MadCcc) - 💄 In Slider, the `tooltip` should be centered when there is little content. [#43430](https://github.com/ant-design/ant-design/pull/43430) [@Jomorx](https://github.com/Jomorx) @@ -656,7 +679,7 @@ tag: vVERSION `2023-02-27` - 🐞 Fix for setting `percent` and `success.percent` at the same time for `Progress`, the progress text does not change as `percent` changes. [#40922](https://github.com/ant-design/ant-design/pull/40922) -- 🐞 Fixed Image preview icon was misaligned.[#40911](https://github.com/ant-design/ant-design/pull/40911) +- 🐞 Fixed Image preview icon was misaligned. [#40911](https://github.com/ant-design/ant-design/pull/40911) - 🐞 Fix ConfigProvider validation message template override Form configure template sometime. [#40533](https://github.com/ant-design/ant-design/pull/40533) [@Wxh16144](https://github.com/Wxh16144) - 🐞 Fixed Confirm Modal `onOk` event could be triggered twice when close. [#40719](https://github.com/ant-design/ant-design/pull/40719) [@Rafael-Martins](https://github.com/Rafael-Martins) - 🛠 Rewrote the `useLocale` method and exposed `localeCode` to the public. [#40884](https://github.com/ant-design/ant-design/pull/40884) [@li-jia-nan](https://github.com/li-jia-nan) @@ -666,10 +689,10 @@ tag: vVERSION - 🐞 Fixed where Descriptions did not accept `data-_` and `aria-_` attributes. [#40859](https://github.com/ant-design/ant-design/pull/40859) [@goveo](https://github.com/goveo) - 🛠 Changed the Breadcrumb Separator's DOM element from `span` to `li`. [#40867](https://github.com/ant-design/ant-design/pull/40867) [@heiyu4585](https://github.com/heiyu4585) - 🐞 Fix token of `Layout.colorBgHeader` not work when single use Layout.Header directly. [#40933](https://github.com/ant-design/ant-design/pull/40933) -- 💄 Changed Design Token the component's focus `outline` to the default `4px`.[#40839](https://github.com/ant-design/ant-design/pull/40839) +- 💄 Changed Design Token the component's focus `outline` to the default `4px`. [#40839](https://github.com/ant-design/ant-design/pull/40839) - 🐞 Fixed the Badge color was displayed abnormally. [#40848](https://github.com/ant-design/ant-design/pull/40848) [@kiner-tang](https://github.com/kiner-tang) - 🐞 Fixed an issue with the Timeline item's `className`. [#40835](https://github.com/ant-design/ant-design/pull/40835) [@Yuiai01](https://github.com/Yuiai01) -- 💄 Fixed the interaction style of the Rate component in the disabled state.[#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01) +- 💄 Fixed the interaction style of the Rate component in the disabled state. [#40836](https://github.com/ant-design/ant-design/pull/40836) [@Yuiai01](https://github.com/Yuiai01) - 🇮🇷 Added Iranian localization. [#40895](https://github.com/ant-design/ant-design/pull/40895) [@majidsadr](https://github.com/majidsadr) ## 5.2.2 @@ -878,8 +901,8 @@ tag: vVERSION `2022-12-26` -- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size.[#38779](https://github.com/ant-design/ant-design/pull/38779) -- ⚡️ Improve Transfer performance when selecting and moving nodes with large data.[#39465](https://github.com/ant-design/ant-design/pull/39465) [@wqs576222103](https://github.com/wqs576222103) +- 📦 Remove IE and other legacy browsers from browserslist to reduce bundle size. [#38779](https://github.com/ant-design/ant-design/pull/38779) +- ⚡️ Improve Transfer performance when selecting and moving nodes with large data. [#39465](https://github.com/ant-design/ant-design/pull/39465) [@wqs576222103](https://github.com/wqs576222103) - 🐞 Fix Design Token wrong `font-family` of components. [#39806](https://github.com/ant-design/ant-design/pull/39806) - 🐞 Fix Drawer default props not working when `placement` `open` `width` are `undefined`. [#39782](https://github.com/ant-design/ant-design/pull/39782) - 🐞 Fix Menu icon animation when collapse it. [#39800](https://github.com/ant-design/ant-design/pull/39800) [@JarvisArt](https://github.com/JarvisArt) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index d680fda23212..3faac82200c9 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,29 @@ tag: vVERSION --- +## 5.8.6 + +`2023-09-02` + +- 🛠 针对 CSSInJS 加载 styles 大小进行了优化。 + - 🛠 Notification 和 Message 组件只有在展示时才会插入对应样式。[#44488](https://github.com/ant-design/ant-design/pull/44488) + - 🛠 剥离 Tag 状态与预设颜色样式，现在只有当使用的使用才会生成它们。[#44512](https://github.com/ant-design/ant-design/pull/44512) + - 🛠 剥离 Button 紧凑模式样式，现在只有当使用了 Space.Compact 才会生成对应样式。[#44475](https://github.com/ant-design/ant-design/pull/44475) +- 📦 移除 `@ant-design/icons` 依赖 `lodash/camelCase` 以优化 bundle size。[ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595) +- Form + - 🐞 修复 Form.Item 设置 `wrapperCol.span` 为 `0` 时，子元素不隐藏的问题。[#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair) + - 🐞 修复 Form `labelCol` 设置为 24 时，会使 `wrapperCol` 设置 24 失效的问题。[#44541](https://github.com/ant-design/ant-design/pull/44541) +- 🐞 修复 Watermark 组件在 `content` 是空字符串时报错的问题。[#44501](https://github.com/ant-design/ant-design/pull/44501) +- 🐞 修复 ColorPicker 禁用时依然能弹出选择窗口的问题。[#44466](https://github.com/ant-design/ant-design/pull/44466) [@RedJue](https://github.com/RedJue) +- 🐞 修复 Transfer 点击 Checkbox 时有时会触发两次选择行为的问题。[#44471](https://github.com/ant-design/ant-design/pull/44471) [@kovsu](https://github.com/kovsu) +- 🐞 修复 Typography 使用 `ellipsis` 时滚动条闪动的问题。[#43058](https://github.com/ant-design/ant-design/pull/43058) [@bbb169](https://github.com/bbb169) +- Slider + - 🐞 修复 Slider 滑块可拖拽区域范围异常的问题。[#44503](https://github.com/ant-design/ant-design/pull/44503) [@BoyYangzai](https://github.com/BoyYangzai) [@yoyo837](https://github.com/yoyo837) + - ⌨️ 优化 Slider `aria-orientation` 可访问性属性。[react-component/slider#859](https://github.com/react-component/slider/pull/859) [@5im0n](https://github.com/5im0n) +- 🐞 修复 Steps `type="nav"` 垂直导航步骤条的最后一项箭头没隐藏的问题。[#44582](https://github.com/ant-design/ant-design/pull/44582) [@ohhoney1](https://github.com/ohhoney1) +- TypeScript + - 🤖 修复 Upload 文件状态定义，移除未使用过的 `success` 状态。[#44468](https://github.com/ant-design/ant-design/pull/44468) + ## 5.8.5 `2023-08-28` @@ -68,7 +91,7 @@ tag: vVERSION - 🐞 修复 `@ant-design/cssinjs` 版本小于 `1.15.0` 时 Design Token 部分丢失的问题。[#44091](https://github.com/ant-design/ant-design/pull/44091) [@MadCcc](https://github.com/MadCcc) - 💄 修复 Badge `status="processing"` 和 `dot` 配合使用时，波纹样式异常的问题。[#44153](https://github.com/ant-design/ant-design/pull/44153) - 💄 修复 Descriptions 组件自行嵌套时的边框样式问题。[#43454](https://github.com/ant-design/ant-design/pull/43454) [@Yuiai01](https://github.com/Yuiai01) -- 💄 修复 Pagination 上下页切换按钮 `transition`` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030) +- 💄 修复 Pagination 上下页切换按钮 `transition` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030) - 💄 修复 Popconfirm 按钮组意外换行的问题。[#44022](https://github.com/ant-design/ant-design/pull/44022) [@MuxinFeng](https://github.com/MuxinFeng) - 💄 优化 Image 组件预览操作图标的样式。[#44141](https://github.com/ant-design/ant-design/pull/44141) [@MadCcc](https://github.com/MadCcc) - 💄 优化 Input 和 InputNumber 在大尺寸下的字体大小。[#44000](https://github.com/ant-design/ant-design/pull/44000) [@MuxinFeng](https://github.com/MuxinFeng) @@ -183,13 +206,13 @@ tag: vVERSION - 🆕 ColorPicker 支持 `onChangeComplete`。[#43370](https://github.com/ant-design/ant-design/pull/43370) [@RedJue](https://github.com/RedJue) - 🆕 ColorPicker 支持 `panelRender`。[#43134](https://github.com/ant-design/ant-design/pull/43134) [@RedJue](https://github.com/RedJue) - 🆕 ColorPicker 支持 `size`。[#43116](https://github.com/ant-design/ant-design/pull/43116) [@RedJue](https://github.com/RedJue) -- 🆕 Alert、Drawer、Modal、Notifaction、Tag、Tabs 均已支持通过设置 `closeIcon` 为 null 或 false 隐藏关闭按钮。 [#42828](https://github.com/ant-design/ant-design/discussions/42828) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Alert、Drawer、Modal、Notifaction、Tag、Tabs 均已支持通过设置 `closeIcon` 为 null 或 false 隐藏关闭按钮。[#42828](https://github.com/ant-design/ant-design/discussions/42828) [@kiner-tang](https://github.com/kiner-tang) - 🆕 Anchor 添加 `replace` 属性。[#43006](https://github.com/ant-design/ant-design/pull/43006) [@ds1371dani](https://github.com/ds1371dani) - 🆕 Image 支持 `imageRender`、`toolbarRender` 属性以支持预览图和工具栏的自定义渲染，还支持了 `onTransform`、`minScale`、`maxScale` 等新属性，Image.PreviewGroup 支持 `items` 属性传入列表数据，并修复了 img 标签的原生属性没有传递给预览图的问题。[#43075](https://github.com/ant-design/ant-design/pull/43075) [@linxianxi](https://github.com/linxianxi) - 🆕 修改 Image 预览图的布局风格，`preview` 属性支持 `closeIcon`，Image.PreviewGroup 支持 `fallback` 属性，修复加载预览资源提前加载的问题。[#43167](https://github.com/ant-design/ant-design/pull/43167) [@linxianxi](https://github.com/linxianxi) - 🛠 InputNumber 使用 rc-input 进行重构。[#43000](https://github.com/ant-design/ant-design/pull/43000) [@MuxinFeng](https://github.com/MuxinFeng) - 🛠 解决 vite、rollup、meteor、microbundle 等构建工具中遇到的循环依赖问题，并增加相关的检测。[#42750](https://github.com/ant-design/ant-design/pull/42750)，感谢 [@jrr997](https://github.com/jrr997)、[@kiner-tang](https://github.com/kiner-tang) 和 [@MuxinFeng](https://github.com/MuxinFeng) 的贡献。 -- 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。 [#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany) +- 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。[#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany) - 🐞 修复 Upload 上传进度条延迟消失且丢失动画效果的问题。[#43471](https://github.com/ant-design/ant-design/pull/43471) - 🐞 为 Menu 中组件 Token `colorItemBgSelected` 添加废弃警告。[#43461](https://github.com/ant-design/ant-design/pull/43461) [@MadCcc](https://github.com/MadCcc) - 🐞 杂项：修复样式特性支持检测时部分浏览器因为未重绘导致出现滚动条的问题。[#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM) @@ -482,7 +505,7 @@ tag: vVERSION `2023-04-19` - 🐞 修复 FloatButton 警告: findDOMNode is deprecated in StrictMode.。[#41833](https://github.com/ant-design/ant-design/pull/41833) [@fourcels](https://github.com/fourcels) -- 🐞 杂项：箭头元素兼容旧版本不支持 `clip-path: path()` 的浏览器。 [#41872](https://github.com/ant-design/ant-design/pull/41872) +- 🐞 杂项：箭头元素兼容旧版本不支持 `clip-path: path()` 的浏览器。[#41872](https://github.com/ant-design/ant-design/pull/41872) - 🐞 修复 Layout.Sider 切换主题时存在背景切换延迟的问题。[#41828](https://github.com/ant-design/ant-design/pull/41828) - 🐞 修复 Tour 的 `type="primary"` 时箭头的颜色仍为白色的问题。[#41761](https://github.com/ant-design/ant-design/pull/41761) - 🐞 优化 Form 字段绑定，现在会忽略在 Form.Item 内的注释不再作为子组件进行绑定。[#41771](https://github.com/ant-design/ant-design/pull/41771) @@ -810,7 +833,7 @@ tag: vVERSION `2023-01-15` -- 🐞 修复 Checkbox 组件 label 不对齐的问题。 [#40208](https://github.com/ant-design/ant-design/pull/40208) +- 🐞 修复 Checkbox 组件 label 不对齐的问题。[#40208](https://github.com/ant-design/ant-design/pull/40208) - 🐞 修复 Button 水波纹效果有时会使得布局抖动的问题。[#40192](https://github.com/ant-design/ant-design/pull/40192) - 🐞 修复 Select 组件会卡住的问题。[#40158](https://github.com/ant-design/ant-design/pull/40158) [@helloqian12138](https://github.com/helloqian12138) - 🐞 修复 Timeline 组件自定义颜色显示错误类名和对齐溢出的问题。[#39394](https://github.com/ant-design/ant-design/pull/39394) [@Wxh16144](https://github.com/Wxh16144) @@ -897,7 +920,7 @@ tag: vVERSION - 🐞 修复 Card 只有 `extra` 时标题栏高度不足的问题。[#39646](https://github.com/ant-design/ant-design/pull/39646) [@JarvisArt](https://github.com/JarvisArt) - 🐞 修复 Row 组件 `justify` 和 `align` 属性，动态改变不生效的问题。[#39704](https://github.com/ant-design/ant-design/pull/39704) [@candy4290](https://github.com/candy4290) - 🐞 修复 App 中 `children` 使用相同 key 的警告。[#39695](https://github.com/ant-design/ant-design/pull/39695) [@Kamahl19](https://github.com/Kamahl19)，[#39701](https://github.com/ant-design/ant-design/pull/39701) [@li-jia-nan](https://github.com/li-jia-nan) -- 💄 Image 组件预览交互优化. [#39812](https://github.com/ant-design/ant-design/pull/39812) [@JarvisArt](https://github.com/JarvisArt) +- 💄 Image 组件预览交互优化。[#39812](https://github.com/ant-design/ant-design/pull/39812) [@JarvisArt](https://github.com/JarvisArt) - 💄 修复 Table 筛选菜单选中背景色和菜单阴影样式。[#39805](https://github.com/ant-design/ant-design/pull/39805) - TypeScript - 🤖 修复部分 Design Token 缺少类型提示的问题。[#39754](https://github.com/ant-design/ant-design/pull/39754) diff --git a/package.json b/package.json index 2c06740e6899..bf4b91bb945c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "antd", - "version": "5.8.5", + "version": "5.8.6", "packageManager": "^npm@9.0.0", "description": "An enterprise-class UI design language and React components implementation", "title": "Ant Design", From 9d162d340829dcb27d975c20d97b514553000ef1 Mon Sep 17 00:00:00 2001 From: Amumu Date: Sun, 3 Sep 2023 01:09:17 +0800 Subject: [PATCH 165/318] docs: sort i18n table (#44603) --- docs/react/i18n.en-US.md | 2 +- docs/react/i18n.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/react/i18n.en-US.md b/docs/react/i18n.en-US.md index 8d22522d7929..752e635905f1 100644 --- a/docs/react/i18n.en-US.md +++ b/docs/react/i18n.en-US.md @@ -75,6 +75,7 @@ The following languages are currently supported: | Malayalam (India) | ml_IN | | Mongolian | mn_MN | | Malay (Malaysia) | ms_MY | +| Burmese | my_MM | | Norwegian | nb_NO | | Nepal | ne_NP | | Dutch (Belgium) | nl_BE | @@ -99,7 +100,6 @@ The following languages are currently supported: | Chinese (Simplified) | zh_CN | | Chinese (Traditional) | zh_HK | | Chinese (Traditional) | zh_TW | -| Burmese | my_MM | See more usage at [ConfigProvider](/components/config-provider). diff --git a/docs/react/i18n.zh-CN.md b/docs/react/i18n.zh-CN.md index 710af20ac452..428e4d43cb83 100644 --- a/docs/react/i18n.zh-CN.md +++ b/docs/react/i18n.zh-CN.md @@ -72,6 +72,7 @@ return ( | 马拉雅拉姆语 | ml_IN | | 蒙古语 | mn_MN | | 马来语 (马来西亚) | ms_MY | +| 缅甸语 | my_MM | | 挪威语 | nb_NO | | 尼泊尔语 | ne_NP | | 荷兰语（比利时） | nl_BE | @@ -96,7 +97,6 @@ return ( | 简体中文 | zh_CN | | 繁体中文（中国香港） | zh_HK | | 繁体中文（中国台湾） | zh_TW | -| 缅甸语 | my_MM | 具体的使用方法请参考 [ConfigProvider 文档](/components/config-provider-cn)。 From 5a5af385b86a04bbf84e09fb4c68ecd4791ab462 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?= =?UTF-8?q?=E5=8D=9C?= Date: Sun, 3 Sep 2023 10:20:24 +0800 Subject: [PATCH 166/318] fix: CheckableTag miss CP tag (#44602) * fix: CheckableTag miss CP tag * chore: bump tag * chore: fix failed * chore: fix circle --- .circleci/config.yml | 4 +++- .../config-provider/__tests__/style.test.tsx | 6 ++++++ components/tag/CheckableTag.tsx | 19 ++++++++++++++++--- 3 files changed, 25 insertions(+), 4 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index ed1f4c5e93cd..6e9cf06d5d97 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -7,7 +7,9 @@ version: 2.1 jobs: test-argos-ci: docker: - - image: cimg/node:16.20-browsers + - image: cimg/node:18.17-browsers + environment: + NODE_OPTIONS: --openssl-legacy-provider steps: - checkout - run: diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx index 622a9ed40d06..d202d543c1fa 100644 --- a/components/config-provider/__tests__/style.test.tsx +++ b/components/config-provider/__tests__/style.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import ConfigProvider from '..'; import { fireEvent, render } from '../../../tests/utils'; import Alert from '../../alert'; @@ -942,11 +943,16 @@ describe('ConfigProvider support style and className props', () => { const { container } = render( Test + CheckableTag , ); const element = container.querySelector('.ant-tag'); expect(element).toHaveClass('cp-tag'); expect(element).toHaveStyle({ backgroundColor: 'blue' }); + + const checkableElement = container.querySelector('.ant-tag-checkable'); + expect(checkableElement).toHaveClass('cp-tag'); + expect(checkableElement).toHaveStyle({ backgroundColor: 'blue' }); }); it('Should Table className & style works', () => { diff --git a/components/tag/CheckableTag.tsx b/components/tag/CheckableTag.tsx index 7690c48f7c1d..3329f03e45b5 100644 --- a/components/tag/CheckableTag.tsx +++ b/components/tag/CheckableTag.tsx @@ -1,5 +1,6 @@ -import classNames from 'classnames'; import * as React from 'react'; +import classNames from 'classnames'; + import { ConfigContext } from '../config-provider'; import useStyle from './style'; @@ -21,13 +22,14 @@ export interface CheckableTagProps { const CheckableTag: React.FC = (props) => { const { prefixCls: customizePrefixCls, + style, className, checked, onChange, onClick, ...restProps } = props; - const { getPrefixCls } = React.useContext(ConfigContext); + const { getPrefixCls, tag } = React.useContext(ConfigContext); const handleClick = (e: React.MouseEvent) => { onChange?.(!checked); @@ -44,11 +46,22 @@ const CheckableTag: React.FC = (props) => { { [`${prefixCls}-checkable-checked`]: checked, }, + tag?.className, className, hashId, ); - return wrapSSR(); + return wrapSSR( + , + ); }; export default CheckableTag; From 0f843cf1060a88c04294570d082391c2d397eff2 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 4 Sep 2023 09:23:47 +0800 Subject: [PATCH 167/318] chore: fix docs typo (#44604) --- CHANGELOG.zh-CN.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 3faac82200c9..8a3d6241a4db 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -22,8 +22,8 @@ tag: vVERSION - 🛠 针对 CSSInJS 加载 styles 大小进行了优化。 - 🛠 Notification 和 Message 组件只有在展示时才会插入对应样式。[#44488](https://github.com/ant-design/ant-design/pull/44488) - - 🛠 剥离 Tag 状态与预设颜色样式，现在只有当使用的使用才会生成它们。[#44512](https://github.com/ant-design/ant-design/pull/44512) - - 🛠 剥离 Button 紧凑模式样式，现在只有当使用了 Space.Compact 才会生成对应样式。[#44475](https://github.com/ant-design/ant-design/pull/44475) + - 🛠 剥离 Tag 状态与预设颜色样式，现在只有当使用的时候才会生成它们。[#44512](https://github.com/ant-design/ant-design/pull/44512) + - 🛠 剥离 Button 紧凑模式样式，现在只有当使用了 Space.Compact 的时候才会生成它们。[#44475](https://github.com/ant-design/ant-design/pull/44475) - 📦 移除 `@ant-design/icons` 依赖 `lodash/camelCase` 以优化 bundle size。[ant-design-icons#595](https://github.com/ant-design/ant-design-icons/pull/595) - Form - 🐞 修复 Form.Item 设置 `wrapperCol.span` 为 `0` 时，子元素不隐藏的问题。[#44485](https://github.com/ant-design/ant-design/pull/44485) [#44472](https://github.com/ant-design/ant-design/pull/44472) [@crazyair](https://github.com/crazyair) From 0396899ff6b087659e68001f8fcc1a412c354011 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: Mon, 4 Sep 2023 10:03:12 +0800 Subject: [PATCH 168/318] fix: Form.Item `noStyle` support validation status (#44576) * fix: FormItem.useStatus can not get status * fix: noStyle not patch style * fix: noStyle inhreit logic * docs: update docs * test: add test case * refactor: nostyle block status * fix: coverage --- components/form/FormItem/ItemHolder.tsx | 78 ++++--------- components/form/FormItem/StatusProvider.tsx | 90 +++++++++++++++ components/form/FormItem/index.tsx | 26 ++++- components/form/__tests__/index.test.tsx | 116 ++++++++++++++------ components/form/context.tsx | 11 +- components/form/index.en-US.md | 2 +- components/form/index.zh-CN.md | 2 +- components/form/util.ts | 31 ++++++ 8 files changed, 256 insertions(+), 100 deletions(-) create mode 100644 components/form/FormItem/StatusProvider.tsx diff --git a/components/form/FormItem/ItemHolder.tsx b/components/form/FormItem/ItemHolder.tsx index d338594325cb..1bd50eda2e6b 100644 --- a/components/form/FormItem/ItemHolder.tsx +++ b/components/form/FormItem/ItemHolder.tsx @@ -1,27 +1,19 @@ -import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; -import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; -import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; -import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; +import * as React from 'react'; import classNames from 'classnames'; import type { Meta } from 'rc-field-form/lib/interface'; -import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import isVisible from 'rc-util/lib/Dom/isVisible'; +import useLayoutEffect from 'rc-util/lib/hooks/useLayoutEffect'; import omit from 'rc-util/lib/omit'; -import * as React from 'react'; -import type { FormItemProps, ValidateStatus } from '.'; + +import type { FormItemProps } from '.'; import { Row } from '../../grid'; +import type { ReportMetaChange } from '../context'; +import { FormContext, NoStyleItemContext } from '../context'; import FormItemInput from '../FormItemInput'; import FormItemLabel from '../FormItemLabel'; -import type { FormItemStatusContextProps, ReportMetaChange } from '../context'; -import { FormContext, FormItemInputContext, NoStyleItemContext } from '../context'; import useDebounce from '../hooks/useDebounce'; - -const iconMap = { - success: CheckCircleFilled, - warning: ExclamationCircleFilled, - error: CloseCircleFilled, - validating: LoadingOutlined, -}; +import { getStatus } from '../util'; +import StatusProvider from './StatusProvider'; export interface ItemHolderProps extends FormItemProps { prefixCls: string; @@ -88,52 +80,14 @@ export default function ItemHolder(props: ItemHolderProps) { // ======================== Status ======================== const getValidateState = (isDebounce = false) => { - let status: ValidateStatus = ''; const _errors = isDebounce ? debounceErrors : meta.errors; const _warnings = isDebounce ? debounceWarnings : meta.warnings; - if (validateStatus !== undefined) { - status = validateStatus; - } else if (meta.validating) { - status = 'validating'; - } else if (_errors.length) { - status = 'error'; - } else if (_warnings.length) { - status = 'warning'; - } else if (meta.touched || (hasFeedback && meta.validated)) { - // success feedback should display when pass hasFeedback prop and current value is valid value - status = 'success'; - } - return status; + + return getStatus(_errors, _warnings, meta, '', hasFeedback, validateStatus); }; const mergedValidateStatus = getValidateState(); - const formItemStatusContext = React.useMemo(() => { - let feedbackIcon: React.ReactNode; - if (hasFeedback) { - const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus]; - feedbackIcon = IconNode ? ( - - - - ) : null; - } - - return { - status: mergedValidateStatus, - errors, - warnings, - hasFeedback, - feedbackIcon, - isFormItemInput: true, - }; - }, [mergedValidateStatus, hasFeedback]); - // ======================== Render ======================== const itemClassName = classNames(itemPrefixCls, className, rootClassName, { [`${itemPrefixCls}-with-help`]: hasHelp || debounceErrors.length || debounceWarnings.length, @@ -204,9 +158,17 @@ export default function ItemHolder(props: ItemHolderProps) { onErrorVisibleChanged={onErrorVisibleChanged} > - + {children} - + diff --git a/components/form/FormItem/StatusProvider.tsx b/components/form/FormItem/StatusProvider.tsx new file mode 100644 index 000000000000..d0704ae2d453 --- /dev/null +++ b/components/form/FormItem/StatusProvider.tsx @@ -0,0 +1,90 @@ +import * as React from 'react'; +import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; +import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; +import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; +import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; +import classNames from 'classnames'; +import type { Meta } from 'rc-field-form/lib/interface'; + +import type { ValidateStatus } from '.'; +import { FormItemInputContext, type FormItemStatusContextProps } from '../context'; +import { getStatus } from '../util'; + +const iconMap = { + success: CheckCircleFilled, + warning: ExclamationCircleFilled, + error: CloseCircleFilled, + validating: LoadingOutlined, +}; + +export interface StatusProviderProps { + children?: React.ReactNode; + validateStatus?: ValidateStatus; + prefixCls: string; + meta: Meta; + errors: React.ReactNode[]; + warnings: React.ReactNode[]; + hasFeedback?: boolean; + noStyle?: boolean; +} + +export default function StatusProvider({ + children, + errors, + warnings, + hasFeedback, + validateStatus, + prefixCls, + meta, + noStyle, +}: StatusProviderProps) { + const itemPrefixCls = `${prefixCls}-item`; + + const mergedValidateStatus = getStatus(errors, warnings, meta, null, hasFeedback, validateStatus); + + const { isFormItemInput: parentIsFormItemInput, status: parentStatus } = + React.useContext(FormItemInputContext); + + // ====================== Context ======================= + const formItemStatusContext = React.useMemo(() => { + let feedbackIcon: React.ReactNode; + if (hasFeedback) { + const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus]; + feedbackIcon = IconNode ? ( + + + + ) : null; + } + + let isFormItemInput: boolean | undefined = true; + let status: ValidateStatus = mergedValidateStatus || ''; + + // No style will follow parent context + if (noStyle) { + isFormItemInput = parentIsFormItemInput; + status = (mergedValidateStatus ?? parentStatus) || ''; + } + + return { + status, + errors, + warnings, + hasFeedback, + feedbackIcon, + isFormItemInput, + }; + }, [mergedValidateStatus, hasFeedback, noStyle, parentIsFormItemInput, parentStatus]); + + // ======================= Render ======================= + return ( + + {children} + + ); +} diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index c4f21056c6a6..1ee2872e8118 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -1,24 +1,26 @@ +import * as React from 'react'; import classNames from 'classnames'; import { Field, FieldContext, ListContext } from 'rc-field-form'; import type { FieldProps } from 'rc-field-form/lib/Field'; import type { Meta, NamePath } from 'rc-field-form/lib/interface'; import useState from 'rc-util/lib/hooks/useState'; import { supportRef } from 'rc-util/lib/ref'; -import * as React from 'react'; + import { cloneElement, isValidElement } from '../../_util/reactNode'; import warning from '../../_util/warning'; import { ConfigContext } from '../../config-provider'; +import { FormContext, NoStyleItemContext } from '../context'; +import type { FormInstance } from '../Form'; import type { FormItemInputProps } from '../FormItemInput'; import type { FormItemLabelProps, LabelTooltipType } from '../FormItemLabel'; -import { FormContext, NoStyleItemContext } from '../context'; +import useChildren from '../hooks/useChildren'; import useFormItemStatus from '../hooks/useFormItemStatus'; import useFrameState from '../hooks/useFrameState'; import useItemRef from '../hooks/useItemRef'; +import useStyle from '../style'; import { getFieldId, toArray } from '../util'; import ItemHolder from './ItemHolder'; -import useChildren from '../hooks/useChildren'; -import useStyle from '../style'; -import type { FormInstance } from '../Form'; +import StatusProvider from './StatusProvider'; const NAME_SPLIT = '__SPLIT__'; @@ -213,7 +215,19 @@ function InternalFormItem(props: FormItemProps): React.Rea isRequired?: boolean, ): React.ReactNode { if (noStyle && !hidden) { - return baseChildren; + return ( + + {baseChildren} + + ); } return ( diff --git a/components/form/__tests__/index.test.tsx b/components/form/__tests__/index.test.tsx index c6fb4b6131ae..2186cbdff7b4 100644 --- a/components/form/__tests__/index.test.tsx +++ b/components/form/__tests__/index.test.tsx @@ -1,14 +1,15 @@ -import classNames from 'classnames'; import type { ChangeEventHandler } from 'react'; import React, { version as ReactVersion, useEffect, useRef, useState } from 'react'; -import scrollIntoView from 'scroll-into-view-if-needed'; import type { ColProps } from 'antd/es/grid'; +import classNames from 'classnames'; +import scrollIntoView from 'scroll-into-view-if-needed'; + import type { FormInstance } from '..'; import Form from '..'; +import { resetWarned } from '../../_util/warning'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; import { fireEvent, pureRender, render, screen, waitFakeTimer } from '../../../tests/utils'; -import { resetWarned } from '../../_util/warning'; import Button from '../../button'; import Cascader from '../../cascader'; import Checkbox from '../../checkbox'; @@ -1407,38 +1408,91 @@ describe('Form', () => { expect(subFormInstance).toBe(formInstance); }); - it('noStyle should not affect status', () => { - const Demo: React.FC = () => ( - - - + + + {/* should follow parent status */} + + + + + + + {/* should follow child status */} - + - - - - + - - - - + + + + - - - ); - const { container } = render(); - expect(container.querySelector('.custom-select')?.className).not.toContain('status-error'); - expect(container.querySelector('.custom-select')?.className).not.toContain('in-form-item'); - expect(container.querySelector('.custom-select-b')?.className).toContain('status-error'); - expect(container.querySelector('.custom-select-b')?.className).toContain('in-form-item'); - expect(container.querySelector('.custom-select-c')?.className).toContain('status-error'); - expect(container.querySelector('.custom-select-c')?.className).toContain('in-form-item'); - expect(container.querySelector('.custom-select-d')?.className).toContain('status-warning'); - expect(container.querySelector('.custom-select-d')?.className).toContain('in-form-item'); + , + ); + + // Input and set back to empty + await changeValue(0, 'Once'); + await changeValue(0, ''); + + expect(container.querySelector('.ant-form-item-explain-error')?.textContent).toEqual( + "'first' is required", + ); + + expect(container.querySelectorAll('input')[0]).toHaveClass('ant-input-status-error'); + expect(container.querySelectorAll('input')[1]).not.toHaveClass('ant-input-status-error'); + }); }); it('should not affect Popup children style', () => { diff --git a/components/form/context.tsx b/components/form/context.tsx index 7a3f388b58f2..82b97d2bb247 100644 --- a/components/form/context.tsx +++ b/components/form/context.tsx @@ -1,10 +1,11 @@ +import type { PropsWithChildren, ReactNode } from 'react'; +import * as React from 'react'; +import { useContext, useMemo } from 'react'; import { FormProvider as RcFormProvider } from 'rc-field-form'; import type { FormProviderProps as RcFormProviderProps } from 'rc-field-form/lib/FormContext'; import type { Meta } from 'rc-field-form/lib/interface'; import omit from 'rc-util/lib/omit'; -import type { PropsWithChildren, ReactNode } from 'react'; -import * as React from 'react'; -import { useContext, useMemo } from 'react'; + import type { ColProps } from '../grid/col'; import type { FormInstance, RequiredMark } from './Form'; import type { ValidateStatus } from './FormItem'; @@ -65,6 +66,10 @@ export interface FormItemStatusContextProps { export const FormItemInputContext = React.createContext({}); +if (process.env.NODE_ENV !== 'production') { + FormItemInputContext.displayName = 'FormItemInputContext'; +} + export type NoFormStyleProps = PropsWithChildren<{ status?: boolean; override?: boolean; diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index f8dff3bcde46..05923f081d69 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -132,7 +132,7 @@ Form field component for data bidirectional binding, validation, layout, and so | messageVariables | The default validate field info | Record<string, string> | - | 4.7.0 | | name | Field name, support array | [NamePath](#namepath) | - | | | normalize | Normalize value from component value before passing to Form instance. Do not support async | (value, prevValue, prevValues) => any | - | | -| noStyle | No style for `true`, used as a pure field control | boolean | false | | +| noStyle | No style for `true`, used as a pure field control. Will inherit parent Form.Item `validateStatus` if self `validateStatus` not configured | boolean | false | | | preserve | Keep field value even when field removed | boolean | true | 4.4.0 | | required | Display required style. It will be generated by the validation rule | boolean | false | | | rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#rule)\[] | - | | diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 17e2b03de542..c64218fe9b5a 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -133,7 +133,7 @@ const validateMessages = { | messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 | | name | 字段名，支持数组 | [NamePath](#namepath) | - | | | normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | | -| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | | +| noStyle | 为 `true` 时不带样式，作为纯字段控件使用。当自身没有 `validateStatus` 而父元素存在有 `validateStatus` 的 Form.Item 会继承父元素的 `validateStatus` | boolean | false | | | preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | | | rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#rule)\[] | - | | diff --git a/components/form/util.ts b/components/form/util.ts index 857d5c66dee9..1b18bd552cd9 100644 --- a/components/form/util.ts +++ b/components/form/util.ts @@ -1,3 +1,6 @@ +import type { Meta } from 'rc-field-form/lib/interface'; + +import type { ValidateStatus } from './FormItem'; import type { InternalNamePath } from './interface'; // form item name black list. in form ,you can use form.id get the form item element. @@ -28,3 +31,31 @@ export function getFieldId(namePath: InternalNamePath, formName?: string): strin return isIllegalName ? `${defaultItemNamePrefixCls}_${mergedId}` : mergedId; } + +/** + * Get merged status by meta or passed `validateStatus`. + */ +export function getStatus( + errors: React.ReactNode[], + warnings: React.ReactNode[], + meta: Meta, + defaultValidateStatus: ValidateStatus | DefaultValue, + hasFeedback?: boolean, + validateStatus?: ValidateStatus, +): ValidateStatus | DefaultValue { + let status = defaultValidateStatus; + + if (validateStatus !== undefined) { + status = validateStatus; + } else if (meta.validating) { + status = 'validating'; + } else if (errors.length) { + status = 'error'; + } else if (warnings.length) { + status = 'warning'; + } else if (meta.touched || (hasFeedback && meta.validated)) { + // success feedback should display when pass hasFeedback prop and current value is valid value + status = 'success'; + } + return status; +} From 85dc67f1ccf9a1927c2753194a21806fc213f1cd Mon Sep 17 00:00:00 2001 From: shawn <67359137+xiaozisong@users.noreply.github.com> Date: Mon, 4 Sep 2023 11:07:39 +0800 Subject: [PATCH 169/318] feature: add itemSelectedFontColor token in Segemented Component (#44570) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feature: segemented新增component token * feature: segemented新增component token * Apply suggestions from code review Signed-off-by: MadCcc <1075746765@qq.com> --------- Signed-off-by: MadCcc <1075746765@qq.com> Co-authored-by: xiaozisong Co-authored-by: MadCcc <1075746765@qq.com> --- components/segmented/demo/componentToken.tsx | 1 + components/segmented/style/index.tsx | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/components/segmented/demo/componentToken.tsx b/components/segmented/demo/componentToken.tsx index 40d9a24750fe..b77d67f0d41b 100644 --- a/components/segmented/demo/componentToken.tsx +++ b/components/segmented/demo/componentToken.tsx @@ -11,6 +11,7 @@ export default () => ( itemHoverBg: 'rgba(0, 0, 0, 0.06)', itemSelectedBg: '#aaa', itemActiveBg: '#ccc', + itemSelectedColor: '#fff', }, }, }} diff --git a/components/segmented/style/index.tsx b/components/segmented/style/index.tsx index 513646984d5f..e6a41f1fc25b 100644 --- a/components/segmented/style/index.tsx +++ b/components/segmented/style/index.tsx @@ -29,6 +29,11 @@ export interface ComponentToken { * @descEN Background color of item when selected */ itemSelectedBg: string; + /** + * @desc 选项选中时文字颜色 + * @descEN Text color of item when selected + */ + itemSelectedColor: string; } interface SegmentedToken extends FullToken<'Segmented'> { @@ -109,7 +114,7 @@ const genSegmentedStyle: GenerateStyle = (token: SegmentedToken) '&-selected': { ...getItemSelectedStyle(token), - color: token.itemHoverColor, + color: token.itemSelectedColor, }, '&::after': { @@ -241,6 +246,7 @@ export default genComponentStyleHook( itemHoverBg: colorFillSecondary, itemSelectedBg: colorBgElevated, itemActiveBg: colorFill, + itemSelectedColor: colorText, }; }, ); From c29e91d1d0741b94100b6dd7db71b7a7a19432db 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: Mon, 4 Sep 2023 11:41:23 +0800 Subject: [PATCH 170/318] docs: Blog of extends of ConfigProvider (#44606) * docs: init * docs: cp theme blog * docs: demo back --- docs/blog/config-provider-style.en-US.md | 109 +++++++++++++++++++++++ docs/blog/config-provider-style.zh-CN.md | 109 +++++++++++++++++++++++ 2 files changed, 218 insertions(+) create mode 100644 docs/blog/config-provider-style.en-US.md create mode 100644 docs/blog/config-provider-style.zh-CN.md diff --git a/docs/blog/config-provider-style.en-US.md b/docs/blog/config-provider-style.en-US.md new file mode 100644 index 000000000000..3adddd85f062 --- /dev/null +++ b/docs/blog/config-provider-style.en-US.md @@ -0,0 +1,109 @@ +--- +title: Extends Theme +date: 2023-09-03 +author: zombieJ +--- + +Ant Design v5 provides the Design Token model, which supports custom algorithm to implement theme extension capabilities. For example, the compact theme itself does not carry color style algorithms, so it can be implemented by passing in multiple algorithms to achieve the compact theme under the light theme and the compact theme under the dark theme. + +Today, we now put down the algorithm part. Talk about how to extend the theme through ConfigProvider. + +## An Example + +This is an example of using ConfigProvider to extend the theme. You can view the complete code directly [here](https://github.com/zombieJ/antd-geek-theme-sample) ([online demo](https://zombiej.github.io/antd-geek-theme-sample/demos/theme)): + +![Geek Theme](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*i3kvR6-tozgAAAAAAAAAAAAADrJ8AQ/original) + +We will talk about how to use ConfigProvider to extend the theme in Ant Design. Of course, this article is not a CSS tutorial, so we will not introduce the style implementation above. If you are interested, you can directly look at the code instead. + +## Limitation of Token + +Design Token has powerful extension capabilities, but it also has limitations. For example, when Token does not support some configurations, developers become powerless. Even worse, some theme implementations cannot rely solely on a certain Token, which will become very difficult. For example, the gradient border colors in the above example cannot be implemented simply by `border-color`, it requires some CSS tricks. As mentioned in ["Happy Work Theme"](/docs/blog/happy-work), landing some specific implementations to Design Token will cause the code quality to deteriorate rapidly. Therefore, we need some other ways to extend the theme, which can uniformly modify the style of a component. And ConfigProvider is such an entry. + +## ConfigProvider + +In `5.7.0`, ConfigProvider supports the `className` and `style` configurations of all components. So we can easily extend beyond Token: + +```tsx + +``` + +And then we can go to add our style: + +```less +.my-button { + background: red; +} +``` + +This is actually strange. Since we can modify the style through `className`, why do we need ConfigProvider? We can just override the `.ant-btn` style. + +If your project is maintained by only one person, this is a good idea. But if your project is a large project, then you will find that this approach will cause style conflicts. Especially in the case of multi-person collaboration, modifying styles at will will result in unexpected results, and other people have to use more complex selectors to override your styles. ConfigProvider can solve this problem well. It can isolate styles inside ConfigProvider and will not affect other components. + +## Theme Extension + +Above example looks easy to implement, but in real scenarios you will find that there are some shortcomings for hierarchical structures. For example, the `ant-` prefix can be modified by ConfigProvider's `prefixCls`, so the prefix of the semantic structure may change from `ant-btn-icon` to `abc-btn-icon`. So it is not enough to override only by `my-button`: + +```less +.my-button { + // OPS. It's `abc-btn-icon` now. + .ant-btn-icon { + background: red; + } +} +``` + +So our extended theme also needs the ability to consume `prefixCls`. In CSS-in-JS, mixing `prefixCls` is easy. We can get `prefixCls` through the `getPrefixCls` method of ConfigProvider, and then mix it: + +```tsx +// This is an example of using `antd-style`, you can use any CSS-in-JS library. +import React from 'react'; +import { ConfigProvider } from 'antd'; +import { createStyles } from 'antd-style'; + +const useButtonStyle = () => { + const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext); + const btnPrefixCls = getPrefixCls('btn'); + + // Customize styles + return createStyles(({ css }) => ({ + btn: css` + background: red; + .${btnPrefixCls}-icon { + color: green; + } + `, + }))(); +}; + +function GeekProvider(props: { children?: React.ReactNode }) { + const { styles } = useButtonStyle(); + + return {props.children}; +} +``` + +Red Button + +It's also easy to extend for scenarios that need to inherit `className`: + +```tsx +function GeekProvider(props: { children?: React.ReactNode }) { + const { button } = React.useContext(ConfigProvider.ConfigContext); + const { styles } = useButtonStyle(); + + return ( + + {props.children} + + ); +} +``` + +## Summary + +Through ConfigProvider, we can further extend the theme. It can isolate styles well and avoid style conflicts. Let's try it out! diff --git a/docs/blog/config-provider-style.zh-CN.md b/docs/blog/config-provider-style.zh-CN.md new file mode 100644 index 000000000000..6935ec6cd385 --- /dev/null +++ b/docs/blog/config-provider-style.zh-CN.md @@ -0,0 +1,109 @@ +--- +title: 主题拓展 +date: 2023-09-03 +author: zombieJ +--- + +Ant Design v5 提供了 Design Token 模型，支持自定义算法实现主题拓展能力。例如 紧凑主题 本身并不携带颜色样式算法，所以可以通过传入多个算法的方式实现 亮色主题下的紧凑主题 以及 暗色主题下的紧凑主题。 + +而今天，我们现在放下算法部分。讲讲如何通过 ConfigProvider 来拓展主题。 + +## 一个例子 + +这是我通过 ConfigProvider 来拓展主题的示例，你可以直接在[这里](https://github.com/zombieJ/antd-geek-theme-sample)查看完整的代码（[在线演示](https://zombiej.github.io/antd-geek-theme-sample/demos/theme)）： + +![Geek Theme](https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*i3kvR6-tozgAAAAAAAAAAAAADrJ8AQ/original) + +以下会聊聊在 Ant Design 中如何使用 ConfigProvider 拓展主题。当然这篇文章并不是 CSS 的教程，所以不会去介绍上面的样式实现。如果有兴趣可以直接看看上面的代码地址。 + +## Token 之痛 + +Design Token 提供了非常强大的拓展能力，但是同样它也有限制。例如当 Token 并没有支持某些配置时，开发者就变得无能为力了。更有甚者，某些主题实现不能单纯依赖某种 Token 就会变得十分困难。例如在上面例子中的各种渐变边框色不能简单的通过 `border-color` 来实现，它需要一些 CSS 小技巧。而如[《快乐工作主题》](/docs/blog/happy-work)我们提到，将一些具体实现落地到 Design Token 会使得代码质量迅速劣化。因而我们需要一些其他的方式来拓展主题，可以统一的修改某个组件的样式。而 ConfigProvider 就是这样的一个入口。 + +## ConfigProvider + +在 `5.7.0` 中，ConfigProvider 支持了所有组件的 `className` 和 `style` 配置。因此我们可以很容易进行 Token 之外的拓展： + +```tsx + +``` + +接着我们就可以去添加我们的样式了： + +```less +.my-button { + background: red; +} +``` + +你会发现，这其实奇怪。既然我们可以通过 `className` 来修改样式，那么为什么还需要 ConfigProvider 呢？我们覆盖 `.ant-btn` 样式不就行了。 + +如果你的项目只由你一个人来维护，这是个不错的主意。但是如果你的项目是一个大型项目，那么你就会发现这样的做法会导致样式冲突。尤其在多人协作的情况下，随意修改样式会出现非预期的结果，而其他人为了覆盖你的样式不得不使用更加复杂的选择器。而 ConfigProvider 则可以很好的解决这个问题，它可以将样式隔离在 ConfigProvider 内部，不会影响到其他组件。 + +## 主题拓展 + +上面的示例看起来实现很容易，但是真实场景下你会发现对于层级结构而言不免也有一些不足。比如说 `ant-` 前缀可以通过 ConfigProvider 的 `prefixCls` 修改，所以语义化结构的前缀可能从 `ant-btn-icon` 变成 `abc-btn-icon`。那么仅通过 `my-button` 是不足以实现覆盖的： + +```less +.my-button { + // OPS. It's `abc-btn-icon` now. + .ant-btn-icon { + background: red; + } +} +``` + +所以我们的拓展主题也同样需要能够消费 `prefixCls` 的能力。而在 CSS-in-JS 中，混合 `prefixCls` 是很容易的事情。我们可以通过 ConfigProvider 的 `getPrefixCls` 方法来获取 `prefixCls`，然后进行混合： + +```tsx +// This is an example of using `antd-style`, you can use any CSS-in-JS library. +import React from 'react'; +import { ConfigProvider } from 'antd'; +import { createStyles } from 'antd-style'; + +const useButtonStyle = () => { + const { getPrefixCls } = React.useContext(ConfigProvider.ConfigContext); + const btnPrefixCls = getPrefixCls('btn'); + + // Customize styles + return createStyles(({ css }) => ({ + btn: css` + background: red; + .${btnPrefixCls}-icon { + color: green; + } + `, + }))(); +}; + +function GeekProvider(props: { children?: React.ReactNode }) { + const { styles } = useButtonStyle(); + + return {props.children}; +} +``` + +Red Button + +对需要继承 `className` 的场景，拓展也很容易： + +```tsx +function GeekProvider(props: { children?: React.ReactNode }) { + const { button } = React.useContext(ConfigProvider.ConfigContext); + const { styles } = useButtonStyle(); + + return ( + + {props.children} + + ); +} +``` + +## 总结 + +通过 ConfigProvider 可以进一步拓展主题，它可以很好的隔离样式，避免样式冲突。赶快动手试试吧！ From c7a09284d4f95af7abafc84295b2d7ff083b7946 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: Mon, 4 Sep 2023 14:10:39 +0800 Subject: [PATCH 171/318] docs: add faq about valuePropName (#44609) * docs: add faq about valuePropName * docs: more info * docs: clean up --- components/checkbox/index.en-US.md | 12 ++++++++++++ components/checkbox/index.zh-CN.md | 12 ++++++++++++ components/form/index.en-US.md | 12 +++++++++++- components/form/index.zh-CN.md | 12 +++++++++++- components/switch/index.en-US.md | 12 ++++++++++++ components/switch/index.zh-CN.md | 12 ++++++++++++ 6 files changed, 70 insertions(+), 2 deletions(-) diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md index d8e196c9226a..a68efc757a92 100644 --- a/components/checkbox/index.en-US.md +++ b/components/checkbox/index.en-US.md @@ -75,3 +75,15 @@ interface Option { ## Design Token + +## FAQ + +### Why not work in Form.Item? + +Form.Item default bind value to `value` property, but Checkbox value property is `checked`. You can use `valuePropName` to change bind property. + +```tsx | pure + + + +``` diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index d55074ba349b..0ee3ddd08d05 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -76,3 +76,15 @@ interface Option { ## 主题变量（Design Token） + +## FAQ + +### 为什么在 Form.Item 下不能绑定数据？ + +Form.Item 默认绑定值属性到 `value` 上，而 Checkbox 的值属性为 `checked`。你可以通过 `valuePropName` 来修改绑定的值属性。 + +```tsx | pure + + + +``` diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 05923f081d69..813009f91499 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -142,7 +142,7 @@ Form field component for data bidirectional binding, validation, layout, and so | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` configured | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | | | validateTrigger | When to validate the value of children node | string \| string\[] | `onChange` | | -| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | | +| valuePropName | Props of children node, for example, the prop of Switch or Checkbox is `checked`. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | | | wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#col) | - | | After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause: @@ -533,6 +533,16 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); ## FAQ +### Why can't Switch、Checkbox bind data? + +Form.Item default bind value to `value` prop, but Switch or Checkbox value prop is `checked`. You can use `valuePropName` to change bind value prop. + +```tsx | pure + + + +``` + ### Custom validator not working It may be caused by your `validator` if it has some errors that prevents `callback` to be called. You can use `async` instead or use `try...catch` to catch the error: diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index c64218fe9b5a..fcda2a1a9048 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -143,7 +143,7 @@ const validateMessages = { | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | | | validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` | | -| valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | | +| valuePropName | 子节点的值的属性，如 Switch、Checkbox 的是 `checked`。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | | | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid-cn#col) | - | | 被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果： @@ -532,6 +532,16 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); ## FAQ +### Switch、Checkbox 为什么不能绑定数据？ + +Form.Item 默认绑定值属性到 `value` 上，而 Switch、Checkbox 等组件的值属性为 `checked`。你可以通过 `valuePropName` 来修改绑定的值属性。 + +```tsx | pure + + + +``` + ### 自定义 validator 没有效果 这是由于你的 `validator` 有错误导致 `callback` 没有执行到。你可以选择通过 `async` 返回一个 promise 或者使用 `try...catch` 进行错误捕获： diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md index 2f4bca45aeef..b9e0c2bd604a 100644 --- a/components/switch/index.en-US.md +++ b/components/switch/index.en-US.md @@ -52,3 +52,15 @@ Common props ref：[Common props](/docs/react/common-props) ## Design Token + +## FAQ + +### Why not work in Form.Item? + +Form.Item default bind value to `value` property, but Switch value property is `checked`. You can use `valuePropName` to change bind property. + +```tsx | pure + + + +``` diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 386829a6a32a..f58c7a540782 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -53,3 +53,15 @@ demo: ## 主题变量（Design Token） + +## FAQ + +### 为什么在 Form.Item 下不能绑定数据？ + +Form.Item 默认绑定值属性到 `value` 上，而 Switch 的值属性为 `checked`。你可以通过 `valuePropName` 来修改绑定的值属性。 + +```tsx | pure + + + +``` From 56724cde28c5a6631e244d2db2cd94533630c53b Mon Sep 17 00:00:00 2001 From: Kyriewen <64134946+zbw-zbw@users.noreply.github.com> Date: Mon, 4 Sep 2023 14:45:03 +0800 Subject: [PATCH 172/318] fix(Upload): action buttons focus style leave after click it (#44594) * fix(upload): actions_btn_focus_styles * fix(upload): download button is still in focus state after being clicked * fix(upload): use focus-visible instead focus --------- Co-authored-by: zbw01218944 --- components/upload/style/list.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/upload/style/list.ts b/components/upload/style/list.ts index 98b4728f45a0..a986bd2a28ee 100644 --- a/components/upload/style/list.ts +++ b/components/upload/style/list.ts @@ -52,7 +52,7 @@ const genListStyle: GenerateStyle = (token) => { }, [` - ${actionCls}:focus, + ${actionCls}:focus-visible, &.picture ${actionCls} `]: { opacity: 1, From b284648f11dbf345cb4f092eb50f34fefa71fc79 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 4 Sep 2023 17:20:30 +0800 Subject: [PATCH 173/318] refactor: fix compiling (#44616) * refactor: fix compiling * perf: code logic update --- .../modal/components/ConfirmCancelBtn.tsx | 32 ++++++++--------- components/modal/shared.tsx | 36 +++++++++---------- 2 files changed, 32 insertions(+), 36 deletions(-) diff --git a/components/modal/components/ConfirmCancelBtn.tsx b/components/modal/components/ConfirmCancelBtn.tsx index a3dd1211c7a3..3364df4e93df 100644 --- a/components/modal/components/ConfirmCancelBtn.tsx +++ b/components/modal/components/ConfirmCancelBtn.tsx @@ -32,23 +32,21 @@ const ConfirmCancelBtn: FC = () => { onCancel, onConfirm, } = useContext(ModalContext); - return ( - mergedOkCancel && ( - { - close?.(...args); - onConfirm?.(false); - }} - autoFocus={autoFocusButton === 'cancel'} - buttonProps={cancelButtonProps} - prefixCls={`${rootPrefixCls}-btn`} - > - {cancelTextLocale} - - ) - ); + return mergedOkCancel ? ( + { + close?.(...args); + onConfirm?.(false); + }} + autoFocus={autoFocusButton === 'cancel'} + buttonProps={cancelButtonProps} + prefixCls={`${rootPrefixCls}-btn`} + > + {cancelTextLocale} + + ) : null; }; export default ConfirmCancelBtn; diff --git a/components/modal/shared.tsx b/components/modal/shared.tsx index 9e6cd41fccb4..a4c0f1a07171 100644 --- a/components/modal/shared.tsx +++ b/components/modal/shared.tsx @@ -68,25 +68,23 @@ export const Footer: React.FC< const btnCtxValueMemo = React.useMemo(() => btnCtxValue, [...Object.values(btnCtxValue)]); - const footerOriginNode = ( - <> - - - - ); - - return footer === undefined || typeof footer === 'function' ? ( - + let footerNode; + if (typeof footer === 'function' || typeof footer === 'undefined') { + footerNode = ( - {typeof footer === 'function' - ? footer(footerOriginNode, { - OkBtn: NormalOkBtn, - CancelBtn: NormalCancelBtn, - }) - : footerOriginNode} + + - - ) : ( - footer - ); + ); + if (typeof footer === 'function') { + footerNode = footer(footerNode, { + OkBtn: NormalOkBtn, + CancelBtn: NormalCancelBtn, + }); + } + } else { + footerNode = footer; + } + + return {footerNode}; }; From 54316f719cdfb8a31118bab7d0b578043e7f71f2 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 4 Sep 2023 17:58:51 +0800 Subject: [PATCH 174/318] test: disable timeout for puppeteer waitForSelector (#44611) --- package.json | 3 +-- tests/shared/imageTest.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/package.json b/package.json index bf4b91bb945c..a5223894ab90 100644 --- a/package.json +++ b/package.json @@ -194,11 +194,9 @@ "@types/jest-image-snapshot": "^6.1.0", "@types/jquery": "^3.5.14", "@types/lodash": "^4.14.139", - "@types/lz-string": "^1.3.34", "@types/node": "^20.0.0", "@types/prismjs": "^1.26.0", "@types/progress": "^2.0.5", - "@types/puppeteer": "^7.0.4", "@types/qs": "^6.9.7", "@types/react": "^18.0.0", "@types/react-copy-to-clipboard": "^5.0.0", @@ -272,6 +270,7 @@ "pretty-format": "^29.0.0", "prismjs": "^1.29.0", "progress": "^2.0.3", + "puppeteer": "^21.1.1", "qs": "^6.10.1", "rc-footer": "^0.6.8", "rc-tween-one": "^3.0.3", diff --git a/tests/shared/imageTest.tsx b/tests/shared/imageTest.tsx index 372e1a18fed6..ab723470fd65 100644 --- a/tests/shared/imageTest.tsx +++ b/tests/shared/imageTest.tsx @@ -75,16 +75,20 @@ export default function imageTest(component: React.ReactElement) { styleStr, ); - await page.waitForSelector('#end-of-screen'); + await page.waitForSelector('#end-of-screen', { + timeout: 0, + }); const image = await page.screenshot({ fullPage: true, + captureBeyondViewport: true, + optimizeForSpeed: true, }); expect(image).toMatchImageSnapshot(); MockDate.reset(); - page.removeListener('request', onRequestHandle); + page.off('request', onRequestHandle); }); } From f0c105d262094550bf5aca8c4d26156a52e865d8 Mon Sep 17 00:00:00 2001 From: Dunqing Date: Mon, 4 Sep 2023 19:27:20 +0800 Subject: [PATCH 175/318] feat: insert `use client` automatically at compilations instead of hardcode (#44608) * feat: remove the hardcode of `use client` * chore: update `@ant-design/tools` * test: update * fix: incorrect dictionary * chore: update dep * ci: check use client * chore: update ci * fix: should be LIB_DIR * ci: should only run in dist * chore: update check tsx files --- .github/workflows/test.yml | 10 +++++++++ components/affix/index.tsx | 2 -- components/alert/index.ts | 2 -- components/anchor/index.ts | 2 -- components/app/index.tsx | 2 -- components/auto-complete/index.tsx | 2 -- components/avatar/index.ts | 2 -- components/back-top/index.tsx | 2 -- components/badge/index.tsx | 2 -- components/breadcrumb/index.ts | 2 -- components/button/index.ts | 2 -- components/calendar/index.ts | 2 -- components/card/index.ts | 2 -- components/carousel/index.tsx | 2 -- components/cascader/index.tsx | 2 -- components/checkbox/index.ts | 2 -- components/col/index.ts | 2 -- components/collapse/index.ts | 2 -- components/color-picker/index.ts | 2 -- components/config-provider/index.tsx | 2 -- components/date-picker/index.ts | 2 -- components/descriptions/index.tsx | 2 -- components/divider/index.tsx | 2 -- components/drawer/index.tsx | 2 -- components/dropdown/index.ts | 2 -- components/empty/index.tsx | 2 -- components/float-button/index.ts | 2 -- components/form/index.ts | 2 -- components/grid/index.ts | 2 -- components/image/index.tsx | 2 -- components/index.ts | 2 -- components/input-number/index.tsx | 2 -- components/input/index.ts | 2 -- components/layout/index.ts | 2 -- components/list/index.tsx | 2 -- components/locale/index.tsx | 2 -- components/mentions/index.tsx | 2 -- components/menu/index.tsx | 2 -- components/message/index.tsx | 2 -- components/modal/index.tsx | 2 -- components/notification/index.tsx | 2 -- components/pagination/index.ts | 2 -- components/popconfirm/index.tsx | 2 -- components/popover/index.tsx | 2 -- components/progress/index.tsx | 2 -- components/qr-code/index.tsx | 2 -- components/radio/index.ts | 2 -- components/rate/index.tsx | 2 -- components/result/index.tsx | 2 -- components/row/index.tsx | 2 -- components/segmented/index.tsx | 2 -- components/select/index.tsx | 2 -- components/skeleton/index.tsx | 2 -- components/slider/index.tsx | 2 -- components/space/index.tsx | 2 -- components/spin/index.tsx | 2 -- components/statistic/index.tsx | 2 -- components/steps/index.tsx | 2 -- components/style/index.ts | 2 -- components/switch/index.tsx | 2 -- components/table/index.ts | 2 -- components/tabs/index.tsx | 2 -- components/tag/index.tsx | 2 -- components/theme/index.ts | 2 -- components/time-picker/index.tsx | 2 -- components/timeline/index.ts | 2 -- components/tooltip/index.tsx | 2 -- components/tour/index.tsx | 2 -- components/transfer/index.tsx | 2 -- components/tree-select/index.tsx | 2 -- components/tree/index.ts | 2 -- components/typography/index.ts | 2 -- components/upload/index.ts | 2 -- package.json | 2 +- tests/dekko/use-client.test.js | 32 ++++++++++++++++++++++++++++ 75 files changed, 43 insertions(+), 145 deletions(-) create mode 100644 tests/dekko/use-client.test.js diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 3eb5482b89f2..355bcfa2c1f8 100644 --- a/.github/workflows/test.yml +++ b/.github/workflows/test.yml @@ -188,6 +188,12 @@ jobs: if: ${{ matrix.module == 'dist' }} run: node ./tests/dekko/dist.test.js + - name: check use client + if: ${{ matrix.module == 'dist' }} + run: node ./tests/dekko/use-client.test.js + env: + LIB_DIR: dist + # dom test - name: dom test if: ${{ matrix.module == 'dom' }} @@ -286,6 +292,10 @@ jobs: - name: check run: node ./tests/dekko/lib.test.js + + - name: check use client + run: node ./tests/dekko/use-client.test.js + needs: setup compiled-module-test: diff --git a/components/affix/index.tsx b/components/affix/index.tsx index af3c9e3f54c0..9c37baff91c0 100644 --- a/components/affix/index.tsx +++ b/components/affix/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import React, { createRef, forwardRef, useContext } from 'react'; import classNames from 'classnames'; diff --git a/components/alert/index.ts b/components/alert/index.ts index 77038aea223c..5bb8dd2dbe8a 100644 --- a/components/alert/index.ts +++ b/components/alert/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type { AlertProps } from './Alert'; import InternalAlert from './Alert'; import ErrorBoundary from './ErrorBoundary'; diff --git a/components/anchor/index.ts b/components/anchor/index.ts index 6812dc61cbcc..8fa68a45ec9b 100644 --- a/components/anchor/index.ts +++ b/components/anchor/index.ts @@ -1,5 +1,3 @@ -'use client'; - import InternalAnchor from './Anchor'; import AnchorLink from './AnchorLink'; diff --git a/components/app/index.tsx b/components/app/index.tsx index 347dfe308661..56df12b953a8 100644 --- a/components/app/index.tsx +++ b/components/app/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import type { ReactNode } from 'react'; import React, { useContext } from 'react'; diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx index 872913ed6557..e3bc7bb0b75f 100755 --- a/components/auto-complete/index.tsx +++ b/components/auto-complete/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import type { BaseSelectRef } from 'rc-select'; import toArray from 'rc-util/lib/Children/toArray'; diff --git a/components/avatar/index.ts b/components/avatar/index.ts index 8f015a7cdc54..ea2fa4358021 100644 --- a/components/avatar/index.ts +++ b/components/avatar/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type { ForwardRefExoticComponent, RefAttributes } from 'react'; import type { AvatarProps } from './avatar'; import InternalAvatar from './avatar'; diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx index 7ade5fa225b6..8cfa5e2f174d 100644 --- a/components/back-top/index.tsx +++ b/components/back-top/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined'; import classNames from 'classnames'; import CSSMotion from 'rc-motion'; diff --git a/components/badge/index.tsx b/components/badge/index.tsx index 0af4dc831b4b..1784d2976693 100644 --- a/components/badge/index.tsx +++ b/components/badge/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classnames from 'classnames'; import CSSMotion from 'rc-motion'; import * as React from 'react'; diff --git a/components/breadcrumb/index.ts b/components/breadcrumb/index.ts index 90f3843f1e19..202800b19cc3 100644 --- a/components/breadcrumb/index.ts +++ b/components/breadcrumb/index.ts @@ -1,5 +1,3 @@ -'use client'; - import Breadcrumb from './Breadcrumb'; export type { BreadcrumbProps } from './Breadcrumb'; diff --git a/components/button/index.ts b/components/button/index.ts index bc706908779b..1283a0d6f662 100644 --- a/components/button/index.ts +++ b/components/button/index.ts @@ -1,5 +1,3 @@ -'use client'; - import Button from './button'; export type { SizeType as ButtonSize } from '../config-provider/SizeContext'; diff --git a/components/calendar/index.ts b/components/calendar/index.ts index 4f282637f672..9933d970d337 100644 --- a/components/calendar/index.ts +++ b/components/calendar/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type { Dayjs } from 'dayjs'; import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'; import type { CalendarProps } from './generateCalendar'; diff --git a/components/card/index.ts b/components/card/index.ts index c599a656db67..f3a1ccbe8e04 100644 --- a/components/card/index.ts +++ b/components/card/index.ts @@ -1,5 +1,3 @@ -'use client'; - import InternalCard from './Card'; import Grid from './Grid'; import Meta from './Meta'; diff --git a/components/carousel/index.tsx b/components/carousel/index.tsx index 7b5ddb0c470a..d7ba787c8ffc 100644 --- a/components/carousel/index.tsx +++ b/components/carousel/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import * as React from 'react'; import type { Settings } from '@ant-design/react-slick'; import SlickCarousel from '@ant-design/react-slick'; diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx index 91d31f887561..eb99c8a93fcd 100644 --- a/components/cascader/index.tsx +++ b/components/cascader/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import * as React from 'react'; import LeftOutlined from '@ant-design/icons/LeftOutlined'; import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; diff --git a/components/checkbox/index.ts b/components/checkbox/index.ts index 283aacfcead5..c2876bcdf4e9 100644 --- a/components/checkbox/index.ts +++ b/components/checkbox/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type * as React from 'react'; import type { CheckboxProps } from './Checkbox'; import InternalCheckbox from './Checkbox'; diff --git a/components/col/index.ts b/components/col/index.ts index 96021b9eaa62..413ae4d2be25 100644 --- a/components/col/index.ts +++ b/components/col/index.ts @@ -1,5 +1,3 @@ -'use client'; - import { Col, type ColProps, type ColSize } from '../grid'; export type { ColProps, ColSize }; diff --git a/components/collapse/index.ts b/components/collapse/index.ts index d5b6c97af491..9232a92c71c0 100644 --- a/components/collapse/index.ts +++ b/components/collapse/index.ts @@ -1,5 +1,3 @@ -'use client'; - import Collapse from './Collapse'; export type { CollapseProps } from './Collapse'; diff --git a/components/color-picker/index.ts b/components/color-picker/index.ts index 411285ce9489..8d6efd810e9d 100644 --- a/components/color-picker/index.ts +++ b/components/color-picker/index.ts @@ -1,5 +1,3 @@ -'use client'; - import ColorPicker from './ColorPicker'; export type { ColorPickerProps } from './ColorPicker'; diff --git a/components/config-provider/index.tsx b/components/config-provider/index.tsx index 4dab026c78cc..1e51b359c333 100644 --- a/components/config-provider/index.tsx +++ b/components/config-provider/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import { createTheme } from '@ant-design/cssinjs'; import IconContext from '@ant-design/icons/lib/components/Context'; import type { ValidateMessages } from 'rc-field-form/lib/interface'; diff --git a/components/date-picker/index.ts b/components/date-picker/index.ts index 31055d12d4fd..08ff863589d5 100755 --- a/components/date-picker/index.ts +++ b/components/date-picker/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type { Dayjs } from 'dayjs'; import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs'; import genPurePanel from '../_util/PurePanel'; diff --git a/components/descriptions/index.tsx b/components/descriptions/index.tsx index 6fc7edec2be3..3cc698837267 100644 --- a/components/descriptions/index.tsx +++ b/components/descriptions/index.tsx @@ -1,5 +1,3 @@ -'use client'; - /* eslint-disable react/no-array-index-key */ import classNames from 'classnames'; import * as React from 'react'; diff --git a/components/divider/index.tsx b/components/divider/index.tsx index 5e32f73dc86d..5140bd3aa636 100644 --- a/components/divider/index.tsx +++ b/components/divider/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import * as React from 'react'; import warning from '../_util/warning'; diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx index 8b737f885d4f..ebbe155d1ab6 100644 --- a/components/drawer/index.tsx +++ b/components/drawer/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import type { DrawerProps as RcDrawerProps } from 'rc-drawer'; import RcDrawer from 'rc-drawer'; diff --git a/components/dropdown/index.ts b/components/dropdown/index.ts index 994ae7f38992..a7f2ea466933 100644 --- a/components/dropdown/index.ts +++ b/components/dropdown/index.ts @@ -1,5 +1,3 @@ -'use client'; - import InternalDropdown from './dropdown'; import DropdownButton from './dropdown-button'; diff --git a/components/empty/index.tsx b/components/empty/index.tsx index fe242f139f05..5ed64457b30e 100644 --- a/components/empty/index.tsx +++ b/components/empty/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import * as React from 'react'; import { ConfigContext } from '../config-provider'; diff --git a/components/float-button/index.ts b/components/float-button/index.ts index 2e443547314f..663dda19f0c8 100644 --- a/components/float-button/index.ts +++ b/components/float-button/index.ts @@ -1,5 +1,3 @@ -'use client'; - import BackTop from './BackTop'; import FloatButton from './FloatButton'; import FloatButtonGroup from './FloatButtonGroup'; diff --git a/components/form/index.ts b/components/form/index.ts index 167f3fd07ca0..1438f9f4f99c 100644 --- a/components/form/index.ts +++ b/components/form/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type { Rule, RuleObject, RuleRender } from 'rc-field-form/lib/interface'; import warning from '../_util/warning'; import ErrorList, { type ErrorListProps } from './ErrorList'; diff --git a/components/grid/index.ts b/components/grid/index.ts index d8b5a655bdd4..c8310c63c7df 100644 --- a/components/grid/index.ts +++ b/components/grid/index.ts @@ -1,5 +1,3 @@ -'use client'; - import Col from './col'; import useInternalBreakpoint from './hooks/useBreakpoint'; import Row from './row'; diff --git a/components/image/index.tsx b/components/image/index.tsx index e844cc069ccd..3d60dcfb85a0 100644 --- a/components/image/index.tsx +++ b/components/image/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import * as React from 'react'; import EyeOutlined from '@ant-design/icons/EyeOutlined'; import classNames from 'classnames'; diff --git a/components/index.ts b/components/index.ts index 0feaaf2b59ff..c88e98b25b93 100644 --- a/components/index.ts +++ b/components/index.ts @@ -1,5 +1,3 @@ -'use client'; - export type { Breakpoint } from './_util/responsiveObserver'; export { default as Affix } from './affix'; export type { AffixProps } from './affix'; diff --git a/components/input-number/index.tsx b/components/input-number/index.tsx index 3d6aa42af761..31c25e5bcce6 100644 --- a/components/input-number/index.tsx +++ b/components/input-number/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import DownOutlined from '@ant-design/icons/DownOutlined'; import UpOutlined from '@ant-design/icons/UpOutlined'; import classNames from 'classnames'; diff --git a/components/input/index.ts b/components/input/index.ts index e82a0cf4b2ca..e0da843930a7 100644 --- a/components/input/index.ts +++ b/components/input/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type * as React from 'react'; import Group from './Group'; import type { InputProps, InputRef } from './Input'; diff --git a/components/layout/index.ts b/components/layout/index.ts index a07f39a0b93d..1cd8a7a70e3c 100644 --- a/components/layout/index.ts +++ b/components/layout/index.ts @@ -1,5 +1,3 @@ -'use client'; - import InternalLayout, { Content, Footer, Header } from './layout'; import Sider from './Sider'; diff --git a/components/list/index.tsx b/components/list/index.tsx index 4ce8fedb58fc..94c6232b8c79 100644 --- a/components/list/index.tsx +++ b/components/list/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; // eslint-disable-next-line import/no-named-as-default import * as React from 'react'; diff --git a/components/locale/index.tsx b/components/locale/index.tsx index 4d4c356ff86a..b37de4f6bb78 100644 --- a/components/locale/index.tsx +++ b/components/locale/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import type { ValidateMessages } from 'rc-field-form/lib/interface'; import * as React from 'react'; import warning from '../_util/warning'; diff --git a/components/mentions/index.tsx b/components/mentions/index.tsx index 2d221fbabe81..a05c0c818c9b 100644 --- a/components/mentions/index.tsx +++ b/components/mentions/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import RcMentions from 'rc-mentions'; import type { diff --git a/components/menu/index.tsx b/components/menu/index.tsx index 623c889ded4c..d745f8048649 100644 --- a/components/menu/index.tsx +++ b/components/menu/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import type { MenuRef as RcMenuRef } from 'rc-menu'; import { ItemGroup } from 'rc-menu'; import * as React from 'react'; diff --git a/components/message/index.tsx b/components/message/index.tsx index d3216af7fccc..a93efca4162e 100755 --- a/components/message/index.tsx +++ b/components/message/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import * as React from 'react'; import { render } from 'rc-util/lib/React/render'; diff --git a/components/modal/index.tsx b/components/modal/index.tsx index 65a0a60b4342..e28acd113878 100644 --- a/components/modal/index.tsx +++ b/components/modal/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import type { ModalStaticFunctions } from './confirm'; import confirm, { modalGlobalConfig, diff --git a/components/notification/index.tsx b/components/notification/index.tsx index 21c70ba69775..a52d60b03978 100755 --- a/components/notification/index.tsx +++ b/components/notification/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import * as React from 'react'; import { render } from 'rc-util/lib/React/render'; diff --git a/components/pagination/index.ts b/components/pagination/index.ts index 63185d14d7d7..3ea001b0c49a 100644 --- a/components/pagination/index.ts +++ b/components/pagination/index.ts @@ -1,5 +1,3 @@ -'use client'; - import Pagination from './Pagination'; export type { PaginationConfig, PaginationProps } from './Pagination'; diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx index c8ec0aec5a2c..5e3e8b5661ed 100644 --- a/components/popconfirm/index.tsx +++ b/components/popconfirm/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; import classNames from 'classnames'; import KeyCode from 'rc-util/lib/KeyCode'; diff --git a/components/popover/index.tsx b/components/popover/index.tsx index af3f2e5f89f8..42a7ddf9f68a 100644 --- a/components/popover/index.tsx +++ b/components/popover/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import * as React from 'react'; import type { RenderFunction } from '../_util/getRenderPropValue'; diff --git a/components/progress/index.tsx b/components/progress/index.tsx index 4311c803bec8..94570e886a37 100644 --- a/components/progress/index.tsx +++ b/components/progress/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import Progress from './progress'; export type { ProgressAriaProps, ProgressProps } from './progress'; diff --git a/components/qr-code/index.tsx b/components/qr-code/index.tsx index 79f85f29787d..2801bbe1050e 100644 --- a/components/qr-code/index.tsx +++ b/components/qr-code/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import ReloadOutlined from '@ant-design/icons/ReloadOutlined'; import classNames from 'classnames'; import { QRCodeCanvas, QRCodeSVG } from 'qrcode.react'; diff --git a/components/radio/index.ts b/components/radio/index.ts index cb25df7b379f..bae4f15edeac 100644 --- a/components/radio/index.ts +++ b/components/radio/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type * as React from 'react'; import Group from './group'; import type { RadioProps } from './interface'; diff --git a/components/rate/index.tsx b/components/rate/index.tsx index 82b74dd202fa..f813658466c3 100644 --- a/components/rate/index.tsx +++ b/components/rate/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import StarFilled from '@ant-design/icons/StarFilled'; import classNames from 'classnames'; import RcRate from 'rc-rate'; diff --git a/components/result/index.tsx b/components/result/index.tsx index 07fe5028ad6a..f657dd7f2a28 100644 --- a/components/result/index.tsx +++ b/components/result/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import CheckCircleFilled from '@ant-design/icons/CheckCircleFilled'; import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled'; import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled'; diff --git a/components/row/index.tsx b/components/row/index.tsx index b55581603347..81cf63c1f297 100644 --- a/components/row/index.tsx +++ b/components/row/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import { Row, type RowProps } from '../grid'; export type { RowProps }; diff --git a/components/segmented/index.tsx b/components/segmented/index.tsx index 3f5391328c51..e607be06f1f5 100644 --- a/components/segmented/index.tsx +++ b/components/segmented/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import type { SegmentedLabeledOption as RcSegmentedLabeledOption, diff --git a/components/select/index.tsx b/components/select/index.tsx index ac07efdafa91..65fadbd0dbbb 100755 --- a/components/select/index.tsx +++ b/components/select/index.tsx @@ -1,5 +1,3 @@ -'use client'; - // TODO: 4.0 - codemod should help to change `filterOption` to support node props. import classNames from 'classnames'; import type { BaseSelectRef, SelectProps as RcSelectProps } from 'rc-select'; diff --git a/components/skeleton/index.tsx b/components/skeleton/index.tsx index a37a3c933029..14c93f4d97ad 100644 --- a/components/skeleton/index.tsx +++ b/components/skeleton/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import Skeleton from './Skeleton'; export type { SkeletonProps } from './Skeleton'; diff --git a/components/slider/index.tsx b/components/slider/index.tsx index 51f13af2a701..719f3cf583f5 100644 --- a/components/slider/index.tsx +++ b/components/slider/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import type { SliderProps as RcSliderProps } from 'rc-slider'; import RcSlider from 'rc-slider'; diff --git a/components/space/index.tsx b/components/space/index.tsx index 6bfe74fd15d6..4ffd25b5276c 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import toArray from 'rc-util/lib/Children/toArray'; import * as React from 'react'; diff --git a/components/spin/index.tsx b/components/spin/index.tsx index 24de3fb8cae4..209d07631f1e 100644 --- a/components/spin/index.tsx +++ b/components/spin/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import omit from 'rc-util/lib/omit'; import * as React from 'react'; diff --git a/components/statistic/index.tsx b/components/statistic/index.tsx index c55cd80f62de..dfe3cd00ac13 100644 --- a/components/statistic/index.tsx +++ b/components/statistic/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import type { CountdownProps } from './Countdown'; import Countdown from './Countdown'; import type { StatisticProps } from './Statistic'; diff --git a/components/steps/index.tsx b/components/steps/index.tsx index 8be96627e251..62f165604e57 100644 --- a/components/steps/index.tsx +++ b/components/steps/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import CheckOutlined from '@ant-design/icons/CheckOutlined'; import CloseOutlined from '@ant-design/icons/CloseOutlined'; import classNames from 'classnames'; diff --git a/components/style/index.ts b/components/style/index.ts index 7e9eb6c8e379..43a975d37dda 100644 --- a/components/style/index.ts +++ b/components/style/index.ts @@ -1,5 +1,3 @@ -'use client'; - /* eslint-disable import/prefer-default-export */ import type { CSSObject } from '@ant-design/cssinjs'; import type { AliasToken, DerivativeToken } from '../theme/internal'; diff --git a/components/switch/index.tsx b/components/switch/index.tsx index 7086be661f2a..119a2bfd21fd 100755 --- a/components/switch/index.tsx +++ b/components/switch/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import LoadingOutlined from '@ant-design/icons/LoadingOutlined'; import classNames from 'classnames'; import RcSwitch from 'rc-switch'; diff --git a/components/table/index.ts b/components/table/index.ts index 8edeb0c04851..36f439e0b83e 100644 --- a/components/table/index.ts +++ b/components/table/index.ts @@ -1,5 +1,3 @@ -'use client'; - import { type TablePaginationConfig, type TableProps } from './InternalTable'; import Table from './Table'; diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx index afe8ee6e72ad..78b59c849791 100755 --- a/components/tabs/index.tsx +++ b/components/tabs/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import CloseOutlined from '@ant-design/icons/CloseOutlined'; import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined'; import PlusOutlined from '@ant-design/icons/PlusOutlined'; diff --git a/components/tag/index.tsx b/components/tag/index.tsx index d06a0bae1c81..941d9b73a87e 100644 --- a/components/tag/index.tsx +++ b/components/tag/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import * as React from 'react'; import CloseOutlined from '@ant-design/icons/CloseOutlined'; import classNames from 'classnames'; diff --git a/components/theme/index.ts b/components/theme/index.ts index a7d15abf12cc..481dd08d8ea5 100644 --- a/components/theme/index.ts +++ b/components/theme/index.ts @@ -1,5 +1,3 @@ -'use client'; - /* eslint-disable import/prefer-default-export */ import getDesignToken from './getDesignToken'; import type { GlobalToken, MappingAlgorithm } from './interface'; diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx index 2962158edc77..cf5283eb1182 100644 --- a/components/time-picker/index.tsx +++ b/components/time-picker/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import type { Dayjs } from 'dayjs'; import * as React from 'react'; import genPurePanel from '../_util/PurePanel'; diff --git a/components/timeline/index.ts b/components/timeline/index.ts index bef127a48cba..236af062115c 100644 --- a/components/timeline/index.ts +++ b/components/timeline/index.ts @@ -1,5 +1,3 @@ -'use client'; - import Timeline from './Timeline'; export type { TimelineProps } from './Timeline'; diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx index 537a0de25933..3bff61055e00 100644 --- a/components/tooltip/index.tsx +++ b/components/tooltip/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import type { BuildInPlacements } from '@rc-component/trigger'; import classNames from 'classnames'; import RcTooltip from 'rc-tooltip'; diff --git a/components/tour/index.tsx b/components/tour/index.tsx index 7020e1b3e658..3f4c5c9f0762 100644 --- a/components/tour/index.tsx +++ b/components/tour/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import RCTour from '@rc-component/tour'; import classNames from 'classnames'; import React, { useContext } from 'react'; diff --git a/components/transfer/index.tsx b/components/transfer/index.tsx index 4839f72e5fc9..34618e30ea68 100644 --- a/components/transfer/index.tsx +++ b/components/transfer/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import type { ChangeEvent, CSSProperties } from 'react'; import React, { useCallback, useContext } from 'react'; diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx index 7391c9993e37..cf36fea1f81f 100644 --- a/components/tree-select/index.tsx +++ b/components/tree-select/index.tsx @@ -1,5 +1,3 @@ -'use client'; - import classNames from 'classnames'; import type { BaseSelectRef } from 'rc-select'; import type { Placement } from 'rc-select/lib/BaseSelect'; diff --git a/components/tree/index.ts b/components/tree/index.ts index cab82d96819f..dc7b1bbf5de2 100644 --- a/components/tree/index.ts +++ b/components/tree/index.ts @@ -1,5 +1,3 @@ -'use client'; - import type RcTree from 'rc-tree'; import type { BasicDataNode } from 'rc-tree'; import { TreeNode } from 'rc-tree'; diff --git a/components/typography/index.ts b/components/typography/index.ts index fdae240e06ba..9f9f3084cb7e 100644 --- a/components/typography/index.ts +++ b/components/typography/index.ts @@ -1,5 +1,3 @@ -'use client'; - import Link from './Link'; import Paragraph from './Paragraph'; import Text from './Text'; diff --git a/components/upload/index.ts b/components/upload/index.ts index 6546d8da307c..98a5a8b20095 100644 --- a/components/upload/index.ts +++ b/components/upload/index.ts @@ -1,5 +1,3 @@ -'use client'; - import Dragger from './Dragger'; import type { UploadProps } from './Upload'; import InternalUpload, { LIST_IGNORE } from './Upload'; diff --git a/package.json b/package.json index a5223894ab90..d27021711d96 100644 --- a/package.json +++ b/package.json @@ -161,7 +161,7 @@ "devDependencies": { "@ant-design/compatible": "^5.1.2", "@ant-design/happy-work-theme": "^1.0.0", - "@ant-design/tools": "^17.0.0", + "@ant-design/tools": "^17.3.1", "@antv/g6": "^4.8.13", "@argos-ci/core": "^0.9.0", "@babel/eslint-plugin": "^7.19.1", diff --git a/tests/dekko/use-client.test.js b/tests/dekko/use-client.test.js new file mode 100644 index 000000000000..99f6aae9fd34 --- /dev/null +++ b/tests/dekko/use-client.test.js @@ -0,0 +1,32 @@ +const $ = require('dekko'); +const chalk = require('chalk'); +const fs = require('fs'); + +const includeUseClient = (filename) => + fs.readFileSync(filename).toString().includes('"use client"'); + +if (process.env.LIB_DIR === 'dist') { + $('dist/*') + .isFile() + .assert("doesn't contain use client", (filename) => !includeUseClient(filename)); +} else { + $('{es,lib}/index.js') + .isFile() + .assert('contain use client', (filename) => includeUseClient(filename)); + + $('{es,lib}/*/index.js') + .isFile() + .assert('contain use client', (filename) => includeUseClient(filename)); + + // check tsx files + $('{es,lib}/typography/*.js') + .isFile() + .assert('contain use client', (filename) => includeUseClient(filename)); + + $('{es,lib}/typography/Base/*.js') + .isFile() + .assert('contain use client', (filename) => includeUseClient(filename)); +} + +// eslint-disable-next-line no-console +console.log(chalk.green('✨ use client passed!')); From 4c91896abb7093754951e20f5aa489d215876163 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 4 Sep 2023 19:59:02 +0800 Subject: [PATCH 176/318] refactor: use token instead of constant in size (#44598) * refactor: use token instead of constant in size * fix: fix * fix: fix * test: update snap * fix: update snap * test: fix test case * fix: fix * fix: fix * fix: fix * fix: fix tast cov * fix: fix test case * chore: add comment * chore: add comment * chore: add comment * chore: rename * chore: rename * fix: fix test case * fix: fix test case * fix: fix * fix: fix * fix: fix * fix: fix * test: add test case * fix: fix * test: update snap * fix: fix * fix: fix * test: update * test: update * chore: fix * fix: type * test: remove test --- components/space/Item.tsx | 5 +- components/space/__tests__/gap.test.tsx | 37 ++++++++---- components/space/__tests__/index.test.tsx | 58 ++++++------------- components/space/context.ts | 9 ++- components/space/demo/base.tsx | 2 +- components/space/index.tsx | 70 ++++++++++++----------- components/space/style/compact.tsx | 1 + components/space/style/index.tsx | 45 ++++++++++++++- components/space/utils.ts | 27 +++++++++ 9 files changed, 162 insertions(+), 92 deletions(-) create mode 100644 components/space/utils.ts diff --git a/components/space/Item.tsx b/components/space/Item.tsx index cf32a9e639dc..cec88066062f 100644 --- a/components/space/Item.tsx +++ b/components/space/Item.tsx @@ -1,5 +1,7 @@ import * as React from 'react'; + import { SpaceContext } from './context'; +import type { SpaceContextType } from './context'; export interface ItemProps { className: string; @@ -23,7 +25,7 @@ const Item: React.FC = ({ style: customStyle, }) => { const { horizontalSize, verticalSize, latestIndex, supportFlexGap } = - React.useContext(SpaceContext); + React.useContext(SpaceContext); let style: React.CSSProperties = {}; @@ -34,6 +36,7 @@ const Item: React.FC = ({ } } else { style = { + // Compatible IE, cannot use `marginInlineEnd` ...(index < latestIndex && { [marginDirection]: horizontalSize / (split ? 2 : 1) }), ...(wrap && { paddingBottom: verticalSize }), }; diff --git a/components/space/__tests__/gap.test.tsx b/components/space/__tests__/gap.test.tsx index 34a8fd956289..2fc7e0063e33 100644 --- a/components/space/__tests__/gap.test.tsx +++ b/components/space/__tests__/gap.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import Space from '..'; import { render } from '../../../tests/utils'; @@ -16,15 +17,31 @@ describe('flex gap', () => { , ); - expect( - container.querySelector('div.ant-space')?.style[ - 'column-gap' as keyof CSSStyleDeclaration - ], - ).toBe('8px'); - expect( - container.querySelector('div.ant-space')?.style[ - 'row-gap' as keyof CSSStyleDeclaration - ], - ).toBe('8px'); + expect(container.querySelector('div.ant-space')).toHaveClass( + 'ant-space-gap-row-small', + ); + expect(container.querySelector('div.ant-space')).toHaveClass( + 'ant-space-gap-col-small', + ); + }); + + it('should size work', () => { + const { container } = render( + + test + , + ); + const element = container.querySelector('div.ant-space'); + expect(element).toHaveStyle({ rowGap: '10px', columnGap: '10px' }); + }); + + it('should NaN work', () => { + expect(() => { + render( + + test + , + ); + }).not.toThrow(); }); }); diff --git a/components/space/__tests__/index.test.tsx b/components/space/__tests__/index.test.tsx index de758e70ed71..74b54836cc31 100644 --- a/components/space/__tests__/index.test.tsx +++ b/components/space/__tests__/index.test.tsx @@ -1,5 +1,6 @@ /* eslint-disable no-console */ import React, { useState } from 'react'; + import Space from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -66,25 +67,9 @@ describe('Space', () => { , ); - expect(container.querySelector('div.ant-space-item')?.style.marginRight).toBe( - '10px', - ); - expect( - container.querySelectorAll('div.ant-space-item')[1]?.style.marginRight, - ).toBe(''); - }); - - it('should render width size 0', () => { - const { container } = render( - - 1 - 2 - , - ); - - expect(container.querySelector('div.ant-space-item')?.style.marginRight).toBe( - '0px', - ); + const items = container.querySelectorAll('div.ant-space-item'); + expect(items[0]?.style.marginRight).toBe('10px'); + expect(items[1]?.style.marginRight).toBe(''); }); it('should render vertical space width customize size', () => { @@ -95,12 +80,9 @@ describe('Space', () => { , ); - expect(container.querySelector('div.ant-space-item')?.style.marginBottom).toBe( - '10px', - ); - expect( - container.querySelectorAll('div.ant-space-item')[1]?.style.marginBottom, - ).toBe(''); + const items = container.querySelectorAll('div.ant-space-item'); + expect(items[0]?.style.marginBottom).toBe('10px'); + expect(items[1]?.style.marginBottom).toBe(''); }); it('should render correct with children', () => { @@ -199,16 +181,15 @@ describe('Space', () => { }); it('should render the hidden empty item wrapper', () => { - const Null = () => null; + const Null: React.FC = () => null; const { container } = render( , ); - const item = container.querySelector('div.ant-space-item') as HTMLElement; - - expect(item).toBeEmptyDOMElement(); - expect(getComputedStyle(item).display).toBe('none'); + const element = container.querySelector('div.ant-space-item')!; + expect(element).toBeEmptyDOMElement(); + expect(getComputedStyle(element).display).toBe('none'); }); it('should ref work', () => { @@ -231,25 +212,18 @@ describe('Space', () => { , ); - expect(container.querySelector('.ant-space-item.test-classNames')).toBeTruthy(); + expect(container.querySelector('.ant-space-item.test-classNames')).toBeTruthy(); }); it('should styles work', () => { const { container } = render( - + Text1 Text2 , ); - - expect(container.querySelector('.ant-space-item')?.getAttribute('style')).toEqual( - 'margin-right: 8px; color: red;', - ); + expect( + container.querySelector('.ant-space-item')?.getAttribute('style'), + ).toEqual('margin-right: 8px; color: red;'); }); }); diff --git a/components/space/context.ts b/components/space/context.ts index eba94e542a52..2ce119be6f8c 100644 --- a/components/space/context.ts +++ b/components/space/context.ts @@ -1,6 +1,13 @@ import React from 'react'; -export const SpaceContext = React.createContext({ +export interface SpaceContextType { + latestIndex: number; + horizontalSize: number; + verticalSize: number; + supportFlexGap: boolean; +} + +export const SpaceContext = React.createContext({ latestIndex: 0, horizontalSize: 0, verticalSize: 0, diff --git a/components/space/demo/base.tsx b/components/space/demo/base.tsx index 59b18a556f6b..fec82b5f4030 100644 --- a/components/space/demo/base.tsx +++ b/components/space/demo/base.tsx @@ -1,5 +1,5 @@ -import { UploadOutlined } from '@ant-design/icons'; import React from 'react'; +import { UploadOutlined } from '@ant-design/icons'; import { Button, Popconfirm, Space, Upload } from 'antd'; const App: React.FC = () => ( diff --git a/components/space/index.tsx b/components/space/index.tsx index 6bfe74fd15d6..17efa7c1d67b 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -1,16 +1,19 @@ 'use client'; +import * as React from 'react'; import classNames from 'classnames'; import toArray from 'rc-util/lib/Children/toArray'; -import * as React from 'react'; + import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; import { ConfigContext } from '../config-provider'; import type { SizeType } from '../config-provider/SizeContext'; +import { useToken } from '../theme/internal'; import Compact from './Compact'; -import Item from './Item'; - import { SpaceContextProvider } from './context'; +import type { SpaceContextType } from './context'; +import Item from './Item'; import useStyle from './style'; +import { getRealSize, isPresetSize } from './utils'; export { SpaceContext } from './context'; @@ -31,16 +34,6 @@ export interface SpaceProps extends React.HTMLAttributes { styles?: { item: React.CSSProperties }; } -const spaceSize = { - small: 8, - middle: 16, - large: 24, -}; - -function getNumberSize(size: SpaceSize) { - return typeof size === 'string' ? spaceSize[size] : size || 0; -} - const Space = React.forwardRef((props, ref) => { const { getPrefixCls, space, direction: directionConfig } = React.useContext(ConfigContext); @@ -60,23 +53,29 @@ const Space = React.forwardRef((props, ref) => { ...otherProps } = props; - const supportFlexGap = useFlexGapSupport(); + const [, token] = useToken(); - const [horizontalSize, verticalSize] = React.useMemo( - () => - ((Array.isArray(size) ? size : [size, size]) as [SpaceSize, SpaceSize]).map((item) => - getNumberSize(item), - ), - [size], - ); + const spaceSizeMap = { + small: token.paddingXS, + middle: token.padding, + large: token.paddingLG, + } as const; + + const [horizontalSize, verticalSize] = Array.isArray(size) ? size : ([size, size] as const); + + const realHorizontalSize = getRealSize(spaceSizeMap, horizontalSize); + + const realVerticalSize = getRealSize(spaceSizeMap, verticalSize); const childNodes = toArray(children, { keepEmpty: true }); + const supportFlexGap = useFlexGapSupport(); + const mergedAlign = align === undefined && direction === 'horizontal' ? 'center' : align; const prefixCls = getPrefixCls('space', customizePrefixCls); const [wrapSSR, hashId] = useStyle(prefixCls); - const cn = classNames( + const cls = classNames( prefixCls, space?.className, hashId, @@ -84,6 +83,8 @@ const Space = React.forwardRef((props, ref) => { { [`${prefixCls}-rtl`]: directionConfig === 'rtl', [`${prefixCls}-align-${mergedAlign}`]: mergedAlign, + [`${prefixCls}-gap-row-${verticalSize}`]: supportFlexGap && isPresetSize(verticalSize), + [`${prefixCls}-gap-col-${horizontalSize}`]: supportFlexGap && isPresetSize(horizontalSize), }, className, rootClassName, @@ -98,7 +99,7 @@ const Space = React.forwardRef((props, ref) => { // Calculate latest one let latestIndex = 0; - const nodes = childNodes.map((child, i) => { + const nodes = childNodes.map((child, i) => { if (child !== null && child !== undefined) { latestIndex = i; } @@ -121,8 +122,13 @@ const Space = React.forwardRef((props, ref) => { ); }); - const spaceContext = React.useMemo( - () => ({ horizontalSize, verticalSize, latestIndex, supportFlexGap }), + const spaceContext = React.useMemo( + () => ({ + horizontalSize: realHorizontalSize, + verticalSize: realVerticalSize, + latestIndex, + supportFlexGap, + }), [horizontalSize, verticalSize, latestIndex, supportFlexGap], ); @@ -138,24 +144,20 @@ const Space = React.forwardRef((props, ref) => { // Patch for gap not support if (!supportFlexGap) { - gapStyle.marginBottom = -verticalSize; + gapStyle.marginBottom = -realVerticalSize; } } if (supportFlexGap) { - gapStyle.columnGap = horizontalSize; - gapStyle.rowGap = verticalSize; + gapStyle.columnGap = realHorizontalSize; + gapStyle.rowGap = realVerticalSize; } return wrapSSR(
{nodes} diff --git a/components/space/style/compact.tsx b/components/space/style/compact.tsx index d1027402dbd3..12590769cce5 100644 --- a/components/space/style/compact.tsx +++ b/components/space/style/compact.tsx @@ -1,4 +1,5 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; + /** Component only token. Which will handle additional calculation of alias token */ export interface ComponentToken { // Component token here diff --git a/components/space/style/index.tsx b/components/space/style/index.tsx index a83d8da9142c..c89ed08af4a0 100644 --- a/components/space/style/index.tsx +++ b/components/space/style/index.tsx @@ -1,5 +1,5 @@ import type { FullToken, GenerateStyle } from '../../theme/internal'; -import { genComponentStyleHook } from '../../theme/internal'; +import { genComponentStyleHook, mergeToken } from '../../theme/internal'; import genSpaceCompactStyle from './compact'; /** Component only token. Which will handle additional calculation of alias token */ @@ -8,7 +8,9 @@ export interface ComponentToken { } interface SpaceToken extends FullToken<'Space'> { - // Custom token here + spaceGapSmallSize: number; + spaceGapMiddleSize: number; + spaceGapLargeSize: number; } const genSpaceStyle: GenerateStyle = (token) => { @@ -45,10 +47,47 @@ const genSpaceStyle: GenerateStyle = (token) => { }; }; +const genSpaceGapStyle: GenerateStyle = (token) => { + const { componentCls } = token; + return { + [componentCls]: { + '&-gap-row-small': { + rowGap: token.spaceGapSmallSize, + }, + '&-gap-row-middle': { + rowGap: token.spaceGapMiddleSize, + }, + '&-gap-row-large': { + rowGap: token.spaceGapLargeSize, + }, + '&-gap-col-small': { + columnGap: token.spaceGapSmallSize, + }, + '&-gap-col-middle': { + columnGap: token.spaceGapMiddleSize, + }, + '&-gap-col-large': { + columnGap: token.spaceGapLargeSize, + }, + }, + }; +}; + // ============================== Export ============================== export default genComponentStyleHook( 'Space', - (token) => [genSpaceStyle(token), genSpaceCompactStyle(token)], + (token) => { + const spaceToken = mergeToken(token, { + spaceGapSmallSize: token.paddingXS, + spaceGapMiddleSize: token.padding, + spaceGapLargeSize: token.paddingLG, + }); + return [ + genSpaceStyle(spaceToken), + genSpaceGapStyle(spaceToken), + genSpaceCompactStyle(spaceToken), + ]; + }, () => ({}), { // Space component don't apply extra font style diff --git a/components/space/utils.ts b/components/space/utils.ts new file mode 100644 index 000000000000..93f95cfcb913 --- /dev/null +++ b/components/space/utils.ts @@ -0,0 +1,27 @@ +import type { SpaceSize } from '.'; +import type { SizeType } from '../config-provider/SizeContext'; + +export function isPresetSize(size: SpaceSize): size is SizeType { + return ['small', 'middle', 'large'].includes(size as string); +} + +function isValidGapNumber(size: SpaceSize): size is number { + if (!size) { + // The case of size = 0 is deliberately excluded here, because the default value of the gap attribute in CSS is 0, so if the user passes 0 in, we can directly ignore it. + return false; + } + return typeof size === 'number' && !Number.isNaN(size); +} + +export const getRealSize = ( + sizeMap: Record, number>, + value: SpaceSize, +): number => { + if (isPresetSize(value)) { + return sizeMap[value!]; + } + if (isValidGapNumber(value)) { + return value; + } + return 0; +}; From 46341b115cab15aa74d5c1556a44d9c371a56719 Mon Sep 17 00:00:00 2001 From: Gunay Date: Mon, 4 Sep 2023 15:36:45 +0300 Subject: [PATCH 177/318] feat: custom feedback icons (#43894) * custom feedback icons initial (cherry picked from commit 22e43ad0357ea5294baf6eda659c900b1ab170f1) * tests added and snaps updated * Revert "tests added and snaps updated" This reverts commit 13b57be30c73b870e382efadafe1e48ff692d54f. * unittest and documentation changes * feedback items could be turn off * documentation fix * move feedback icons object into the hasFeedback prop * feedbackIcons added to the form element * test: commit trigger * fix: failed form test * snaps updated * Update components/form/index.en-US.md Co-authored-by: afc163 Signed-off-by: Gunay * Update components/form/index.en-US.md Co-authored-by: afc163 Signed-off-by: Gunay * Update components/form/index.zh-CN.md Co-authored-by: afc163 Signed-off-by: Gunay * Update components/form/demo/custom-feedback-icons.md Signed-off-by: afc163 * Update components/form/demo/custom-feedback-icons.md Signed-off-by: afc163 --------- Signed-off-by: Gunay Signed-off-by: afc163 Co-authored-by: afc163 --- components/form/Form.tsx | 16 +- components/form/FormItem/ItemHolder.tsx | 29 +-- components/form/FormItem/index.tsx | 8 +- .../__snapshots__/demo-extend.test.ts.snap | 171 ++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 127 +++++++++++++ components/form/__tests__/index.test.tsx | 62 ++++++- components/form/context.tsx | 3 +- components/form/demo/custom-feedback-icons.md | 7 + .../form/demo/custom-feedback-icons.tsx | 77 ++++++++ components/form/index.en-US.md | 8 +- components/form/index.zh-CN.md | 4 +- 11 files changed, 494 insertions(+), 18 deletions(-) create mode 100644 components/form/demo/custom-feedback-icons.md create mode 100644 components/form/demo/custom-feedback-icons.tsx diff --git a/components/form/Form.tsx b/components/form/Form.tsx index aa7334ab9da0..f0e3743e103b 100644 --- a/components/form/Form.tsx +++ b/components/form/Form.tsx @@ -18,6 +18,7 @@ import useFormWarning from './hooks/useFormWarning'; import type { FormLabelAlign } from './interface'; import useStyle from './style'; import ValidateMessagesContext from './validateMessagesContext'; +import type { FeedbackIcons } from './FormItem'; export type RequiredMark = | boolean @@ -35,6 +36,7 @@ export interface FormProps extends Omit, 'form labelCol?: ColProps; wrapperCol?: ColProps; form?: FormInstance; + feedbackIcons?: FeedbackIcons; size?: SizeType; disabled?: boolean; scrollToFirstError?: Options | boolean; @@ -67,6 +69,7 @@ const InternalForm: React.ForwardRefRenderFunction = (p onFinishFailed, name, style, + feedbackIcons, ...restFormProps } = props; @@ -132,8 +135,19 @@ const InternalForm: React.ForwardRefRenderFunction = (p requiredMark: mergedRequiredMark, itemRef: __INTERNAL__.itemRef, form: wrapForm, + feedbackIcons, }), - [name, labelAlign, labelCol, wrapperCol, layout, mergedColon, mergedRequiredMark, wrapForm], + [ + name, + labelAlign, + labelCol, + wrapperCol, + layout, + mergedColon, + mergedRequiredMark, + wrapForm, + feedbackIcons, + ], ); React.useImperativeHandle(ref, () => wrapForm); diff --git a/components/form/FormItem/ItemHolder.tsx b/components/form/FormItem/ItemHolder.tsx index d338594325cb..182c94f7edbf 100644 --- a/components/form/FormItem/ItemHolder.tsx +++ b/components/form/FormItem/ItemHolder.tsx @@ -59,7 +59,7 @@ export default function ItemHolder(props: ItemHolderProps) { } = props; const itemPrefixCls = `${prefixCls}-item`; - const { requiredMark } = React.useContext(FormContext); + const { requiredMark, feedbackIcons } = React.useContext(FormContext); // ======================== Margin ======================== const itemRef = React.useRef(null); @@ -111,24 +111,29 @@ export default function ItemHolder(props: ItemHolderProps) { const formItemStatusContext = React.useMemo(() => { let feedbackIcon: React.ReactNode; if (hasFeedback) { + const customIcons = (hasFeedback !== true && hasFeedback.icons) || feedbackIcons; + const customIconNode = + mergedValidateStatus && + customIcons?.({ status: mergedValidateStatus, errors, warnings })?.[mergedValidateStatus]; const IconNode = mergedValidateStatus && iconMap[mergedValidateStatus]; - feedbackIcon = IconNode ? ( - - - - ) : null; + feedbackIcon = + customIconNode !== false && IconNode ? ( + + {customIconNode || } + + ) : null; } return { status: mergedValidateStatus, errors, warnings, - hasFeedback, + hasFeedback: !!hasFeedback, feedbackIcon, isFormItemInput: true, }; diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx index c4f21056c6a6..0f12e8bf8662 100644 --- a/components/form/FormItem/index.tsx +++ b/components/form/FormItem/index.tsx @@ -34,6 +34,12 @@ type RenderChildren = (form: FormInstance) => React.ReactN type RcFieldProps = Omit, 'children'>; type ChildrenType = RenderChildren | React.ReactNode; +export type FeedbackIcons = (itemStatus: { + status: ValidateStatus; + errors?: React.ReactNode[]; + warnings?: React.ReactNode[]; +}) => { [key in ValidateStatus]?: React.ReactNode }; + interface MemoInputProps { value: any; update: any; @@ -61,7 +67,7 @@ export interface FormItemProps rootClassName?: string; children?: ChildrenType; id?: string; - hasFeedback?: boolean; + hasFeedback?: boolean | { icons: FeedbackIcons }; validateStatus?: ValidateStatus; required?: boolean; hidden?: boolean; diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap index 2e90a6f66932..336c71b95ecb 100644 --- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2215,6 +2215,177 @@ exports[`renders components/form/demo/control-ref.tsx extend context correctly 1 exports[`renders components/form/demo/control-ref.tsx extend context correctly 2`] = `[]`; +exports[`renders components/form/demo/custom-feedback-icons.tsx extend context correctly 1`] = ` +
+
+
+
+ +
+
+
+
+ + + + +
+
+
+ +
+
+
+
+
+
+ +
+
+
+
+ + + + +
+
+
+ +
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +`; + +exports[`renders components/form/demo/custom-feedback-icons.tsx extend context correctly 2`] = `[]`; + exports[`renders components/form/demo/customized-form-controls.tsx extend context correctly 1`] = `
`; +exports[`renders components/form/demo/custom-feedback-icons.tsx correctly 1`] = ` + +
+
+
+ +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+ +
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+ +`; + exports[`renders components/form/demo/customized-form-controls.tsx correctly 1`] = `
{ expect((Util.getFieldId as () => string)()).toBe(itemName); // make sure input id is parentNode - expect(screen.getByLabelText(itemName)).toHaveAttribute('id', itemName); expect(screen.getByLabelText(itemName)).toHaveAccessibleName('Search'); fireEvent.click(container.querySelector('button')!); @@ -1781,6 +1781,66 @@ describe('Form', () => { expect(container.querySelector('.ant-form-item-has-error')).toBeTruthy(); }); + it('custom feedback icons should display when pass hasFeedback prop', async () => { + const App = ({ trigger = false }: { trigger?: boolean }) => { + const form = useRef>(null); + + useEffect(() => { + if (!trigger) return; + form.current?.validateFields(); + }, [trigger]); + + return ( + ({ + error: , + })} + > + + + + ({ + error: , + }), + }} + rules={[ + { + required: true, + message: 'Please input your value 3', + }, + ]} + > + + + + ); + }; + const { container, rerender } = render(); + + expect(container.querySelectorAll('.ant-form-item-has-feedback').length).toBe(0); + + rerender(); + await waitFakeTimer(); + + expect(container.querySelectorAll('.ant-form-item-has-feedback').length).toBe(2); + expect(container.querySelectorAll('#custom-error-icon, #custom-error-icon2').length).toBe(2); + }); + // https://github.com/ant-design/ant-design/issues/41621 it('should not override value when pass `undefined` to require', async () => { // When require is `undefined`, the `isRequire` calculation logic should be preserved diff --git a/components/form/context.tsx b/components/form/context.tsx index 7a3f388b58f2..6f8ab3d0142a 100644 --- a/components/form/context.tsx +++ b/components/form/context.tsx @@ -7,7 +7,7 @@ import * as React from 'react'; import { useContext, useMemo } from 'react'; import type { ColProps } from '../grid/col'; import type { FormInstance, RequiredMark } from './Form'; -import type { ValidateStatus } from './FormItem'; +import type { ValidateStatus, FeedbackIcons } from './FormItem'; import type { FormLabelAlign } from './interface'; /** Form Context. Set top form style and pass to Form Item usage. */ @@ -22,6 +22,7 @@ export interface FormContextProps { requiredMark?: RequiredMark; itemRef: (name: (string | number)[]) => (node: React.ReactElement) => void; form?: FormInstance; + feedbackIcons?: FeedbackIcons; } export const FormContext = React.createContext({ diff --git a/components/form/demo/custom-feedback-icons.md b/components/form/demo/custom-feedback-icons.md new file mode 100644 index 000000000000..4f75665c3746 --- /dev/null +++ b/components/form/demo/custom-feedback-icons.md @@ -0,0 +1,7 @@ +## zh-CN + +自定义反馈图标可以通过 `hasFeedback={{ icons: ... }}` 或 `
` 传递（`Form.Item` 必须具有 `hasFeedback` 属性）。 + +## en-US + +Custom feedback icons can be passed by `hasFeedback={{ icons: ... }}` or `` (`Form.Item` must has `hasFeedback` attribute). diff --git a/components/form/demo/custom-feedback-icons.tsx b/components/form/demo/custom-feedback-icons.tsx new file mode 100644 index 000000000000..7af3c276a33d --- /dev/null +++ b/components/form/demo/custom-feedback-icons.tsx @@ -0,0 +1,77 @@ +import React from 'react'; +import { uniqueId } from 'lodash'; + +import { createStyles, css } from 'antd-style'; +import { AlertFilled, CloseSquareFilled } from '@ant-design/icons'; +import { Button, Form, Input, Tooltip } from 'antd'; + +const useStyle = createStyles(() => ({ + 'custom-feedback-icons': css` + .ant-form-item-feedback-icon { + pointer-events: all; + } + `, +})); + +const App: React.FC = () => { + const [form] = Form.useForm(); + const { styles } = useStyle(); + + return ( + ({ + error: ( +
{error}
)} + color="red" + > + + + ), + })} + > + + + + ({ + error: ( +
{error}
)} + color="pink" + > + + + ), + success: false, + }), + }} + > + + + + + + + ); +}; + +export default App; diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 27b18dcf3a9f..42cef98e7276 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -52,6 +52,7 @@ High performance Form component with data scope management. Including data colle label ellipsis Test col 24 usage Ref item +Custom feedback icons Component Token ## API @@ -67,6 +68,7 @@ Common props ref：[Common props](/docs/react/common-props) | component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | | | fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - | | | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#forminstance) | - | | +| feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | [FeedbackIcons](#feedbackicons) | - | | | initialValues | Set value by Form initialization or reset | object | - | | | labelAlign | The text align of label of all items | `left` \| `right` | `right` | | | labelWrap | whether label can be wrap | boolean | false | 4.18.0 | @@ -122,7 +124,7 @@ Form field component for data bidirectional binding, validation, layout, and so | extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | ReactNode | - | | | getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any\[]) => any | - | | | getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 | -| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | | +| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. Also, It can get feedback icons via icons prop. | boolean \| {icons:[FeedbackIcons](#feedbackicons)} | false | icons: 5.9.0 | | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | ReactNode | - | | | hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | 4.4.0 | | htmlFor | Set sub label `htmlFor` | string | - | | @@ -158,6 +160,10 @@ Used when there are dependencies between fields. If a field has the `dependencie `dependencies` shouldn't be used together with `shouldUpdate`, since it may result in conflicting update logic. +### FeedbackIcons + +`({status:ValidateStatus, errors: ReactNode, warnings: ReactNode}) => Record` + ### shouldUpdate Form updates only the modified field-related components for performance optimization purposes by incremental update. In most cases, you only need to write code or do validation with the [`dependencies`](#dependencies) property. In some specific cases, such as when a new field option appears with a field value changed, or you just want to keep some area updating by form update, you can modify the update logic of Form.Item via the `shouldUpdate`. diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index f2b09d7773c3..6d0583856c72 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -53,6 +53,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA 测试 label 省略 测试特殊 col 24 用法 引用字段 +Custom feedback icons 组件 Token ## API @@ -68,6 +69,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA | component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form | | | fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#fielddata)\[] | - | | | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#forminstance) | - | | +| feedbackIcons | Can be passed custom icons while `Form.Item` element has `hasFeedback` | ({status:ValidateStatus, errors: ReactNode, warnings: ReactNode}) => Record | - | 5.9.0 | | initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | | | labelAlign | label 标签的文本对齐方式 | `left` \| `right` | `right` | | | labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 | @@ -123,7 +125,7 @@ const validateMessages = { | extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | ReactNode | - | | | getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any\[]) => any | - | | | getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 | -| hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | | +| hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 此外，它还可以通过 Icons 属性获取反馈图标。 | boolean \| {icons:({status:ValidateStatus, errors: ReactNode, warnings: ReactNode}) => Record} | false | | | help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - | | | hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | 4.4.0 | | htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | | From 6a5e7ded4365828f0bb318aacd9e13660acbc386 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Tue, 5 Sep 2023 10:17:56 +0800 Subject: [PATCH 178/318] refactor: remove Space & Grid IE compatible logic (#44620) * refactor: remove IE compatible logic * fix: fix * fix: fix * fix: fix --- components/_util/hooks/useFlexGapSupport.ts | 11 - components/_util/styleChecker.ts | 35 --- .../__snapshots__/demo-extend.test.ts.snap | 51 +---- .../__tests__/__snapshots__/demo.test.ts.snap | 51 +---- .../__snapshots__/demo-extend.test.ts.snap | 7 +- .../__tests__/__snapshots__/demo.test.ts.snap | 7 +- .../__snapshots__/demo-extend.test.ts.snap | 6 +- .../__snapshots__/demo.test.tsx.snap | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 42 +--- .../__snapshots__/demo.test.tsx.snap | 42 +--- .../__snapshots__/demo-extend.test.ts.snap | 147 +++---------- .../__snapshots__/demo.test.tsx.snap | 147 +++---------- .../__snapshots__/demo-extend.test.ts.snap | 185 ++++------------ .../__tests__/__snapshots__/demo.test.ts.snap | 185 ++++------------ .../__snapshots__/demo-extend.test.ts.snap | 2 +- .../__tests__/__snapshots__/demo.test.ts.snap | 2 +- .../__snapshots__/demo-extend.test.ts.snap | 3 +- .../__snapshots__/demo.test.tsx.snap | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 8 +- .../__snapshots__/demo.test.tsx.snap | 8 +- .../__snapshots__/demo-extend.test.ts.snap | 4 +- .../__tests__/__snapshots__/demo.test.ts.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 37 +--- .../__tests__/__snapshots__/demo.test.ts.snap | 37 +--- .../config-provider/__tests__/style.test.tsx | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 72 ++---- .../__snapshots__/demo.test.tsx.snap | 72 ++---- .../__snapshots__/demo-extend.test.tsx.snap | 23 +- .../__tests__/__snapshots__/demo.test.ts.snap | 14 +- .../__snapshots__/demo-extend.test.ts.snap | 66 ++---- .../__snapshots__/demo.test.tsx.snap | 64 ++---- .../__snapshots__/demo-extend.test.ts.snap | 13 +- .../__tests__/__snapshots__/demo.test.ts.snap | 13 +- .../__snapshots__/demo-extend.test.ts.snap | 13 +- .../__snapshots__/demo.test.tsx.snap | 13 +- components/grid/RowContext.ts | 1 - .../__snapshots__/demo-extend.test.ts.snap | 46 ++-- .../__tests__/__snapshots__/demo.test.ts.snap | 46 ++-- .../__snapshots__/index.test.tsx.snap | 2 +- components/grid/__tests__/gap.test.tsx | 2 +- components/grid/__tests__/index.test.tsx | 25 ++- components/grid/__tests__/server.test.tsx | 21 +- components/grid/col.tsx | 14 +- components/grid/row.tsx | 29 +-- .../__snapshots__/demo-extend.test.ts.snap | 25 +-- .../__tests__/__snapshots__/demo.test.ts.snap | 25 +-- .../__snapshots__/demo-extend.test.ts.snap | 5 +- .../__tests__/__snapshots__/demo.test.ts.snap | 5 +- .../__snapshots__/demo-extend.test.ts.snap | 31 +-- .../__snapshots__/demo.test.tsx.snap | 31 +-- .../__snapshots__/demo-extend.test.ts.snap | 53 +---- .../__snapshots__/demo.test.tsx.snap | 53 +---- .../__snapshots__/demo-extend.test.ts.snap | 5 +- .../__tests__/__snapshots__/demo.test.ts.snap | 5 +- .../__snapshots__/demo-extend.test.ts.snap | 36 +-- .../__tests__/__snapshots__/demo.test.ts.snap | 36 +-- .../__snapshots__/demo-extend.test.ts.snap | 9 +- .../__snapshots__/demo.test.tsx.snap | 9 +- .../__snapshots__/demo-extend.test.ts.snap | 3 +- .../__snapshots__/demo.test.tsx.snap | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 4 +- .../__tests__/__snapshots__/demo.test.ts.snap | 4 +- .../__snapshots__/demo-extend.test.ts.snap | 27 +-- .../__snapshots__/demo.test.tsx.snap | 27 +-- .../__snapshots__/demo-extend.test.ts.snap | 20 +- .../__tests__/__snapshots__/demo.test.ts.snap | 20 +- .../__snapshots__/demo-extend.test.ts.snap | 13 +- .../__snapshots__/demo.test.tsx.snap | 13 +- .../__snapshots__/demo-extend.test.ts.snap | 84 ++----- .../__tests__/__snapshots__/demo.test.ts.snap | 84 ++----- .../__snapshots__/demo-extend.test.ts.snap | 15 +- .../__tests__/__snapshots__/demo.test.ts.snap | 15 +- .../__snapshots__/demo-extend.test.ts.snap | 11 +- .../__snapshots__/demo.test.tsx.snap | 11 +- .../__snapshots__/demo-extend.test.ts.snap | 17 +- .../__tests__/__snapshots__/demo.test.ts.snap | 17 +- .../__snapshots__/demo-extend.test.ts.snap | 72 ++---- .../__snapshots__/demo.test.tsx.snap | 57 ++--- .../__snapshots__/demo-extend.test.ts.snap | 17 +- .../__snapshots__/demo.test.tsx.snap | 17 +- .../__snapshots__/demo-extend.test.ts.snap | 3 +- .../__tests__/__snapshots__/demo.test.ts.snap | 3 +- components/space/Item.tsx | 41 +--- .../__snapshots__/demo-extend.test.ts.snap | 100 ++------- .../__snapshots__/demo.test.tsx.snap | 100 ++------- .../__snapshots__/index.test.tsx.snap | 28 +-- components/space/__tests__/gap.test.tsx | 1 - components/space/__tests__/index.test.tsx | 6 +- components/space/context.ts | 6 - components/space/index.tsx | 51 ++--- .../space/style/{compact.tsx => compact.ts} | 0 .../space/style/{index.tsx => index.ts} | 0 components/space/utils.ts | 15 +- .../__snapshots__/demo-extend.test.ts.snap | 11 +- .../__tests__/__snapshots__/demo.test.ts.snap | 11 +- .../__snapshots__/demo-extend.test.ts.snap | 7 +- .../__tests__/__snapshots__/demo.test.ts.snap | 7 +- .../__snapshots__/demo-extend.test.ts.snap | 208 ++++++------------ .../__tests__/__snapshots__/demo.test.ts.snap | 193 +++++----------- .../__snapshots__/demo-extend.test.ts.snap | 6 +- .../__tests__/__snapshots__/demo.test.ts.snap | 6 +- .../__snapshots__/demo-extend.test.ts.snap | 132 ++--------- .../__tests__/__snapshots__/demo.test.ts.snap | 132 ++--------- .../__snapshots__/demo-extend.test.ts.snap | 19 +- .../__snapshots__/demo.test.tsx.snap | 19 +- .../__snapshots__/demo-extend.test.ts.snap | 34 +-- .../__snapshots__/demo.test.tsx.snap | 34 +-- .../__snapshots__/demo-extend.test.ts.snap | 16 +- .../__snapshots__/demo.test.tsx.snap | 16 +- .../__snapshots__/demo-extend.test.ts.snap | 9 +- .../__tests__/__snapshots__/demo.test.ts.snap | 9 +- .../__snapshots__/demo-extend.test.ts.snap | 8 +- .../__snapshots__/demo.test.tsx.snap | 8 +- .../__snapshots__/demo-extend.test.ts.snap | 15 +- .../__snapshots__/demo.test.tsx.snap | 15 +- .../__snapshots__/demo-extend.test.ts.snap | 3 +- .../__tests__/__snapshots__/demo.test.ts.snap | 3 +- .../__snapshots__/demo-extend.test.ts.snap | 9 +- .../__tests__/__snapshots__/demo.test.ts.snap | 9 +- 119 files changed, 931 insertions(+), 2824 deletions(-) delete mode 100644 components/_util/hooks/useFlexGapSupport.ts rename components/space/style/{compact.tsx => compact.ts} (100%) rename components/space/style/{index.tsx => index.ts} (100%) diff --git a/components/_util/hooks/useFlexGapSupport.ts b/components/_util/hooks/useFlexGapSupport.ts deleted file mode 100644 index b0640f0f07c4..000000000000 --- a/components/_util/hooks/useFlexGapSupport.ts +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import { detectFlexGapSupported } from '../styleChecker'; - -export default () => { - const [flexible, setFlexible] = React.useState(false); - React.useEffect(() => { - setFlexible(detectFlexGapSupported()); - }, []); - - return flexible; -}; diff --git a/components/_util/styleChecker.ts b/components/_util/styleChecker.ts index c39ca2510f1a..dfc960fa8fb8 100644 --- a/components/_util/styleChecker.ts +++ b/components/_util/styleChecker.ts @@ -4,38 +4,3 @@ import { isStyleSupport } from 'rc-util/lib/Dom/styleChecker'; export const canUseDocElement = () => canUseDom() && window.document.documentElement; export { isStyleSupport }; - -let flexGapSupported: boolean; -export const detectFlexGapSupported = () => { - if (!canUseDocElement()) { - return false; - } - - if (flexGapSupported !== undefined) { - return flexGapSupported; - } - - // create flex container with row-gap set - const flex = document.createElement('div'); - flex.style.display = 'flex'; - flex.style.flexDirection = 'column'; - flex.style.rowGap = '1px'; - - // create two, elements inside it - flex.appendChild(document.createElement('div')); - flex.appendChild(document.createElement('div')); - - // some browser may not repaint when remove nodes, so we need create a new layer to detect. - const container = document.createElement('div'); - container.style.position = 'absolute'; - container.style.zIndex = '-9999'; - container.appendChild(flex); - - - // append to the DOM (needed to obtain scrollHeight) - document.body.appendChild(container); - flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap - document.body.removeChild(container); - - return flexGapSupported; -}; diff --git a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap index 5f74b2edae1d..b399d10d4e17 100644 --- a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2,12 +2,11 @@ exports[`renders components/alert/demo/action.tsx extend context correctly 1`] = `
,
,
,
,
,
,
Column @@ -1241,7 +1241,7 @@ Array [
Column @@ -1249,7 +1249,7 @@ Array [
Column @@ -1257,7 +1257,7 @@ Array [
Column @@ -1265,7 +1265,7 @@ Array [
Column @@ -1273,7 +1273,7 @@ Array [
Column @@ -1281,7 +1281,7 @@ Array [
Column @@ -1289,7 +1289,7 @@ Array [
Column @@ -1299,11 +1299,11 @@ Array [ Another Row:,
Column @@ -1311,7 +1311,7 @@ Array [
Column @@ -1319,7 +1319,7 @@ Array [
Column @@ -1327,7 +1327,7 @@ Array [
Column diff --git a/components/grid/__tests__/__snapshots__/demo.test.ts.snap b/components/grid/__tests__/__snapshots__/demo.test.ts.snap index 2a5b8a179cd2..eca7cc84c598 100644 --- a/components/grid/__tests__/__snapshots__/demo.test.ts.snap +++ b/components/grid/__tests__/__snapshots__/demo.test.ts.snap @@ -735,11 +735,11 @@ Array [
,
,
Column @@ -1170,7 +1170,7 @@ Array [
Column @@ -1178,7 +1178,7 @@ Array [
Column @@ -1186,7 +1186,7 @@ Array [
Column @@ -1194,7 +1194,7 @@ Array [
Column @@ -1202,7 +1202,7 @@ Array [
Column @@ -1210,7 +1210,7 @@ Array [
Column @@ -1218,7 +1218,7 @@ Array [
Column @@ -1228,11 +1228,11 @@ Array [ Another Row:,
Column @@ -1240,7 +1240,7 @@ Array [
Column @@ -1248,7 +1248,7 @@ Array [
Column @@ -1256,7 +1256,7 @@ Array [
Column diff --git a/components/grid/__tests__/__snapshots__/index.test.tsx.snap b/components/grid/__tests__/__snapshots__/index.test.tsx.snap index 02d838380be0..3f2ef8ab55d0 100644 --- a/components/grid/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/grid/__tests__/__snapshots__/index.test.tsx.snap @@ -45,6 +45,6 @@ exports[`Grid should render Row 1`] = ` exports[`Grid when typeof gutter is object array in large screen 1`] = `
`; diff --git a/components/grid/__tests__/gap.test.tsx b/components/grid/__tests__/gap.test.tsx index e3194e26f702..8f394f789546 100644 --- a/components/grid/__tests__/gap.test.tsx +++ b/components/grid/__tests__/gap.test.tsx @@ -1,12 +1,12 @@ import React from 'react'; import ReactDOMServer from 'react-dom/server'; + import { Col, Row } from '..'; import { render, screen } from '../../../tests/utils'; jest.mock('../../_util/styleChecker', () => ({ canUseDocElement: () => true, isStyleSupport: () => true, - detectFlexGapSupported: () => true, })); describe('Grid.Gap', () => { diff --git a/components/grid/__tests__/index.test.tsx b/components/grid/__tests__/index.test.tsx index cb2624c92f94..94f96fd55e84 100644 --- a/components/grid/__tests__/index.test.tsx +++ b/components/grid/__tests__/index.test.tsx @@ -1,5 +1,6 @@ import React, { useState } from 'react'; import { act } from 'react-dom/test-utils'; + import { Col, Row } from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; @@ -83,7 +84,7 @@ describe('Grid', () => { }, removeListener: jest.fn(), matches: query === '(min-width: 1200px)', - } as any), + }) as any, ); const { container, asFragment } = render( @@ -96,10 +97,10 @@ describe('Grid', () => { ); expect(asFragment().firstChild).toMatchSnapshot(); - expect(container.querySelector('div')!.style.marginLeft).toEqual('-20px'); - expect(container.querySelector('div')!.style.marginRight).toEqual('-20px'); - expect(container.querySelector('div')!.style.marginTop).toEqual('-200px'); - expect(container.querySelector('div')!.style.marginBottom).toEqual('-200px'); + expect(container.querySelector('div')?.style.marginLeft).toBe('-20px'); + expect(container.querySelector('div')?.style.marginRight).toBe('-20px'); + expect(container.querySelector('div')?.style.marginTop).toBe(''); + expect(container.querySelector('div')?.style.marginBottom).toBe(''); }); it('renders wrapped Col correctly', () => { @@ -132,10 +133,10 @@ describe('Grid', () => { it('should work current when gutter is array', () => { const { container } = render(); - expect(container.querySelector('div')!.style.marginLeft).toEqual('-8px'); - expect(container.querySelector('div')!.style.marginRight).toEqual('-8px'); - expect(container.querySelector('div')!.style.marginTop).toEqual('-10px'); - expect(container.querySelector('div')!.style.marginBottom).toEqual('-10px'); + expect(container.querySelector('div')?.style.marginLeft).toBe('-8px'); + expect(container.querySelector('div')?.style.marginRight).toBe('-8px'); + expect(container.querySelector('div')?.style.marginTop).toBe(''); + expect(container.querySelector('div')?.style.marginBottom).toBe(''); }); // By jsdom mock, actual jsdom not implemented matchMedia @@ -150,7 +151,7 @@ describe('Grid', () => { }, removeListener: jest.fn(), matches: query === '(max-width: 575px)', - } as any), + }) as any, ); let screensVar; @@ -181,7 +182,7 @@ describe('Grid', () => { }, removeListener: jest.fn(), matches: query === '(max-width: 575px)', - } as any), + }) as any, ); const { container } = render(); expect(container.innerHTML).toContain('ant-row-middle'); @@ -201,7 +202,7 @@ describe('Grid', () => { }, removeListener: jest.fn(), matches: query === '(max-width: 575px)', - } as any), + }) as any, ); const { container } = render(); expect(container.innerHTML).toContain('ant-row-center'); diff --git a/components/grid/__tests__/server.test.tsx b/components/grid/__tests__/server.test.tsx index 643b921ca5a6..528919f4df4e 100644 --- a/components/grid/__tests__/server.test.tsx +++ b/components/grid/__tests__/server.test.tsx @@ -1,4 +1,5 @@ import React from 'react'; + import { Col, Row } from '..'; import { render } from '../../../tests/utils'; @@ -12,18 +13,14 @@ describe('Grid.Server', () => { , ); - expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginLeft).toEqual('-4px'); - expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginRight).toEqual('-4px'); - expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginTop).toEqual('-8px'); - expect((container.querySelector('.ant-row') as HTMLElement)!.style.marginBottom).toEqual( - '-8px', - ); + expect((container.querySelector('.ant-row') as HTMLElement)?.style.marginLeft).toBe('-4px'); + expect((container.querySelector('.ant-row') as HTMLElement)?.style.marginRight).toBe('-4px'); + expect((container.querySelector('.ant-row') as HTMLElement)?.style.marginTop).toBe(''); + expect((container.querySelector('.ant-row') as HTMLElement)?.style.marginBottom).toBe(''); - expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingLeft).toEqual('4px'); - expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingRight).toEqual('4px'); - expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingTop).toEqual('8px'); - expect((container.querySelector('.ant-col') as HTMLElement)!.style.paddingBottom).toEqual( - '8px', - ); + expect((container.querySelector('.ant-col') as HTMLElement)?.style.paddingLeft).toBe('4px'); + expect((container.querySelector('.ant-col') as HTMLElement)?.style.paddingRight).toBe('4px'); + expect((container.querySelector('.ant-col') as HTMLElement)?.style.paddingTop).toBe(''); + expect((container.querySelector('.ant-col') as HTMLElement)?.style.paddingBottom).toBe(''); }); }); diff --git a/components/grid/col.tsx b/components/grid/col.tsx index ead96e49133a..ac2218ab32c8 100644 --- a/components/grid/col.tsx +++ b/components/grid/col.tsx @@ -1,9 +1,10 @@ -import classNames from 'classnames'; import * as React from 'react'; +import classNames from 'classnames'; + +import type { LiteralUnion } from '../_util/type'; import { ConfigContext } from '../config-provider'; import RowContext from './RowContext'; import { useColStyle } from './style'; -import type { LiteralUnion } from '../_util/type'; // https://github.com/ant-design/ant-design/issues/14324 type ColSpanType = number | string; @@ -49,7 +50,7 @@ function parseFlex(flex: FlexType): string { const sizes = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'] as const; const Col = React.forwardRef((props, ref) => { const { getPrefixCls, direction } = React.useContext(ConfigContext); - const { gutter, wrap, supportFlexGap } = React.useContext(RowContext); + const { gutter, wrap } = React.useContext(RowContext); const { prefixCls: customizePrefixCls, @@ -115,13 +116,6 @@ const Col = React.forwardRef((props, ref) => { mergedStyle.paddingRight = horizontalGutter; } - // Vertical gutter use padding when gap not support - if (gutter && gutter[1] > 0 && !supportFlexGap) { - const verticalGutter = gutter[1] / 2; - mergedStyle.paddingTop = verticalGutter; - mergedStyle.paddingBottom = verticalGutter; - } - if (flex) { mergedStyle.flex = parseFlex(flex); diff --git a/components/grid/row.tsx b/components/grid/row.tsx index c4fea7486cfe..d89a4333e1a4 100644 --- a/components/grid/row.tsx +++ b/components/grid/row.tsx @@ -1,10 +1,11 @@ -import classNames from 'classnames'; import * as React from 'react'; -import { ConfigContext } from '../config-provider'; -import useFlexGapSupport from '../_util/hooks/useFlexGapSupport'; +import classNames from 'classnames'; + import type { Breakpoint, ScreenMap } from '../_util/responsiveObserver'; import useResponsiveObserver, { responsiveArray } from '../_util/responsiveObserver'; +import { ConfigContext } from '../config-provider'; import RowContext from './RowContext'; +import type { RowContextState } from './RowContext'; import { useRowStyle } from './style'; const RowAligns = ['top', 'middle', 'bottom', 'stretch'] as const; @@ -48,7 +49,9 @@ function useMergePropByScreen(oriProp: RowProps['align'] | RowProps['justify'], for (let i = 0; i < responsiveArray.length; i++) { const breakpoint: Breakpoint = responsiveArray[i]; // if do not match, do nothing - if (!screen[breakpoint]) continue; + if (!screen[breakpoint]) { + continue; + } const curVal = oriProp[breakpoint]; if (curVal !== undefined) { setProp(curVal); @@ -102,8 +105,6 @@ const Row = React.forwardRef((props, ref) => { const mergeJustify = useMergePropByScreen(justify, curScreens); - const supportFlexGap = useFlexGapSupport(); - const gutterRef = React.useRef(gutter); const responsiveObserver = useResponsiveObserver(); @@ -162,27 +163,21 @@ const Row = React.forwardRef((props, ref) => { // Add gutter related style const rowStyle: React.CSSProperties = {}; const horizontalGutter = gutters[0] != null && gutters[0] > 0 ? gutters[0] / -2 : undefined; - const verticalGutter = gutters[1] != null && gutters[1] > 0 ? gutters[1] / -2 : undefined; if (horizontalGutter) { rowStyle.marginLeft = horizontalGutter; rowStyle.marginRight = horizontalGutter; } - if (supportFlexGap) { - // Set gap direct if flex gap support - [, rowStyle.rowGap] = gutters; - } else if (verticalGutter) { - rowStyle.marginTop = verticalGutter; - rowStyle.marginBottom = verticalGutter; - } + [, rowStyle.rowGap] = gutters; // "gutters" is a new array in each rendering phase, it'll make 'React.useMemo' effectless. // So we deconstruct "gutters" variable here. const [gutterH, gutterV] = gutters; - const rowContext = React.useMemo( - () => ({ gutter: [gutterH, gutterV] as [number, number], wrap, supportFlexGap }), - [gutterH, gutterV, wrap, supportFlexGap], + + const rowContext = React.useMemo( + () => ({ gutter: [gutterH, gutterV] as [number, number], wrap }), + [gutterH, gutterV, wrap], ); return wrapSSR( diff --git a/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap index fd78106d6869..7d7731c3a59c 100644 --- a/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/icon/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -2,11 +2,10 @@ exports[`renders components/icon/demo/basic.tsx extend context correctly 1`] = `
Input addon Button:


Input addon Button icon:
@@ -5677,20 +5662,18 @@ exports[`renders components/input/demo/debug-addon.tsx extend context correctly exports[`renders components/input/demo/focus.tsx extend context correctly 1`] = `
,
,
,
,
,
,
- + +
} badge={{ count: 5, color: 'blue' }} /> + custom badge color
} + badge={{ count: 5, color: 'blue' }} + /> diff --git a/components/float-button/style/index.ts b/components/float-button/style/index.ts index 0e70ad8a6a39..16b8d468d290 100644 --- a/components/float-button/style/index.ts +++ b/components/float-button/style/index.ts @@ -220,6 +220,10 @@ const sharedFloatButtonStyle: GenerateStyle = (toke position: 'fixed', cursor: 'pointer', zIndex: 99, + // Do not remove the 'display: block' here. + // Deleting it will cause marginBottom to become ineffective. + // Ref: https://github.com/ant-design/ant-design/issues/44700 + display: 'block', width: floatButtonSize, height: floatButtonSize, insetInlineEnd: token.floatButtonInsetInlineEnd, From 56b1b3fe457b301b263dbf78e9a9990032af2a5f Mon Sep 17 00:00:00 2001 From: Amumu Date: Fri, 8 Sep 2023 15:51:58 +0800 Subject: [PATCH 203/318] chore: update ignore (#44710) * chore: Don't ignore any package * chore: update --- .github/dependabot.yml | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/.github/dependabot.yml b/.github/dependabot.yml index 0d4d1732277a..325c2f5d03fe 100644 --- a/.github/dependabot.yml +++ b/.github/dependabot.yml @@ -1,7 +1,7 @@ # To get started with Dependabot version updates, you'll need to specify which # package ecosystems to update and where the package manifests are located. # Please see the documentation for all configuration options: -# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates +# https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/about-dependabot-version-updates version: 2 updates: @@ -18,15 +18,19 @@ updates: - dependency-name: "rc-dropdown" - dependency-name: "rc-field-form" - dependency-name: "rc-image" + - dependency-name: "rc-input" + - dependency-name: "rc-input-number" - dependency-name: "rc-mentions" - dependency-name: "rc-menu" - dependency-name: "rc-motion" - dependency-name: "rc-notification" + - dependency-name: "rc-pagination" - dependency-name: "rc-picker" - dependency-name: "rc-progress" - dependency-name: "rc-rate" - dependency-name: "rc-resize-observer" - dependency-name: "rc-select" + - dependency-name: "rc-segmented" - dependency-name: "rc-slider" - dependency-name: "rc-steps" - dependency-name: "rc-switch" @@ -36,6 +40,9 @@ updates: - dependency-name: "rc-tooltip" - dependency-name: "rc-tree" - dependency-name: "rc-tree-select" - - dependency-name: "rc-trigger" + - dependency-name: "@rc-component/trigger" + - dependency-name: "@rc-component/tour" + - dependency-name: "@rc-component/mutate-observer" + - dependency-name: "@rc-component/color-picker" - dependency-name: "rc-upload" - dependency-name: "rc-util" From 584326be39201915cd0253659b6162247c856255 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Fri, 8 Sep 2023 02:59:19 -0500 Subject: [PATCH 204/318] docs: add 5.9.0 changelog (#44692) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: add 5.9.0 changelog * change * prettier * Update CHANGELOG.zh-CN.md Co-authored-by: lijianan <574980606@qq.com> Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: 陈帅 * Update CHANGELOG.en-US.md Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: MadCcc <1075746765@qq.com> Signed-off-by: 陈帅 * reset * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: 陈帅 * upload * update * Update CHANGELOG.en-US.md Co-authored-by: afc163 Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: 陈帅 * Update CHANGELOG.en-US.md Co-authored-by: afc163 Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: lijianan <574980606@qq.com> * fix * Update CHANGELOG.zh-CN.md Co-authored-by: Amumu Signed-off-by: 陈帅 * Update CHANGELOG.en-US.md Co-authored-by: Amumu Signed-off-by: 陈帅 * Update CHANGELOG.zh-CN.md Co-authored-by: afc163 Signed-off-by: 陈帅 * docs * Update CHANGELOG.zh-CN.md Signed-off-by: MadCcc <1075746765@qq.com> * Update CHANGELOG.en-US.md Signed-off-by: MadCcc <1075746765@qq.com> * docs: update * docs: update changelog * docs: add changlog * fix: duplicated changelog --------- Signed-off-by: 陈帅 Signed-off-by: lijianan <574980606@qq.com> Signed-off-by: MadCcc <1075746765@qq.com> Co-authored-by: lijianan <574980606@qq.com> Co-authored-by: MadCcc <1075746765@qq.com> Co-authored-by: kiner-tang(文辉) <1127031143@qq.com> Co-authored-by: afc163 Co-authored-by: Amumu --- CHANGELOG.en-US.md | 91 ++++++++++++++++++++++++++++++++++------------ CHANGELOG.zh-CN.md | 91 ++++++++++++++++++++++++++++++++++------------ 2 files changed, 136 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index 8720832f787a..9db3d5378727 100644 --- a/CHANGELOG.en-US.md +++ b/CHANGELOG.en-US.md @@ -16,6 +16,51 @@ tag: vVERSION --- +## 5.9.0 + +`2023-09-08` + +- 🔥 Table component now supports the `virtual` attribute to enable virtual scrolling. [#44349](https://github.com/ant-design/ant-design/pull/44349) +- 🔥 Form's `validateFields` now supports `recursive` to validate all fields with nested paths. [#44130](https://github.com/ant-design/ant-design/pull/44130) +- 🔥 Form.Item now supports `validateDebounce` to configure validation debounce. [#44633](https://github.com/ant-design/ant-design/pull/44633) +- 🆕 Button component has added three component tokens: `contentFontSize`, `contentFontSizeSM`, and `contentFontSizeLG`, allowing customization of font sizes for different sizes. [#44257](https://github.com/ant-design/ant-design/pull/44257) +- 🆕 Form's `requiredMark` now supports custom rendering. [#44073](https://github.com/ant-design/ant-design/pull/44073) +- 🆕 Tabs component has added a new component token `itemColor` to control the text color of normal tabs. [#44201](https://github.com/ant-design/ant-design/pull/44201) +- 🆕 ColorPicker now supports `defaultFormat`. [#44487](https://github.com/ant-design/ant-design/pull/44487) [@CYBYOB](https://github.com/CYBYOB) +- 🆕 Form supports `feedbackIcons` and Form.Item supports `hasFeedback={{ icons: ... }}`, now feedback icons could be customized in both ways. [#43894](https://github.com/ant-design/ant-design/pull/43894) [@gldio](https://github.com/gldio) +- 🆕 Added the `itemSelectedColor` component token to the Segmented component. [#44570](https://github.com/ant-design/ant-design/pull/44570) [@xiaozisong](https://github.com/xiaozisong) +- 🆕 Added support for custom function rendering in the Modal footer. [#44318](https://github.com/ant-design/ant-design/pull/44318) [@RedJue](https://github.com/RedJue) +- 🆕 Added responsive setting support for `items.span` in Descriptions. [#44534](https://github.com/ant-design/ant-design/pull/44534) +- 🆕 Added support for global configuration of `indicatorSize` in Tabs component through ConfigProvider. [#44517](https://github.com/ant-design/ant-design/pull/44517) +- 🆕 Added the `direction` parameter to the `filterOption` function in the Transfer component. [#44417](https://github.com/ant-design/ant-design/pull/44417) [@Zian502](https://github.com/Zian502) +- 🆕 Added support for the `source` parameter in the `onSearch` method of the Input.Search component. [#44457](https://github.com/ant-design/ant-design/pull/44457) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Added a component token to the Input component for customizing the shadow when activated. [#44410](https://github.com/ant-design/ant-design/pull/44410) +- 🆕 Added a component token to the Radio component for customizing the color when the fill button is selected. [#44389](https://github.com/ant-design/ant-design/pull/44389) +- 🆕 Tour component now supports horizontal offset for spacing. [#44377](https://github.com/ant-design/ant-design/pull/44377) [@RedJue](https://github.com/RedJue) +- 🆕 Tour component now supports customizing the close button using the `closeIcon` prop. [#44312](https://github.com/ant-design/ant-design/pull/44312) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Avatar component now supports configuring size using ConfigProvider. [#44288](https://github.com/ant-design/ant-design/pull/44288) [@li-jia-nan](https://github.com/li-jia-nan) +- 🆕 List component now supports configuring size using ConfigProvider's `componentSize` option. [#44267](https://github.com/ant-design/ant-design/pull/44267) [@Yuiai01](https://github.com/Yuiai01) +- 🆕 Cascader component now supports `autoClearSearchValue` option. [#44033](https://github.com/ant-design/ant-design/pull/44033) [@linxianxi](https://github.com/linxianxi) +- 🆕 Added support for `rootClassName` in [Upload](https://github.com/ant-design/ant-design/pull/44060),[AutoComplete](https://github.com/ant-design/ant-design/pull/44055),[Badge.Ribbon](https://github.com/ant-design/ant-design/pull/44056),[Input.TextArea](https://github.com/ant-design/ant-design/pull/44058),[RangePicker](https://github.com/ant-design/ant-design/pull/44057),[TimePicker](https://github.com/ant-design/ant-design/pull/44059) [@kiner-tang](https://github.com/kiner-tang). +- 💄 Refactored the structure of Modal.confirm to fix the width abnormality caused by `width: fit-content` and the style line break issue with a large amount of text. Extracted confirm styles for lazy loading to optimize style size in SSR. [#44557](https://github.com/ant-design/ant-design/pull/44557) +- 💄 Adjusted the linear gradient colors for `circle` and `dashboard` in Progress to conical gradients. [#44404](https://github.com/ant-design/ant-design/pull/44404) +- 💄 Fixed DatePicker missing custom footer style. [#44642](https://github.com/ant-design/ant-design/pull/44642) [@li-jia-nan](https://github.com/li-jia-nan) +- 💄 Fixed Tag where `tag.className` and `tag.style` did not work on Tag.CheckableTag in ConfigProvider. [#44602](https://github.com/ant-design/ant-design/pull/44602) +- 💄 Fixed the inconsistency in width between the dropdown and the input box when the container of Select component has `transform: scale` style configured in `getPopupContainer` option. [#44378](https://github.com/ant-design/ant-design/pull/44378) +- 🐞 Fixed an issue where Form.Item with `noStyle` configuration prevented the bound element from consuming `useStatus`. [#44576](https://github.com/ant-design/ant-design/pull/44576) +- 🐞 Fixed an issue where using Tag within Popover/Popconfirm caused incorrect `font-size` on hover. [#44663](https://github.com/ant-design/ant-design/pull/44663) +- 🐞 Fixed an issue where Input's default button had extra shadow. [#44660](https://github.com/ant-design/ant-design/pull/44660) [@daledelv](https://github.com/daledelv) +- 🐞 Fixed an issue where using Modal's hooks to close it with the `esc` key didn't correctly trigger the `await`. [#44646](https://github.com/ant-design/ant-design/pull/44646) +- 🐞 Fixed the issue where the preset `size` of Space did not follow the Design Token, now compact mode correctly handles the corresponding spacing values. [#44598](https://github.com/ant-design/ant-design/pull/44598) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 Fixed the issue in Upload where the download button would still be displayed after clicking on it and moving the mouse out of the file. [#44594](https://github.com/ant-design/ant-design/pull/44594) [@zbw-zbw](https://github.com/zbw-zbw) +- 🐞 Fix FloatButton that margin not work with `href` in FloatButton.Group. [#44707](https://github.com/ant-design/ant-design/pull/44707) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 Fixed the issue where `fontSizeSM` token was not being applied to Button component. [#44217](https://github.com/ant-design/ant-design/pull/44217) [@CHENGTIANG](https://github.com/CHENGTIANG) +- 🐞 The Watermark now works in nested Modal and Drawer components. [#44104](https://github.com/ant-design/ant-design/pull/44104) +- 🛠 Alert, Tree, Cascader, Layout, Table, Modal, Drawer, Button, Switch, Select, Badge, Form, TimePicker, Spin, Input, Progress, Divider Added Component Token. [#42142](https://github.com/ant-design/ant-design/pull/42142) [#42607](https://github.com/ant-design/ant-design/pull/42607) [#42627](https://github.com/ant-design/ant-design/pull/42627) [#42757](https://github.com/ant-design/ant-design/pull/42757) [#42774](https://github.com/ant-design/ant-design/pull/42774) [#42778](https://github.com/ant-design/ant-design/pull/42778) [#44090](https://github.com/ant-design/ant-design/pull/44090) [#44118](https://github.com/ant-design/ant-design/pull/44118) [#44174](https://github.com/ant-design/ant-design/pull/44174) [#44228](https://github.com/ant-design/ant-design/pull/44228) [#44261](https://github.com/ant-design/ant-design/pull/44261) [#44282](https://github.com/ant-design/ant-design/pull/44282) [#44334](https://github.com/ant-design/ant-design/pull/44334) [#42192](https://github.com/ant-design/ant-design/pull/42192) [@hms181231](https://github.com/hms181231) [@linhf123](https://github.com/linhf123) [@poyiding](https://github.com/poyiding) [@Wxh16144](https://github.com/Wxh16144) [@Yuiai01](https://github.com/Yuiai01) +- 🛠 Remove compatibility logic for old versions of IE browser for Space and Grid components to reduce bundle size. [#44620](https://github.com/ant-design/ant-design/pull/44620) [@li-jia-nan](https://github.com/li-jia-nan) +- TypeScript + - 🤖 Export BasicDataNode type from the Tree. [#44624](https://github.com/ant-design/ant-design/pull/44624) [@kiner-tang](https://github.com/kiner-tang) + ## 5.8.6 `2023-09-02` @@ -49,8 +94,8 @@ tag: vVERSION - 🐞 Fix Tour panel use wrong design token. [#44428](https://github.com/ant-design/ant-design/pull/44428) - 🐞 Fix Form `wrapperCol` with responsive `xs` config not working. [#44388](https://github.com/ant-design/ant-design/pull/44388) - 🐞 Fix ColorPicker duplicate `key` issue. [#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master) -- 🐞 Fix Radio that not work in Tree title. [#44380](https://github.com/ant-design/ant-design/pull/44380) [@MadCcc](https://github.com/MadCcc) -- 🐞 Fix Table that would crash when `filterDropdown` does not support `ref`. [#44357](https://github.com/ant-design/ant-design/pull/44357) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Radio that not work in Tree title. [#44380](https://github.com/ant-design/ant-design/pull/44380) +- 🐞 Fix Table that would crash when `filterDropdown` does not support `ref`. [#44357](https://github.com/ant-design/ant-design/pull/44357) - 🐞 Fix Form `inline` layout show extra bottom margin when validation failed. [#44360](https://github.com/ant-design/ant-design/pull/44360) - 🐞 Fix DatePicker `showTime` working error when `format` is Array. [#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502) - 🐞 Fix Watermark can not be fully shown when `content` is too long. [#44321](https://github.com/ant-design/ant-design/pull/44321) @@ -86,14 +131,14 @@ tag: vVERSION - 💄 Fix Carousel `dots` extra margin style. [#44076](https://github.com/ant-design/ant-design/pull/44076) - 🐞 Fix Modal footer disabled state that affect by Form. [#43055](https://github.com/ant-design/ant-design/pull/43055) [@Wxh16144](https://github.com/Wxh16144) - 🐞 Fix Upload thumbnail that gif will not play. [#44083](https://github.com/ant-design/ant-design/pull/44083) [@linxianxi](https://github.com/linxianxi) -- 🐞 Fix FloatButton that menu mode didn't support `badge` prop. [#44109](https://github.com/ant-design/ant-design/pull/44109) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix FloatButton that menu mode didn't support `badge` prop. [#44109](https://github.com/ant-design/ant-design/pull/44109) - 🐞 Fix Grid & List responsive config take effect after first render which cause screen flick. [#44075](https://github.com/ant-design/ant-design/pull/44075) -- 🐞 Fix that Design Token partially missing when `@ant-design/cssinjs` version `1.15.0`. [#44091](https://github.com/ant-design/ant-design/pull/44091) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix that Design Token partially missing when `@ant-design/cssinjs` version `1.15.0`. [#44091](https://github.com/ant-design/ant-design/pull/44091) - 💄 Fix Badge `status="processing"` with `dot` wave style issue. [#44153](https://github.com/ant-design/ant-design/pull/44153) - 💄 Fix Descriptions border styles when it nests itself. [#43454](https://github.com/ant-design/ant-design/pull/43454) [@Yuiai01](https://github.com/Yuiai01) - 💄 Fix Pagination transition style in prev/next buttons. [#44030](https://github.com/ant-design/ant-design/pull/44030) - 💄 Fix Popconfirm button group wraps unexpectedly. [#44022](https://github.com/ant-design/ant-design/pull/44022) [@MuxinFeng](https://github.com/MuxinFeng) -- 💄 Optimize style of Image preview operation icons. [#44141](https://github.com/ant-design/ant-design/pull/44141) [@MadCcc](https://github.com/MadCcc) +- 💄 Optimize style of Image preview operation icons. [#44141](https://github.com/ant-design/ant-design/pull/44141) - 💄 Optimize Input and InputNumber font size in large mode. [#44000](https://github.com/ant-design/ant-design/pull/44000) [@MuxinFeng](https://github.com/MuxinFeng) - 💄 Remove Space part useless style. [#44098](https://github.com/ant-design/ant-design/pull/44098) @@ -104,7 +149,7 @@ tag: vVERSION - 🐞 Fix Checkbox & Radio not support customize wave and add className `ant-wave-target` for this case. [#44014](https://github.com/ant-design/ant-design/pull/44014) - 🐞 Adjust Form.Item renderProps definition to return correct `FormInstance`. [#43996](https://github.com/ant-design/ant-design/pull/43996) - 🐞 Fixed Table incorrect expand icon direction and row indentation in RTL. [#43977](https://github.com/ant-design/ant-design/pull/43977) [@Yuiai01](https://github.com/Yuiai01) -- 💄 Fix Pagination that should not have hover and focus style when disabled. [#43970](https://github.com/ant-design/ant-design/pull/43970) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Pagination that should not have hover and focus style when disabled. [#43970](https://github.com/ant-design/ant-design/pull/43970) - TypeScript - 🤖 Fix Drawer & Anchor part Design Token TS description not correct issue. [#43994](https://github.com/ant-design/ant-design/pull/43994) [@wving5](https://github.com/wving5) @@ -120,7 +165,7 @@ tag: vVERSION `2023-08-01` -- 🔥 Component Token support `algorithm` to calculate derivative tokens same as global. [#43810](https://github.com/ant-design/ant-design/pull/43810) [@MadCcc](https://github.com/MadCcc) +- 🔥 Component Token support `algorithm` to calculate derivative tokens same as global. [#43810](https://github.com/ant-design/ant-design/pull/43810) - 🔥 Modal hooks function support `await` call. [#43470](https://github.com/ant-design/ant-design/pull/43470) - 🔥 ConfigProvider support `wave` to customize wave effect. [#43784](https://github.com/ant-design/ant-design/pull/43784) - 🆕 Form support `getFieldsValue({ strict: true })` to support only Item bind values. [#43828](https://github.com/ant-design/ant-design/pull/43828) @@ -164,11 +209,11 @@ tag: vVERSION `2023-07-20` -- 💄 Fix Menu miss hover style issue. [#43656](https://github.com/ant-design/ant-design/pull/43656) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Menu miss hover style issue. [#43656](https://github.com/ant-design/ant-design/pull/43656) - 🐞 Fix Notification throwPurePanel definition missing error. [#43687](https://github.com/ant-design/ant-design/pull/43687) [@li-jia-nan](https://github.com/li-jia-nan) - 🐞 Fix Button `onClick` missing `event` definition. [#43666](https://github.com/ant-design/ant-design/pull/43666) - 🐞 Fix Input and InputNumber align issue. [#43548](https://github.com/ant-design/ant-design/pull/43548) [@bbb169](https://github.com/bbb169) -- 🐞 Fix DatePicker suffix use wrong token. [#43646](https://github.com/ant-design/ant-design/pull/43646) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix DatePicker suffix use wrong token. [#43646](https://github.com/ant-design/ant-design/pull/43646) - 🐞 Fix Steps with clickable can not trigger by keyboard. [#43644](https://github.com/ant-design/ant-design/pull/43644) - TypeScript - 🤖 Remove Button type `ghost` from TS definition. [#43675](https://github.com/ant-design/ant-design/pull/43675) @@ -215,15 +260,15 @@ tag: vVERSION - 🛠 Resolved Circular dependency issue in vite, rollup, meteor and microbundle. [#42750](https://github.com/ant-design/ant-design/pull/42750). Thanks to [@jrr997](https://github.com/jrr997), [@kiner-tang](https://github.com/kiner-tang) and [@MuxinFeng](https://github.com/MuxinFeng) for their contributions. - 🐞 Remove default values (empty string) of `className` prop in Anchor, CollapsePanel, and Input.Group. [#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany) - 🐞 Fix Upload progress bar missing fade motion. [#43471](https://github.com/ant-design/ant-design/pull/43471) -- 🐞 Added warning for deprecated Token `colorItemBgSelected` in Menu. [#43461](https://github.com/ant-design/ant-design/pull/43461) [@MadCcc](https://github.com/MadCcc) +- 🐞 Added warning for deprecated Token `colorItemBgSelected` in Menu. [#43461](https://github.com/ant-design/ant-design/pull/43461) - 🐞 MISC: Fixed an issue where some browsers had scroll bars that were not redrawn when style feature support was detected. [#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM) - 🐞 Fixed an issue where the Tab component of Card would not be displayed at all when tabList is empty. [#43416](https://github.com/ant-design/ant-design/pull/43416) [@linxianxi](https://github.com/linxianxi) - 🐞 Fixed an issue where the `form.validateMessages` configuration would be lost when using ConfigProvider nestedly. [#43239](https://github.com/ant-design/ant-design/pull/43239) [@Wxh16144](https://github.com/Wxh16144) - 🐞 Fixed an issue where the ripple effect of Tag click would sometimes be offset from the Tag element. [#43402](https://github.com/ant-design/ant-design/pull/43402) - 🐞 Fixed an issue where clicking "now" in DatePicker when switching to the year-month panel would not work. [#43367](https://github.com/ant-design/ant-design/pull/43367) [@Yuiai01](https://github.com/Yuiai01) -- 🐞 Fixed an issue where the height set for the Input.TextArea component would become invalid when the screen size changed. [#43169](https://github.com/ant-design/ant-design/pull/43169) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fixed an issue where the height set for the Input.TextArea component would become invalid when the screen size changed. [#43169](https://github.com/ant-design/ant-design/pull/43169) - 💄 In Slider, the `tooltip` should be centered when there is little content. [#43430](https://github.com/ant-design/ant-design/pull/43430) [@Jomorx](https://github.com/Jomorx) -- 💄 Design Token add `colorLink` to the seed token, and `colorLinkHover` and `colorLinkActive` will be calculated from colorLink. [#43183](https://github.com/ant-design/ant-design/pull/43183) [@MadCcc](https://github.com/MadCcc) +- 💄 Design Token add `colorLink` to the seed token, and `colorLinkHover` and `colorLinkActive` will be calculated from colorLink. [#43183](https://github.com/ant-design/ant-design/pull/43183) - 💄 Adjusted some tokens in Slider to component tokens. [#42428](https://github.com/ant-design/ant-design/pull/42428) [@heiyu4585](https://github.com/heiyu4585) RTL[#42428](https://github.com/ant-design/ant-design/pull/42428) [@heiyu4585](https://github.com/heiyu4585) - RTL - 🤖 Progress now supports animations in rtl direction. [#43316](https://github.com/ant-design/ant-design/pull/43316) [@Yuiai01](https://github.com/Yuiai01) @@ -248,7 +293,7 @@ tag: vVERSION - 🐞 Fix the Badge `color` attribute does not take effect. [#43304](https://github.com/ant-design/ant-design/pull/43304) - 🐞 Fix the position of Select clear icon when FormItem sets `hasFeedback`. [#43302](https://github.com/ant-design/ant-design/pull/43302) [@tinyfind](https://github.com/tinyfind) - 🐞 Fix Transfer paging drop-down button is hidden and `showSizeChanger` method is invalid. [#41906](https://github.com/ant-design/ant-design/pull/41906) [@Yuiai01](https://github.com/Yuiai01) -- 🐞 Fix the invalid modification of `colorText` and `fontSize` of Popconfirm component. [#43212](https://github.com/ant-design/ant-design/pull/43212) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix the invalid modification of `colorText` and `fontSize` of Popconfirm component. [#43212](https://github.com/ant-design/ant-design/pull/43212) - 🐞 Fix the problem that deleting files after Upload configures `maxCount` will not trigger `onChange`. [#43193](https://github.com/ant-design/ant-design/pull/43193) - 💄 Fix Button disabled style error when it has `link` or `href` attribute. [#43091](https://github.com/ant-design/ant-design/pull/43091) [@BoyYangzai](https://github.com/BoyYangzai) - TypeScript @@ -310,7 +355,7 @@ tag: vVERSION - 🆕 ColorPicker add `onClear` and dont't close panel when clearing. [#42634](https://github.com/ant-design/ant-design/pull/42634) [@linxianxi](https://github.com/linxianxi) - 🆕 Collapse `items` to support configure panel content. [#42545](https://github.com/ant-design/ant-design/pull/42545) [@kiner-tang](https://github.com/kiner-tang) -- 🆕 Add static function `getDesignToken` to access full Design Token. [#42723](https://github.com/ant-design/ant-design/pull/42723) [@MadCcc](https://github.com/MadCcc) +- 🆕 Add static function `getDesignToken` to access full Design Token. [#42723](https://github.com/ant-design/ant-design/pull/42723) - 🆕 ConfigProvider support configure Space `classNames` and `styles` properties. [#42748](https://github.com/ant-design/ant-design/pull/42748) [@RedJue](https://github.com/RedJue) - 🆕 Space support `classNames` and `styles` properties. [#42743](https://github.com/ant-design/ant-design/pull/42743) [@RedJue](https://github.com/RedJue) - 🆕 Drawer panel support event listener. Wrapper support passing `data-*` props. [#42718](https://github.com/ant-design/ant-design/pull/42718) [@kiner-tang](https://github.com/kiner-tang) @@ -324,12 +369,12 @@ tag: vVERSION - 🆕 ConfigProvider.config support `theme` for static method config. [#42473](https://github.com/ant-design/ant-design/pull/42473) - 🆕 Calendar `onSelect` support `info.source` param to help get select source. [#42432](https://github.com/ant-design/ant-design/pull/42432) - 💄 Optimize ColorPicker style in dark theme. [#42827](https://github.com/ant-design/ant-design/pull/42827) [@RedJue](https://github.com/RedJue) -- 💄 Fix Popconfirm, Alert and Notification that `colorTextHeading` and `colorText` usage. [#42839](https://github.com/ant-design/ant-design/pull/42839) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Popconfirm, Alert and Notification that `colorTextHeading` and `colorText` usage. [#42839](https://github.com/ant-design/ant-design/pull/42839) - 💄 Fix Divider style problem. [#42797](https://github.com/ant-design/ant-design/pull/42797) [@kongmingLatern](https://github.com/kongmingLatern) - 🐞 Fix Image.PreviewGroup not reset image state when switch it. [#42793](https://github.com/ant-design/ant-design/pull/42793) [@linxianxi](https://github.com/linxianxi) - 🐞 Reduce bundle size by refactor via `rc-util/lib/pickAttrs`. Fix Rate `findDOMNode is deprecated` warning in StrictMode. [#42688](https://github.com/ant-design/ant-design/pull/42688) - 🐞 Rate could accept `id` `data-*` `aria-*` `role` `onMouseEnter` `onMouseLeave` attributes now, so that it can be wrapped by Tooltip component. [#42676](https://github.com/ant-design/ant-design/pull/42676) -- 🐞 Fix Menu.Submenu not aligned in horizontal mode. [#42648](https://github.com/ant-design/ant-design/pull/42648) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Menu.Submenu not aligned in horizontal mode. [#42648](https://github.com/ant-design/ant-design/pull/42648) - 🐞 Align Card `tabList` API with Tab `items`. [#42413](https://github.com/ant-design/ant-design/pull/42413) - 🐞 Fix circular dependencies. - 🐞 Fix Modal circular dependency issue. [#42841](https://github.com/ant-design/ant-design/pull/42841) [@kiner-tang](https://github.com/kiner-tang) @@ -340,10 +385,10 @@ tag: vVERSION - ⌨️ Improve Progress accessibility by adding more `aria` props. [#42704](https://github.com/ant-design/ant-design/pull/42704) [@MehmetYararVX](https://github.com/MehmetYararVX) - ⌨️ Notification add role `props`. [#42484](https://github.com/ant-design/ant-design/pull/42484) [@guan404ming](https://github.com/guan404ming) - 🛠 Collapse use `onKeyDown` instead of `onKeyPress` to change collapse panel active state. [#42592](https://github.com/ant-design/ant-design/pull/42592) [@kiner-tang](https://github.com/kiner-tang) -- 🛠 Refactor Menu with `@rc-component/trigger`. Remove `rc-trigger` and reduce bundle size. [#42554](https://github.com/ant-design/ant-design/pull/42554) [@MadCcc](https://github.com/MadCcc) +- 🛠 Refactor Menu with `@rc-component/trigger`. Remove `rc-trigger` and reduce bundle size. [#42554](https://github.com/ant-design/ant-design/pull/42554) - 🛠 Table rename `sorterOrder` to `sortOrder` for arguement of `sortIcon`. [#42519](https://github.com/ant-design/ant-design/pull/42519) [@sawadyecma](https://github.com/sawadyecma) - Component Token Migration. For more info: [Migrate less variables](/docs/react/migrate-less-variables) - - 🛠 Rename Menu component token with new naming standard. [#42848](https://github.com/ant-design/ant-design/pull/42848) [@MadCcc](https://github.com/MadCcc) + - 🛠 Rename Menu component token with new naming standard. [#42848](https://github.com/ant-design/ant-design/pull/42848) - 🛠 Migrate Radio less variables. [#42050](https://github.com/ant-design/ant-design/pull/42050) [@Yuiai01](https://github.com/Yuiai01) - 🛠 Migrate Image less variables. [#42048](https://github.com/ant-design/ant-design/pull/42048) [@guan404ming](https://github.com/guan404ming) - 🛠 Migrate Tooltip less variables. [#42046](https://github.com/ant-design/ant-design/pull/42046) [@guan404ming](https://github.com/guan404ming) @@ -375,19 +420,19 @@ tag: vVERSION `2023-05-30` - 🐞 Fix ColorPicker hover boundary issue. [#42669](https://github.com/ant-design/ant-design/pull/42669) [@RedJue](https://github.com/RedJue) -- 🐞 Fix Menu that `overflowedIndicatorClassName` should not override origin classes. [#42692](https://github.com/ant-design/ant-design/pull/42692) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Menu that `overflowedIndicatorClassName` should not override origin classes. [#42692](https://github.com/ant-design/ant-design/pull/42692) - 🐞 Fix Select that in some cases will display the letter `A`. [#42651](https://github.com/ant-design/ant-design/pull/42651) [@895433995](https://github.com/895433995) - 🐞 Fix Card when `cover` is set to Image, hover mask does not have rounded corner attribute, resulting in UI exception. [#42642](https://github.com/ant-design/ant-design/pull/42642) [@iNeedToCopy](https://github.com/iNeedToCopy) -- 🐞 Fix Checkbox align with label. [#42590](https://github.com/ant-design/ant-design/pull/42590) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix Checkbox align with label. [#42590](https://github.com/ant-design/ant-design/pull/42590) - 🐞 Fix ConfigProvider makes Form component in the bundle even not use it. [#42604](https://github.com/ant-design/ant-design/pull/42604) - 🐞 Fix InputNumber cannot align well by baseline. [#42580](https://github.com/ant-design/ant-design/pull/42580) -- 🐞 Fix spinning icon animation in Badge. [#42575](https://github.com/ant-design/ant-design/pull/42575) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix spinning icon animation in Badge. [#42575](https://github.com/ant-design/ant-design/pull/42575) - 📦 Optimize Form `setFieldsValue` logic to reduce bundle size. [#42635](https://github.com/ant-design/ant-design/pull/42635) - 💄 Optimize Image.ImagePreviewGroup style. [#42675](https://github.com/ant-design/ant-design/pull/42675) [@kiner-tang](https://github.com/kiner-tang) - 💄 Fix Tag borderless style with `error` and other status. [#42619](https://github.com/ant-design/ant-design/pull/42619) [@li-jia-nan](https://github.com/li-jia-nan) - 💄 Fix Table `rowSpan` hover highlight style missing. [#42572](https://github.com/ant-design/ant-design/pull/42572) - 💄 Fix Pagination's link icon and ellipsis hover style when disabled. [#42541](https://github.com/ant-design/ant-design/pull/42541) [@qmhc](https://github.com/qmhc) -- 💄 Fix Design Token that global token should be able to override component style. [#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc) +- 💄 Fix Design Token that global token should be able to override component style. [#42535](https://github.com/ant-design/ant-design/pull/42535) - 🇱🇹 Add missing i18n for `lt_LT` locale. [#42664](https://github.com/ant-design/ant-design/pull/42664) [@Digital-512](https://github.com/Digital-512) - RTL - 💄 Fix ColorPicker style in RTL mode. [#42716](https://github.com/ant-design/ant-design/pull/42716) [@RedJue](https://github.com/RedJue) @@ -397,7 +442,7 @@ tag: vVERSION `2023-05-22` -- 🐞 Fix wrong Button icon size and margin. [#42516](https://github.com/ant-design/ant-design/pull/42516) [@MadCcc](https://github.com/MadCcc) +- 🐞 Fix wrong Button icon size and margin. [#42516](https://github.com/ant-design/ant-design/pull/42516) - 🐞 Fix Select remove & selected icon not align in center. [#42513](https://github.com/ant-design/ant-design/pull/42513) - 🐞 Refactor Popconfirm DOM structure to fix extra margin before `title` and `description` when `icon={null}`. [#42433](https://github.com/ant-design/ant-design/pull/42433) - 🐞 Fix Menu item icon not centered when `itemMarginInline` is 0. [#42426](https://github.com/ant-design/ant-design/pull/42426) [@zzwgh](https://github.com/zzwgh) diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md index 8a3d6241a4db..f5377da94703 100644 --- a/CHANGELOG.zh-CN.md +++ b/CHANGELOG.zh-CN.md @@ -16,6 +16,51 @@ tag: vVERSION --- +## 5.9.0 + +`2023-09-08` + +- 🔥 Table 支持 `virtual` 属性开启虚拟滚动。[#44349](https://github.com/ant-design/ant-design/pull/44349) +- 🔥 Form `validateFields` 支持 `recursive` 以校验所有包含路径的字段。[#44130](https://github.com/ant-design/ant-design/pull/44130) +- 🔥 Form.Item 支持 `validateDebounce` 以配置校验防抖。[#44633](https://github.com/ant-design/ant-design/pull/44633) +- 🆕 Button 组件新增 `contentFontSize` `contentFontSizeSM` `contentFontSizeLG` 三个组件 token ，用于定制各个尺寸下的字体大小。[#44257](https://github.com/ant-design/ant-design/pull/44257) +- 🆕 Form `requiredMark` 支持自定义渲染。[#44073](https://github.com/ant-design/ant-design/pull/44073) +- 🆕 Tabs 组件添加新组件 Token `itemColor`，用于控制常态 tab 的文本颜色。[#44201](https://github.com/ant-design/ant-design/pull/44201) +- 🆕 ColorPicker 组件支持 `defaultFormat` 属性。[#44487](https://github.com/ant-design/ant-design/pull/44487) [@CYBYOB](https://github.com/CYBYOB) +- 🆕 Form 新增 `feedbackIcons` 属性且 Form.Item 支持 `hasFeedback={{ icons: ... }}`，用于自定义校验图标。[#43894](https://github.com/ant-design/ant-design/pull/43894) [@gldio](https://github.com/gldio) +- 🆕 Segmented 组件新增 `itemSelectedColor` 的组件 Token。[#44570](https://github.com/ant-design/ant-design/pull/44570) [@xiaozisong](https://github.com/xiaozisong) +- 🆕 Modal 页脚 `footer` 支持自定义函数渲染。[#44318](https://github.com/ant-design/ant-design/pull/44318) [@RedJue](https://github.com/RedJue) +- 🆕 Descriptions 的 `items.span` 支持响应式设置。[#44534](https://github.com/ant-design/ant-design/pull/44534) +- 🆕 Tabs 组件 `indicatorSize` 支持通过 ConfigProvider 全局配置。[#44406](https://github.com/ant-design/ant-design/pull/44406) +- 🆕 Transfer 组件 `filterOption` 函数新增 `direction` 入参。[#44417](https://github.com/ant-design/ant-design/pull/44417) [@Zian502](https://github.com/Zian502) +- 🆕 Input.Search 组件支持在 `onSearch` 方法中接受 `source` 参数。[#44457](https://github.com/ant-design/ant-design/pull/44457) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Input 组件新增组件 Token 用于定制激活态阴影。[#44410](https://github.com/ant-design/ant-design/pull/44410) +- 🆕 Radio 组件新增组件 Token，用于定制填充按钮选中时的颜色。[#44389](https://github.com/ant-design/ant-design/pull/44389) +- 🆕 Tour 组件间距支持横向偏移量。[#44377](https://github.com/ant-design/ant-design/pull/44377) [@RedJue](https://github.com/RedJue) +- 🆕 Tour 组件支持通过 `closeIcon` 来自定义关闭按钮。[#44312](https://github.com/ant-design/ant-design/pull/44312) [@kiner-tang](https://github.com/kiner-tang) +- 🆕 Avatar 支持使用 ConfigProvider 的 `componentSize` 配置 `size`。[#44288](https://github.com/ant-design/ant-design/pull/44288) [@li-jia-nan](https://github.com/li-jia-nan) +- 🆕 List 支持使用 ConfigProvider 的 `componentSize` 配置 `size`。[#44267](https://github.com/ant-design/ant-design/pull/44267) [@Yuiai01](https://github.com/Yuiai01) +- 🆕 Cascader 支持 `autoClearSearchValue` 属性。[#44033](https://github.com/ant-design/ant-design/pull/44033) [@linxianxi](https://github.com/linxianxi) +- 🆕 在 [Upload](https://github.com/ant-design/ant-design/pull/44060)、[AutoComplete](https://github.com/ant-design/ant-design/pull/44055)、[Badge.Ribbon](https://github.com/ant-design/ant-design/pull/44056)、[Input.TextArea](https://github.com/ant-design/ant-design/pull/44058)、[RangePicker](https://github.com/ant-design/ant-design/pull/44057)、[TimePicker](https://github.com/ant-design/ant-design/pull/44059) 中添加了对 `rootClassName` 的支持。[@kiner-tang](https://github.com/kiner-tang)。 +- 💄 重构 Modal.confirm 结构以修复 `width: fit-content` 导致宽度异常问题以及大量文本下的样式断行问题。抽离 confirm 样式至懒加载以优化 SSR 下的样式尺寸。[#44557](https://github.com/ant-design/ant-design/pull/44557) +- 💄 Progress 调整 `circle` 和 `dashboard` 的线性渐变色为锥形渐变色。[#44404](https://github.com/ant-design/ant-design/pull/44404) +- 💄 修复 DatePicker 组件自定义页脚样式问题。[#44642](https://github.com/ant-design/ant-design/pull/44642) [@li-jia-nan](https://github.com/li-jia-nan) +- 💄 修复 ConfigProvider `tag.className` 与 `tag.style` 无法作用于 Tag.CheckableTag 的问题。[#44602](https://github.com/ant-design/ant-design/pull/44602) +- 💄 修复 Select 配置的 `getPopupContainer` 容器有 `transform: scale` 样式时，弹出框宽度与输入框不一致的情况。[#44378](https://github.com/ant-design/ant-design/pull/44378) +- 🐞 修复 Form.Item 配置 `noStyle` 时，被绑定的元素无法消费 `useStatus` 的问题。[#44576](https://github.com/ant-design/ant-design/pull/44576) +- 🐞 修复 Tag 被 Popover/Popconfirm 包裹时，Hover 会导致 `font-size` 错误的问题。[#44663](https://github.com/ant-design/ant-design/pull/44663) +- 🐞 修复 Input.Search 组合中，搜索按钮会额外阴影的问题。[#44660](https://github.com/ant-design/ant-design/pull/44660) [@daledelv](https://github.com/daledelv) +- 🐞 修复 Modal 的 hooks 调用通过按键 `esc` 关闭时无法正确触发 await 的问题。[#44646](https://github.com/ant-design/ant-design/pull/44646) +- 🐞 修复 Space 的预设 `size` 不会跟随 Design Token 的问题，现在紧凑模式也会正确处理对应的间距数值。[#44598](https://github.com/ant-design/ant-design/pull/44598) [@li-jia-nan](https://github.com/li-jia-nan) +- 🐞 修复 Upload 组件点击某文件的下载按钮后，鼠标移出该文件时仍展示下载按钮的问题。[#44594](https://github.com/ant-design/ant-design/pull/44594) [@zbw-zbw](https://github.com/zbw-zbw) +- 🐞 修复 FloatButton 组件添加 `href` 后在 FloatButton.Group 中间距失效的问题。[#44707](https://github.com/ant-design/ant-design/pull/44707) [@Yuiai01](https://github.com/Yuiai01) +- 🐞 修复 Button `fontSizeSM` token 不生效的问题。[#44217](https://github.com/ant-design/ant-design/pull/44217) [@CHENGTIANG](https://github.com/CHENGTIANG) +- 🐞 Watermark 现在可以在嵌套的 Modal 和 Drawer 组件中生效。[#44104](https://github.com/ant-design/ant-design/pull/44104) +- 🛠 迁移 Alert、Tree、Cascader、Layout、Table、Modal、Drawer、Button、Switch、Select、Badge、Form、TimePicker、Spin、Input、Progress、Divider 的 less 变量到 Token。 [#42142](https://github.com/ant-design/ant-design/pull/42142) [#42607](https://github.com/ant-design/ant-design/pull/42607) [#42627](https://github.com/ant-design/ant-design/pull/42627) [#42757](https://github.com/ant-design/ant-design/pull/42757) [#42774](https://github.com/ant-design/ant-design/pull/42774) [#42778](https://github.com/ant-design/ant-design/pull/42778) [#44090](https://github.com/ant-design/ant-design/pull/44090)[#44118](https://github.com/ant-design/ant-design/pull/44118) [#44174](https://github.com/ant-design/ant-design/pull/44174) [#44228](https://github.com/ant-design/ant-design/pull/44228) [#44261](https://github.com/ant-design/ant-design/pull/44261) [#44282](https://github.com/ant-design/ant-design/pull/44282) [#44334](https://github.com/ant-design/ant-design/pull/44334) [#42192](https://github.com/ant-design/ant-design/pull/42192) [@hms181231](https://github.com/hms181231) [@linhf123](https://github.com/linhf123) [@poyiding](https://github.com/poyiding) [@Wxh16144](https://github.com/Wxh16144) [@Yuiai01](https://github.com/Yuiai01) +- 📦 移除 Space 和 Grid 对于旧版 IE 浏览器兼容逻辑，减少打包产物体积。[#44620](https://github.com/ant-design/ant-design/pull/44620) [@li-jia-nan](https://github.com/li-jia-nan) +- TypeScript + - 🤖 从 Tree 中导出 `BasicDataNode` 类型。[#44624](https://github.com/ant-design/ant-design/pull/44624) [@kiner-tang](https://github.com/kiner-tang) + ## 5.8.6 `2023-09-02` @@ -49,8 +94,8 @@ tag: vVERSION - 🐞 修复 Tour 面板使用的 design token 错误的问题。[#44428](https://github.com/ant-design/ant-design/pull/44428) - 🐞 修复 Form `wrapperCol` 配置响应式 `xs` 属性无效的问题。[#44388](https://github.com/ant-design/ant-design/pull/44388) - 🐞 修复 ColorPicker 中重复 `key` 的问题。[#44370](https://github.com/ant-design/ant-design/pull/44370) [@xr0master](https://github.com/xr0master) -- 🐞 修复 Radio 组件组合 Tree 组件后失效的问题。[#44380](https://github.com/ant-design/ant-design/pull/44380) [@MadCcc](https://github.com/MadCcc) -- 🐞 修复 Table 组件 `filterDropdown` 不支持 `ref` 时报错的问题。[#44357](https://github.com/ant-design/ant-design/pull/44357) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Radio 组件组合 Tree 组件后失效的问题。[#44380](https://github.com/ant-design/ant-design/pull/44380) +- 🐞 修复 Table 组件 `filterDropdown` 不支持 `ref` 时报错的问题。[#44357](https://github.com/ant-design/ant-design/pull/44357) - 🐞 修复 Form `inline` 布局在校验失败时出现额外空行的问题。[#44360](https://github.com/ant-design/ant-design/pull/44360) - 🐞 修复 DatePicker 中 `showTime` 为 true 且 `format` 为数组时，组件报错。[#44306](https://github.com/ant-design/ant-design/pull/44306) [@Zian502](https://github.com/Zian502) - 🐞 修复 Watermark 中 `content` 内容过长时无法完整显示的问题。[#44321](https://github.com/ant-design/ant-design/pull/44321) @@ -86,14 +131,14 @@ tag: vVERSION - 💄 修复 Carousel `dots` 切换点有多余 margin 的问题。[#44076](https://github.com/ant-design/ant-design/pull/44076) - 🐞 修复 Modal 页脚禁用态受 Form 影响的问题。[#43055](https://github.com/ant-design/ant-design/pull/43055) [@Wxh16144](https://github.com/Wxh16144) - 🐞 修复 Upload gif 缩略图不会动的问题。[#44083](https://github.com/ant-design/ant-design/pull/44083) [@linxianxi](https://github.com/linxianxi) -- 🐞 修复 FloatButton 组件菜单模式不支持 `badge` 配置的问题。[#44109](https://github.com/ant-design/ant-design/pull/44109) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 FloatButton 组件菜单模式不支持 `badge` 配置的问题。[#44109](https://github.com/ant-design/ant-design/pull/44109) - 🐞 修复 Grid 与 List 响应式布局生效稍晚于首次渲染导致屏幕闪动的问题。[#44075](https://github.com/ant-design/ant-design/pull/44075) -- 🐞 修复 `@ant-design/cssinjs` 版本小于 `1.15.0` 时 Design Token 部分丢失的问题。[#44091](https://github.com/ant-design/ant-design/pull/44091) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 `@ant-design/cssinjs` 版本小于 `1.15.0` 时 Design Token 部分丢失的问题。[#44091](https://github.com/ant-design/ant-design/pull/44091) - 💄 修复 Badge `status="processing"` 和 `dot` 配合使用时，波纹样式异常的问题。[#44153](https://github.com/ant-design/ant-design/pull/44153) - 💄 修复 Descriptions 组件自行嵌套时的边框样式问题。[#43454](https://github.com/ant-design/ant-design/pull/43454) [@Yuiai01](https://github.com/Yuiai01) - 💄 修复 Pagination 上下页切换按钮 `transition` 丢失的问题。[#44030](https://github.com/ant-design/ant-design/pull/44030) - 💄 修复 Popconfirm 按钮组意外换行的问题。[#44022](https://github.com/ant-design/ant-design/pull/44022) [@MuxinFeng](https://github.com/MuxinFeng) -- 💄 优化 Image 组件预览操作图标的样式。[#44141](https://github.com/ant-design/ant-design/pull/44141) [@MadCcc](https://github.com/MadCcc) +- 💄 优化 Image 组件预览操作图标的样式。[#44141](https://github.com/ant-design/ant-design/pull/44141) - 💄 优化 Input 和 InputNumber 在大尺寸下的字体大小。[#44000](https://github.com/ant-design/ant-design/pull/44000) [@MuxinFeng](https://github.com/MuxinFeng) - 💄 移除 Space 部分未使用的样式。[#44098](https://github.com/ant-design/ant-design/pull/44098) @@ -104,7 +149,7 @@ tag: vVERSION - 🐞 修复 Checkbox 与 Radio 不支持自定义水波纹效果的问题，并添加 `ant-wave-target` className 到对应元素上。[#44014](https://github.com/ant-design/ant-design/pull/44014) - 🐞 调整 Form.Item renderProps 定义，现在会返回正确的 `FormInstance`。[#43996](https://github.com/ant-design/ant-design/pull/43996) - 🐞 修复 Table 在 `direction` 为 `rlt` 时展开图标的方向和展开行的缩进有误的问题。[#43977](https://github.com/ant-design/ant-design/pull/43977) [@Yuiai01](https://github.com/Yuiai01) -- 💄 修复 Pagination 组件禁用状态仍然有悬浮和聚焦样式的问题。[#43970](https://github.com/ant-design/ant-design/pull/43970) [@MadCcc](https://github.com/MadCcc) +- 💄 修复 Pagination 组件禁用状态仍然有悬浮和聚焦样式的问题。[#43970](https://github.com/ant-design/ant-design/pull/43970) - TypeScript - 🤖 修正 Drawer 和 Anchor 部分 Design Token 的 TS 描述信息错误的问题。[#43994](https://github.com/ant-design/ant-design/pull/43994) [@wving5](https://github.com/wving5) @@ -120,7 +165,7 @@ tag: vVERSION `2023-08-01` -- 🔥 组件 ComponentToken 支持配置 `algorithm` 参数，添加配置即可像全局 Token 一样由部分修改的 token 计算派生 token 的值并用于组件样式中。[#43810](https://github.com/ant-design/ant-design/pull/43810) [@MadCcc](https://github.com/MadCcc) +- 🔥 组件 ComponentToken 支持配置 `algorithm` 参数，添加配置即可像全局 Token 一样由部分修改的 token 计算派生 token 的值并用于组件样式中。[#43810](https://github.com/ant-design/ant-design/pull/43810) - 🔥 Modal hooks 方法支持 `await` 调用。[#43470](https://github.com/ant-design/ant-design/pull/43470) - 🔥 ConfigProvider 支持 `wave` 配置以自定义水波纹效果。[#43784](https://github.com/ant-design/ant-design/pull/43784) - 🆕 Form 新增 `getFieldsValue({ strict: true })` 以支持获取仅通过 Item 绑定的字段。[#43828](https://github.com/ant-design/ant-design/pull/43828) @@ -163,11 +208,11 @@ tag: vVERSION `2023-07-20` -- 💄 修复 Menu 组件悬浮态样式丢失的问题。[#43656](https://github.com/ant-design/ant-design/pull/43656) [@MadCcc](https://github.com/MadCcc) +- 💄 修复 Menu 组件悬浮态样式丢失的问题。[#43656](https://github.com/ant-design/ant-design/pull/43656) - 🐞 修复 Notification 报错 PurePanel 定义未找到的问题。[#43687](https://github.com/ant-design/ant-design/pull/43687) [@li-jia-nan](https://github.com/li-jia-nan) - 🐞 修复 Button `onClick` 事件丢失 `event` 定义的问题。[#43666](https://github.com/ant-design/ant-design/pull/43666) - 🐞 修复 Input 和 InputNumber 行内对齐问题。[#43548](https://github.com/ant-design/ant-design/pull/43548) [@bbb169](https://github.com/bbb169) -- 🐞 修复 DatePicker 后缀颜色使用 `token` 不当的问题。[#43646](https://github.com/ant-design/ant-design/pull/43646) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 DatePicker 后缀颜色使用 `token` 不当的问题。[#43646](https://github.com/ant-design/ant-design/pull/43646) - 🐞 修复 Steps 配置可点击时不能通过键盘操作的问题。[#43644](https://github.com/ant-design/ant-design/pull/43644) - TypeScript - 🤖 移除 Button 无用的 `type="ghost"` 属性定义。[#43675](https://github.com/ant-design/ant-design/pull/43675) @@ -214,15 +259,15 @@ tag: vVERSION - 🛠 解决 vite、rollup、meteor、microbundle 等构建工具中遇到的循环依赖问题，并增加相关的检测。[#42750](https://github.com/ant-design/ant-design/pull/42750)，感谢 [@jrr997](https://github.com/jrr997)、[@kiner-tang](https://github.com/kiner-tang) 和 [@MuxinFeng](https://github.com/MuxinFeng) 的贡献。 - 🐞 移除 Anchor/CollapsePanel/Input.Group 组件中 `className` 属性的默认值（空字符串）。[#43481](https://github.com/ant-design/ant-design/pull/43481) [@thinkasany](https://github.com/thinkasany) - 🐞 修复 Upload 上传进度条延迟消失且丢失动画效果的问题。[#43471](https://github.com/ant-design/ant-design/pull/43471) -- 🐞 为 Menu 中组件 Token `colorItemBgSelected` 添加废弃警告。[#43461](https://github.com/ant-design/ant-design/pull/43461) [@MadCcc](https://github.com/MadCcc) +- 🐞 为 Menu 中组件 Token `colorItemBgSelected` 添加废弃警告。[#43461](https://github.com/ant-design/ant-design/pull/43461) - 🐞 杂项：修复样式特性支持检测时部分浏览器因为未重绘导致出现滚动条的问题。[#43358](https://github.com/ant-design/ant-design/pull/43358) [@LeeeeeeM](https://github.com/LeeeeeeM) - 🐞 修复 Card `tabList` 为空时 Tab 完全不展示的问题。[#43416](https://github.com/ant-design/ant-design/pull/43416) [@linxianxi](https://github.com/linxianxi) - 🐞 修复 ConfigProvider 嵌套使用时，`form.validateMessages` 配置会丢失的问题。[#43239](https://github.com/ant-design/ant-design/pull/43239) [@Wxh16144](https://github.com/Wxh16144) - 🐞 修复 Tag 点击的水波纹效果有时候会和 Tag 元素产生偏移的问题。[#43402](https://github.com/ant-design/ant-design/pull/43402) - 🐞 修复 DatePicker 切换到年月面板时，`此刻` 点击无效的问题。[#43367](https://github.com/ant-design/ant-design/pull/43367) [@Yuiai01](https://github.com/Yuiai01) -- 🐞 修复 Input.TextArea 组件在屏幕大小变化时设置的高度失效的问题。[#43169](https://github.com/ant-design/ant-design/pull/43169) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Input.TextArea 组件在屏幕大小变化时设置的高度失效的问题。[#43169](https://github.com/ant-design/ant-design/pull/43169) - 💄 Slider 中 `tooltip` 在内容很少时应该居中。[#43430](https://github.com/ant-design/ant-design/pull/43430) [@Jomorx](https://github.com/Jomorx) -- 💄 Design Token 将 `colorLink` 添加至 seed token 中, `colorLinkHover` 和 `colorLinkActive` 将会由 `colorLink` 计算得出。[#43183](https://github.com/ant-design/ant-design/pull/43183) [@MadCcc](https://github.com/MadCcc) +- 💄 Design Token 将 `colorLink` 添加至 seed token 中, `colorLinkHover` 和 `colorLinkActive` 将会由 `colorLink` 计算得出。[#43183](https://github.com/ant-design/ant-design/pull/43183) - 💄 调整 Slider 中部分 token 为 component token。[#42428](https://github.com/ant-design/ant-design/pull/42428) [@heiyu4585](https://github.com/heiyu4585) - RTL - 🤖 Progress 支持 rtl 方向的动画。[#43316](https://github.com/ant-design/ant-design/pull/43316) [@Yuiai01](https://github.com/Yuiai01) @@ -247,7 +292,7 @@ tag: vVERSION - 🐞 修复 Badge `color` 属性不生效的问题。[#43304](https://github.com/ant-design/ant-design/pull/43304) - 🐞 修复 Select 组件的消除图标在 FormItem 设置 `hasFeedback` 时的位置问题。[#43302](https://github.com/ant-design/ant-design/pull/43302) [@tinyfind](https://github.com/tinyfind) - 🐞 修复 Transfer 分页下拉按钮被隐藏以及 `showSizeChanger` 方法无效。[#41906](https://github.com/ant-design/ant-design/pull/41906) [@Yuiai01](https://github.com/Yuiai01) -- 🐞 修复 Popconfirm 组件 `colorText` 和 `fontSize` 修改无效的问题。[#43212](https://github.com/ant-design/ant-design/pull/43212) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Popconfirm 组件 `colorText` 和 `fontSize` 修改无效的问题。[#43212](https://github.com/ant-design/ant-design/pull/43212) - 🐞 修复 Upload 配置 `maxCount` 后删除文件不会触发 `onChange` 的问题。[#43193](https://github.com/ant-design/ant-design/pull/43193) - 💄 修复 Button 在有 `link` 或 `href` 属性时禁用样式错误。[#43091](https://github.com/ant-design/ant-design/pull/43091) [@BoyYangzai](https://github.com/BoyYangzai) - TypeScript @@ -309,7 +354,7 @@ tag: vVERSION - 🆕 ColorPicker 添加 `onClear` 属性，清除选中颜色时不自动关闭弹窗。[#42634](https://github.com/ant-design/ant-design/pull/42634) [@linxianxi](https://github.com/linxianxi) - 🆕 Collapse 支持通过 `items` 属性来配置面板内容。[#42545](https://github.com/ant-design/ant-design/pull/42545) [@kiner-tang](https://github.com/kiner-tang) -- 🆕 Design Token 新增静态方法 `getDesignToken` 用于获取完整的主题 token。[#42723](https://github.com/ant-design/ant-design/pull/42723) [@MadCcc](https://github.com/MadCcc) +- 🆕 Design Token 新增静态方法 `getDesignToken` 用于获取完整的主题 token。[#42723](https://github.com/ant-design/ant-design/pull/42723) - 🆕 ConfigProvider 支持配置 Space 组件的 `classNames` 和 `styles` 属性。[#42748](https://github.com/ant-design/ant-design/pull/42748) [@RedJue](https://github.com/RedJue) - 🆕 Space 组件支持 `classNames` 和 `styles` 属性。[#42743](https://github.com/ant-design/ant-design/pull/42743) [@RedJue](https://github.com/RedJue) - 🆕 Drawer 抽屉面板支持事件监听，包裹元素支持传入 `data-*` 属性。[#42718](https://github.com/ant-design/ant-design/pull/42718) [@kiner-tang](https://github.com/kiner-tang) @@ -323,12 +368,12 @@ tag: vVERSION - 🆕 ConfigProvider.config 新增 `theme` 支持配置静态方法主题。[#42473](https://github.com/ant-design/ant-design/pull/42473) - 🆕 Calendar `onSelect` 支持 `info.source` 参数以获取选择来源。[#42432](https://github.com/ant-design/ant-design/pull/42432) - 💄 优化 ColorPicker 组件在暗黑模式下的样式。[#42827](https://github.com/ant-design/ant-design/pull/42827) [@RedJue](https://github.com/RedJue) -- 💄 修复 Popconfirm、Alert 和 Notification 组件 `colorTextHeading` 和 `colorText` 误用问题。[#42839](https://github.com/ant-design/ant-design/pull/42839) [@MadCcc](https://github.com/MadCcc) +- 💄 修复 Popconfirm、Alert 和 Notification 组件 `colorTextHeading` 和 `colorText` 误用问题。[#42839](https://github.com/ant-design/ant-design/pull/42839) - 💄 修复 Divider 组件的样式问题。[#42797](https://github.com/ant-design/ant-design/pull/42797) [@kongmingLatern](https://github.com/kongmingLatern) - 🐞 修复 Image.PreviewGroup 预览时图片切换后状态没有重置的问题。[#42793](https://github.com/ant-design/ant-design/pull/42793) [@linxianxi](https://github.com/linxianxi) - 🐞 统一使用 `rc-util/lib/pickAttrs` 以节省包体积。修复 Rate 组件在 StrictMode 下 `findDOMNode is deprecated` 警告信息。[#42688](https://github.com/ant-design/ant-design/pull/42688) - 🐞 Rate 组件支持传入 `id` `data-*` `aria-*` `role` `onMouseEnter` `onMouseLeave` 等属性，修复不支持 Tooltip 包裹的问题。[#42676](https://github.com/ant-design/ant-design/pull/42676) -- 🐞 修复 Menu 组件横向模式下子菜单没有对齐的问题。[#42648](https://github.com/ant-design/ant-design/pull/42648) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Menu 组件横向模式下子菜单没有对齐的问题。[#42648](https://github.com/ant-design/ant-design/pull/42648) - 🐞 将 Card `tabList` 的 API 与 Tab `items` 对齐。[#42413](https://github.com/ant-design/ant-design/pull/42413) - 🐞 修复循环依赖问题。 - 🐞 修复 Modal 组件循环依赖问题。[#42841](https://github.com/ant-design/ant-design/pull/42841) [@kiner-tang](https://github.com/kiner-tang) @@ -339,10 +384,10 @@ tag: vVERSION - ⌨️ 增强 Progress 可访问性表现，添加 `aria` 属性。[#42704](https://github.com/ant-design/ant-design/pull/42704) [@MehmetYararVX](https://github.com/MehmetYararVX) - ⌨️ Notification 添加 `role` 属性。[#42484](https://github.com/ant-design/ant-design/pull/42484) [@guan404ming](https://github.com/guan404ming) - 🛠 Collapse 使用 `onKeyDown` 替代 `onKeyPress` 来改变折叠面板的激活状态。[#42592](https://github.com/ant-design/ant-design/pull/42592) [@kiner-tang](https://github.com/kiner-tang) -- 🛠 使用 `@rc-component/trigger` 重构 Menu 组件。移除 `rc-trigger` 依赖，缩小打包体积。[#42554](https://github.com/ant-design/ant-design/pull/42554) [@MadCcc](https://github.com/MadCcc) +- 🛠 使用 `@rc-component/trigger` 重构 Menu 组件。移除 `rc-trigger` 依赖，缩小打包体积。[#42554](https://github.com/ant-design/ant-design/pull/42554) - 🛠 Table 组件将 `sorterOrder` 重命名为 `sortOrder` 用于 `sortIcon` 的参数。[#42519](https://github.com/ant-design/ant-design/pull/42519) [@sawadyecma](https://github.com/sawadyecma) - 组件 Token 迁移，更多详情请查看文档：[迁移 less 变量](/docs/react/migrate-less-variables-cn) - - 🛠 使用新的命名标准重命名 Menu 组件 token。[#42848](https://github.com/ant-design/ant-design/pull/42848) [@MadCcc](https://github.com/MadCcc) + - 🛠 使用新的命名标准重命名 Menu 组件 token。[#42848](https://github.com/ant-design/ant-design/pull/42848) - 🛠 迁移 Radio 组件 less 变量。[#42050](https://github.com/ant-design/ant-design/pull/42050) [@Yuiai01](https://github.com/Yuiai01) - 🛠 迁移 Image 组件 less 变量。[#42048](https://github.com/ant-design/ant-design/pull/42048) [@guan404ming](https://github.com/guan404ming) - 🛠 迁移 Tooltip 组件 less 变量。[#42046](https://github.com/ant-design/ant-design/pull/42046) [@guan404ming](https://github.com/guan404ming) @@ -374,19 +419,19 @@ tag: vVERSION `2023-05-30` - 🐞 修复 ColorPicker 组件悬停边界问题。[#42669](https://github.com/ant-design/ant-design/pull/42669) [@RedJue](https://github.com/RedJue) -- 🐞 修复 Menu 组件 `overflowedIndicatorClassName` 覆盖了原本的 class 的问题。[#42692](https://github.com/ant-design/ant-design/pull/42692) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Menu 组件 `overflowedIndicatorClassName` 覆盖了原本的 class 的问题。[#42692](https://github.com/ant-design/ant-design/pull/42692) - 🐞 修复 Select 组件在某些情况下显示乱码问题。[#42651](https://github.com/ant-design/ant-design/pull/42651) [@895433995](https://github.com/895433995) - 🐞 修复 Card 组件，当 Image 设置 `cover` 属性时，悬停蒙版没有圆角属性，导致 UI 异常。[#42642](https://github.com/ant-design/ant-design/pull/42642) [@iNeedToCopy](https://github.com/iNeedToCopy) -- 🐞 修复 Checkbox 和 label 不对齐的问题。[#42590](https://github.com/ant-design/ant-design/pull/42590) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Checkbox 和 label 不对齐的问题。[#42590](https://github.com/ant-design/ant-design/pull/42590) - 🐞 修复使用 ConfigProvider 会导致未使用的 Form 组件也被打包的问题。[#42604](https://github.com/ant-design/ant-design/pull/42604) - 🐞 修复 InputNumber 和其他组件无法基线对齐的问题。[#42580](https://github.com/ant-design/ant-design/pull/42580) -- 🐞 修复 Badge 组件中旋转的 `icon` 动画。[#42575](https://github.com/ant-design/ant-design/pull/42575) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Badge 组件中旋转的 `icon` 动画。[#42575](https://github.com/ant-design/ant-design/pull/42575) - 📦 优化 Form `setFieldsValue` 相关代码以降低打包尺寸。[#42635](https://github.com/ant-design/ant-design/pull/42635) - 💄 优化 Image 组件预览组样式。[#42675](https://github.com/ant-design/ant-design/pull/42675) [@kiner-tang](https://github.com/kiner-tang) - 💄 修复 Tag 无边框样式在 `error` 等状态下不生效的问题。[#42619](https://github.com/ant-design/ant-design/pull/42619) [@li-jia-nan](https://github.com/li-jia-nan) - 💄 修复 Table `rowSpan` 悬浮高亮背景颜色丢失的问题。[#42572](https://github.com/ant-design/ant-design/pull/42572) - 💄 修复 Pagination 在禁用状态下 link 图标和 ellipsis hover 时的样式。[#42541](https://github.com/ant-design/ant-design/pull/42541) [@qmhc](https://github.com/qmhc) -- 💄 修复部分全局 Design Token 无法覆盖组件样式的问题。[#42535](https://github.com/ant-design/ant-design/pull/42535) [@MadCcc](https://github.com/MadCcc) +- 💄 修复部分全局 Design Token 无法覆盖组件样式的问题。[#42535](https://github.com/ant-design/ant-design/pull/42535) - 🇱🇹 为 `lt_LT` 添加缺失的部分文案。[#42664](https://github.com/ant-design/ant-design/pull/42664) [@Digital-512](https://github.com/Digital-512) - RTL - 💄 修复 ColorPicker 组件 RTL 模式样式。[#42716](https://github.com/ant-design/ant-design/pull/42716) [@RedJue](https://github.com/RedJue) @@ -396,7 +441,7 @@ tag: vVERSION `2023-05-22` -- 🐞 修复 Button 组件 icon 尺寸和间距问题。[#42516](https://github.com/ant-design/ant-design/pull/42516) [@MadCcc](https://github.com/MadCcc) +- 🐞 修复 Button 组件 icon 尺寸和间距问题。[#42516](https://github.com/ant-design/ant-design/pull/42516) - 🐞 修复 Select 移除和选中按钮不居中的问题。[#42513](https://github.com/ant-design/ant-design/pull/42513) - 🐞 重构 Popconfirm DOM 结构以解决 `icon={null}` 时 `title` 和 `description` 的多余 margin 问题。[#42433](https://github.com/ant-design/ant-design/pull/42433) - 🐞 修复 Menu 图标在 `itemMarginInline` 为 0 时不居中的问题。[#42426](https://github.com/ant-design/ant-design/pull/42426) [@zzwgh](https://github.com/zzwgh) From 2cf22e8ed3df26d8760c9da2d99c01780bac7b13 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Fri, 8 Sep 2023 17:42:12 +0800 Subject: [PATCH 205/318] docs: add theme toggle animation (#44655) * docs: add theme toggle animation * fix: add compatibility judgment * refactor: optimization code * fix: server document not found * fix: animation lag * fix: transition issue * fix: scroll bar theme color --- .dumi/hooks/useThemeAnimation.ts | 126 +++++++++++++++++++++++ .dumi/theme/common/ThemeSwitch/index.tsx | 20 ++-- 2 files changed, 140 insertions(+), 6 deletions(-) create mode 100644 .dumi/hooks/useThemeAnimation.ts diff --git a/.dumi/hooks/useThemeAnimation.ts b/.dumi/hooks/useThemeAnimation.ts new file mode 100644 index 000000000000..0ca2049bd536 --- /dev/null +++ b/.dumi/hooks/useThemeAnimation.ts @@ -0,0 +1,126 @@ +import { useEffect, useRef } from 'react'; +import { removeCSS, updateCSS } from 'rc-util/lib/Dom/dynamicCSS'; + +import theme from '../../components/theme'; + +const viewTransitionStyle = ` +::view-transition-old(root), +::view-transition-new(root) { + animation: none; + mix-blend-mode: normal; +} + +.dark::view-transition-old(root) { + z-index: 1; +} + +.dark::view-transition-new(root) { + z-index: 999; +} + +::view-transition-old(root) { + z-index: 999; +} + +::view-transition-new(root) { + z-index: 1; +} +`; + +const useThemeAnimation = () => { + const { + token: { colorBgElevated }, + } = theme.useToken(); + + const animateRef = useRef<{ + colorBgElevated: string; + }>({ + colorBgElevated, + }); + + const startAnimationTheme = (clipPath: string[], isDark: boolean) => { + updateCSS( + ` + * { + transition: none !important; + } + `, + 'disable-transition', + ); + + document.documentElement + .animate( + { + clipPath: isDark ? [...clipPath].reverse() : clipPath, + }, + { + duration: 500, + easing: 'ease-in', + pseudoElement: isDark ? '::view-transition-old(root)' : '::view-transition-new(root)', + }, + ) + .addEventListener('finish', () => { + removeCSS('disable-transition'); + }); + }; + + const toggleAnimationTheme = (event: MouseEvent, isDark: boolean) => { + // @ts-ignore + if (!(event && typeof document.startViewTransition === 'function')) return; + const x = event.clientX; + const y = event.clientY; + const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y)); + updateCSS( + ` + [data-prefers-color='dark'] { + color-scheme: light !important; + } + + [data-prefers-color='light'] { + color-scheme: dark !important; + } + `, + 'color-scheme', + ); + document + // @ts-ignore + .startViewTransition(async () => { + // wait for theme change end + while (colorBgElevated === animateRef.current.colorBgElevated) { + // eslint-disable-next-line no-await-in-loop + await new Promise((resolve) => { + setTimeout(resolve, 1000 / 60); + }); + } + const root = document.documentElement; + root.classList.remove(isDark ? 'dark' : 'light'); + root.classList.add(isDark ? 'light' : 'dark'); + }) + .ready.then(() => { + const clipPath = [ + `circle(0px at ${x}px ${y}px)`, + `circle(${endRadius}px at ${x}px ${y}px)`, + ]; + removeCSS('color-scheme'); + startAnimationTheme(clipPath, isDark); + }); + }; + + // inject transition style + useEffect(() => { + // @ts-ignore + if (typeof document.startViewTransition === 'function') { + updateCSS(viewTransitionStyle, 'view-transition-style'); + } + }, []); + + useEffect(() => { + if (colorBgElevated !== animateRef.current.colorBgElevated) { + animateRef.current.colorBgElevated = colorBgElevated; + } + }, [colorBgElevated]); + + return toggleAnimationTheme; +}; + +export default useThemeAnimation; diff --git a/.dumi/theme/common/ThemeSwitch/index.tsx b/.dumi/theme/common/ThemeSwitch/index.tsx index afa8b71da3c7..52ef5178b63f 100644 --- a/.dumi/theme/common/ThemeSwitch/index.tsx +++ b/.dumi/theme/common/ThemeSwitch/index.tsx @@ -1,10 +1,12 @@ +import React from 'react'; import { BgColorsOutlined, SmileOutlined } from '@ant-design/icons'; +import { FloatButton } from 'antd'; +import { useTheme } from 'antd-style'; import { CompactTheme, DarkTheme } from 'antd-token-previewer/es/icons'; // import { Motion } from 'antd-token-previewer/es/icons'; import { FormattedMessage, Link, useLocation } from 'dumi'; -import React from 'react'; -import { useTheme } from 'antd-style'; -import { FloatButton } from 'antd'; + +import useThemeAnimation from '../../../hooks/useThemeAnimation'; import { getLocalizedPathname, isZhCN } from '../../utils'; import ThemeIcon from './ThemeIcon'; @@ -22,6 +24,9 @@ const ThemeSwitch: React.FC = (props) => { // const isMotionOff = value.includes('motion-off'); const isHappyWork = value.includes('happy-work'); + const isDark = value.includes('dark'); + + const toggleAnimationTheme = useThemeAnimation(); return ( = (props) => { } - type={value.includes('dark') ? 'primary' : 'default'} - onClick={() => { - if (value.includes('dark')) { + type={isDark ? 'primary' : 'default'} + onClick={(e) => { + // Toggle animation when switch theme + toggleAnimationTheme(e, isDark); + + if (isDark) { onChange(value.filter((theme) => theme !== 'dark')); } else { onChange([...value, 'dark']); From 32d0a1f56994d3e0c76831c7ec4bfc47d24403a9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=BA=A2=E6=9E=9C=E6=B1=81?= Date: Fri, 8 Sep 2023 18:06:26 +0800 Subject: [PATCH 206/318] docs: replace blog pic (#44717) --- docs/blog/color-picker.en-US.md | 2 +- docs/blog/color-picker.zh-CN.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/blog/color-picker.en-US.md b/docs/blog/color-picker.en-US.md index dabac3a6c32c..afa9040e9f7f 100644 --- a/docs/blog/color-picker.en-US.md +++ b/docs/blog/color-picker.en-US.md @@ -24,7 +24,7 @@ In the `HSV` color model, each color can be represented by a triplet `(H, S, V)` ### HEX Color Model -The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/266235167-fa4e9362-6b97-4966-b43f-14b6f7eb62a3.png) +The `HEX` color model represents colors by hexadecimal numbers. The first two digits represent the value of red, the middle two digits represent the value of green, and the last two digits represent the value of blue. For example, red can be represented as `#FF0000`, green can be represented as `#00FF00`, and blue can be represented as `#0000FF`. As shown in the following figure: ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png) This is also the most common way of representing colors because it can be used directly in CSS. Moreover, the representation is very simple, just convert the three numbers in the RGB color model to hexadecimal numbers. diff --git a/docs/blog/color-picker.zh-CN.md b/docs/blog/color-picker.zh-CN.md index ebc1d69cd627..98eaf6337208 100644 --- a/docs/blog/color-picker.zh-CN.md +++ b/docs/blog/color-picker.zh-CN.md @@ -24,7 +24,7 @@ author: Redjue ### HEX 色彩模型 -`HEX` 色彩模型是通过十六进制数来表示色彩的，其中前两位表示红色的取值，中间两位表示绿色的取值，后两位表示蓝色的取值。例如，红色可以表示为 `#FF0000`，绿色可以表示为 `#00FF00`，蓝色可以表示为 `#0000FF`。如下图所示： ![HEX](https://user-images.githubusercontent.com/21119589/266235167-fa4e9362-6b97-4966-b43f-14b6f7eb62a3.png) +`HEX` 色彩模型是通过十六进制数来表示色彩的，其中前两位表示红色的取值，中间两位表示绿色的取值，后两位表示蓝色的取值。例如，红色可以表示为 `#FF0000`，绿色可以表示为 `#00FF00`，蓝色可以表示为 `#0000FF`。如下图所示： ![HEX](https://user-images.githubusercontent.com/21119589/266569791-7f6afedd-3b84-4ee1-8c98-d3d4b16e8317.png) 这也是我们最常见的颜色表示方式，因为它可以直接在 CSS 中使用。而且表示方式非常简单，只需要将 RGB 色彩模型中的三个数字转换为十六进制数即可。 From 3cd4488d5c87a2cf02332970403b4834a372ab86 Mon Sep 17 00:00:00 2001 From: Amumu Date: Sun, 10 Sep 2023 11:38:32 +0800 Subject: [PATCH 207/318] chore: fix windows path (#44734) --- scripts/generate-cssinjs.ts | 17 +++++++++++------ 1 file changed, 11 insertions(+), 6 deletions(-) diff --git a/scripts/generate-cssinjs.ts b/scripts/generate-cssinjs.ts index d25bc909018f..a9460717c9f1 100644 --- a/scripts/generate-cssinjs.ts +++ b/scripts/generate-cssinjs.ts @@ -1,3 +1,4 @@ +import url from 'node:url'; import path from 'path'; import { globSync } from 'glob'; import React from 'react'; @@ -11,27 +12,31 @@ interface GenCssinjsOptions { } export const styleFiles = globSync( - path.join( - process.cwd(), - 'components/!(version|config-provider|icon|auto-complete|col|row|time-picker|qrcode)/style/index.?(ts|tsx)', - ).split(path.sep).join('/'), + path + .join( + process.cwd(), + 'components/!(version|config-provider|icon|auto-complete|col|row|time-picker|qrcode)/style/index.?(ts|tsx)', + ) + .split(path.sep) + .join('/'), ); export const generateCssinjs = ({ key, beforeRender, render }: GenCssinjsOptions) => Promise.all( styleFiles.map(async (file) => { + const absPath = url.pathToFileURL(file).href; const pathArr = file.split('/'); const styleIndex = pathArr.lastIndexOf('style'); const componentName = pathArr[styleIndex - 1]; let useStyle: StyleFn = () => {}; if (file.includes('grid')) { - const { useColStyle, useRowStyle } = await import(file); + const { useColStyle, useRowStyle } = await import(absPath); useStyle = (prefixCls: string) => { useRowStyle(prefixCls); useColStyle(prefixCls); }; } else { - useStyle = (await import(file)).default; + useStyle = (await import(absPath)).default; } const Demo: React.FC = () => { useStyle(`${key}-${componentName}`); From bdf8c436fa22fdd4419271e8817c18cc6f13289c Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Sun, 10 Sep 2023 11:39:44 +0800 Subject: [PATCH 208/318] chore(deps): update dependency @argos-ci/core to ^0.11.0 (#44736) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 27166637877b..6b3b4748cb90 100644 --- a/package.json +++ b/package.json @@ -164,7 +164,7 @@ "@ant-design/happy-work-theme": "^1.0.0", "@ant-design/tools": "^17.3.1", "@antv/g6": "^4.8.13", - "@argos-ci/core": "^0.9.0", + "@argos-ci/core": "^0.11.0", "@babel/eslint-plugin": "^7.19.1", "@biomejs/biome": "^1.0.0", "@codesandbox/sandpack-react": "^2.6.9", From 4489eec5b17c95f3e9e39e18b8ded3dab3556d90 Mon Sep 17 00:00:00 2001 From: afc163 Date: Sun, 10 Sep 2023 12:27:10 +0800 Subject: [PATCH 209/318] docs: add banner mouse effect animation (#44711) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * docs: add banner mouse effect animation * refactor to useRef * refactor to react way * refactor to hooks * type: add type * fix: fix error * fix: fix error * fix: update RTL --------- Co-authored-by: 栗嘉男 <574980606@qq.com> --- .dumi/pages/index/components/Group.tsx | 28 ++++--- .../PreviewBanner/ComponentsBlock.tsx | 11 ++- .../index/components/PreviewBanner/index.tsx | 15 ++-- .../PreviewBanner/useMouseTransform.tsx | 73 +++++++++++++++++++ components/radio/group.tsx | 8 +- 5 files changed, 110 insertions(+), 25 deletions(-) create mode 100644 .dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx diff --git a/.dumi/pages/index/components/Group.tsx b/.dumi/pages/index/components/Group.tsx index 1ea9a7e0b5a3..20affa555ce8 100644 --- a/.dumi/pages/index/components/Group.tsx +++ b/.dumi/pages/index/components/Group.tsx @@ -1,21 +1,26 @@ import * as React from 'react'; import { useContext } from 'react'; -import { useTheme } from 'antd-style'; import { Typography } from 'antd'; +import { useTheme } from 'antd-style'; + import SiteContext from '../../../theme/slots/SiteContext'; export interface GroupMaskProps { style?: React.CSSProperties; children?: React.ReactNode; disabled?: boolean; + onMouseMove?: React.MouseEventHandler; + onMouseEnter?: React.MouseEventHandler; + onMouseLeave?: React.MouseEventHandler; } -export function GroupMask({ children, style, disabled }: GroupMaskProps) { +export const GroupMask: React.FC = (props) => { + const { children, style, disabled, onMouseMove, onMouseEnter, onMouseLeave } = props; const additionalStyle: React.CSSProperties = disabled ? {} : { position: 'relative', - background: `rgba(255,255,255,0.1)`, + background: `rgba(255, 255, 255, 0.1)`, backdropFilter: `blur(25px)`, zIndex: 1, }; @@ -23,16 +28,15 @@ export function GroupMask({ children, style, disabled }: GroupMaskProps) { return (
{children}
); -} +}; export interface GroupProps { id?: string; @@ -48,7 +52,7 @@ export interface GroupProps { decoration?: React.ReactNode; } -export default function Group(props: GroupProps) { +const Group: React.FC = (props) => { const { id, title, titleColor, description, children, decoration, background, collapse } = props; const token = useTheme(); const { isMobile } = useContext(SiteContext); @@ -114,4 +118,6 @@ export default function Group(props: GroupProps) {
); -} +}; + +export default Group; diff --git a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx index bda81b5b2967..42dc50702d02 100644 --- a/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx +++ b/.dumi/pages/index/components/PreviewBanner/ComponentsBlock.tsx @@ -107,16 +107,17 @@ const useStyle = createStyles(({ token, css }) => { export interface ComponentsBlockProps { className?: string; + style?: React.CSSProperties; } -export default function ComponentsBlock(props: ComponentsBlockProps) { - const { className } = props; +const ComponentsBlock: React.FC = (props) => { + const { className, style } = props; const [locale] = useLocale(locales); const { styles } = useStyle(); return ( -
+
{locale.text} @@ -253,4 +254,6 @@ export default function ComponentsBlock(props: ComponentsBlockProps) {
); -} +}; + +export default ComponentsBlock; diff --git a/.dumi/pages/index/components/PreviewBanner/index.tsx b/.dumi/pages/index/components/PreviewBanner/index.tsx index dd8835c03c8c..cf257a0d6d77 100644 --- a/.dumi/pages/index/components/PreviewBanner/index.tsx +++ b/.dumi/pages/index/components/PreviewBanner/index.tsx @@ -8,6 +8,7 @@ import SiteContext from '../../../../theme/slots/SiteContext'; import * as utils from '../../../../theme/utils'; import { GroupMask } from '../Group'; import ComponentsBlock from './ComponentsBlock'; +import useMouseTransform from './useMouseTransform'; const locales = { cn: { @@ -81,11 +82,12 @@ const useStyle = () => { }; })(); }; + export interface PreviewBannerProps { children?: React.ReactNode; } -export default function PreviewBanner(props: PreviewBannerProps) { +const PreviewBanner: React.FC = (props) => { const { children } = props; const [locale] = useLocale(locales); @@ -95,8 +97,10 @@ export default function PreviewBanner(props: PreviewBannerProps) { const { pathname, search } = useLocation(); const isZhCN = utils.isZhCN(pathname); + const [componentsBlockStyle, mouseEvents] = useMouseTransform(); + return ( - + {/* Image Left Top */} {/* Mobile not show the component preview */} - {!isMobile && } + {!isMobile && }

Ant Design 5.0

@@ -129,9 +133,10 @@ export default function PreviewBanner(props: PreviewBannerProps) { -
{children}
); -} +}; + +export default PreviewBanner; diff --git a/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx b/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx new file mode 100644 index 000000000000..a6985067bb6a --- /dev/null +++ b/.dumi/pages/index/components/PreviewBanner/useMouseTransform.tsx @@ -0,0 +1,73 @@ +import React, { startTransition } from 'react'; +import { ConfigProvider } from 'antd'; + +const getTransformRotateStyle = ( + event: React.MouseEvent, + currentTarget: EventTarget & HTMLDivElement, + multiple: number, + isRTL: boolean, +): string => { + const box = currentTarget?.getBoundingClientRect(); + const calcX = -(event.clientY - box.y - box.height / 2) / multiple; + const calcY = (event.clientX - box.x - box.width / 2) / multiple; + return isRTL + ? `rotate3d(${24 + calcX}, ${83 + calcY}, -45, 57deg)` + : `rotate3d(${24 + calcX}, ${-83 + calcY}, 45, 57deg)`; +}; + +const useMouseTransform = ({ transitionDuration = 500, multiple = 36 } = {}) => { + const [componentsBlockStyle, setComponentsBlockStyle] = React.useState({}); + + const { direction } = React.useContext(ConfigProvider.ConfigContext); + + const isRTL = direction === 'rtl'; + + const onMouseMove: React.MouseEventHandler = (event) => { + const { currentTarget } = event; + startTransition(() => { + setComponentsBlockStyle((style) => ({ + ...style, + transform: getTransformRotateStyle(event, currentTarget, multiple, isRTL), + })); + }); + }; + + const onMouseEnter: React.MouseEventHandler = () => { + startTransition(() => { + setComponentsBlockStyle((style) => ({ + ...style, + transition: `transform ${transitionDuration / 1000}s`, + })); + }); + + setTimeout(() => { + startTransition(() => { + setComponentsBlockStyle((style) => ({ + ...style, + transition: '', + })); + }); + }, transitionDuration); + }; + + const onMouseLeave: React.MouseEventHandler = () => { + startTransition(() => { + setComponentsBlockStyle((style) => ({ + ...style, + transition: `transform ${transitionDuration / 1000}s`, + transform: '', + })); + }); + }; + + return [ + componentsBlockStyle, + { + onMouseMove, + onMouseEnter, + onMouseLeave, + }, + ] as const; +}; + +export default useMouseTransform; diff --git a/components/radio/group.tsx b/components/radio/group.tsx index 92c1e3a97fd1..a5c2cdd9a643 100644 --- a/components/radio/group.tsx +++ b/components/radio/group.tsx @@ -1,7 +1,8 @@ +import * as React from 'react'; import classNames from 'classnames'; import useMergedState from 'rc-util/lib/hooks/useMergedState'; import pickAttrs from 'rc-util/lib/pickAttrs'; -import * as React from 'react'; + import { ConfigContext } from '../config-provider'; import useSize from '../config-provider/hooks/useSize'; import { RadioGroupContextProvider } from './context'; @@ -100,10 +101,7 @@ const RadioGroup = React.forwardRef((props, ref ); return wrapSSR(
Date: Sun, 10 Sep 2023 14:34:22 +0800 Subject: [PATCH 210/318] refactor: extract public methods (#44737) --- components/{space/utils.ts => _util/gapSize.ts} | 5 ++--- components/space/index.tsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) rename components/{space/utils.ts => _util/gapSize.ts} (70%) diff --git a/components/space/utils.ts b/components/_util/gapSize.ts similarity index 70% rename from components/space/utils.ts rename to components/_util/gapSize.ts index 71c50037d836..f4f35ec38085 100644 --- a/components/space/utils.ts +++ b/components/_util/gapSize.ts @@ -1,11 +1,10 @@ -import type { SpaceSize } from '.'; import type { SizeType } from '../config-provider/SizeContext'; -export function isPresetSize(size: SpaceSize): size is SizeType { +export function isPresetSize(size?: SizeType | string | number): size is SizeType { return ['small', 'middle', 'large'].includes(size as string); } -export function isValidGapNumber(size: SpaceSize): size is number { +export function isValidGapNumber(size?: SizeType | string | number): size is number { if (!size) { // The case of size = 0 is deliberately excluded here, because the default value of the gap attribute in CSS is 0, so if the user passes 0 in, we can directly ignore it. return false; diff --git a/components/space/index.tsx b/components/space/index.tsx index 8e0eed67b278..af596a001aea 100644 --- a/components/space/index.tsx +++ b/components/space/index.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import classNames from 'classnames'; import toArray from 'rc-util/lib/Children/toArray'; +import { isPresetSize, isValidGapNumber } from '../_util/gapSize'; import { ConfigContext } from '../config-provider'; import type { SizeType } from '../config-provider/SizeContext'; import Compact from './Compact'; @@ -9,7 +10,6 @@ import { SpaceContextProvider } from './context'; import type { SpaceContextType } from './context'; import Item from './Item'; import useStyle from './style'; -import { isPresetSize, isValidGapNumber } from './utils'; export { SpaceContext } from './context'; From 535a7da43d570ffe56b6e0359383ae45f3267037 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 11 Sep 2023 09:47:36 +0800 Subject: [PATCH 211/318] chore: Migrate CJS to ESM (#44742) --- package.json | 4 +-- scripts/{post-script.js => post-script.ts} | 31 ++++++++++------------ 2 files changed, 16 insertions(+), 19 deletions(-) rename scripts/{post-script.js => post-script.ts} (91%) diff --git a/package.json b/package.json index 6b3b4748cb90..0f5fd589b4ce 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "pub": "npm run version && npm run collect-token-statistic && npm run token-meta && antd-tools run pub", "biome:format": "biome format --write .", "prepublishOnly": "antd-tools run guard", - "postpublish": "node ./scripts/post-script.js", + "postpublish": "tsx scripts/post-script.ts", "site": "dumi build && cp .surgeignore _site", "sort": "npx sort-package-json", "sort-api": "antd-tools run sort-api-table", @@ -241,7 +241,7 @@ "husky": "^8.0.1", "identity-obj-proxy": "^3.0.0", "immer": "^10.0.1", - "inquirer": "^9.1.2", + "inquirer": "^9.2.11", "is-ci": "^3.0.1", "isomorphic-fetch": "^3.0.0", "jest": "^29.4.1", diff --git a/scripts/post-script.js b/scripts/post-script.ts similarity index 91% rename from scripts/post-script.js rename to scripts/post-script.ts index 1c5787477f4e..20361cd10fd1 100644 --- a/scripts/post-script.js +++ b/scripts/post-script.ts @@ -1,10 +1,11 @@ /* eslint-disable no-console */ -const { spawnSync } = require('child_process'); -const fetch = require('isomorphic-fetch'); -const semver = require('semver'); -const dayjs = require('dayjs'); -const chalk = require('chalk'); -const relativeTime = require('dayjs/plugin/relativeTime'); +import { spawnSync } from 'child_process'; +import chalk from 'chalk'; +import dayjs from 'dayjs'; +import relativeTime from 'dayjs/plugin/relativeTime'; +import inquirer from 'inquirer'; +import fetch from 'isomorphic-fetch'; +import semver from 'semver'; dayjs.extend(relativeTime); @@ -45,14 +46,14 @@ const DEPRECIATED_VERSION = { 'https://github.com/ant-design/ant-design/issues/43684', ], '5.8.0': ['https://github.com/ant-design/ant-design/issues/43943'], -}; +} as const; -function matchDeprecated(version) { +function matchDeprecated(v: string) { const match = Object.keys(DEPRECIATED_VERSION).find((depreciated) => - semver.satisfies(version, depreciated), + semver.satisfies(v, depreciated), ); - const reason = DEPRECIATED_VERSION[match] || []; + const reason = DEPRECIATED_VERSION[match as keyof typeof DEPRECIATED_VERSION] || []; return { match, @@ -72,7 +73,7 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be // } const { time, 'dist-tags': distTags } = await fetch('http://registry.npmjs.org/antd').then( - (res) => res.json(), + (res: Response) => res.json(), ); console.log('🐚 Latest Conch Version:', chalk.green(distTags[CONCH_TAG] || 'null'), '\n'); @@ -128,11 +129,10 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be let defaultVersion = defaultVersionObj ? defaultVersionObj.value : null; // If default version is less than current, use current - if (semver.compare(defaultVersion, distTags[CONCH_TAG]) < 0) { + if (semver.compare(defaultVersion!, distTags[CONCH_TAG]) < 0) { defaultVersion = distTags[CONCH_TAG]; } - const { default: inquirer } = await import('inquirer'); // Selection let { conchVersion } = await inquirer.prompt([ { @@ -196,9 +196,6 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be console.log(`🎃 Conch Version not change. Safe to ${chalk.green('ignore')}.`); } else { console.log('💾 Tagging Conch Version:', chalk.green(conchVersion)); - spawnSync('npm', ['dist-tag', 'add', `antd@${conchVersion}`, CONCH_TAG], { - stdio: 'inherit', - stdin: 'inherit', - }); + spawnSync('npm', ['dist-tag', 'add', `antd@${conchVersion}`, CONCH_TAG], { stdio: 'inherit' }); } })(); From 3e97fee28c9a82d3dec437a3ee7fd820c1510cf1 Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 11 Sep 2023 09:48:27 +0800 Subject: [PATCH 212/318] chore: Migrate CJS to ESM (#44744) --- package.json | 2 +- ...{print-changelog.js => print-changelog.ts} | 79 +++++++++++-------- 2 files changed, 49 insertions(+), 32 deletions(-) rename scripts/{print-changelog.js => print-changelog.ts} (84%) diff --git a/package.json b/package.json index 0f5fd589b4ce..0bbc4cf42151 100644 --- a/package.json +++ b/package.json @@ -63,7 +63,7 @@ "predist": "npm run version", "presite": "npm run prestart", "compile": "npm run clean && antd-tools run compile", - "changelog": "git fetch origin && node ./scripts/print-changelog", + "changelog": "git fetch origin && tsx scripts/print-changelog.ts", "predeploy": "antd-tools run clean && npm run site && cp CNAME _site && npm run site:test", "deploy": "gh-pages -d _site -b gh-pages -f", "deploy:china-mirror": "git checkout gh-pages && git pull origin gh-pages && git push git@gitee.com:ant-design/ant-design.git gh-pages -f", diff --git a/scripts/print-changelog.js b/scripts/print-changelog.ts similarity index 84% rename from scripts/print-changelog.js rename to scripts/print-changelog.ts index 38e81fbba4b6..4d546008f60c 100644 --- a/scripts/print-changelog.js +++ b/scripts/print-changelog.ts @@ -1,19 +1,22 @@ /* eslint-disable no-await-in-loop, no-console */ -const { spawn } = require('child_process'); -const path = require('path'); -const chalk = require('chalk'); -const jsdom = require('jsdom'); -const jQuery = require('jquery'); -const fetch = require('isomorphic-fetch'); -const fs = require('fs-extra'); -const simpleGit = require('simple-git'); +import { spawn } from 'child_process'; +import path from 'path'; +import chalk from 'chalk'; +import fs from 'fs-extra'; +import inquirer from 'inquirer'; +import fetch from 'isomorphic-fetch'; +import jQuery from 'jquery'; +import jsdom from 'jsdom'; +import openWindow from 'open'; +import simpleGit from 'simple-git'; const { JSDOM } = jsdom; const { window } = new JSDOM(); const { document } = new JSDOM('').window; + global.document = document; -const $ = jQuery(window); +const $ = jQuery(window) as unknown as JQueryStatic; const QUERY_TITLE = '.gh-header-title .js-issue-title'; const QUERY_DESCRIPTION_LINES = '.comment-body table tbody tr'; @@ -43,7 +46,21 @@ const MAINTAINERS = [ const cwd = process.cwd(); const git = simpleGit(cwd); -function getDescription(entity) { +interface Line { + text: string; + element: JQuery; +} + +interface PR { + pr?: string; + hash: string; + title: string; + author: string; + english: string; + chinese: string; +} + +const getDescription = (entity?: Line): string => { if (!entity) { return ''; } @@ -51,11 +68,10 @@ function getDescription(entity) { let htmlContent = descEle.html(); htmlContent = htmlContent.replace(/([^<]*)<\/code>/g, '`$1`'); return htmlContent.trim(); -} +}; async function printLog() { const tags = await git.tags(); - const { default: inquirer } = await import('inquirer'); const { fromVersion } = await inquirer.prompt([ { type: 'list', @@ -98,7 +114,7 @@ async function printLog() { const logs = await git.log({ from: fromVersion, to: toVersion }); - let prList = []; + let prList: PR[] = []; for (let i = 0; i < logs.all.length; i += 1) { const { message, body, hash, author_name: author } = logs.all[i]; @@ -119,10 +135,10 @@ async function printLog() { const pr = prs[j]; // Use jquery to get full html page since it don't need auth token - let res; + let res: any; let tryTimes = 0; const timeout = 30000; - let html; + let html: HTMLElement | undefined; const fetchPullRequest = async () => { try { res = await new Promise((resolve, reject) => { @@ -130,7 +146,7 @@ async function printLog() { reject(new Error(`Fetch timeout of ${timeout}ms exceeded`)); }, timeout); fetch(`https://github.com/ant-design/ant-design/pull/${pr}`) - .then((response) => { + .then((response: Response) => { response.text().then((htmlRes) => { html = htmlRes; resolve(response); @@ -150,17 +166,18 @@ async function printLog() { } }; await fetchPullRequest(); - if (res.url.includes('/issues/')) { + if (res?.url.includes('/issues/')) { continue; } - const $html = $(html); + const $html = $(html!); - const prTitle = $html.find(QUERY_TITLE).text().trim(); - const prAuthor = $html.find(QUERY_AUTHOR).text().trim(); - const prLines = $html.find(QUERY_DESCRIPTION_LINES); + const prTitle: string = $html.find(QUERY_TITLE).text().trim(); + const prAuthor: string = $html.find(QUERY_AUTHOR).text().trim(); + const prLines: JQuery = $html.find(QUERY_DESCRIPTION_LINES); + + const lines: Line[] = []; - const lines = []; prLines.each(function getDesc() { lines.push({ text: $(this).text().trim(), @@ -170,6 +187,7 @@ async function printLog() { const english = getDescription(lines.find((line) => line.text.includes('🇺🇸 English'))); const chinese = getDescription(lines.find((line) => line.text.includes('🇨🇳 Chinese'))); + if (english) { console.log(` 🇺🇸 ${english}`); } @@ -206,11 +224,11 @@ async function printLog() { console.log('\n', chalk.green('Done. Here is the log:')); - function printPR(lang, postLang) { + function printPR(lang: string, postLang: (str?: string) => string) { prList.forEach((entity) => { const { pr, author, hash, title } = entity; if (pr) { - const str = postLang(entity[lang]); + const str = postLang(entity[lang as keyof PR]); let icon = ''; if (str.toLowerCase().includes('fix') || str.includes('修复')) { icon = '🐞'; @@ -239,7 +257,8 @@ async function printLog() { console.log('\n'); console.log(chalk.yellow('🇨🇳 Chinese changelog:')); console.log('\n'); - printPR('chinese', (chinese) => + + printPR('chinese', (chinese: string) => chinese[chinese.length - 1] === '。' || !chinese ? chinese : `${chinese}。`, ); @@ -248,7 +267,7 @@ async function printLog() { // English console.log(chalk.yellow('🇺🇸 English changelog:')); console.log('\n'); - printPR('english', (english) => { + printPR('english', (english: string) => { english = english.trim(); if (english[english.length - 1] !== '.' || !english) { english = `${english}.`; @@ -269,19 +288,17 @@ async function printLog() { const ls = spawn( 'npx', ['http-server', path.join(__dirname, 'previewEditor'), '-c-1', '-p', '2893'], - { - shell: true, - }, + { shell: true }, ); + ls.stdout.on('data', (data) => { console.log(data.toString()); }); console.log(chalk.green('Start changelog preview editor...')); - const { default: open } = await import('open'); setTimeout(() => { - open('http://localhost:2893/'); + openWindow('http://localhost:2893/'); }, 1000); } From b9dfb1847d8b1114d919f6ba61f56ceb94b3411b 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: Mon, 11 Sep 2023 11:17:11 +0800 Subject: [PATCH 213/318] site: solve display exception when use happy work theme in dark mode (#44720) * site: solve display exception when use happly work theme in dark mode * feat: remove log * feat: optimize code --- .dumi/theme/layouts/GlobalLayout.tsx | 20 +++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/.dumi/theme/layouts/GlobalLayout.tsx b/.dumi/theme/layouts/GlobalLayout.tsx index 61f73be23261..a28f602b3ed3 100644 --- a/.dumi/theme/layouts/GlobalLayout.tsx +++ b/.dumi/theme/layouts/GlobalLayout.tsx @@ -39,15 +39,17 @@ const RESPONSIVE_MOBILE = 768; // } const getAlgorithm = (themes: ThemeName[] = []) => - themes.map((theme) => { - if (theme === 'dark') { - return antdTheme.darkAlgorithm; - } - if (theme === 'compact') { - return antdTheme.compactAlgorithm; - } - return antdTheme.defaultAlgorithm; - }); + themes + .map((theme) => { + if (theme === 'dark') { + return antdTheme.darkAlgorithm; + } + if (theme === 'compact') { + return antdTheme.compactAlgorithm; + } + return null; + }) + .filter((item) => item); const GlobalLayout: React.FC = () => { const outlet = useOutlet(); From 61e8768f061240e83878b9f18511096430b4d5fe Mon Sep 17 00:00:00 2001 From: lijianan <574980606@qq.com> Date: Mon, 11 Sep 2023 11:33:45 +0800 Subject: [PATCH 214/318] site: update space demo (#44738) --- .../__snapshots__/demo-extend.test.ts.snap | 131 +++--------------- .../__snapshots__/demo.test.tsx.snap | 110 +++------------ components/space/demo/customize.md | 7 - components/space/demo/customize.tsx | 22 --- components/space/demo/size.md | 8 +- components/space/demo/size.tsx | 24 ++-- components/space/index.en-US.md | 1 - components/space/index.zh-CN.md | 1 - 8 files changed, 62 insertions(+), 242 deletions(-) delete mode 100644 components/space/demo/customize.md delete mode 100644 components/space/demo/customize.tsx diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap index 5be7e0125fc3..5cc809715998 100644 --- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -15176,112 +15176,6 @@ Array [ exports[`renders components/space/demo/compact-nested.tsx extend context correctly 2`] = `[]`; -exports[`renders components/space/demo/customize.tsx extend context correctly 1`] = ` -Array [ -
-
-
-
-
-
-
-
- -
-
-
, -
, -
, -
-
- -
-
- -
-
- -
-
- -
-
, -] -`; - -exports[`renders components/space/demo/customize.tsx extend context correctly 2`] = `[]`; - exports[`renders components/space/demo/debug.tsx extend context correctly 1`] = `
- Small + small +
, diff --git a/components/space/__tests__/__snapshots__/demo.test.tsx.snap b/components/space/__tests__/__snapshots__/demo.test.tsx.snap index 91774ea7589b..82a4b88be548 100644 --- a/components/space/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/space/__tests__/__snapshots__/demo.test.tsx.snap @@ -3939,91 +3939,6 @@ Array [ ] `; -exports[`renders components/space/demo/customize.tsx correctly 1`] = ` -Array [ -
-
-
-
-
-
, -
, -
, -
-
- -
-
- -
-
- -
-
- -
-
, -] -`; - exports[`renders components/space/demo/debug.tsx correctly 1`] = `
- Small + small +
, diff --git a/components/space/demo/customize.md b/components/space/demo/customize.md deleted file mode 100644 index 5fd5bdf8a732..000000000000 --- a/components/space/demo/customize.md +++ /dev/null @@ -1,7 +0,0 @@ -## zh-CN - -自定义间距大小。 - -## en-US - -Custom spacing size. diff --git a/components/space/demo/customize.tsx b/components/space/demo/customize.tsx deleted file mode 100644 index 71145452c836..000000000000 --- a/components/space/demo/customize.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import React, { useState } from 'react'; -import { Button, Slider, Space } from 'antd'; - -const App: React.FC = () => { - const [size, setSize] = useState(8); - - return ( - <> - setSize(value)} /> -
-
- - - - - - - - ); -}; - -export default App; diff --git a/components/space/demo/size.md b/components/space/demo/size.md index 4de0e56aa6a0..a855db8ae572 100644 --- a/components/space/demo/size.md +++ b/components/space/demo/size.md @@ -1,11 +1,7 @@ ## zh-CN -间距预设大、中、小三种大小。 - -通过设置 `size` 为 `large` `middle` 分别把间距设为大、中间距。若不设置 `size`，则间距为小。 +使用 `size` 设置元素之间的间距，预设了 `small`、`middle`、`large` 三种尺寸，也可以自定义间距，若不设置 `size`，则默认为 `small`。 ## en-US -`large`, `middle` and `small` preset sizes. - -Set the size to `large` and `middle` by setting size to large and middle respectively. If `size` is not set, the spacing is `small`. +Use `size` to set the spacing, Three sizes are preset: `small`, `middle`, `large`. You can also customize the spacing. If `size` is not set, the spacing is `small`. diff --git a/components/space/demo/size.tsx b/components/space/demo/size.tsx index 4cfb83fa6bf7..48d389316f88 100644 --- a/components/space/demo/size.tsx +++ b/components/space/demo/size.tsx @@ -1,20 +1,28 @@ import React, { useState } from 'react'; -import { Button, Radio, Space } from 'antd'; -import type { SpaceSize } from 'antd/es/space'; +import { Button, Radio, Slider, Space } from 'antd'; +import type { SizeType } from 'antd/es/config-provider/SizeContext'; const App: React.FC = () => { - const [size, setSize] = useState('small'); - + const [size, setSize] = useState('small'); + const [customSize, setCustomSize] = React.useState(0); return ( <> setSize(e.target.value)}> - Small - Middle - Large + {['small', 'middle', 'large', 'customize'].map((item) => ( + + {item} + + ))}

- + {size === 'customize' && ( + <> + +
+ + )} + diff --git a/components/space/index.en-US.md b/components/space/index.en-US.md index 5f009b3f2f4d..9ef95699646d 100644 --- a/components/space/index.en-US.md +++ b/components/space/index.en-US.md @@ -20,7 +20,6 @@ Set components spacing. Vertical Space Space Size Align -Customize Size Wrap Split Compact Mode for form component diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md index 6bc6b2011438..d5539e27aa62 100644 --- a/components/space/index.zh-CN.md +++ b/components/space/index.zh-CN.md @@ -24,7 +24,6 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*37T2R6O9oi0AAA 垂直间距 间距大小 对齐 -自定义尺寸 自动换行 分隔符 紧凑布局组合 From fa5c98311a260c02d07b725e371ea27522cb833b Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Sep 2023 11:52:36 +0800 Subject: [PATCH 215/318] docs: fix demo code copy function (#44751) --- .dumi/theme/builtins/Previewer/CodePreviewer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx index e97ee0d8faf0..8af1d339124c 100644 --- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx +++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx @@ -483,7 +483,7 @@ createRoot(document.getElementById('container')).render(); - handleCodeCopied(asset.id)}> + handleCodeCopied(asset.id)}> Date: Mon, 11 Sep 2023 14:56:09 +0800 Subject: [PATCH 216/318] fix: Select alignment issue when label is Typography (#44756) close #40421 --- components/select/style/index.tsx | 9 ++++++++- components/select/style/multiple.tsx | 2 -- components/select/style/single.tsx | 5 ----- 3 files changed, 8 insertions(+), 8 deletions(-) diff --git a/components/select/style/index.tsx b/components/select/style/index.tsx index e00e8f0c1444..83a4e7f6665d 100644 --- a/components/select/style/index.tsx +++ b/components/select/style/index.tsx @@ -217,7 +217,7 @@ const getSearchInputWithoutBorderStyle: GenerateStyle = // =============================== Base =============================== const genBaseStyle: GenerateStyle = (token) => { - const { componentCls, inputPaddingHorizontalBase, iconCls } = token; + const { antCls, componentCls, inputPaddingHorizontalBase, iconCls } = token; return { [componentCls]: { @@ -239,7 +239,14 @@ const genBaseStyle: GenerateStyle = (token) => { [`${componentCls}-selection-item`]: { flex: 1, fontWeight: 'normal', + position: 'relative', + userSelect: 'none', ...textEllipsis, + + // https://github.com/ant-design/ant-design/issues/40421 + [`> ${antCls}-typography`]: { + display: 'inline', + }, }, // ======================= Placeholder ======================= diff --git a/components/select/style/multiple.tsx b/components/select/style/multiple.tsx index c65691a1151b..5da11c6f02cc 100644 --- a/components/select/style/multiple.tsx +++ b/components/select/style/multiple.tsx @@ -86,7 +86,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { // ======================== Selections ======================== [`${componentCls}-selection-item`]: { - position: 'relative', display: 'flex', flex: 'none', boxSizing: 'border-box', @@ -100,7 +99,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { borderRadius: token.borderRadiusSM, cursor: 'default', transition: `font-size ${token.motionDurationSlow}, line-height ${token.motionDurationSlow}, height ${token.motionDurationSlow}`, - userSelect: 'none', marginInlineEnd: FIXED_ITEM_MARGIN * 2, paddingInlineStart: token.paddingXS, paddingInlineEnd: token.paddingXS / 2, diff --git a/components/select/style/single.tsx b/components/select/style/single.tsx index 654dc81bfd31..8b4ca35f5978 100644 --- a/components/select/style/single.tsx +++ b/components/select/style/single.tsx @@ -49,11 +49,6 @@ function genSizeStyle(token: SelectToken, suffix?: string): CSSObject { }, }, - [`${componentCls}-selection-item`]: { - position: 'relative', - userSelect: 'none', - }, - [`${componentCls}-selection-placeholder`]: { transition: 'none', pointerEvents: 'none', From 40032b119ede1f4a21469a012ef68786e7a45fc2 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: Mon, 11 Sep 2023 15:17:29 +0800 Subject: [PATCH 217/318] docs: add coexist doc (#44758) --- docs/react/migration-v5.en-US.md | 51 ++++++++++++++++++++++++++++++ docs/react/migration-v5.zh-CN.md | 53 ++++++++++++++++++++++++++++++++ 2 files changed, 104 insertions(+) diff --git a/docs/react/migration-v5.en-US.md b/docs/react/migration-v5.en-US.md index fe2424d7ec11..94705e14551f 100644 --- a/docs/react/migration-v5.en-US.md +++ b/docs/react/migration-v5.en-US.md @@ -318,6 +318,57 @@ export default () => ( Ant Design v5 using `:where` css selector to reduce CSS-in-JS hash priority. You can use `@ant-design/cssinjs` `StyleProvider` to cancel this function. Please ref [Compatible adjustment](/docs/react/customize-theme#compatible-adjustment). +## Multiple versions coexist + +We do not recommend multiple versions coexist, it will make the application more complex (such as style override, ConfigProvider not reused, etc.). It's better to use micro-applications such as [qiankun](https://qiankun.umijs.org/) for page level development. + +### Install v5 through alias + +```bash +$ npm install --save antd-v5@npm:antd@5 +# or +$ yarn add antd-v5@npm:antd@5 +# or +$ pnpm add antd-v5@npm:antd@5 +``` + +The package.json will be: + +```json +{ + "antd": "4.x", + "antd-v5": "npm:antd@5" +} +``` + +Now, antd in your project is still v4, and antd-v5 is v5. + +```tsx +import React from 'react'; +import { Button as Button4 } from 'antd'; // v4 +import { Button as Button5 } from 'antd-v5'; // v5 + +export default () => ( + <> + + + +); +``` + +Then config `prefixCls` of ConfigProvider to avoid style conflict: + +```tsx +import React from 'react'; +import { ConfigProvider as ConfigProvider5 } from 'antd-v5'; + +export default () => ( + + + +); +``` + ## Encounter problems If you encounter problems during the upgrade, please go to [GitHub issues](https://new-issue.ant.design/) for feedback. We will respond and improve this document as soon as possible. diff --git a/docs/react/migration-v5.zh-CN.md b/docs/react/migration-v5.zh-CN.md index 30974dda19fe..385e2061b8e6 100644 --- a/docs/react/migration-v5.zh-CN.md +++ b/docs/react/migration-v5.zh-CN.md @@ -309,6 +309,59 @@ export default () => ( Ant Design v5 使用 `:where` css selector 降低 CSS-in-JS hash 值优先级，如果你需要支持旧版本浏览器（如 IE 11、360 浏览器 等等）。可以通过 `@ant-design/cssinjs` 的 `StyleProvider` 去除降权操作。详情请参阅 [兼容性调整](/docs/react/customize-theme-cn#兼容性调整)。 +## 多版本共存 + +一般情况下，并不推荐多版本共存，它会让应用变得复杂（例如样式覆盖、ConfigProvider 不复用等问题）。我们更推荐使用微应用如 [qiankun](https://qiankun.umijs.org/) 等框架进行分页研发。 + +### 通过别名安装 v5 + +```bash +$ npm install --save antd-v5@npm:antd@5 +# or +$ yarn add antd-v5@npm:antd@5 +# or +$ pnpm add antd-v5@npm:antd@5 +``` + +对应的 package.json 为： + +```json +{ + "antd": "4.x", + "antd-v5": "npm:antd@5" +} +``` + +现在，你项目中的 antd 还是 v4 版本，antd-v5 是 v5 版本。 + +```tsx +import React from 'react'; +import { Button as Button4 } from 'antd'; // v4 +import { Button as Button5 } from 'antd-v5'; // v5 + +export default () => ( + <> + + + +); +``` + +接着配置 ConfigProvider 将 v5 `prefixCls` 改写，防止样式冲突： + +```tsx +import React from 'react'; +import { ConfigProvider as ConfigProvider5 } from 'antd-v5'; + +export default () => ( + + + +); +``` + +需要注意的是，npm 别名并不是所有的包管理器都有很好的支持。 + ## 遇到问题 如果您在升级过程中遇到了问题，请到 [GitHub issues](https://new-issue.ant.design/) 进行反馈。我们会尽快响应和相应改进这篇文档。 From 0cb23a80049b72d4fedee0320ed6456518d9b099 Mon Sep 17 00:00:00 2001 From: MadCcc <1075746765@qq.com> Date: Mon, 11 Sep 2023 15:38:35 +0800 Subject: [PATCH 218/318] chore: try to fix pupppeteer screenshot (#44760) --- tests/index.html | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/index.html b/tests/index.html index 89c7f593ad46..740e002a3d92 100644 --- a/tests/index.html +++ b/tests/index.html @@ -7,6 +7,7 @@ From c11e18411ceeb3ed3d1ece4d631380f975815457 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 11 Sep 2023 16:04:53 +0800 Subject: [PATCH 219/318] docs: simplify select virtual demo (#44759) --- .../__snapshots__/demo.test.tsx.snap | 19 ------------------- components/select/demo/big-data.md | 4 ++-- components/select/demo/big-data.tsx | 12 +----------- 3 files changed, 3 insertions(+), 32 deletions(-) diff --git a/components/select/__tests__/__snapshots__/demo.test.tsx.snap b/components/select/__tests__/__snapshots__/demo.test.tsx.snap index 1390dcf3f25a..8a98ff1d4738 100644 --- a/components/select/__tests__/__snapshots__/demo.test.tsx.snap +++ b/components/select/__tests__/__snapshots__/demo.test.tsx.snap @@ -371,11 +371,6 @@ exports[`renders components/select/demo/basic.tsx correctly 1`] = ` exports[`renders components/select/demo/big-data.tsx correctly 1`] = ` Array [ -

- Ant Design 4.0 -

,

@@ -510,20 +505,6 @@ Array [

, -
+ + Hardware Info + + + + CPU: 6 Core 3.5 GHz
Storage space: 10 GB
Replication factor: 3
Region: East China 1 -
Data disk type: MongoDB @@ -1012,13 +1012,28 @@ exports[`renders components/descriptions/demo/responsive.tsx correctly 1`] = ` Database version: 3.4
Package: dds.mongo.mid + + 		+ + Hardware Info + + + + CPU: 6 Core 3.5 GHz
Storage space: 10 GB
Replication factor: 3
Region: East China 1 -