fix: Form xs breakpoint (ant-design#44388)

ammar-knowledge · Aug 24, 2023 · 3405450 · 3405450
1 parent 9312b00
commit 3405450
Showing 1 changed file with 10 additions and 5 deletions.
diff --git a/components/form/style/index.ts b/components/form/style/index.ts
@@ -1,4 +1,5 @@
 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';
@@ -400,18 +401,22 @@ const makeVerticalLayoutLabel = (token: FormToken): CSSObject => ({
 });
 
 const makeVerticalLayout = (token: FormToken): CSSObject => {
-  const { componentCls, formItemCls } = token;
+  const { componentCls, formItemCls, rootPrefixCls } = token;
 
   return {
     [`${formItemCls} ${formItemCls}-label`]: makeVerticalLayoutLabel(token),
     [componentCls]: {
       [formItemCls]: {
         flexWrap: 'wrap',
 
-        [`${formItemCls}-label,
-          ${formItemCls}-control`]: {
-          flex: '0 0 100%',
-          maxWidth: '100%',
+        [`${formItemCls}-label, ${formItemCls}-control`]: {
+          // When developer pass `xs: { span }`,
+          // It should follow the `xs` screen config
+          // ref: https://github.com/ant-design/ant-design/issues/44386
+          [`&:not([class*=" ${rootPrefixCls}-col-xs"])`]: {
+            flex: '0 0 100%',
+            maxWidth: '100%',
+          },
         },
       },
     },