feat(badge): add badge component (#7483)

.github/CODEOWNERS

@@ -32,6 +32,7 @@
 /src/lib/tabs/**                                   @andrewseguin
 /src/lib/toolbar/**                                @devversion
 /src/lib/tooltip/**                                @andrewseguin
+/src/lib/badge/**                                  @amcdnl
 
 # Angular Material core
 /src/lib/core/*                                    @jelbourn
@@ -129,6 +130,7 @@
 /src/demo-app/toolbar/**                           @devversion
 /src/demo-app/tooltip/**                           @andrewseguin
 /src/demo-app/typography/**                        @crisbeto
+/src/demo-app/badge/**                             @amcdnl
 
 # E2E app
 /e2e/*                                             @jelbourn

src/demo-app/badge/badge-demo.html

@@ -0,0 +1,90 @@
+<div class="badge-demo">
+
+  <div class="badge-examples">
+    <h3>Text</h3>
+    <span [matBadge]="badgeContent" matBadgeOverlap="false" *ngIf="visible">
+      Hello
+    </span>
+
+    <span [matBadge]="11111" matBadgeOverlap="false">
+      Hello
+    </span>
+
+    <span matBadge="22" matBadgeOverlap="false" matBadgePosition="below after" matBadgeColor="accent">
+      Hello
+    </span>
+
+    <span matBadge="22" matBadgeOverlap="false" matBadgePosition="above before" matBadgeColor="warn">
+      Hello
+    </span>
+
+    <span matBadge="⚡️" matBadgeOverlap="false" matBadgePosition="below before">
+      Hello
+    </span>
+
+    <span [matBadge]="badgeContent" matBadgeDescription="I've got {{badgeContent}} problems">
+      Aria
+    </span>
+
+    <span [matBadge]="badgeContent" matBadgeHidden="true">
+      Hidden
+    </span>
+
+    <input type="text" [(ngModel)]="badgeContent" />
+    <button (click)="visible = !visible">Toggle</button>
+  </div>
+
+  <div class="badge-examples">
+    <h3>Buttons</h3>
+    <button mat-raised-button [matBadge]="badgeContent">
+      <mat-icon color="primary">home</mat-icon>
+    </button>
+
+    <button mat-raised-button matBadge="22" matBadgePosition="below after" color="primary" matBadgeColor="accent">
+      <mat-icon color="accent">home</mat-icon>
+    </button>
+
+    <button mat-raised-button matBadge="22" matBadgePosition="above before">
+      <mat-icon color="primary">home</mat-icon>
+    </button>
+
+    <button mat-raised-button matBadge="22" matBadgePosition="below before">
+      <mat-icon color="primary">home</mat-icon>
+    </button>
+
+    <button mat-raised-button>
+      <mat-icon color="primary" matBadge="22" color="accent">home</mat-icon>
+    </button>
+  </div>
+
+  <div class="badge-examples">
+    <h3>Icons</h3>
+    <mat-icon [matBadge]="badgeContent">
+      home
+    </mat-icon>
+
+    <mat-icon color="primary" matBadge="22" matBadgePosition="below after" matBadgeColor="accent">
+      home
+    </mat-icon>
+
+    <mat-icon color="primary" matBadge="22" matBadgePosition="above before" matBadgeColor="warn">
+      home
+    </mat-icon>
+
+    <mat-icon color="primary" matBadge="22" matBadgePosition="below before">
+      home
+    </mat-icon>
+  </div>
+
+   <div class="badge-examples">
+    <h3>Size</h3>
+    <mat-icon [matBadge]="badgeContent" matBadgeSize="small">
+      home
+    </mat-icon>
+    <mat-icon [matBadge]="badgeContent" matBadgeSize="large">
+      home
+    </mat-icon>
+
+  </div>
+
+</div>

src/demo-app/badge/badge-demo.scss

@@ -0,0 +1,3 @@
+.badge-examples {
+  margin-bottom: 25px;
+}

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

@@ -0,0 +1,20 @@
+/**
+ * @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';
+
+@Component({
+  moduleId: module.id,
+  selector: 'badge-demo',
+  templateUrl: 'badge-demo.html',
+  styleUrls: ['badge-demo.css'],
+})
+export class BadgeDemo {
+  visible = true;
+  badgeContent = '0';
+}

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

@@ -51,6 +51,7 @@ export class DemoApp {
   dark = false;
   navItems = [
     {name: 'Autocomplete', route: '/autocomplete'},
+    {name: 'Badge', route: '/badge'},
     {name: 'Bottom sheet', route: '/bottom-sheet'},
     {name: 'Button Toggle', route: '/button-toggle'},
     {name: 'Button', route: '/button'},

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

@@ -61,6 +61,7 @@ import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
 import {DEMO_APP_ROUTES} from './routes';
 import {TableDemoModule} from '../table/table-demo-module';
+import {BadgeDemo} from 'badge/badge-demo';
 
 @NgModule({
   imports: [
@@ -78,6 +79,7 @@ import {TableDemoModule} from '../table/table-demo-module';
     BaselineDemo,
     ButtonDemo,
     ButtonToggleDemo,
+    BadgeDemo,
     CardDemo,
     CheckboxDemo,
     ChipsDemo,

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

@@ -51,11 +51,13 @@ import {TypographyDemo} from '../typography/typography-demo';
 import {DemoApp, Home} from './demo-app';
 import {TableDemoPage} from '../table/table-demo-page';
 import {TABLE_DEMO_ROUTES} from '../table/routes';
+import {BadgeDemo} from 'badge/badge-demo';
 
 export const DEMO_APP_ROUTES: Routes = [
   {path: '', component: DemoApp, children: [
     {path: '', component: Home},
     {path: 'autocomplete', component: AutocompleteDemo},
+    {path: 'badge', component: BadgeDemo},
     {path: 'bottom-sheet', component: BottomSheetDemo},
     {path: 'baseline', component: BaselineDemo},
     {path: 'button', component: ButtonDemo},

src/demo-app/demo-material-module.ts

@@ -17,6 +17,7 @@ import {CdkTableModule} from '@angular/cdk/table';
 import {NgModule} from '@angular/core';
 import {
   MatAutocompleteModule,
+  MatBadgeModule,
   MatBottomSheetModule,
   MatButtonModule,
   MatButtonToggleModule,
@@ -58,6 +59,7 @@ import {
 @NgModule({
   exports: [
     MatAutocompleteModule,
+    MatBadgeModule,
     MatBottomSheetModule,
     MatButtonModule,
     MatButtonToggleModule,

src/demo-app/system-config.ts

@@ -91,6 +91,7 @@ System.config({
     '@angular/material/tabs': 'dist/packages/material/tabs/index.js',
     '@angular/material/toolbar': 'dist/packages/material/toolbar/index.js',
     '@angular/material/tooltip': 'dist/packages/material/tooltip/index.js',
+    '@angular/material/badge': 'dist/packages/material/badge/index.js',
   },
   packages: {
     // Thirdparty barrels.

src/lib/badge/_badge-theme.scss

@@ -0,0 +1,167 @@
+// This contains all of the styles for the badge
+// rather than just the color/theme because of
+// no style sheet support for directives.
+@import '../core/theming/palette';
+@import '../core/theming/theming';
+@import '../core/typography/typography-utils';
+
+$mat-badge-font-size: 12px;
+$mat-badge-font-weight: 600;
+$mat-badge-default-size: 22px !default;
+$mat-badge-small-size: $mat-badge-default-size - 6;
+$mat-badge-large-size: $mat-badge-default-size + 6;
+
+// Mixin for building offset given different sizes
+@mixin _mat-badge-size($size) {
+  .mat-badge-content {
+    width: $size;
+    height: $size;
+    line-height: $size;
+  }
+
+  &.mat-badge-above {
+    .mat-badge-content {
+      top: -$size / 2;
+    }
+  }
+
+  &.mat-badge-below {
+    .mat-badge-content {
+      bottom: -$size / 2;
+    }
+  }
+
+  &.mat-badge-before {
+    margin-left: $size;
+
+    &[dir='rtl'] {
+      margin-left: 0;
+      margin-right: $size;
+    }
+
+    .mat-badge-content {
+      left: -$size;
+    }
+  }
+
+  &.mat-badge-after {
+    margin-right: $size;
+
+    &[dir='rtl'] {
+      margin-right: 0;
+      margin-left: $size;
+    }
+
+    .mat-badge-content {
+      right: -$size;
+    }
+  }
+
+  &.mat-badge-overlap {
+    &.mat-badge-before {
+      margin-left: $size / 2;
+
+      &[dir='rtl'] {
+        margin-left: 0;
+        margin-right: $size / 2;
+      }
+
+      .mat-badge-content {
+        left: -$size / 2;
+      }
+    }
+
+    &.mat-badge-after {
+      margin-right: $size / 2;
+
+      &[dir='rtl'] {
+        margin-right: 0;
+        margin-left: $size;
+      }
+
+      .mat-badge-content {
+        right: -$size / 2;
+      }
+    }
+  }
+}
+
+@mixin mat-badge-theme($theme) {
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $primary: map-get($theme, primary);
+
+  .mat-badge-content {
+    color: mat-color($primary, default-contrast);
+    background: mat-color($primary);
+  }
+
+  &.mat-badge-accent {
+    .mat-badge-content {
+      background: mat-color($accent);
+      color: mat-color($accent, default-contrast);
+    }
+  }
+
+  &.mat-badge-warn {
+    .mat-badge-content {
+      color: mat-color($warn, default-contrast);
+      background: mat-color($warn);
+    }
+  }
+}
+
+@mixin mat-badge-typography($config) {
+  .mat-badge-content {
+    font-weight: $mat-badge-font-weight;
+    font-size: $mat-badge-font-size;
+    font-family: mat-font-family($config);
+  }
+
+  .mat-badge-small .mat-badge-content {
+    font-size: $mat-badge-font-size / 2;
+  }
+
+  .mat-badge-large .mat-badge-content {
+    font-size: $mat-badge-font-size * 2;
+  }
+}
+
+.mat-badge {
+  position: relative;
+}
+
+.mat-badge-hidden {
+  .mat-badge-content {
+    display: none;
+  }
+}
+
+.mat-badge-content {
+  position: absolute;
+  text-align: center;
+  display: inline-block;
+  border-radius: 50%;
+  transition: all 0.2 ease-in-out;
+  transform: scale(0.6);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+// The active class is added after the element is added
+// so it can animate scale to default
+.mat-badge-content.mat-badge-active {
+  transform: scale(1);
+}
+
+.mat-badge-small {
+  @include _mat-badge-size($mat-badge-small-size);
+}
+.mat-badge-medium {
+  @include _mat-badge-size($mat-badge-default-size);
+}
+.mat-badge-large {
+  @include _mat-badge-size($mat-badge-large-size);
+}

src/lib/badge/badge-module.ts

@@ -0,0 +1,27 @@
+/**
+ * @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 {MatCommonModule} from '@angular/material/core';
+import {A11yModule} from '@angular/cdk/a11y';
+import {MatBadge} from './badge';
+
+
+@NgModule({
+  imports: [
+    MatCommonModule,
+    A11yModule,
+  ],
+  exports: [
+    MatBadge,
+  ],
+  declarations: [
+    MatBadge,
+  ],
+})
+export class MatBadgeModule {}