[TextField] Improve dense height to better match the specification

[Ritorna]

The dense variant of the Filled and Outlined Inputs do not follow the material specification.

Expected Behavior 🤔

Heights should be as described in the specification.

see the following sandbox https://codesandbox.io/s/material-demo-co7nd

Current Behavior 😯

Context 🔦

We want to build some more complex dialogs using a lot of input components while following the current material specification.

Notes

This PR doesn't support the dense, non-label filled input.

Improve #14521
Closes #15821

[mui-pr-bot]

Details of bundle changes.

Comparing: 3114445...d154bd1

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	+0.05% 🔺	+0.03% 🔺	319,014	319,180	87,423	87,452
@material-ui/core/Paper	0.00%	0.00%	67,964	67,964	20,210	20,210
@material-ui/core/Paper.esm	0.00%	0.00%	61,258	61,258	19,018	19,018
@material-ui/core/Popper	0.00%	0.00%	28,728	28,728	10,344	10,344
@material-ui/core/Textarea	0.00%	0.00%	5,513	5,513	2,373	2,373
@material-ui/core/TrapFocus	0.00%	0.00%	3,755	3,755	1,572	1,572
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,016	16,016	5,820	5,820
@material-ui/core/useMediaQuery	0.00%	0.00%	2,529	2,529	1,087	1,087
@material-ui/lab	0.00%	0.00%	138,362	138,362	42,534	42,534
@material-ui/styles	0.00%	0.00%	51,384	51,384	15,186	15,186
@material-ui/system	0.00%	0.00%	14,463	14,463	4,179	4,179
Button	0.00%	0.00%	83,893	83,893	25,499	25,499
Modal	0.00%	0.00%	20,343	20,343	6,687	6,687
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	55,089	55,089	13,848	13,848
docs.main	0.00%	+0.01% 🔺	653,440	653,471	206,645	206,656
packages/material-ui/build/umd/material-ui.production.min.js	+0.06% 🔺	+0.03% 🔺	292,614	292,780	83,384	83,413

Generated by 🚫 dangerJS against d154bd1

[eps1lon]

Looks good but I can't spot a difference for filled TextFields

[Ritorna]

Looks good but I can't spot a difference for filled TextFields

Yeah haven't had time to implement the necessary changes for FilledInput while being at work. Maybe we could treat them as different PRs.

[eps1lon]

Yeah haven't had time to implement the necessary changes for FilledInput while being at work. Maybe we could treat them as different PRs.

Fine with me. Filled shouldn't be part of PR title and description in that case.

[oliviertassinari]

Thanks for raising this problem to our attention, it's a great problem to work on! I have linked the related issue. I also believe that we should solve #15821 at the same time. It's deeply correlated.
Will you have the time to push it further?

[eps1lon]

@Ritorna Very nice, thanks!

[TidyIQ]

The new margin="dense" is far too dense now. It looked so much better in the previous version.

[TidyIQ]

Also, the margin being so dense now causes issues if you have an IconButton adornment (e.g. a show/hide password icon button). Since the icon button is larger than the input field it causes the password fields to have a larger height than all other input fields.

Previous version - no issues

This version - issues with IconButton adornments

[eps1lon]

@TidyIQ Please open a separate version and fill out the template.

[oliviertassinari]

@TidyIQ What you are describing seem expected. The dense variant now follows the specification. The icon button adornment should be dense too (it's not in your example).