feat(button-toggle): Add a focus overlay for button-toggle (#3119)

* Add a focus overlay for button-toggle

* Use FocusOriginMonitor

* .

* Fix test

* Add 0.12 opacity white and black.

* Add dark-overlay

Author: tinayuangao

src/lib/button-toggle/_button-toggle-theme.scss

@@ -1,13 +1,25 @@
 @import '../core/theming/palette';
 @import '../core/theming/theming';
 
+// Applies a focus style to an md-button-toggle element for each of the supported palettes.
+@mixin _mat-button-toggle-focus-color($theme) {
+  $background: map-get($theme, background);
+
+  .mat-button-toggle-focus-overlay {
+    background-color: mat-color($background, dark-overlay);
+  }
+}
 
 @mixin mat-button-toggle-theme($theme) {
   $foreground: map-get($theme, foreground);
   $background: map-get($theme, background);
 
   .mat-button-toggle {
     color: mat-color($foreground, hint-text);
+
+    &.cdk-focused {
+      @include _mat-button-toggle-focus-color($theme);
+    }
   }
 
   .mat-button-toggle-checked {

src/lib/button-toggle/button-toggle.html

@@ -12,3 +12,5 @@
     <ng-content></ng-content>
   </div>
 </label>
+<!-- the touchstart handler prevents the overlay from capturing the initial tap on touch devices -->
+<div class="mat-button-toggle-focus-overlay" (touchstart)="$event.preventDefault()"></div>

src/lib/button-toggle/button-toggle.scss

@@ -1,4 +1,6 @@
+@import '../core/a11y/a11y';
 @import '../core/style/elevation';
+@import '../core/style/layout-common';
 
 $mat-button-toggle-padding: 0 16px !default;
 $mat-button-toggle-line-height: 36px !default;
@@ -34,6 +36,11 @@ $mat-button-toggle-border-radius: 2px !default;
 .mat-button-toggle {
   white-space: nowrap;
   font-family: $mat-font-family;
+  position: relative;
+}
+
+.mat-button-toggle.cdk-focused .mat-button-toggle-focus-overlay {
+  opacity: 1;
 }
 
 .mat-button-toggle-label-content {
@@ -47,3 +54,13 @@ $mat-button-toggle-border-radius: 2px !default;
 .mat-button-toggle-label-content > * {
   vertical-align: middle;
 }
+
+// Overlay to be used as a tint. Note that the same effect can be achieved by using a pseudo
+// element, however we use a proper DOM element in order to be able to disable the default
+// touch action. This makes the buttons more responsive on touch devices.
+.mat-button-toggle-focus-overlay {
+  border-radius: inherit;
+  pointer-events: none;
+  opacity: 0;
+  @include mat-fill;
+}

src/lib/button-toggle/button-toggle.ts

@@ -21,6 +21,7 @@ import {
 import {NG_VALUE_ACCESSOR, ControlValueAccessor, FormsModule} from '@angular/forms';
 import {Observable} from 'rxjs/Observable';
 import {
+  FocusOriginMonitor,
   UniqueSelectionDispatcher,
   coerceBooleanProperty,
   UNIQUE_SELECTION_DISPATCHER_PROVIDER,
@@ -276,7 +277,6 @@ export class MdButtonToggleGroupMultiple {
   set vertical(value) {
     this._vertical = coerceBooleanProperty(value);
   }
-
 }
 
 /** Single button inside of a toggle group. */
@@ -332,7 +332,9 @@ export class MdButtonToggle implements OnInit {
   constructor(@Optional() toggleGroup: MdButtonToggleGroup,
               @Optional() toggleGroupMultiple: MdButtonToggleGroupMultiple,
               public buttonToggleDispatcher: UniqueSelectionDispatcher,
-              private _renderer: Renderer) {
+              private _renderer: Renderer,
+              private _elementRef: ElementRef,
+              private _focusOriginMonitor: FocusOriginMonitor) {
     this.buttonToggleGroup = toggleGroup;
 
     this.buttonToggleGroupMultiple = toggleGroupMultiple;
@@ -363,6 +365,7 @@ export class MdButtonToggle implements OnInit {
     if (this.buttonToggleGroup && this._value == this.buttonToggleGroup.value) {
       this._checked = true;
     }
+    this._focusOriginMonitor.monitor(this._elementRef.nativeElement, this._renderer, true);
   }
 
   /** Unique ID for the underlying `input` element. */
@@ -477,7 +480,7 @@ export class MdButtonToggle implements OnInit {
     CompatibilityModule,
   ],
   declarations: [MdButtonToggleGroup, MdButtonToggleGroupMultiple, MdButtonToggle],
-  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER]
+  providers: [UNIQUE_SELECTION_DISPATCHER_PROVIDER, FocusOriginMonitor]
 })
 export class MdButtonToggleModule {
   /** @deprecated */

src/lib/core/theming/_palette.scss

@@ -8,6 +8,8 @@
 
 $black-87-opacity: rgba(black, 0.87);
 $white-87-opacity: rgba(white, 0.87);
+$black-12-opacity: rgba(black, 0.12);
+$white-12-opacity: rgba(white, 0.12);
 
 $mat-red: (
   50: #ffebee,
@@ -649,8 +651,9 @@ $mat-light-theme-background: (
   hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
   card:       white,
   dialog:     white,
-  disabled-button: rgba(black, 0.12),
+  disabled-button: $black-12-opacity,
   raised-button: white,
+  dark-overlay: $black-12-opacity,
 );
 
 // Background palette for dark themes.
@@ -661,15 +664,16 @@ $mat-dark-theme-background: (
   hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
   card:       map_get($mat-grey, 800),
   dialog:     map_get($mat-grey, 800),
-  disabled-button: rgba(white, 0.12),
+  disabled-button: $white-12-opacity,
   raised-button: map-get($mat-grey, 800),
+  dark-overlay: $white-12-opacity,
 );
 
 // Foreground palette for light themes.
 $mat-light-theme-foreground: (
   base:            black,
-  divider:         rgba(black, 0.12),
-  dividers:        rgba(black, 0.12),
+  divider:         $black-12-opacity,
+  dividers:        $black-12-opacity,
   disabled:        rgba(black, 0.38),
   disabled-button: rgba(black, 0.38),
   disabled-text:   rgba(black, 0.38),
@@ -683,8 +687,8 @@ $mat-light-theme-foreground: (
 // Foreground palette for dark themes.
 $mat-dark-theme-foreground: (
   base:            white,
-  divider:         rgba(white, 0.12),
-  dividers:        rgba(white, 0.12),
+  divider:         $white-12-opacity,
+  dividers:        $white-12-opacity,
   disabled:        rgba(white, 0.3),
   disabled-button: rgba(white, 0.3),
   disabled-text:   rgba(white, 0.3),