feat(tooltip): Eva style (#1345)

BREAKING CHANGE: Following tooltip theme properties were renamed: tooltip-bg -> tooltip-background-color tooltip-fg -> tooltip-text-color tooltip-font-size -> tooltip-text-font-size tooltip-status-fg -> tooltip-[status]-text-color tooltip-primary-bg -> tooltip-primary-background-color tooltip-info-bg -> tooltip-info-background-color tooltip-success-bg -> tooltip-success-background-color tooltip-warning-bg -> tooltip-warning-background-color tooltip-danger-bg -> tooltip-danger-background-color Tooltip status class renamed from [status-name]-tooltip to status-[status-name].
akveo · May 27, 2019 · 85945ac · 85945ac
1 parent 3c9eaa2
commit 85945ac
Show file tree

Hide file tree

Showing 6 changed files with 82 additions and 51 deletions.
diff --git a/src/framework/theme/components/tooltip/_tooltip.component.theme.scss b/src/framework/theme/components/tooltip/_tooltip.component.theme.scss
@@ -5,40 +5,46 @@
  */
 
 @mixin nb-tooltip-status($status) {
-  $color: nb-theme(tooltip-#{$status}-bg);
+  $background-color: nb-theme(tooltip-#{$status}-background-color);
+  $text-color: nb-theme(tooltip-#{$status}-text-color);
 
-  &.#{$status}-tooltip {
-    background: $color;
+  &.status-#{$status} {
+    background: $background-color;
     .arrow {
-      border-bottom-color: $color;
+      border-bottom-color: $background-color;
     }
 
     .content {
-      color: nb-theme(tooltip-status-fg);
+      color: $text-color;
     }
   }
 }
 
 @mixin nb-tooltip-theme {
   nb-tooltip {
-    $arrow-size: 5px;
-    $arrow-content-size: 3px;
+    $arrow-size: 6px;
+    box-shadow: nb-theme(tooltip-shadow);
 
-    background: nb-theme(tooltip-bg);
+    background: nb-theme(tooltip-background-color);
+    border: nb-theme(tooltip-border-width) nb-theme(tooltip-border-style) nb-theme(tooltip-border-color);
+    border-radius: nb-theme(tooltip-border-radius);
+    padding: nb-theme(tooltip-padding);
+    max-width: nb-theme(tooltip-max-width);
 
     .content {
-      font-size: nb-theme(tooltip-font-size);
-      color: nb-theme(tooltip-fg);
+      color: nb-theme(tooltip-text-color);
+      font-family: nb-theme(tooltip-text-font-family);
+      font-size: nb-theme(tooltip-text-font-size);
+      font-weight: nb-theme(tooltip-text-font-weight);
+      line-height: nb-theme(tooltip-text-line-height);
     }
 
     .arrow {
-      border-bottom: $arrow-size solid nb-theme(tooltip-bg);
+      border-bottom: $arrow-size nb-theme(tooltip-border-style) nb-theme(tooltip-background-color);
     }
 
-    @include nb-tooltip-status('primary');
-    @include nb-tooltip-status('danger');
-    @include nb-tooltip-status('success');
-    @include nb-tooltip-status('warning');
-    @include nb-tooltip-status('info');
+    @each $status in nb-get-statuses() {
+      @include nb-tooltip-status($status);
+    }
   }
 }
diff --git a/src/framework/theme/components/tooltip/tooltip.component.scss b/src/framework/theme/components/tooltip/tooltip.component.scss
@@ -5,14 +5,13 @@
  */
 
 :host {
-  $arrow-size: 5px;
+  $arrow-size: 6px;
 
   z-index: 10000;
-  border-radius: 5px;
 
   .content {
-    padding: 0.5rem 1.25rem;
     display: flex;
+    align-items: center;
   }
 
   &.right .content {
@@ -27,11 +26,8 @@
   }
 
   nb-icon {
-    font-size: 1.25rem;
-  }
-
-  span {
-    line-height: 1.25rem;
+    font-size: 1.1em;
+    min-width: 1em;
   }
 
   nb-icon + span {

diff --git a/src/framework/theme/components/tooltip/tooltip.component.ts b/src/framework/theme/components/tooltip/tooltip.component.ts
@@ -5,9 +5,10 @@
  */
 
 import { Component, HostBinding, Input } from '@angular/core';
+import { animate, state, style, transition, trigger } from '@angular/animations';
 
+import { NbComponentStatus } from '../component-status';
 import { NbPosition, NbRenderableContainer } from '../cdk';
-import { animate, state, style, transition, trigger } from '@angular/animations';
 
 
 /**
@@ -16,16 +17,29 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
  *
  * @styles
  *
- * tooltip-bg
- * tooltip-primary-bg
- * tooltip-info-bg
- * tooltip-success-bg
- * tooltip-warning-bg
- * tooltip-danger-bg
- * tooltip-fg
- * tooltip-shadow
- * tooltip-font-size
- *
+ * tooltip-background-color:
+ * tooltip-border-color:
+ * tooltip-border-style:
+ * tooltip-border-width:
+ * tooltip-border-radius:
+ * tooltip-padding:
+ * tooltip-text-color:
+ * tooltip-text-font-family:
+ * tooltip-text-font-size:
+ * tooltip-text-font-weight:
+ * tooltip-text-line-height:
+ * tooltip-max-width:
+ * tooltip-primary-background-color:
+ * tooltip-primary-text-color:
+ * tooltip-info-background-color:
+ * tooltip-info-text-color:
+ * tooltip-success-background-color:
+ * tooltip-success-text-color:
+ * tooltip-warning-background-color:
+ * tooltip-warning-text-color:
+ * tooltip-danger-background-color:
+ * tooltip-danger-text-color:
+ * tooltip-shadow:
  */
 @Component({
   selector: 'nb-tooltip',
@@ -72,10 +86,10 @@ export class NbTooltipComponent implements NbRenderableContainer {
   }
 
   @Input()
-  context: { icon?: string, status?: string } = {};
+  context: { icon?: string, status?: '' | NbComponentStatus } = {};
 
   get statusClass() {
-    return this.context.status ? `${this.context.status}-tooltip` : '';
+    return this.context.status ? `status-${this.context.status}` : '';
   }
 
   /**

diff --git a/src/framework/theme/components/tooltip/tooltip.directive.ts b/src/framework/theme/components/tooltip/tooltip.directive.ts
@@ -6,6 +6,7 @@
 
 import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
 
+import { NbComponentStatus } from '../component-status';
 import { NbAdjustment, NbDynamicOverlay, NbDynamicOverlayHandler, NbPosition, NbTrigger } from '../cdk';
 import { NbTooltipComponent } from './tooltip.component';
 
@@ -19,7 +20,7 @@ import { NbTooltipComponent } from './tooltip.component';
  * ```ts
  * @NgModule({
  *   imports: [
- *   	// ...
+ *     // ...
  *     NbTooltipModule,
  *   ],
  * })
@@ -32,7 +33,7 @@ import { NbTooltipComponent } from './tooltip.component';
  * Tooltip can accept a hint text and/or an icon:
  * @stacked-example(With Icon, tooltip/tooltip-with-icon.component)
  *
- * Same way as Popover, tooltip can accept placement position with `nbTooltipPlacement` proprety:
+ * Same way as Popover, tooltip can accept placement position with `nbTooltipPlacement` property:
  * @stacked-example(Placements, tooltip/tooltip-placements.component)
  *
  * It is also possible to specify tooltip color using `nbTooltipStatus` property:
@@ -90,7 +91,7 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD
    * @param {string} status
    */
   @Input('nbTooltipStatus')
-  set status(status: string) {
+  set status(status: '' | NbComponentStatus) {
     this.context = Object.assign(this.context, {status});
   }
 

diff --git a/src/framework/theme/components/tooltip/tooltip.spec.ts b/src/framework/theme/components/tooltip/tooltip.spec.ts
@@ -260,7 +260,7 @@ describe('Directive: NbTooltipDirective', () => {
       fixture.detectChanges();
 
       const iconContainer = fixture.nativeElement.querySelector('nb-tooltip');
-      expect(iconContainer.className).toContain('danger-tooltip');
+      expect(iconContainer.className).toContain('status-danger');
     });
 
   });

diff --git a/src/framework/theme/styles/themes/_default.scss b/src/framework/theme/styles/themes/_default.scss
@@ -979,16 +979,30 @@ $theme: (
 
   overlay-backdrop-bg: rgba(0, 0, 0, 0.288),
 
-  tooltip-bg: color-fg-text,
-  tooltip-primary-bg: color-primary,
-  tooltip-info-bg: color-info,
-  tooltip-success-bg: color-success,
-  tooltip-warning-bg: color-warning,
-  tooltip-danger-bg: color-danger,
-  tooltip-fg: color-bg-active,
-  tooltip-status-fg: color-bg-active,
-  tooltip-shadow: shadow,
-  tooltip-font-size: font-size,
+  tooltip-background-color: color-black,
+  tooltip-border-color: transparent,
+  tooltip-border-style: dashed,
+  tooltip-border-width: 0,
+  tooltip-border-radius: 0.5rem,
+  tooltip-padding: 0.6rem 1rem 0.5rem,
+  tooltip-text-color: color-white,
+  tooltip-text-font-family: text-caption-font-family,
+  tooltip-text-font-size: text-caption-font-size,
+  tooltip-text-font-weight: text-caption-font-weight,
+  tooltip-text-line-height: text-caption-line-height,
+  tooltip-max-width: 16rem,
+
+  tooltip-primary-background-color: color-primary,
+  tooltip-primary-text-color: text-light-color,
+  tooltip-info-background-color: color-info,
+  tooltip-info-text-color: text-light-color,
+  tooltip-success-background-color: color-success,
+  tooltip-success-text-color: text-light-color,
+  tooltip-warning-background-color: color-warning,
+  tooltip-warning-text-color: text-light-color,
+  tooltip-danger-background-color: color-danger,
+  tooltip-danger-text-color: text-light-color,
+  tooltip-shadow: none,
 
   select-border-width: 2px,
   select-max-height: 20rem,