chore: sync ant-design v4.21.7 (#8162)

Co-authored-by: ng-zorro-bot <ng-zorro-bot@users.noreply.github.com> Co-authored-by: hyperlife1119 <hyperlife1119@qq.com>
NG-ZORRO · Apr 5, 2024 · 5c3c29d · 5c3c29d
1 parent d7eff80
commit 5c3c29d
Show file tree

Hide file tree

Showing 45 changed files with 252 additions and 193 deletions.
diff --git a/components/back-top/style/responsive.less b/components/back-top/style/responsive.less
@@ -1,7 +1,7 @@
 @media screen and (max-width: @screen-md) {
   .@{backtop-prefix-cls} {
     right: 60px;
-    
+
     &-rtl {
       right: auto;
       left: 60px;
@@ -12,7 +12,7 @@
 @media screen and (max-width: @screen-xs) {
   .@{backtop-prefix-cls} {
     right: 20px;
-    
+
     &-rtl {
       right: auto;
       left: 20px;

diff --git a/components/breadcrumb/style/index.less b/components/breadcrumb/style/index.less
@@ -38,7 +38,7 @@
     }
   }
 
-  li:last-child &-separator {
+  li:last-child > &-separator {
     display: none;
   }
 

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -107,6 +107,10 @@
       display: flex;
       justify-content: center;
     }
+
+    .@{iconfont-css-prefix}-loading {
+      padding: 0 !important;
+    }
   }
 
   // https://github.com/ant-design/ant-design/issues/32365
@@ -178,12 +182,6 @@
         animation: loadingCircle 1s infinite linear;
       }
     }
-
-    &:only-child {
-      .@{iconfont-css-prefix} {
-        padding-right: 0;
-      }
-    }
   }
 
   &-group {
@@ -278,6 +276,10 @@ a.@{btn-prefix-cls} {
   padding-top: 0.01px !important;
   line-height: @btn-height-base - 2px;
 
+  &-disabled {
+    .btn-href-disabled();
+  }
+
   &-lg {
     line-height: @btn-height-lg - 2px;
   }

diff --git a/components/button/style/mixin.less b/components/button/style/mixin.less
@@ -385,6 +385,24 @@
   }
   .button-disabled(@disabled-color; transparent; transparent);
 }
+// link button disabled style
+.btn-href-disabled() {
+  cursor: not-allowed;
+
+  > * {
+    pointer-events: none;
+  }
+
+  &,
+  &:hover,
+  &:focus,
+  &:active {
+    .button-color(@btn-disable-color,transparent, transparent);
+
+    text-shadow: none;
+    box-shadow: none;
+  }
+}
 // text button style
 .btn-text() {
   .button-variant-other(@text-color, transparent, transparent);

diff --git a/components/button/style/rtl.less b/components/button/style/rtl.less
@@ -27,13 +27,6 @@
         padding-left: @margin-xs;
       }
     }
-
-    &:only-child {
-      .@{iconfont-css-prefix} {
-        padding-right: 0;
-        padding-left: 0;
-      }
-    }
   }
 
   > .@{iconfont-css-prefix} + span,

diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -80,7 +80,6 @@
   }
 
   &-extra {
-    float: right;
     // https://stackoverflow.com/a/22429853/3040605
     margin-left: auto;
     padding: @card-head-padding 0;
@@ -99,13 +98,17 @@
     .clearfix();
   }
 
