From 9c2ed068d1c791b09ed403f41453102f8e19f793 Mon Sep 17 00:00:00 2001 From: Allan Oliveira <138060158+allan-chagas-brisa@users.noreply.github.com> Date: Mon, 18 Nov 2024 08:42:53 -0300 Subject: [PATCH 1/2] feat: add notifications limit option (#1192) * feat: notification amount limit * test: notification maxStack test case added --- .../ion/src/lib/core/types/notification.ts | 4 +++ .../notification.container.component.ts | 18 ++++++++++- .../service/notification.service.spec.ts | 30 +++++++++++++++++++ .../service/notification.service.ts | 9 ++++-- 4 files changed, 58 insertions(+), 3 deletions(-) diff --git a/projects/ion/src/lib/core/types/notification.ts b/projects/ion/src/lib/core/types/notification.ts index 6b8a0ae21..d2392ecbd 100644 --- a/projects/ion/src/lib/core/types/notification.ts +++ b/projects/ion/src/lib/core/types/notification.ts @@ -16,3 +16,7 @@ export interface NotificationConfigOptions { fadeOut?: fadeOutDirection; ionOnClose?: EventEmitter; } + +export interface NotificationServiceConfig { + maxStack?: number; +} diff --git a/projects/ion/src/lib/notification/service/notification.container.component.ts b/projects/ion/src/lib/notification/service/notification.container.component.ts index 98503bbae..932e96fe8 100644 --- a/projects/ion/src/lib/notification/service/notification.container.component.ts +++ b/projects/ion/src/lib/notification/service/notification.container.component.ts @@ -7,11 +7,27 @@ import { Component, ComponentRef, Renderer2, ElementRef } from '@angular/core'; styleUrls: ['notification.container.scss'], }) export class IonNotificationContainerComponent { + private notificationRefControl: ComponentRef[] = []; constructor(private renderer: Renderer2, private element: ElementRef) {} - addNotification(notification: ComponentRef): void { + addNotification( + notification: ComponentRef, + maxStack: number + ): void { + if (this.notificationRefControl.length === maxStack) { + this.notificationRefControl[0].instance.ionOnClose.complete(); + this.removeNotification( + this.notificationRefControl[0].location.nativeElement + ); + this.notificationRefControl.shift(); + } + + this.notificationRefControl.push(notification); notification.instance.ionOnClose.subscribe(() => { this.removeNotification(notification.location.nativeElement); + this.notificationRefControl = this.notificationRefControl.filter( + (value) => value !== notification + ); }); this.renderer.appendChild( diff --git a/projects/ion/src/lib/notification/service/notification.service.spec.ts b/projects/ion/src/lib/notification/service/notification.service.spec.ts index c0c460b8f..b846ef22a 100644 --- a/projects/ion/src/lib/notification/service/notification.service.spec.ts +++ b/projects/ion/src/lib/notification/service/notification.service.spec.ts @@ -162,3 +162,33 @@ describe('NotificationService -> notification types', () => { } ); }); + +describe('NotificationService -> notification maxStack', () => { + let notificationService: IonNotificationService; + + it('should not exceed the maxStack', () => { + const removeNotification = screen.getAllByTestId('btn-remove'); + removeNotification.forEach((element) => fireEvent.click(element)); + + TestBed.configureTestingModule({ + imports: [TestModule], + }).compileComponents(); + + notificationService = TestBed.get(IonNotificationService); + + notificationService.notificationServiceConfig = { maxStack: 2 }; + notificationService.success( + DEFAULT_NOTIFICATION_OPTIONS.title, + DEFAULT_NOTIFICATION_OPTIONS.message + ); + notificationService.error( + DEFAULT_NOTIFICATION_OPTIONS.title, + DEFAULT_NOTIFICATION_OPTIONS.message + ); + notificationService.error( + DEFAULT_NOTIFICATION_OPTIONS.title, + DEFAULT_NOTIFICATION_OPTIONS.message + ); + expect(screen.getAllByTestId('ion-notification').length).toBe(2); + }); +}); diff --git a/projects/ion/src/lib/notification/service/notification.service.ts b/projects/ion/src/lib/notification/service/notification.service.ts index 259f00bf9..89ec79353 100644 --- a/projects/ion/src/lib/notification/service/notification.service.ts +++ b/projects/ion/src/lib/notification/service/notification.service.ts @@ -1,5 +1,8 @@ import { StatusType } from './../../core/types/status'; -import { NotificationConfigOptions } from './../../core/types/notification'; +import { + NotificationConfigOptions, + NotificationServiceConfig, +} from './../../core/types/notification'; import { IonNotificationComponent } from './../component/notification.component'; import { Injectable, @@ -25,6 +28,7 @@ enum NOTIFICATION_TYPES { providedIn: 'root', }) export class IonNotificationService { + public notificationServiceConfig: NotificationServiceConfig = { maxStack: 8 }; private notificationContainerComponentRef: ComponentRef; private componentSubscriber!: Subject; @@ -183,7 +187,8 @@ export class IonNotificationService { notification.changeDetectorRef.detectChanges(); this.notificationContainerComponentRef.instance.addNotification( - notification + notification, + this.notificationServiceConfig.maxStack ); this.notificationContainerComponentRef.changeDetectorRef.detectChanges(); From b42b9a30013c376dda3cc213d0aa79b3de3e6dce Mon Sep 17 00:00:00 2001 From: Vinicius Guedes <138119077+vinicius-guedes-brisa@users.noreply.github.com> Date: Mon, 18 Nov 2024 09:10:41 -0300 Subject: [PATCH 2/2] style: not showing badge when dropdown is multiple and button is circular (#1185) * style: not showing badge when dropdown is multiple and button is circular * docs: updating example * docs: updating example --------- Co-authored-by: Iury Nogueira --- .../ion/src/lib/button/button.component.html | 2 +- .../src/lib/button/button.component.spec.ts | 11 +++++++++ stories/Button.stories.mdx | 24 +++++++++++++++++++ 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/projects/ion/src/lib/button/button.component.html b/projects/ion/src/lib/button/button.component.html index eaee602e6..7845b666a 100644 --- a/projects/ion/src/lib/button/button.component.html +++ b/projects/ion/src/lib/button/button.component.html @@ -34,7 +34,7 @@ diff --git a/projects/ion/src/lib/button/button.component.spec.ts b/projects/ion/src/lib/button/button.component.spec.ts index e3fb14d76..b0dbe7e54 100644 --- a/projects/ion/src/lib/button/button.component.spec.ts +++ b/projects/ion/src/lib/button/button.component.spec.ts @@ -357,6 +357,17 @@ describe('ButtonComponent with dropdown', () => { expect(screen.getByTestId('badge-multiple')).toBeInTheDocument(); expect(screen.getByTestId('badge-multiple')).toHaveTextContent('0'); }); + + it('should not render an ion-badge when the dropdown is set to multiple but the button is circular', async () => { + await sut({ + label: defaultName, + multiple: true, + circularButton: true, + options: [{ label: 'Option 1' }, { label: 'Option 2' }], + }); + + expect(screen.queryByTestId('badge-multiple')).not.toBeInTheDocument(); + }); }); it('should emit an event when option is selected', async () => { diff --git a/stories/Button.stories.mdx b/stories/Button.stories.mdx index 410562ca0..64581bbc3 100644 --- a/stories/Button.stories.mdx +++ b/stories/Button.stories.mdx @@ -295,6 +295,30 @@ O Ion, Suporta 4 tamanhos padrões para botões. Basta configurar a propriedade template: ``, }} + + {{ + template: ` + + `, + }} +