feat(module:modal): add nzCentered for modal (#6333)

* feat(module:modal): add nzCentered for modal

* docs(module:modal): fix nzCentered name

* docs(module:modal): add nzCentered api

* feat(module:modal): add nzCentered for confirm modal (#6327)

components/modal/demo/position.md

@@ -7,12 +7,12 @@ title:
 
 ## zh-CN
 
-您可以直接使用 `nzStyle.top` 或配合其他样式来设置对话框位置。
+使用 `nzCentered` 或类似 `style.top` 的样式来设置对话框位置。
 
 > **注意** 由于Angular的样式隔离，若在Component中没有加入`encapsulation: ViewEncapsulation.None`，则您可能需要在自定义样式内采用`::ng-deep`来覆盖NgZorro的样式
 
 ## en-US
 
-You can use `nzStyle.top` or other styles to set position of modal dialog.
+You can use `nzCentered`,`style.top` or other styles to set position of modal dialog.
 
 > **NOTE** Due to Angular's style isolation, you may need to override the NgZorro style with `:: ng-deep` within a custom style if `encapsulation: ViewEncapsulation.None` is not included in the Component

components/modal/demo/position.ts

@@ -23,9 +23,9 @@ import { Component } from '@angular/core';
 
     <button nz-button nzType="primary" (click)="showModalMiddle()">Vertically centered modal dialog</button>
     <nz-modal
-      nzWrapClassName="vertical-center-modal"
       [(nzVisible)]="isVisibleMiddle"
       nzTitle="Vertically centered modal dialog"
+      nzCentered
       (nzOnCancel)="handleCancelMiddle()"
       (nzOnOk)="handleOkMiddle()"
     >
@@ -35,20 +35,7 @@ import { Component } from '@angular/core';
         <p>some contents...</p>
       </ng-container>
     </nz-modal>
-  `,
-  styles: [
-    `
-      ::ng-deep .vertical-center-modal {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-
-      ::ng-deep .vertical-center-modal .ant-modal {
-        top: 0;
-      }
-    `
-  ]
+  `
 })
 export class NzDemoModalPositionComponent {
   isVisibleTop = false;

components/modal/doc/index.en-US.md

@@ -33,6 +33,7 @@ The dialog is currently divided into 2 modes, `normal mode` and `confirm box mod
 | nzAfterClose      | Specify a EventEmitter that will be emitted when modal is closed completely (Can listen for parameters passed in the close/destroy method) | EventEmitter | - |
 | nzBodyStyle       | Body style for modal body element. Such as height, padding etc. | `object` | - |
 | nzCancelText      | Text of the Cancel button. <i>Set to null to show no cancel button (this value is invalid if the nzFooter parameter is used in normal mode)</i> | `string` | Cancel |
+| nzCentered        | Centered Modal | `boolean` | `false` |
 | nzClosable        | Whether a close (x) button is visible on top right of the modal dialog or not. <i>Invalid value in confirm box mode (default will be hidden)</i> | `boolean` | `true` |
 | nzOkLoading       | Whether to apply loading visual effect for OK button or not | `boolean` | `false` |
 | nzCancelLoading   | Whether to apply loading visual effect for Cancel button or not | `boolean` | `false` |

components/modal/doc/index.zh-CN.md

@@ -34,6 +34,7 @@ import { NzModalModule } from 'ng-zorro-antd/modal';
 | nzAfterClose      | Modal 完全关闭后的回调，可监听close/destroy方法传入的参数 | EventEmitter | - |
 | nzBodyStyle       | Modal body 样式 | `object` | - |
 | nzCancelText      | 取消按钮文字。<i>设为 null 表示不显示取消按钮（若在普通模式下使用了 nzFooter 参数，则该值无效）</i> | `string` | 取消 |
+| nzCentered        | 垂直居中展示 Modal | `boolean` | `false` |
 | nzClosable        | 是否显示右上角的关闭按钮。<i>确认框模式下该值无效（默认会被隐藏）</i> | `boolean` | `true` |
 | nzOkLoading       | 确定按钮 loading | `boolean` | `false` |
 | nzCancelLoading   | 取消按钮 loading | `boolean` | `false` |

components/modal/modal-confirm-container.component.ts

@@ -97,6 +97,7 @@ import { ModalOptions } from './modal-types';
     role: 'dialog',
     '[class]': 'config.nzWrapClassName ? "ant-modal-wrap " + config.nzWrapClassName : "ant-modal-wrap"',
     '[class.ant-modal-wrap-rtl]': `dir === 'rtl'`,
+    '[class.ant-modal-centered]': 'config.nzCentered',
     '[style.zIndex]': 'config.nzZIndex',
     '[@.disabled]': 'config.nzNoAnimation',
     '[@modalContainer]': 'state',

components/modal/modal-container.component.ts

@@ -53,6 +53,7 @@ import { ModalOptions } from './modal-types';
     role: 'dialog',
     '[class]': 'config.nzWrapClassName ? "ant-modal-wrap " + config.nzWrapClassName : "ant-modal-wrap"',
     '[class.ant-modal-wrap-rtl]': `dir === 'rtl'`,
+    '[class.ant-modal-centered]': 'config.nzCentered',
     '[style.zIndex]': 'config.nzZIndex',
     '[@.disabled]': 'config.nzNoAnimation',
     '[@modalContainer]': 'state',

components/modal/modal-types.ts

@@ -21,6 +21,7 @@ export interface StyleObjectLike {
 const noopFun = () => void 0;
 
 export class ModalOptions<T = NzSafeAny, R = NzSafeAny> {
+  nzCentered?: boolean = false;
   nzClosable?: boolean = true;
   nzOkLoading?: boolean = false;
   nzOkDisabled?: boolean = false;

components/modal/modal.component.ts

@@ -55,6 +55,7 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
   static ngAcceptInputType_nzKeyboard: BooleanInput;
   static ngAcceptInputType_nzNoAnimation: BooleanInput;
   static ngAcceptInputType_nzOkDanger: BooleanInput;
+  static ngAcceptInputType_nzCentered: BooleanInput;
 
   @Input() @InputBoolean() nzMask?: boolean;
   @Input() @InputBoolean() nzMaskClosable?: boolean;
@@ -67,6 +68,7 @@ export class NzModalComponent<T = NzSafeAny, R = NzSafeAny> implements OnChanges
   @Input() @InputBoolean() nzCancelLoading: boolean = false;
   @Input() @InputBoolean() nzKeyboard: boolean = true;
   @Input() @InputBoolean() nzNoAnimation = false;
+  @Input() @InputBoolean() nzCentered = false;
   @Input() nzContent?: string | TemplateRef<{}> | Type<T>;
   @Input() nzComponentParams?: T;
   @Input() nzFooter?: string | TemplateRef<{}> | Array<ModalButtonOptions<T>> | null;

components/modal/modal.spec.ts

@@ -588,6 +588,22 @@ describe('NzModal', () => {
     flush();
   }));
 
+  it('should set the nzCentered of the modal', fakeAsync(() => {
+    const modalRef = modalService.create({
+      nzCentered: true,
+      nzContent: TestWithModalContentComponent
+    });
+    fixture.detectChanges();
+
+    const modal = overlayContainerElement.querySelector('nz-modal-container') as HTMLElement;
+
+    expect(modal.classList).toContain('ant-modal-centered');
+
+    modalRef.close();
+    fixture.detectChanges();
+    flush();
+  }));
+
   it('should set the nzClassName of the modal', fakeAsync(() => {
     const modalRef = modalService.create({
       nzContent: TestWithModalContentComponent,
@@ -1211,6 +1227,7 @@ describe('NzModal', () => {
       fixture.detectChanges();
       expect((overlayContainerElement.querySelector('.ant-modal') as HTMLDivElement).style.width).toBe('416px');
       expect(modalRef.getConfig().nzMaskClosable).toBe(false);
+      expect(modalRef.getConfig().nzCentered).toBe(false);
       expect(overlayContainerElement.querySelectorAll('nz-modal-confirm-container').length).toBe(1);
       expect(overlayContainerElement.querySelector('.ant-modal-confirm-title')!.textContent).toBe('Test Title');
       expect(overlayContainerElement.querySelector('.ant-modal-confirm-content')!.textContent).toBe('Test Content');
@@ -1309,6 +1326,22 @@ describe('NzModal', () => {
       flush();
     }));
 
+    it('should set nzCentered', fakeAsync(() => {
+      const modalRef = modalService.confirm({
+        nzCentered: true
+      });
+      fixture.detectChanges();
+
+      expect(modalRef.getConfig().nzCentered).toBe(true);
+
+      const modal = overlayContainerElement.querySelector('nz-modal-confirm-container') as HTMLElement;
+      expect(modal.classList).toContain('ant-modal-centered');
+
+      modalRef.close();
+      fixture.detectChanges();
+      flush();
+    }));
+
     it('should open confirm with component', () => {
       const modalRef = modalService.confirm({
         nzContent: TestWithModalContentComponent,

components/modal/utils.ts

@@ -25,6 +25,7 @@ export function setContentInstanceParams<T>(instance: T, params: Partial<T> | un
 
 export function getConfigFromComponent(component: NzModalComponent): ModalOptions {
   const {
+    nzCentered,
     nzMask,
     nzMaskClosable,
     nzClosable,
@@ -60,6 +61,7 @@ export function getConfigFromComponent(component: NzModalComponent): ModalOption
     nzAutofocus
   } = component;
   return {
+    nzCentered,
     nzMask,
     nzMaskClosable,
     nzClosable,