build: set up tooling to ensure consistent prefixes for CSS classes (#13563)

Enables the `selector-class-pattern` Stylelint rule and fixes everything that wasn't consistent.

Fixes #13545.

Author: crisbeto

guides/creating-a-custom-form-field-control.md

@@ -21,7 +21,7 @@ class MyTel {
 }
 
 @Component({
-  selector: 'my-tel-input',
+  selector: 'example-tel-input',
   template: `
     <div [formGroup]="parts">
       <input class="area" formControlName="area" size="3">
@@ -134,7 +134,7 @@ element and just generate a unique ID for it.
 ```ts
 static nextId = 0;
 
-@HostBinding() id = `my-tel-input-${MyTelInput.nextId++}`;
+@HostBinding() id = `example-tel-input-${MyTelInput.nextId++}`;
 ```
 
 #### `placeholder`
@@ -313,11 +313,11 @@ errorState = false;
 This property allows us to specify a unique string for the type of control in form field. The
 `<mat-form-field>` will add an additional class based on this type that can be used to easily apply
 special styles to a `<mat-form-field>` that contains a specific type of control. In this example
-we'll use `my-tel-input` as our control type which will result in the form field adding the class
-`mat-form-field-my-tel-input`.
+we'll use `example-tel-input` as our control type which will result in the form field adding the
+class `mat-form-field-example-tel-input`.
 
 ```ts
-controlType = 'my-tel-input';
+controlType = 'example-tel-input';
 ```
 
 #### `setDescribedByIds(ids: string[])`
@@ -356,7 +356,7 @@ do is place it inside of a `<mat-form-field>`
 
 ```html
 <mat-form-field>
-  <my-tel-input></my-tel-input>
+  <example-tel-input></example-tel-input>
 </mat-form-field>
 ```
 
@@ -366,7 +366,7 @@ the error state).
 
 ```html
 <mat-form-field>
-  <my-tel-input placeholder="Phone number" required></my-tel-input>
+  <example-tel-input placeholder="Phone number" required></example-tel-input>
   <mat-icon matPrefix>phone</mat-icon>
   <mat-hint>Include area code</mat-hint>
 </mat-form-field>

src/demo-app/demo-app/demo-app.ts

@@ -114,7 +114,7 @@ export class DemoApp {
   }
 
   toggleTheme() {
-    const darkThemeClass = 'unicorn-dark-theme';
+    const darkThemeClass = 'demo-unicorn-dark-theme';
 
     this.dark = !this.dark;
 

src/demo-app/drag-drop/drag-drop-demo.html

@@ -1,5 +1,5 @@
 <div>
-  <div class="list">
+  <div class="demo-list">
     <h2>To do</h2>
     <div
       cdkDrop
@@ -15,7 +15,7 @@ <h2>To do</h2>
     </div>
   </div>
 
-  <div class="list">
+  <div class="demo-list">
     <h2>Done</h2>
     <div
       cdkDrop
@@ -33,7 +33,7 @@ <h2>Done</h2>
 </div>
 
 <div>
-  <div class="list horizontal">
+  <div class="demo-list demo-list-horizontal">
     <h2>Horizontal list</h2>
     <div
       cdkDrop
@@ -49,9 +49,9 @@ <h2>Horizontal list</h2>
   </div>
 </div>
 
-<div class="list">
+<div class="demo-list">
   <h2>Free dragging</h2>
-  <div cdkDrag class="free-draggable" [cdkDragLockAxis]="axisLock">Drag me around</div>
+  <div cdkDrag class="demo-free-draggable" [cdkDragLockAxis]="axisLock">Drag me around</div>
 </div>
 
 <div>

src/demo-app/drag-drop/drag-drop-demo.scss

@@ -1,4 +1,4 @@
-.list {
+.demo-list {
   width: 500px;
   max-width: 100%;
   margin-bottom: 25px;
@@ -10,20 +10,20 @@
     margin-right: 0;
     margin-left: 25px;
   }
+}
 
-  &.horizontal {
-    width: 1000px;
-    margin-right: 0;
-    margin-left: 0;
-  }
+.demo-list-horizontal {
+  width: 1000px;
+  margin-right: 0;
+  margin-left: 0;
 }
 
 .cdk-drop {
   border: solid 1px #ccc;
   min-height: 60px;
   display: block;
 
-  .horizontal & {
+  .demo-list-horizontal & {
     display: flex;
     flex-direction: row;
   }
@@ -42,7 +42,7 @@
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
   }
 
-  .horizontal & {
+  .demo-list-horizontal & {
     border: none;
     border-right: solid 1px #ccc;
     flex-grow: 1;
@@ -72,10 +72,6 @@
   opacity: 0;
 }
 
-.wrapper {
-  border: solid 1px red;
-}
-
 .cdk-drag-handle {
   cursor: move;
 
@@ -88,7 +84,7 @@ pre {
   white-space: normal;
 }
 
-.free-draggable {
+.demo-free-draggable {
   width: 200px;
   height: 200px;
   border: solid 1px #ccc;

src/demo-app/screen-type/screen-type-demo.html

@@ -1,27 +1,27 @@
 <h2>Screen Type</h2>
 
 <mat-grid-list cols="6" rowHeight="1:2">
-  <mat-grid-tile [class.active]="(isHandset | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isHandset | async)?.matches"
                 colspan="2">
     <mat-icon>smartphone</mat-icon>
     <p>Handset</p>
   </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isTablet | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isTablet | async)?.matches"
                 colspan="2">
     <mat-icon>tablet_android</mat-icon>
     <p>Tablet</p>
   </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isWeb | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isWeb | async)?.matches"
                 colspan="2">
     <mat-icon>laptop</mat-icon>
     <p>Web</p>
   </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isPortrait | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isPortrait | async)?.matches"
                 colspan="3">
     <mat-icon>stay_current_portrait</mat-icon>
     <p>Portrait</p>
   </mat-grid-tile>
-  <mat-grid-tile [class.active]="(isLandscape | async)?.matches"
+  <mat-grid-tile [class.demo-tile-active]="(isLandscape | async)?.matches"
                 colspan="3">
     <mat-icon>stay_current_landscape</mat-icon>
     <p>Landscape</p>

src/demo-app/screen-type/screen-type-demo.scss

@@ -10,10 +10,10 @@
   .mat-figure {
     flex-direction: column;
   }
+}
 
-  &.active {
-    background: rgba(0, 0, 0, 0.12);
-  }
+.demo-tile-active {
+  background: rgba(0, 0, 0, 0.12);
 }
 
 h2 {

src/demo-app/theme.scss

@@ -24,7 +24,8 @@ $dark-theme:   mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
 
 // Include the alternative theme styles inside of a block with a CSS class. You can make this
 // CSS class whatever you want. In this example, any component inside of an element with
-// `.unicorn-dark-theme` will be affected by this alternate dark theme instead of the default theme.
-.unicorn-dark-theme {
+// `.demo-unicorn-dark-theme` will be affected by this alternate dark theme instead of the
+// default theme.
+.demo-unicorn-dark-theme {
   @include angular-material-theme($dark-theme);
 }

src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.css

@@ -1,19 +1,19 @@
-.spacer {
+.demo-spacer {
   background: #3f51b5;
   margin-bottom: 10px;
 }
 
-.spacer.vertical {
+.demo-spacer-vertical {
   width: 100px;
   height: 3000px;
 }
 
-.spacer.horizontal {
+.demo-spacer-horizontal {
   width: 3000px;
   height: 100px;
 }
 
-.scroller {
+.demo-scroller {
   width: 100px;
   height: 100px;
   overflow: auto;
@@ -22,7 +22,7 @@
   left: 200px;
 }
 
-.scroller-spacer {
+.demo-scroller-spacer {
   width: 200px;
   height: 200px;
   background: #ff4081;

src/e2e-app/block-scroll-strategy/block-scroll-strategy-e2e.html

@@ -2,9 +2,9 @@
   <button id="enable" (click)="scrollStrategy.enable()">Enable scroll blocking</button>
   <button id="disable" (click)="scrollStrategy.disable()">Disable scroll blocking</button>
 </p>
-<div class="spacer vertical"></div>
+<div class="demo-spacer demo-spacer-vertical"></div>
 <!-- this one needs a tabindex so protractor can trigger key presses inside it -->
-<div class="scroller" id="scroller" tabindex="-1">
-  <div class="scroller-spacer"></div>
+<div class="demo-scroller" id="scroller" tabindex="-1">
+  <div class="demo-scroller-spacer"></div>
 </div>
-<div class="spacer horizontal"></div>
+<div class="demo-spacer demo-spacer-horizontal"></div>

src/material-examples/button-types/button-types-example.css

@@ -1,4 +1,4 @@
-.button-row button,
-.button-row a {
+.example-button-row button,
+.example-button-row a {
   margin-right: 8px;
 }

src/material-examples/button-types/button-types-example.html

@@ -1,5 +1,5 @@
 <h3>Basic Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-button>Basic</button>
   <button mat-button color="primary">Primary</button>
   <button mat-button color="accent">Accent</button>
@@ -9,7 +9,7 @@ <h3>Basic Buttons</h3>
 </div>
 
 <h3>Raised Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-raised-button>Basic</button>
   <button mat-raised-button color="primary">Primary</button>
   <button mat-raised-button color="accent">Accent</button>
@@ -19,7 +19,7 @@ <h3>Raised Buttons</h3>
 </div>
 
 <h3>Stroked Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-stroked-button>Basic</button>
   <button mat-stroked-button color="primary">Primary</button>
   <button mat-stroked-button color="accent">Accent</button>
@@ -29,7 +29,7 @@ <h3>Stroked Buttons</h3>
 </div>
 
 <h3>Flat Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-flat-button>Basic</button>
   <button mat-flat-button color="primary">Primary</button>
   <button mat-flat-button color="accent">Accent</button>
@@ -39,7 +39,7 @@ <h3>Flat Buttons</h3>
 </div>
 
 <h3>Icon Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-icon-button>
     <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
@@ -58,7 +58,7 @@ <h3>Icon Buttons</h3>
 </div>
 
 <h3>Fab Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-fab>Basic</button>
   <button mat-fab color="primary">Primary</button>
   <button mat-fab color="accent">Accent</button>
@@ -71,7 +71,7 @@ <h3>Fab Buttons</h3>
 </div>
 
 <h3>Mini Fab Buttons</h3>
-<div class="button-row">
+<div class="example-button-row">
   <button mat-mini-fab>Basic</button>
   <button mat-mini-fab color="primary">Primary</button>
   <button mat-mini-fab color="accent">Accent</button>
@@ -81,4 +81,4 @@ <h3>Mini Fab Buttons</h3>
     <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
   </button>
   <a mat-mini-fab routerLink=".">Link</a>
-</div>
+</div>

src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.css

@@ -1,4 +1,4 @@
-.box {
+.example-box {
   width: 200px;
   height: 200px;
   border: solid 1px #ccc;
@@ -19,7 +19,7 @@
               0 1px 5px 0 rgba(0, 0, 0, 0.12);
 }
 
-.box:active {
+.example-box:active {
   box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
               0 8px 10px 1px rgba(0, 0, 0, 0.14),
               0 3px 14px 2px rgba(0, 0, 0, 0.12);

src/material-examples/cdk-drag-drop-axis-lock/cdk-drag-drop-axis-lock-example.html

@@ -1,7 +1,7 @@
-<div class="box" cdkDragLockAxis="y" cdkDrag>
+<div class="example-box" cdkDragLockAxis="y" cdkDrag>
   I can only be dragged up/down
 </div>
 
-<div class="box" cdkDragLockAxis="x" cdkDrag>
+<div class="example-box" cdkDragLockAxis="x" cdkDrag>
   I can only be dragged left/right
 </div>