fix(select): don't shift arrow if there is no label (#14607)

Currently we move the arrow for a `mat-select` inside a form field up if it has a value, in order to align it in the middle of the field, however doing so when there is no label makes it look off-center. This is visible when using the `standard` appearance inside a `mat-paginator`. These changes only shift the arrow if there's a label.

Fixes #13907.

Author: crisbeto

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

@@ -121,6 +121,7 @@ export const MAT_FORM_FIELD_DEFAULT_OPTIONS =
     '[class.mat-form-field-invalid]': '_control.errorState',
     '[class.mat-form-field-can-float]': '_canLabelFloat',
     '[class.mat-form-field-should-float]': '_shouldLabelFloat()',
+    '[class.mat-form-field-has-label]': '_hasFloatingLabel()',
     '[class.mat-form-field-hide-placeholder]': '_hideControlPlaceholder()',
     '[class.mat-form-field-disabled]': '_control.disabled',
     '[class.mat-form-field-autofilled]': '_control.autofilled',

src/lib/select/select.scss

@@ -57,10 +57,11 @@ $mat-select-placeholder-arrow-space: 2 * ($mat-select-arrow-size + $mat-select-a
   }
 
   // When used in a standard appearance form-field the arrow should be shifted up 50%,
-  // but only if it's not empty
-  .mat-form-field-appearance-standard .mat-select:not(.mat-select-empty) & {
-    transform: translateY(-50%);
-  }
+  // but only if it's not empty and it has a label.
+  .mat-form-field-appearance-standard.mat-form-field-has-label
+    .mat-select:not(.mat-select-empty) & {
+      transform: translateY(-50%);
+    }
 
   // Animate the arrow position, but only when the transitioning to empty (animate the arrow down)
   // This is in line with the mat-form-field label animation