feat: migrate less to token for Form

ant-design · Jun 3, 2023 · a8a5aeb · a8a5aeb
1 parent fe17c2f
commit a8a5aeb
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 16 deletions.
diff --git a/components/form/demo/component-token.tsx b/components/form/demo/component-token.tsx
@@ -1,5 +1,5 @@
+import { ConfigProvider, Form, Input } from 'antd';
 import React from 'react';
-import { Form, Input, ConfigProvider } from 'antd';
 
 const App: React.FC = () => (
   <ConfigProvider
@@ -10,8 +10,8 @@ const App: React.FC = () => (
           labelColor: 'green',
           labelFontSize: 16,
           labelHeight: 34,
-          labelColonMarginLeft: 4,
-          labelColonMarginRight: 12,
+          labelColonMarginInlineStart: 4,
+          labelColonMarginInlineEnd: 12,
           itemMarginBottom: 18,
         },
       },

diff --git a/components/form/style/index.ts b/components/form/style/index.ts
@@ -1,17 +1,17 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import { genCollapseMotion, zoomIn } from '../../style/motion';
 import type { AliasToken, FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';
 import genFormValidateMotionStyle from './explain';
 
 export interface ComponentToken {
   labelRequiredColor: string;
   labelColor: string;
   labelFontSize: number;
   labelHeight: number;
-  labelColonMarginLeft: number;
-  labelColonMarginRight: number;
+  labelColonMarginInlineStart: number;
+  labelColonMarginInlineEnd: number;
   itemMarginBottom: number;
 }
 
@@ -132,8 +132,8 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
     labelColor,
     labelFontSize,
     labelHeight,
-    labelColonMarginLeft,
-    labelColonMarginRight,
+    labelColonMarginInlineStart,
+    labelColonMarginInlineEnd,
     itemMarginBottom,
   } = token;
 
@@ -239,8 +239,8 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
             content: '":"',
             position: 'relative',
             marginBlock: 0,
-            marginInlineStart: labelColonMarginLeft,
-            marginInlineEnd: labelColonMarginRight,
+            marginInlineStart: labelColonMarginInlineStart,
+            marginInlineEnd: labelColonMarginInlineEnd,
           },
 
           [`&${formItemCls}-no-colon::after`]: {
@@ -522,8 +522,8 @@ export default genComponentStyleHook(
     labelColor: token.colorTextHeading,
     labelFontSize: token.fontSize,
     labelHeight: token.controlHeight,
-    labelColonMarginLeft: token.marginXXS / 2,
-    labelColonMarginRight: token.marginXS,
+    labelColonMarginInlineStart: token.marginXXS / 2,
+    labelColonMarginInlineEnd: token.marginXS,
     itemMarginBottom: token.marginLG,
   }),
 );
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
@@ -185,8 +185,8 @@ This document contains the correspondence between all the less variables related
 | `@form-vertical-label-margin` | - | used as 0 |
 | `@form-item-label-font-size` | `labelFontSize` | - |
 | `@form-item-label-height` | `labelHeight` | - |
-| `@form-item-label-colon-margin-right` | `labelColonMarginRight` | - |
-| `@form-item-label-colon-margin-left` | `labelColonMarginLeft` | - |
+| `@form-item-label-colon-margin-right` | `labelColonMarginInlineEnd` | - |
+| `@form-item-label-colon-margin-left` | `labelColonMarginInlineStart` | - |
 | `@form-error-input-bg` | - | Deprecated for style change |
 
 ### Image

diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
@@ -183,8 +183,8 @@ title: Less 变量迁移 Design Token
 | `@form-vertical-label-margin` | - | 值为 0 |
 | `@form-item-label-font-size` | `labelFontSize` | - |
 | `@form-item-label-height` | `labelHeight` | - |
-| `@form-item-label-colon-margin-right` | `labelColonMarginRight` | - |
-| `@form-item-label-colon-margin-left` | `labelColonMarginLeft` | - |
+| `@form-item-label-colon-margin-right` | `labelColonMarginInlineEnd` | - |
+| `@form-item-label-colon-margin-left` | `labelColonMarginInlineStart` | - |
 | `@form-error-input-bg` | - | 由于样式变化已废弃 |
 
 ### Image 图片