Upgrade grid break points (#7230)

close #5122

components/form/style/index.less

@@ -279,7 +279,7 @@ form {
 
 // Form layout
 //== Vertical Form
-.make-vertical-layout() {
+.make-vertical-layout-label() {
   padding: 0 0 8px;
   display: block;
   text-align: left;
@@ -290,34 +290,52 @@ form {
   }
 }
 
+.make-vertical-layout() {
+  .@{form-prefix-cls}-item-label,
+  .@{form-prefix-cls}-item-control-wrapper {
+    display: block;
+    width: 100%;
+  }
+  .@{form-prefix-cls}-item-label {
+    .make-vertical-layout-label();
+  }
+}
+
 .@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
   // when labelCol is 24, it is a vertical form
 .@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
 .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
-  .make-vertical-layout();
+  .make-vertical-layout-label();
 }
 
 @media (max-width: @screen-xs-max) {
+  .make-vertical-layout();
   .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
-    .make-vertical-layout();
+    .make-vertical-layout-label();
   }
 }
 
 @media (max-width: @screen-sm-max) {
   .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
-    .make-vertical-layout();
+    .make-vertical-layout-label();
   }
 }
 
 @media (max-width: @screen-md-max) {
   .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
-    .make-vertical-layout();
+    .make-vertical-layout-label();
   }
 }
 
 @media (max-width: @screen-lg-max) {
   .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
-    .make-vertical-layout();
+    .make-vertical-layout-label();
+  }
+}
+
+@media (max-width: @screen-xl-max) {
+  .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
+    .make-vertical-layout-label();
   }
 }
 

components/grid/col.tsx

@@ -49,7 +49,7 @@ export default class Col extends React.Component<ColProps, any> {
     const props = this.props;
     const { span, order, offset, push, pull, className, children, prefixCls = 'ant-col', ...others } = props;
     let sizeClassObj = {};
-    ['xs', 'sm', 'md', 'lg', 'xl'].forEach(size => {
+    ['xs', 'sm', 'md', 'lg', 'xl', 'xxl'].forEach(size => {
       let sizeProps: ColSize = {};
       if (typeof props[size] === 'number') {
         sizeProps.span = props[size];

components/grid/demo/reponsive-more.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` 属性中来使用。
+`span` `pull` `push` `offset` `order` 属性可以通过内嵌到 `xs` `sm` `md` `lg` `xl` `xxl` 属性中来使用。
 
 其中 `xs={6}` 相当于 `xs={{ span: 6 }}`。
 

components/grid/demo/reponsive.md

@@ -7,7 +7,7 @@ title:
 
 ## zh-CN
 
-参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设五个响应尺寸：`xs` `sm` `md` `lg` `xl`。
+参照 Bootstrap 的 [响应式设计](http://getbootstrap.com/css/#grid-media-queries)，预设五个响应尺寸：`xs` `sm` `md` `lg` `xl`  `xxl`。
 
 ## en-US
 

components/grid/index.en-US.md

@@ -104,10 +104,11 @@ Ant Design layout component if it can not meet your needs, you can use the excel
 | offset     | the number of cells to the left of the grid spacing, no cell in grid spacing  | number | 0        |
 | push     | the number of cells that raster move to the right | number | 0        |
 | pull     | the number of cells that raster move to the left   | number | 0        |
-| xs       | `<768px` and also default setting, could be a `span` value or a object contain above props | number\|object | - |
-| sm       | `≥768px`, could be a `span` value or a object contain above props | number\|object | - |
-| md       | `≥992px`, could be a `span` value or a object contain above props | number\|object | - |
-| lg       | `≥1200px`, could be a `span` value or a object contain above props | number\|object | - |
-| xl       | `≥1600px`, could be a `span` value or a object contain above props | number\|object | - |
-
-The breakpoints of responsive grid follow [BootStrap 3 media queries rules](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)(not contain `occasionally part`).
+| xs       | `<576px` and also default setting, could be a `span` value or a object contain above props | number\|object | - |
+| sm       | `≥576px`, could be a `span` value or a object contain above props | number\|object | - |
+| md       | `≥768px`, could be a `span` value or a object contain above props | number\|object | - |
+| lg       | `≥992px`, could be a `span` value or a object contain above props | number\|object | - |
+| xl       | `≥1200px`, could be a `span` value or a object contain above props | number\|object | - |
+| xxl      | `≥1600px`, could be a `span` value or a object contain above props | number\|object | - |
+
+The breakpoints of responsive grid extends from [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not contain `occasionally part`).

components/grid/index.zh-CN.md

@@ -103,10 +103,11 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | offset   | 栅格左侧的间隔格数，间隔内不可以有栅格  | number | 0        |
 | push     | 栅格向右移动格数   | number | 0        |
 | pull     | 栅格向左移动格数   | number | 0        |
-| xs       | `<768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
-| sm       | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
-| md       | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
-| lg       | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
-| xl       | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
-
-响应式栅格的断点遵循了 [BootStrap 3 的规则](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)（不包含链接里 `occasionally` 的部分)。
+| xs       | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| sm       | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| md       | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| lg       | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| xl       | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+| xxl      | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
+
+响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

components/grid/style/index.less

@@ -105,3 +105,11 @@
 @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/pagination/style/index.less

@@ -310,7 +310,7 @@
   }
 }
 
-@media only screen and (max-width: 1024px) {
+@media only screen and (max-width: @screen-lg) {
   .@{pagination-prefix-cls}-item {
     &-after-jump-prev,
     &-before-jump-next {

components/steps/style/index.less

@@ -465,7 +465,7 @@
   }
 }
 
-@media only screen and (max-width: 767px) {
+@media only screen and (max-width: @screen-md) {
   .@{steps-prefix-cls}-horizontal {
     > .@{steps-prefix-cls}-item {
       display: inline-block;
@@ -483,7 +483,7 @@
   }
 }
 
-@media (max-width: 575px) {
+@media (max-width: @screen-sm) {
   .@{steps-prefix-cls} {
     > .@{steps-prefix-cls}-item {
       display: block;

components/style/themes/default.less

@@ -157,26 +157,31 @@
 @screen-xs-min          : @screen-xs;
 
 // Small screen / tablet
-@screen-sm              : 768px;
+@screen-sm              : 576px;
 @screen-sm-min          : @screen-sm;
 
 // Medium screen / desktop
-@screen-md              : 992px;
+@screen-md              : 768px;
 @screen-md-min          : @screen-md;
 
 // Large screen / wide desktop
-@screen-lg              : 1200px;
+@screen-lg              : 992px;
 @screen-lg-min          : @screen-lg;
 
-// Extra Large screen / full hd
-@screen-xl              : 1600px;
+// Extra large screen / full hd
+@screen-xl              : 1200px;
 @screen-xl-min          : @screen-xl;
 
+// Extra extra large screen / large descktop
+@screen-xxl              : 1600px;
+@screen-xxl-min          : @screen-xxl;
+
 // provide a maximum
 @screen-xs-max          : (@screen-sm-min - 1px);
 @screen-sm-max          : (@screen-md-min - 1px);
 @screen-md-max          : (@screen-lg-min - 1px);
 @screen-lg-max          : (@screen-xl-min - 1px);
+@screen-xl-max          : (@screen-xxl-min - 1px);
 
 // Grid system
 @grid-columns           : 24;