fix(tooltip): set default size and position classes

closes #370
vmware-clarity · Nov 2, 2022 · b04bbcd · b04bbcd
1 parent d5c6ba3
commit b04bbcd
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 2 deletions.
diff --git a/projects/angular/src/popover/tooltip/tooltip-content.spec.ts b/projects/angular/src/popover/tooltip/tooltip-content.spec.ts
@@ -38,6 +38,15 @@ class IdTest {
   idValue;
 }
 
+@Component({
+  template: `
+    <clr-tooltip>
+      <clr-tooltip-content>Hello world</clr-tooltip-content>
+    </clr-tooltip>
+  `,
+})
+class DefaultTest {}
+
 interface TooltipContext extends TestContext<ClrTooltipContent, SimpleTest> {
   toggleService: ClrPopoverToggleService;
   tooltipIdService: TooltipIdService;
@@ -46,6 +55,24 @@ interface TooltipContext extends TestContext<ClrTooltipContent, SimpleTest> {
 export default function (): void {
   describe('TooltipContent component', function () {
     describe('Template API', function (this: TooltipContext) {
+      describe('defaults', function () {
+        spec(ClrTooltipContent, DefaultTest, ClrTooltipModule, {
+          providers: [ClrPopoverToggleService, TooltipIdService],
+        });
+
+        beforeEach(function (this: TooltipContext) {
+          this.getClarityProvider(ClrPopoverToggleService).open = true;
+          this.tooltipIdService = this.getClarityProvider(TooltipIdService);
+          this.detectChanges();
+        });
+
+        it('sets the correct default classes', function (this: TooltipContext) {
+          expect(this.clarityElement.classList).toContain('tooltip-content');
+          expect(this.clarityElement.classList).toContain('tooltip-sm');
+          expect(this.clarityElement.classList).toContain('tooltip-right');
+        });
+      });
+
       describe('handles values for custom id', function () {
         spec(ClrTooltipContent, IdTest, ClrTooltipModule, {
           providers: [ClrPopoverToggleService, TooltipIdService],

diff --git a/projects/angular/src/popover/tooltip/tooltip-content.ts b/projects/angular/src/popover/tooltip/tooltip-content.ts
@@ -62,7 +62,7 @@ export class ClrTooltipContent extends AbstractPopover {
   }
   private _id: string;
 
-  private _position = defaultPosition;
+  private _position: string;
 
   get position() {
     return this._position;
@@ -107,7 +107,7 @@ export class ClrTooltipContent extends AbstractPopover {
     }
   }
 
-  private _size = defaultSize;
+  private _size: string;
 
   get size() {
     return this._size;
@@ -122,6 +122,11 @@ export class ClrTooltipContent extends AbstractPopover {
     this.updateCssClass({ oldClass: `tooltip-${oldSize}`, newClass: `tooltip-${newSize}` });
   }
 
+  ngOnInit() {
+    this.size = this.size || defaultSize;
+    this.position = this.position || defaultPosition;
+  }
+
   private updateCssClass({ oldClass, newClass }: { oldClass: string; newClass: string }) {
     this.renderer.removeClass(this.el.nativeElement, oldClass);
     this.renderer.addClass(this.el.nativeElement, newClass);