From 490dc6e74c75527490d14069c5345abf966d903e Mon Sep 17 00:00:00 2001
From: Valentin Mladenov <valentin.mladenov@broadcom.com>
Date: Tue, 17 Dec 2024 12:36:16 +0200
Subject: [PATCH] fix(stepper): clr step button loading (#1647)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [ ] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?
Stepper button `clrStepButton` have extra padding on the right side when in use with `clrLoading`.

Issue Number: CDE-2499

## What is the new behavior?
Stepper button `clrStepButton` with `clrLoading` follow the regular button behaviour.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information
---
 .../src/accordion/stepper/_stepper.clarity.scss        |  1 -
 projects/demo/src/app/stepper/stepper.demo.html        |  2 +-
 projects/demo/src/app/stepper/stepper.demo.ts          | 10 ++++++++++
 3 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/projects/angular/src/accordion/stepper/_stepper.clarity.scss b/projects/angular/src/accordion/stepper/_stepper.clarity.scss
index f40f82c2c8..0ed2b75932 100644
--- a/projects/angular/src/accordion/stepper/_stepper.clarity.scss
+++ b/projects/angular/src/accordion/stepper/_stepper.clarity.scss
@@ -104,7 +104,6 @@
     }
 
     .clr-step-button {
-      display: inline-block;
       margin-top: tokens.$cds-global-space-9;
       margin-right: tokens.$cds-global-space-6;
     }
diff --git a/projects/demo/src/app/stepper/stepper.demo.html b/projects/demo/src/app/stepper/stepper.demo.html
index 39aa22f575..46641a142b 100644
--- a/projects/demo/src/app/stepper/stepper.demo.html
+++ b/projects/demo/src/app/stepper/stepper.demo.html
@@ -31,7 +31,7 @@ <h2>Stepper with a nested accordion inside it</h2>
             <clr-accordion-content>Accordion 2 content</clr-accordion-content>
           </clr-accordion-panel>
         </clr-accordion>
-        <button #nextBtn clrStepButton="next">NEXT</button>
+        <button #nextBtn [clrLoading]="state" clrStepButton="next" (click)="loadingDemo()">NEXT</button>
       </ng-template>
     </clr-step-content>
   </clr-stepper-panel>
diff --git a/projects/demo/src/app/stepper/stepper.demo.ts b/projects/demo/src/app/stepper/stepper.demo.ts
index 95b5033e0b..34b0161619 100644
--- a/projects/demo/src/app/stepper/stepper.demo.ts
+++ b/projects/demo/src/app/stepper/stepper.demo.ts
@@ -7,12 +7,15 @@
 
 import { Component, ElementRef, inject, ViewChild } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
+import { ClrLoadingState } from '@clr/angular';
 
 @Component({
   templateUrl: 'stepper.demo.html',
   styleUrls: ['./stepper.demo.scss'],
 })
 export class StepperDemo {
+  state: ClrLoadingState = ClrLoadingState.DEFAULT;
+
   showSecondStep = true;
   initialStep = 'name';
   form: FormGroup = this.getReactiveForm();
@@ -36,6 +39,13 @@ export class StepperDemo {
   };
   loading = false;
 
+  loadingDemo() {
+    this.state = ClrLoadingState.LOADING;
+    setTimeout(() => {
+      this.state = ClrLoadingState.SUCCESS;
+    }, 1500);
+  }
+
   submit() {
     console.log('reactive form submit', this.form.value);
   }