feat(material-experimental/mdc-tooltip): implement MDC-based tooltip

.github/CODEOWNERS

@@ -117,6 +117,7 @@
 /src/material-experimental/mdc-slide-toggle/**     @crisbeto
 /src/material-experimental/mdc-slider/**           @devversion
 /src/material-experimental/mdc-tabs/**             @crisbeto
+/src/material-experimental/mdc-tooltip/**          @crisbeto
 /src/material-experimental/mdc-sidenav/**          @crisbeto
 /src/material-experimental/mdc-table/**            @andrewseguin
 /src/material-experimental/mdc-theming/**          @mmalerba
@@ -197,6 +198,7 @@
 /src/dev-app/mdc-slider/**                         @devversion
 /src/dev-app/mdc-table/**                          @andrewseguin
 /src/dev-app/mdc-tabs/**                           @crisbeto
+/src/dev-app/mdc-tooltip/**                        @crisbeto
 /src/dev-app/menu/**                               @crisbeto
 /src/dev-app/menubar/**                            @jelbourn @andy9775
 /src/dev-app/overlay/**                            @jelbourn @crisbeto

.ng-dev/commit-message.ts

@@ -64,6 +64,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/mdc-snack-bar',
     'material-experimental/mdc-table',
     'material-experimental/mdc-tabs',
+    'material-experimental/mdc-tooltip',
     'material-experimental/mdc-theming',
     'material-experimental/mdc-typography',
     'material-experimental/menubar',

rollup-globals.bzl

@@ -67,6 +67,7 @@ ROLLUP_GLOBALS = {
     "@material/tab-indicator": "mdc.tabIndicator",
     "@material/tab-scroller": "mdc.tabScroller",
     "@material/textfield": "mdc.textfield",
+    "@material/tooltip": "mdc.tooltip",
     "@material/top-app-bar": "mdc.topAppBar",
 
     # Third-party libraries.

scripts/check-mdc-exports-config.ts

@@ -89,6 +89,11 @@ export const config = {
       '_MatTableDataSource',
       '_MAT_TEXT_COLUMN_TEMPLATE'
     ],
+    'mdc-tooltip': [
+      // Private symbols that are only exported for MDC.
+      '_MatTooltipBase',
+      '_TooltipComponentBase'
+    ],
     'mdc-checkbox/testing': [
       // Private symbols that are only exported for MDC.
       '_MatCheckboxHarnessBase'

src/dev-app/BUILD.bazel

@@ -67,6 +67,7 @@ ng_module(
         "//src/dev-app/mdc-snack-bar",
         "//src/dev-app/mdc-table",
         "//src/dev-app/mdc-tabs",
+        "//src/dev-app/mdc-tooltip",
         "//src/dev-app/menu",
         "//src/dev-app/menubar",
         "//src/dev-app/paginator",
@@ -163,6 +164,7 @@ filegroup(
         "@npm//:node_modules/@material/tab-scroller/dist/mdc.tabScroller.js",
         "@npm//:node_modules/@material/tab/dist/mdc.tab.js",
         "@npm//:node_modules/@material/textfield/dist/mdc.textfield.js",
+        "@npm//:node_modules/@material/tooltip/dist/mdc.tooltip.js",
         "@npm//:node_modules/@material/top-app-bar/dist/mdc.topAppBar.js",
         "@npm//:node_modules/@webcomponents/custom-elements/custom-elements.min.js",
         "@npm//:node_modules/core-js-bundle/index.js",

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

@@ -96,6 +96,7 @@ export class DevAppLayout {
     {name: 'MDC Progress Bar', route: '/mdc-progress-bar'},
     {name: 'MDC Progress Spinner', route: '/mdc-progress-spinner'},
     {name: 'MDC Tabs', route: '/mdc-tabs'},
+    {name: 'MDC Tooltip', route: '/mdc-tooltip'},
     {name: 'MDC Select', route: '/mdc-select'},
     {name: 'MDC Sidenav', route: '/mdc-sidenav'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},

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

@@ -112,6 +112,7 @@ export const DEV_APP_ROUTES: Routes = [
   {path: 'mdc-slider', loadChildren: 'mdc-slider/mdc-slider-demo-module#MdcSliderDemoModule'},
   {path: 'mdc-table', loadChildren: 'mdc-table/mdc-table-demo-module#MdcTableDemoModule'},
   {path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'},
+  {path: 'mdc-tooltip', loadChildren: 'mdc-tooltip/mdc-tooltip-demo-module#MdcTooltipDemoModule'},
   {path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'},
   {path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'},
   {path: 'platform', loadChildren: 'platform/platform-demo-module#PlatformDemoModule'},

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

@@ -0,0 +1,27 @@
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-tooltip",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-tooltip-demo.html",
+        ":mdc_tooltip_demo_scss",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-button",
+        "//src/material-experimental/mdc-form-field",
+        "//src/material-experimental/mdc-input",
+        "//src/material-experimental/mdc-select",
+        "//src/material-experimental/mdc-tooltip",
+        "@npm//@angular/common",
+        "@npm//@angular/forms",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_tooltip_demo_scss",
+    src = "mdc-tooltip-demo.scss",
+)

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

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {ReactiveFormsModule} from '@angular/forms';
+import {MatButtonModule} from '@angular/material-experimental/mdc-button';
+import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field';
+import {MatInputModule} from '@angular/material-experimental/mdc-input';
+import {MatSelectModule} from '@angular/material-experimental/mdc-select';
+import {MatTooltipModule} from '@angular/material-experimental/mdc-tooltip';
+import {RouterModule} from '@angular/router';
+import {MdcTooltipDemo} from './mdc-tooltip-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatTooltipModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatInputModule,
+    RouterModule.forChild([{path: '', component: MdcTooltipDemo}]),
+  ],
+  declarations: [MdcTooltipDemo],
+})
+export class MdcTooltipDemoModule {
+}

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

@@ -0,0 +1,36 @@
+<div class="demo-wrapper">
+  <div>
+    <mat-form-field class="demo-form-field">
+      <mat-label>Message</mat-label>
+      <input matInput [formControl]="message">
+    </mat-form-field>
+
+    <mat-form-field class="demo-form-field">
+      <mat-label>Show delay</mat-label>
+      <input matInput type="number" [formControl]="showDelay">
+      <mat-hint>milliseconds</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field class="demo-form-field">
+      <mat-label>Hide delay</mat-label>
+      <input matInput type="number" [formControl]="hideDelay">
+      <mat-hint>milliseconds</mat-hint>
+    </mat-form-field>
+
+    <mat-form-field class="demo-form-field">
+      <mat-label>Tooltip position</mat-label>
+      <mat-select [formControl]="position">
+        <mat-option *ngFor="let positionOption of positionOptions" [value]="positionOption">
+          {{positionOption}}
+        </mat-option>
+      </mat-select>
+    </mat-form-field>
+  </div>
+
+  <button
+    mat-raised-button
+    [matTooltip]="message.value"
+    [matTooltipShowDelay]="showDelay.value"
+    [matTooltipHideDelay]="hideDelay.value"
+    [matTooltipPosition]="position.value">Action</button>
+</div>

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

@@ -0,0 +1,15 @@
+.demo-wrapper {
+  // Prevent the container from stretching to 100%.
+  display: inline-block;
+
+  .mat-mdc-tooltip-trigger {
+    // Center the trigger relative to the content so that it's not flush against one of the
+    // viewport edges. This will guarantee that we always get the specified demo position.
+    margin: 32px auto;
+    display: block;
+  }
+}
+
+.demo-form-field {
+  margin: 0 8px;
+}

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

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {TooltipPosition} from '@angular/material-experimental/mdc-tooltip';
+
+@Component({
+  selector: 'mdc-tooltip-demo',
+  templateUrl: 'mdc-tooltip-demo.html',
+  styleUrls: ['mdc-tooltip-demo.css'],
+})
+export class MdcTooltipDemo {
+  message = new FormControl('Info about the action');
+  showDelay = new FormControl(0);
+  hideDelay = new FormControl(0);
+  positionOptions: TooltipPosition[] = ['below', 'after', 'before', 'above', 'left', 'right'];
+  position = new FormControl(this.positionOptions[0]);
+}

src/e2e-app/devserver-configure.js

@@ -38,6 +38,7 @@ require.config({
     '@material/tab-indicator': '@material/tab-indicator/dist/mdc.tabIndicator',
     '@material/tab-scroller': '@material/tab-scroller/dist/mdc.tabScroller',
     '@material/textfield': '@material/textfield/dist/mdc.textfield',
+    '@material/tooltip': '@material/tooltip/dist/mdc.tooltip',
     '@material/top-app-bar': '@material/top-app-bar/dist/mdc.topAppBar',
   }
 });

src/material-experimental/config.bzl

@@ -43,6 +43,7 @@ entryPoints = [
     "mdc-table/testing",
     "mdc-tabs",
     "mdc-tabs/testing",
+    "mdc-tooltip",
     "menubar",
     "popover-edit",
     "selection",

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

@@ -37,6 +37,7 @@ sass_library(
         "//src/material-experimental/mdc-snack-bar:mdc_snack_bar_scss_lib",
         "//src/material-experimental/mdc-table:mdc_table_scss_lib",
         "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
+        "//src/material-experimental/mdc-tooltip:mdc_tooltip_scss_lib",
         "//src/material/core:core_scss_lib",
         "//src/material/core:theming_scss_lib",
     ],

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

@@ -13,6 +13,7 @@
 @import '../mdc-snack-bar/snack-bar-theme';
 @import '../mdc-tabs/tabs-theme';
 @import '../mdc-table/table-theme';
+@import '../mdc-tooltip/tooltip-theme';
 @import '../mdc-paginator/paginator-theme';
 @import '../mdc-progress-bar/progress-bar-theme';
 @import '../mdc-progress-spinner/progress-spinner-theme';
@@ -46,5 +47,6 @@
     @include mat-mdc-form-field-theme($theme-or-color-config);
     @include mat-mdc-input-theme($theme-or-color-config);
     @include mat-mdc-tabs-theme($theme-or-color-config);
+    @include mat-mdc-tooltip-theme($theme-or-color-config);
   }
 }

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

@@ -0,0 +1,80 @@
+load(
+    "//tools:defaults.bzl",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+    "sass_binary",
+    "sass_library",
+)
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "mdc-tooltip",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = [
+            "**/*.spec.ts",
+        ],
+    ),
+    assets = [
+        ":tooltip_scss",
+    ] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-tooltip",
+    deps = [
+        "//src/material-experimental/mdc-core",
+        "//src/material/tooltip",
+        "@npm//@material/tooltip",
+    ],
+)
+
+sass_library(
+    name = "mdc_tooltip_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
+)
+
+sass_binary(
+    name = "tooltip_scss",
+    src = "tooltip.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+    ],
+)
+
+ng_test_library(
+    name = "tooltip_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = [
+            "**/*.e2e.spec.ts",
+        ],
+    ),
+    deps = [
+        ":mdc-tooltip",
+        "//src/cdk/a11y",
+        "//src/cdk/bidi",
+        "//src/cdk/keycodes",
+        "//src/cdk/overlay",
+        "//src/cdk/platform",
+        "//src/cdk/testing/private",
+        "@npm//@angular/animations",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    static_files = ["@npm//:node_modules/@material/tooltip/dist/mdc.tooltip.js"],
+    deps = [
+        ":tooltip_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)