From 9473f7681bad3c6157b61bd4cec73ae79d2629d1 Mon Sep 17 00:00:00 2001 From: tomasz hanaj <12088991+tomaszhanaj@users.noreply.github.com> Date: Fri, 26 Jan 2024 11:21:16 +0100 Subject: [PATCH] [AAE-15298] added tokens to HeaderLayout (#9074) * [AAE-15298] added tokens to HeaderLayout * [AAE-15298] removed obsolete class * AAE-15298: Code improvement * AAE-15298: Updated unit tests * AAE-15298: Removed duplicate keys --------- Co-authored-by: Ehsan Rezaei --- .../layout/components/header/header.component.html | 11 ++++++----- .../layout/components/header/header.component.scss | 13 +++++++++++++ .../components/header/header.component.spec.ts | 4 ++-- lib/core/src/lib/styles/_components-variables.scss | 7 ++++++- lib/core/src/lib/styles/_reference-variables.scss | 2 ++ 5 files changed, 29 insertions(+), 8 deletions(-) diff --git a/lib/core/src/lib/layout/components/header/header.component.html b/lib/core/src/lib/layout/components/header/header.component.html index 6e2fc7a4b2..b0da719337 100644 --- a/lib/core/src/lib/layout/components/header/header.component.html +++ b/lib/core/src/lib/layout/components/header/header.component.html @@ -6,7 +6,7 @@ *ngIf="showSidenavToggle && position === 'start'" id="adf-sidebar-toggle-start" data-automation-id="adf-menu-icon" - class="mat-icon-button adf-menu-icon" + class="adf-menu-icon adf-header-icon-button" mat-icon-button (click)="toggleMenu()" [attr.aria-expanded]="expandedSidenav" @@ -14,7 +14,8 @@ + aria-hidden="true">{{ toggleIcon }} + @@ -40,15 +41,15 @@ *ngIf="showSidenavToggle && position === 'end'" id="adf-sidebar-toggle-end" data-automation-id="adf-menu-icon" - class="mat-icon-button adf-menu-icon" + class="adf-menu-icon adf-header-icon-button" mat-icon-button (click)="toggleMenu()" [attr.aria-expanded]="expandedSidenav" [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate"> - > + aria-hidden="true">{{ toggleIcon }} + diff --git a/lib/core/src/lib/layout/components/header/header.component.scss b/lib/core/src/lib/layout/components/header/header.component.scss index 76a13cceca..e31e536324 100644 --- a/lib/core/src/lib/layout/components/header/header.component.scss +++ b/lib/core/src/lib/layout/components/header/header.component.scss @@ -58,6 +58,19 @@ adf-layout-header .mat-toolbar-single-row { display: none; } } + + .adf-header-icon-button { + color: var(--adf-header-icon-button-default-color); + border-radius: var(--adf-header-icon-button-default-border-radius); + + &:hover { + color: var(--adf-header-icon-button-hover-color); + } + + &:active { + color: var(--adf-header-icon-button-pressed-color); + } + } } [dir='rtl'] adf-layout-header .mat-toolbar-single-row { diff --git a/lib/core/src/lib/layout/components/header/header.component.spec.ts b/lib/core/src/lib/layout/components/header/header.component.spec.ts index 40d86c4138..579b963940 100644 --- a/lib/core/src/lib/layout/components/header/header.component.spec.ts +++ b/lib/core/src/lib/layout/components/header/header.component.spec.ts @@ -240,7 +240,7 @@ describe('HeaderLayoutComponent', () => { const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon')); - expect(toggleIcon.nativeElement.textContent).toBe('menu'); + expect(toggleIcon.nativeElement.textContent.trim()).toBe('menu'); }); it('should display the correct toggle icon', () => { @@ -250,7 +250,7 @@ describe('HeaderLayoutComponent', () => { const toggleIcon = fixture.debugElement.query(By.css('.adf-menu-icon')); - expect(toggleIcon.nativeElement.textContent).toBe('apps'); + expect(toggleIcon.nativeElement.textContent.trim()).toBe('apps'); }); }); diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss index b62ed8928e..8b6d39f044 100644 --- a/lib/core/src/lib/styles/_components-variables.scss +++ b/lib/core/src/lib/styles/_components-variables.scss @@ -90,7 +90,12 @@ --adf-task-assignment-filter-label-default-color: mat.get-color-from-palette($foreground, secondary-text), --adf-task-assignment-filter-label-focus-color: mat.get-color-from-palette($primary), - --adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card) + --adf-process-header-cloud-card-background: mat.get-color-from-palette($background, card), + --adf-header-icon-button-default-color: $adf-ref-header-icon-color, + --adf-header-icon-button-default-border-radius: $adf-ref-header-icon-border-radius, + --adf-header-icon-button-hover-color: $adf-ref-header-icon-color, + --adf-header-icon-button-pressed-color: $adf-ref-header-icon-color, + --adf-header-icon-button-disabled-color: $adf-ref-header-icon-color, ); // propagates SCSS variables into the CSS variables scope diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss index 338bb3b93a..5b3acd553e 100644 --- a/lib/core/src/lib/styles/_reference-variables.scss +++ b/lib/core/src/lib/styles/_reference-variables.scss @@ -23,3 +23,5 @@ $adf-ref-metadata-action-button-clear-color: rgba(33, 35, 40, 0.698); $adf-ref-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7); $adf-ref-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24); $adf-ref-metadata-property-panel-title-color: rgb(33, 33, 33); +$adf-ref-header-icon-color: inherit; +$adf-ref-header-icon-border-radius: 50%;