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.

Sign up for GitHub

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

Jump to bottom

[Rating] Improve mobile support #18603

Merged
merged 4 commits into from
Nov 28, 2019
Merged

[Rating] Improve mobile support #18603

merged 4 commits into from
Nov 28, 2019

Conversation

aleccaputo
Copy link
Contributor

On touch screens, the pointer cursor is causing the entire Rating span to flash a blue highlight on click, disable the "pointer" on phone screens to solve this issue.
To reproduce go to https://material-ui.com/components/rating/ and open dev tools to emulate a phone. Now "tap" on a star to change the rating, note the blue highlight effect.

@aleccaputo
Fix rating highlight on click on mobile
7009efd 
On touch screens, the pointer cursor is causing the entire Rating span to flash a blue highlight on click, disable the "pointer" on phone screens to solve this issue
@aleccaputo
need a trailing comma
a8370fe
@mui-pr-bot
Copy link

mui-pr-bot commented Nov 28, 2019 •
edited
Loading

Details of bundle changes.

Comparing: 7a329c5...ce596a6

bundle Size Change Size Gzip Change Gzip
Rating ▲ +38 B (+0.06% ) 68.9 kB ▲ +24 B (+0.11% ) 22.1 kB
@material-ui/lab ▲ +38 B (+0.02% ) 173 kB ▲ +3 B (+0.01% ) 52.1 kB
@material-ui/core -- 354 kB -- 96.7 kB
@material-ui/core[umd] -- 311 kB -- 89.6 kB
@material-ui/styles -- 51 kB -- 15.3 kB
@material-ui/system -- 14.8 kB -- 4.06 kB
AppBar -- 62.6 kB -- 19.5 kB
Autocomplete -- 127 kB -- 39.6 kB
Avatar -- 61.6 kB -- 19.3 kB
Backdrop -- 66.6 kB -- 20.5 kB
Badge -- 64.2 kB -- 19.9 kB
BottomNavigation -- 61.3 kB -- 19.1 kB
BottomNavigationAction -- 74.3 kB -- 23.4 kB
Box -- 69.6 kB -- 21 kB
Breadcrumbs -- 66.9 kB -- 20.9 kB
Button -- 78.3 kB -- 23.9 kB
ButtonBase -- 72.8 kB -- 22.8 kB
ButtonGroup -- 80.9 kB -- 24.8 kB
Card -- 61.6 kB -- 19.2 kB
CardActionArea -- 73.9 kB -- 23.2 kB
CardActions -- 60.9 kB -- 19 kB
CardContent -- 60.9 kB -- 19 kB
CardHeader -- 63.9 kB -- 20 kB
CardMedia -- 61.2 kB -- 19.2 kB
Checkbox -- 80.6 kB -- 25.3 kB
Chip -- 81.4 kB -- 24.8 kB
CircularProgress -- 63 kB -- 19.8 kB
ClickAwayListener -- 3.87 kB -- 1.56 kB
Collapse -- 66.8 kB -- 20.6 kB
colorManipulator -- 3.83 kB -- 1.52 kB
Container -- 62 kB -- 19.3 kB
CssBaseline -- 56.4 kB -- 17.6 kB
Dialog -- 81.4 kB -- 25.4 kB
DialogActions -- 61 kB -- 19 kB
DialogContent -- 61.1 kB -- 19.1 kB
DialogContentText -- 62.9 kB -- 19.7 kB
DialogTitle -- 63.1 kB -- 19.7 kB
Divider -- 61.5 kB -- 19.2 kB
docs.landing -- 55.5 kB -- 14.4 kB
docs.main -- 609 kB -- 194 kB
Drawer -- 83.2 kB -- 25.2 kB
ExpansionPanel -- 70.1 kB -- 21.8 kB
ExpansionPanelActions -- 61 kB -- 19 kB
ExpansionPanelDetails -- 60.8 kB -- 19 kB
ExpansionPanelSummary -- 76.9 kB -- 24.2 kB
Fab -- 75.6 kB -- 23.5 kB
Fade -- 22.4 kB -- 7.71 kB
FilledInput -- 72.3 kB -- 22.4 kB
FormControl -- 63.2 kB -- 19.6 kB
FormControlLabel -- 64.4 kB -- 20.1 kB
FormGroup -- 60.9 kB -- 19 kB
FormHelperText -- 62.1 kB -- 19.4 kB
FormLabel -- 62.3 kB -- 19.2 kB
Grid -- 64 kB -- 20 kB
GridList -- 61.4 kB -- 19.2 kB
GridListTile -- 62.6 kB -- 19.5 kB
GridListTileBar -- 62.1 kB -- 19.3 kB
Grow -- 23 kB -- 7.83 kB
Hidden -- 64.8 kB -- 20.3 kB
Icon -- 61.7 kB -- 19.2 kB
IconButton -- 74.9 kB -- 23.3 kB
Input -- 71.3 kB -- 22.1 kB
InputAdornment -- 63.9 kB -- 20 kB
InputBase -- 69.4 kB -- 21.7 kB
InputLabel -- 64.2 kB -- 20 kB
LinearProgress -- 64.2 kB -- 20 kB
Link -- 65.5 kB -- 20.6 kB
List -- 61.2 kB -- 19 kB
ListItem -- 75.9 kB -- 23.6 kB
ListItemAvatar -- 61 kB -- 19 kB
ListItemIcon -- 61.1 kB -- 19 kB
ListItemSecondaryAction -- 60.9 kB -- 19 kB
ListItemText -- 63.8 kB -- 19.9 kB
ListSubheader -- 61.6 kB -- 19.3 kB
Menu -- 87.1 kB -- 26.8 kB
MenuItem -- 77 kB -- 23.9 kB
MenuList -- 64.8 kB -- 20.2 kB
MobileStepper -- 66.6 kB -- 20.8 kB
Modal -- 14.2 kB -- 4.99 kB
NativeSelect -- 75.6 kB -- 23.7 kB
NoSsr -- 2.19 kB -- 1.03 kB
OutlinedInput -- 72.8 kB -- 22.6 kB
Paper -- 61.1 kB -- 19 kB
Popover -- 81.5 kB -- 25.1 kB
Popper -- 28.6 kB -- 10.2 kB
Portal -- 2.87 kB -- 1.29 kB
Radio -- 81.5 kB -- 25.6 kB
RadioGroup -- 62.1 kB -- 19.4 kB
RootRef -- 4.43 kB -- 1.67 kB
Select -- 113 kB -- 33.5 kB
Skeleton -- 61.4 kB -- 19.3 kB
Slide -- 24.5 kB -- 8.32 kB
Slider -- 74.5 kB -- 23.3 kB
Snackbar -- 76 kB -- 23.7 kB
SnackbarContent -- 64.5 kB -- 20.2 kB
SpeedDial -- 84.9 kB -- 26.7 kB
SpeedDialAction -- 115 kB -- 36.5 kB
SpeedDialIcon -- 63.4 kB -- 19.9 kB
Step -- 61.5 kB -- 19.2 kB
StepButton -- 81.1 kB -- 25.5 kB
StepConnector -- 61.6 kB -- 19.3 kB
StepContent -- 67.9 kB -- 21.2 kB
StepIcon -- 63.5 kB -- 19.7 kB
StepLabel -- 67.5 kB -- 21.1 kB
Stepper -- 63.6 kB -- 20 kB
styles/createMuiTheme -- 15.6 kB -- 5.47 kB
SvgIcon -- 61.9 kB -- 19.3 kB
SwipeableDrawer -- 90.6 kB -- 28 kB
Switch -- 79.9 kB -- 25 kB
Tab -- 75.2 kB -- 23.7 kB
Table -- 61.4 kB -- 19.2 kB
TableBody -- 61 kB -- 19 kB
TableCell -- 62.9 kB -- 19.7 kB
TableFooter -- 61 kB -- 19 kB
TableHead -- 61 kB -- 19 kB
TablePagination -- 140 kB -- 40.7 kB
TableRow -- 61.4 kB -- 19.1 kB
TableSortLabel -- 76.2 kB -- 23.9 kB
Tabs -- 84.3 kB -- 26.5 kB
TextareaAutosize -- 5.06 kB -- 2.11 kB
TextField -- 122 kB -- 35.5 kB
ToggleButton -- 75 kB -- 23.7 kB
ToggleButtonGroup -- 62.1 kB -- 19.4 kB
Toolbar -- 61.2 kB -- 19.1 kB
Tooltip -- 99.4 kB -- 31.4 kB
TreeItem -- 72.4 kB -- 22.8 kB
TreeView -- 65.2 kB -- 20.4 kB
Typography -- 62.5 kB -- 19.5 kB
useAutocomplete -- 12.4 kB -- 4.56 kB
useMediaQuery -- 2.49 kB -- 1.05 kB
Zoom -- 22.5 kB -- 7.71 kB

