feat(material/tooltip): migrate MDC examples (#25495)

.github/CODEOWNERS

@@ -207,7 +207,7 @@
 /src/dev-app/mdc-slider/**                             @devversion
 /src/dev-app/legacy-table/**                           @andrewseguin
 /src/dev-app/mdc-tabs/**                               @crisbeto
-/src/dev-app/mdc-tooltip/**                            @crisbeto
+/src/dev-app/legacy-tooltip/**                         @crisbeto
 /src/dev-app/menu/**                                   @crisbeto
 /src/dev-app/menubar/**                                @jelbourn
 /src/dev-app/overlay/**                                @jelbourn @crisbeto

src/components-examples/material/legacy-tooltip/BUILD.bazel

@@ -0,0 +1,58 @@
+load("//tools:defaults.bzl", "ng_module", "ng_test_library", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "legacy-tooltip",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = glob([
+        "**/*.html",
+        "**/*.css",
+    ]),
+    deps = [
+        "//src/cdk/scrolling",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/legacy-button",
+        "//src/material/legacy-checkbox",
+        "//src/material/legacy-input",
+        "//src/material/legacy-select",
+        "//src/material/legacy-tooltip",
+        "//src/material/legacy-tooltip/testing",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+        "@npm//@types/jasmine",
+    ],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob([
+        "**/*.html",
+        "**/*.css",
+        "**/*.ts",
+    ]),
+)
+
+ng_test_library(
+    name = "unit_tests_lib",
+    srcs = glob(["**/*.spec.ts"]),
+    deps = [
+        ":legacy-tooltip",
+        "//src/cdk/testing",
+        "//src/cdk/testing/testbed",
+        "//src/material/legacy-tooltip",
+        "//src/material/legacy-tooltip/testing",
+        "@npm//@angular/platform-browser",
+        "@npm//@angular/platform-browser-dynamic",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_tests_lib"],
+)

src/components-examples/material/legacy-tooltip/index.ts

@@ -0,0 +1,64 @@
+import {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {ReactiveFormsModule} from '@angular/forms';
+import {ScrollingModule} from '@angular/cdk/scrolling';
+import {MatLegacyButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatLegacyInputModule} from '@angular/material/legacy-input';
+import {MatLegacySelectModule} from '@angular/material/legacy-select';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
+import {TooltipAutoHideExample} from './tooltip-auto-hide/tooltip-auto-hide-example';
+import {TooltipCustomClassExample} from './tooltip-custom-class/tooltip-custom-class-example';
+import {TooltipDelayExample} from './tooltip-delay/tooltip-delay-example';
+import {TooltipDisabledExample} from './tooltip-disabled/tooltip-disabled-example';
+import {TooltipManualExample} from './tooltip-manual/tooltip-manual-example';
+import {TooltipMessageExample} from './tooltip-message/tooltip-message-example';
+import {TooltipModifiedDefaultsExample} from './tooltip-modified-defaults/tooltip-modified-defaults-example';
+import {TooltipOverviewExample} from './tooltip-overview/tooltip-overview-example';
+import {TooltipPositionExample} from './tooltip-position/tooltip-position-example';
+import {TooltipPositionAtOriginExample} from './tooltip-position-at-origin/tooltip-position-at-origin-example';
+import {TooltipHarnessExample} from './tooltip-harness/tooltip-harness-example';
+
+export {
+  TooltipAutoHideExample,
+  TooltipCustomClassExample,
+  TooltipDelayExample,
+  TooltipDisabledExample,
+  TooltipHarnessExample,
+  TooltipManualExample,
+  TooltipMessageExample,
+  TooltipModifiedDefaultsExample,
+  TooltipOverviewExample,
+  TooltipPositionExample,
+  TooltipPositionAtOriginExample,
+};
+
+const EXAMPLES = [
+  TooltipAutoHideExample,
+  TooltipCustomClassExample,
+  TooltipDelayExample,
+  TooltipDisabledExample,
+  TooltipHarnessExample,
+  TooltipManualExample,
+  TooltipMessageExample,
+  TooltipModifiedDefaultsExample,
+  TooltipOverviewExample,
+  TooltipPositionExample,
+  TooltipPositionAtOriginExample,
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    MatLegacyButtonModule,
+    MatLegacyCheckboxModule,
+    MatLegacyInputModule,
+    MatLegacySelectModule,
+    MatLegacyTooltipModule,
+    ReactiveFormsModule,
+    ScrollingModule, // Required for the auto-scrolling example
+  ],
+  declarations: EXAMPLES,
+  exports: EXAMPLES,
+})
+export class TooltipExamplesModule {}

src/components-examples/material/legacy-tooltip/tooltip-auto-hide/tooltip-auto-hide-example.css

@@ -0,0 +1,10 @@
+.example-button {
+  display: block;
+  margin: 80px auto 400px;
+}
+
+.example-container {
+  height: 200px;
+  overflow: auto;
+  border: 1px solid #ccc;
+}

