fix(datepicker): highlight datepicker toggle when calendar is open (#9426)

Highlights the `mat-datepicker-toggle` while the associated calendar is open, in order to provide some extra visual feedback.

Author: crisbeto

src/lib/datepicker/_datepicker-theme.scss

@@ -84,6 +84,10 @@ $mat-calendar-weekday-table-font-size: 11px !default;
   .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {
     border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);
   }
+
+  .mat-datepicker-toggle-active {
+    color: mat-color($primary);
+  }
 }
 
 @mixin mat-datepicker-typography($config) {

src/lib/datepicker/datepicker-toggle.ts

@@ -31,6 +31,7 @@ import {MatDatepickerIntl} from './datepicker-intl';
   templateUrl: 'datepicker-toggle.html',
   host: {
     'class': 'mat-datepicker-toggle',
+    '[class.mat-datepicker-toggle-active]': 'datepicker && datepicker.opened',
   },
   exportAs: 'matDatepickerToggle',
   encapsulation: ViewEncapsulation.None,
@@ -80,9 +81,16 @@ export class MatDatepickerToggle<D> implements AfterContentInit, OnChanges, OnDe
     const datepickerDisabled = this.datepicker ? this.datepicker._disabledChange : observableOf();
     const inputDisabled = this.datepicker && this.datepicker._datepickerInput ?
         this.datepicker._datepickerInput._disabledChange : observableOf();
+    const datepickerToggled = this.datepicker ?
+        merge(this.datepicker.openedStream, this.datepicker.closedStream) :
+        observableOf();
 
     this._stateChanges.unsubscribe();
-    this._stateChanges = merge(this._intl.changes, datepickerDisabled, inputDisabled)
-        .subscribe(() => this._changeDetectorRef.markForCheck());
+    this._stateChanges = merge(
+      this._intl.changes,
+      datepickerDisabled,
+      inputDisabled,
+      datepickerToggled
+    ).subscribe(() => this._changeDetectorRef.markForCheck());
   }
 }

src/lib/datepicker/datepicker.spec.ts

@@ -740,6 +740,25 @@ describe('MatDatepicker', () => {
 
           expect(toggle.getAttribute('aria-label')).toBe('Open the calendar, perhaps?');
         }));
+
+      it('should toggle the active state of the datepicker toggle', fakeAsync(() => {
+        const toggle = fixture.debugElement.query(By.css('mat-datepicker-toggle')).nativeElement;
+
+        expect(toggle.classList).not.toContain('mat-datepicker-toggle-active');
+
+        fixture.componentInstance.datepicker.open();
+        fixture.detectChanges();
+        flush();
+
+        expect(toggle.classList).toContain('mat-datepicker-toggle-active');
+
+        fixture.componentInstance.datepicker.close();
+        fixture.detectChanges();
+        flush();
+        fixture.detectChanges();
+
+        expect(toggle.classList).not.toContain('mat-datepicker-toggle-active');
+      }));
     });
 
     describe('datepicker inside mat-form-field', () => {