Skip to content

Commit f8622fe

Browse files
crisbetowagnermaciel
crisbeto
authored and
wagnermaciel
committed
feat(material-experimental/mdc-tooltip): implement MDC-based tooltip (#21735)
Adds a tooltip directive based on top of MDC's styles.
1 parent b365761 commit f8622fe

31 files changed

+2073
-85
lines changed

‎.github/CODEOWNERS

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117
/src/material-experimental/mdc-slide-toggle/** @crisbeto
118118
/src/material-experimental/mdc-slider/** @devversion
119119
/src/material-experimental/mdc-tabs/** @crisbeto
120+
/src/material-experimental/mdc-tooltip/** @crisbeto
120121
/src/material-experimental/mdc-sidenav/** @crisbeto
121122
/src/material-experimental/mdc-table/** @andrewseguin
122123
/src/material-experimental/mdc-theming/** @mmalerba
@@ -197,6 +198,7 @@
197198
/src/dev-app/mdc-slider/** @devversion
198199
/src/dev-app/mdc-table/** @andrewseguin
199200
/src/dev-app/mdc-tabs/** @crisbeto
201+
/src/dev-app/mdc-tooltip/** @crisbeto
200202
/src/dev-app/menu/** @crisbeto
201203
/src/dev-app/menubar/** @jelbourn @andy9775
202204
/src/dev-app/overlay/** @jelbourn @crisbeto

‎.ng-dev/commit-message.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -64,6 +64,7 @@ export const commitMessage: CommitMessageConfig = {
6464
'material-experimental/mdc-snack-bar',
6565
'material-experimental/mdc-table',
6666
'material-experimental/mdc-tabs',
67+
'material-experimental/mdc-tooltip',
6768
'material-experimental/mdc-theming',
6869
'material-experimental/mdc-typography',
6970
'material-experimental/menubar',

‎rollup-globals.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ ROLLUP_GLOBALS = {
6767
"@material/tab-indicator": "mdc.tabIndicator",
6868
"@material/tab-scroller": "mdc.tabScroller",
6969
"@material/textfield": "mdc.textfield",
70+
"@material/tooltip": "mdc.tooltip",
7071
"@material/top-app-bar": "mdc.topAppBar",
7172

7273
# Third-party libraries.

‎scripts/check-mdc-exports-config.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,11 @@ export const config = {
9393
'_MatTableDataSource',
9494
'_MAT_TEXT_COLUMN_TEMPLATE'
9595
],
96+
'mdc-tooltip': [
97+
// Private symbols that are only exported for MDC.
98+
'_MatTooltipBase',
99+
'_TooltipComponentBase'
100+
],
96101
'mdc-checkbox/testing': [
97102
// Private symbols that are only exported for MDC.
98103
'_MatCheckboxHarnessBase'

‎src/dev-app/BUILD.bazel

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ ng_module(
6767
"//src/dev-app/mdc-snack-bar",
6868
"//src/dev-app/mdc-table",
6969
"//src/dev-app/mdc-tabs",
70+
"//src/dev-app/mdc-tooltip",
7071
"//src/dev-app/menu",
7172
"//src/dev-app/menubar",
7273
"//src/dev-app/paginator",
@@ -171,6 +172,7 @@ filegroup(
171172
"@npm//:node_modules/@material/tab-scroller/dist/mdc.tabScroller.js",
172173
"@npm//:node_modules/@material/tab/dist/mdc.tab.js",
173174
"@npm//:node_modules/@material/textfield/dist/mdc.textfield.js",
175+
"@npm//:node_modules/@material/tooltip/dist/mdc.tooltip.js",
174176
"@npm//:node_modules/@material/top-app-bar/dist/mdc.topAppBar.js",
175177
"@npm//:node_modules/@webcomponents/custom-elements/custom-elements.min.js",
176178
"@npm//:node_modules/core-js-bundle/index.js",

‎src/dev-app/dev-app/dev-app-layout.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,7 @@ export class DevAppLayout {
9696
{name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
9797
{name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
9898
{name: 'MDC Tabs', route: '/mdc-tabs'},
99+
{name: 'MDC Tooltip', route: '/mdc-tooltip'},
99100
{name: 'MDC Select', route: '/mdc-select'},
100101
{name: 'MDC Sidenav', route: '/mdc-sidenav'},
101102
{name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},

‎src/dev-app/dev-app/routes.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,7 @@ export const DEV_APP_ROUTES: Routes = [
112112
{path: 'mdc-slider', loadChildren: 'mdc-slider/mdc-slider-demo-module#MdcSliderDemoModule'},
113113
{path: 'mdc-table', loadChildren: 'mdc-table/mdc-table-demo-module#MdcTableDemoModule'},
114114
{path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'},
115+
{path: 'mdc-tooltip', loadChildren: 'mdc-tooltip/mdc-tooltip-demo-module#MdcTooltipDemoModule'},
115116
{path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'},
116117
{path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'},
117118
{path: 'platform', loadChildren: 'platform/platform-demo-module#PlatformDemoModule'},

‎src/dev-app/mdc-tooltip/BUILD.bazel

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
load("//tools:defaults.bzl", "ng_module", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_module(
6+
name = "mdc-tooltip",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"mdc-tooltip-demo.html",
10+
":mdc_tooltip_demo_scss",
11+
],
12+
deps = [
13+
"//src/material-experimental/mdc-button",
14+
"//src/material-experimental/mdc-form-field",
15+
"//src/material-experimental/mdc-input",
16+
"//src/material-experimental/mdc-select",
17+
"//src/material-experimental/mdc-tooltip",
18+
"@npm//@angular/common",
19+
"@npm//@angular/forms",
20+
"@npm//@angular/router",
21+
],
22+
)
23+
24+
sass_binary(
25+
name = "mdc_tooltip_demo_scss",
26+
src = "mdc-tooltip-demo.scss",
27+
)

‎src/dev-app/mdc-tooltip/mdc-tooltip-demo-module.ts

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {NgModule} from '@angular/core';
10+
import {CommonModule} from '@angular/common';
11+
import {ReactiveFormsModule} from '@angular/forms';
12+
import {MatButtonModule} from '@angular/material-experimental/mdc-button';
13+
import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
14+
import {MatInputModule} from '@angular/material-experimental/mdc-input';
15+
import {MatSelectModule} from '@angular/material-experimental/mdc-select';
16+
import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
17+
import {RouterModule} from '@angular/router';
18+
import {MdcTooltipDemo} from './mdc-tooltip-demo';
19+
20+
@NgModule({
21+
imports: [
22+
CommonModule,
23+
ReactiveFormsModule,
24+
MatTooltipModule,
25+
MatButtonModule,
26+
MatFormFieldModule,
27+
MatSelectModule,
28+
MatInputModule,
29+
RouterModule.forChild([{path: '', component: MdcTooltipDemo}]),
30+
],
31+
declarations: [MdcTooltipDemo],
32+
})
33+
export class MdcTooltipDemoModule {
34+
}

‎src/dev-app/mdc-tooltip/mdc-tooltip-demo.html

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<div class="demo-wrapper">
2+
<div>
3+
<mat-form-field class="demo-form-field">
4+
<mat-label>Message</mat-label>
5+
<input matInput [formControl]="message">
6+
</mat-form-field>
7+
8+
<mat-form-field class="demo-form-field">
9+
<mat-label>Show delay</mat-label>
10+
<input matInput type="number" [formControl]="showDelay">
11+
<mat-hint>milliseconds</mat-hint>
12+
</mat-form-field>
13+
14+
<mat-form-field class="demo-form-field">
15+
<mat-label>Hide delay</mat-label>
16+
<input matInput type="number" [formControl]="hideDelay">
17+
<mat-hint>milliseconds</mat-hint>
18+
</mat-form-field>
19+
20+
<mat-form-field class="demo-form-field">
21+
<mat-label>Tooltip position</mat-label>
22+
<mat-select [formControl]="position">
23+
<mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
24+
{{positionOption}}
25+
</mat-option>
26+
</mat-select>
27+
</mat-form-field>
28+
</div>
29+
30+
<button
31+
mat-raised-button
32+
[matTooltip]="message.value"
33+
[matTooltipShowDelay]="showDelay.value"
34+
[matTooltipHideDelay]="hideDelay.value"
35+
[matTooltipPosition]="position.value">Action</button>
36+
</div>

‎src/dev-app/mdc-tooltip/mdc-tooltip-demo.scss

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
.demo-wrapper {
2+
// Prevent the container from stretching to 100%.
3+
display: inline-block;
4+
5+
.mat-mdc-tooltip-trigger {
6+
// Center the trigger relative to the content so that it's not flush against one of the
7+
// viewport edges. This will guarantee that we always get the specified demo position.
8+
margin: 32px auto;
9+
display: block;
10+
}
11+
}
12+
13+
.demo-form-field {
14+
margin: 0 8px;
15+
}

‎src/dev-app/mdc-tooltip/mdc-tooltip-demo.ts

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/**
2+
* @license
3+
* Copyright Google LLC All Rights Reserved.
4+
*
5+
* Use of this source code is governed by an MIT-style license that can be
6+
* found in the LICENSE file at https://angular.io/license
7+
*/
8+
9+
import {Component} from '@angular/core';
10+
import {FormControl} from '@angular/forms';
11+
import {TooltipPosition} from '@angular/material-experimental/mdc-tooltip';
12+
13+
@Component({
14+
selector: 'mdc-tooltip-demo',
15+
templateUrl: 'mdc-tooltip-demo.html',
16+
styleUrls: ['mdc-tooltip-demo.css'],
17+
})
18+
export class MdcTooltipDemo {
19+
message = new FormControl('Info about the action');
20+
showDelay = new FormControl(0);
21+
hideDelay = new FormControl(0);
22+
positionOptions: TooltipPosition[] = ['below', 'after', 'before', 'above', 'left', 'right'];
23+
position = new FormControl(this.positionOptions[0]);
24+
}

‎src/e2e-app/devserver-configure.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ require.config({
3838
'@material/tab-indicator': '@material/tab-indicator/dist/mdc.tabIndicator',
3939
'@material/tab-scroller': '@material/tab-scroller/dist/mdc.tabScroller',
4040
'@material/textfield': '@material/textfield/dist/mdc.textfield',
41+
'@material/tooltip': '@material/tooltip/dist/mdc.tooltip',
4142
'@material/top-app-bar': '@material/top-app-bar/dist/mdc.topAppBar',
4243
}
4344
});

