bug(material/datepicker): descender of letter gets cut off with `outline` appearance

PhilippeMorier commented 3 years ago

Overview of the Issue

When having a datepicker with the appearance set to outline the descenders within the label (for placeholder) get slightly cut off.

Source: https://typography.fandom.com/wiki/Descender

Angular and Material Versions

"@angular/animations": "^11.2.4", "@angular/cdk": "^11.2.3", "@angular/common": "^11.2.4", "@angular/compiler": "^11.2.4", "@angular/core": "^11.2.4", "@angular/forms": "^11.2.4", "@angular/material": "^11.2.3", "@angular/material-moment-adapter": "^11.2.3", "@angular/platform-browser": "^11.2.4", "@angular/platform-browser-dynamic": "^11.2.4", "@angular/router": "^11.2.4", "core-js": "^3.9.1", "moment": "^2.29.1", "rxjs": "^6.6.6", "tslib": "^2.1.0", "zone.js": "^0.11.4"

Motivation for or Use Case

I'd like to use the datepicker with the appearance outline without cut off descenders. It doesn't provide an optimal UX and overall impression.

Browsers and Operating System

Issue observed on macOS Big Sur 11.2.2 with following browsers:

Brave, Version 1.20.110 Chromium: 88.0.4324.192 (Official Build) (x86_64)
Safari, Version 14.0.3 (16610.4.3.1.4)
Firefox, Version 85.0.2 (64-bit)

Reproduce the Error

See this Stackblitz.

Screenshots

Cut off "g"

Related Issues

N/A

Suggest a Fix

One could set the height of the label to 19px or remove overflow: hidden; on .mat-form-field-label but that doesn't feel like we're fixing the root cause 🤕 .