chore: sync ant-design v4.24.16 (#8489)

* chore: sync ant-design v4.24.16 * fix(module:anchor): fix anchor-ink-ball-visible class * feat(module:image): fix the DOM hierarchy and animations --------- Co-authored-by: ng-zorro-bot <ng-zorro-bot@users.noreply.github.com> Co-authored-by: hyperlife1119 <hyperlife1119@qq.com>
NG-ZORRO · Apr 13, 2024 · 2000294 · 2000294
1 parent a27a47e
commit 2000294
Show file tree

Hide file tree

Showing 53 changed files with 628 additions and 279 deletions.
diff --git a/components/alert/style/index.less b/components/alert/style/index.less
@@ -9,7 +9,7 @@
   position: relative;
   display: flex;
   align-items: center;
-  padding: 8px 15px;
+  padding: @alert-padding-vertical @alert-padding-horizontal;
   word-wrap: break-word;
   border-radius: @border-radius-base;
 

diff --git a/components/anchor/anchor.component.ts b/components/anchor/anchor.component.ts
@@ -40,6 +40,7 @@ interface Section {
   top: number;
 }
 
+const VISIBLE_CLASSNAME = 'ant-anchor-ink-ball-visible';
 const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'anchor';
 const sharpMatcherRegx = /#([^#]+)$/;
 
@@ -244,13 +245,12 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit, OnChanges {
   }
 
   private setVisible(): void {
-    const visible = this.visible;
-    const visibleClassname = 'visible';
     if (this.ink) {
+      const visible = this.visible;
       if (visible) {
-        this.renderer.addClass(this.ink.nativeElement, visibleClassname);
+        this.renderer.addClass(this.ink.nativeElement, VISIBLE_CLASSNAME);
       } else {
-        this.renderer.removeClass(this.ink.nativeElement, visibleClassname);
+        this.renderer.removeClass(this.ink.nativeElement, VISIBLE_CLASSNAME);
       }
     }
   }

diff --git a/components/anchor/style/index.less b/components/anchor/style/index.less
@@ -44,7 +44,7 @@
       transform: translateX(-50%);
       transition: top 0.3s ease-in-out;
 
-      &.visible {
+      &.@{ant-prefix}-anchor-ink-ball-visible {
         display: inline-block;
       }
     }

diff --git a/components/button/style/index.less b/components/button/style/index.less
@@ -289,4 +289,5 @@ a.@{btn-prefix-cls} {
   }
 }
 
+@import './space-compact';
 @import './rtl';
