add grid xxl to List fixed: #9019 (#9038)

components/grid/col.tsx

@@ -25,6 +25,7 @@ export interface ColProps {
   md?: number | ColSize;
   lg?: number | ColSize;
   xl?: number | ColSize;
+  xxl?: number | ColSize;
   prefixCls?: string;
   style?: React.CSSProperties;
 }
@@ -43,6 +44,7 @@ export default class Col extends React.Component<ColProps, {}> {
     md: objectOrNumber,
     lg: objectOrNumber,
     xl: objectOrNumber,
+    xxl: objectOrNumber,
   };
 
   render() {

components/list/Item.tsx

@@ -67,6 +67,7 @@ export default class Item extends React.Component<ListItemProps, any> {
     md: PropTypes.oneOf(GridColumns),
     lg: PropTypes.oneOf(GridColumns),
     xl: PropTypes.oneOf(GridColumns),
+    xxl: PropTypes.oneOf(GridColumns),
   };
 
   static contextTypes = {
@@ -131,6 +132,7 @@ export default class Item extends React.Component<ListItemProps, any> {
         md={getGrid(grid, 'md')}
         lg={getGrid(grid, 'lg')}
         xl={getGrid(grid, 'xl')}
+        xxl={getGrid(grid, 'xxl')}
       >
         <div {...others} className={classString}>
           {extra && extraContent}

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

@@ -446,7 +446,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           style="margin-left:-8px;margin-right:-8px"
         >
           <div
-            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
+            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           >
             <div
               class="ant-list-item"
@@ -483,7 +483,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
+            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           >
             <div
               class="ant-list-item"
@@ -520,7 +520,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
+            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           >
             <div
               class="ant-list-item"
@@ -557,7 +557,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
+            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           >
             <div
               class="ant-list-item"
@@ -594,7 +594,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
+            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           >
             <div
               class="ant-list-item"
@@ -631,7 +631,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
             </div>
           </div>
           <div
-            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4"
+            class="ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
           >
             <div
               class="ant-list-item"

components/list/demo/resposive.md

@@ -39,7 +39,7 @@ const data = [
 
 ReactDOM.render(
   <List
-    grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6 }}
+    grid={{ gutter: 16, xs: 1, sm: 2, md: 4, lg: 4, xl: 6, xxl: 3 }}
     dataSource={data}
     renderItem={item => (
       <List.Item>

components/list/index.tsx

@@ -15,7 +15,7 @@ export { ListItemProps, ListItemMetaProps } from './Item';
 
 export type ColumnCount = 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
 
-export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
 export interface ListGridType {
   gutter?: number;
@@ -25,6 +25,7 @@ export interface ListGridType {
   md?: ColumnCount;
   lg?: ColumnCount;
   xl?: ColumnCount;
+  xxl?: ColumnCount;
 }
 
 export type ListSize = 'small' | 'default' | 'large';