src/components-examples/material/legacy-tooltip/tooltip-auto-hide/tooltip-auto-hide-example.html

@@ -0,0 +1,19 @@
+<mat-form-field appearance="fill">
+  <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 class="example-container" cdkScrollable>
+  <button mat-raised-button #tooltip="matTooltip"
+          matTooltip="Info about the action"
+          [matTooltipPosition]="position.value!"
+          matTooltipHideDelay="100000"
+          aria-label="Button that displays a tooltip that hides when scrolled out of the container"
+          class="example-button">
+    Action
+  </button>
+</div>

src/components-examples/material/legacy-tooltip/tooltip-auto-hide/tooltip-auto-hide-example.ts

@@ -0,0 +1,16 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+import {TooltipPosition} from '@angular/material/legacy-tooltip';
+
+/**
+ * @title Tooltip that demonstrates auto-hiding when it clips out of its scrolling container.
+ */
+@Component({
+  selector: 'tooltip-auto-hide-example',
+  templateUrl: 'tooltip-auto-hide-example.html',
+  styleUrls: ['tooltip-auto-hide-example.css'],
+})
+export class TooltipAutoHideExample {
+  positionOptions: TooltipPosition[] = ['below', 'above', 'left', 'right'];
+  position = new FormControl(this.positionOptions[0]);
+}

src/components-examples/material/legacy-tooltip/tooltip-custom-class/tooltip-custom-class-example.css

@@ -0,0 +1,7 @@
+.example-button {
+  margin-top: 16px;
+}
+
+.example-tooltip-uppercase {
+  text-transform: uppercase;
+}

src/components-examples/material/legacy-tooltip/tooltip-custom-class/tooltip-custom-class-example.html

@@ -0,0 +1,7 @@
+<button mat-raised-button
+        matTooltip="Info about the action"
+        matTooltipClass="example-tooltip-uppercase"
+        aria-label="Button that shows a red tooltip"
+        class="example-button">
+  Uppercase-tooltip Action
+</button>

src/components-examples/material/legacy-tooltip/tooltip-custom-class/tooltip-custom-class-example.ts

@@ -0,0 +1,14 @@
+import {Component, ViewEncapsulation} from '@angular/core';
+
+/**
+ * @title Tooltip that can have a custom class applied.
+ */
+@Component({
+  selector: 'tooltip-custom-class-example',
+  templateUrl: 'tooltip-custom-class-example.html',
+  styleUrls: ['tooltip-custom-class-example.css'],
+  // Need to remove view encapsulation so that the custom tooltip style defined in
+  // `tooltip-custom-class-example.css` will not be scoped to this component's view.
+  encapsulation: ViewEncapsulation.None,
+})
+export class TooltipCustomClassExample {}

src/components-examples/material/legacy-tooltip/tooltip-delay/tooltip-delay-example.css

@@ -0,0 +1,4 @@
+.mat-form-field + .mat-form-field,
+.mat-raised-button {
+  margin-left: 8px;
+}

src/components-examples/material/legacy-tooltip/tooltip-delay/tooltip-delay-example.html

@@ -0,0 +1,20 @@
+<mat-form-field class="example-user-input" appearance="fill">
+  <mat-label>Show delay</mat-label>
+  <input matInput type="number" [formControl]="showDelay"
+         aria-label="Adds a delay between hovering over the button and displaying the tooltip">
+  <mat-hint>milliseconds</mat-hint>
+</mat-form-field>
+
+<mat-form-field class="example-user-input" appearance="fill">
+  <mat-label>Hide delay</mat-label>
+  <input matInput type="number" [formControl]="hideDelay"
+         aria-label="Adds a delay between hovering away from the button and hiding the tooltip">
+  <mat-hint>milliseconds</mat-hint>
+</mat-form-field>
+
+<button mat-raised-button matTooltip="Info about the action"
+        [matTooltipShowDelay]="showDelay.value"
+        [matTooltipHideDelay]="hideDelay.value"
+        aria-label="Button that displays a tooltip with a customized delay in showing and hiding">
+  Action
+</button>

src/components-examples/material/legacy-tooltip/tooltip-delay/tooltip-delay-example.ts

@@ -0,0 +1,15 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Tooltip with a show and hide delay
+ */
+@Component({
+  selector: 'tooltip-delay-example',
+  templateUrl: 'tooltip-delay-example.html',
+  styleUrls: ['tooltip-delay-example.css'],
+})
+export class TooltipDelayExample {
+  showDelay = new FormControl(1000);
+  hideDelay = new FormControl(2000);
+}

src/components-examples/material/legacy-tooltip/tooltip-disabled/tooltip-disabled-example.css

@@ -0,0 +1,3 @@
+.example-disabled-checkbox {
+  margin-left: 8px;
+}

src/components-examples/material/legacy-tooltip/tooltip-disabled/tooltip-disabled-example.html