diff --git a/components/button/style/space-compact.less b/components/button/style/space-compact.less
@@ -0,0 +1,88 @@
+@import '../../style/mixins/index';
+
+@btn-prefix-cls: ~'@{ant-prefix}-btn';
+
+// Button in Space.Compact
+.@{btn-prefix-cls} {
+  .compact-item(@btn-prefix-cls);
+
+  // make `btn-icon-only` not too narrow
+  &-icon-only&-compact-item {
+    flex: none;
+  }
+
+  // Special styles for Primary Button
+  &-compact-item.@{btn-prefix-cls}-primary {
+    &:not([disabled]) + &:not([disabled]) {
+      position: relative;
+
+      &::after {
+        position: absolute;
+        top: -@border-width-base;
+        left: -@border-width-base;
+        display: inline-block;
+        width: @border-width-base;
+        height: calc(100% + @border-width-base * 2);
+        background-color: @btn-group-border;
+        content: ' ';
+      }
+    }
+  }
+
+  // ----------RTL----------
+  &-compact-item-rtl {
+    &.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) {
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+    }
+
+    &.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+
+    &.@{btn-prefix-cls}-sm {
+      &.@{btn-prefix-cls}-compact-first-item&:not(.@{btn-prefix-cls}-compact-last-item) {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+      }
+
+      &.@{btn-prefix-cls}-compact-last-item&:not(.@{btn-prefix-cls}-compact-first-item) {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+
+    // ----------RTL Special styles for Primary Button----------
+    &.@{btn-prefix-cls}-primary {
+      &:not([disabled]) + &:not([disabled]) {
+        &::after {
+          right: -@border-width-base;
+        }
+      }
+    }
+  }
+
+  // Button in Space.Compact when direction=vertical
+  .compact-item-vertical(@btn-prefix-cls);
+
+  // Special styles for Primary Button
+  &-compact-vertical-item {
+    &.@{btn-prefix-cls}-primary {
+      &:not([disabled]) + &:not([disabled]) {
+        position: relative;
+
+        &::after {
+          position: absolute;
+          top: -@border-width-base;
+          left: -@border-width-base;
+          display: inline-block;
+          width: calc(100% + @border-width-base * 2);
+          height: @border-width-base;
+          background-color: @btn-group-border;
+          content: ' ';
+        }
+      }
+    }
+  }
+}
diff --git a/components/card/style/index.less b/components/card/style/index.less
@@ -243,6 +243,7 @@
     }
 
     &-detail {
+      flex: 1;
       overflow: hidden;
 
       > div:not(:last-child) {

diff --git a/components/carousel/style/index.less b/components/carousel/style/index.less
@@ -2,6 +2,7 @@
 @import '../../style/mixins/index';
 
 @carousel-prefix-cls: ~'@{ant-prefix}-carousel';
+@carousel-dot-margin: 4px;
 
 .@{carousel-prefix-cls} {
   .reset-component();
@@ -180,6 +181,7 @@
     display: flex !important;
     justify-content: center;
     margin-right: 15%;
+    margin-bottom: 0;
     margin-left: 15%;
     padding-left: 0;
     list-style: none;
@@ -200,16 +202,15 @@
       box-sizing: content-box;
       width: @carousel-dot-width;
       height: @carousel-dot-height;
-      margin: 0 2px;
-      margin-right: 3px;
-      margin-left: 3px;
+      margin: 0 @carousel-dot-margin;
       padding: 0;
       text-align: center;
       text-indent: -999px;
       vertical-align: top;
       transition: all 0.5s;
 
       button {
+        position: relative;
         display: block;
         width: 100%;
         height: @carousel-dot-height;
@@ -228,6 +229,15 @@
         &:focus {
           opacity: 0.75;
         }
+
+        &::after {
+          position: absolute;
+          top: -@carousel-dot-margin;
+          right: -@carousel-dot-margin;
+          bottom: -@carousel-dot-margin;
+          left: -@carousel-dot-margin;
+          content: '';
+        }
       }
 
       &.slick-active {
@@ -270,7 +280,7 @@
     li {
       width: @carousel-dot-height;
       height: @carousel-dot-width;
-      margin: 4px 2px;
+      margin: @carousel-dot-margin 0;
       vertical-align: baseline;
 
       button {

diff --git a/components/cascader/style/index.less b/components/cascader/style/index.less
@@ -100,6 +100,9 @@
       }
     }
   }
+
+  // ===================== Compact Item Styles =====================
+  .compact-item(@cascader-prefix-cls);
 }
 
 @import './rtl';
diff --git a/components/collapse/style/index.less b/components/collapse/style/index.less
@@ -64,6 +64,13 @@
       }
     }
 
+    .@{collapse-prefix-cls}-icon-collapsible-only {
+      cursor: default;
+      .@{collapse-prefix-cls}-expand-icon {
+        cursor: pointer;
+      }
+    }
+
     &.@{collapse-prefix-cls}-no-arrow {
       > .@{collapse-prefix-cls}-header {
         padding-left: @padding-sm;

diff --git a/components/core/animation/fade.ts b/components/core/animation/fade.ts
@@ -8,6 +8,6 @@ import { animate, AnimationTriggerMetadata, style, transition, trigger } from '@
 import { AnimationDuration } from './animation-consts';
 
 export const fadeMotion: AnimationTriggerMetadata = trigger('fadeMotion', [
-  transition(':enter', [style({ opacity: 0 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 1 }))]),
-  transition(':leave', [style({ opacity: 1 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 0 }))])
+  transition('* => enter', [style({ opacity: 0 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 1 }))]),
+  transition('* => leave, :leave', [style({ opacity: 1 }), animate(`${AnimationDuration.BASE}`, style({ opacity: 0 }))])
 ]);
