Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[TextField] Fix label notch for custom htmlFontSize #19558

Merged
merged 2 commits into from
Feb 5, 2020
Merged

[TextField] Fix label notch for custom htmlFontSize #19558

merged 2 commits into from
Feb 5, 2020

Conversation

kusmierz
Copy link
Contributor

@kusmierz kusmierz commented Feb 4, 2020

It fixes #19409 PR, which introduced another bug with label notch.

image

@oliviertassinari
Copy link
Member

@kusmierz Do you have a reproduction?

@oliviertassinari oliviertassinari added the status: waiting for author Issue with insufficient information label Feb 4, 2020
@mui-pr-bot
Copy link

mui-pr-bot commented Feb 4, 2020

Details of bundle changes.

Comparing: 1a949cd...3e09dfc

bundle Size Change Size Gzip Change Gzip
@material-ui/core[umd] ▼ -44 B (-0.01% ) 317 kB ▲ +1 B (0.00% ) 92 kB
@material-ui/core ▼ -34 B (-0.01% ) 362 kB ▼ -15 B (-0.02% ) 98.8 kB
TextField ▼ -34 B (-0.03% ) 125 kB ▼ -15 B (-0.04% ) 36.6 kB
TablePagination ▼ -34 B (-0.02% ) 144 kB ▼ -12 B (-0.03% ) 42 kB
OutlinedInput ▼ -34 B (-0.05% ) 74.7 kB ▲ +5 B (+0.02% ) 23.3 kB
Select ▼ -34 B (-0.03% ) 117 kB ▼ -5 B (-0.01% ) 34.6 kB
NativeSelect ▼ -34 B (-0.04% ) 77 kB ▼ -4 B (-0.02% ) 24.3 kB
Input ▼ -34 B (-0.05% ) 72.7 kB ▲ +3 B (+0.01% ) 22.7 kB
FilledInput ▼ -34 B (-0.05% ) 73.7 kB ▲ +2 B (+0.01% ) 22.9 kB
InputBase ▼ -34 B (-0.05% ) 70.8 kB -- 22.2 kB
@material-ui/lab -- 185 kB -- 55.2 kB
@material-ui/styles -- 51.4 kB -- 15.4 kB
@material-ui/system -- 16.4 kB -- 4.3 kB
Alert -- 83.6 kB -- 26.3 kB
AlertTitle -- 64.3 kB -- 20.3 kB
AppBar -- 64.2 kB -- 20.1 kB
Autocomplete -- 132 kB -- 41.4 kB
Avatar -- 65.4 kB -- 20.6 kB
AvatarGroup -- 62.4 kB -- 19.6 kB
Backdrop -- 68 kB -- 21 kB
Badge -- 65.5 kB -- 20.4 kB
BottomNavigation -- 62.6 kB -- 19.6 kB
BottomNavigationAction -- 75.7 kB -- 23.9 kB
Box -- 72 kB -- 21.8 kB
Breadcrumbs -- 67.9 kB -- 21.3 kB
Button -- 79.9 kB -- 24.5 kB
ButtonBase -- 74.2 kB -- 23.3 kB
ButtonGroup -- 83.4 kB -- 25.5 kB
Card -- 63 kB -- 19.7 kB
CardActionArea -- 75.3 kB -- 23.7 kB
CardActions -- 62.2 kB -- 19.5 kB
CardContent -- 62.1 kB -- 19.5 kB
CardHeader -- 65.2 kB -- 20.5 kB
CardMedia -- 62.5 kB -- 19.7 kB
Checkbox -- 83.2 kB -- 26.3 kB
Chip -- 82.8 kB -- 25.4 kB
CircularProgress -- 64.3 kB -- 20.3 kB
ClickAwayListener -- 3.91 kB -- 1.55 kB
Collapse -- 68.2 kB -- 21.1 kB
colorManipulator -- 3.88 kB -- 1.52 kB
Container -- 63.3 kB -- 19.8 kB
CssBaseline -- 57.7 kB -- 18.1 kB
Dialog -- 83.2 kB -- 25.9 kB
DialogActions -- 62.2 kB -- 19.5 kB
DialogContent -- 62.4 kB -- 19.6 kB
DialogContentText -- 64.2 kB -- 20.2 kB
DialogTitle -- 64.4 kB -- 20.2 kB
Divider -- 62.7 kB -- 19.7 kB
docs.landing -- 56.4 kB -- 14.5 kB
docs.main -- 596 kB -- 194 kB
Drawer -- 85 kB -- 25.8 kB
ExpansionPanel -- 72.5 kB -- 22.7 kB
ExpansionPanelActions -- 62.2 kB -- 19.5 kB
ExpansionPanelDetails -- 62.1 kB -- 19.5 kB
ExpansionPanelSummary -- 78.3 kB -- 24.7 kB
Fab -- 77 kB -- 24 kB
Fade -- 23.4 kB -- 7.97 kB
FormControl -- 64.6 kB -- 20.2 kB
FormControlLabel -- 65.7 kB -- 20.6 kB
FormGroup -- 62.2 kB -- 19.5 kB
FormHelperText -- 63.5 kB -- 20 kB
FormLabel -- 63.6 kB -- 19.8 kB
Grid -- 65.3 kB -- 20.5 kB
GridList -- 62.6 kB -- 19.7 kB
GridListTile -- 63.9 kB -- 20 kB
GridListTileBar -- 63.4 kB -- 19.9 kB
Grow -- 24 kB -- 8.19 kB
Hidden -- 66.1 kB -- 20.8 kB
Icon -- 62.9 kB -- 19.8 kB
IconButton -- 76.3 kB -- 23.8 kB
InputAdornment -- 65.3 kB -- 20.5 kB
InputLabel -- 65.5 kB -- 20.2 kB
LinearProgress -- 65.5 kB -- 20.5 kB
Link -- 66.8 kB -- 21.1 kB
List -- 62.5 kB -- 19.5 kB
ListItem -- 77.3 kB -- 24.2 kB
ListItemAvatar -- 62.3 kB -- 19.5 kB
ListItemIcon -- 62.3 kB -- 19.5 kB
ListItemSecondaryAction -- 62.2 kB -- 19.5 kB
ListItemText -- 65.1 kB -- 20.5 kB
ListSubheader -- 62.9 kB -- 19.8 kB
Menu -- 88.9 kB -- 27.4 kB
MenuItem -- 78.4 kB -- 24.5 kB
MenuList -- 66.2 kB -- 20.7 kB
MobileStepper -- 68 kB -- 21.4 kB
Modal -- 14.5 kB -- 5.04 kB
NoSsr -- 2.19 kB -- 1.04 kB
Paper -- 62.5 kB -- 19.5 kB
Popover -- 83.3 kB -- 25.8 kB
Popper -- 28.8 kB -- 10.3 kB
Portal -- 2.92 kB -- 1.3 kB
Radio -- 84.2 kB -- 26.6 kB
RadioGroup -- 64.6 kB -- 20.1 kB
Rating -- 70.7 kB -- 22.7 kB
RootRef -- 4.24 kB -- 1.64 kB
Skeleton -- 63.1 kB -- 20 kB
Slide -- 25.5 kB -- 8.71 kB
Slider -- 76.8 kB -- 24.3 kB
Snackbar -- 75.6 kB -- 23.7 kB
SnackbarContent -- 63.7 kB -- 20.1 kB
SpeedDial -- 86.4 kB -- 27.2 kB
SpeedDialAction -- 119 kB -- 37.5 kB
SpeedDialIcon -- 64.7 kB -- 20.3 kB
Step -- 62.8 kB -- 19.7 kB
StepButton -- 82.5 kB -- 26.1 kB
StepConnector -- 62.9 kB -- 19.8 kB
StepContent -- 69.3 kB -- 21.7 kB
StepIcon -- 64.8 kB -- 20.2 kB
StepLabel -- 68.8 kB -- 21.7 kB
Stepper -- 65 kB -- 20.5 kB
styles/createMuiTheme -- 16.5 kB -- 5.81 kB
SvgIcon -- 63.2 kB -- 19.8 kB
SwipeableDrawer -- 92.4 kB -- 28.9 kB
Switch -- 82.3 kB -- 26 kB
Tab -- 76.5 kB -- 24.2 kB
Table -- 62.7 kB -- 19.7 kB
TableBody -- 62.3 kB -- 19.5 kB
TableCell -- 64.2 kB -- 20.2 kB
TableContainer -- 62.1 kB -- 19.5 kB
TableFooter -- 62.3 kB -- 19.5 kB
TableHead -- 62.3 kB -- 19.5 kB
TableRow -- 62.6 kB -- 19.7 kB
TableSortLabel -- 77.6 kB -- 24.4 kB
Tabs -- 85.8 kB -- 27.2 kB
TextareaAutosize -- 5.12 kB -- 2.14 kB
ToggleButton -- 76.3 kB -- 24.2 kB
ToggleButtonGroup -- 63.4 kB -- 20 kB
Toolbar -- 62.5 kB -- 19.6 kB
Tooltip -- 102 kB -- 32.4 kB
TreeItem -- 74.2 kB -- 23.5 kB
TreeView -- 66.8 kB -- 21.1 kB
Typography -- 63.8 kB -- 20 kB
useAutocomplete -- 14.7 kB -- 5.32 kB
useMediaQuery -- 2.58 kB -- 1.07 kB
Zoom -- 23.5 kB -- 8.1 kB

Generated by 🚫 dangerJS against 3e09dfc

@kusmierz
Copy link
Contributor Author

kusmierz commented Feb 4, 2020

@oliviertassinari - https://codesandbox.io/s/material-demo-qmvfd

I discovered, the issue is caused by custom body1.fontSize...

@kusmierz
Copy link
Contributor Author

kusmierz commented Feb 4, 2020

hm, but this is not a good solution either :( see https://www.argos-ci.com/mui-org/material-ui/builds/61163

@oliviertassinari
Copy link
Member

@kusmierz Awesome, thank you for the reproduction. Well, basically, we are in this case: #19409 (review).

@oliviertassinari oliviertassinari added component: text field This is the name of the generic UI component, not the React module! bug 🐛 Something doesn't work and removed status: waiting for author Issue with insufficient information labels Feb 4, 2020
Copy link
Member

@oliviertassinari oliviertassinari left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alright, I think that it's a good step forward like this. The label is meant to overlap with the input, it's more coherent to use the same font typography.

@oliviertassinari
Copy link
Member

Another good step forward :).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: text field This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants