feat: migrate less to token for Form (ant-design#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 <[email protected]>
ammar-knowledge · Aug 22, 2023 · 477b1ec · 477b1ec
1 parent d57c86d
commit 477b1ec
Show file tree

Hide file tree

Showing 10 changed files with 214 additions and 36 deletions.
diff --git 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
@@ -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) => <Form.Item {...props} />, {
  name: 'Form.Item',

diff --git a/components/form/demo/component-token.md 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
@@ -0,0 +1,47 @@
+import { ConfigProvider, Form, Input } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+ <ConfigProvider
+ theme={{
+ components: {
+ Form: {
+ labelRequiredMarkColor: 'pink',
+ labelColor: 'green',
+ labelFontSize: 16,
+ labelHeight: 34,
+ labelColonMarginInlineStart: 4,
+ labelColonMarginInlineEnd: 12,
+ itemMarginBottom: 18,
+ },
+ },
+ }}
+ >
+ <Form
+ name="basic"
+ labelCol={{ span: 8 }}
+ wrapperCol={{ span: 16 }}
+ style={{ maxWidth: 600 }}
+ initialValues={{ remember: true }}
+ autoComplete="off"
+ >
+ <Form.Item
+ label="Username"
+ name="username"
+ rules={[{ required: true, message: 'Please input your username!' }]}
+ >
+ <Input />
+ </Form.Item>
+
+ <Form.Item
+ label="Password"
+ name="password"
+ rules={[{ required: true, message: 'Please input your password!' }]}
+ >
+ <Input.Password />
+ </Form.Item>
+ </Form>
+ </ConfigProvider>
+);
+
+export default App;
diff --git 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
 <code src="./demo/label-debug.tsx" debug>label ellipsis</code>
 <code src="./demo/col-24-debug.tsx" debug>Test col 24 usage</code>
 <code src="./demo/ref-item.tsx" debug>Ref item</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>
 
 ## API
 

diff --git 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
 <code src="./demo/label-debug.tsx" debug>测试 label 省略</code>
 <code src="./demo/col-24-debug.tsx" debug>测试特殊 col 24 用法</code>
 <code src="./demo/ref-item.tsx" debug>引用字段</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>
 
 ## API
 

diff --git 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<FormToken> = (token) => {
 };
 
 const genFormItemStyle: GenerateStyle<FormToken> = (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<FormToken> = (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<FormToken> = (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<FormToken> = (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<FormToken> = (token) => {
 };
 
 const genInlineStyle: GenerateStyle<FormToken> = (token) => {
- const { componentCls, formItemCls } = token;
+ const { componentCls, formItemCls, itemMarginBottom } = token;
 
  return {
  [`${componentCls}-inline`]: {
@@ -363,7 +424,7 @@ const genInlineStyle: GenerateStyle<FormToken> = (token) => {
  },
 
  '&-with-help': {
- marginBottom: token.marginLG,
+ marginBottom: itemMarginBottom,
  },
 
  [`> ${formItemCls}-label,
@@ -389,7 +450,8 @@ const genInlineStyle: GenerateStyle<FormToken> = (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<FormToken> = (token) => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Form', (token, { rootPrefixCls }) => {
- const formToken = mergeToken<FormToken>(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<FormToken>(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
@@ -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
@@ -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 = () => (
  <ConfigProvider
  theme={{
@@ -243,8 +245,6 @@ export default App;
 | `@cascader-dropdown-font-size` | - | Deprecated |
 | `@cascader-dropdown-line-height` | `lineHeight` | Global Token |
 
-<!-- ### Checkbox -->
-
 ### Checkbox
 
 <!-- prettier-ignore -->
@@ -346,7 +346,23 @@ export default App;
 | --- | --- | --- |
 | `@empty-font-size` | `fontSize` | GlobalToken |
 
-<!-- ### Form -->
+### Form
+
+<!-- prettier-ignore -->
+| 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 -->
+### Tree 树形控件
+
+<!-- prettier-ignore -->
+| 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
@@ -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 = () => (
  <ConfigProvider
  theme={{
@@ -343,7 +345,23 @@ export default App;
 | --- | --- | --- |
 | `@empty-font-size` | `fontSize` | 全局 Token |
 
-<!-- ### Form 表单 -->
+### Form 表单
+
+<!-- prettier-ignore -->
+| 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 图片