‎src/material-experimental/config.bzl

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@ entryPoints = [
4343
"mdc-table/testing",
4444
"mdc-tabs",
4545
"mdc-tabs/testing",
46+
"mdc-tooltip",
4647
"menubar",
4748
"popover-edit",
4849
"selection",

‎src/material-experimental/mdc-theming/BUILD.bazel

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ sass_library(
3737
"//src/material-experimental/mdc-snack-bar:mdc_snack_bar_scss_lib",
3838
"//src/material-experimental/mdc-table:mdc_table_scss_lib",
3939
"//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
40+
"//src/material-experimental/mdc-tooltip:mdc_tooltip_scss_lib",
4041
"//src/material/core:core_scss_lib",
4142
"//src/material/core:theming_scss_lib",
4243
],

‎src/material-experimental/mdc-theming/_all-theme.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
@import '../mdc-snack-bar/snack-bar-theme';
1414
@import '../mdc-tabs/tabs-theme';
1515
@import '../mdc-table/table-theme';
16+
@import '../mdc-tooltip/tooltip-theme';
1617
@import '../mdc-paginator/paginator-theme';
1718
@import '../mdc-progress-bar/progress-bar-theme';
1819
@import '../mdc-progress-spinner/progress-spinner-theme';
@@ -46,5 +47,6 @@
4647
@include mat-mdc-form-field-theme($theme-or-color-config);
4748
@include mat-mdc-input-theme($theme-or-color-config);
4849
@include mat-mdc-tabs-theme($theme-or-color-config);
50+
@include mat-mdc-tooltip-theme($theme-or-color-config);
4951
}
5052
}

