chore: sync ant-design v4.23.6 (#8482)

* chore: sync ant-design v4.23.6 * fix(module:drawer): fix style * fix(module:tabs): fix tab switch motion * refactor(module:tabs): simplify tab switch motion --------- Co-authored-by: ng-zorro-bot <ng-zorro-bot@users.noreply.github.com> Co-authored-by: HyperLife1119 <hyperlife1119@qq.com>
NG-ZORRO · Apr 8, 2024 · 201a4ff · 201a4ff
1 parent eafb100
commit 201a4ff
Show file tree

Hide file tree

Showing 15 changed files with 137 additions and 58 deletions.
diff --git a/components/core/animation/public-api.ts b/components/core/animation/public-api.ts
@@ -11,5 +11,6 @@ export * from './form';
 export * from './move';
 export * from './notification';
 export * from './slide';
+export * from './tabs';
 export * from './thumb';
 export * from './zoom';
diff --git a/components/core/animation/tabs.ts b/components/core/animation/tabs.ts
@@ -0,0 +1,41 @@
+/**
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
+ */
+
+import { AnimationTriggerMetadata, animate, state, style, transition, trigger } from '@angular/animations';
+
+import { AnimationDuration } from './animation-consts';
+
+export const tabSwitchMotion: AnimationTriggerMetadata = trigger('tabSwitchMotion', [
+  state(
+    'leave',
+    style({
+      display: 'none'
+    })
+  ),
+  transition('* => enter', [
+    style({
+      display: 'block',
+      opacity: 0
+    }),
+    animate(AnimationDuration.SLOW)
+  ]),
+  transition('* => leave, :leave', [
+    style({
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      width: '100%'
+    }),
+    animate(
+      AnimationDuration.SLOW,
+      style({
+        opacity: 0
+      })
+    ),
+    style({
+      display: 'none'
+    })
+  ])
+]);
diff --git a/components/input/style/affix.less b/components/input/style/affix.less
@@ -30,6 +30,7 @@
 
     > input.@{ant-prefix}-input {
       padding: 0;
+      font-size: inherit;
       border: none;
       outline: none;
 

diff --git a/components/input/style/rtl.less b/components/input/style/rtl.less
@@ -182,8 +182,11 @@
     &:hover,
     &:focus {
       + .@{ant-prefix}-input-group-addon .@{search-prefix}-button:not(.@{ant-prefix}-btn-primary) {
-        border-right-color: @input-hover-border-color;
         border-left-color: @border-color-base;
+
+        &:hover {
+          border-left-color: @input-hover-border-color;
+        }
       }
     }
   }
@@ -196,7 +199,7 @@
       }
     }
 
-    > .@{ant-prefix}-input-group-addon {
+    > .@{ant-prefix}-input-group-addon:last-child {
       right: -1px;
       left: auto;
       .@{search-prefix}-button {

diff --git a/components/menu/style/index.less b/components/menu/style/index.less
@@ -244,7 +244,7 @@
       }
     }
 
-    &:focus-visible {
+    &:not(.@{menu-prefix-cls}-item-disabled):focus-visible {
       .accessibility-focus();
     }
   }

diff --git a/components/slider/style/index.less b/components/slider/style/index.less
@@ -178,7 +178,7 @@
 
     .@{slider-prefix-cls}-handle {
       margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
-      margin-left: -5px;
+      margin-left: @slider-handle-margin-left;
     }
 
     .@{slider-prefix-cls}-mark {

diff --git a/components/style/themes/default.less b/components/style/themes/default.less
@@ -106,7 +106,7 @@
 // https://github.com/ant-design/ant-design/issues/20210
 @line-height-base: 1.5715;
 @border-radius-base: 2px;
-@border-radius-sm: @border-radius-base;
+@border-radius-sm: 2px;
 
 // control border
 @control-border-radius: @border-radius-base;
@@ -893,6 +893,7 @@
 @slider-handle-color-tooltip-open: @primary-color;
 @slider-handle-size: 14px;
 @slider-handle-margin-top: -5px;
+@slider-handle-margin-left: -5px;
 @slider-handle-shadow: 0;
 @slider-dot-border-color: @border-color-split;
 @slider-dot-border-color-active: tint(@primary-color, 50%);

diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less
@@ -161,7 +161,7 @@
 // https://github.com/ant-design/ant-design/issues/20210
 @line-height-base: 1.5715;
 @border-radius-base: 2px;
-@border-radius-sm: @border-radius-base;
+@border-radius-sm: 2px;
 
 // control border
 @control-border-radius: @border-radius-base;
@@ -948,6 +948,7 @@
 @slider-handle-color-tooltip-open: @primary-color;
 @slider-handle-size: 14px;
 @slider-handle-margin-top: -5px;
+@slider-handle-margin-left: -5px;
 @slider-handle-shadow: 0;
 @slider-dot-border-color: @border-color-split;
 @slider-dot-border-color-active: ~'var(--@{ant-prefix}-primary-color-deprecated-t-50)';

diff --git a/components/switch/style/index.less b/components/switch/style/index.less
@@ -17,8 +17,7 @@
   height: @switch-height;
   line-height: @switch-height;
   vertical-align: middle;
-  background-image: linear-gradient(to right, @disabled-color, @disabled-color),
-    linear-gradient(to right, @component-background, @component-background);
+  background-color: @disabled-color;
   border: 0;
   border-radius: 100px;
   cursor: pointer;
@@ -39,7 +38,7 @@
   }
 
   &-checked {
-    background: @switch-color;
+    background-color: @switch-color;
   }
 
   &-loading,

diff --git a/components/table/style/index.less b/components/table/style/index.less
@@ -655,7 +655,7 @@
       position: absolute;
       top: 0;
       bottom: 0;
-      z-index: @zindex-table-fixed;
+      z-index: calc(@table-sticky-zindex + 1);
       width: 30px;
       transition: box-shadow 0.3s;
       content: '';

diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
@@ -207,17 +207,47 @@
       min-height: 0;
     }
 
