refactor: remove default msg when button is loading 🔨 #281 (#282)

* refactor: remove default msg when button is loading 🔨 #281 * fix: workflow chromatic 🚑 * style: fix right side icon
Brisanet · Nov 10, 2022 · a5d799c · a5d799c
1 parent 511bc56
commit a5d799c
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 47 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -16,7 +16,8 @@ jobs:
       - name: Use Node.js ${{ matrix.node-version }}
         uses: actions/setup-node@v3
         with:
-        node-version: ${{ matrix.node-version }}
+          node-version: ${{ matrix.node-version }}
+
       - uses: actions/checkout@v1
       - name: Install dependencies
         run: yarn

diff --git a/projects/ion/src/lib/button/button.component.html b/projects/ion/src/lib/button/button.component.html
@@ -6,7 +6,7 @@
   [class.loading]="loading"
   [class.circular-button]="!loading && circularButton"
   [class.ion-remove-space]="iconType && !!!label"
-  [class.right-side-icon]="rightSideIcon || !options"
+  [class.right-side-icon]="rightSideIcon"
   [disabled]="disabled"
   (click)="handleClick()"
 >
@@ -23,7 +23,7 @@
     class="icon"
   ></ion-icon>
   <span *ngIf="(!circularButton && label) || loading">{{
-    loading ? loadingMessage : label
+    loadingMessage || label
   }}</span>
   <ion-badge
     [value]="buttonBadge.value"

diff --git a/projects/ion/src/lib/button/button.component.spec.ts b/projects/ion/src/lib/button/button.component.spec.ts
@@ -129,11 +129,11 @@ describe('Expand ButtonComponent', () => {
 });
 
 describe('load ButtonComponent', () => {
-  it('should render a loading button when loading="true" is passed and show default message "Carregando..."', async () => {
+  it('should render a loading button when loading="true" is passed and keep label', async () => {
     const button = await sut({ label: defaultName, loading: true });
     expect(button).toHaveClass('loading');
     expect(button.children[0]).toHaveClass('spinner');
-    expect(button.children[1].textContent).toContain('Carregando...');
+    expect(button.children[1].textContent).toContain(defaultName);
   });
 
   it('should render a loading button with message "aguarde ..."', async () => {

diff --git a/projects/ion/src/lib/button/button.component.ts b/projects/ion/src/lib/button/button.component.ts
@@ -46,7 +46,7 @@ export class ButtonComponent implements OnInit {
   @Input() danger? = false;
   @Input() disabled? = false;
   @Input() loading? = false;
-  @Input() loadingMessage = 'Carregando...';
+  @Input() loadingMessage?: string;
   @Input() multiple? = false;
   @Input() iconType? = '';
   @Input() rightSideIcon? = false;

diff --git a/stories/Button.stories.mdx b/stories/Button.stories.mdx
@@ -755,47 +755,6 @@ E 6 outras propriedades adicionais.
   </Story>
 </Canvas>
 
-Ainda é possível configurar uma mensagem ser exibida no loading, caso não deseje a mensagem padrão 'Carregando...'. Basta configurar uma mensagem no `loadingMessage`.
-
-<Canvas>
-  <Story
-    name="Loading message default"
-    decorators={[
-      moduleMetadata({
-        declarations: [
-          ButtonComponent,
-          IonIconComponent,
-          DropdownComponent,
-          BadgeComponent,
-        ],
-        imports: [CommonModule],
-      }),
-    ]}
-  >
-    {{
-      template: `<ion-button [loading]=true></ion-button>`,
-    }}
-  </Story>
-  <Story
-    name="Loading message"
-    decorators={[
-      moduleMetadata({
-        declarations: [
-          ButtonComponent,
-          IonIconComponent,
-          DropdownComponent,
-          BadgeComponent,
-        ],
-        imports: [CommonModule],
-      }),
-    ]}
-  >
-    {{
-      template: `<ion-button [loading]=true loadingMessage="Aguarde..."></ion-button>`,
-    }}
-  </Story>
-</Canvas>
-
 - `ionOnClick`. Emite um evento ao clicar no botão. Basta criar uma função no arquivo.ts e repassá-la no arquivo.html.
 
 <Canvas>