+  &-contain-grid &-body {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
   &-contain-grid:not(&-loading) &-body {
     margin: -1px 0 0 -1px;
     padding: 0;
   }
 
   &-grid {
-    float: left;
     width: 33.33%;
     padding: @card-padding-base;
     border: 0;
@@ -115,10 +118,6 @@
       0 1px 0 0 @border-color-split inset;
     transition: all 0.3s;
 
-    .@{card-prefix-cls}-rtl & {
-      float: right;
-    }
-
     &-hoverable {
       &:hover {
         position: relative;
@@ -155,6 +154,7 @@
   }
 
   &-actions {
+    display: flex;
     margin: 0;
     padding: 0;
     list-style: none;
@@ -163,15 +163,10 @@
     .clearfix();
 
     & > li {
-      float: left;
       margin: @card-actions-li-margin;
       color: @text-color-secondary;
       text-align: center;
 
-      .@{card-prefix-cls}-rtl & {
-        float: right;
-      }
-
       > span {
         position: relative;
         display: block;
@@ -234,15 +229,14 @@
   }
 
   &-meta {
+    display: flex;
     margin: -4px 0;
     .clearfix();
 
     &-avatar {
-      float: left;
       padding-right: 16px;
 
       .@{card-prefix-cls}-rtl & {
-        float: right;
         padding-right: 0;
         padding-left: 16px;
       }
@@ -277,32 +271,6 @@
   &-loading &-body {
     user-select: none;
   }
-
-  &-loading-content {
-    p {
-      margin: 0;
-    }
-  }
-
-  &-loading-block {
-    height: 14px;
-    margin: 4px 0;
-    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
-    background-size: 600% 600%;
-    border-radius: @card-radius;
-    animation: card-loading 1.4s ease infinite;
-  }
-}
-
-@keyframes card-loading {
-  0%,
-  100% {
-    background-position: 0 50%;
-  }
-
-  50% {
-    background-position: 100% 50%;
-  }
 }
 
 @import './size';
diff --git a/components/collapse/collapse.component.ts b/components/collapse/collapse.component.ts
@@ -32,8 +32,8 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'collapse';
   template: ` <ng-content></ng-content> `,
   host: {
     class: 'ant-collapse',
-    '[class.ant-collapse-icon-position-left]': `nzExpandIconPosition === 'left'`,
-    '[class.ant-collapse-icon-position-right]': `nzExpandIconPosition === 'right'`,
+    '[class.ant-collapse-icon-position-start]': `nzExpandIconPosition === 'left'`,
+    '[class.ant-collapse-icon-position-end]': `nzExpandIconPosition === 'right'`,
     '[class.ant-collapse-ghost]': `nzGhost`,
     '[class.ant-collapse-borderless]': '!nzBordered',
     '[class.ant-collapse-rtl]': "dir === 'rtl'"
@@ -50,6 +50,7 @@ export class NzCollapseComponent implements OnInit {
   @Input() @WithConfig() @InputBoolean() nzAccordion: boolean = false;
   @Input() @WithConfig() @InputBoolean() nzBordered: boolean = true;
   @Input() @WithConfig() @InputBoolean() nzGhost: boolean = false;
+  // TODO(v18): change 'left' | 'right' to 'start' | 'end, it's gonna be a break changing.
   @Input() nzExpandIconPosition: 'left' | 'right' = 'left';
 
   dir: Direction = 'ltr';

diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
@@ -66,8 +66,8 @@
     }
   }
 
-  // Expand Icon right
-  &-icon-position-right {
+  // Expand Icon end
+  &-icon-position-end {
     & > .@{collapse-prefix-cls}-item {
       > .@{collapse-prefix-cls}-header {
         position: relative;

diff --git a/components/collapse/style/rtl.less b/components/collapse/style/rtl.less
@@ -6,6 +6,26 @@
 .@{collapse-prefix-cls} {
   &-rtl {
     direction: rtl;
+
+    // Expand Icon end
+    &.@{collapse-prefix-cls}.@{collapse-prefix-cls}-icon-position-end {
+      & > .@{collapse-prefix-cls}-item {
+        > .@{collapse-prefix-cls}-header {
+          position: relative;
+          padding: @collapse-header-padding;
+          padding-left: @collapse-header-padding-extra;
+
+          .@{collapse-prefix-cls}-arrow {
+            position: absolute;
+            top: 50%;
+            right: auto;
+            left: @padding-md;
+            margin: 0;
+            transform: translateY(-50%);
+          }
+        }
+      }
+    }
   }
 
   & > &-item {

diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
@@ -322,11 +322,6 @@
     width: @arrow-size;
     height: @arrow-size;
     margin-left: @input-padding-horizontal-base * 1.5;
-    background: linear-gradient(
-      135deg,
-      transparent 40%,
-      @calendar-bg 40%
-    ); // Use linear-gradient to prevent arrow from covering text
     box-shadow: 2px 2px 6px -2px fade(@black, 10%); // use spread radius to hide shadow over popover
     transition: left @animation-duration-slow ease-out;
     .roundedArrow(@arrow-size, 5px, @calendar-bg);

diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less
@@ -20,6 +20,10 @@
     &:focus {
       .active(@text-color, @hoverBorderColor, @outlineColor);
     }
+
+    .@{picker-prefix-cls}-active-bar {
+      background: @hoverBorderColor;
+    }
   }
 }
 

diff --git a/components/divider/style/index.less b/components/divider/style/index.less
@@ -114,7 +114,7 @@
       width: 100%;
     }
 
-    .ant-divider-inner-text {
+    .@{divider-prefix-cls}-inner-text {
       padding-left: 0;
     }
   }
@@ -128,7 +128,7 @@
       width: 0;
     }
 
-    .ant-divider-inner-text {
+    .@{divider-prefix-cls}-inner-text {
       padding-right: 0;
     }
   }

diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
@@ -70,11 +70,6 @@
     display: block;
     width: @popover-arrow-width;
     height: @popover-arrow-width;
-    background: linear-gradient(
-      135deg,
-      transparent 40%,
-      @popover-bg 40%
-    ); // Use linear-gradient to prevent arrow from covering text
     .roundedArrow(@popover-arrow-width, 5px, @popover-bg);
   }
 

diff --git a/components/form/style/vertical.less b/components/form/style/vertical.less
@@ -45,6 +45,10 @@
     &-label > label {
       height: auto;
     }
+
+    .@{form-prefix-cls}-item-control {
+      width: 100%;
+    }
   }
 }
 

diff --git a/components/input-number/style/rtl.less b/components/input-number/style/rtl.less
@@ -46,3 +46,26 @@
     }
   }
 }
+
+// https://github.com/ant-design/ant-design/issues/35870
+.input-group(@input-number-prefix-cls) {
+  > .@{input-number-prefix-cls}-rtl:first-child {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+  }
+  > .@{input-number-prefix-cls}-rtl:last-child {
+    border-radius: @border-radius-base 0 0 @border-radius-base;
+  }
+
+  &-addon {
+    .@{input-number-prefix-cls}-group-rtl &:first-child {
+      border-right: @border-width-base @border-style-base @input-border-color;
+      border-left: 0;
+      border-radius: 0 @border-radius-base @border-radius-base 0;
+    }
+    .@{input-number-prefix-cls}-group-rtl &:last-child {
+      border-right: 0;
+      border-left: @border-width-base @border-style-base @input-border-color;
+      border-radius: @border-radius-base 0 0 @border-radius-base;
+    }
+  }
+}
diff --git a/components/input/style/mixin.less b/components/input/style/mixin.less
@@ -23,7 +23,8 @@
     border-color: @hoverBorderColor;
   }
   & when not (@theme = variable) {
-    box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@borderColor, @outline-fade);
+    box-shadow: @input-outline-offset @outline-blur-size @outline-width
+      fade(@borderColor, @outline-fade);
   }
   & when (@theme = variable) {
     border-color: @hoverBorderColor;
@@ -199,7 +200,8 @@
     .@{ant-prefix}-select {
       margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);
 
-      &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input) .@{ant-prefix}-select-selector {
+      &.@{ant-prefix}-select-single:not(.@{ant-prefix}-select-customize-input)
+        .@{ant-prefix}-select-selector {
         background-color: inherit;
         border: @border-width-base @border-style-base transparent;
         box-shadow: none;

diff --git a/components/input/style/rtl.less b/components/input/style/rtl.less
@@ -102,6 +102,7 @@
     .@{inputClass}-group-rtl & {
       border-right: 0;
       border-left: @border-width-base @border-style-base @input-border-color;
+      border-radius: @border-radius-base 0 0 @border-radius-base;
     }
   }
 

diff --git a/components/modal/style/confirm.less b/components/modal/style/confirm.less
@@ -46,8 +46,8 @@
   }
 
   .@{confirm-prefix-cls}-btns {
-    float: right;
     margin-top: 24px;
+    text-align: right;
 
     .@{ant-prefix}-btn + .@{ant-prefix}-btn {
       margin-bottom: 0;