Merge pull request #32472 from ant-design/master

chore: sync master into feature

CHANGELOG.en-US.md

@@ -15,6 +15,18 @@ timeline: true
 
 ---
 
+## 4.17.0-alpha.6
+
+`2021-10-11`
+
+- 🐞 Fix InputNumber handler arrow not align center. [#32409](https://github.com/ant-design/ant-design/pull/32409)
+- 🐞 Fix `closeIcon` overwriting bug when Notification is called multiple times. [#32359](https://github.com/ant-design/ant-design/pull/32359) [@KAROTT7](https://github.com/KAROTT7)
+- 🐞 Fix Button align issue with `icon` and `href`. [#32373](https://github.com/ant-design/ant-design/pull/32373)
+- 💄 Optimize Drawer open animation. [#32342](https://github.com/ant-design/ant-design/pull/32342)
+- 💄 Fix Mentions error style in Form. [#32385](https://github.com/ant-design/ant-design/pull/32385)
+- TypeScript
+  - 🤖 Fix args type for `getPopupContainer` in ConfigProvider. [#32406](https://github.com/ant-design/ant-design/pull/32406) [@mtadams007](https://github.com/mtadams007)
+
 ## 4.17.0-alpha.5
 
 `2021-09-30`

CHANGELOG.zh-CN.md

@@ -15,6 +15,18 @@ timeline: true
 
 ---
 
+## 4.17.0-alpha.6
+
+`2021-10-11`
+
+- 🐞 修复 InputNumber 操作杆箭头未居中对齐的问题。[#32409](https://github.com/ant-design/ant-design/pull/32409)
+- 🐞 修复多次调用 Notification 时 `closeIcon` 配置会被覆盖的问题。[#32359](https://github.com/ant-design/ant-design/pull/32359) [@KAROTT7](https://github.com/KAROTT7)
+- 🐞 修复 Button 有 `icon` 和 `href` 时的对齐问题。[#32373](https://github.com/ant-design/ant-design/pull/32373)
+- 💄 优化 Drawer 弹出动画。[#32342](https://github.com/ant-design/ant-design/pull/32342)
+- 💄 修复 Mentions 在 Form 下错误样式丢失的问题。[#32385](https://github.com/ant-design/ant-design/pull/32385)
+- TypeScript
+  - 🤖 修复 ConfigProvider 中 `getPopupContainer` 的参数类型。[#32406](https://github.com/ant-design/ant-design/pull/32406) [@mtadams007](https://github.com/mtadams007)
+
 ## 4.17.0-alpha.5
 
 `2021-09-30`

components/alert/__tests__/index.test.tsx

@@ -89,6 +89,7 @@ describe('Alert', () => {
 
   it('ErrorBoundary', () => {
     jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    // eslint-disable-next-line no-console
     expect(console.error).toBeCalledTimes(0);
     // @ts-expect-error
     // eslint-disable-next-line react/jsx-no-undef

components/alert/style/index.less

@@ -84,6 +84,7 @@
     .@{iconfont-css-prefix}-close {
       color: @alert-close-color;
       transition: color 0.3s;
+
       &:hover {
         color: @alert-close-hover-color;
       }
@@ -93,6 +94,7 @@
   &-close-text {
     color: @alert-close-color;
     transition: color 0.3s;
+
     &:hover {
       color: @alert-close-hover-color;
     }
@@ -111,6 +113,7 @@
     margin-right: @alert-with-description-padding-vertical;
     font-size: @alert-with-description-icon-size;
   }
+
   &-with-description &-message {
     display: block;
     margin-bottom: 4px;

components/anchor/style/index.less

@@ -21,6 +21,7 @@
     top: 0;
     left: 0;
     height: 100%;
+
     &::before {
       position: relative;
       display: block;
@@ -30,6 +31,7 @@
       background-color: @anchor-border-color;
       content: ' ';
     }
+
     &-ball {
       position: absolute;
       left: 50%;
@@ -41,6 +43,7 @@
       border-radius: 8px;
       transform: translateX(-50%);
       transition: top 0.3s ease-in-out;
+
       &.visible {
         display: inline-block;
       }

components/badge/style/index.less

@@ -25,6 +25,7 @@
     background: @badge-color;
     border-radius: (@badge-height / 2);
     box-shadow: 0 0 0 1px @shadow-color-inverse;
+
     a,
     a:hover {
       color: @badge-text-color;
@@ -86,12 +87,15 @@
       vertical-align: middle;
       border-radius: 50%;
     }
+
     &-success {
       background-color: @success-color;
     }
+
     &-processing {
       position: relative;
       background-color: @processing-color;
+
       &::after {
         position: absolute;
         top: 0;
@@ -104,12 +108,15 @@
         content: '';
       }
     }
+
     &-default {
       background-color: @normal-color;
     }
+
     &-error {
       background-color: @error-color;
     }
+
     &-warning {
       background-color: @warning-color;
     }
@@ -177,6 +184,7 @@
     transform: scale(0.8);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(2.4);
     opacity: 0;
@@ -192,6 +200,7 @@
 .@{number-prefix-cls} {
   overflow: hidden;
   direction: ltr;
+
   &-only {
     position: relative;
     display: inline-block;
@@ -216,6 +225,7 @@
     transform: scale(0) translate(50%, -50%);
     opacity: 0;
   }
+
   100% {
     transform: scale(1) translate(50%, -50%);
   }
@@ -225,6 +235,7 @@
   0% {
     transform: scale(1) translate(50%, -50%);
   }
+
   100% {
     transform: scale(0) translate(50%, -50%);
     opacity: 0;
@@ -236,6 +247,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
   }
@@ -245,6 +257,7 @@
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0);
     opacity: 0;

components/badge/style/rtl.less

@@ -43,6 +43,7 @@
       right: unset;
       left: 0;
       border-color: currentColor currentColor transparent transparent;
+
       &::after {
         border-color: currentColor currentColor transparent transparent;
       }
@@ -57,6 +58,7 @@
       right: 0;
       left: unset;
       border-color: currentColor transparent transparent currentColor;
+
       &::after {
         border-color: currentColor transparent transparent currentColor;
       }

components/breadcrumb/style/index.less

@@ -16,6 +16,7 @@
   a {
     color: @breadcrumb-link-color;
     transition: color 0.3s;
+
     &:hover {
       color: @breadcrumb-link-color-hover;
     }
@@ -23,6 +24,7 @@
 
   & > span:last-child {
     color: @breadcrumb-last-item-color;
+
     a {
       color: @breadcrumb-last-item-color;
     }

components/button/style/index.less

@@ -281,6 +281,7 @@ a.@{btn-prefix-cls} {
   &-lg {
     line-height: @btn-height-lg - 2px;
   }
+
   &-sm {
     line-height: @btn-height-sm - 2px;
   }

components/button/style/mixin.less

@@ -20,6 +20,7 @@
   // http://stackoverflow.com/a/17253457
   > a:only-child {
     color: currentColor;
+
     &::after {
       position: absolute;
       top: 0;
@@ -106,6 +107,7 @@
       .button-color(@primary-color-hover; @background; @primary-color-hover);
     }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(@primary-7; @background; @primary-7);
@@ -126,6 +128,7 @@
 .button-variant-ghost(@color; @border; @borderHover: yellow; @borderActive: yellow) {
   .button-color(@color; null; @border);
   text-shadow: none;
+
   &:hover,
   &:focus {
     & when (@border = transparent) {
@@ -155,6 +158,7 @@
       }
     }
   }
+
   &:active {
     & when (@border = transparent) {
       & when (@theme = dark) {
@@ -192,11 +196,13 @@
   > .@{btnClassName},
   > span > .@{btnClassName} {
     position: relative;
+
     &:hover,
     &:focus,
     &:active {
       z-index: 2;
     }
+
     &[disabled] {
       z-index: 0;
     }
@@ -248,29 +254,36 @@
   > .@{iconfont-css-prefix} {
     line-height: 1;
   }
+
   &,
   &:active,
   &:focus {
     outline: 0;
   }
+
   &:not([disabled]):hover {
     text-decoration: none;
   }
+
   &:not([disabled]):active {
     outline: 0;
     box-shadow: none;
   }
+
   &[disabled] {
     cursor: not-allowed;
+
     > * {
       pointer-events: none;
     }
   }
+
   &-lg {
     .button-size(
       @btn-height-lg; @btn-padding-horizontal-lg; @btn-font-size-lg; @btn-border-radius-base
     );
   }
+
   &-sm {
     .button-size(
       @btn-height-sm; @btn-padding-horizontal-sm; @btn-font-size-sm; @btn-border-radius-sm
@@ -284,6 +297,7 @@
 // default button style
 .btn-default() {
   .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border; );
+
   &:hover,
   &:focus,
   &:active {
@@ -307,6 +321,7 @@
 // danger default button style
 .btn-danger-default() {
   .button-color(@error-color, @btn-default-bg, @error-color);
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
@@ -325,6 +340,7 @@
       .button-color(@error-color-hover, @btn-default-bg, @error-color-hover);
     }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(
@@ -348,6 +364,7 @@
 .btn-danger-link() {
   .button-variant-other(@error-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
@@ -360,6 +377,7 @@
       .button-color(@error-color-hover; transparent; transparent);
     }
   }
+
   &:active {
     & when (@theme = dark) {
       .button-color(~`colorPalette('@{error-color}', 5) `; transparent; transparent);
@@ -377,9 +395,11 @@
 .btn-link() {
   .button-variant-other(@link-color, transparent, transparent);
   box-shadow: none;
+
   &:hover {
     background: @btn-link-hover-bg;
   }
+
   &:hover,
   &:focus,
   &:active {
@@ -391,6 +411,7 @@
 .btn-text() {
   .button-variant-other(@text-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     color: @text-color;
@@ -409,6 +430,7 @@
 .btn-danger-text() {
   .button-variant-other(@error-color, transparent, transparent);
   box-shadow: none;
+
   &:hover,
   &:focus {
     & when (@theme = dark) {
@@ -453,12 +475,14 @@
 .btn-square(@btnClassName: btn) {
   .square(@btn-square-size);
   .button-size(@btn-square-size; 0; @btn-square-only-icon-size; @btn-border-radius-base);
+
   & > * {
     font-size: @btn-square-only-icon-size;
   }
   &.@{btnClassName}-lg {
     .square(@btn-square-size-lg);
     .button-size(@btn-square-size-lg; 0; @btn-square-only-icon-size-lg; @btn-border-radius-base);
+
     & > * {
       font-size: @btn-square-only-icon-size-lg;
     }
@@ -466,6 +490,7 @@
   &.@{btnClassName}-sm {
     .square(@btn-square-size-sm);
     .button-size(@btn-square-size-sm; 0; @btn-square-only-icon-size-sm; @btn-border-radius-base);
+
     & > * {
       font-size: @btn-square-only-icon-size-sm;
     }
@@ -526,6 +551,7 @@
     border-top-right-radius: @btn-border-radius-base;
     border-bottom-right-radius: @btn-border-radius-base;
   }
+
   &-sm {
     > .@{btnClassName}:only-child {
       border-radius: @btn-border-radius-sm;
@@ -544,12 +570,14 @@
       border-bottom-right-radius: @btn-border-radius-sm;
     }
   }
+
   & > & {
     float: left;
   }
   & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
     border-radius: 0;
   }
+
   & > &:first-child:not(:last-child) {
     > .@{btnClassName}:last-child {
       padding-right: 8px;

components/button/style/rtl.less

@@ -10,6 +10,7 @@
         border-right-color: @btn-group-border;
         border-left-color: @btn-default-border;
       }
+
       &[disabled] {
         .@{btn-prefix-cls}-group-rtl& {
           border-right-color: @btn-default-border;

components/card/style/index.less

@@ -250,6 +250,7 @@
 
     &-detail {
       overflow: hidden;
+
       > div:not(:last-child) {
         margin-bottom: @margin-xs;
       }
@@ -298,6 +299,7 @@
   100% {
     background-position: 0 50%;
   }
+
   50% {
     background-position: 100% 50%;
   }

components/carousel/style/index.less

@@ -116,6 +116,7 @@
     display: block;
     height: auto;
   }
+
   .slick-arrow.slick-hidden {
     display: none;
   }
@@ -137,15 +138,18 @@
     border: 0;
     outline: none;
     cursor: pointer;
+
     &:hover,
     &:focus {
       color: transparent;
       background: transparent;
       outline: none;
+
       &::before {
         opacity: 1;
       }
     }
+
     &.slick-disabled::before {
       opacity: 0.25;
     }
@@ -161,6 +165,7 @@
 
   .slick-next {
     right: -25px;
+
     &::before {
       content: '→';
     }
@@ -183,10 +188,12 @@
     &-bottom {
       bottom: 12px;
     }
+
     &-top {
       top: 12px;
       bottom: auto;
     }
+
     li {
       position: relative;
       display: inline-block;
@@ -202,6 +209,7 @@
       text-indent: -999px;
       vertical-align: top;
       transition: all 0.5s;
+
       button {
         display: block;
         width: 100%;
@@ -216,17 +224,21 @@
         cursor: pointer;
         opacity: 0.3;
         transition: all 0.5s;
+
         &:hover,
         &:focus {
           opacity: 0.75;
         }
       }
+
       &.slick-active {
         width: @carousel-dot-active-width;
+
         & button {
           background: @component-background;
           opacity: 1;
         }
+
         &:hover,
         &:focus {
           opacity: 1;
@@ -250,19 +262,23 @@
       right: auto;
       left: 12px;
     }
+
     &-right {
       right: 12px;
       left: auto;
     }
+
     li {
       width: @carousel-dot-height;
       height: @carousel-dot-width;
       margin: 4px 2px;
       vertical-align: baseline;
+
       button {
         width: @carousel-dot-height;
         height: @carousel-dot-width;
       }
+
       &.slick-active {
         width: @carousel-dot-height;
         height: @carousel-dot-active-width;

components/carousel/style/rtl.less

@@ -19,6 +19,7 @@
     .@{carousel-prefix-cls}-rtl & {
       right: -25px;
       left: auto;
+
       &::before {
         content: '→';
       }
@@ -29,6 +30,7 @@
     .@{carousel-prefix-cls}-rtl & {
       right: auto;
       left: -25px;
+
       &::before {
         content: '←';
       }

components/cascader/__tests__/index.test.js

@@ -327,14 +327,15 @@ describe('Cascader', () => {
   });
 
   // FIXME: Move to `rc-tree-select` instead
-  // it('should warning if not find `value` in `options`', () => {
+  // eslint-disable-next-line jest/no-disabled-tests
-  //   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+  it.skip('should warning if not find `value` in `options`', () => {
-  //   mount(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-  //   expect(errorSpy).toHaveBeenCalledWith(
+    mount(<Cascader options={[{ label: 'a', value: 'a', children: [{ label: 'b' }] }]} />);
-  //     'Warning: [antd: Cascader] Not found `value` in `options`.',
+    expect(errorSpy).toHaveBeenCalledWith(
-  //   );
+      'Warning: [antd: Cascader] Not found `value` in `options`.',
-  //   errorSpy.mockRestore();
+    );
-  // });
+    errorSpy.mockRestore();
+  });
 
   // https://github.com/ant-design/ant-design/issues/17690
   it('should not breaks when children is null', () => {

components/cascader/style/index.less

@@ -59,6 +59,7 @@
       &-disabled {
         color: @disabled-color;
         cursor: not-allowed;
+
         &:hover {
           background: transparent;
         }

components/checkbox/style/index.less

@@ -2,4 +2,5 @@
 @import './mixin';
 
 .antCheckboxFn();
+
 @import './rtl';

components/checkbox/style/mixin.less

@@ -127,6 +127,7 @@
     .@{checkbox-inner-prefix-cls} {
       background-color: @input-disabled-bg;
       border-color: @border-color-base !important;
+
       &::after {
         border-color: @input-disabled-bg;
         border-collapse: separate;
@@ -180,10 +181,12 @@
 
     &-item {
       margin-right: @checkbox-group-item-margin-right;
+
       &:last-child {
         margin-right: 0;
       }
     }
+
     &-item + &-item {
       margin-left: 0;
     }
@@ -222,6 +225,7 @@
     transform: scale(1);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(1.6);
     opacity: 0;

components/checkbox/style/rtl.less

@@ -11,12 +11,14 @@
         margin-right: 0;
         margin-left: @checkbox-group-item-margin-right;
       }
+
       &:last-child {
         .@{checkbox-prefix-cls}-group-rtl & {
           margin-left: 0 !important;
         }
       }
     }
+
     &-item + &-item {
       .@{checkbox-prefix-cls}-group-rtl & {
         margin-left: @checkbox-group-item-margin-right;

components/comment/style/index.less

@@ -38,6 +38,7 @@
       justify-content: flex-start;
       margin-bottom: @margin-xss;
       font-size: @comment-font-size-base;
+
       & > a,
       & > span {
         padding-right: @padding-xs;
@@ -49,8 +50,10 @@
         color: @comment-author-name-color;
         font-size: @comment-font-size-base;
         transition: color 0.3s;
+
         > * {
           color: @comment-author-name-color;
+
           &:hover {
             color: @comment-author-name-color;
           }
@@ -78,6 +81,7 @@
     > li {
       display: inline-block;
       color: @comment-action-color;
+
       > span {
         margin-right: 10px;
         color: @comment-action-color;

components/comment/style/rtl.less

@@ -31,6 +31,7 @@
     .@{comment-prefix-cls}-rtl & {
       padding-right: 0;
     }
+
     > li {
       > span {
         .@{comment-prefix-cls}-rtl & {

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

@@ -60,7 +60,6 @@ jest.mock('rc-util/lib/Portal');
 describe('ConfigProvider', () => {
   describe('components', () => {
     function testPair(name, renderComponent) {
-      // eslint-disable-next-line jest/valid-describe
       describe(`${name}`, () => {
         // normal
         it('normal', () => {

components/date-picker/style/panel.less

@@ -280,6 +280,7 @@
     &-in-view&-range-start:not(&-range-start-single):not(&-range-end) .@{cellClassName} {
       border-radius: @border-radius-base 0 0 @border-radius-base;
     }
+
     // range end border-radius
     &-in-view&-range-end:not(&-range-end-single):not(&-range-start) .@{cellClassName} {
       border-radius: 0 @border-radius-base @border-radius-base 0;
@@ -298,12 +299,14 @@
         content: '';
       }
     }
+
     .@{picker-prefix-cls}-date-panel
       &-in-view&-in-range&-range-hover-start
       .@{cellClassName}::after {
       right: -5px - @border-width-base;
       left: 0;
     }
+
     .@{picker-prefix-cls}-date-panel &-in-view&-in-range&-range-hover-end .@{cellClassName}::after {
       right: 0;
       left: -5px - @border-width-base;
@@ -313,6 +316,7 @@
     &-range-hover&-range-start::after {
       right: 50%;
     }
+
     &-range-hover&-range-end::after {
       left: 50%;
     }

components/descriptions/style/index.less

@@ -31,6 +31,7 @@
     width: 100%;
     overflow: hidden;
     border-radius: @border-radius-base;
+
     table {
       width: 100%;
       table-layout: fixed;
@@ -42,6 +43,7 @@
     > td {
       padding-bottom: @descriptions-item-padding-bottom;
     }
+
     &:last-child {
       border-bottom: none;
     }
@@ -126,6 +128,7 @@
   &-bordered {
     .@{descriptions-prefix-cls}-view {
       border: 1px solid @border-color-split;
+
       > table {
         table-layout: auto;
         border-collapse: collapse;
@@ -144,6 +147,7 @@
 
     .@{descriptions-prefix-cls}-item-label {
       background-color: @descriptions-bg;
+
       &::after {
         display: none;
       }
@@ -151,6 +155,7 @@
 
     .@{descriptions-prefix-cls}-row {
       border-bottom: 1px solid @border-color-split;
+
       &:last-child {
         border-bottom: none;
       }

components/divider/style/index.less

@@ -57,6 +57,7 @@
       top: 50%;
       width: @divider-orientation-margin;
     }
+
     &::after {
       top: 50%;
       width: 100% - @divider-orientation-margin;
@@ -68,6 +69,7 @@
       top: 50%;
       width: 100% - @divider-orientation-margin;
     }
+
     &::after {
       top: 50%;
       width: @divider-orientation-margin;
@@ -88,6 +90,7 @@
 
   &-horizontal&-with-text&-dashed {
     border-top: 0;
+
     &::before,
     &::after {
       border-style: dashed none none;

components/divider/style/rtl.less

@@ -14,6 +14,7 @@
         width: 100% - @divider-orientation-margin;
       }
     }
+
     &::after {
       .@{divider-prefix-cls}-rtl& {
         width: @divider-orientation-margin;
@@ -27,6 +28,7 @@
         width: @divider-orientation-margin;
       }
     }
+
     &::after {
       .@{divider-prefix-cls}-rtl& {
         width: 100% - @divider-orientation-margin;

components/drawer/style/drawer.less

@@ -112,6 +112,7 @@
       .@{drawer-prefix-cls}-content-wrapper {
         box-shadow: @shadow-1-up;
       }
+
       &.no-mask {
         bottom: 1px;
         transform: translateY(1px);
@@ -245,6 +246,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

components/dropdown/style/index.less

@@ -86,13 +86,16 @@
     border-left-color: transparent;
     box-shadow: 3px 3px 7px fade(@black, 7%);
   }
+
   &-placement-topCenter > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
+
   &-placement-topLeft > &-arrow {
     left: 16px;
   }
+
   &-placement-topRight > &-arrow {
     right: 16px;
   }
@@ -107,13 +110,16 @@
     border-left-color: @popover-bg;
     box-shadow: -2px -2px 5px fade(@black, 6%);
   }
+
   &-placement-bottomCenter > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
+
   &-placement-bottomLeft > &-arrow {
     left: 16px;
   }
+
   &-placement-bottomRight > &-arrow {
     right: 16px;
   }
@@ -362,6 +368,7 @@
     .@{dropdown-prefix-cls}-menu-submenu-arrow::after {
       color: @text-color-secondary-dark;
     }
+
     &:hover {
       color: @text-color-inverse;
       background: transparent;

components/empty/style/index.less

@@ -55,23 +55,29 @@
       fill: @white;
       fill-opacity: 0.08;
     }
+
     &-path {
       &-1 {
         fill: #262626;
       }
+
       &-2 {
         fill: url(#linearGradient-1);
       }
+
       &-3 {
         fill: #595959;
       }
+
       &-4 {
         fill: #434343;
       }
+
       &-5 {
         fill: #595959;
       }
     }
+
     &-g {
       fill: #434343;
     }
@@ -81,23 +87,29 @@
       fill: #f5f5f5;
       fill-opacity: 0.8;
     }
+
     &-path {
       &-1 {
         fill: #aeb8c2;
       }
+
       &-2 {
         fill: url(#linearGradient-1);
       }
+
       &-3 {
         fill: #f5f5f7;
       }
+
       &-4 {
         fill: #dce0e6;
       }
+
       &-5 {
         fill: #dce0e6;
       }
     }
+
     &-g {
       fill: @white;
     }
@@ -111,9 +123,11 @@
       fill: @white;
       fill-opacity: 0.08;
     }
+
     &-g {
       stroke: #434343;
     }
+
     &-path {
       fill: #262626;
       stroke: #434343;
@@ -123,9 +137,11 @@
     &-ellipse {
       fill: #f5f5f5;
     }
+
     &-g {
       stroke: #d9d9d9;
     }
+
     &-path {
       fill: #fafafa;
     }

components/form/style/components.less

@@ -54,6 +54,7 @@
     + .@{form-prefix-cls}-text {
       margin-left: 8px;
     }
+
     &-handler-wrap {
       z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
     }

components/form/style/index.less

@@ -39,6 +39,7 @@
   &-small {
     .formSize(@input-height-sm);
   }
+
   &-large {
     .formSize(@input-height-lg);
   }
@@ -263,6 +264,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -274,6 +276,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -285,6 +288,7 @@
     transform: scale(0);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;

components/form/style/rtl.less

@@ -32,6 +32,7 @@
           margin-left: 4px;
         }
       }
+
       &::after {
         .@{form-prefix-cls}-rtl & {
           margin: 0 @form-item-label-colon-margin-left 0 @form-item-label-colon-margin-right;
@@ -130,6 +131,7 @@
           margin-left: 19px;
         }
       }
+
       &-clear {
         .@{form-prefix-cls}-rtl & {
           right: auto;

components/form/style/status.less

@@ -75,6 +75,7 @@
       &-arrow {
         margin-right: 19px;
       }
+
       &-clear {
         right: 32px;
       }
@@ -154,10 +155,12 @@
     .@{ant-prefix}-picker {
       background-color: @form-warning-input-bg;
       border-color: @warning-color;
+
       &-focused,
       &:focus {
         .active(@warning-color, @warning-color-hover, @warning-color-outline);
       }
+
       &:not([disabled]):hover {
         background-color: @form-warning-input-bg;
         border-color: @warning-color;
@@ -214,10 +217,12 @@
     .@{ant-prefix}-picker {
       background-color: @form-error-input-bg;
       border-color: @error-color;
+
       &-focused,
       &:focus {
         .active(@error-color, @error-color-hover, @error-color-outline);
       }
+
       &:not([disabled]):hover {
         background-color: @form-error-input-bg;
         border-color: @error-color;
@@ -285,6 +290,7 @@
     // Mentions
     .@{ant-prefix}-mentions {
       border-color: @error-color !important;
+
       &-focused,
       &:focus {
         .active(@error-color, @error-color-hover, @error-color-outline);

components/image/style/index.less

@@ -7,10 +7,12 @@
 .@{image-prefix-cls} {
   position: relative;
   display: inline-block;
+
   &-img {
     display: block;
     width: 100%;
     height: auto;
+
     &-placeholder {
       background-color: @image-bg;
       background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=);
@@ -74,9 +76,11 @@
       transition: transform 0.3s @ease-out 0s;
       user-select: none;
       pointer-events: auto;
+
       &-wrapper {
         .box();
         transition: transform 0.3s @ease-out 0s;
+
         &::before {
           display: inline-block;
           width: 1px;
@@ -90,6 +94,7 @@
     &-moving {
       .@{image-prefix-cls}-preview-img {
         cursor: grabbing;
+
         &-wrapper {
           transition-duration: 0s;
         }
@@ -119,14 +124,17 @@
         margin-left: @control-padding-horizontal;
         padding: @control-padding-horizontal;
         cursor: pointer;
+
         &-disabled {
           color: @image-preview-operation-disabled-color;
           pointer-events: none;
         }
+
         &:last-of-type {
           margin-left: 0;
         }
       }
+
       &-icon {
         font-size: @image-preview-operation-size;
       }
@@ -149,6 +157,7 @@
       border-radius: 50%;
       cursor: pointer;
       pointer-events: auto;
+
       &-disabled {
         color: @image-preview-operation-disabled-color;
         cursor: not-allowed;

components/input-number/style/index.less

@@ -13,6 +13,7 @@
   &-group {
     .reset-component();
     .input-group(~'@{input-number-prefix-cls}');
+
     &-wrapper {
       display: inline-block;
       text-align: start;
@@ -39,9 +40,11 @@
     text-align: center;
     border-left: @border-width-base @border-style-base @input-number-handler-border-color;
     transition: all 0.1s linear;
+
     &:active {
       background: @input-number-handler-active-bg;
     }
+
     &:hover &-up-inner,
     &:hover &-down-inner {
       color: @input-number-handler-hover-bg;
@@ -171,11 +174,13 @@
   &-handler-up {
     border-top-right-radius: @border-radius-base;
     cursor: pointer;
+
     &-inner {
       top: 50%;
       margin-top: -5px;
       text-align: center;
     }
+
     &:hover {
       height: 60% !important;
     }
@@ -186,11 +191,13 @@
     border-top: @border-width-base @border-style-base @border-color-base;
     border-bottom-right-radius: @border-radius-base;
     cursor: pointer;
+
     &-inner {
       top: 50%;
       text-align: center;
       transform: translateY(-50%);
     }
+
     &:hover {
       height: 60% !important;
     }

components/input/TextArea.tsx

@@ -135,6 +135,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
         onChange={handleChange}
         onCompositionEnd={onInternalCompositionEnd}
         ref={innerRef}
+        maxLength={maxLength}
       />
     );
 

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

@@ -3317,6 +3317,7 @@ exports[`renders ./components/input/demo/textarea-show-count.md correctly 1`] =
 >
   <textarea
     class="ant-input"
+    maxlength="100"
   />
 </div>
 `;

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

@@ -245,6 +245,7 @@ exports[`TextArea allowClear should not show icon if value is undefined, null or
 exports[`TextArea maxLength should support maxLength 1`] = `
 <textarea
   class="ant-input"
+  maxlength="10"
 />
 `;
 

components/input/style/affix.less

@@ -1,5 +1,4 @@
 @import './mixin';
-
 @import (reference) '../../style/themes/index';
 @input-prefix-cls: ~'@{ant-prefix}-input';
 

components/input/style/index.less

@@ -15,6 +15,7 @@
   &-group {
     .reset-component();
     .input-group(~'@{input-prefix-cls}');
+
     &-wrapper {
       display: inline-block;
       width: 100%;

components/input/style/rtl.less

@@ -8,6 +8,7 @@
       direction: rtl;
     }
   }
+
   &-rtl {
     direction: rtl;
   }

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

@@ -1021,9 +1021,16 @@ Array [
 
 exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
 <div
-  class="demo-infinite-container"
+  id="scrollableDiv"
+  style="height:400px;overflow:auto;padding:0 16px;border:1px solid rgba(140, 140, 140, 0.35)"
 >
-  <div>
+  <div
+    class="infinite-scroll-component__outerdiv"
+  >
+    <div
+      class="infinite-scroll-component "
+      style="height:auto;overflow:auto;-webkit-overflow-scrolling:touch"
+    >
       <div
         class="ant-list ant-list-split"
       >
@@ -1086,6 +1093,31 @@ exports[`renders ./components/list/demo/infinite-load.md correctly 1`] = `
           </div>
         </div>
       </div>
+      <div
+        class="ant-skeleton ant-skeleton-with-avatar ant-skeleton-active"
+      >
+        <div
+          class="ant-skeleton-header"
+        >
+          <span
+            class="ant-skeleton-avatar ant-skeleton-avatar-lg ant-skeleton-avatar-circle"
+          />
+        </div>
+        <div
+          class="ant-skeleton-content"
+        >
+          <h3
+            class="ant-skeleton-title"
+            style="width:50%"
+          />
+          <ul
+            class="ant-skeleton-paragraph"
+          >
+            <li />
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;

components/list/demo/infinite-load.md

@@ -7,81 +7,61 @@ title:
 
 ## zh-CN
 
-结合 [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller) 实现滚动自动加载列表。
+结合 [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) 实现滚动自动加载列表。
 
 ## en-US
 
-The example of infinite load with [react-infinite-scroller](https://github.com/CassetteRocks/react-infinite-scroller).
+The example of infinite load with [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component).
 
 ```jsx
-import { List, message, Avatar, Spin } from 'antd';
+import React, { useState, useEffect } from 'react';
-import reqwest from 'reqwest';
+import { List, message, Avatar, Skeleton, Divider } from 'antd';
+import InfiniteScroll from 'react-infinite-scroll-component';
 
-import InfiniteScroll from 'react-infinite-scroller';
+const InfiniteListExample = () => {
+  const [loading, setLoading] = useState(false);
+  const [data, setData] = useState([]);
 
-const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';
+  const loadMoreData = () => {
-
+    if (loading) {
-class InfiniteListExample extends React.Component {
-  state = {
-    data: [],
-    loading: false,
-    hasMore: true,
-  };
-
-  componentDidMount() {
-    this.fetchData(res => {
-      this.setState({
-        data: res.results,
-      });
-    });
-  }
-
-  fetchData = callback => {
-    reqwest({
-      url: fakeDataUrl,
-      type: 'json',
-      method: 'get',
-      contentType: 'application/json',
-      success: res => {
-        callback(res);
-      },
-    });
-  };
-
-  handleInfiniteOnLoad = () => {
-    let { data } = this.state;
-    this.setState({
-      loading: true,
-    });
-    if (data.length > 14) {
-      message.warning('Infinite List loaded all');
-      this.setState({
-        hasMore: false,
-        loading: false,
-      });
       return;
     }
-    this.fetchData(res => {
+    setLoading(true);
-      data = data.concat(res.results);
+    fetch('https://randomuser.me/api/?results=10&inc=name,gender,email,nat&noinfo')
-      this.setState({
+      .then(res => res.json())
-        data,
+      .then(body => {
-        loading: false,
+        setData([...data, ...body.results]);
-      });
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
       });
   };
 
-  render() {
+  useEffect(() => {
+    loadMoreData();
+  }, []);
+
   return (
-      <div className="demo-infinite-container">
+    <div
+      id="scrollableDiv"
+      style={{
+        height: 400,
+        overflow: 'auto',
+        padding: '0 16px',
+        border: '1px solid rgba(140, 140, 140, 0.35)',
+      }}
+    >
       <InfiniteScroll
-          initialLoad={false}
+        dataLength={data.length}
-          pageStart={0}
+        next={loadMoreData}
-          loadMore={this.handleInfiniteOnLoad}
+        hasMore={data.length < 50}
-          hasMore={!this.state.loading && this.state.hasMore}
+        loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
-          useWindow={false}
+        endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
+        scrollableTarget="scrollableDiv"
       >
         <List
-            dataSource={this.state.data}
+          dataSource={data}
           renderItem={item => (
             <List.Item key={item.id}>
               <List.Item.Meta
@@ -94,40 +74,11 @@ class InfiniteListExample extends React.Component {
               <div>Content</div>
             </List.Item>
           )}
-          >
+        />
-            {this.state.loading && this.state.hasMore && (
-              <div className="demo-loading-container">
-                <Spin />
-              </div>
-            )}
-          </List>
       </InfiniteScroll>
     </div>
   );
-  }
+};
-}
 
 ReactDOM.render(<InfiniteListExample />, mountNode);
 ```
-
-```css
-.demo-infinite-container {
-  height: 300px;
-  padding: 8px 24px;
-  overflow: auto;
-  border: 1px solid #e8e8e8;
-  border-radius: 4px;
-}
-.demo-loading-container {
-  position: absolute;
-  bottom: 40px;
-  width: 100%;
-  text-align: center;
-}
-```
-
-<style>
-  [data-theme="dark"] .demo-infinite-container {
-    border: 1px solid #303030;
-  }
-</style>

components/list/demo/infinite-virtualized-load.md

@@ -19,9 +19,7 @@ An example of infinite list & virtualized loading using [react-virtualized](http
 
 ```jsx
 import { List, message, Avatar, Spin } from 'antd';
-
 import reqwest from 'reqwest';
-
 import WindowScroller from 'react-virtualized/dist/commonjs/WindowScroller';
 import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
 import VList from 'react-virtualized/dist/commonjs/List';

components/list/demo/loadmore.md

@@ -15,7 +15,6 @@ Load more list with `loadMore` property.
 
 ```jsx
 import { List, Avatar, Button, Skeleton } from 'antd';
-
 import reqwest from 'reqwest';
 
 const count = 3;

components/list/style/index.less

@@ -26,6 +26,7 @@
   &-more {
     margin-top: @margin-sm;
     text-align: center;
+
     button {
       padding-right: 32px;
       padding-left: 32px;
@@ -66,30 +67,36 @@
       &-avatar {
         margin-right: @list-item-meta-avatar-margin-right;
       }
+
       &-content {
         flex: 1 0;
         width: 0;
         color: @text-color;
       }
+
       &-title {
         margin-bottom: 4px;
         color: @text-color;
         font-size: @font-size-base;
         line-height: @line-height-base;
+
         > a {
           color: @text-color;
           transition: all 0.3s;
+
           &:hover {
             color: @primary-color;
           }
         }
       }
+
       &-description {
         color: @text-color-secondary;
         font-size: @list-item-meta-description-font-size;
         line-height: @line-height-base;
       }
     }
+
     &-action {
       flex: 0 0 auto;
       margin-left: 48px;
@@ -146,6 +153,7 @@
 
   &-split &-item {
     border-bottom: 1px solid @border-color-split;
+
     &:last-child {
       border-bottom: none;
     }
@@ -204,6 +212,7 @@
 
       > li {
         padding: 0 @padding-md;
+
         &:first-child {
           padding-left: 0;
         }

components/list/style/responsive.less

@@ -20,6 +20,7 @@
   .@{list-prefix-cls} {
     &-item {
       flex-wrap: wrap;
+
       &-action {
         margin-left: 12px;
       }
@@ -29,9 +30,11 @@
   .@{list-prefix-cls}-vertical {
     .@{list-prefix-cls}-item {
       flex-wrap: wrap-reverse;
+
       &-main {
         min-width: 220px;
       }
+
       &-extra {
         margin: auto auto 16px;
       }

components/menu/style/dark.less

@@ -8,6 +8,7 @@
     .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
       opacity: 0.45;
       transition: all 0.3s;
+
       &::after,
       &::before {
         background: @menu-dark-arrow-color;
@@ -65,6 +66,7 @@
     left: 0;
     margin-left: 0;
     border-right: 0;
+
     &::after {
       border-right: 0;
     }
@@ -83,6 +85,7 @@
   &-dark &-submenu-title:hover {
     color: @menu-dark-highlight-color;
     background-color: transparent;
+
     > a,
     > span > a {
       color: @menu-dark-highlight-color;
@@ -90,6 +93,7 @@
     > .@{menu-prefix-cls}-submenu-title {
       > .@{menu-prefix-cls}-submenu-arrow {
         opacity: 1;
+
         &::after,
         &::before {
           background: @menu-dark-highlight-color;
@@ -97,6 +101,7 @@
       }
     }
   }
+
   &-dark &-item:hover {
     background-color: @menu-dark-item-hover-bg;
   }
@@ -108,9 +113,11 @@
   &-dark &-item-selected {
     color: @menu-dark-highlight-color;
     border-right: 0;
+
     &::after {
       border-right: 0;
     }
+
     > a,
     > span > a,
     > a:hover,

components/menu/style/index.less

@@ -67,6 +67,7 @@
     transition: border-color @animation-duration-slow @ease-in-out,
       background @animation-duration-slow @ease-in-out;
   }
+
   &-submenu,
   &-submenu-inline {
     transition: border-color @animation-duration-slow @ease-in-out,
@@ -95,9 +96,11 @@
 
   &-item a {
     color: @menu-item-color;
+
     &:hover {
       color: @menu-highlight-color;
     }
+
     &::before {
       position: absolute;
       top: 0;
@@ -112,6 +115,7 @@
   // https://github.com/ant-design/ant-design/issues/19809
   &-item > .@{ant-prefix}-badge a {
     color: @menu-item-color;
+
     &:hover {
       color: @menu-highlight-color;
     }
@@ -142,6 +146,7 @@
 
   &-item-selected {
     color: @menu-highlight-color;
+
     a,
     a:hover {
       color: @menu-highlight-color;
@@ -182,6 +187,7 @@
       left: 0;
       margin-left: 0;
       border-right: 0;
+
       &::after {
         border-right: 0;
       }
@@ -218,6 +224,7 @@
       font-size: @menu-icon-size;
       transition: font-size @menu-animation-duration-normal @ease-out,
         margin @animation-duration-slow @ease-in-out, color @animation-duration-slow;
+
       + span {
         margin-left: @menu-icon-margin-right;
         opacity: 1;
@@ -280,6 +287,7 @@
     > .@{menu-prefix-cls} {
       background-color: @menu-bg;
       border-radius: @border-radius-base;
+
       &-submenu-title::after {
         transition: transform @animation-duration-slow @ease-in-out;
       }
@@ -314,9 +322,11 @@
           color @animation-duration-slow @ease-in-out;
         content: '';
       }
+
       &::before {
         transform: rotate(45deg) translateY(-2.5px);
       }
+
       &::after {
         transform: rotate(-45deg) translateY(2.5px);
       }
@@ -333,6 +343,7 @@
       &::before {
         transform: rotate(-45deg) translateX(2.5px);
       }
+
       &::after {
         transform: rotate(45deg) translateX(-2.5px);
       }
@@ -345,9 +356,11 @@
     &-open&-inline > &-title > &-arrow {
       // ↑
       transform: translateY(-2px);
+
       &::after {
         transform: rotate(-45deg) translateX(-2.5px);
       }
+
       &::before {
         transform: rotate(45deg) translateX(2.5px);
       }
@@ -411,13 +424,16 @@
     > .@{menu-prefix-cls}-item {
       a {
         color: @menu-item-color;
+
         &:hover {
           color: @menu-highlight-color;
         }
+
         &::before {
           bottom: -2px;
         }
       }
+
       &-selected a {
         color: @menu-highlight-color;
       }
@@ -437,6 +453,7 @@
   &-inline {
     .@{menu-prefix-cls}-item {
       position: relative;
+
       &::after {
         position: absolute;
         top: 0;
@@ -555,6 +572,7 @@
         margin: 0;
         font-size: @menu-icon-size-lg;
         line-height: @menu-item-height;
+
         + span {
           display: inline-block;
           opacity: 0;
@@ -574,6 +592,7 @@
       .@{iconfont-css-prefix} {
         display: none;
       }
+
       a {
         color: @text-color-dark;
       }

components/menu/style/rtl.less

@@ -87,6 +87,7 @@
             transform: rotate(-45deg) translateY(-2px);
           }
         }
+
         &::after {
           .@{menu-prefix-cls}-rtl & {
             transform: rotate(45deg) translateY(2px);

components/menu/style/status.less

@@ -17,6 +17,7 @@
 
     &-selected {
       color: @menu-highlight-danger-color;
+
       > a,
       > a:hover {
         color: @menu-highlight-danger-color;

components/message/style/index.less

@@ -63,6 +63,7 @@
     padding: 8px;
     opacity: 1;
   }
+
   100% {
     max-height: 0;
     padding: 0;

components/modal/style/modal.less

@@ -106,6 +106,7 @@
 
 .@{dialog-prefix-cls}-centered {
   text-align: center;
+
   &::before {
     display: inline-block;
     width: 0;

components/modal/style/rtl.less

@@ -50,6 +50,7 @@
         }
       }
     }
+
     &-btns {
       .@{dialog-wrap-rtl-cls} & {
         float: left;

components/notification/style/index.less

@@ -69,6 +69,7 @@
         max-width: 4px;
         background-color: transparent;
         pointer-events: none;
+
         &::before {
           display: block;
           content: '';
@@ -109,12 +110,15 @@
       &-success {
         color: @success-color;
       }
+
       &-info {
         color: @info-color;
       }
+
       &-warning {
         color: @warning-color;
       }
+
       &-error {
         color: @error-color;
       }
@@ -181,6 +185,7 @@
     left: @notification-width;
     opacity: 0;
   }
+
   100% {
     left: 0;
     opacity: 1;
@@ -192,6 +197,7 @@
     right: @notification-width;
     opacity: 0;
   }
+
   100% {
     right: 0;
     opacity: 1;
@@ -204,6 +210,7 @@
     margin-bottom: @notification-margin-bottom;
     opacity: 1;
   }
+
   100% {
     max-height: 0;
     margin-bottom: 0;

components/page-header/style/index.less

@@ -90,6 +90,7 @@
         margin-left: @margin-sm;
         white-space: unset;
       }
+
       > *:first-child {
         margin-left: 0;
       }
@@ -105,6 +106,7 @@
     .@{ant-prefix}-tabs {
       > .@{ant-prefix}-tabs-nav {
         margin: 0;
+
         &::before {
           border: none;
         }

components/page-header/style/rtl.less

@@ -56,6 +56,7 @@
           margin-left: 0;
         }
       }
+
       > *:first-child {
         .@{pageheader-prefix-cls}-rtl & {
           margin-right: 0;

components/pagination/style/index.less

@@ -63,6 +63,7 @@
     &:hover {
       border-color: @primary-color;
       transition: all 0.3s;
+
       a {
         color: @primary-color;
       }
@@ -101,6 +102,7 @@
         letter-spacing: -1px;
         opacity: 0;
         transition: all 0.2s;
+
         &-svg {
           top: 0;
           right: 0;
@@ -144,6 +146,7 @@
   &-jump-next {
     margin-right: 8px;
   }
+
   &-prev,
   &-next,
   &-jump-prev,
@@ -259,6 +262,7 @@
       height: @pagination-item-size-sm;
       background-color: transparent;
       border: 0;
+
       &::after {
         height: @pagination-item-size-sm;
         line-height: @pagination-item-size-sm;
@@ -326,6 +330,7 @@
   &.mini &-next &-item-link {
     background: transparent;
     border-color: transparent;
+
     &::after {
       height: @pagination-item-size-sm;
       line-height: @pagination-item-size-sm;
@@ -377,6 +382,7 @@
 
       &-active {
         background: @pagination-item-disabled-bg-active;
+
         a {
           color: @pagination-item-disabled-color-active;
         }

components/popover/style/index.less

@@ -99,6 +99,7 @@
       color: @warning-color;
       font-size: @font-size-base;
     }
+
     &-title {
       padding-left: @font-size-base + 8px;
     }
@@ -149,6 +150,7 @@
       transform: translateY((-@popover-arrow-rotate-width / 2)) rotate(45deg);
     }
   }
+
   &-placement-top &-arrow {
     left: 50%;
     transform: translateX(-50%);
@@ -172,13 +174,16 @@
       transform: translateX((@popover-arrow-rotate-width / 2)) rotate(45deg);
     }
   }
+
   &-placement-right &-arrow {
     top: 50%;
     transform: translateY(-50%);
   }
+
   &-placement-rightTop &-arrow {
     top: @popover-arrow-offset-vertical;
   }
+
   &-placement-rightBottom &-arrow {
     bottom: @popover-arrow-offset-vertical;
   }

components/progress/style/index.less

@@ -16,11 +16,13 @@
 
   &-steps {
     display: inline-block;
+
     &-outer {
       display: flex;
       flex-direction: row;
       align-items: center;
     }
+
     &-item {
       flex-shrink: 0;
       min-width: 2px;
@@ -180,6 +182,7 @@
       color: @error-color;
     }
   }
+
   &-circle&-status-success {
     .@{progress-prefix-cls}-text {
       color: @success-color;
@@ -192,10 +195,12 @@
     transform: translateX(-100%) scaleX(0);
     opacity: 0.1;
   }
+
   20% {
     transform: translateX(-100%) scaleX(0);
     opacity: 0.5;
   }
+
   100% {
     transform: translateX(0) scaleX(1);
     opacity: 0;

components/radio/__tests__/group.test.js

@@ -1,17 +1,15 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
-import Radio from '../radio';
+import Radio from '..';
-import RadioGroup from '../group';
-import RadioButton from '../radioButton';
 
 describe('Radio Group', () => {
   function createRadioGroup(props) {
     return (
-      <RadioGroup {...props}>
+      <Radio.Group {...props}>
         <Radio value="A">A</Radio>
         <Radio value="B">B</Radio>
         <Radio value="C">C</Radio>
-      </RadioGroup>
+      </Radio.Group>
     );
   }
 
@@ -22,7 +20,7 @@ describe('Radio Group', () => {
       { label: 'C', value: 'C' },
     ];
 
-    return <RadioGroup {...props} options={options} />;
+    return <Radio.Group {...props} options={options} />;
   }
 
   it('responses hover events', () => {
@@ -30,9 +28,9 @@ describe('Radio Group', () => {
     const onMouseLeave = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+      <Radio.Group onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
         <Radio />
-      </RadioGroup>,
+      </Radio.Group>,
     );
 
     wrapper.find('div').at(0).simulate('mouseenter');
@@ -63,7 +61,7 @@ describe('Radio Group', () => {
     const onChangeRadioGroup = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onChange={onChangeRadioGroup}>
+      <Radio.Group onChange={onChangeRadioGroup}>
         <Radio value="A" onChange={onChange}>
           A
         </Radio>
@@ -73,7 +71,7 @@ describe('Radio Group', () => {
         <Radio value="C" onChange={onChange}>
           C
         </Radio>
-      </RadioGroup>,
+      </Radio.Group>,
     );
     const radios = wrapper.find('input');
 
@@ -87,11 +85,11 @@ describe('Radio Group', () => {
     const onChange = jest.fn();
 
     const wrapper = mount(
-      <RadioGroup onChange={onChange}>
+      <Radio.Group onChange={onChange}>
-        <RadioButton value="A">A</RadioButton>
+        <Radio.Button value="A">A</Radio.Button>
-        <RadioButton value="B">B</RadioButton>
+        <Radio.Button value="B">B</Radio.Button>
-        <RadioButton value="C">C</RadioButton>
+        <Radio.Button value="C">C</Radio.Button>
-      </RadioGroup>,
+      </Radio.Group>,
     );
     const radios = wrapper.find('input');
 
@@ -104,7 +102,7 @@ describe('Radio Group', () => {
   it('should only trigger once when in group with options', () => {
     const onChange = jest.fn();
     const options = [{ label: 'Bamboo', value: 'Bamboo' }];
-    const wrapper = mount(<RadioGroup options={options} onChange={onChange} />);
+    const wrapper = mount(<Radio.Group options={options} onChange={onChange} />);
 
     wrapper.find('input').simulate('change');
     expect(onChange).toHaveBeenCalledTimes(1);
@@ -147,9 +145,7 @@ describe('Radio Group', () => {
       { label: 'Apple', value: 'Apple' },
       { label: 'Orange', value: 'Orange', style: { fontSize: 12 } },
     ];
-
+    const wrapper = render(<Radio.Group prefixCls="my-radio" options={options} />);
-    const wrapper = render(<RadioGroup prefixCls="my-radio" options={options} />);
-
     expect(wrapper).toMatchSnapshot();
   });
 
@@ -166,11 +162,46 @@ describe('Radio Group', () => {
     expect(radioGroupRef).toBe(wrapper.children().getDOMNode());
   });
 
+  it('should support data-* or aria-* props', () => {
+    const wrapper = mount(
+      createRadioGroup({
+        'data-radio-group-id': 'radio-group-id',
+        'aria-label': 'radio-group',
+      }),
+    );
+    expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
+    expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
+  });
+
+  it('Radio type should not be override', () => {
+    const onChange = jest.fn();
+    const wrapper = mount(
+      <Radio.Group onChange={onChange}>
+        <Radio value={1} type="1">
+          A
+        </Radio>
+        <Radio value={2} type="2">
+          B
+        </Radio>
+        <Radio value={3} type="3">
+          C
+        </Radio>
+        <Radio value={4} type="4">
+          D
+        </Radio>
+      </Radio.Group>,
+    );
+    const radios = wrapper.find('input');
+    radios.at(1).simulate('change');
+    expect(onChange).toHaveBeenCalled();
+    expect(radios.at(1).getDOMNode().type).toBe('radio');
+  });
+
   describe('value is null or undefined', () => {
     it('use `defaultValue` when `value` is undefined', () => {
       const options = [{ label: 'Bamboo', value: 'bamboo' }];
       const wrapper = mount(
-        <RadioGroup defaultValue="bamboo" value={undefined} options={options} />,
+        <Radio.Group defaultValue="bamboo" value={undefined} options={options} />,
       );
       expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
         true,
@@ -180,7 +211,7 @@ describe('Radio Group', () => {
     [undefined, null].forEach(newValue => {
       it(`should set value back when value change back to ${newValue}`, () => {
         const options = [{ label: 'Bamboo', value: 'bamboo' }];
-        const wrapper = mount(<RadioGroup value="bamboo" options={options} />);
+        const wrapper = mount(<Radio.Group value="bamboo" options={options} />);
         expect(wrapper.find('.ant-radio-wrapper').at(0).hasClass('ant-radio-wrapper-checked')).toBe(
           true,
         );
@@ -192,15 +223,4 @@ describe('Radio Group', () => {
       });
     });
   });
-
-  it('should support data-* or aria-* props', () => {
-    const wrapper = mount(
-      createRadioGroup({
-        'data-radio-group-id': 'radio-group-id',
-        'aria-label': 'radio-group',
-      }),
-    );
-    expect(wrapper.getDOMNode().getAttribute('data-radio-group-id')).toBe('radio-group-id');
-    expect(wrapper.getDOMNode().getAttribute('aria-label')).toBe('radio-group');
-  });
 });

components/radio/radio.tsx

@@ -49,7 +49,7 @@ const InternalRadio: React.ForwardRefRenderFunction<HTMLElement, RadioProps> = (
       onMouseEnter={props.onMouseEnter}
       onMouseLeave={props.onMouseLeave}
     >
-      <RcCheckbox {...radioProps} prefixCls={prefixCls} ref={mergedRef} />
+      <RcCheckbox {...radioProps} type="radio" prefixCls={prefixCls} ref={mergedRef} />
       {children !== undefined ? <span>{children}</span> : null}
     </label>
   );
@@ -59,8 +59,4 @@ const Radio = React.forwardRef<unknown, RadioProps>(InternalRadio);
 
 Radio.displayName = 'Radio';
 
-Radio.defaultProps = {
-  type: 'radio',
-};
-
 export default Radio;

components/radio/style/index.less

@@ -126,6 +126,7 @@
 .@{radio-prefix-cls}-checked {
   .@{radio-inner-prefix-cls} {
     border-color: @radio-dot-color;
+
     &::after {
       transform: scale(1);
       opacity: 1;
@@ -141,6 +142,7 @@
     background-color: @input-disabled-bg;
     border-color: @border-color-base !important;
     cursor: not-allowed;
+
     &::after {
       background-color: @radio-dot-disabled-color;
     }
@@ -268,6 +270,7 @@ span.@{radio-prefix-cls} + * {
     &:hover {
       color: @radio-button-hover-color;
       border-color: @radio-button-hover-color;
+
       &::before {
         background-color: @radio-button-hover-color;
       }
@@ -276,6 +279,7 @@ span.@{radio-prefix-cls} + * {
     &:active {
       color: @radio-button-active-color;
       border-color: @radio-button-active-color;
+
       &::before {
         background-color: @radio-button-active-color;
       }
@@ -290,16 +294,19 @@ span.@{radio-prefix-cls} + * {
     color: @radio-solid-checked-color;
     background: @radio-dot-color;
     border-color: @radio-dot-color;
+
     &:hover {
       color: @radio-solid-checked-color;
       background: @radio-button-hover-color;
       border-color: @radio-button-hover-color;
     }
+
     &:active {
       color: @radio-solid-checked-color;
       background: @radio-button-active-color;
       border-color: @radio-button-active-color;
     }
+
     &:focus-within {
       box-shadow: @radio-button-focus-shadow;
     }
@@ -317,6 +324,7 @@ span.@{radio-prefix-cls} + * {
       background-color: @input-disabled-bg;
       border-color: @border-color-base;
     }
+
     &:first-child {
       border-left-color: @border-color-base;
     }
@@ -335,6 +343,7 @@ span.@{radio-prefix-cls} + * {
     transform: scale(1);
     opacity: 0.5;
   }
+
   100% {
     transform: scale(1.6);
     opacity: 0;

components/rate/style/index.less

@@ -17,6 +17,7 @@
 
   &-disabled &-star {
     cursor: default;
+
     &:hover {
       transform: scale(1);
     }

components/result/style/index.less

@@ -55,6 +55,7 @@
   &-extra {
     margin: @result-extra-margin;
     text-align: center;
+
     > * {
       margin-right: 8px;
 

components/select/style/index.less

@@ -1,7 +1,6 @@
 @import '../../style/themes/index';
 @import '../../style/mixins/index';
 @import '../../input/style/mixin';
-
 @import './single';
 @import './multiple';
 
@@ -167,9 +166,11 @@
     opacity: 0;
     transition: color 0.3s ease, opacity 0.15s ease;
     text-rendering: auto;
+
     &::before {
       display: block;
     }
+
     &:hover {
       color: @text-color-secondary;
     }

components/skeleton/style/index.less

@@ -271,6 +271,7 @@
   0% {
     background-position: 100% 50%;
   }
+
   100% {
     background-position: 0 50%;
   }

components/skeleton/style/rtl.less

@@ -41,6 +41,7 @@
   0% {
     background-position: 0% 50%;
   }
+
   100% {
     background-position: 100% 50%;
   }

components/slider/style/index.less

@@ -120,9 +120,11 @@
     &:first-child {
       margin-left: -4px;
     }
+
     &:last-child {
       margin-left: -4px;
     }
+
     &-active {
       border-color: @slider-dot-border-color-active;
     }

components/space/style/index.less

@@ -6,6 +6,7 @@
 
 .@{space-prefix-cls} {
   display: inline-flex;
+
   &-vertical {
     flex-direction: column;
   }
@@ -14,12 +15,15 @@
     &-center {
       align-items: center;
     }
+
     &-start {
       align-items: flex-start;
     }
+
     &-end {
       align-items: flex-end;
     }
+
     &-baseline {
       align-items: baseline;
     }

components/spin/style/index.less

@@ -142,16 +142,19 @@
         top: 0;
         left: 0;
       }
+
       &:nth-child(2) {
         top: 0;
         right: 0;
         animation-delay: 0.4s;
       }
+
       &:nth-child(3) {
         right: 0;
         bottom: 0;
         animation-delay: 0.8s;
       }
+
       &:nth-child(4) {
         bottom: 0;
         left: 0;

components/steps/style/index.less

@@ -74,6 +74,7 @@
       line-height: 1;
     }
   }
+
   &-tail {
     position: absolute;
     top: 12px;
@@ -91,6 +92,7 @@
       content: '';
     }
   }
+
   &-title {
     position: relative;
     display: inline-block;
@@ -110,6 +112,7 @@
       content: '';
     }
   }
+
   &-subtitle {
     display: inline;
     margin-left: 8px;
@@ -117,18 +120,21 @@
     font-weight: normal;
     font-size: @font-size-base;
   }
+
   &-description {
     color: @text-color-secondary;
     font-size: @font-size-base;
   }
   .step-item-status(wait);
   .step-item-status(process);
+
   &-process > &-container > &-icon {
     background: @process-icon-color;
     .@{steps-prefix-cls}-icon {
       color: @process-icon-text-color;
     }
   }
+
   &-process > &-container > &-title {
     font-weight: 500;
   }
@@ -197,9 +203,11 @@
     &:last-child .@{steps-prefix-cls}-item-title {
       padding-right: 0;
     }
+
     &-tail {
       display: none;
     }
+
     &-description {
       max-width: @steps-description-max-width;
       white-space: normal;
@@ -224,6 +232,7 @@
   }
   &-@{status} > &-container > &-content > &-title {
     color: @@title-color;
+
     &::after {
       background-color: @@tail-color;
     }

components/steps/style/label-placement.less

@@ -1,27 +1,33 @@
 .@{steps-prefix-cls}-label-vertical {
   .@{steps-prefix-cls}-item {
     overflow: visible;
+
     &-tail {
       margin-left: 58px;
       padding: 3.5px 24px;
     }
+
     &-content {
       display: block;
       width: ((@steps-icon-size / 2) + 42px) * 2;
       margin-top: 8px;
       text-align: center;
     }
+
     &-icon {
       display: inline-block;
       margin-left: 42px;
     }
+
     &-title {
       padding-right: 0;
       padding-left: 0;
+
       &::after {
         display: none;
       }
     }
+
     &-subtitle {
       display: block;
       margin-bottom: 4px;

components/steps/style/nav.less

@@ -41,6 +41,7 @@
     &:not(.@{steps-prefix-cls}-item-active) {
       .@{steps-prefix-cls}-item-container[role='button'] {
         cursor: pointer;
+
         &:hover {
           opacity: 0.85;
         }
@@ -49,6 +50,7 @@
 
     &:last-child {
       flex: 1;
+
       &::after {
         display: none;
       }
@@ -93,6 +95,7 @@
 .@{steps-prefix-cls}-navigation.@{steps-prefix-cls}-vertical {
   > .@{steps-prefix-cls}-item {
     margin-right: 0 !important;
+
     &::before {
       display: none;
     }
@@ -104,6 +107,7 @@
       width: 3px;
       height: calc(100% - 24px);
     }
+
     &::after {
       position: relative;
       top: -2px;

components/steps/style/progress-dot.less

@@ -4,6 +4,7 @@
     &-title {
       line-height: @line-height-base;
     }
+
     &-tail {
       top: @steps-dot-top;
       width: 100%;
@@ -19,6 +20,7 @@
     &:first-child .@{steps-prefix-cls}-icon-dot {
       left: 2px;
     }
+
     &-icon {
       width: @steps-dot-size;
       height: @steps-dot-size;
@@ -47,6 +49,7 @@
         }
       }
     }
+
     &-content {
       width: @steps-description-max-width;
     }

components/steps/style/rtl.less

@@ -193,6 +193,7 @@
         left: auto;
       }
     }
+
     &-icon {
       .@{steps-prefix-cls}-rtl& {
         margin-right: 67px;

components/steps/style/small.less

@@ -20,6 +20,7 @@
     padding-right: 12px;
     font-size: @font-size-base;
     line-height: @steps-small-icon-size;
+
     &::after {
       top: (@steps-small-icon-size / 2);
     }

components/style/core/global.less

@@ -199,6 +199,7 @@ sup {
 sub {
   bottom: -0.25em;
 }
+
 sup {
   top: -0.5em;
 }

components/style/core/motion.less

@@ -8,6 +8,7 @@
 // For common/openAnimation
 .ant-motion-collapse-legacy {
   overflow: hidden;
+
   &-active {
     transition: height @animation-duration-base @ease-in-out,
       opacity @animation-duration-base @ease-in-out !important;

components/style/core/motion/fade.less

@@ -17,6 +17,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }
@@ -26,6 +27,7 @@
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }

components/style/core/motion/move.less

@@ -22,6 +22,7 @@
     transform-origin: 0 0;
     opacity: 0;
   }
+
   100% {
     transform: translateY(0%);
     transform-origin: 0 0;
@@ -35,6 +36,7 @@
     transform-origin: 0 0;
     opacity: 1;
   }
+
   100% {
     transform: translateY(100%);
     transform-origin: 0 0;
@@ -48,6 +50,7 @@
     transform-origin: 0 0;
     opacity: 0;
   }
+
   100% {
     transform: translateX(0%);
     transform-origin: 0 0;
@@ -61,6 +64,7 @@
     transform-origin: 0 0;
     opacity: 1;
   }
+
   100% {
     transform: translateX(-100%);
     transform-origin: 0 0;
@@ -74,6 +78,7 @@
     transform-origin: 0 0;
     opacity: 0;
   }
+
   100% {
     transform: translateX(0%);
     transform-origin: 0 0;
@@ -87,6 +92,7 @@
     transform-origin: 0 0;
     opacity: 1;
   }
+
   100% {
     transform: translateX(100%);
     transform-origin: 0 0;
@@ -100,6 +106,7 @@
     transform-origin: 0 0;
     opacity: 0;
   }
+
   100% {
     transform: translateY(0%);
     transform-origin: 0 0;
@@ -113,6 +120,7 @@
     transform-origin: 0 0;
     opacity: 1;
   }
+
   100% {
     transform: translateY(-100%);
     transform-origin: 0 0;

components/style/core/motion/slide.less

@@ -22,6 +22,7 @@
     transform-origin: 0% 0%;
     opacity: 0;
   }
+
   100% {
     transform: scaleY(1);
     transform-origin: 0% 0%;
@@ -35,6 +36,7 @@
     transform-origin: 0% 0%;
     opacity: 1;
   }
+
   100% {
     transform: scaleY(0.8);
     transform-origin: 0% 0%;
@@ -48,6 +50,7 @@
     transform-origin: 100% 100%;
     opacity: 0;
   }
+
   100% {
     transform: scaleY(1);
     transform-origin: 100% 100%;
@@ -61,6 +64,7 @@
     transform-origin: 100% 100%;
     opacity: 1;
   }
+
   100% {
     transform: scaleY(0.8);
     transform-origin: 100% 100%;
@@ -74,6 +78,7 @@
     transform-origin: 0% 0%;
     opacity: 0;
   }
+
   100% {
     transform: scaleX(1);
     transform-origin: 0% 0%;
@@ -87,6 +92,7 @@
     transform-origin: 0% 0%;
     opacity: 1;
   }
+
   100% {
     transform: scaleX(0.8);
     transform-origin: 0% 0%;
@@ -100,6 +106,7 @@
     transform-origin: 100% 0%;
     opacity: 0;
   }
+
   100% {
     transform: scaleX(1);
     transform-origin: 100% 0%;
@@ -113,6 +120,7 @@
     transform-origin: 100% 0%;
     opacity: 1;
   }
+
   100% {
     transform: scaleX(0.8);
     transform-origin: 100% 0%;

components/style/core/motion/zoom.less

@@ -33,6 +33,7 @@
     transform: scale(0.2);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -43,6 +44,7 @@
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0.2);
     opacity: 0;
@@ -54,6 +56,7 @@
     transform: scale(0.8);
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     opacity: 1;
@@ -64,6 +67,7 @@
   0% {
     transform: scale(1);
   }
+
   100% {
     transform: scale(0.8);
     opacity: 0;
@@ -76,6 +80,7 @@
     transform-origin: 50% 0%;
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     transform-origin: 50% 0%;
@@ -87,6 +92,7 @@
     transform: scale(1);
     transform-origin: 50% 0%;
   }
+
   100% {
     transform: scale(0.8);
     transform-origin: 50% 0%;
@@ -100,6 +106,7 @@
     transform-origin: 0% 50%;
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     transform-origin: 0% 50%;
@@ -111,6 +118,7 @@
     transform: scale(1);
     transform-origin: 0% 50%;
   }
+
   100% {
     transform: scale(0.8);
     transform-origin: 0% 50%;
@@ -124,6 +132,7 @@
     transform-origin: 100% 50%;
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     transform-origin: 100% 50%;
@@ -135,6 +144,7 @@
     transform: scale(1);
     transform-origin: 100% 50%;
   }
+
   100% {
     transform: scale(0.8);
     transform-origin: 100% 50%;
@@ -148,6 +158,7 @@
     transform-origin: 50% 100%;
     opacity: 0;
   }
+
   100% {
     transform: scale(1);
     transform-origin: 50% 100%;
@@ -159,6 +170,7 @@
     transform: scale(1);
     transform-origin: 50% 100%;
   }
+
   100% {
     transform: scale(0.8);
     transform-origin: 50% 100%;

components/style/mixins/clearfix.less

@@ -6,6 +6,7 @@
     display: table;
     content: '';
   }
+
   &::after {
     // https://github.com/ant-design/ant-design/issues/21864
     display: table;

components/style/mixins/customize.less

@@ -64,6 +64,7 @@
       .@{table-prefix-cls}-row-expand-icon {
         border: @popover-border;
       }
+
       tfoot {
         > tr {
           > th,
@@ -72,6 +73,7 @@
           }
         }
       }
+
       thead {
         > tr {
           > th {
@@ -80,6 +82,7 @@
           }
         }
       }
+
       tbody {
         > tr {
           > td {

components/switch/style/index.less

@@ -45,6 +45,7 @@
   &-disabled {
     cursor: not-allowed;
     opacity: @switch-disabled-opacity;
+
     * {
       box-shadow: none;
       cursor: not-allowed;

components/table/style/bordered.less

@@ -1,5 +1,4 @@
 @import './size';
-
 @import (reference) '../../style/themes/index';
 @table-prefix-cls: ~'@{ant-prefix}-table';
 

components/table/style/index.less

@@ -539,6 +539,7 @@
     &-collapsed::before {
       transform: rotate(-180deg);
     }
+
     &-collapsed::after {
       transform: rotate(0deg);
     }
@@ -593,6 +594,7 @@
     .@{table-prefix-cls}-empty & {
       color: @disabled-color;
     }
+
     &:hover {
       > td {
         background: @component-background;
@@ -651,6 +653,7 @@
     &::before {
       left: 0;
     }
+
     &::after {
       right: 0;
     }
@@ -689,6 +692,7 @@
       box-shadow: inset -10px 0 8px -8px darken(@shadow-color, 5%);
     }
   }
+
   &-sticky {
     &-holder {
       position: sticky;
@@ -705,16 +709,20 @@
       background: lighten(@table-border-color, 80%);
       border-top: 1px solid @table-border-color;
       opacity: 0.6;
+
       &:hover {
         transform-origin: center bottom;
       }
+
       &-bar {
         height: 8px;
         background-color: @table-sticky-scroll-bar-bg;
         border-radius: @table-sticky-scroll-bar-radius;
+
         &:hover {
           background-color: @table-sticky-scroll-bar-active-bg;
         }
+
         &-active {
           background-color: @table-sticky-scroll-bar-active-bg;
         }
@@ -730,6 +738,7 @@
         box-shadow: none !important;
       }
     }
+
     &-ping-right {
       .@{table-prefix-cls}-cell-fix-right-first::after {
         box-shadow: none !important;

components/tabs/style/position.less

@@ -40,6 +40,7 @@
           left: 0;
           box-shadow: inset 10px 0 8px -8px fade(@shadow-color, 8%);
         }
+
         &::after {
           right: 0;
           box-shadow: inset -10px 0 8px -8px fade(@shadow-color, 8%);
@@ -123,6 +124,7 @@
           top: 0;
           box-shadow: inset 0 10px 8px -8px fade(@shadow-color, 8%);
         }
+
         &::after {
           bottom: 0;
           box-shadow: inset 0 -10px 8px -8px fade(@shadow-color, 8%);

components/tabs/style/rtl.less

@@ -77,6 +77,7 @@
   &-rtl {
     direction: rtl;
   }
+
   &-menu-item {
     .@{tab-prefix-cls}-dropdown-rtl & {
       text-align: right;

components/tag/style/index.less

@@ -58,16 +58,20 @@
     background-color: transparent;
     border-color: transparent;
     cursor: pointer;
+
     &:not(&-checked):hover {
       color: @primary-color;
     }
+
     &:active,
     &-checked {
       color: @text-color-inverse;
     }
+
     &-checked {
       background-color: @primary-6;
     }
+
     &:active {
       background-color: @primary-7;
     }

components/transfer/style/rtl.less

@@ -15,6 +15,7 @@
         padding-right: @control-padding-horizontal-sm;
         padding-left: 24px;
       }
+
       &-action {
         .@{transfer-prefix-cls}-rtl & {
           right: auto;
@@ -35,6 +36,7 @@
         right: 0;
         left: auto;
       }
+
       &-title {
         .@{transfer-prefix-cls}-rtl & {
           text-align: left;

components/tree/style/mixin.less

@@ -12,6 +12,7 @@
     display: inline-block;
     font-size: 10px;
     vertical-align: baseline;
+
     svg {
       transition: transform 0.3s;
     }
@@ -27,6 +28,7 @@
     background-color: @primary-color;
     border-radius: 1px;
     pointer-events: none;
+
     &::after {
       position: absolute;
       top: -3px;
@@ -187,6 +189,7 @@
         border-right: 1px solid @normal-color;
         content: ' ';
       }
+
       &::after {
         position: absolute;
         width: @tree-title-height - 14px;
@@ -233,6 +236,7 @@
       line-height: @tree-title-height;
       text-align: center;
       vertical-align: top;
+
       &:empty {
         display: none;
       }
@@ -310,6 +314,7 @@
   0% {
     opacity: 0;
   }
+
   100% {
     opacity: 1;
   }

components/typography/Base.tsx

@@ -316,10 +316,14 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
     const { ellipsisText, isEllipsis, expanded } = this.state;
     const { rows, suffix, onEllipsis } = this.getEllipsis();
     const { children } = this.props;
-    if (!rows || rows < 0 || !this.contentRef.current || expanded) return;
+    if (!rows || rows < 0 || !this.contentRef.current || expanded) {
+      return;
+    }
 
     // Do not measure if css already support ellipsis
-    if (this.canUseCSSEllipsis()) return;
+    if (this.canUseCSSEllipsis()) {
+      return;
+    }
 
     devWarning(
       toArray(children).every((child: React.ReactNode) => typeof child === 'string'),

components/typography/style/index.less

@@ -22,6 +22,7 @@
 
   &&-danger {
     color: @error-color;
+
     a&:active,
     a&:focus,
     a&:hover {
@@ -45,18 +46,22 @@
   h1 {
     .typography-title-1();
   }
+
   h2&,
   h2 {
     .typography-title-2();
   }
+
   h3&,
   h3 {
     .typography-title-3();
   }
+
   h4&,
   h4 {
     .typography-title-4();
   }
+
   h5&,
   h5 {
     .typography-title-5();

components/typography/util.tsx

@@ -106,8 +106,9 @@ export default (
   // Get origin style
   const originStyle = window.getComputedStyle(originElement);
   const lineHeight = getRealLineHeight(originElement);
-  const maxHeight =
+  const overflowRows = rows + 1;
-    Math.floor(lineHeight) * (rows + 1) +
+  const oneRowMaxHeight =
+    Math.floor(lineHeight) +
     pxToNumber(originStyle.paddingTop) +
     pxToNumber(originStyle.paddingBottom);
 
@@ -128,7 +129,9 @@ export default (
 
   // Check if ellipsis in measure div is height enough for content
   function inRange() {
-    return Math.ceil(ellipsisContainer.getBoundingClientRect().height) < maxHeight;
+    return (
+      Math.ceil(ellipsisContainer.getBoundingClientRect().height / overflowRows) < oneRowMaxHeight
+    );
   }
 
   // Skip ellipsis if already match
@@ -223,6 +226,7 @@ export default (
         reactNode: null,
       };
     }
+
     if (type === TEXT_NODE) {
       const fullText = childNode.textContent || '';
       const textNode = document.createTextNode(fullText);

components/upload/style/index.less

@@ -121,6 +121,7 @@
       color: @disabled-color;
       font-size: 30px;
       transition: all 0.3s;
+
       &:hover {
         color: @text-color-secondary;
       }
@@ -149,6 +150,7 @@
     height: @line-height-base * @font-size-base;
     margin-top: @margin-xs;
     font-size: @font-size-base;
+
     &-name {
       display: inline-block;
       width: 100%;
@@ -246,6 +248,7 @@
       .@{iconfont-css-prefix} {
         color: @error-color;
       }
+
       &-btn {
         opacity: 1;
       }

components/upload/style/rtl.less

@@ -21,6 +21,7 @@
   &-rtl {
     direction: rtl;
   }
+
   &-item-list-type-text {
     &:hover {
       .@{upload-prefix-cls}-list-item-name-icon-count-1 {
@@ -37,6 +38,7 @@
       }
     }
   }
+
   &-item {
     &-name {
       .@{upload-prefix-cls}-list-rtl & {

docs/react/recommendation.en-US.md

@@ -26,7 +26,7 @@ title: Third-Party Libraries
 | i18n | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
 | Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
 | Markdown renderer | [react-markdown](https://remarkjs.github.io/react-markdown/) |
-| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
+| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
 | Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap) |
 | Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
 | Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |

docs/react/recommendation.zh-CN.md

@@ -26,7 +26,7 @@ title: 社区精选组件
 | 应用国际化 | [FormatJS](https://github.com/formatjs/formatjs) [react-i18next](https://react.i18next.com) |
 | 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
 | Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) |
-| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
+| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component) |
 | 地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap) |
 | 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
 | 右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |