diff --git a/projects/components/src/label-tag/label-tag.component.scss b/projects/components/src/label-tag/label-tag.component.scss
index 61f082026..958522565 100644
--- a/projects/components/src/label-tag/label-tag.component.scss
+++ b/projects/components/src/label-tag/label-tag.component.scss
@@ -12,6 +12,7 @@
display: flex;
align-items: center;
justify-content: center;
+ gap: 4px;
// Default color. Could be overridden by the component
background-color: $blue-1;
diff --git a/projects/components/src/label-tag/label-tag.component.test.ts b/projects/components/src/label-tag/label-tag.component.test.ts
index 8391f42d9..0fd2b94c9 100644
--- a/projects/components/src/label-tag/label-tag.component.test.ts
+++ b/projects/components/src/label-tag/label-tag.component.test.ts
@@ -1,4 +1,6 @@
import { createHostFactory, Spectator } from '@ngneat/spectator/jest';
+import { MockComponent } from 'ng-mocks';
+import { IconComponent } from '../icon/icon.component';
import { LabelTagComponent } from './label-tag.component';
describe('Label Tag Component', () => {
@@ -6,14 +8,18 @@ describe('Label Tag Component', () => {
const createHost = createHostFactory({
component: LabelTagComponent,
- shallow: true
+ shallow: true,
+ declarations: [MockComponent(IconComponent)]
});
test('renders the beta tag with given parameters', () => {
- spectator = createHost('');
+ spectator = createHost(
+ ''
+ );
const labelElement = spectator.query('.label-tag') as HTMLElement;
expect(labelElement).toHaveText('Beta');
expect(labelElement.style.backgroundColor).toEqual('rgb(242, 208, 245)');
expect(labelElement.style.color).toEqual('rgb(148, 32, 159)');
+ expect(spectator.query(IconComponent)?.icon).toBe('test-icon');
});
});
diff --git a/projects/components/src/label-tag/label-tag.component.ts b/projects/components/src/label-tag/label-tag.component.ts
index cbfdff5e5..88f411680 100644
--- a/projects/components/src/label-tag/label-tag.component.ts
+++ b/projects/components/src/label-tag/label-tag.component.ts
@@ -1,5 +1,6 @@
import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Color } from '@hypertrace/common';
+import { IconSize } from '../icon/icon-size';
@Component({
selector: 'ht-label-tag',
@@ -7,6 +8,12 @@ import { Color } from '@hypertrace/common';
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
+
{{ this.label }}
`
@@ -20,4 +27,7 @@ export class LabelTagComponent {
@Input()
public backgroundColor?: Color;
+
+ @Input()
+ public prefixIcon?: string;
}
diff --git a/projects/components/src/label-tag/label-tag.module.ts b/projects/components/src/label-tag/label-tag.module.ts
index 25e8c98b8..c3fdba975 100644
--- a/projects/components/src/label-tag/label-tag.module.ts
+++ b/projects/components/src/label-tag/label-tag.module.ts
@@ -1,10 +1,11 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
+import { IconModule } from '../icon/icon.module';
import { LabelTagComponent } from './label-tag.component';
@NgModule({
declarations: [LabelTagComponent],
- imports: [CommonModule],
+ imports: [CommonModule, IconModule],
exports: [LabelTagComponent]
})
export class LabelTagModule {}