style: not showing badge when dropdown is multiple and button is circ…

…ular (#1185) * style: not showing badge when dropdown is multiple and button is circular * docs: updating example * docs: updating example --------- Co-authored-by: Iury Nogueira <[email protected]>
Brisanet · Nov 18, 2024 · b42b9a3 · b42b9a3
1 parent 9c2ed06
commit b42b9a3
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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={[