From 477b1ec2f31d6cb881b8f2ef61addcc8ab2af388 Mon Sep 17 00:00:00 2001 From: dingkang Date: Tue, 22 Aug 2023 17:05:56 +0800 Subject: [PATCH] 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 图片