fix: loading on ion button with dropdown

Brisanet · Nov 12, 2024 · 14ed8fb · 14ed8fb
1 parent 5872fbb
commit 14ed8fb
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 1 deletion.
diff --git a/projects/ion/src/lib/button/button.component.html b/projects/ion/src/lib/button/button.component.html
@@ -20,7 +20,7 @@
     class="icon"
   ></ion-icon>
   <ion-icon
-    *ngIf="options && !circularButton"
+    *ngIf="options && !circularButton && !loading"
     [type]="showDropdown ? 'semi-up' : 'semi-down'"
     [size]="iconSize"
     class="icon"

diff --git a/projects/ion/src/lib/button/button.component.scss b/projects/ion/src/lib/button/button.component.scss
@@ -130,6 +130,10 @@ button {
 
 .right-side-icon {
   flex-direction: row-reverse;
+
+  .spinner {
+    margin-right: 0;
+  }
 }
 
 .ion-remove-space {

diff --git a/projects/ion/src/lib/button/button.component.spec.ts b/projects/ion/src/lib/button/button.component.spec.ts
@@ -289,6 +289,20 @@ describe('ButtonComponent with dropdown', () => {
       userEvent.type(screen.getByTestId('input-element'), typeText);
       expect(searchEvent).toHaveBeenLastCalledWith(typeText);
     });
+
+    it('should not render the dropdown arrow when loading', async () => {
+      const options = [{ label: 'Option 1' }, { label: 'Option 2' }];
+
+      await sut({
+        label: defaultName,
+        loading: true,
+        options,
+      });
+
+      const arrowIcon = document.getElementById('ion-icon-semi-down');
+
+      expect(arrowIcon).toBeFalsy();
+    });
   });
 
   it('should close dropdown when click outside component', async () => {

diff --git a/stories/Button.stories.mdx b/stories/Button.stories.mdx
@@ -308,6 +308,19 @@ O Ion, Suporta 4 tamanhos padrões para botões. Basta configurar a propriedade
     }}
     secondary
   </Story>
+  <Story
+    name="with dropdown: loading"
+    decorators={[
+      moduleMetadata({
+        imports: [CommonModule, IonSharedModule],
+      }),
+    ]}
+  >
+    {{
+      template: `<ion-button label="Primary" rightSideIcon="true" loading="true" [options]="[{ label: 'option 1' }, {label: 'option 2'}]"></ion-button>`,
+    }}
+    secondary
+  </Story>
 </Canvas>
 
 - `enableSearch`. Adiciona um campo de busca no dropdown para realizar uma busca nas opções.