From cfdd3f9c506e79dd69e365b999d845934333bc75 Mon Sep 17 00:00:00 2001 From: Michal Kinas <113341662+MichalKinas@users.noreply.github.com> Date: Fri, 29 May 2026 13:16:03 +0200 Subject: [PATCH] MD3 migration fixes (#11919) * [ACS-10449] Viewer MD3 fixes * [ACS-10449] Autocomplete chip MD3 fix * [ACS-10449] Tabs MD3 fixes * [ACS-10449] Fix badge sizing * [ACS-10449] Login page error fix * [ACS-10449] Fix overlapping options on text next to selectbox * [ACS-10449] ADF style fixes refactoring I * [ACS-10449] Breadcrumb and search filter container fixes * [ACS-10449] User column form field fixes * [ACS-10449] adapt scroll into view to changes in MD3 * [ACS-10449] Properties panel opened by default * [ACS-10449] Tag creator fixes * [ACS-10449] fix metadata property label color * [ACS-10449] Categories panel fixes * [ACS-10449] Current aspect on changes fix * [ACS-10449] Make notification history badge size configurable * [ACS-10449] Make notification history badge size configurable via config file --------- Co-authored-by: Aleksander Sklorz Co-authored-by: g-jaskowski --- .../notification-history.component.md | 15 +++++++++ .../aspect-list/aspect-list.component.scss | 1 - .../lib/breadcrumb/breadcrumb.component.scss | 2 +- .../dropdown-breadcrumb.component.scss | 1 + .../categories-management.component.scss | 1 + .../categories-management.component.ts | 2 +- .../content-metadata.component.html | 2 +- .../content-metadata.component.scss | 5 +++ .../content-metadata.component.ts | 4 +-- .../add-permission-dialog.component.scss | 4 --- .../add-permission-panel.component.scss | 2 +- .../user-role-column.component.scss | 6 +--- ...rch-chip-autocomplete-input.component.scss | 4 +-- .../search-filter-container.component.scss | 1 + .../tags-creator/tags-creator.component.scss | 5 +-- .../tags-creator/tags-creator.component.ts | 2 +- .../card-view-textitem.component.scss | 4 --- .../card-view/card-view.component.scss | 1 - .../info-drawer-layout.component.scss | 6 ---- .../components/login/login.component.scss | 1 - .../notification-history.component.html | 2 +- .../notification-history.component.spec.ts | 32 +++++++++++++++++++ .../notification-history.component.ts | 10 +++++- .../src/lib/toolbar/toolbar.component.scss | 2 -- 24 files changed, 78 insertions(+), 37 deletions(-) diff --git a/docs/core/components/notification-history.component.md b/docs/core/components/notification-history.component.md index 5a4f4a694c..ff66bea7b4 100644 --- a/docs/core/components/notification-history.component.md +++ b/docs/core/components/notification-history.component.md @@ -27,6 +27,21 @@ The main purpose of the [Notification history component](../../core/components/n | maxNotifications | `number` | 5 | Maximum number of notifications to display. The rest will remain hidden until load more is clicked | | menuPositionX | [`MenuPositionX`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "after" | Custom choice for opening the menu at the bottom. Can be `before` or `after`. | | menuPositionY | [`MenuPositionY`](https://github.com/angular/components/blob/master/src/material/menu/menu-positions.ts) | "below" | Custom choice for opening the menu at the bottom. Can be `above` or `below`. | +| badgeSize | [`MatBadgeSize`](https://v19.material.angular.dev/components/badge/api#MatBadgeSize) | `small` | Badge size. Can be `small`, `medium` or `large`. | + +### App config + +You can set a default badge size in `app.config.json`: + +```json +{ + "notification": { + "badgeSize": "medium" + } +} +``` + +The `notification.badgeSize` value is applied on init when the `badgeSize` input is not set explicitly on the component. ## See also diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss index 319649375b..a810add76a 100644 --- a/lib/content-services/src/lib/aspect-list/aspect-list.component.scss +++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.scss @@ -81,7 +81,6 @@ $dialog-list-height: calc(65vh - ($dialog-title-height + $dialog-information-hei .adf-aspect-property-table-column-title, .adf-aspect-property-table-column-data-type { font: var(--mat-sys-body-small); - color: var(--mat-sys-on-secondary-container); } .adf-aspect-property-table-column { diff --git a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss index 0d4bd3eae5..6e741c0511 100644 --- a/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss +++ b/lib/content-services/src/lib/breadcrumb/breadcrumb.component.scss @@ -67,12 +67,12 @@ padding-right: 2px; overflow: hidden; display: flex; + align-items: center; font: var(--mat-sys-body-medium); text-align: left; color: var(--mat-sys-on-secondary-container); flex: 0 1 auto; min-width: 35px; - margin-top: auto; text-overflow: ellipsis; &.adf-active { diff --git a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss index 6de91f8c66..98c64e21b6 100644 --- a/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss +++ b/lib/content-services/src/lib/breadcrumb/dropdown-breadcrumb.component.scss @@ -96,5 +96,6 @@ $dropdown-horizontal-offset: 30px; } #{ms.$cdk-overlay-pane}:has(> .adf-breadcrumb-dropdown-panel) { + margin-top: 12px; min-width: fit-content; } diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss index d18ffc0305..3ffc1de880 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.scss +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.scss @@ -11,6 +11,7 @@ justify-content: space-between; align-items: center; word-break: break-word; + font: var(--mat-sys-body-medium); } .adf-categories-padded { diff --git a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts index 520d97dae4..eca012d647 100644 --- a/lib/content-services/src/lib/category/categories-management/categories-management.component.ts +++ b/lib/content-services/src/lib/category/categories-management/categories-management.component.ts @@ -124,7 +124,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy { this._categoryNameControlVisible = categoryNameControlVisible; if (categoryNameControlVisible) { setTimeout(() => { - this.categoryNameInputElement.nativeElement.scrollIntoView(); + this.categoryNameInputElement.nativeElement.scrollIntoView({ block: 'nearest' }); }); this._existingCategoriesPanelVisible = true; } else { diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html index 2984ba8c47..9c6a39e99a 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html @@ -98,7 +98,7 @@ -
diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss index 89d9de697c..fb21edde88 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss @@ -18,6 +18,11 @@ $panel-properties-height: 56px !default; height: $panel-properties-height; } + .adf-metadata-categories-header { + display: block; + margin-top: 16px; + } + .adf-edit-icon-buttons { color: var(--mat-sys-on-secondary-container); } diff --git a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts index 8ef2d03457..5147106c85 100644 --- a/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts +++ b/lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts @@ -208,7 +208,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit { this.loadProperties(this.node); this.verifyAllowableOperations(); - this.currentPanel.panelTitle = this.displayAspect ?? this.DefaultPanels.PROPERTIES; + this.currentPanel.panelTitle = this.displayAspect && this.displayAspect !== '' ? this.displayAspect : this.DefaultPanels.PROPERTIES; this.currentPanel.expanded = true; } @@ -277,7 +277,7 @@ export class ContentMetadataComponent implements OnChanges, OnInit { this.loadProperties(this.node); } - if (changes.displayAspect?.currentValue) { + if (changes.displayAspect?.currentValue && changes.displayAspect.currentValue !== '') { this.currentPanel.panelTitle = changes.displayAspect.currentValue; this.currentPanel.expanded = true; } diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss index 5fc71abc61..0e8e136cbf 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-dialog.component.scss @@ -18,10 +18,6 @@ width: 100%; justify-content: unset; } - - &-add-member-action { - padding: 0 15px; - } } .adf-new-permission-table { diff --git a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss index 0471ceea3a..9fed0b42e5 100644 --- a/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/add-permission/add-permission-panel.component.scss @@ -1,4 +1,4 @@ -$search-result-height: calc(100% - 60px); +$search-result-height: calc(100% - 80px); .adf { &-permission-result-list { diff --git a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss index 9112f7aad2..ac8d52e74c 100644 --- a/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss +++ b/lib/content-services/src/lib/permission-manager/components/user-role-column/user-role-column.component.scss @@ -3,9 +3,5 @@ .adf-role-selector-field#{ms.$mat-form-field} { width: 100%; max-width: 200px; - height: 40px; - - #{ms.$mat-form-field-infix}:not(:disabled) { - padding-top: 8px; - } + padding: 5px 0; } diff --git a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss index 5482fc55d6..5abe0b7234 100644 --- a/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss +++ b/lib/content-services/src/lib/search/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss @@ -31,12 +31,12 @@ adf-search-chip-autocomplete-input { } .adf-option-chips-delete-button.adf-autocomplete-added-option-chips-delete-button { - font: var(--mat-sys-body-small); + font-size: var(--mat-sys-body-small-size); height: var(--mat-sys-body-small-size); width: var(--mat-sys-body-small-size); .adf-option-chips-delete-icon.adf-autocomplete-added-option-chips-delete-icon { - font: var(--mat-sys-body-small); + font-size: var(--mat-sys-body-small-size); height: var(--mat-sys-body-small-size); width: var(--mat-sys-body-small-size); } diff --git a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss index 2bdb9dd462..654550ebff 100644 --- a/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss +++ b/lib/content-services/src/lib/search/components/search-filter-container/search-filter-container.component.scss @@ -55,6 +55,7 @@ .adf-search-checklist { margin: 4px 0 0 16px; + padding: 0; } .adf-filter-actions { diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss index 92fe8bdc65..9742f74443 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.scss @@ -14,7 +14,7 @@ adf-tags-creator { } .adf-tag-name-field { - margin-top: 10px; + margin-top: 16px; } .adf-create-tag-label { @@ -26,6 +26,7 @@ adf-tags-creator { display: inline-block; padding-right: 12px; overflow: auto; + font: var(--mat-sys-body-medium); } .adf-tags-list { @@ -42,7 +43,7 @@ adf-tags-creator { width: 100%; .adf-existing-tags-label { - font-size: 10px; + font: var(--mat-sys-body-small); color: var(--mat-sys-on-surface-variant); padding-left: 12px; margin-bottom: 2px; diff --git a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts index fff349e27c..7f46e77483 100644 --- a/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts +++ b/lib/content-services/src/lib/tag/tags-creator/tags-creator.component.ts @@ -129,7 +129,7 @@ export class TagsCreatorComponent implements OnInit, OnDestroy { if (tagNameControlVisible) { this._existingTagsPanelVisible = true; setTimeout(() => { - this.tagNameInputElement?.nativeElement?.scrollIntoView(); + this.tagNameInputElement?.nativeElement?.scrollIntoView({ block: 'nearest' }); }); } else { this._existingTagsPanelVisible = false; diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss index 87018b74b4..b423abc342 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -37,10 +37,6 @@ } .adf-textitem-chip-list-container { - #{ms.$mat-form-field-label} { - margin-top: 6px; - } - .adf-property-value { margin-left: 0; } diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss index 27deaf2b38..518a0c7f62 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss @@ -9,7 +9,6 @@ display: flex; line-height: 20px; margin-bottom: 4px; - color: var(--mat-sys-on-surface); } .adf-property-container { diff --git a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss index 33ebf86cb8..3f660e0a7b 100644 --- a/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss +++ b/lib/core/src/lib/info-drawer/info-drawer-layout.component.scss @@ -23,12 +23,6 @@ $adf-info-drawer-icon-size-half: 24px !default; opacity: 1; } - #{ms.$mat-tab-label}#{ms.$mat-tab-label-active} { - & #{ms.$mat-tab-label-text} { - color: inherit; - } - } - &-header { padding: 8px 0 0 24px; display: flex; diff --git a/lib/core/src/lib/login/components/login/login.component.scss b/lib/core/src/lib/login/components/login/login.component.scss index 497748aae0..812b8b40c6 100644 --- a/lib/core/src/lib/login/components/login/login.component.scss +++ b/lib/core/src/lib/login/components/login/login.component.scss @@ -194,7 +194,6 @@ color: var(--mat-sys-error); position: absolute; font-size: var(--mat-sys-body-small-size); - margin-top: -12px; display: block; } diff --git a/lib/core/src/lib/notifications/components/notification-history.component.html b/lib/core/src/lib/notifications/components/notification-history.component.html index 103f1d876c..1975469c61 100644 --- a/lib/core/src/lib/notifications/components/notification-history.component.html +++ b/lib/core/src/lib/notifications/components/notification-history.component.html @@ -8,7 +8,7 @@ id="adf-notification-history-open-button" (menuOpened)="onMenuOpened()" > - + { let fixture: ComponentFixture; @@ -184,6 +186,36 @@ describe('Notification History Component', () => { }); }, 45000); + it('should apply badge size from app config on init', async () => { + const appConfig = TestBed.inject(AppConfigService); + spyOn(appConfig, 'get').and.callFake( + (key: string, defaultValue?: T): T => (key === 'notification.badgeSize' ? 'large' : defaultValue) as T + ); + + const configFixture = TestBed.createComponent(NotificationHistoryComponent); + const configComponent = configFixture.componentInstance; + configComponent.notifications = []; + configFixture.detectChanges(); + + expect(configComponent.badgeSize).toBe('large'); + + notificationService.showInfo('Example Message'); + configFixture.detectChanges(); + + const badgeHarness = await TestbedHarnessEnvironment.loader(configFixture).getHarness(MatBadgeHarness); + expect(await badgeHarness.getSize()).toBe('large'); + }); + + it('should use default badge size when app config is not set', () => { + const appConfig = TestBed.inject(AppConfigService); + spyOn(appConfig, 'get').and.returnValue(null); + + const configFixture = TestBed.createComponent(NotificationHistoryComponent); + configFixture.detectChanges(); + + expect(configFixture.componentInstance.badgeSize).toBe('small'); + }); + describe('focus change', () => { let markAllAsReadButton: HTMLButtonElement; let loadMoreButton: HTMLButtonElement; diff --git a/lib/core/src/lib/notifications/components/notification-history.component.ts b/lib/core/src/lib/notifications/components/notification-history.component.ts index 7652203aa9..3021b07ba7 100644 --- a/lib/core/src/lib/notifications/components/notification-history.component.ts +++ b/lib/core/src/lib/notifications/components/notification-history.component.ts @@ -35,7 +35,7 @@ import { StorageService } from '../../common/services/storage.service'; import { PaginationModel } from '../../models/pagination.model'; import { MatButton, MatButtonModule, MatIconButton } from '@angular/material/button'; import { TranslatePipe } from '@ngx-translate/core'; -import { MatBadgeModule } from '@angular/material/badge'; +import { MatBadgeModule, MatBadgeSize } from '@angular/material/badge'; import { MatListModule } from '@angular/material/list'; import { NgForOf, NgIf } from '@angular/common'; import { InitialUsernamePipe, TimeAgoPipe } from '../../pipes'; @@ -43,6 +43,7 @@ import { MatSnackBarModule } from '@angular/material/snack-bar'; import { takeUntilDestroyed } from '@angular/core/rxjs-interop'; import { FocusKeyManager } from '@angular/cdk/a11y'; import { IconModule } from '../../icon/icon.module'; +import { AppConfigService } from '../../app-config/app-config.service'; @Component({ selector: 'adf-notification-history', @@ -67,6 +68,7 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit { private readonly notificationService = inject(NotificationService); private readonly storageService = inject(StorageService); private readonly cd = inject(ChangeDetectorRef); + private readonly appConfig = inject(AppConfigService); public static MAX_NOTIFICATION_STACK_LENGTH = 100; public static NOTIFICATION_STORAGE = 'notification-history'; @@ -86,6 +88,10 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit { @Input() maxNotifications: number = 5; + /** Size of the badge. Can be `small`, `medium` or `large` */ + @Input() + badgeSize: MatBadgeSize = 'small'; + notifications: NotificationModel[] = []; paginatedNotifications: NotificationModel[] = []; pagination: PaginationModel; @@ -105,6 +111,8 @@ export class NotificationHistoryComponent implements OnInit, AfterViewInit { ngOnInit() { this.notifications = JSON.parse(this.storageService.getItem(NotificationHistoryComponent.NOTIFICATION_STORAGE)) || []; + const configBadgeSize = this.appConfig.get('notification.badgeSize', null); + this.badgeSize = configBadgeSize ?? this.badgeSize; } ngAfterViewInit(): void { diff --git a/lib/core/src/lib/toolbar/toolbar.component.scss b/lib/core/src/lib/toolbar/toolbar.component.scss index 858f29f35a..59ef98df0c 100644 --- a/lib/core/src/lib/toolbar/toolbar.component.scss +++ b/lib/core/src/lib/toolbar/toolbar.component.scss @@ -14,9 +14,7 @@ } .adf-toolbar-container.adf-toolbar-container-row { - height: 64px; white-space: normal; - padding: 0 16px; } &.adf-toolbar--inline {