Generated by 🚫 dangerJS against ce596a6

@oliviertassinari oliviertassinari changed the title Fix rating highlight on click on mobile [Rating] Improve mobile support Nov 28, 2019
@oliviertassinari oliviertassinari added the component: rating This is the name of the generic UI component, not the React module! label Nov 28, 2019
eps1lon
eps1lon reviewed Nov 28, 2019
View reviewed changes
packages/material-ui-lab/src/Rating/Rating.js Outdated
@@ -34,6 +34,8 @@ export const styles = theme => ({
fontSize: theme.typography.pxToRem(24),
color: '#ffb400',
cursor: 'pointer',
// Remove blue highlight
Copy link
Member

Choose a reason for hiding this comment

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

We can just remove this comment as it obviously causes more confusion. The statement itself already says that the highlight is removed. What color the highlight has is platform/user stylesheet dependent.

Copy link
Member

Choose a reason for hiding this comment

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

Sure 👍

@aleccaputo
Copy link
Contributor Author

aleccaputo commented Nov 28, 2019 •
edited
Loading

Thanks @oliviertassinari @eps1lon

@oliviertassinari oliviertassinari merged commit 2c41ac9 into mui:master Nov 28, 2019
@oliviertassinari
Copy link
Member

Thank you, I had this issue on my to do list for quite some time.

@snyk-bot snyk-bot mentioned this pull request Jan 7, 2020
Open
@snyk-bot snyk-bot mentioned this pull request Feb 15, 2020
Open
This was referenced Feb 23, 2020
Open
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@eps1lon eps1lon eps1lon left review comments

@oliviertassinari oliviertassinari oliviertassinari approved these changes

Assignees
No one assigned
Labels
component: rating This is the name of the generic UI component, not the React module!
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
4 participants
@aleccaputo @mui-pr-bot @oliviertassinari @eps1lon