diff --git a/apps/design-land/src/app/loading-icon/loading-icon.component.html b/apps/design-land/src/app/loading-icon/loading-icon.component.html
index 9d79f14994..9261f0be3f 100644
--- a/apps/design-land/src/app/loading-icon/loading-icon.component.html
+++ b/apps/design-land/src/app/loading-icon/loading-icon.component.html
@@ -4,11 +4,6 @@ Loading Icon
Overview
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 Progress Bar component instead.
-Diameter
-The diameter of a loading icon can be defined by using the diameter property. By default, the diameter is set to 60.
-
-
-
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.
diff --git a/libs/design/button/src/button/button-base.component.html b/libs/design/button/src/button/button-base.component.html
index aa3dfdb81d..d1e3ef3a3c 100644
--- a/libs/design/button/src/button/button-base.component.html
+++ b/libs/design/button/src/button/button-base.component.html
@@ -2,7 +2,7 @@
}
@if (loading) {
-
+
} @else {
}
diff --git a/libs/design/button/src/button/button-base.scss b/libs/design/button/src/button/button-base.scss
index 9f6ed891e3..dcac723181 100644
--- a/libs/design/button/src/button/button-base.scss
+++ b/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();
}
diff --git a/libs/design/loading-icon/README.md b/libs/design/loading-icon/README.md
index 1b2413aeab..fbb5912a1d 100644
--- a/libs/design/loading-icon/README.md
+++ b/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`.
-
-
-
## 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.
diff --git a/libs/design/loading-icon/examples/src/examples.ts b/libs/design/loading-icon/examples/src/examples.ts
index d69ddeb63a..bd80e6f5dd 100644
--- a/libs/design/loading-icon/examples/src/examples.ts
+++ b/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,
];
diff --git a/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.html b/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.html
deleted file mode 100644
index 22d587e961..0000000000
--- a/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.html
+++ /dev/null
@@ -1 +0,0 @@
-
diff --git a/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.ts b/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.ts
deleted file mode 100644
index 0d4c8c74aa..0000000000
--- a/libs/design/loading-icon/examples/src/loading-icon-diameter/loading-icon-diameter.component.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import {
- ChangeDetectionStrategy,
- Component,
-} from '@angular/core';
-
-import { DAFF_LOADING_ICON_COMPONENTS } from '@daffodil/design/loading-icon';
-
-@Component({
- // eslint-disable-next-line @angular-eslint/component-selector
- selector: 'loading-icon-diameter',
- templateUrl: './loading-icon-diameter.component.html',
- changeDetection: ChangeDetectionStrategy.OnPush,
- standalone: true,
- imports: [
- DAFF_LOADING_ICON_COMPONENTS,
- ],
-})
-export class LoadingIconDiameterComponent { }
diff --git a/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss b/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss
index 062fb98f85..cd01750af4 100644
--- a/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss
+++ b/libs/design/loading-icon/src/loading-icon/loading-icon.component.scss
@@ -16,6 +16,7 @@ $angle: 270 - $max-percentage-fill * 360;
:host {
display: flex;
width: 100%;
+ max-width: 4rem;
}
.daff-loading-icon {
diff --git a/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts b/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts
index 9b9581a892..0124747fd3 100644
--- a/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts
+++ b/libs/design/loading-icon/src/loading-icon/loading-icon.component.spec.ts
@@ -14,7 +14,7 @@ import { DaffPalette } from '@daffodil/design';
import { DaffLoadingIconComponent } from './loading-icon.component';
@Component({
- template: '',
+ template: '',
standalone: true,
imports: [
DaffLoadingIconComponent,
@@ -22,7 +22,6 @@ import { DaffLoadingIconComponent } from './loading-icon.component';
})
class WrapperComponent {
color: DaffPalette;
- diameter = 60;
}
describe('@daffodil/design/loading-icon | DaffLoadingIconComponent', () => {
@@ -44,7 +43,7 @@ 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();
});
@@ -52,22 +51,10 @@ describe('@daffodil/design/loading-icon | DaffLoadingIconComponent', () => {
expect(wrapper).toBeTruthy();
});
- describe('', () => {
- 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', () => {
diff --git a/libs/design/loading-icon/src/loading-icon/loading-icon.component.ts b/libs/design/loading-icon/src/loading-icon/loading-icon.component.ts
index 49aa83ecfd..8618ee0e40 100644
--- a/libs/design/loading-icon/src/loading-icon/loading-icon.component.ts
+++ b/libs/design/loading-icon/src/loading-icon/loading-icon.component.ts
@@ -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';
- }
}