feat: allow title text to be overridden using input prop (#2833)

Signed-off-by: Akshat Patel <[email protected]>
carbon-design-system · Mar 28, 2024 · d1a4ee7 · d1a4ee7
1 parent 7eb80c7
commit d1a4ee7
Showing 1 changed file with 13 additions and 7 deletions.
diff --git a/src/ui-shell/header/hamburger.component.ts b/src/ui-shell/header/hamburger.component.ts
@@ -17,12 +17,8 @@ import { I18n } from "carbon-components-angular/i18n";
 			(click)="doClick()"
 			[ngClass]="{'cds--header__action--active': active}"
 			class="cds--header__menu-trigger cds--header__action cds--header__menu-toggle"
-			[attr.aria-label]="active
-				? (i18n.get('UI_SHELL.HEADER.CLOSE_MENU') | async)
-				: (i18n.get('UI_SHELL.HEADER.OPEN_MENU') | async)"
-			[attr.title]="active
-				? (i18n.get('UI_SHELL.HEADER.CLOSE_MENU') | async)
-				: (i18n.get('UI_SHELL.HEADER.OPEN_MENU') | async)">
+			[attr.aria-label]="active ? activeTitle : inactiveTitle"
+			[attr.title]="active ? activeTitle : inactiveTitle">
 			<svg *ngIf="!active" cdsIcon="menu" size="20"></svg>
 			<svg *ngIf="active" cdsIcon="close" size="20"></svg>
 		</button>
@@ -34,12 +30,22 @@ export class Hamburger {
 	 */
 	@Input() active = false;
 
+	/**
+	 * Set the title text when the hamburger is active
+	 */
+	@Input() activeTitle = this.i18n.get().UI_SHELL.HEADER.CLOSE_MENU;
+
+	/**
+	 * Set the title text when the hamburger is inactive
+	 */
+	@Input() inactiveTitle = this.i18n.get().UI_SHELL.HEADER.OPEN_MENU;
+
 	/**
 	 * `EventEmitter` to notify parent components of menu click events.
 	 */
 	@Output() selected: EventEmitter<Object> = new EventEmitter<Object>();
 
-	constructor(public i18n: I18n) { }
+	constructor(public i18n: I18n) {}
 
 	/**
 	 * Emit the Hamburger click event upwards.