fix(tooltip): apply default size and position

closes #370
vmware-clarity · Nov 3, 2022 · 4089762 · 4089762
1 parent 84a01c3
commit 4089762
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 5 deletions.
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
@@ -4381,13 +4381,15 @@ export class ClrTooltip {
 }
 
 // @public (undocumented)
-export class ClrTooltipContent extends AbstractPopover {
+export class ClrTooltipContent extends AbstractPopover implements OnInit {
     // Warning: (ae-forgotten-export) The symbol "TooltipIdService" needs to be exported by the entry point index.d.ts
     constructor(injector: Injector, parentHost: ElementRef, tooltipIdService: TooltipIdService);
     // (undocumented)
     get id(): string;
     set id(value: string);
     // (undocumented)
+    ngOnInit(): void;
+    // (undocumented)
     get position(): string;
     set position(value: string);
     // (undocumented)

diff --git a/projects/angular/src/popover/tooltip/tooltip-content.spec.ts b/projects/angular/src/popover/tooltip/tooltip-content.spec.ts
@@ -13,6 +13,15 @@ import { TooltipIdService } from './providers/tooltip-id.service';
 import { ClrTooltipContent } from './tooltip-content';
 import { ClrTooltipModule } from './tooltip.module';
 
+@Component({
+  template: `
+    <clr-tooltip>
+      <clr-tooltip-content>Hello world</clr-tooltip-content>
+    </clr-tooltip>
+  `,
+})
+class DefaultTest {}
+
 @Component({
   template: `
     <clr-tooltip>
@@ -44,6 +53,24 @@ interface TooltipContext<H> extends TestContext<ClrTooltipContent, H> {
 export default function (): void {
   describe('TooltipContent component', function () {
     describe('Template API', function () {
+      describe('defaults', function () {
+        spec(ClrTooltipContent, DefaultTest, ClrTooltipModule, {
+          providers: [ClrPopoverToggleService, TooltipIdService],
+        });
+
+        beforeEach(function (this: TooltipContext<DefaultTest>) {
+          this.getClarityProvider(ClrPopoverToggleService).open = true;
+          this.tooltipIdService = this.getClarityProvider(TooltipIdService);
+          this.detectChanges();
+        });
+
+        it('sets the correct default classes', function (this: TooltipContext<DefaultTest>) {
+          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
@@ -4,7 +4,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, ElementRef, Inject, Injector, Input, Optional } from '@angular/core';
+import { Component, ElementRef, Inject, Injector, Input, OnInit, Optional } from '@angular/core';
 
 import { assertNever } from '../../utils/assert/assert.helpers';
 import { uniqueIdFactory } from '../../utils/id-generator/id-generator.service';
@@ -31,7 +31,7 @@ const defaultSize = 'sm';
     '[id]': 'id',
   },
 })
-export class ClrTooltipContent extends AbstractPopover {
+export class ClrTooltipContent extends AbstractPopover implements OnInit {
   constructor(
     injector: Injector,
     @Optional()
@@ -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);