fix(select): wrong cursor on disabled select (#7696)

* Fixes some area of a disabled select having a `cursor: pointer`.
* Replaces the `mat-disabled` class on the form field underline with a `mat-form-field-disabled` class on the form field itself to allow for easier styling.

Fixes #7695.

Author: crisbeto

src/lib/form-field/_form-field-theme.scss

@@ -55,10 +55,10 @@
 
   .mat-form-field-underline {
     background-color: $underline-color;
+  }
 
-    &.mat-disabled {
-      @include mat-control-disabled-underline($underline-color);
-    }
+  .mat-form-field-disabled .mat-form-field-underline {
+    @include mat-control-disabled-underline($underline-color);
   }
 
   .mat-form-field-ripple {

src/lib/form-field/form-field.html

@@ -35,8 +35,7 @@
     </div>
   </div>
 
-  <div class="mat-input-underline mat-form-field-underline" #underline
-       [class.mat-disabled]="_control.disabled">
+  <div class="mat-input-underline mat-form-field-underline" #underline>
     <span class="mat-input-ripple mat-form-field-ripple"
           [class.mat-accent]="color == 'accent'"
           [class.mat-warn]="color == 'warn'"></span>

src/lib/form-field/form-field.scss

@@ -148,7 +148,7 @@ $mat-form-field-underline-height: 1px !default;
   // Prevents underline from disappearing at lower zoom levels.
   transform: perspective(1px);
 
-  &.mat-disabled {
+  .mat-form-field-disabled & {
     background-position: 0;
     background-color: transparent;
   }

src/lib/form-field/form-field.ts

@@ -75,6 +75,7 @@ let nextUniqueId = 0;
     '[class.mat-form-field-invalid]': '_control.errorState',
     '[class.mat-form-field-can-float]': '_canPlaceholderFloat',
     '[class.mat-form-field-should-float]': '_control.shouldPlaceholderFloat || _shouldAlwaysFloat',
+    '[class.mat-form-field-disabled]': '_control.disabled',
     '[class.mat-focused]': '_control.focused',
     '[class.mat-primary]': 'color == "primary"',
     '[class.mat-accent]': 'color == "accent"',

src/lib/input/input.spec.ts

@@ -423,19 +423,19 @@ describe('MatInput without forms', function () {
     const fixture = TestBed.createComponent(MatInputWithDisabled);
     fixture.detectChanges();
 
-    const underlineEl =
-        fixture.debugElement.query(By.css('.mat-form-field-underline')).nativeElement;
+    const formFieldEl =
+        fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
     const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
 
-    expect(underlineEl.classList.contains('mat-disabled'))
-        .toBe(false, `Expected underline not to start out disabled.`);
+    expect(formFieldEl.classList.contains('mat-form-field-disabled'))
+        .toBe(false, `Expected form field not to start out disabled.`);
     expect(inputEl.disabled).toBe(false);
 
     fixture.componentInstance.disabled = true;
     fixture.detectChanges();
 
-    expect(underlineEl.classList.contains('mat-disabled'))
-        .toBe(true, `Expected underline to look disabled after property is set.`);
+    expect(formFieldEl.classList.contains('mat-form-field-disabled'))
+        .toBe(true, `Expected form field to look disabled after property is set.`);
     expect(inputEl.disabled).toBe(true);
   }));
 
@@ -1010,19 +1010,19 @@ describe('MatInput with forms', () => {
     const fixture = TestBed.createComponent(MatInputWithFormControl);
     fixture.detectChanges();
 
-    const underlineEl =
-        fixture.debugElement.query(By.css('.mat-form-field-underline')).nativeElement;
+    const formFieldEl =
+        fixture.debugElement.query(By.css('.mat-form-field')).nativeElement;
     const inputEl = fixture.debugElement.query(By.css('input')).nativeElement;
 
-    expect(underlineEl.classList)
-      .not.toContain('mat-disabled', `Expected underline not to start out disabled.`);
+    expect(formFieldEl.classList)
+      .not.toContain('mat-form-field-disabled', `Expected form field not to start out disabled.`);
     expect(inputEl.disabled).toBe(false);
 
     fixture.componentInstance.formControl.disable();
     fixture.detectChanges();
 
-    expect(underlineEl.classList).toContain('mat-disabled',
-      `Expected underline to look disabled after disable() is called.`);
+    expect(formFieldEl.classList).toContain('mat-form-field-disabled',
+      `Expected form field to look disabled after disable() is called.`);
     expect(inputEl.disabled).toBe(true);
   });
 

src/lib/select/select.scss

@@ -78,7 +78,7 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
 }
 
 .mat-form-field-type-mat-select {
-  .mat-form-field-flex {
+  &:not(.mat-form-field-disabled) .mat-form-field-flex {
     cursor: pointer;
   }