Skip to content

Commit 85945ac

Browse files
ygggyggg
committed
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].
1 parent 3c9eaa2 commit 85945ac

File tree

6 files changed

+82
-51
lines changed

6 files changed

+82
-51
lines changed

‎src/framework/theme/components/tooltip/_tooltip.component.theme.scss‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,40 +5,46 @@
55
*/
66

77
@mixin nb-tooltip-status($status) {
8-
$color: nb-theme(tooltip-#{$status}-bg);
8+
$background-color: nb-theme(tooltip-#{$status}-background-color);
9+
$text-color: nb-theme(tooltip-#{$status}-text-color);
910

10-
&.#{$status}-tooltip {
11-
background: $color;
11+
&.status-#{$status} {
12+
background: $background-color;
1213
.arrow {
13-
border-bottom-color: $color;
14+
border-bottom-color: $background-color;
1415
}
1516

1617
.content {
17-
color: nb-theme(tooltip-status-fg);
18+
color: $text-color;
1819
}
1920
}
2021
}
2122

2223
@mixin nb-tooltip-theme {
2324
nb-tooltip {
24-
$arrow-size: 5px;
25-
$arrow-content-size: 3px;
25+
$arrow-size: 6px;
26+
box-shadow: nb-theme(tooltip-shadow);
2627

27-
background: nb-theme(tooltip-bg);
28+
background: nb-theme(tooltip-background-color);
29+
border: nb-theme(tooltip-border-width) nb-theme(tooltip-border-style) nb-theme(tooltip-border-color);
30+
border-radius: nb-theme(tooltip-border-radius);
31+
padding: nb-theme(tooltip-padding);
32+
max-width: nb-theme(tooltip-max-width);
2833

2934
.content {
30-
font-size: nb-theme(tooltip-font-size);
31-
color: nb-theme(tooltip-fg);
35+
color: nb-theme(tooltip-text-color);
36+
font-family: nb-theme(tooltip-text-font-family);
37+
font-size: nb-theme(tooltip-text-font-size);
38+
font-weight: nb-theme(tooltip-text-font-weight);
39+
line-height: nb-theme(tooltip-text-line-height);
3240
}
3341

3442
.arrow {
35-
border-bottom: $arrow-size solid nb-theme(tooltip-bg);
43+
border-bottom: $arrow-size nb-theme(tooltip-border-style) nb-theme(tooltip-background-color);
3644
}
3745

38-
@include nb-tooltip-status('primary');
39-
@include nb-tooltip-status('danger');
40-
@include nb-tooltip-status('success');
41-
@include nb-tooltip-status('warning');
42-
@include nb-tooltip-status('info');
46+
@each $status in nb-get-statuses() {
47+
@include nb-tooltip-status($status);
48+
}
4349
}
4450
}

‎src/framework/theme/components/tooltip/tooltip.component.scss‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,13 @@
55
*/
66

77
:host {
8-
$arrow-size: 5px;
8+
$arrow-size: 6px;
99

1010
z-index: 10000;
11-
border-radius: 5px;
1211

1312
.content {
14-
padding: 0.5rem 1.25rem;
1513
display: flex;
14+
align-items: center;
1615
}
1716

1817
&.right .content {
@@ -27,11 +26,8 @@
2726
}
2827

2928
nb-icon {
30-
font-size: 1.25rem;
31-
}
32-
33-
span {
34-
line-height: 1.25rem;
29+
font-size: 1.1em;
30+
min-width: 1em;
3531
}
3632

3733
nb-icon + span {

‎src/framework/theme/components/tooltip/tooltip.component.ts‎

Lines changed: 27 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,10 @@
55
*/
66

77
import { Component, HostBinding, Input } from '@angular/core';
8+
import { animate, state, style, transition, trigger } from '@angular/animations';
89

10+
import { NbComponentStatus } from '../component-status';
911
import { NbPosition, NbRenderableContainer } from '../cdk';
10-
import { animate, state, style, transition, trigger } from '@angular/animations';
1112

1213

1314
/**
@@ -16,16 +17,29 @@ import { animate, state, style, transition, trigger } from '@angular/animations'
1617
*
1718
* @styles
1819
*
19-
* tooltip-bg
20-
* tooltip-primary-bg
21-
* tooltip-info-bg
22-
* tooltip-success-bg
23-
* tooltip-warning-bg
24-
* tooltip-danger-bg
25-
* tooltip-fg
26-
* tooltip-shadow
27-
* tooltip-font-size
28-
*
20+
* tooltip-background-color:
21+
* tooltip-border-color:
22+
* tooltip-border-style:
23+
* tooltip-border-width:
24+
* tooltip-border-radius:
25+
* tooltip-padding:
26+
* tooltip-text-color:
27+
* tooltip-text-font-family:
28+
* tooltip-text-font-size:
29+
* tooltip-text-font-weight:
30+
* tooltip-text-line-height:
31+
* tooltip-max-width:
32+
* tooltip-primary-background-color:
33+
* tooltip-primary-text-color:
34+
* tooltip-info-background-color:
35+
* tooltip-info-text-color:
36+
* tooltip-success-background-color:
37+
* tooltip-success-text-color:
38+
* tooltip-warning-background-color:
39+
* tooltip-warning-text-color:
40+
* tooltip-danger-background-color:
41+
* tooltip-danger-text-color:
42+
* tooltip-shadow:
2943
*/
3044
@Component({
3145
selector: 'nb-tooltip',
@@ -72,10 +86,10 @@ export class NbTooltipComponent implements NbRenderableContainer {
7286
}
7387

7488
@Input()
75-
context: { icon?: string, status?: string } = {};
89+
context: { icon?: string, status?: '' | NbComponentStatus } = {};
7690

7791
get statusClass() {
78-
return this.context.status ? `${this.context.status}-tooltip` : '';
92+
return this.context.status ? `status-${this.context.status}` : '';
7993
}
8094

8195
/**

‎src/framework/theme/components/tooltip/tooltip.directive.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
import { AfterViewInit, Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit } from '@angular/core';
88

9+
import { NbComponentStatus } from '../component-status';
910
import { NbAdjustment, NbDynamicOverlay, NbDynamicOverlayHandler, NbPosition, NbTrigger } from '../cdk';
1011
import { NbTooltipComponent } from './tooltip.component';
1112

@@ -19,7 +20,7 @@ import { NbTooltipComponent } from './tooltip.component';
1920
* ```ts
2021
* @NgModule({
2122
* imports: [
22-
* // ...
23+
* // ...
2324
* NbTooltipModule,
2425
* ],
2526
* })
@@ -32,7 +33,7 @@ import { NbTooltipComponent } from './tooltip.component';
3233
* Tooltip can accept a hint text and/or an icon:
3334
* @stacked-example(With Icon, tooltip/tooltip-with-icon.component)
3435
*
35-
* Same way as Popover, tooltip can accept placement position with `nbTooltipPlacement` proprety:
36+
* Same way as Popover, tooltip can accept placement position with `nbTooltipPlacement` property:
3637
* @stacked-example(Placements, tooltip/tooltip-placements.component)
3738
*
3839
* It is also possible to specify tooltip color using `nbTooltipStatus` property:
@@ -90,7 +91,7 @@ export class NbTooltipDirective implements OnInit, OnChanges, AfterViewInit, OnD
9091
* @param {string} status
9192
*/
9293
@Input('nbTooltipStatus')
93-
set status(status: string) {
94+
set status(status: '' | NbComponentStatus) {
9495
this.context = Object.assign(this.context, {status});
9596
}
9697

‎src/framework/theme/components/tooltip/tooltip.spec.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -260,7 +260,7 @@ describe('Directive: NbTooltipDirective', () => {
260260
fixture.detectChanges();
261261

262262
const iconContainer = fixture.nativeElement.querySelector('nb-tooltip');
263-
expect(iconContainer.className).toContain('danger-tooltip');
263+
expect(iconContainer.className).toContain('status-danger');
264264
});
265265

266266
});

‎src/framework/theme/styles/themes/_default.scss‎

Lines changed: 24 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -979,16 +979,30 @@ $theme: (
979979

980980
overlay-backdrop-bg: rgba(0, 0, 0, 0.288),
981981

982-
tooltip-bg: color-fg-text,
983-
tooltip-primary-bg: color-primary,
984-
tooltip-info-bg: color-info,
985-
tooltip-success-bg: color-success,
986-
tooltip-warning-bg: color-warning,
987-
tooltip-danger-bg: color-danger,
988-
tooltip-fg: color-bg-active,
989-
tooltip-status-fg: color-bg-active,
990-
tooltip-shadow: shadow,
991-
tooltip-font-size: font-size,
982+
tooltip-background-color: color-black,
983+
tooltip-border-color: transparent,
984+
tooltip-border-style: dashed,
985+
tooltip-border-width: 0,
986+
tooltip-border-radius: 0.5rem,
987+
tooltip-padding: 0.6rem 1rem 0.5rem,
988+
tooltip-text-color: color-white,
989+
tooltip-text-font-family: text-caption-font-family,
990+
tooltip-text-font-size: text-caption-font-size,
991+
tooltip-text-font-weight: text-caption-font-weight,
992+
tooltip-text-line-height: text-caption-line-height,
993+
tooltip-max-width: 16rem,
994+
995+
tooltip-primary-background-color: color-primary,
996+
tooltip-primary-text-color: text-light-color,
997+
tooltip-info-background-color: color-info,
998+
tooltip-info-text-color: text-light-color,
999+
tooltip-success-background-color: color-success,
1000+
tooltip-success-text-color: text-light-color,
1001+
tooltip-warning-background-color: color-warning,
1002+
tooltip-warning-text-color: text-light-color,
1003+
tooltip-danger-background-color: color-danger,
1004+
tooltip-danger-text-color: text-light-color,
1005+
tooltip-shadow: none,
9921006

9931007
select-border-width: 2px,
9941008
select-max-height: 20rem,

0 commit comments

Comments
 (0)