@@ -0,0 +1,10 @@
+<button mat-raised-button
+        matTooltip="Info about the action"
+        [matTooltipDisabled]="disabled.value"
+        aria-label="Button that displays a tooltip that can be programmatically disabled">
+  Action
+</button>
+
+<mat-checkbox [formControl]="disabled" class="example-disabled-checkbox">
+  Tooltip disabled
+</mat-checkbox>

src/components-examples/material/legacy-tooltip/tooltip-disabled/tooltip-disabled-example.ts

@@ -0,0 +1,14 @@
+import {Component} from '@angular/core';
+import {FormControl} from '@angular/forms';
+
+/**
+ * @title Tooltip that can be disabled
+ */
+@Component({
+  selector: 'tooltip-disabled-example',
+  templateUrl: 'tooltip-disabled-example.html',
+  styleUrls: ['tooltip-disabled-example.css'],
+})
+export class TooltipDisabledExample {
+  disabled = new FormControl(false);
+}

src/components-examples/material/legacy-tooltip/tooltip-harness/tooltip-harness-example.html

@@ -0,0 +1,2 @@
+<button [matTooltip]="message" id="one">Trigger 1</button>
+<button matTooltip="Static message" id="two">Trigger 2</button>

src/components-examples/material/legacy-tooltip/tooltip-harness/tooltip-harness-example.spec.ts

@@ -0,0 +1,54 @@
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed';
+import {MatLegacyTooltipHarness} from '@angular/material/legacy-tooltip/testing';
+import {HarnessLoader} from '@angular/cdk/testing';
+import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
+import {TooltipHarnessExample} from './tooltip-harness-example';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+
+describe('TooltipHarnessExample', () => {
+  let fixture: ComponentFixture<TooltipHarnessExample>;
+  let loader: HarnessLoader;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [MatLegacyTooltipModule, NoopAnimationsModule],
+      declarations: [TooltipHarnessExample],
+    }).compileComponents();
+    fixture = TestBed.createComponent(TooltipHarnessExample);
+    fixture.detectChanges();
+    loader = TestbedHarnessEnvironment.loader(fixture);
+  });
+
+  it('should load all tooltip harnesses', async () => {
+    const tooltips = await loader.getAllHarnesses(MatLegacyTooltipHarness);
+    expect(tooltips.length).toBe(2);
+  });
+
+  it('should be able to show a tooltip', async () => {
+    const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
+    expect(await tooltip.isOpen()).toBe(false);
+    await tooltip.show();
+    expect(await tooltip.isOpen()).toBe(true);
+  });
+
+  it('should be able to hide a tooltip', async () => {
+    const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
+    expect(await tooltip.isOpen()).toBe(false);
+    await tooltip.show();
+    expect(await tooltip.isOpen()).toBe(true);
+    await tooltip.hide();
+    expect(await tooltip.isOpen()).toBe(false);
+  });
+
+  it('should be able to get the text of a tooltip', async () => {
+    const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
+    await tooltip.show();
+    expect(await tooltip.getTooltipText()).toBe('Tooltip message');
+  });
+
+  it('should return empty when getting the tooltip text while closed', async () => {
+    const tooltip = await loader.getHarness(MatLegacyTooltipHarness.with({selector: '#one'}));
+    expect(await tooltip.getTooltipText()).toBe('');
+  });
+});

src/components-examples/material/legacy-tooltip/tooltip-harness/tooltip-harness-example.ts

@@ -0,0 +1,12 @@
+import {Component} from '@angular/core';
+
+/**
+ * @title Testing with MatTooltipHarness
+ */
+@Component({
+  selector: 'tooltip-harness-example',
+  templateUrl: 'tooltip-harness-example.html',
+})
+export class TooltipHarnessExample {
+  message = 'Tooltip message';
+}

src/components-examples/material/legacy-tooltip/tooltip-manual/tooltip-manual-example.css

@@ -0,0 +1,3 @@
+.example-action-button {
+  margin-top: 16px;
+}

src/components-examples/material/legacy-tooltip/tooltip-manual/tooltip-manual-example.html

@@ -0,0 +1,28 @@
+<div>
+  <span> Click the following buttons to... </span>
+  <button mat-button
+          (click)="tooltip.show()"
+          aria-label="Show tooltip on the button at the end of this section"
+          class="example-action-button">
+    show
+  </button>
+  <button mat-button
+          (click)="tooltip.hide()"
+          aria-label="Hide tooltip on the button at the end of this section"
+          class="example-action-button">
+    hide
+  </button>
+  <button mat-button
+          (click)="tooltip.toggle()"
+          aria-label="Show/Hide tooltip on the button at the end of this section"
+          class="example-action-button">
+    toggle show/hide
+  </button>
+</div>
+
+<button mat-raised-button #tooltip="matTooltip"
+        matTooltip="Info about the action"
+        matTooltipPosition="right"
+        aria-tooltip="Button that displays and hides a tooltip triggered by other buttons">
+  Action
+</button>