feat(design)!: remove the diameter property of loading icon (#3341)

Author: xelaint

apps/design-land/src/app/loading-icon/loading-icon.component.html

@@ -4,11 +4,6 @@ <h1>Loading Icon</h1>
 <h2>Overview</h2>
 <p>Loading icons are used to indicate to users that an event is ocurring and is still in progress. They should only be used for short loading processes. For events that can take a considerable amount of time, use the <a routerLink="/progress-bar">Progress Bar</a> component instead.</p>
 
-<h2>Diameter</h2>
-<p>The diameter of a loading icon can be defined by using the <code>diameter</code> property. By default, the diameter is set to <code>60</code>.</p>
-
-<design-land-example-viewer-container example="loading-icon-diameter"></design-land-example-viewer-container>
-
 <h2>Theming</h2>
 <p>The loading icon color is defined by using the <code>color</code> property. By default, the color is set to <code>primary</code>. This can be changed to one of the supported colors.</p>
 

libs/design/button/src/button/button-base.component.html

@@ -2,7 +2,7 @@
   <ng-content select="[daffPrefix]"></ng-content>
 }
 @if (loading) {
-  <daff-loading-icon [diameter]="24"></daff-loading-icon>
+  <daff-loading-icon class="daff-button__loading"></daff-loading-icon>
 } @else {
   <span class="daff-button__content"><ng-content></ng-content></span>
 }

libs/design/button/src/button/button-base.scss

@@ -6,10 +6,10 @@
 	display: inline-flex;
 	justify-content: center;
 	align-items: center;
-	gap: 8px;
+	gap: 0.5rem;
 	appearance: none;
 	border: none;
-	border-radius: 4px;
+	border-radius: 0.25rem;
 	position: relative;
 	text-align: center;
 	text-decoration: none;
@@ -25,6 +25,10 @@
 		z-index: 2;
 	}
 
+	.daff-button__loading {
+		max-width: 1.5rem;
+	}
+
 	.daff-button__content {
 		@include t.text-truncate();
 	}

libs/design/loading-icon/README.md

@@ -45,11 +45,6 @@ export class CustomComponentModule { }
 
 > This method is deprecated. It's recommended to update all custom components to standalone.
 
-## Diameter
-The diameter of a loading icon can be defined by using the `diameter` property. By default, the diameter is set to `60`.
-
-<design-land-example-viewer-container example="loading-icon-diameter"></design-land-example-viewer-container>
-
 ## Theming
 The loading icon color is defined by using the `color` property. By default, the color is set to `primary`. This can be changed to one of the supported colors.
 

libs/design/loading-icon/examples/src/examples.ts

@@ -1,7 +1,5 @@
 import { LoadingIconColorComponent } from './loading-icon-color/loading-icon-color.component';
-import { LoadingIconDiameterComponent } from './loading-icon-diameter/loading-icon-diameter.component';
 
 export const LOADING_ICON_EXAMPLES = [
   LoadingIconColorComponent,
-  LoadingIconDiameterComponent,
 ];

libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.html

@@ -16,6 +16,7 @@ $angle: 270 - $max-percentage-fill * 360;
 :host {
 	display: flex;
 	width: 100%;
+	max-width: 4rem;
 }
 
 .daff-loading-icon {

libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.ts

@@ -14,15 +14,14 @@ import { DaffPalette } from '@daffodil/design';
 import { DaffLoadingIconComponent } from './loading-icon.component';
 
 @Component({
-  template: '<daff-loading-icon [color]="color" [diameter]="diameter"></daff-loading-icon>',
+  template: '<daff-loading-icon [color]="color"></daff-loading-icon>',
   standalone: true,
   imports: [
     DaffLoadingIconComponent,
   ],
 })
 class WrapperComponent {
   color: DaffPalette;
-  diameter = 60;
 }
 
 describe('@daffodil/design/loading-icon | DaffLoadingIconComponent', () => {
@@ -44,30 +43,18 @@ describe('@daffodil/design/loading-icon | DaffLoadingIconComponent', () => {
     fixture = TestBed.createComponent(WrapperComponent);
     wrapper = fixture.componentInstance;
     de = fixture.debugElement.query(By.css('daff-loading-icon'));
-    component = fixture.debugElement.query(By.css('daff-loading-icon')).componentInstance;
+    component = de.componentInstance;
     fixture.detectChanges();
   });
 
   it('should create', () => {
     expect(wrapper).toBeTruthy();
   });
 
-  describe('<daff-loading-icon>', () => {
-    it('should add a class of "daff-loading-icon" to the host element', () => {
-      expect(de.classes).toEqual(jasmine.objectContaining({
-        'daff-loading-icon': true,
-      }));
-    });
-  });
-
-  it('has a default value of 60 for the diameter', () => {
-    expect(component.diameter).toEqual(60);
-  });
-
-  it('can take a `diameter` as input which sets max-width on the `daff-loading-icon` host', () => {
-    wrapper.diameter = 50;
-    fixture.detectChanges();
-    expect(de.nativeElement.style.maxWidth).toEqual('50px');
+  it('should add a class of "daff-loading-icon" to the host element', () => {
+    expect(de.classes).toEqual(jasmine.objectContaining({
+      'daff-loading-icon': true,
+    }));
   });
 
   it('should take color as an input', () => {

libs/design/loading-icon/src/loading-icon/loading-icon.component.scss

@@ -1,7 +1,6 @@
 import {
   Component,
   ChangeDetectionStrategy,
-  Input,
   HostBinding,
 } from '@angular/core';
 
@@ -24,20 +23,8 @@ import { DaffColorableDirective } from '@daffodil/design';
   standalone: true,
 })
 export class DaffLoadingIconComponent {
-
-  /**
-   * The (pixel) diameter of the animation
-   */
-  @Input() diameter = 60;
-
   /**
    * @docs-private
    */
   @HostBinding('class.daff-loading-icon') class = true;
-  /**
-   * @docs-private
-   */
-  @HostBinding('style.max-width') get maxWidth() {
-    return this.diameter + 'px';
-  }
 }