fix(button): icon text misalignment when clrLoading is used (#1224)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] 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?

<!-- Please check the one that applies to this PR using "x". -->

- [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?
Icon and text are misaligned vertically and horizontally when
`clrLoading` is used.

<!-- Please describe the current behavior that you are modifying, or
link to a relevant issue. -->

Issue Number: CDE-1652

## What is the new behavior?
Icon and text are aligned vertically and horizontally to design
specification when `clrLoading` is used.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

<!-- If this PR contains a breaking change, please describe the impact
and migration path for existing applications below. -->

## Other information

---------

Co-authored-by: GitHub <[email protected]>

.storybook/stories/button/button-group.stories.ts

@@ -4,21 +4,28 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { CLR_MENU_POSITIONS, ClrButtonGroup, ClrButtonGroupModule, commonStringsDefault } from '@clr/angular';
+import {
+  CLR_MENU_POSITIONS,
+  ClrButtonGroup,
+  ClrButtonGroupModule,
+  ClrLoadingModule,
+  commonStringsDefault,
+} from '@clr/angular';
 import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
 import { CommonModules } from 'helpers/common';
 
 export default {
   title: 'Button/Button Group',
   decorators: [
     moduleMetadata({
-      imports: [...CommonModules, ClrButtonGroupModule],
+      imports: [...CommonModules, ClrButtonGroupModule, ClrLoadingModule],
     }),
   ],
   component: ClrButtonGroup,
   argTypes: {
     // inputs
     clrMenuPosition: { defaultValue: 'bottom-left', control: { type: 'radio', options: CLR_MENU_POSITIONS } },
+    loading: { defaultValue: false, control: { type: 'boolean' } },
     clrToggleButtonAriaLabel: { defaultValue: commonStringsDefault.rowActions },
     // methods
     getMoveIndex: { control: { disable: true }, table: { disable: true } },
@@ -49,8 +56,10 @@ const ButtonGroupTemplate: StoryFn = args => ({
             <clr-button
               *ngFor="let _ of createArray(buttonCount); let i = index"
               [clrInMenu]="false"
+              [clrLoading]="loading"
               [disabled]="disabledButtonsPosition.includes(i+1)"
             >
+              <cds-icon shape="home"></cds-icon>
               {{content}} {{i + 1}}
             </clr-button>
             <clr-button
@@ -69,6 +78,15 @@ export const ButtonGroup: StoryObj = {
   render: ButtonGroupTemplate,
 };
 
+export const ButtonGroupLoading: StoryObj = {
+  render: ButtonGroupTemplate,
+
+  args: {
+    inMenuButtonCount: 0,
+    loading: true,
+  },
+};
+
 export const Disabled: StoryObj = {
   render: ButtonGroupTemplate,
 

.storybook/stories/button/button.stories.ts

@@ -55,6 +55,7 @@ export default {
     click: action('click'),
     // story helpers
     content: 'Hello World!',
+    iconShape: '',
     buttonClassLoader,
     BUTTON_STYLES,
     BUTTON_TYPES,
@@ -69,6 +70,7 @@ const ButtonTemplate: Story = args => ({
         [disabled]="disabled"
         (click)="click($event)"
       >
+        <cds-icon *ngIf="iconShape" shape="{{iconShape}}"></cds-icon>
         {{content}}
       </button>
   `,
@@ -81,10 +83,16 @@ const ButtonAllTemplate: Story = args => ({
     <button class="btn">Default</button>
 
     <h6>Primary Buttons</h6>
-    <button *ngFor="let type of BUTTON_TYPES" [class]="'btn btn-' + type">{{type}}</button>
+    <button *ngFor="let type of BUTTON_TYPES" [class]="'btn btn-' + type">
+      <cds-icon shape="user"></cds-icon>
+      {{type}}
+    </button>
 
     <h6>Old Outline Buttons</h6>
-    <button *ngFor="let type of BUTTON_TYPES" [class]="'btn btn-' + type + '-outline'">{{type}}</button>
+    <button *ngFor="let type of BUTTON_TYPES" [class]="'btn btn-' + type + '-outline'">
+      {{type}}
+      <cds-icon shape="home"></cds-icon>
+    </button>
 
     <h6>New Outline Buttons</h6>
     <button *ngFor="let type of BUTTON_TYPES" [class]="'btn btn-outline-' + type">{{type}}</button>
@@ -109,7 +117,11 @@ const ButtonAllTemplate: Story = args => ({
     <button *ngFor="let type of BUTTON_TYPES" [class]="'btn btn-sm btn-' + type">{{type}}</button>
 
     <h6>Small Outline Buttons</h6>
-    <button *ngFor="let type of BUTTON_TYPES" [class]="'btn btn-sm btn-' + type + '-outline'">{{type}}</button>
+    <button *ngFor="let type of BUTTON_TYPES" [class]="'btn btn-sm btn-' + type + '-outline'">
+      <cds-icon shape="user"></cds-icon>
+      {{type}}
+      <cds-icon shape="home"></cds-icon>
+    </button>
 
     <!--Links-->
 
@@ -124,7 +136,11 @@ const ButtonAllTemplate: Story = args => ({
 
 
     <h6>New Outline Links</h6>
-    <a *ngFor="let type of BUTTON_TYPES" href="javascript://" [class]="'btn btn-outline-' + type">{{type}}</a>
+    <a *ngFor="let type of BUTTON_TYPES" href="javascript://" [class]="'btn btn-outline-' + type">
+      <cds-icon shape="user"></cds-icon>
+      {{type}}
+      <cds-icon shape="home"></cds-icon>
+    </a>
 
     <h6>Flat Links</h6>
     <a href="javascript://" class="btn btn-link">Default</a>
@@ -164,6 +180,7 @@ const ButtonLinkTemplate: StoryFn = args => ({
       [disabled]="disabled"
       (click)="click($event)"
     >
+      <cds-icon *ngIf="iconShape" shape="{{iconShape}}"></cds-icon>
       {{content}}
     </a>
   `,

.storybook/stories/button/buttons-loading.stories.ts

@@ -36,9 +36,9 @@ export default {
 const ButtonLoadingStatesTemplate: StoryFn = args => ({
   template: `
       <h6>{{stateName}}</h6>
-        <button [clrLoading]="validateState" class="btn btn-sm btn-primary">Validate</button>
+        <button [clrLoading]="validateState" class="btn btn-sm btn-primary"><cds-icon shape="home"></cds-icon>Validate</button>
         <button [clrLoading]="validateState" class="btn btn-primary">Validate</button>
-        <button [clrLoading]="submitState" type="submit" class="btn btn-success-outline">Submit</button>
+        <button [clrLoading]="submitState" type="submit" class="btn btn-success-outline"><cds-icon shape="home"></cds-icon>Submit</button>
     `,
   props: args,
 });

projects/angular/src/button/_buttons.clarity.scss

@@ -255,6 +255,12 @@
 
     height: buttons-variables.$clr-btn-appearance-form-height;
     padding: buttons-variables.$clr-btn-appearance-form-padding;
+
+    .clr-loading-btn-content {
+      display: flex;
+      gap: tokens.$cds-global-space-5;
+      align-items: center;
+    }
   }
 
   //Clarity Buttons

projects/angular/src/button/button-loading/loading-button.ts

@@ -17,17 +17,17 @@ const MIN_BUTTON_WIDTH = 42;
   selector: 'button[clrLoading]',
   template: `
     <span @parent [ngSwitch]="state">
-      <span *ngSwitchCase="buttonState.LOADING">
+      <ng-container *ngSwitchCase="buttonState.LOADING">
         <span @spinner class="spinner spinner-inline"></span>
-      </span>
-      <span *ngSwitchCase="buttonState.SUCCESS">
+      </ng-container>
+      <ng-container *ngSwitchCase="buttonState.SUCCESS">
         <span
           @validated
           (@validated.done)="this.loadingStateChange(this.buttonState.DEFAULT)"
           class="spinner spinner-inline spinner-check"
         ></span>
-      </span>
-      <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton>
+      </ng-container>
+      <span *ngSwitchCase="buttonState.DEFAULT" @defaultButton class="clr-loading-btn-content">
         <ng-content></ng-content>
       </span>
     </span>

projects/demo/src/app/buttons/button-loading.html

@@ -16,6 +16,7 @@ <h4>Loading Buttons with Disabled Input</h4>
   class="btn btn-primary"
   (click)="disabledDemo()"
 >
+  <cds-icon shape="home"></cds-icon>
   Disable After Success
 </button>
 <button
@@ -29,8 +30,12 @@ <h4>Loading Buttons with Disabled Input</h4>
 </button>
 
 <h4>Small Loading Buttons</h4>
-<button [clrLoading]="validateSmState" class="btn btn-sm btn-info-outline" (click)="validateSmDemo()">Validate</button>
+<button [clrLoading]="validateSmState" class="btn btn-sm btn-info-outline" (click)="validateSmDemo()">
+  <cds-icon shape="home"></cds-icon>
+  Validate
+</button>
 <button [clrLoading]="submitSmState" type="submit" class="btn btn-sm btn-success-outline" (click)="submitSmDemo()">
+  <cds-icon shape="home"></cds-icon>
   Submit
 </button>
 <button [clrLoading]="validateFalsyState" class="btn btn-sm btn-info-outline" (click)="validateFalsyDemo()">