[TextField] Fix label notch for custom htmlFontSize

[kusmierz]

• I have followed (at least) the PR section of the contributing guide.

Solve #17680 (comment)

[mui-pr-bot]

Details of bundle changes.

Comparing: 0131b7b...0177bbf

bundle	Size Change	Size	Gzip Change	Gzip
@material-ui/core	▼ -1 B (-0.00% )	360 kB	▼ -2 B (-0.00% )	98.7 kB
OutlinedInput	▼ -1 B (-0.00% )	74.5 kB	▼ -2 B (-0.01% )	23.2 kB
Select	▼ -1 B (-0.00% )	116 kB	▼ -2 B (-0.01% )	34.6 kB
TablePagination	▼ -1 B (-0.00% )	143 kB	▼ -1 B (-0.00% )	41.9 kB
TextField	▼ -1 B (-0.00% )	125 kB	▼ -1 B (-0.00% )	36.6 kB
@material-ui/core[umd]	▼ -1 B (-0.00% )	317 kB	--	91.9 kB
@material-ui/lab	--	185 kB	--	55.2 kB
@material-ui/styles	--	51.2 kB	--	15.4 kB
@material-ui/system	--	14.8 kB	--	4.07 kB
Alert	--	83.8 kB	--	26.3 kB
AlertTitle	--	64.2 kB	--	20.2 kB
AppBar	--	63.9 kB	--	20 kB
Autocomplete	--	132 kB	--	41.3 kB
Avatar	--	65.2 kB	--	20.6 kB
AvatarGroup	--	62.3 kB	--	19.6 kB
Backdrop	--	67.9 kB	--	21 kB
Badge	--	65.3 kB	--	20.3 kB
BottomNavigation	--	62.4 kB	--	19.6 kB
BottomNavigationAction	--	75.6 kB	--	23.9 kB
Box	--	70.8 kB	--	21.6 kB
Breadcrumbs	--	67.8 kB	--	21.3 kB
Button	--	79.8 kB	--	24.5 kB
ButtonBase	--	74 kB	--	23.3 kB
ButtonGroup	--	83.2 kB	--	25.5 kB
Card	--	62.8 kB	--	19.7 kB
CardActionArea	--	75.1 kB	--	23.7 kB
CardActions	--	62 kB	--	19.5 kB
CardContent	--	62 kB	--	19.4 kB
CardHeader	--	65.1 kB	--	20.5 kB
CardMedia	--	62.3 kB	--	19.6 kB
Checkbox	--	83 kB	--	26.3 kB
Chip	--	82.6 kB	--	25.3 kB
CircularProgress	--	64.1 kB	--	20.3 kB
ClickAwayListener	--	3.91 kB	--	1.55 kB
Collapse	--	68 kB	--	21.1 kB
colorManipulator	--	3.88 kB	--	1.52 kB
Container	--	63.2 kB	--	19.8 kB
CssBaseline	--	57.5 kB	--	18.1 kB
Dialog	--	83 kB	--	25.9 kB
DialogActions	--	62.1 kB	--	19.5 kB
DialogContent	--	62.2 kB	--	19.5 kB
DialogContentText	--	64 kB	--	20.1 kB
DialogTitle	--	64.3 kB	--	20.2 kB
Divider	--	62.6 kB	--	19.7 kB
docs.landing	--	50.5 kB	--	13.3 kB
docs.main	--	596 kB	--	194 kB
Drawer	--	84.8 kB	--	25.8 kB
ExpansionPanel	--	72.3 kB	--	22.7 kB
ExpansionPanelActions	--	62.1 kB	--	19.5 kB
ExpansionPanelDetails	--	61.9 kB	--	19.4 kB
ExpansionPanelSummary	--	78.2 kB	--	24.7 kB
Fab	--	76.9 kB	--	24 kB
Fade	--	23.4 kB	--	7.98 kB
FilledInput	--	73.6 kB	--	22.9 kB
FormControl	--	64.4 kB	--	20.1 kB
FormControlLabel	--	65.5 kB	--	20.6 kB
FormGroup	--	62 kB	--	19.5 kB
FormHelperText	--	63.4 kB	--	20 kB
FormLabel	--	63.5 kB	--	19.7 kB
Grid	--	65.1 kB	--	20.4 kB
GridList	--	62.5 kB	--	19.7 kB
GridListTile	--	63.7 kB	--	20 kB
GridListTileBar	--	63.2 kB	--	19.8 kB
Grow	--	24 kB	--	8.19 kB
Hidden	--	65.9 kB	--	20.7 kB
Icon	--	62.8 kB	--	19.7 kB
IconButton	--	76.2 kB	--	23.8 kB
Input	--	72.5 kB	--	22.7 kB
InputAdornment	--	65.1 kB	--	20.5 kB
InputBase	--	70.6 kB	--	22.2 kB
InputLabel	--	65.3 kB	--	20.2 kB
LinearProgress	--	65.3 kB	--	20.4 kB
Link	--	66.6 kB	--	21.1 kB
List	--	62.3 kB	--	19.5 kB
ListItem	--	77.2 kB	--	24.2 kB
ListItemAvatar	--	62.1 kB	--	19.5 kB
ListItemIcon	--	62.2 kB	--	19.5 kB
ListItemSecondaryAction	--	62 kB	--	19.4 kB
ListItemText	--	64.9 kB	--	20.4 kB
ListSubheader	--	62.7 kB	--	19.8 kB
Menu	--	88.8 kB	--	27.4 kB
MenuItem	--	78.2 kB	--	24.5 kB
MenuList	--	66 kB	--	20.7 kB
MobileStepper	--	67.8 kB	--	21.3 kB
Modal	--	14.5 kB	--	5.05 kB
NativeSelect	--	76.8 kB	--	24.3 kB
NoSsr	--	2.19 kB	--	1.04 kB
Paper	--	62.3 kB	--	19.5 kB
Popover	--	83.1 kB	--	25.8 kB
Popper	--	28.8 kB	--	10.3 kB
Portal	--	2.92 kB	--	1.3 kB
Radio	--	84.1 kB	--	26.5 kB
RadioGroup	--	64.4 kB	--	20 kB
Rating	--	70.5 kB	--	22.7 kB
RootRef	--	4.24 kB	--	1.64 kB
Skeleton	--	62.9 kB	--	19.9 kB
Slide	--	25.5 kB	--	8.71 kB
Slider	--	76.6 kB	--	24.3 kB
Snackbar	--	75.4 kB	--	23.6 kB
SnackbarContent	--	63.5 kB	--	20 kB
SpeedDial	--	86.3 kB	--	27.2 kB
SpeedDialAction	--	118 kB	--	37.5 kB
SpeedDialIcon	--	64.6 kB	--	20.3 kB
Step	--	62.6 kB	--	19.7 kB
StepButton	--	82.4 kB	--	26.1 kB
StepConnector	--	62.7 kB	--	19.8 kB
StepContent	--	69.2 kB	--	21.7 kB
StepIcon	--	64.6 kB	--	20.2 kB
StepLabel	--	68.6 kB	--	21.6 kB
Stepper	--	64.9 kB	--	20.5 kB
styles/createMuiTheme	--	16.5 kB	--	5.81 kB
SvgIcon	--	63 kB	--	19.7 kB
SwipeableDrawer	--	92.3 kB	--	28.9 kB
Switch	--	82.2 kB	--	25.9 kB
Tab	--	76.4 kB	--	24.2 kB
Table	--	62.5 kB	--	19.7 kB
TableBody	--	62.1 kB	--	19.5 kB
TableCell	--	64 kB	--	20.2 kB
TableContainer	--	61.9 kB	--	19.4 kB
TableFooter	--	62.1 kB	--	19.5 kB
TableHead	--	62.1 kB	--	19.5 kB
TableRow	--	62.5 kB	--	19.6 kB
TableSortLabel	--	77.5 kB	--	24.4 kB
Tabs	--	85.6 kB	--	27.2 kB
TextareaAutosize	--	5.12 kB	--	2.14 kB
ToggleButton	--	76.2 kB	--	24.1 kB
ToggleButtonGroup	--	63.2 kB	--	19.9 kB
Toolbar	--	62.3 kB	--	19.6 kB
Tooltip	--	102 kB	--	32.3 kB
TreeItem	--	74 kB	--	23.4 kB
TreeView	--	66.7 kB	--	21 kB
Typography	--	63.6 kB	--	19.9 kB
useAutocomplete	--	14.6 kB	--	5.27 kB
useMediaQuery	--	2.51 kB	--	1.06 kB
Zoom	--	23.5 kB	--	8.1 kB

Generated by 🚫 dangerJS against 0177bbf

[oliviertassinari]

We might be able to improve overrides by using body1 for the typograghy of the input base root element but this change is already a good step forward.

[eps1lon]

@kusmierz Looks good. Thanks for the report and fix 👍

[kusmierz]

I guess we need some correction here, unfortunately. I'm not sure if something has been changed in the meantime, but currently (4.9.1) we have different bug:

I did some research and:
.MuiFormLabel-root has font-size: 1.4rem plus, when at the top, it has additionally:

.MuiInputLabel-outlined.MuiInputLabel-shrink {
    transform: translate(14px, -6px) scale(0.75);
} 

which basically means, this hidden text should have 1.4*0.75 = 1.05rem...

it works with default htmlFontSize as well... I did another PR #19558

[slim-hmidi]

@kusmierz @oliviertassinari faced an issue when I set a font-size 0.75rem and it's described here #32903