revert: "refactor: Remove duplicated less loop" (#20636)

* Revert "refactor: Remove duplicated less loop (#20590)"

This reverts commit af2d803829.

* Update package.json

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -170,7 +170,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class=""
@@ -180,7 +180,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control-input"
@@ -218,7 +218,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class=""
@@ -228,7 +228,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control-input"
@@ -295,7 +295,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class=""
@@ -305,7 +305,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control-input"
@@ -403,7 +403,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class=""
@@ -413,7 +413,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control-input"
@@ -480,7 +480,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class=""
@@ -490,7 +490,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control-input"
@@ -617,7 +617,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class=""
@@ -627,7 +627,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control-input"
@@ -755,7 +755,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label"
+      class="ant-col ant-form-item-label ant-col-xs-24 ant-col-sm-8"
     >
       <label
         class=""
@@ -765,7 +765,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-sm-16"
     >
       <div
         class="ant-form-item-control-input"

components/auto-complete/__tests__/index.test.js

@@ -24,12 +24,7 @@ describe('AutoComplete with Custom Input Element Render', () => {
 
   it('AutoComplete should work when dataSource is object array', () => {
     const wrapper = mount(
-      <AutoComplete
+      <AutoComplete dataSource={[{ text: 'text', value: 'value' }, { text: 'abc', value: 'xxx' }]}>
-        dataSource={[
-          { text: 'text', value: 'value' },
-          { text: 'abc', value: 'xxx' },
-        ]}
-      >
         <input />
       </AutoComplete>,
     );

components/card/__tests__/__snapshots__/demo.test.js.snap

@@ -236,7 +236,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -263,7 +263,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -290,7 +290,7 @@ exports[`renders ./components/card/demo/in-column.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -439,7 +439,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-base-22"
+            class="ant-col ant-col-22"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -452,7 +452,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-base-8"
+            class="ant-col ant-col-8"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -460,7 +460,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-base-15"
+            class="ant-col ant-col-15"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -473,7 +473,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-base-6"
+            class="ant-col ant-col-6"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -481,7 +481,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-base-18"
+            class="ant-col ant-col-18"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -494,7 +494,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-base-13"
+            class="ant-col ant-col-13"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -502,7 +502,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-base-9"
+            class="ant-col ant-col-9"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -515,7 +515,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
           style="margin-left:-4px;margin-right:-4px"
         >
           <div
-            class="ant-col ant-col-base-4"
+            class="ant-col ant-col-4"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -523,7 +523,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-base-3"
+            class="ant-col ant-col-3"
             style="padding-left:4px;padding-right:4px"
           >
             <div
@@ -531,7 +531,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
             />
           </div>
           <div
-            class="ant-col ant-col-base-16"
+            class="ant-col ant-col-16"
             style="padding-left:4px;padding-right:4px"
           >
             <div

components/card/__tests__/__snapshots__/index.test.js.snap

@@ -27,7 +27,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-base-22"
+          class="ant-col ant-col-22"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -40,7 +40,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-base-8"
+          class="ant-col ant-col-8"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -48,7 +48,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-base-15"
+          class="ant-col ant-col-15"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -61,7 +61,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-base-6"
+          class="ant-col ant-col-6"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -69,7 +69,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-base-18"
+          class="ant-col ant-col-18"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -82,7 +82,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-base-13"
+          class="ant-col ant-col-13"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -90,7 +90,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-base-9"
+          class="ant-col ant-col-9"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -103,7 +103,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
         style="margin-left: -4px; margin-right: -4px;"
       >
         <div
-          class="ant-col ant-col-base-4"
+          class="ant-col ant-col-4"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -111,7 +111,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-base-3"
+          class="ant-col ant-col-3"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div
@@ -119,7 +119,7 @@ exports[`Card should still have padding when card which set padding to 0 is load
           />
         </div>
         <div
-          class="ant-col ant-col-base-16"
+          class="ant-col ant-col-16"
           style="padding-left: 4px; padding-right: 4px;"
         >
           <div

components/checkbox/__tests__/__snapshots__/demo.test.js.snap

@@ -405,7 +405,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -428,7 +428,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -451,7 +451,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -474,7 +474,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       <label
         class="ant-checkbox-wrapper"
@@ -497,7 +497,7 @@ exports[`renders ./components/checkbox/demo/layout.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       <label
         class="ant-checkbox-wrapper"

components/checkbox/__tests__/group.test.js

@@ -38,10 +38,7 @@ describe('CheckboxGroup', () => {
   it('does not trigger onChange callback of both Checkbox and CheckboxGroup when CheckboxGroup is disabled', () => {
     const onChangeGroup = jest.fn();
 
-    const options = [
+    const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Pear', value: 'Pear' }];
-      { label: 'Apple', value: 'Apple' },
-      { label: 'Pear', value: 'Pear' },
-    ];
 
     const groupWrapper = mount(
       <Checkbox.Group options={options} onChange={onChangeGroup} disabled />,
@@ -87,10 +84,7 @@ describe('CheckboxGroup', () => {
   });
 
   it('passes prefixCls down to checkbox', () => {
-    const options = [
+    const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }];
-      { label: 'Apple', value: 'Apple' },
-      { label: 'Orange', value: 'Orange' },
-    ];
 
     const wrapper = render(<Checkbox.Group prefixCls="my-checkbox" options={options} />);
 
@@ -98,10 +92,7 @@ describe('CheckboxGroup', () => {
   });
 
   it('should be controlled by value', () => {
-    const options = [
+    const options = [{ label: 'Apple', value: 'Apple' }, { label: 'Orange', value: 'Orange' }];
-      { label: 'Apple', value: 'Apple' },
-      { label: 'Orange', value: 'Orange' },
-    ];
 
     const wrapper = mount(<Checkbox.Group options={options} />);
 

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -6839,7 +6839,7 @@ exports[`ConfigProvider components Grid configProvider 1`] = `
   class="config-row"
 >
   <div
-    class="config-col config-col-base-1"
+    class="config-col config-col-1"
   />
 </div>
 `;
@@ -6849,7 +6849,7 @@ exports[`ConfigProvider components Grid normal 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col ant-col-base-1"
+    class="ant-col ant-col-1"
   />
 </div>
 `;
@@ -6859,7 +6859,7 @@ exports[`ConfigProvider components Grid prefixCls 1`] = `
   class="prefix-row"
 >
   <div
-    class="prefix-col prefix-col-base-1"
+    class="prefix-col prefix-col-1"
   />
 </div>
 `;

components/grid/RowContext.tsx

@@ -1,8 +1,6 @@
 import { createContext, Context } from 'react';
-import { BreakpointMap } from '../_util/responsiveObserve';
 
 export interface RowContextState {
-  screens?: BreakpointMap;
   gutter?: [number, number];
 }
 

components/grid/__tests__/__snapshots__/demo.test.js.snap

@@ -6,7 +6,7 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-24"
+      class="ant-col ant-col-24"
     >
       col
     </div>
@@ -15,12 +15,12 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-12"
+      class="ant-col ant-col-12"
     >
       col-12
     </div>
     <div
-      class="ant-col ant-col-base-12"
+      class="ant-col ant-col-12"
     >
       col-12
     </div>
@@ -29,17 +29,17 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       col-8
     </div>
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       col-8
     </div>
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       col-8
     </div>
@@ -48,22 +48,22 @@ exports[`renders ./components/grid/demo/basic.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
     >
       col-6
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
     >
       col-6
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
     >
       col-6
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
     >
       col-6
     </div>
@@ -80,22 +80,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-start"
   >
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -107,22 +107,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-center"
   >
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -134,22 +134,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-end"
   >
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -161,22 +161,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-space-between"
   >
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -188,22 +188,22 @@ exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
     class="ant-row ant-row-space-around"
   >
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       col-4
     </div>
@@ -220,7 +220,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row ant-row-center ant-row-top"
   >
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-100"
@@ -229,7 +229,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-50"
@@ -238,7 +238,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-120"
@@ -247,7 +247,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-80"
@@ -263,7 +263,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row ant-row-space-around ant-row-middle"
   >
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-100"
@@ -272,7 +272,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-50"
@@ -281,7 +281,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-120"
@@ -290,7 +290,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-80"
@@ -306,7 +306,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
     class="ant-row ant-row-space-between ant-row-bottom"
   >
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-100"
@@ -315,7 +315,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-50"
@@ -324,7 +324,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-120"
@@ -333,7 +333,7 @@ exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
       </p>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <p
         class="height-80"
@@ -351,22 +351,22 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-6 ant-col-base-order-4"
+      class="ant-col ant-col-6 ant-col-order-4"
     >
       1 col-order-4
     </div>
     <div
-      class="ant-col ant-col-base-6 ant-col-base-order-3"
+      class="ant-col ant-col-6 ant-col-order-3"
     >
       2 col-order-3
     </div>
     <div
-      class="ant-col ant-col-base-6 ant-col-base-order-2"
+      class="ant-col ant-col-6 ant-col-order-2"
     >
       3 col-order-2
     </div>
     <div
-      class="ant-col ant-col-base-6 ant-col-base-order-1"
+      class="ant-col ant-col-6 ant-col-order-1"
     >
       4 col-order-1
     </div>
@@ -445,7 +445,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
-      class="ant-col gutter-row ant-col-base-6"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -455,7 +455,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col gutter-row ant-col-base-6"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -465,7 +465,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col gutter-row ant-col-base-6"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -475,7 +475,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col gutter-row ant-col-base-6"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -490,7 +490,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
     style="margin-top:-10px;margin-bottom:10px"
   >
     <div
-      class="ant-col gutter-row ant-col-base-6"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-top:10px;padding-bottom:10px"
     >
       <div
@@ -500,7 +500,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col gutter-row ant-col-base-6"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-top:10px;padding-bottom:10px"
     >
       <div
@@ -510,7 +510,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col gutter-row ant-col-base-6"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-top:10px;padding-bottom:10px"
     >
       <div
@@ -520,7 +520,7 @@ exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col gutter-row ant-col-base-6"
+      class="ant-col ant-col-6 gutter-row"
       style="padding-top:10px;padding-bottom:10px"
     >
       <div
@@ -539,12 +539,12 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-8"
+      class="ant-col ant-col-8"
     >
       col-8
     </div>
     <div
-      class="ant-col ant-col-base-8 ant-col-base-offset-8"
+      class="ant-col ant-col-8 ant-col-offset-8"
     >
       col-8
     </div>
@@ -553,12 +553,12 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-6 ant-col-base-offset-6"
+      class="ant-col ant-col-6 ant-col-offset-6"
     >
       col-6 col-offset-6
     </div>
     <div
-      class="ant-col ant-col-base-6 ant-col-base-offset-6"
+      class="ant-col ant-col-6 ant-col-offset-6"
     >
       col-6 col-offset-6
     </div>
@@ -567,7 +567,7 @@ exports[`renders ./components/grid/demo/offset.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-12 ant-col-base-offset-6"
+      class="ant-col ant-col-12 ant-col-offset-6"
     >
       col-12 col-offset-6
     </div>
@@ -880,7 +880,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
   >
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -888,7 +888,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -896,7 +896,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -904,7 +904,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -917,7 +917,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px;margin-top:-8px;margin-bottom:8px"
   >
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -925,7 +925,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -933,7 +933,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -941,7 +941,7 @@ exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-6"
+      class="ant-col ant-col-6"
       style="padding-left:8px;padding-right:8px;padding-top:8px;padding-bottom:8px"
     >
       <div>
@@ -973,17 +973,17 @@ exports[`renders ./components/grid/demo/responsive.md correctly 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col"
+    class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
   >
     Col
   </div>
   <div
-    class="ant-col"
+    class="ant-col ant-col-xs-20 ant-col-sm-16 ant-col-md-12 ant-col-lg-8 ant-col-xl-4"
   >
     Col
   </div>
   <div
-    class="ant-col"
+    class="ant-col ant-col-xs-2 ant-col-sm-4 ant-col-md-6 ant-col-lg-8 ant-col-xl-10"
   >
     Col
   </div>
@@ -995,17 +995,17 @@ exports[`renders ./components/grid/demo/responsive-more.md correctly 1`] = `
   class="ant-row"
 >
   <div
-    class="ant-col"
+    class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
   >
     Col
   </div>
   <div
-    class="ant-col"
+    class="ant-col ant-col-xs-11 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
   >
     Col
   </div>
   <div
-    class="ant-col"
+    class="ant-col ant-col-xs-5 ant-col-xs-offset-1 ant-col-lg-6 ant-col-lg-offset-2"
   >
     Col
   </div>
@@ -1018,12 +1018,12 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-18 ant-col-base-push-6"
+      class="ant-col ant-col-18 ant-col-push-6"
     >
       col-18 col-push-6
     </div>
     <div
-      class="ant-col ant-col-base-6 ant-col-base-pull-18"
+      class="ant-col ant-col-6 ant-col-pull-18"
     >
       col-6 col-pull-18
     </div>

components/grid/__tests__/__snapshots__/index.test.js.snap

@@ -7,12 +7,12 @@ exports[`Grid renders wrapped Col correctly 1`] = `
 >
   <div>
     <div
-      class="ant-col ant-col-base-12"
+      class="ant-col ant-col-12"
       style="padding-left:10px;padding-right:10px"
     />
   </div>
   <div
-    class="ant-col ant-col-base-12"
+    class="ant-col ant-col-12"
     style="padding-left:10px;padding-right:10px"
   />
 </div>
@@ -32,7 +32,7 @@ exports[`Grid rtl render component should be rendered correctly in RTL direction
 
 exports[`Grid should render Col 1`] = `
 <div
-  class="ant-col ant-col-base-2"
+  class="ant-col ant-col-2"
 />
 `;
 

components/grid/__tests__/index.test.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { render, mount } from 'enzyme';
 import { Col, Row } from '..';
 import mountTest from '../../../tests/shared/mountTest';
-import { getScreenClassNames } from '../col';
 import rtlTest from '../../../tests/shared/rtlTest';
 
 describe('Grid', () => {
@@ -91,18 +90,4 @@ describe('Grid', () => {
       marginBottom: 10,
     });
   });
-
-  it('should use best match responsive', () => {
-    expect(
-      getScreenClassNames(
-        'test',
-        { sm: true, xl: true },
-        {
-          span: 1,
-          sm: 2,
-          xl: 3,
-        },
-      ),
-    ).toEqual('test-base-3');
-  });
 });

components/grid/col.tsx

@@ -1,10 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import omit from 'omit.js';
 import RowContext from './RowContext';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import { tuple } from '../_util/type';
-import { BreakpointMap } from '../_util/responsiveObserve';
 
 // https://github.com/ant-design/ant-design/issues/14324
 type ColSpanType = number | string;
@@ -47,55 +44,63 @@ function parseFlex(flex: FlexType): string {
   return flex;
 }
 
-const RESPONSIVE_LIST = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
-
-const ResponsiveTypes = tuple('xxl', 'xl', 'lg', 'md', 'sm', 'xs');
-export type ResponsiveType = typeof ResponsiveTypes[number];
-
-export function getScreenClassNames(
-  prefixCls: string,
-  screens: BreakpointMap,
-  { span, order, offset, push, pull, ...restProps }: ColProps,
-) {
-  let mergedScreenObj: ColSize = {
-    span,
-    order,
-    offset,
-    push,
-    pull,
-  };
-
-  for (let i = 0; i < RESPONSIVE_LIST.length; i += 1) {
-    const screen = RESPONSIVE_LIST[i] as ResponsiveType;
-    const screenObj = restProps[screen];
-    if (screens[screen] && screenObj !== undefined) {
-      mergedScreenObj = typeof screenObj === 'object' ? screenObj : { span: screenObj };
-      break;
-    }
-  }
-
-  return classNames({
-    [`${prefixCls}-base-${mergedScreenObj.span}`]: mergedScreenObj.span !== undefined,
-    [`${prefixCls}-base-order-${mergedScreenObj.order}`]: mergedScreenObj.order !== undefined,
-    [`${prefixCls}-base-offset-${mergedScreenObj.offset}`]: mergedScreenObj.offset !== undefined,
-    [`${prefixCls}-base-push-${mergedScreenObj.push}`]: mergedScreenObj.push !== undefined,
-    [`${prefixCls}-base-pull-${mergedScreenObj.pull}`]: mergedScreenObj.pull !== undefined,
-  });
-}
-
 export default class Col extends React.Component<ColProps, {}> {
   renderCol = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
     const { props } = this;
-    const { prefixCls: customizePrefixCls, className, children, flex, style, ...others } = props;
+    const {
+      prefixCls: customizePrefixCls,
+      span,
+      order,
+      offset,
+      push,
+      pull,
+      className,
+      children,
+      flex,
+      style,
+      ...others
+    } = props;
     const prefixCls = getPrefixCls('col', customizePrefixCls);
-    const restProps = omit(others, [...RESPONSIVE_LIST, 'span', 'order', 'offset', 'push', 'pull']);
+    let sizeClassObj = {};
+    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
+      let sizeProps: ColSize = {};
+      const propSize = (props as any)[size];
+      if (typeof propSize === 'number') {
+        sizeProps.span = propSize;
+      } else if (typeof propSize === 'object') {
+        sizeProps = propSize || {};
+      }
+
+      delete (others as any)[size];
+
+      sizeClassObj = {
+        ...sizeClassObj,
+        [`${prefixCls}-${size}-${sizeProps.span}`]: sizeProps.span !== undefined,
+        [`${prefixCls}-${size}-order-${sizeProps.order}`]: sizeProps.order || sizeProps.order === 0,
+        [`${prefixCls}-${size}-offset-${sizeProps.offset}`]:
+          sizeProps.offset || sizeProps.offset === 0,
+        [`${prefixCls}-${size}-push-${sizeProps.push}`]: sizeProps.push || sizeProps.push === 0,
+        [`${prefixCls}-${size}-pull-${sizeProps.pull}`]: sizeProps.pull || sizeProps.pull === 0,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      };
+    });
+    const classes = classNames(
+      prefixCls,
+      {
+        [`${prefixCls}-${span}`]: span !== undefined,
+        [`${prefixCls}-order-${order}`]: order,
+        [`${prefixCls}-offset-${offset}`]: offset,
+        [`${prefixCls}-push-${push}`]: push,
+        [`${prefixCls}-pull-${pull}`]: pull,
+      },
+      className,
+      sizeClassObj,
+    );
 
     return (
       <RowContext.Consumer>
-        {({ gutter, screens = {} }) => {
+        {({ gutter }) => {
           let mergedStyle: React.CSSProperties = { ...style };
-          const screenClassNames = getScreenClassNames(prefixCls, screens, this.props);
-
           if (gutter) {
             mergedStyle = {
               ...(gutter[0]! > 0
@@ -118,13 +123,7 @@ export default class Col extends React.Component<ColProps, {}> {
           }
 
           return (
-            <div
+            <div {...others} style={mergedStyle} className={classes}>
-              {...restProps}
-              style={mergedStyle}
-              className={classNames(prefixCls, className, screenClassNames, {
-                [`${prefixCls}-rtl`]: direction === 'rtl',
-              })}
-            >
               {children}
             </div>
           );

components/grid/row.tsx

@@ -37,7 +37,13 @@ export default class Row extends React.Component<RowProps, RowState> {
 
   componentDidMount() {
     this.token = ResponsiveObserve.subscribe(screens => {
-      this.setState({ screens });
+      const { gutter } = this.props;
+      if (
+        typeof gutter === 'object' ||
+        (Array.isArray(gutter) && (typeof gutter[0] === 'object' || typeof gutter[1] === 'object'))
+      ) {
+        this.setState({ screens });
+      }
     });
   }
 
@@ -67,7 +73,6 @@ export default class Row extends React.Component<RowProps, RowState> {
   }
 
   renderRow = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-    const { screens } = this.state;
     const {
       prefixCls: customizePrefixCls,
       justify,
@@ -107,7 +112,7 @@ export default class Row extends React.Component<RowProps, RowState> {
     delete otherProps.gutter;
 
     return (
-      <RowContext.Provider value={{ screens, gutter }}>
+      <RowContext.Provider value={{ gutter }}>
         <div {...otherProps} className={classes} style={rowStyle}>
           {children}
         </div>

components/grid/style/index.less

@@ -69,6 +69,52 @@
   }
 }
 
-// After antd v4, we only generate one grid layout
+.make-grid();
-// since modern browser already support media query that we can reuse className
+
-.make-grid(-base);
+// Extra small grid
+//
+// Columns, offsets, pushes, and pulls for extra small devices like
+// smartphones.
+
+.make-grid(-xs);
+
+// Small grid
+//
+// Columns, offsets, pushes, and pulls for the small device range, from phones
+// to tablets.
+
+@media (min-width: @screen-sm-min) {
+  .make-grid(-sm);
+}
+
+// Medium grid
+//
+// Columns, offsets, pushes, and pulls for the desktop device range.
+
+@media (min-width: @screen-md-min) {
+  .make-grid(-md);
+}
+
+// Large grid
+//
+// Columns, offsets, pushes, and pulls for the large desktop device range.
+
+@media (min-width: @screen-lg-min) {
+  .make-grid(-lg);
+}
+
+// Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xl-min) {
+  .make-grid(-xl);
+}
+
+// Extra Extra Large grid
+//
+// Columns, offsets, pushes, and pulls for the full hd device range.
+
+@media (min-width: @screen-xxl-min) {
+  .make-grid(-xxl);
+}

components/input/__tests__/__snapshots__/demo.test.js.snap

@@ -956,7 +956,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       style="margin-left:-4px;margin-right:-4px"
     >
       <div
-        class="ant-col ant-col-base-5"
+        class="ant-col ant-col-5"
         style="padding-left:4px;padding-right:4px"
       >
         <input
@@ -966,7 +966,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
         />
       </div>
       <div
-        class="ant-col ant-col-base-8"
+        class="ant-col ant-col-8"
         style="padding-left:4px;padding-right:4px"
       >
         <input

components/list/__tests__/__snapshots__/demo.test.js.snap

@@ -182,7 +182,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="ant-col ant-col-base-6"
+          class="ant-col ant-col-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -213,7 +213,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-base-6"
+          class="ant-col ant-col-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -244,7 +244,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-base-6"
+          class="ant-col ant-col-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -275,7 +275,7 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-base-6"
+          class="ant-col ant-col-6"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -451,7 +451,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="ant-col"
+          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -482,7 +482,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col"
+          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -513,7 +513,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col"
+          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -544,7 +544,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col"
+          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -575,7 +575,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col"
+          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div
@@ -606,7 +606,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col"
+          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           style="padding-left:8px;padding-right:8px"
         >
           <div

components/list/style/index.less

@@ -30,7 +30,7 @@
     .@{ant-prefix}-pagination-options {
       text-align: left;
     }
-
+    
     .@{list-prefix-cls}-rtl & {
       text-align: left;
     }

components/mentions/__tests__/__snapshots__/demo.test.js.snap

@@ -32,7 +32,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-base-6"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class=""
@@ -43,7 +43,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-base-16"
+      class="ant-col ant-col-16 ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"
@@ -63,7 +63,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-base-6"
+      class="ant-col ant-col-6 ant-form-item-label"
     >
       <label
         class="ant-form-item-required"
@@ -74,7 +74,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
       </label>
     </div>
     <div
-      class="ant-col ant-form-item-control ant-col-base-16"
+      class="ant-col ant-col-16 ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"
@@ -95,7 +95,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-control ant-col-base-14 ant-col-base-offset-6"
+      class="ant-col ant-col-14 ant-col-offset-6 ant-form-item-control"
     >
       <div
         class="ant-form-item-control-input"

components/slider/__tests__/__snapshots__/demo.test.js.snap

@@ -231,7 +231,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-12"
+      class="ant-col ant-col-12"
     >
       <div
         class="ant-slider"
@@ -262,7 +262,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <div
         class="ant-input-number"
@@ -351,7 +351,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
     class="ant-row"
   >
     <div
-      class="ant-col ant-col-base-12"
+      class="ant-col ant-col-12"
     >
       <div
         class="ant-slider"
@@ -382,7 +382,7 @@ exports[`renders ./components/slider/demo/input-number.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-4"
+      class="ant-col ant-col-4"
     >
       <div
         class="ant-input-number"

components/statistic/__tests__/__snapshots__/demo.test.js.snap

@@ -6,7 +6,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-col ant-col-base-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -33,7 +33,7 @@ exports[`renders ./components/statistic/demo/basic.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col ant-col-base-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -85,7 +85,7 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
     style="margin-left:-8px;margin-right:-8px"
   >
     <div
-      class="ant-col ant-col-base-12"
+      class="ant-col ant-col-12"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -155,7 +155,7 @@ exports[`renders ./components/statistic/demo/card.md correctly 1`] = `
       </div>
     </div>
     <div
-      class="ant-col ant-col-base-12"
+      class="ant-col ant-col-12"
       style="padding-left:8px;padding-right:8px"
     >
       <div
@@ -234,7 +234,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-col ant-col-base-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -257,7 +257,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col ant-col-base-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -280,7 +280,7 @@ exports[`renders ./components/statistic/demo/countdown.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col ant-col-base-24"
+    class="ant-col ant-col-24"
     style="padding-left:8px;padding-right:8px;margin-top:32px"
   >
     <div
@@ -311,7 +311,7 @@ exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
   style="margin-left:-8px;margin-right:-8px"
 >
   <div
-    class="ant-col ant-col-base-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div
@@ -362,7 +362,7 @@ exports[`renders ./components/statistic/demo/unit.md correctly 1`] = `
     </div>
   </div>
   <div
-    class="ant-col ant-col-base-12"
+    class="ant-col ant-col-12"
     style="padding-left:8px;padding-right:8px"
   >
     <div

components/upload/__tests__/__snapshots__/demo.test.js.snap

@@ -1979,7 +1979,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
     class="ant-row ant-form-item"
   >
     <div
-      class="ant-col ant-form-item-label ant-col-base-4"
+      class="ant-col ant-col-4 ant-form-item-label"
     >
       <label
         class=""

package.json

@@ -262,11 +262,11 @@
     },
     {
       "path": "./dist/antd.min.css",
-      "maxSize": "60 kB"
+      "maxSize": "65 kB"
     },
     {
       "path": "./dist/antd.dark.min.css",
-      "maxSize": "60 kB"
+      "maxSize": "65 kB"
     }
   ],
   "title": "Ant Design"

site/theme/static/responsive.less

@@ -133,8 +133,7 @@
     border-right: 0;
   }
 
-  .main-container,
+  .main-container, .ant-row-rtl .main-container {
-  .ant-row-rtl .main-container {
     margin-right: 0;
     margin-left: 0;
     padding-right: 16px;