From dcef6045063a569ef0a8a8898d1180282c8016be Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 27 Oct 2017 18:56:04 +0200 Subject: [PATCH] refactor: remove compatibility mode (#7689) Since the switch to the `mat-` prefix, the compatibility mode is no longer necessary. These changes remove anything that was left. BREAKING CHANGE: The `MATERIAL_COMPATIBILITY_MODE`, `CompatibilityModule`, `NoConflictStyleCompatibilityMode`, `MatPrefixRejector`, `MdPrefixRejector` symbols have been removed. --- .github/CODEOWNERS | 1 - guides/compatibility-mode.md | 22 -- .../core/common-behaviors/common-module.ts | 7 +- .../core/compatibility/compatibility.spec.ts | 0 src/lib/core/compatibility/compatibility.ts | 205 ------------------ src/lib/core/public-api.ts | 1 - src/lib/stepper/stepper.spec.ts | 24 +- .../kitchen-sink/kitchen-sink.ts | 2 + 8 files changed, 11 insertions(+), 251 deletions(-) delete mode 100644 guides/compatibility-mode.md delete mode 100644 src/lib/core/compatibility/compatibility.spec.ts delete mode 100644 src/lib/core/compatibility/compatibility.ts diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 6fc4773ddc3..9096acabe29 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -35,7 +35,6 @@ /src/lib/core/* @jelbourn /src/lib/core/animation/** @jelbourn /src/lib/core/common-behaviors/** @jelbourn -/src/lib/core/compatibility/** @jelbourn /src/lib/core/datetime/** @mmalerba /src/lib/core/error/** @crisbeto @mmalerba /src/lib/core/gestures/** @jelbourn diff --git a/guides/compatibility-mode.md b/guides/compatibility-mode.md deleted file mode 100644 index 0efea29183f..00000000000 --- a/guides/compatibility-mode.md +++ /dev/null @@ -1,22 +0,0 @@ -## What is compatibility mode? -Compatibility mode for `@angular/material` allows the components to exist side-by-side with -AngularJS Material components without any CSS collisions. - -## What does compatibility mode do? -When enabled, compatibility mode enforces that all template APIs use the prefix `mat-` instead of -`md-`. This will prevent any CSS from AngularJS Material from affecting the components in -`@angular/material`. - -## How is compatibility mode enabled? -Import `NoConflictStyleCompatibilityMode` into your application's root `NgModule`. - - -## Example - -```html - - - - - -``` diff --git a/src/lib/core/common-behaviors/common-module.ts b/src/lib/core/common-behaviors/common-module.ts index b2fb6f0865b..991ee6594fa 100644 --- a/src/lib/core/common-behaviors/common-module.ts +++ b/src/lib/core/common-behaviors/common-module.ts @@ -8,7 +8,6 @@ import {NgModule, InjectionToken, Optional, Inject, isDevMode} from '@angular/core'; import {BidiModule} from '@angular/cdk/bidi'; -import {CompatibilityModule} from '../compatibility/compatibility'; /** Injection token that configures whether the Material sanity checks are enabled. */ @@ -17,13 +16,13 @@ export const MATERIAL_SANITY_CHECKS = new InjectionToken('mat-sanity-ch /** * Module that captures anything that should be loaded and/or run for *all* Angular Material - * components. This includes Bidi, compatibility mode, etc. + * components. This includes Bidi, etc. * * This module should be imported to each top-level component module (e.g., MatTabsModule). */ @NgModule({ - imports: [CompatibilityModule, BidiModule], - exports: [CompatibilityModule, BidiModule], + imports: [BidiModule], + exports: [BidiModule], providers: [{ provide: MATERIAL_SANITY_CHECKS, useValue: true, }], diff --git a/src/lib/core/compatibility/compatibility.spec.ts b/src/lib/core/compatibility/compatibility.spec.ts deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/lib/core/compatibility/compatibility.ts b/src/lib/core/compatibility/compatibility.ts deleted file mode 100644 index ce0f0040e62..00000000000 --- a/src/lib/core/compatibility/compatibility.ts +++ /dev/null @@ -1,205 +0,0 @@ -/** - * @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 {Directive, InjectionToken, NgModule} from '@angular/core'; - -export const MATERIAL_COMPATIBILITY_MODE = new InjectionToken('md-compatibility-mode'); - -/** Selector that matches all elements that may have style collisions with AngularJS Material. */ -export const MAT_ELEMENTS_SELECTOR = ` - [mat-button], - [mat-fab], - [mat-icon-button], - [mat-mini-fab], - [mat-raised-button], - [matCardSubtitle], - [matCardTitle], - [matCellDef], - [matColumnDef], - [matDialogActions], - [matDialogClose], - [matDialogContent], - [matDialogTitle], - [matHeaderCellDef], - [matHeaderRowDef], - [matLine], - [matRowDef], - [matStepLabel], - [matStepperNext], - [matStepperPrevious], - [matTabLabel], - [matTabLink], - [matTabNav], - [matTooltip], - [matInput], - [matPrefix], - [matSuffix], - mat-autocomplete, - mat-button-toggle, - mat-button-toggle, - mat-button-toggle-group, - mat-card, - mat-card-actions, - mat-card-content, - mat-card-footer, - mat-card-header, - mat-card-subtitle, - mat-card-title, - mat-card-title-group, - mat-cell, - mat-checkbox, - mat-chip, - mat-dialog-actions, - mat-dialog-container, - mat-dialog-content, - mat-divider, - mat-error, - mat-grid-list, - mat-grid-tile, - mat-grid-tile-footer, - mat-grid-tile-header, - mat-header-cell, - mat-header-row, - mat-hint, - mat-horizontal-stepper, - mat-icon, - mat-input-container, - mat-form-field, - mat-list, - mat-list-item, - mat-menu, - mat-nav-list, - mat-option, - mat-placeholder, - mat-progress-bar, - mat-pseudo-checkbox, - mat-radio-button, - mat-radio-group, - mat-row, - mat-select, - mat-sidenav, - mat-sidenav-container, - mat-slider, - mat-spinner, - mat-step, - mat-tab, - mat-table, - mat-tab-group, - mat-toolbar, - mat-vertical-stepper`; - -/** Selector that matches all elements that may have style collisions with AngularJS Material. */ -export const MD_ELEMENTS_SELECTOR = ` - [md-button], - [md-fab], - [md-icon-button], - [md-mini-fab], - [md-raised-button], - [mdCardSubtitle], - [mdCardTitle], - [mdCellDef], - [mdColumnDef], - [mdDialogActions], - [mdDialogClose], - [mdDialogContent], - [mdDialogTitle], - [mdHeaderCellDef], - [mdHeaderRowDef], - [mdLine], - [mdRowDef], - [mdStepLabel], - [mdStepperNext], - [mdStepperPrevious], - [mdTabLabel], - [mdTabLink], - [mdTabNav], - [mdTooltip], - [mdInput], - [mdPrefix], - [mdSuffix], - md-autocomplete, - md-button-toggle, - md-button-toggle, - md-button-toggle-group, - md-card, - md-card-actions, - md-card-content, - md-card-footer, - md-card-header, - md-card-subtitle, - md-card-title, - md-card-title-group, - md-cell, - md-checkbox, - md-chip, - md-dialog-actions, - md-dialog-container, - md-dialog-content, - md-divider, - md-error, - md-grid-list, - md-grid-tile, - md-grid-tile-footer, - md-grid-tile-header, - md-header-cell, - md-header-row, - md-hint, - md-horizontal-stepper, - md-icon, - md-input-container, - md-form-field, - md-list, - md-list-item, - md-menu, - md-nav-list, - md-option, - md-placeholder, - md-progress-bar, - md-pseudo-checkbox, - md-radio-button, - md-radio-group, - md-row, - md-select, - md-sidenav, - md-sidenav-container, - md-slider, - md-spinner, - md-step, - md-tab, - md-table, - md-tab-group, - md-toolbar, - md-vertical-stepper`; - -/** Directive that enforces that the `mat-` prefix cannot be used. */ -@Directive({selector: MAT_ELEMENTS_SELECTOR}) -export class MatPrefixRejector {} - -/** Directive that enforces that the `md-` prefix cannot be used. */ -@Directive({selector: MD_ELEMENTS_SELECTOR}) -export class MdPrefixRejector {} - - -/** - * Module that enforces the default compatibility mode settings. When this module is loaded - * without NoConflictStyleCompatibilityMode also being imported, it will throw an error if - * there are any uses of the `mat-` prefix. - */ -@NgModule({ - declarations: [MatPrefixRejector, MdPrefixRejector], - exports: [MatPrefixRejector, MdPrefixRejector], -}) -export class CompatibilityModule {} - - -/** - * Module that enforces "no-conflict" compatibility mode settings. When this module is loaded, - * it will throw an error if there are any uses of the `md-` prefix. - */ -@NgModule() -export class NoConflictStyleCompatibilityMode {} diff --git a/src/lib/core/public-api.ts b/src/lib/core/public-api.ts index 7b8efd83440..9e4fdd29cf8 100644 --- a/src/lib/core/public-api.ts +++ b/src/lib/core/public-api.ts @@ -8,7 +8,6 @@ export * from './animation/animation'; export * from './common-behaviors/index'; -export * from './compatibility/compatibility'; export * from './datetime/index'; export * from './error/error-options'; export * from './gestures/gesture-annotations'; diff --git a/src/lib/stepper/stepper.spec.ts b/src/lib/stepper/stepper.spec.ts index 7413e001946..3e25aaf9465 100644 --- a/src/lib/stepper/stepper.spec.ts +++ b/src/lib/stepper/stepper.spec.ts @@ -722,9 +722,7 @@ class SimpleMatHorizontalStepperApp {
Step one - - - +
@@ -734,9 +732,7 @@ class SimpleMatHorizontalStepperApp { Step two - - - +
@@ -746,9 +742,7 @@ class SimpleMatHorizontalStepperApp { Step two - - - +
@@ -818,9 +812,7 @@ class SimpleMatVerticalStepperApp { Step one - - - +
@@ -830,9 +822,7 @@ class SimpleMatVerticalStepperApp { Step two - - - +
@@ -842,9 +832,7 @@ class SimpleMatVerticalStepperApp { Step two - - - +
diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 63f16c1ada0..2945be19d4e 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -35,6 +35,8 @@ import { MatToolbarModule, MatTooltipModule, MatStepperModule, + MatButtonToggleModule, + MatCheckboxModule, } from '@angular/material'; import { CdkTableModule,