feat(module:menu): support nzMenuClassName for the submenu (#3176)

* feat(module:menu): support `nzMenuClassName` for the `[nz-submenu]`

* docs(module:menu): update docs

Author: hsuanxyz

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

@@ -53,6 +53,7 @@ use `title` to mark the title of submenu
 | ----- | ----------- | ---- | ------------- |
 | `[nzOpen]` | whether sub menu is open or not, double binding | `boolean` | `false` |
 | `[nzDisabled]` | whether sub menu is disabled or not | `boolean` | `false` |
+| `[nzMenuClassName]` | Custom the submenu container's class name | `string` | - |
 | `(nzOpenChange)` | nzOpen callback | `EventEmitter<boolean>` | - |
 
 ### [nz-menu-group]

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

@@ -54,6 +54,7 @@ subtitle: 导航菜单
 | --- | --- | --- | --- |
 | `[nzOpen]` | 是否展开，可双向绑定 | `boolean` | `false` |
 | `[nzDisabled]` | 是否禁用 | `boolean` | `false` |
+| `[nzMenuClassName]` | 自定义子菜单容器类名 | `string` | - |
 | `(nzOpenChange)` | 展开回调 | `EventEmitter<boolean>` | - |
 
 

components/menu/nz-menu.spec.ts

@@ -402,6 +402,25 @@ describe('menu', () => {
         fixture.detectChanges();
         expect(subs[1].placement).toBe('rightTop');
       });
+      it('should `nzMenuClassName` work', fakeAsync(() => {
+        fixture.detectChanges();
+        testComponent.open = true;
+        fixture.detectChanges();
+        expect((overlayContainerElement.querySelector('ul.submenu') as HTMLUListElement).classList).toContain(
+          'ant-menu-sub'
+        );
+      }));
+      it('should nested submenu `nzMenuClassName` work', () => {
+        testComponent.open = true;
+        fixture.detectChanges();
+        const subs = testComponent.subs.toArray();
+        subs[1].nzOpen = true;
+        subs[1].nzSubmenuService.open$.next(true);
+        fixture.detectChanges();
+        expect((overlayContainerElement.querySelector('ul.nested-submenu') as HTMLUListElement).classList).toContain(
+          'ant-menu-sub'
+        );
+      });
     });
     describe('inline submenu', () => {
       let fixture: ComponentFixture<NzTestMenuInlineComponent>;
@@ -423,6 +442,17 @@ describe('menu', () => {
         expect(ul.style.height).not.toBe('0px');
         expect(submenu.nativeElement.classList.contains('ant-menu-submenu-open')).toBe(true);
       }));
+      it('should `nzMenuClassName` work', fakeAsync(() => {
+        fixture.detectChanges();
+        expect(submenu.nativeElement.querySelector('.ant-menu-sub').className).toContain('submenu');
+      }));
+      it('should `nzMenuClassName` multi class names work', fakeAsync(() => {
+        fixture.detectChanges();
+        testComponent.submenuClassName = 'submenu submenu-1';
+        fixture.detectChanges();
+        expect(submenu.nativeElement.querySelector('.ant-menu-sub').className).toContain('submenu');
+        expect(submenu.nativeElement.querySelector('.ant-menu-sub').className).toContain('submenu-1');
+      }));
       it('should disabled work', fakeAsync(() => {
         testComponent.disabled = true;
         fixture.detectChanges();
@@ -448,7 +478,7 @@ describe('menu', () => {
   selector: 'nz-test-menu-horizontal',
   template: `
     <ul nz-menu [nzMode]="'horizontal'">
-      <li nz-submenu [nzOpen]="open" [style.width.px]="width">
+      <li nz-submenu nzMenuClassName="submenu" [nzOpen]="open" [style.width.px]="width">
         <span title><i nz-icon type="setting"></i> Navigation Three - Submenu</span>
         <ul>
           <li nz-menu-group>
@@ -463,7 +493,7 @@ describe('menu', () => {
             <ul>
               <li nz-menu-item>Option 3</li>
               <li nz-menu-item>Option 4</li>
-              <li nz-submenu [nzDisabled]="disabled">
+              <li nz-submenu nzMenuClassName="nested-submenu" [nzDisabled]="disabled">
                 <span title>Sub Menu</span>
                 <ul>
                   <li nz-menu-item #menuitem>Option 5</li>
@@ -497,7 +527,7 @@ export class NzTestMenuHorizontalComponent {
   selector: 'nz-test-menu-inline',
   template: `
     <ul nz-menu [nzMode]="'inline'" [nzInlineCollapsed]="collapse">
-      <li nz-submenu [nzDisabled]="disabled">
+      <li nz-submenu [nzMenuClassName]="submenuClassName" [nzDisabled]="disabled">
         <span title><i nz-icon type="mail"></i> Navigation One</span>
         <ul>
           <li nz-menu-item style="padding-left:0px;">Option 1</li>
@@ -511,6 +541,7 @@ export class NzTestMenuHorizontalComponent {
 export class NzTestMenuInlineComponent {
   disabled = false;
   collapse = false;
+  submenuClassName = 'submenu';
   @ViewChild(NzSubMenuComponent) subsmenu: NzSubMenuComponent;
   @ViewChild('menuitem', { read: ElementRef }) menuitem: ElementRef;
 }

components/menu/nz-submenu.component.html

@@ -12,7 +12,11 @@
   </span>
   <ng-template #notDropdownTpl><i class="ant-menu-submenu-arrow"></i></ng-template>
 </div>
-<ul *ngIf="nzMenuService.mode === 'inline'" [@collapseMotion]="expandState" [nzNoAnimation]="noAnimation?.nzNoAnimation" class="ant-menu ant-menu-inline ant-menu-sub">
+<ul *ngIf="nzMenuService.mode === 'inline'"
+  [@collapseMotion]="expandState"
+  [nzNoAnimation]="noAnimation?.nzNoAnimation"
+  [ngClass]="nzMenuClassName"
+  class="ant-menu ant-menu-inline ant-menu-sub">
   <ng-template [ngTemplateOutlet]="subMenuTemplate"></ng-template>
 </ul>
 <ng-template cdkConnectedOverlay
@@ -37,7 +41,8 @@
       [class.ant-dropdown-menu-vertical]="nzMenuService.isInDropDown"
       [class.ant-menu-vertical]="!nzMenuService.isInDropDown"
       [class.ant-dropdown-menu-sub]="nzMenuService.isInDropDown"
-      [class.ant-menu-sub]="!nzMenuService.isInDropDown">
+      [class.ant-menu-sub]="!nzMenuService.isInDropDown"
+      [ngClass]="nzMenuClassName">
       <ng-template [ngTemplateOutlet]="subMenuTemplate"></ng-template>
     </ul>
   </div>

components/menu/nz-submenu.component.ts

@@ -61,22 +61,26 @@ import { NzSubmenuService } from './nz-submenu.service';
   ]
 })
 export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit, OnChanges {
+  @Input() nzMenuClassName: string;
+  @Input() nzPaddingLeft: number;
+  @Input() @InputBoolean() nzOpen = false;
+  @Input() @InputBoolean() nzDisabled = false;
+  @Output() readonly nzOpenChange: EventEmitter<boolean> = new EventEmitter();
+
+  @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay;
+  @ViewChild(CdkOverlayOrigin, { read: ElementRef }) cdkOverlayOrigin: ElementRef;
+  @ContentChildren(NzSubMenuComponent, { descendants: true })
+  listOfNzSubMenuComponent: QueryList<NzSubMenuComponent>;
+  @ContentChildren(NzMenuItemDirective, { descendants: true })
+  listOfNzMenuItemDirective: QueryList<NzMenuItemDirective>;
+
   placement = 'rightTop';
   triggerWidth: number;
   expandState = 'collapsed';
   overlayPositions = [...DEFAULT_SUBMENU_POSITIONS];
+
   private destroy$ = new Subject<void>();
   private isChildMenuSelected = false;
-  @ContentChildren(NzSubMenuComponent, { descendants: true }) listOfNzSubMenuComponent: QueryList<NzSubMenuComponent>;
-  @ContentChildren(NzMenuItemDirective, { descendants: true }) listOfNzMenuItemDirective: QueryList<
-    NzMenuItemDirective
-  >;
-  @ViewChild(CdkConnectedOverlay) cdkConnectedOverlay: CdkConnectedOverlay;
-  @ViewChild(CdkOverlayOrigin, { read: ElementRef }) cdkOverlayOrigin: ElementRef;
-  @Input() nzPaddingLeft: number;
-  @Input() @InputBoolean() nzOpen = false;
-  @Input() @InputBoolean() nzDisabled = false;
-  @Output() readonly nzOpenChange: EventEmitter<boolean> = new EventEmitter();
 
   setOpenState(open: boolean): void {
     this.nzSubmenuService.setOpenState(open);