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] 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 <iunog@hotmail.com>
---
 .../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 @@
   <ion-badge
     [value]="buttonBadge?.value"
     [type]="buttonBadge?.type"
-    *ngIf="multiple && !loading"
+    *ngIf="multiple && !loading && !circularButton"
     data-testid="badge-multiple"
   ></ion-badge>
 </button>
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: `<ion-button label="Primary" [options]="[{ label: 'option 1' }, {label: 'option 2'}]" multiple="true"></ion-button>`,
     }}
   </Story>
+  <Story
+    name="with dropdown: circular button with multiple choices"
+    decorators={[moduleMetadata({ imports: [CommonModule, IonSharedModule] })]}
+  >
+    {{
+      template: `
+        <ion-button
+          type="ghost"
+          iconType="config"
+          [options]="[
+            { label: 'Ocioso', icon: 'clock-stopwatch' },
+            { label: 'Em deslocamento', icon: 'motorcycle' },
+            { label: 'Trabalhando', icon: 'working' }
+          ]"
+          [dropdownConfig]="{
+            notShowClearButton: true,
+            description: 'Status para acompanhar'
+          }"
+          [circularButton]="true"
+          [multiple]="true"
+        ></ion-button>
+      `,
+    }}
+  </Story>
   <Story
     name="with dropdown with title"
     decorators={[