Oct 11, 2020
Big thanks to the 45 contributors who made this release possible.
Here are some highlights ✨:
- 🧪 The promotion of 4 components from the lab to core: Autocomplete, Pagination, SpeedDial, and ToggleButton. These components have been in the lab for more than 10 months @mbrookes.
- 📦 Switch the style engine of the
Box
component from JSS to @material-ui/styled-engine (use emotion by default) (#22945) @mnajdova.
The early benchmark we have run shows that performance has improved. We will share more detailed results in #21657. - 🐙 Migrate a large portion of the tests from enzyme to react-testing-library @eladmotola, @baterson, @bewong89, @devrasec, @guillermaster, @itamar244, @jeferson-sb, @The24thDS.
Last month, react-testing-library had more downloads than enzyme in the ecosystem! - 🏷 Add support for tooltips following the cursor (#22876) @xtrixia.
- And many more 🐛 bug fixes and 📚 improvements.
@material-ui/core@v5.0.0-alpha.12
Breaking changes
-
[Accordion] Remove
display:flex
from AccordionDetails (#22809) @croraf
The style was too opinionated. Most developers expectdisplay: block
. -
[Accordion] Replace IconButton wrapper with div (#22817) @croraf
Remove IconButtonProps prop from AccordionSummary.
The component renders a<div>
element instead of an IconButton.
The prop is no longer relevant. -
[Box] Add mui styled usage (#22945) @mnajdova
Change the style-engine powering the Box component from JSS to the style engine adatper (emotion by default). -
[CircularProgress] Drop IE11 wobbly workaround (#22873) @suliskh
The IE11 workaround is harming performance on the latest browsers.
This change is part of a best-effort strategy to keep IE11 support.
We are degrading the UX and DX with IE11 where we can improve the components on modern browsers. -
[Table] Rename onChangeRowsPerPage and onChangePage (#22900) @eladmotola
The change was done to match the API convention.<TablePagination - onChangeRowsPerPage={()=>{}} - onChangePage={()=>{}} + onRowsPerPageChange={()=>{}} + onPageChange={()=>{}}
-
[theme] Rename fade to alpha (#22834) @mnajdova
Better describe its functionality. The previous name was leading to confusion when the input color already had an alpha value. The helper overrides the alpha value of the color.- import { fade } from '@material-ui/core/styles'; + import { alpha } from '@material-ui/core/styles'; const classes = makeStyles(theme => ({ - backgroundColor: fade(theme.palette.primary.main, theme.palette.action.selectedOpacity), + backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.selectedOpacity), }));
-
[Tooltip] Make
interactive
default (#22382) @eps1lon
The previous default behavior failed success criterion 1.4.3 ("hoverable") in WCAG 2.1.
To reflect the new default value, the prop was renamed todisableInteractive
.
If you want to restore the old behavior (thus not reaching level AA), you can apply the following diff:-<Tooltip> +<Tooltip disableInteractive> # Interactive tooltips no longer need the `interactive` prop. -<Tooltip interactive> +<Tooltip>
Changes
- [Accordion] Remove incorrect demo which nests input in button (#22898) @croraf
- [Autocomplete] Fix filtering when value is already selected (#22935) @montelius
- [Autocomplete] Fix virtualization example in IE11 (#22940) @bearfromtheabyss
- [Autocomplete] Restrict component props in
renderInput
(#22789) @eps1lon - [Box] Add types for
ref
(#22927) @lcswillems - [Button] Fix invalid type value (#22883) @oliviertassinari
- [Button] Improve loading transition (#22884) @oliviertassinari
- [Grid] Clarify document about direction column limitation (#22871) @ThewBear
- [IconButton] Improve warning against non root onClick listeners (#22821) @pranjanpr
- [Popper] Use placement viewport instead of window (#22748) @maksimgm
- [Select] Add generic support for value (#22839) @AntoineGrandchamp
- [Skeleton] Fix importing with named export (#22879) @0prodigy
- [SpeedDial] Fix keyboard navigation when uncontrolled (#22826) @akharkhonov
- [styled] Specify emotion & styled-components as optional peer dependencies (#22808) @mnajdova
- [styled] Support default theme when none is available (#22791) @mnajdova
- [Tabs] Fix RTL scrollbar with Chrome 85 (#22830) @ankit
- [TextField] Pass minRows to InputComponent (#22831) @suliskh
- [ToggleButton] Fix vertical double border (#22825) @Avi98
- [ToggleButton] Match ToggleButtonGroup name and render function name (#22790) @jjoselv
- [Tooltip] Add placement
followCursor
(#22876) @xtrixia - [Tooltip] Improve docs and warning for custom children (#22775) @brorlarsnicklas
- [Tooltip] Use label semantics (#22729) @eps1lon
- [useAutocomplete] Fix getXProps functions type (#22749) @kentaro84207
@material-ui/styled-engine@v5.0.0-alpha.12
@material-ui/lab@v5.0.0-alpha.12
Breaking changes
-
[Autocomplete] Move from lab to core (#22715) @mbrookes
Move the component from the lab to the core. This component will become stable.-import Autocomplete from '@material-ui/lab/Autocomplete'; -import useAutocomplete from '@material-ui/lab/useAutocomplete'; +import Autocomplete from '@material-ui/core/Autocomplete'; +import useAutocomplete from '@material-ui/core/useAutocomplete';
-
[Pagination] Move from lab to core (#22848) @mbrookes
Move the component from the lab to the core. This component will become stable.-import Pagination from '@material-ui/lab/Pagination'; -import PaginationItem from '@material-ui/lab/PaginationItem'; -import { usePagination } from '@material-ui/lab/Pagination'; +import Pagination from '@material-ui/core/Pagination'; +import PaginationItem from '@material-ui/core/PaginationItem'; +import usePagination from '@material-ui/core/usePagination';
-
[SpeedDial] Move from lab to core (#22743) @mbrookes
Move the component from the lab to the core. This component will become stable.-import SpeedDial from '@material-ui/lab/SpeedDial'; -import SpeedDialAction from '@material-ui/lab/SpeedDialAction'; -import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon'; +import SpeedDial from '@material-ui/core/SpeedDial'; +import SpeedDialAction from '@material-ui/core/SpeedDialAction'; +import SpeedDialIcon from '@material-ui/core/SpeedDialIcon';
-
[ToggleButton] Move from lab to core (#22784) @mbrookes
Move the component from the lab to the core. This component will become stable.-import ToggleButton from '@material-ui/lab/ToggleButton'; -import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup'; +import ToggleButton from '@material-ui/core/ToggleButton'; +import ToggleButtonGroup from '@material-ui/core/ToggleButtonGroup';
-
[TreeView] Improve customization of tree item (#22846) @joshwooding
RemoveonLabelClick
andonIconClick
.
Changes
- [AvatarGroup] Add variant prop (#22832) @hjades
- [SliderStyled] Fix mark label alignment on coarse pointer devices (#22849) @joshwooding
Docs
- [docs] Add example for using styled-components as styled-engine (#22788) @mnajdova
- [docs] Add longhand system API props to docs (#22796) @possibilities
- [docs] Box & system cleanup (#22962) @mnajdova
- [docs] CONTRIBUTING.md only yarn is supported (#22754) @Yashvirani
- [docs] Document createSvgIcon() (#22843) @mbrookes
- [docs] Document inherited props (#22318) @oliviertassinari
- [docs] Document LoadingButton behavior (#22878) @eps1lon
- [docs] Fix dark theme for input field on autocomplete (#22711) @GauravKesarwani
- [docs] Fix material icon search details view (#22793) @skr571999
- [docs] Fix type vs. mode and capitalization of createMuiTheme (#22844) @joshwooding
- [docs] Fix typo in guides/typescript (#22806) @croraf
- [docs] Fix various typos (#22842) @kkirsche
- [docs] For non-SSR language, internal search fall back to English (#22902) @bicstone
- [docs] Improve CRA example (#22967) @spursbyte
- [docs] Improve FormControl duplication warning (#22823) @talgautb
- [docs] Improve perf when opening the drawer (#22781) @eps1lon
- [docs] Improve SEO on titles (#22742) @oliviertassinari
- [docs] Improve the left side-nav (#22780) @oliviertassinari
- [docs] Include peer deps in installation steps (#22889) @numToStr
- [docs] Link all the examples in docs (#22891) @Avi98
- [docs] More robust description matcher (#22836) @eps1lon
- [docs] Reduce risk of 404 when changing the default branch (#22801) @eps1lon
- [docs] Resolve .tsx first (#22315) @oliviertassinari
- [docs] Simplify locales example (#22747) @mbrookes
- [docs] Sync translations (#22752, #22851) @l10nbot
- [docs] Update installation guide to contain peer dependencies (#22787) @mnajdova
- [docs] Update ToggleButton import (#22971) @mbrookes
- [docs] Use demo name as codesandbox name (#22926) @eps1lon
Core
- [benchmark] Add cross-env to fix window run issue (#22895) @mnajdova
- [core] Batch small changes (#22746) @oliviertassinari
- [core] Batch small changes (#22847) @oliviertassinari
- [core] Drop babel-plugin-transform-dev-warning (#22802) @eps1lon
- [core] Misc dependency fixes (#22909) @eps1lon
- [test] Apply lazy forwardRef fix (#22904) @eps1lon
- [test] Autocomplete drop "defaultProps" pattern (#22896) @eps1lon
- [test] Fix react-next patch (#22800) @eps1lon
- [test] Migrate Accordion to react-testing-library (#22952) @bewong89
- [test] Migrate Backdrop to react-testing-library (#22931) @itamar244
- [test] Migrate Container to react-testing-library (#22919) @eladmotola
- [test] Migrate CssBaseline to react-testing-library (#22920) @eladmotola
- [test] Migrate Fab to react-testing-library (#22959) @The24thDS
- [test] Migrate Fade to react-testing-library (#22918) @eladmotola
- [test] Migrate Grow to react-testing-library (#22917) @eladmotola
- [test] Migrate List to react-testing-library (#22929) @eladmotola
- [test] Migrate MenuList and ImageListItem to react-testing-library (#22958) @eladmotola
- [test] Migrate MobileStepper to react-testing-library (#22963) @devrasec
- [test] Migrate more components to react-testing-library (#22872) @baterson
- [test] Migrate more components to react-testing-library (#22874) @baterson
- [test] Migrate more components to react-testing-library (#22892) @baterson
- [test] Migrate NativeSelect to react-testing-library (#22970) @guillermaster
- [test] Migrate NativeSelectInput to react-testing-library (#22910) @baterson
- [test] Migrate RadioGroup to react-testing-library (#22953) @eladmotola
- [test] Migrate Slide to react-testing-library (#22913) @eladmotola
- [test] Migrate SpeedDialIcon to react-testing-library (#22965) @jeferson-sb
- [test] Migrate TabIndicator to react-testing-library (#22906) @eladmotola
- [test] Migrate TextField to react-testing-library (#22944) @The24thDS
- [test] Migrate useTheme,withTheme to react-testing-library (#22928) @eladmotola
- [test] Migrate Zoom to react-testing-library (#22914) @eladmotola
- [test] Prevent nextjs build cache to grow indefinitely (#22948) @eps1lon
- [test] Simplify usage of
yarn mocha
(#22899) @eps1lon - [test] Solve 2000ms timeout (#22778) @oliviertassinari
- [test] Update react next patch (#22890) @eps1lon
- [test] Use appropriate templates for csb CI (#22943) @eps1lon
- [test] Verbose reporter in CI (#22924) @eps1lon