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

[CheckBox] Add new colors to the Checkbox and IconButton #19164

Closed
wants to merge 4 commits into from

Conversation

r3dm1ke
Copy link
Contributor

@r3dm1ke r3dm1ke commented Jan 10, 2020

  • [ x ] I have followed (at least) the PR section of the contributing guide.
    This PR adds the support for success, info and warning colors for the Checkbox and IconButton components. Had to do both, b/c Checkbox renders the IconButton under the hood and otherwise, it got type warnings. I started with the Checkbox component as it is simple enough and can give insights on how to implement these colors for everything else.

@r3dm1ke r3dm1ke changed the title Add new colors to checkbox [CheckBox] Add new colors to the Checkbox and IconButton Jan 10, 2020
@mui-pr-bot
Copy link

@material-ui/core: parsed: +0.37% , gzip: +0.18%
@material-ui/lab: parsed: +0.31% , gzip: +0.12%

Details of bundle changes.

Comparing: e5b2e22...69d0911

bundle Size Change Size Gzip Change Gzip
@material-ui/core ▲ +1.34 kB (+0.37% ) 360 kB ▲ +178 B (+0.18% ) 98.8 kB
Checkbox ▲ +1.34 kB (+1.61% ) 84.6 kB ▲ +104 B (+0.39% ) 26.5 kB
@material-ui/core[umd] ▲ +1.26 kB (+0.40% ) 316 kB ▲ +148 B (+0.16% ) 91 kB
TablePagination ▲ +580 B (+0.41% ) 143 kB ▲ +114 B (+0.27% ) 41.9 kB
docs.main ▲ +579 B (+0.09% ) 615 kB ▲ +62 B (+0.03% ) 196 kB
Autocomplete ▲ +578 B (+0.44% ) 132 kB ▲ +58 B (+0.14% ) 41.3 kB
IconButton ▲ +578 B (+0.76% ) 76.9 kB ▲ +46 B (+0.19% ) 24 kB
ExpansionPanelSummary ▲ +578 B (+0.74% ) 78.9 kB ▲ +38 B (+0.15% ) 24.8 kB
Radio ▲ +577 B (+0.68% ) 84.8 kB ▲ +54 B (+0.20% ) 26.7 kB
Alert ▲ +577 B (+0.69% ) 84.5 kB ▲ +31 B (+0.12% ) 26.4 kB
Switch ▲ +577 B (+0.70% ) 83 kB ▲ +30 B (+0.12% ) 26.1 kB
@material-ui/lab ▲ +575 B (+0.31% ) 184 kB ▲ +68 B (+0.12% ) 55.1 kB
ButtonGroup ▼ -2 B (-0.00% ) 83.4 kB ▼ -45 B (-0.18% ) 25.6 kB
@material-ui/system ▲ +2 B (+0.01% ) 14.5 kB ▼ -2 B (-0.05% ) 4.05 kB
colorManipulator ▼ -2 B (-0.05% ) 3.85 kB ▼ -1 B (-0.07% ) 1.52 kB
Box ▲ +1 B (0.00% ) 71 kB ▼ -54 B (-0.25% ) 21.7 kB
Toolbar ▲ +1 B (0.00% ) 62.6 kB ▼ -47 B (-0.24% ) 19.7 kB
Container ▲ +1 B (0.00% ) 63.5 kB ▼ -42 B (-0.21% ) 19.9 kB
Hidden ▲ +1 B (0.00% ) 66.2 kB ▼ -42 B (-0.20% ) 20.8 kB
Divider ▼ -1 B (-0.00% ) 62.8 kB ▼ -38 B (-0.19% ) 19.8 kB
Dialog ▲ +1 B (0.00% ) 83 kB ▼ -35 B (-0.13% ) 26 kB
LinearProgress ▼ -1 B (-0.00% ) 65.6 kB ▼ -34 B (-0.17% ) 20.5 kB
TableCell ▼ -1 B (-0.00% ) 64.3 kB ▼ -32 B (-0.16% ) 20.3 kB
MobileStepper ▼ -1 B (-0.00% ) 68.1 kB ▼ -30 B (-0.14% ) 21.4 kB
Slider ▼ -1 B (-0.00% ) 76.8 kB ▼ -24 B (-0.10% ) 24.4 kB
Breadcrumbs ▼ -1 B (-0.00% ) 68.2 kB ▼ -22 B (-0.10% ) 21.4 kB
SwipeableDrawer ▲ +1 B (0.00% ) 92.1 kB ▼ -21 B (-0.07% ) 28.9 kB
Tab ▲ +1 B (0.00% ) 76.6 kB ▼ -20 B (-0.08% ) 24.3 kB
ToggleButton ▼ -1 B (-0.00% ) 76.4 kB ▼ -17 B (-0.07% ) 24.2 kB
SpeedDialAction ▼ -1 B (-0.00% ) 118 kB ▲ +15 B (+0.04% ) 37.6 kB
Tabs ▲ +1 B (0.00% ) 85.7 kB ▼ -12 B (-0.04% ) 27.2 kB
Snackbar ▲ +1 B (0.00% ) 75.4 kB ▼ -6 B (-0.03% ) 23.7 kB
Button ▼ -1 B (-0.00% ) 79.9 kB ▼ -4 B (-0.02% ) 24.6 kB
MenuItem ▲ +1 B (0.00% ) 78.4 kB ▼ -3 B (-0.01% ) 24.6 kB
Select ▲ +1 B (0.00% ) 116 kB ▼ -3 B (-0.01% ) 34.5 kB
TextField ▲ +1 B (0.00% ) 125 kB ▼ -3 B (-0.01% ) 36.5 kB
OutlinedInput ▲ +1 B (0.00% ) 74.2 kB ▼ -2 B (-0.01% ) 23.2 kB
Chip ▼ -1 B (-0.00% ) 82.8 kB ▼ -1 B (-0.00% ) 25.5 kB
TreeItem -- 74 kB ▼ -52 B (-0.22% ) 23.5 kB
CssBaseline -- 57.8 kB ▼ -49 B (-0.27% ) 18.1 kB
Skeleton -- 63.2 kB ▼ -46 B (-0.23% ) 20 kB
FormGroup -- 62.3 kB ▼ -45 B (-0.23% ) 19.6 kB
ListItemSecondaryAction -- 62.3 kB ▼ -45 B (-0.23% ) 19.5 kB
AvatarGroup -- 62.5 kB ▼ -44 B (-0.22% ) 19.7 kB
ExpansionPanelDetails -- 62.2 kB ▼ -44 B (-0.23% ) 19.5 kB
FormHelperText -- 63.5 kB ▼ -44 B (-0.22% ) 20 kB
StepContent -- 69.2 kB ▼ -44 B (-0.20% ) 21.7 kB
DialogActions -- 62.3 kB ▼ -43 B (-0.22% ) 19.6 kB
ExpansionPanelActions -- 62.3 kB ▼ -43 B (-0.22% ) 19.6 kB
GridListTile -- 64 kB ▼ -43 B (-0.21% ) 20.1 kB
TableContainer -- 62.2 kB ▼ -43 B (-0.22% ) 19.5 kB
BottomNavigation -- 62.7 kB ▼ -42 B (-0.21% ) 19.7 kB
CardActions -- 62.3 kB ▼ -42 B (-0.21% ) 19.6 kB
CardContent -- 62.2 kB ▼ -42 B (-0.21% ) 19.5 kB
Badge -- 65.6 kB ▼ -41 B (-0.20% ) 20.4 kB
CardMedia -- 62.6 kB ▼ -41 B (-0.21% ) 19.7 kB
GridList -- 62.7 kB ▼ -41 B (-0.21% ) 19.8 kB
ListSubheader -- 63 kB ▼ -41 B (-0.21% ) 19.9 kB
StepConnector -- 63 kB ▼ -41 B (-0.21% ) 19.9 kB
DialogContent -- 62.5 kB ▼ -40 B (-0.20% ) 19.6 kB
ToggleButtonGroup -- 63.5 kB ▼ -40 B (-0.20% ) 20 kB
Card -- 63.1 kB ▼ -39 B (-0.20% ) 19.8 kB
Grid -- 65.3 kB ▼ -39 B (-0.19% ) 20.5 kB
GridListTileBar -- 63.5 kB ▼ -39 B (-0.20% ) 19.9 kB
ListItemAvatar -- 62.4 kB ▼ -39 B (-0.20% ) 19.6 kB
Step -- 62.9 kB ▼ -39 B (-0.20% ) 19.8 kB
Stepper -- 65.1 kB ▼ -39 B (-0.19% ) 20.6 kB
Table -- 62.8 kB ▼ -39 B (-0.20% ) 19.8 kB
TableHead -- 62.4 kB ▼ -39 B (-0.20% ) 19.6 kB
AlertTitle -- 64.4 kB ▼ -38 B (-0.19% ) 20.3 kB
Icon -- 63 kB ▼ -38 B (-0.19% ) 19.8 kB
ListItemIcon -- 62.4 kB ▼ -38 B (-0.19% ) 19.6 kB
SpeedDialIcon -- 64.8 kB ▼ -37 B (-0.18% ) 20.4 kB
TableBody -- 62.4 kB ▼ -37 B (-0.19% ) 19.6 kB
AppBar -- 64.2 kB ▼ -36 B (-0.18% ) 20.2 kB
Avatar -- 65.5 kB ▼ -36 B (-0.17% ) 20.7 kB
NativeSelect -- 77 kB ▼ -36 B (-0.15% ) 24.3 kB
StepLabel -- 68.8 kB ▼ -36 B (-0.17% ) 21.7 kB
TableFooter -- 62.4 kB ▼ -36 B (-0.18% ) 19.6 kB
TableRow -- 62.8 kB ▼ -36 B (-0.18% ) 19.7 kB
TreeView -- 66.9 kB ▼ -36 B (-0.17% ) 21.1 kB
DialogTitle -- 64.5 kB ▼ -35 B (-0.17% ) 20.3 kB
CardHeader -- 65.3 kB ▼ -34 B (-0.16% ) 20.6 kB
Rating -- 70.7 kB ▼ -33 B (-0.14% ) 22.8 kB
DialogContentText -- 64.3 kB ▼ -32 B (-0.16% ) 20.3 kB
FormControlLabel -- 65.8 kB ▼ -32 B (-0.15% ) 20.7 kB
InputAdornment -- 65.3 kB ▼ -32 B (-0.16% ) 20.6 kB
ListItemText -- 65.2 kB ▼ -31 B (-0.15% ) 20.5 kB
Link -- 66.8 kB ▼ -30 B (-0.14% ) 21.2 kB
CircularProgress -- 64.4 kB ▼ -25 B (-0.12% ) 20.3 kB
ExpansionPanel -- 72.4 kB ▼ -23 B (-0.10% ) 22.8 kB
SnackbarContent -- 63.8 kB ▼ -23 B (-0.11% ) 20.1 kB
CardActionArea -- 75.3 kB ▼ -22 B (-0.09% ) 23.8 kB
BottomNavigationAction -- 75.7 kB ▼ -21 B (-0.09% ) 24 kB
StepButton -- 82.5 kB ▼ -21 B (-0.08% ) 26.2 kB
TableSortLabel -- 77.6 kB ▼ -18 B (-0.07% ) 24.5 kB
Slide -- 25.3 kB ▲ +11 B (+0.13% ) 8.74 kB
SpeedDial -- 86.3 kB ▼ -10 B (-0.04% ) 27.3 kB
Zoom -- 23.4 kB ▲ +7 B (+0.09% ) 8.12 kB
FormLabel -- 63.7 kB ▼ -4 B (-0.02% ) 19.8 kB
Menu -- 88.7 kB ▼ -4 B (-0.01% ) 27.4 kB
Collapse -- 68.1 kB ▼ -3 B (-0.01% ) 21.2 kB
Fade -- 23.3 kB ▲ +3 B (+0.04% ) 8 kB
FormControl -- 64.6 kB ▼ -3 B (-0.01% ) 20.2 kB
InputBase -- 70.8 kB ▼ -3 B (-0.01% ) 22.3 kB
InputLabel -- 65.6 kB ▼ -3 B (-0.01% ) 20.3 kB
List -- 62.6 kB ▼ -3 B (-0.02% ) 19.6 kB
Paper -- 62.6 kB ▼ -3 B (-0.02% ) 19.6 kB
Popover -- 83 kB ▼ -3 B (-0.01% ) 25.8 kB
SvgIcon -- 63.3 kB ▼ -3 B (-0.02% ) 19.8 kB
Typography -- 63.9 kB ▼ -3 B (-0.01% ) 20.1 kB
Backdrop -- 68 kB ▼ -2 B (-0.01% ) 21.1 kB
ButtonBase -- 74.2 kB ▼ -2 B (-0.01% ) 23.4 kB
Drawer -- 84.7 kB ▼ -2 B (-0.01% ) 25.9 kB
Fab -- 77 kB ▼ -2 B (-0.01% ) 24.1 kB
FilledInput -- 73.8 kB ▼ -2 B (-0.01% ) 23 kB
Input -- 72.7 kB ▼ -2 B (-0.01% ) 22.8 kB
ListItem -- 77.3 kB ▼ -2 B (-0.01% ) 24.3 kB
MenuList -- 66.2 kB ▼ -2 B (-0.01% ) 20.8 kB
RadioGroup -- 64.7 kB ▼ -2 B (-0.01% ) 20.1 kB
StepIcon -- 64.9 kB ▼ -2 B (-0.01% ) 20.3 kB
Grow -- 23.9 kB ▼ -1 B (-0.01% ) 8.21 kB
styles/createMuiTheme -- 16.5 kB ▼ -1 B (-0.02% ) 5.84 kB
Tooltip -- 102 kB ▼ -1 B (-0.00% ) 32.4 kB
@material-ui/styles -- 51.3 kB -- 15.5 kB
ClickAwayListener -- 3.85 kB -- 1.54 kB
docs.landing -- 50.9 kB -- 13.5 kB
Modal -- 14.3 kB -- 5.03 kB
NoSsr -- 2.19 kB -- 1.04 kB
Popper -- 28.7 kB -- 10.3 kB
Portal -- 2.9 kB -- 1.3 kB
RootRef -- 4.21 kB -- 1.64 kB
TextareaAutosize -- 5.09 kB -- 2.14 kB
useAutocomplete -- 14.3 kB -- 5.18 kB
useMediaQuery -- 2.5 kB -- 1.05 kB

Generated by 🚫 dangerJS against 69d0911

@oliviertassinari
Copy link
Member

oliviertassinari commented Jan 19, 2020

@r3dm1ke This pull request reminds me of #17475.

@oliviertassinari
Copy link
Member

I don't think that our style infrastructure is ready for pushing this approach further. Thanks for the exploration.

@oliviertassinari oliviertassinari mentioned this pull request Jul 27, 2020
1 task
@zannager zannager added the component: checkbox This is the name of the generic UI component, not the React module! label Feb 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component: checkbox 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.

4 participants