feat(context-menu): selection menu styling (#1176)

allianz · Apr 30, 2024 · d03bec4 · d03bec4
1 parent 47552d6
commit d03bec4
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 6 deletions.
diff --git a/...entation/examples/context-menu/context-menu-selection/context-menu-selection-example.html b/...entation/examples/context-menu/context-menu-selection/context-menu-selection-example.html
@@ -2,9 +2,12 @@
     <nx-context-menu-header> Language </nx-context-menu-header>
     <button
         nxContextMenuItem
+        selectable
         type="button"
         *ngFor="let o of options"
         (click)="selectedLanguage = o.value"
+        role="menuitemradio"
+        [attr.aria-checked]="selectedLanguage === o.value ? 'true' : 'false'"
     >
         <nx-icon
             aria-hidden="true"

diff --git a/projects/ng-aquila/src/context-menu/context-menu-item.component.scss b/projects/ng-aquila/src/context-menu/context-menu-item.component.scss
@@ -63,16 +63,21 @@
     }
 
     .nx-context-menu-item__content-wrapper ::ng-deep > nx-icon:not(.nx-context-menu-item__expand) {
+        margin-right: nx-spacer(2xs);
         font-size: v(context-menu-item-icon-size);
-        position: absolute;
 
-        [dir='ltr'] & {
-            margin-right: nx-spacer(2xs);
-            left: 8px;
+        [dir='rtl'] & {
+            margin-right: initial;
+            margin-left: nx-spacer(2xs);
         }
+    }
+
+    &.is-selectable .nx-context-menu-item__content-wrapper ::ng-deep > nx-icon:not(.nx-context-menu-item__expand) {
+        position: absolute;
+        left: 8px;
 
         [dir='rtl'] & {
-            margin-left: nx-spacer(2xs);
+            left: initial;
             right: 8px;
         }
     }

diff --git a/projects/ng-aquila/src/context-menu/context-menu-item.component.ts b/projects/ng-aquila/src/context-menu/context-menu-item.component.ts
@@ -3,6 +3,7 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 import { DOCUMENT } from '@angular/common';
 import {
     AfterViewInit,
+    booleanAttribute,
     ChangeDetectionStrategy,
     ChangeDetectorRef,
     Component,
@@ -32,6 +33,7 @@ import { Subject } from 'rxjs';
         '[attr.disabled]': 'disabled || null',
         '(mouseenter)': '_handleMouseEnter()',
         '(click)': '_checkDisabled($event)',
+        '[class.is-selectable]': '_selectable',
     },
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
@@ -46,6 +48,15 @@ export class NxContextMenuItemComponent implements OnDestroy, AfterViewInit {
     /** Stream that emits when the context menu item is hovered. */
     readonly _hovered = new Subject<NxContextMenuItemComponent>();
 
+    /** Whether the context menu item is selectable */
+    @Input({ transform: booleanAttribute }) set selectable(value) {
+        this._selectable = value;
+    }
+    get selectable(): boolean {
+        return this._selectable;
+    }
+    private _selectable = false;
+
     /** Whether the context menu item is disabled. */
     @Input() set disabled(value: BooleanInput) {
         this._disabled = coerceBooleanProperty(value);

diff --git a/projects/ng-aquila/src/context-menu/context-menu.md b/projects/ng-aquila/src/context-menu/context-menu.md
@@ -98,7 +98,7 @@ Alternatively, the `NX_CONTEXT_MENU_SCROLL_STRATEGY` injection token can be prov
 
 ### Selection Menu
 
-Selection menu stores its state. It can easily be built on top of Context Menu, simply copy the source code of the examples below and modify as needed.
+Selection menu stores its state. It can easily be built on top of Context Menu, simply copy the source code of the examples below and modify as needed. Use the `selectable` option on the menu items for the correct styling.
 
 #### Single selection
 

diff --git a/projects/ng-aquila/src/context-menu/context-menu.spec.ts b/projects/ng-aquila/src/context-menu/context-menu.spec.ts
@@ -1417,6 +1417,20 @@ describe('nxContextMenu', () => {
             });
         });
     });
+
+    describe('selectable menu item', () => {
+        let fixture: ComponentFixture<SelectionMenu>;
+
+        beforeEach(() => {
+            fixture = createComponent(SelectionMenu);
+            fixture.componentInstance.trigger.openContextMenu();
+        });
+
+        it('menu item with selectable should have is-selectable class', fakeAsync(() => {
+            const menuItem = overlayContainerElement.querySelector('[nxContextMenuItem]') as HTMLElement;
+            expect(menuItem!).toHaveClass('is-selectable');
+        }));
+    });
 });
 
 @Component({
@@ -1443,6 +1457,24 @@ class SimpleMenu {
     closeCallback = jasmine.createSpy('menu closed callback');
 }
 
+@Component({
+    template: `
+        <button nxButton="tertiary small" [nxContextMenuTriggerFor]="menu">Toggle menu</button>
+        <nx-context-menu #menu="nxContextMenu" [class]="panelClass" (closed)="closeCallback($event)">
+            <button nxContextMenuItem selectable>Item</button>
+            <button nxContextMenuItem selectable>Item 2</button>
+            <button nxContextMenuItem selectable>
+                <nx-icon name="check"></nx-icon>
+                Item with an icon
+            </button>
+        </nx-context-menu>
+    `,
+})
+class SelectionMenu {
+    @ViewChild(NxContextMenuTriggerDirective) trigger!: NxContextMenuTriggerDirective;
+    @ViewChildren(NxContextMenuItemComponent) items!: QueryList<NxContextMenuItemComponent>;
+}
+
 @Component({
     template: `
         <button nxButton="tertiary small" [nxContextMenuTriggerFor]="root" #rootTrigger="nxContextMenuTrigger" #rootTriggerEl #rootTriggerButton>