From c8db81713351273c98bf17bb2dfa987d197f0275 Mon Sep 17 00:00:00 2001 From: MadCcc Date: Tue, 14 Nov 2023 10:08:34 +0800 Subject: [PATCH] refacor: form css var (#45849) * refacor: form css var * chore: code clean * chore: update * chore: use lineHeight --- components/form/ErrorList.tsx | 6 +++-- components/form/Form.tsx | 6 +++-- components/form/style/cssVar.ts | 4 ++++ components/form/style/index.ts | 41 ++++++++++++++++++--------------- scripts/check-cssinjs.tsx | 1 - 5 files changed, 34 insertions(+), 24 deletions(-) create mode 100644 components/form/style/cssVar.ts diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx index 4ab2f8bc02..c9ae606514 100644 --- 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 = ({ 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 = ({ helpProps.id = `${fieldId}_help`; } - return ( + return wrapCSSVar( = ({ ); }} - + , ); }; diff --git a/components/form/Form.tsx b/components/form/Form.tsx index 4102eac394..1aef308fdd 100644 --- 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 = (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 = (p } }; - return wrapSSR( + return wrapCSSVar( ({ 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 = (token) => { '&-wrap': { overflow: 'unset', - lineHeight: `${token.lineHeight} - 0.25em`, + lineHeight: token.lineHeight, whiteSpace: 'unset', }, @@ -515,7 +516,7 @@ const genVerticalStyle: GenerateStyle = (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 = (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 = (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>[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 index 28649f474e..a8b6121504 100644 --- 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',