Paginator: options list visually inconsistent for legacy and standard appearance

[ghost]

Bug, feature request, or proposal:

When defining globally the appearance of the app form-fields as standard (via MatFormFieldDefaultOptions), the paginator options list value is not vertically aligned with its arrow.
When using legacy, (visually) everything works as expected.
On a regular mat-form-field, this inconsistency isn't as noticeable, probably because the font size is larger than the one used on the paginator.

What is the expected behavior?

Paginator options (select element) should have its value aligned with the arrow, when using standard appearance.

What is the current behavior?

Paginator options' (select element) value is not vertically aligned with the arrow.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-cqtqvd-zwpq9y?file=material-module.ts
On the material-module.ts file, go to line 48 and switch the property value between 'legacy' and 'standard'.

What is the use-case or motivation for changing an existing behavior?

Visual inconsistency when using the 'standard' appearance.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Only noticed on Angular 7 and Material 7.0.2, but this could probably affect previous versions.

Is there anything else we should know?

--

[ghost]

I've updated the StackBlitz with an additional example.
The mat-select now allows a null option. Switch back and forth between one of the valid options and the first one (null), and you'll see the arrow moving up and down, when using the global standard appearance value.

[ghost]

(Sorry, closed the ticket by mistake)

[ghost]

@crisbeto, @mmalerba and @josephperrott :

I'm not sure if I should open a new issue for this (because they might be related), but I'll share it here and await for further instructions.

I was just testing the latest version (7.2.1) and I noticed that if I set global appearance options for form fields (via MatFormFieldDefaultOptions), there are still visual inconsistencies, concerning its vertical alignment.

'legacy' appearance: everything is OK
'standard' appearance: page size options are below the vertical center line
'fill' appearance: page size options arrow is too high (since this select element will never have a label)
'outline' appearance: previous/next arrows are below the vertical center line

Please check the following link, and play with the options on material.module.ts, line 49
https://stackblitz.com/edit/angular-yakttk?file=material-module.ts

[mmalerba]

When the spec originally came out, it showed that the inputted text should be a little below center for both the fill and outline appearance. However, the spec has since changed so that the outline appearance appears to be always centered and the fill appearance is centered when there is no label. Updating to match the spec is tricky because of the team's policy of syncing all changes into google's codebase as soon as they're merged on Github. This particular change will cause a huge number of screenshot test failures (many expected, and some unexpected due to use of CSS overrides) that the team will need to go through and resolve. #14171 is being used to track updating form-field to match the latest version of the spec.

@andrewseguin in the meantime maybe paginator should just add some CSS overrides? It does look pretty bad. Should it also have an option to set the appearance of the internal form-field?

[andrewseguin]

Will keep this issue open so we can track the progress on this. We should have good visuals on each type of form field

[flensrocker]

Should it also have an option to set the appearance of the internal form-field?

That would be fine - and maybe an option to place the label inside the form-field.