‎src/material-experimental/mdc-tooltip/BUILD.bazel

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
load(
2+
"//tools:defaults.bzl",
3+
"ng_module",
4+
"ng_test_library",
5+
"ng_web_test_suite",
6+
"sass_binary",
7+
"sass_library",
8+
)
9+
10+
package(default_visibility = ["//visibility:public"])
11+
12+
ng_module(
13+
name = "mdc-tooltip",
14+
srcs = glob(
15+
["**/*.ts"],
16+
exclude = [
17+
"**/*.spec.ts",
18+
],
19+
),
20+
assets = [
21+
":tooltip_scss",
22+
] + glob(["**/*.html"]),
23+
module_name = "@angular/material-experimental/mdc-tooltip",
24+
deps = [
25+
"//src/material-experimental/mdc-core",
26+
"//src/material/tooltip",
27+
"@npm//@material/tooltip",
28+
],
29+
)
30+
31+
sass_library(
32+
name = "mdc_tooltip_scss_lib",
33+
srcs = glob(["**/_*.scss"]),
34+
deps = [
35+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
36+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
37+
],
38+
)
39+
40+
sass_binary(
41+
name = "tooltip_scss",
42+
src = "tooltip.scss",
43+
include_paths = [
44+
"external/npm/node_modules",
45+
],
46+
deps = [
47+
"//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
48+
"//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
49+
],
50+
)
51+
52+
ng_test_library(
53+
name = "tooltip_tests_lib",
54+
srcs = glob(
55+
["**/*.spec.ts"],
56+
exclude = [
57+
"**/*.e2e.spec.ts",
58+
],
59+
),
60+
deps = [
61+
":mdc-tooltip",
62+
"//src/cdk/a11y",
63+
"//src/cdk/bidi",
64+
"//src/cdk/keycodes",
65+
"//src/cdk/overlay",
66+
"//src/cdk/platform",
67+
"//src/cdk/testing/private",
68+
"@npm//@angular/animations",
69+
"@npm//@angular/platform-browser",
70+
],
71+
)
72+
73+
ng_web_test_suite(
74+
name = "unit_tests",
75+
static_files = ["@npm//:node_modules/@material/tooltip/dist/mdc.tooltip.js"],
76+
deps = [
77+
":tooltip_tests_lib",
78+
"//src/material-experimental:mdc_require_config.js",
79+
],
80+
)

0 commit comments

Comments
 (0)