fix(progress-button): fix styling & add playground page

Author: sergiubologa

projects/angular/directives/ui-progress-button/src/internal/ui-button-progress-bar.component.scss

@@ -1,6 +1,8 @@
 ui-button-progress-bar {
     display: block;
-    width: 100%;
+    width: 0;
+    padding: 0;
+    margin: 0;
 
     .mat-mdc-progress-bar {
         position: absolute;

projects/playground/src/app/app-routing.module.ts

@@ -9,6 +9,7 @@ import {
     Routes,
 } from '@angular/router';
 import { TreeSelectPageComponent } from 'projects/playground/src/app/pages/tree-select/tree-select.page';
+import { ProgressButtonPageComponent } from 'projects/playground/src/app/pages/progress-button/progress-button.page';
 
 const routes: Routes = [
     {
@@ -31,6 +32,10 @@ const routes: Routes = [
         path: 'tree',
         component: TreeSelectPageComponent,
     },
+    {
+        path: 'progress-button',
+        component: ProgressButtonPageComponent,
+    },
     {
         path: '**',
         redirectTo: 'home',

projects/playground/src/app/app.component.ts

@@ -26,6 +26,10 @@ export class AppComponent {
             name: 'Suggest',
             link: '/suggest',
         },
+        {
+            name: 'Progress button',
+            link: '/progress-button',
+        },
         {
             name: 'Tree select',
             link: '/tree',

projects/playground/src/app/pages/progress-button/progress-button.module.ts

@@ -0,0 +1,20 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { UiProgressButtonModule } from '@uipath/angular/directives/ui-progress-button';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { ProgressButtonPageComponent } from './progress-button.page';
+
+@NgModule({
+  declarations: [
+    ProgressButtonPageComponent,
+  ],
+  imports: [
+    CommonModule,
+    UiProgressButtonModule,
+    MatButtonModule,
+    MatIconModule,
+  ],
+})
+export class SuggestModule { }

projects/playground/src/app/pages/progress-button/progress-button.page.html

@@ -0,0 +1,70 @@
+<button mat-flat-button
+color="primary"
+(click)="toggle()">
+<mat-icon>radio_button_partial</mat-icon>
+Toggle loading state</button>
+
+<div class="group">
+    <button mat-button
+            ui-progress-button
+            [progressButtonLoading]="isLoading">test</button>
+    <button mat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="primary">test</button>
+    <button mat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="warn">test</button>
+    <button mat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="accent">test</button>
+
+</div>
+
+<div class="group">
+    <button mat-flat-button
+            ui-progress-button
+            [progressButtonLoading]="isLoading">test</button>
+    <button mat-flat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="primary">test</button>
+    <button mat-flat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="warn">test</button>
+    <button mat-flat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="accent">test</button>
+
+</div>
+
+<div class="group">
+    <button mat-flat-button
+            ui-progress-button
+            [progressButtonLoading]="isLoading">
+            <mat-icon>home</mat-icon>
+            test</button>
+    <button mat-flat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="primary">
+    <mat-icon>home</mat-icon>
+    test</button>
+    <button mat-flat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="warn">
+    <mat-icon>home</mat-icon>
+    test</button>
+    <button mat-flat-button
+    ui-progress-button
+    [progressButtonLoading]="isLoading"
+    color="accent">
+    <mat-icon>home</mat-icon>
+    test</button>
+
+</div>

projects/playground/src/app/pages/progress-button/progress-button.page.scss

@@ -0,0 +1,14 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+
+    > button {
+        width: fit-content;
+    }
+
+    .group {
+        display: flex;
+        gap: 10px;
+    }
+}

projects/playground/src/app/pages/progress-button/progress-button.page.ts

@@ -0,0 +1,18 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+} from '@angular/core';
+
+@Component({
+  selector: 'ui-app-progress-button',
+  templateUrl: './progress-button.page.html',
+  styleUrls: ['./progress-button.page.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ProgressButtonPageComponent {
+  isLoading = false;
+
+  toggle() {
+    this.isLoading = !this.isLoading;
+  }
+}