diff --git a/components/date-picker/style/index.less b/components/date-picker/style/index.less
@@ -318,7 +318,6 @@
   &-range-arrow {
     position: absolute;
     z-index: 1;
-    display: none;
     width: @arrow-size;
     height: @arrow-size;
     margin-left: @input-padding-horizontal-base * 1.5;
@@ -357,6 +356,9 @@
       }
     }
   }
+
+  // ===================== Compact Item Styles =====================
+  .compact-item(@picker-prefix-cls, null, ~'@{picker-prefix-cls}-focused');
 }
 
 @import './panel';

diff --git a/components/date-picker/style/status.less b/components/date-picker/style/status.less
@@ -11,7 +11,7 @@
 ) {
   &.@{picker-prefix-cls} {
     &,
-    &:not([disabled]):hover {
+    &:not(.@{picker-prefix-cls}-disabled):hover {
       background-color: @background-color;
       border-color: @border-color;
     }

diff --git a/components/divider/style/index.less b/components/divider/style/index.less
@@ -29,6 +29,7 @@
 
   &-horizontal&-with-text {
     display: flex;
+    align-items: center;
     margin: 16px 0;
     color: @heading-color;
     font-weight: 500;
@@ -41,7 +42,6 @@
     &::before,
     &::after {
       position: relative;
-      top: 50%;
       width: 50%;
       border-top: @border-width-base solid transparent;
       // Chrome not accept `inherit` in `border-top`
@@ -54,24 +54,20 @@
 
   &-horizontal&-with-text-left {
     &::before {
-      top: 50%;
       width: @divider-orientation-margin;
     }
 
     &::after {
-      top: 50%;
       width: 100% - @divider-orientation-margin;
     }
   }
 
   &-horizontal&-with-text-right {
     &::before {
-      top: 50%;
       width: 100% - @divider-orientation-margin;
     }
 
     &::after {
-      top: 50%;
       width: @divider-orientation-margin;
     }
   }

diff --git a/components/drawer/style/motion.less b/components/drawer/style/motion.less
@@ -53,7 +53,9 @@
 
       &-enter,
       &-appear {
-        transform: translateX(-100%);
+        &-start {
+          transform: translateX(-100%) !important;
+        }
 
         &-active {
           transform: translateX(0);
@@ -75,7 +77,9 @@
 
       &-enter,
       &-appear {
-        transform: translateX(100%);
+        &-start {
+          transform: translateX(100%) !important;
+        }
 
         &-active {
           transform: translateX(0);
@@ -97,7 +101,9 @@
 
       &-enter,
       &-appear {
-        transform: translateY(-100%);
+        &-start {
+          transform: translateY(-100%) !important;
+        }
 
         &-active {
           transform: translateY(0);
@@ -119,7 +125,9 @@
 
       &-enter,
       &-appear {
-        transform: translateY(100%);
+        &-start {
+          transform: translateY(100%) !important;
+        }
 
         &-active {
           transform: translateY(0);

diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
@@ -221,7 +221,7 @@
         background-color: @item-hover-bg;
       }
 
-      &-disabled {
+      &&-disabled {
         color: @disabled-color;
         cursor: not-allowed;
 

diff --git a/components/image/image-config.ts b/components/image/image-config.ts
@@ -5,12 +5,14 @@
 
 import { NzConfigKey } from 'ng-zorro-antd/core/config';
 
+/** @deprecated Will be removed in v19. */
 export const FADE_CLASS_NAME_MAP = {
   enter: 'ant-fade-enter',
   enterActive: 'ant-fade-enter-active',
   leave: 'ant-fade-leave',
   leaveActive: 'ant-fade-leave-active'
 };
 
+/** @deprecated Will be removed in v19. */
 export const IMAGE_PREVIEW_MASK_CLASS_NAME = 'ant-image-preview-mask';
 export const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'image';