-    display: flex;
+    position: relative;
     width: 100%;
-
-    &-animated {
-      transition: margin @animation-duration-slow;
-    }
   }
 
   &-tabpane {
-    flex: none;
-    width: 100%;
     outline: none;
+
+    &-hidden {
+      display: none;
+    }
+  }
+
+  // Motion
+  &-switch {
+    &-appear,
+    &-enter {
+      transition: none;
+
+      &-start {
+        opacity: 0;
+      }
+
+      &-active {
+        opacity: 1;
+        transition: opacity @animation-duration-slow;
+      }
+    }
+
+    &-leave {
+      position: absolute;
+      transition: none;
+      inset: 0;
+
+      &-start {
+        opacity: 1;
+      }
+
+      &-active {
+        opacity: 0;
+        transition: opacity @animation-duration-slow;
+      }
+    }
   }
 }
diff --git a/components/tabs/tab-body.component.ts b/components/tabs/tab-body.component.ts
@@ -4,7 +4,17 @@
  */
 
 import { NgIf, NgTemplateOutlet } from '@angular/common';
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
+
+import { tabSwitchMotion } from 'ng-zorro-antd/core/animation';
 
 @Component({
   selector: '[nz-tab-body]',
@@ -13,26 +23,39 @@ import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewEncapsulati
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
-    <ng-container *ngIf="active || forceRender">
+    <ng-container *ngIf="hasBeenActive || forceRender">
       <ng-template [ngTemplateOutlet]="content"></ng-template>
     </ng-container>
   `,
   host: {
     class: 'ant-tabs-tabpane',
     '[class.ant-tabs-tabpane-active]': 'active',
+    '[class.ant-tabs-tabpane-hidden]': 'animated ? null : !active',
     '[attr.tabindex]': 'active ? 0 : -1',
     '[attr.aria-hidden]': '!active',
-    '[style.visibility]': 'tabPaneAnimated ? active ? null : "hidden" : null',
-    '[style.height]': 'tabPaneAnimated ? active ? null : 0 : null',
-    '[style.overflow-y]': 'tabPaneAnimated ? active ? null : "none" : null',
-    '[style.display]': '!tabPaneAnimated ? active ? null : "none" : null'
+    '[style.overflow-y]': 'animated ? active ? null : "none" : null',
+    '[@tabSwitchMotion]': `active ? 'enter' : 'leave'`,
+    '[@.disabled]': `!animated`
   },
   imports: [NgIf, NgTemplateOutlet],
-  standalone: true
+  standalone: true,
+  animations: [tabSwitchMotion]
 })
-export class NzTabBodyComponent {
+export class NzTabBodyComponent implements OnChanges {
   @Input() content: TemplateRef<void> | null = null;
   @Input() active = false;
-  @Input() tabPaneAnimated = true;
+  @Input() animated = true;
   @Input() forceRender = false;
+
+  /**
+   * If this tab is ever activated, then the content should always be rendered.
+   */
+  protected hasBeenActive = false;
+
+  ngOnChanges(changes: SimpleChanges): void {
+    const { active } = changes;
+    if (active?.currentValue) {
+      this.hasBeenActive = true;
+    }
+  }
 }
diff --git a/components/tabs/tabset.component.spec.ts b/components/tabs/tabset.component.spec.ts
@@ -2,7 +2,7 @@ import { ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE } from '@angular/cdk/keycodes';
 import { OverlayContainer } from '@angular/cdk/overlay';
 import { CommonModule } from '@angular/common';
 import { Component, DebugElement, OnInit, QueryList, ViewChild, ViewChildren, ViewEncapsulation } from '@angular/core';
-import { ComponentFixture, fakeAsync, flush, inject, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, TestBed, fakeAsync, flush, inject, tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router, Routes } from '@angular/router';
@@ -812,7 +812,7 @@ xdescribe('NzTabSet router', () => {
   describe('basic', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
-        imports: [CommonModule, NzTabsModule, RouterTestingModule.withRoutes(routes)],
+        imports: [CommonModule, NoopAnimationsModule, NzTabsModule, RouterTestingModule.withRoutes(routes)],
         declarations: [RouterTabsTestComponent]
       }).compileComponents();
 
@@ -865,7 +865,7 @@ describe('NzTabSet router', () => {
   describe('basic', () => {
     beforeEach(() => {
       TestBed.configureTestingModule({
-        imports: [CommonModule, NzTabsModule, RouterTestingModule.withRoutes(routes)],
+        imports: [CommonModule, NoopAnimationsModule, NzTabsModule, RouterTestingModule.withRoutes(routes)],
         declarations: [RouterTabsTestComponent]
       }).compileComponents();
 

diff --git a/components/tabs/tabset.component.ts b/components/tabs/tabset.component.ts
@@ -128,8 +128,6 @@ let nextId = 0;
         [class.ant-tabs-content-left]="nzTabPosition === 'left'"
         [class.ant-tabs-content-right]="nzTabPosition === 'right'"
         [class.ant-tabs-content-animated]="tabPaneAnimated"
-        [style.margin-left]="getTabContentMarginLeft()"
-        [style.margin-right]="getTabContentMarginRight()"
       >
         <div
           role="tabpanel"
@@ -140,7 +138,7 @@ let nextId = 0;
           [active]="nzSelectedIndex === i && !nzHideAll"
           [content]="tab.content"
           [forceRender]="tab.nzForceRender"
-          [tabPaneAnimated]="tabPaneAnimated"
+          [animated]="tabPaneAnimated"
         ></div>
       </div>
     </div>
@@ -232,11 +230,7 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
   }
 
   get tabPaneAnimated(): boolean {
-    return (
-      this.position === 'horizontal' &&
-      this.line &&
-      (typeof this.nzAnimated === 'boolean' ? this.nzAnimated : this.nzAnimated.tabPane)
-    );
+    return typeof this.nzAnimated === 'boolean' ? this.nzAnimated : this.nzAnimated.tabPane;
   }
 
   // Pick up only direct descendants under ivy rendering engine
@@ -512,25 +506,4 @@ export class NzTabSetComponent implements OnInit, AfterContentChecked, OnDestroy
           })
         : false;
   }
-
-  private getTabContentMarginValue(): number {
-    return -(this.nzSelectedIndex || 0) * 100;
-  }
-
-  getTabContentMarginLeft(): string {
-    if (this.tabPaneAnimated) {
-      if (this.dir !== 'rtl') {
-        return `${this.getTabContentMarginValue()}%`;
-      }
-    }
-    return '';
-  }
-  getTabContentMarginRight(): string {
-    if (this.tabPaneAnimated) {
-      if (this.dir === 'rtl') {
-        return `${this.getTabContentMarginValue()}%`;
-      }
-    }
-    return '';
-  }
 }
diff --git a/components/tree/style/mixin.less b/components/tree/style/mixin.less
@@ -131,6 +131,12 @@
           opacity: 0.45;
         }
       }
+
+      &.@{custom-tree-node-prefix-cls}-disabled {
+        .@{custom-tree-prefix-cls}-draggable-icon {
+          visibility: hidden;
+        }
+      }
     }
   }