refacor: form css var (ant-design#45849)

* refacor: form css var * chore: code clean * chore: update * chore: use lineHeight
wanghui2021 · Nov 14, 2023 · c8db817 · c8db817
1 parent 1d04efc
commit c8db817
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 24 deletions.
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
@@ -9,6 +9,7 @@ import type { ValidateStatus } from './FormItem';
 import useDebounce from './hooks/useDebounce';
 
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 const EMPTY_LIST: React.ReactNode[] = [];
 
@@ -55,6 +56,7 @@ const ErrorList: React.FC<ErrorListProps> = ({
   const baseClassName = `${prefixCls}-item-explain`;
 
   const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const collapseMotion: CSSMotionProps = useMemo(() => initCollapseMotion(prefixCls), [prefixCls]);
 
@@ -82,7 +84,7 @@ const ErrorList: React.FC<ErrorListProps> = ({
     helpProps.id = `${fieldId}_help`;
   }
 
-  return (
+  return wrapCSSVar(
     <CSSMotion
       motionDeadline={collapseMotion.motionDeadline}
       motionName={`${prefixCls}-show-help`}
@@ -130,7 +132,7 @@ const ErrorList: React.FC<ErrorListProps> = ({
           </div>
         );
       }}
-    </CSSMotion>
+    </CSSMotion>,
   );
 };
 

diff --git a/components/form/Form.tsx b/components/form/Form.tsx
@@ -17,6 +17,7 @@ import useForm, { type FormInstance } from './hooks/useForm';
 import useFormWarning from './hooks/useFormWarning';
 import type { FormLabelAlign } from './interface';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 import ValidateMessagesContext from './validateMessagesContext';
 import type { FeedbackIcons } from './FormItem';
 
@@ -103,7 +104,8 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
   const prefixCls = getPrefixCls('form', customizePrefixCls);
 
   // Style
-  const [wrapSSR, hashId] = useStyle(prefixCls);
+  const [, hashId] = useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
   const formClassName = classNames(
     prefixCls,
@@ -177,7 +179,7 @@ const InternalForm: React.ForwardRefRenderFunction<FormInstance, FormProps> = (p
     }
   };
 
-  return wrapSSR(
+  return wrapCSSVar(
     <DisabledContextProvider disabled={disabled}>
       <SizeContext.Provider value={mergedSize}>
         <FormProvider

diff --git a/components/form/style/cssVar.ts b/components/form/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Form', prepareComponentToken);
diff --git a/components/form/style/index.ts b/components/form/style/index.ts
@@ -3,10 +3,11 @@ 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 type { AliasToken, FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 import type { GenStyleFn } from '../../theme/util/genComponentStyleHook';
 import genFormValidateMotionStyle from './explain';
+import { unit } from '@ant-design/cssinjs';
 
 export interface ComponentToken {
   /**
@@ -71,7 +72,7 @@ const resetForm = (token: AliasToken): CSSObject => ({
     fontSize: token.fontSizeLG,
     lineHeight: 'inherit',
     border: 0,
-    borderBottom: `${token.lineWidth}px ${token.lineType} ${token.colorBorder}`,
+    borderBottom: `${unit(token.lineWidth)} ${token.lineType} ${token.colorBorder}`,
   },
 
   label: {
@@ -107,7 +108,7 @@ const resetForm = (token: AliasToken): CSSObject => ({
   input[type='radio']:focus,
   input[type='checkbox']:focus`]: {
     outline: 0,
-    boxShadow: `0 0 0 ${token.controlOutlineWidth}px ${token.controlOutline}`,
+    boxShadow: `0 0 0 ${unit(token.controlOutlineWidth)} ${token.controlOutline}`,
   },
 
   // Adjust output element
@@ -223,7 +224,7 @@ const genFormItemStyle: GenerateStyle<FormToken> = (token) => {
 
         '&-wrap': {
           overflow: 'unset',
-          lineHeight: `${token.lineHeight} - 0.25em`,
+          lineHeight: token.lineHeight,
           whiteSpace: 'unset',
         },
 
@@ -515,7 +516,7 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {
       .${rootPrefixCls}-col-24${formItemCls}-label,
       .${rootPrefixCls}-col-xl-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
 
-    [`@media (max-width: ${token.screenXSMax}px)`]: [
+    [`@media (max-width: ${unit(token.screenXSMax)})`]: [
       makeVerticalLayout(token),
       {
         [componentCls]: {
@@ -524,19 +525,19 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {
       },
     ],
 
-    [`@media (max-width: ${token.screenSMMax}px)`]: {
+    [`@media (max-width: ${unit(token.screenSMMax)})`]: {
       [componentCls]: {
         [`.${rootPrefixCls}-col-sm-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
       },
     },
 
-    [`@media (max-width: ${token.screenMDMax}px)`]: {
+    [`@media (max-width: ${unit(token.screenMDMax)})`]: {
       [componentCls]: {
         [`.${rootPrefixCls}-col-md-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
       },
     },
 
-    [`@media (max-width: ${token.screenLGMax}px)`]: {
+    [`@media (max-width: ${unit(token.screenLGMax)})`]: {
       [componentCls]: {
         [`.${rootPrefixCls}-col-lg-24${formItemCls}-label`]: makeVerticalLayoutLabel(token),
       },
@@ -545,6 +546,18 @@ const genVerticalStyle: GenerateStyle<FormToken> = (token) => {
 };
 
 // ============================== Export ==============================
+export const prepareComponentToken: GetDefaultToken<'Form'> = (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,
+});
+
 export const prepareToken: (
   token: Parameters<GenStyleFn<'Form'>>[0],
   rootPrefixCls: string,
@@ -573,17 +586,7 @@ export default genComponentStyleHook(
       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,
-  }),
+  prepareComponentToken,
   {
     // Let From style before the Grid
     // ref https://github.com/ant-design/ant-design/issues/44386

diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx
@@ -47,7 +47,6 @@ async function checkCSSVar() {
     'drawer',
     'dropdown',
     'float-button',
-    'form',
     'grid',
     'icon',
     'image',