From 064ea38bcdf3008a414e00f7d5e092bbfad76823 Mon Sep 17 00:00:00 2001
From: vinicius-guedes-brisa <vinicius.guedes@grupobrisanet.com.br>
Date: Tue, 12 Nov 2024 13:33:43 -0300
Subject: [PATCH 1/3] style: not showing badge when dropdown is multiple and
 button is circular

---
 .../ion/src/lib/button/button.component.html     |  2 +-
 .../ion/src/lib/button/button.component.spec.ts  | 11 +++++++++++
 stories/Button.stories.mdx                       | 16 ++++++++++++++++
 3 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/projects/ion/src/lib/button/button.component.html b/projects/ion/src/lib/button/button.component.html
index ed08903e4..cb296459c 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 3fbd2d810..5c85794f1 100644
--- a/projects/ion/src/lib/button/button.component.spec.ts
+++ b/projects/ion/src/lib/button/button.component.spec.ts
@@ -341,6 +341,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 0559dca86..6e430e26a 100644
--- a/stories/Button.stories.mdx
+++ b/stories/Button.stories.mdx
@@ -295,6 +295,22 @@ 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="option"
+          [options]="[{ label: 'option 1' }, {label: 'option 2'}]"
+          circularButton="true"
+          multiple="true"
+        ></ion-button>
+      `,
+    }}
+  </Story>
   <Story
     name="with dropdown with title"
     decorators={[

From 852f054c723638f480ea0abfec06922ff81170be Mon Sep 17 00:00:00 2001
From: vinicius-guedes-brisa <vinicius.guedes@grupobrisanet.com.br>
Date: Tue, 12 Nov 2024 14:07:52 -0300
Subject: [PATCH 2/3] docs: updating example

---
 stories/Button.stories.mdx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/stories/Button.stories.mdx b/stories/Button.stories.mdx
index 6e430e26a..27b1f183c 100644
--- a/stories/Button.stories.mdx
+++ b/stories/Button.stories.mdx
@@ -303,10 +303,11 @@ O Ion, Suporta 4 tamanhos padrões para botões. Basta configurar a propriedade
       template: `
         <ion-button
           type="ghost"
-          iconType="option"
+          iconType="config"
           [options]="[{ label: 'option 1' }, {label: 'option 2'}]"
-          circularButton="true"
-          multiple="true"
+          [dropdownConfig]="{notShowClearButton: true}"
+          [circularButton]="true"
+          [multiple]="true"
         ></ion-button>
       `,
     }}

From 937a161edb4b7654c4bc275eeb82d1e61e99d596 Mon Sep 17 00:00:00 2001
From: vinicius-guedes-brisa <vinicius.guedes@grupobrisanet.com.br>
Date: Tue, 12 Nov 2024 14:13:26 -0300
Subject: [PATCH 3/3] docs: updating example

---
 stories/Button.stories.mdx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/stories/Button.stories.mdx b/stories/Button.stories.mdx
index 27b1f183c..db4ffee2d 100644
--- a/stories/Button.stories.mdx
+++ b/stories/Button.stories.mdx
@@ -304,8 +304,15 @@ O Ion, Suporta 4 tamanhos padrões para botões. Basta configurar a propriedade
         <ion-button
           type="ghost"
           iconType="config"
-          [options]="[{ label: 'option 1' }, {label: 'option 2'}]"
-          [dropdownConfig]="{notShowClearButton: true}"
+          [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>