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/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();
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: `
+
+ `,
+ }}
+