Merge pull request #2502 from Akshat55/context-menu-open

fix: Use the updated classes with context menu

Author: Akshat55

package-lock.json

@@ -80,8 +80,8 @@
     "@angular/platform-browser-dynamic": "13.3.12",
     "@angular/router": "13.3.12",
     "@babel/core": "7.9.6",
-    "@carbon/styles": "1.20.0",
-    "@carbon/themes": "11.15.0",
+    "@carbon/styles": "1.25.0",
+    "@carbon/themes": "11.17.0",
     "@commitlint/cli": "17.0.3",
     "@commitlint/config-conventional": "17.0.3",
     "@compodoc/compodoc": "1.1.19",

package.json

@@ -2,15 +2,9 @@ import { Component, HostBinding } from "@angular/core";
 
 @Component({
 	selector: "cds-context-menu-divider, ibm-context-menu-divider",
-	template: "",
-	styles: [`
-		:host {
-			display: list-item;
-			list-style: none;
-		}
-	`]
+	template: ""
 })
 export class ContextMenuDividerComponent {
-	@HostBinding("class.cds--menu-divider") dividerClass = true;
+	@HostBinding("class.cds--menu-item-divider") dividerClass = true;
 	@HostBinding("attr.role") role = "separator";
 }

src/context-menu/context-menu-divider.component.ts

@@ -17,16 +17,12 @@ import { ContextMenuSelectionService } from "./context-menu-selection.service";
 	template: `
 		<ng-content></ng-content>
 	`,
-	styles: [`
-		:host {
-			display: list-item;
-			list-style: none;
-		}
-	`],
 	providers: [ContextMenuSelectionService]
 })
 export class ContextMenuGroupComponent implements OnInit, OnChanges, OnDestroy {
 	@HostBinding("attr.role") role = "group";
+	@HostBinding("class.cds--menu-item-radio-group") get radioGroup() {  return this.type === "radio"; }
+	@HostBinding("class.cds--menu-item-group") get group() { return this.type === "checkbox"; }
 
 	@HostBinding("attr.aria-label") @Input() label = null;
 	@Input() value: any[] = [];

src/context-menu/context-menu-group.component.ts

@@ -19,28 +19,25 @@ import { ContextMenuComponent } from "./context-menu.component";
 @Component({
 	selector: "cds-context-menu-item, ibm-context-menu-item",
 	template: `
-		<div class="cds--context-menu-option__content cds--menu-option__content">
-			<div class="cds--context-menu-option__icon cds--menu-option__icon">
-				<svg *ngIf="selectable && checked" cdsIcon="checkmark" size="16"></svg>
-				<svg *ngIf="!selectable && icon" [cdsIcon]="icon" size="16"></svg>
-			</div>
-			<span class="cds--context-menu-option__label cds--menu-option__label" [title]="label">{{label}}</span>
-			<div class="cds--context-menu-option__info cds--menu-option__info">
-				{{info}}
-				<svg *ngIf="hasChildren" cdsIcon="caret--right" size="16"></svg>
-			</div>
+		<div class="cds--menu-item__icon">
+			<svg *ngIf="selectable && checked" cdsIcon="checkmark" size="16"></svg>
+			<svg *ngIf="!selectable && icon" [cdsIcon]="icon" size="16"></svg>
+		</div>
+		<div class="cds--menu-item__label" [title]="label">{{label}}</div>
+		<div class="cds--menu-item__shortcut">
+			<ng-container *ngIf="info">{{info}}</ng-container>
+			<svg *ngIf="hasChildren" cdsIcon="caret--right" size="16"></svg>
 		</div>
 		<ng-content></ng-content>
 	`,
 	styles: [`
 		:host {
-			display: list-item;
-			list-style: none;
+			grid-template-columns: 1rem 1fr max-content;
 		}
 	`]
 })
 export class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDestroy {
-	@HostBinding("class.cds--menu-option") optionClass = true;
+	@HostBinding("class.cds--menu-item") optionClass = true;
 	@HostBinding("attr.role") role = "menuitem";
 	@HostBinding("attr.tabindex") tabindex = -1;
 	@HostBinding("attr.aria-haspopup") ariaHasPopup = null;
@@ -106,7 +103,6 @@ export class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDes
 			this.hasChildren = true;
 			this.ariaHasPopup = true;
 			this.ariaExpanded = false;
-			this.childContextMenu.root = false;
 		}
 	}
 
@@ -144,7 +140,7 @@ export class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDes
 		if (this.childContextMenu) {
 			this.childContextMenu.open = true;
 			this.ariaExpanded = true;
-			const dimensions = this.getDimensions();
+			const dimensions = this.elementRef.nativeElement.getBoundingClientRect();
 			this.childContextMenu.position.left = dimensions.left + dimensions.width;
 			// subtract 4px to account for margins
 			this.childContextMenu.position.top = dimensions.top - 4;
@@ -185,12 +181,6 @@ export class ContextMenuItemComponent implements OnInit, AfterContentInit, OnDes
 		this.elementRef.nativeElement.focus();
 	}
 
-	getDimensions() {
-		const element: HTMLElement = this.elementRef.nativeElement
-			.querySelector(".cds--context-menu-option__content, .cds--menu-option__content");
-		return element.getBoundingClientRect();
-	}
-
 	ngOnDestroy() {
 		this.subscriptions.unsubscribe();
 	}