@material-ui/lab
Version:
Laboratory for new Material-UI modules.
995 lines (728 loc) β’ 839 kB
Markdown
### [Versions](https://material-ui.com/versions/)
## 5.0.0-beta.4
<!-- generated comparing v5.0.0-beta.3..next -->
_Aug 13, 2021_
Big thanks to the 19 contributors who made this release possible. Here are some highlights β¨:
- π Grid's "auto" behavior has been fixed by @aaronlademann-wf (#27514)
- βΏ An important bug with the keyboard navigation in MenuList was fixed (#27526) @ryancogswell
### `@material-ui/core@5.0.0-beta.4`
#### Breaking changes
- <!-- 07 --> [Grid] Fix "auto" behavior to match natural width of its content (#27514) @aaronlademann-wf
#### Changes
- <!-- 30 --> [ButtonBase] Fix tabIndex type (#27684) @kylegach
- <!-- 13 --> [MenuList] Fix text navigation (#27526) @ryancogswell
- <!-- 01 --> [l10n] Add Arabic Sudan (ar-SD) locale (#27588) @YassinHussein
- <!-- 23 --> [Radio] Fix size prop forwarding with custom icons (#27656) @DouglasPds
- <!-- 10 --> [TextField] Password visibility icons ( "visibility" β "visibility-off" ) should be reversed (#27507) @tonextone
- <!-- 18 --> [ToggleButton] Fix handling of color prop (#27635) @oliviertassinari
### `@material-ui/codemods@5.0.0-beta.4`
- <!-- 20 --> [codemod] Fix filename case sensitive duplicate @oliviertassinari
### `@material-ui/system@5.0.0-beta.4`
- <!-- 28 --> [StyledEngineProvider] Remove unnecessary emotion cache export (#27680) @garronej
- <!-- 11 --> [system] Fix missing filterProps in compose type (#27618) @R-Bower
### `@material-ui/labs@5.0.0-alpha.42`
- <!-- 27 --> [CalendarPicker] Improve contrast between enabled and disabled days (#27603) @nikitabobers
- <!-- 32 --> [PickersDay] Render `children` if specified (#27462) @abriginets
- <!-- 05 --> [TreeView] Fix TreeItem label overflow (#27585) @LorenzHenk
### Docs
- <!-- 36 --> [docs] Update guides for @material-ui/styled-engine-sc installation (#27602) @mnajdova
- <!-- 35 --> [docs] Document that @material-ui/styles is not strict mode compatible (#27639) @oliviertassinari
- <!-- 34 --> [docs] Link to "Customization of Theme" from relevant theme interfaces (#27689) @eps1lon
- <!-- 33 --> [docs] Update CSP page (#27627) @mnajdova
- <!-- 29 --> [docs] Reorder and rename "enforce value" ToggleButton demo (#27678) @LorenzHenk
- <!-- 12 --> [docs] Fix missing dependency in the DataGrid demo (#27597) @m4theushw
- <!-- 04 --> [docs] img should have a src attribute (#27632) @oliviertassinari
- <!-- 03 --> [docs] Add badges to Transfer List (#27634) @oliviertassinari
- <!-- 02 --> [docs] Recommend the `direct-import` babel plugin over `transform-import` (#27335) @umidbekk
- <!-- 37 --> [docs] Remove unused code (#27711) @eps1lon
- <!-- 39 --> [docs] Improve virtualization demo (#27340) @vedadeepta
- <!-- 31 --> [examples] Include a follow-up on the example (#27620) @matiasherranz
- <!-- 26 --> [website] Add about page (#27599) @siriwatknp
- <!-- 25 --> [website] Add pricing page (#27598) @siriwatknp
### Core
- <!-- 16 --> [core] Batch small changes (#27636) @oliviertassinari
- <!-- 06 --> [core] Change range strategy to bump (#27652) @oliviertassinari
- <!-- 24 --> [core] Fix visual regression example images (#27660) @eps1lon
- <!-- 38 --> [core] Remove diff when running yarn docs:dev (#27720) @eps1lon
- <!-- 22 --> [core] Remove mocks of require.context in markdown loader (#27406) @eps1lon
- <!-- 09 --> [core] Reduce use CSS when Checkbox disableRipple is set (#27568) @oliviertassinari
- <!-- 08 --> [test] Add coverage for jss-to-styled prefix from filename (#27522) @eps1lon
- <!-- 15 --> [test] Add current behavior for a11y name vs visible name for PickersDay (#27661) @eps1lon
- <!-- 17 --> [test] Dodge double logging in dev mode (#27653) @oliviertassinari
- <!-- 14 --> [test] Enable skipped test fixed by upstream React fix (#27615) @eps1lon
- <!-- 19 --> [theme] Add missed variants in Components interface (#27453) @nikitabobers
All contributors of this release in alphabetical order: @aaronlademann-wf, @abriginets, @DouglasPds, @eps1lon, @garronej, @kylegach, @LorenzHenk, @m4theushw, @matiasherranz, @mnajdova, @nikitabobers, @oliviertassinari, @R-Bower, @ryancogswell, @siriwatknp, @tonextone, @umidbekk, @vedadeepta, @YassinHussein
## 5.0.0-beta.3
<!-- generated comparing v5.0.0-beta.2..next -->
_Aug 6, 2021_
Big thanks to the 15 contributors who made this release possible. Here are some highlights β¨:
- <!-- 28 --> β¨ `jss-to-styled` codemod has been improved to support `createStyles` and `<React.Fragment>` usage (#27578) @mnajdova
### `@material-ui/core@5.0.0-beta.3`
- <!-- 33 --> [Modal] Restore `overflowX` and `overflowY` styles (#27487) @PCOffline
- <!-- 07 --> [Modal] Remove unnecessary check for children.props.tabIndex (#27374) @noviicee
- <!-- 14 --> [Select] Fix regression for icon not rotating (#27511) @mnajdova
### `@material-ui/system@5.0.0-beta.3`
- <!-- 38 --> [system] Added top, left, right and bottom border color CSS properties to system (#27580) @R-Bower
### `@material-ui/codemod@5.0.0-beta.3`
- <!-- 28 --> [codemod] Add support for `createStyles` usage in `jss-to-styled` (#27578) @mnajdova
- <!-- 11 --> [codemod] Fix `jss-to-styled` PREFIX generation on Windows (#27491) @mnajdova
- <!-- 39 --> [codemod] Fix `jss-to-styled` codemod to handle React.Fragment as root (#27495) @mnajdova
### `@material-ui/unstyled@5.0.0-alpha.42`
- <!-- 13 --> [FormControl] Create FormControlUnstyled (#27240) @michaldudak
- <!-- 23 --> [Autocomplete] Move useAutocomplete to the Unstyled package (#27485) @michaldudak
### Docs
- <!-- 40 --> [docs] Fix layout shift when opening hash anchor (#27619) @oliviertassinari
- <!-- 35 --> [docs] Add TypeScript guide for the `sx` prop (#27417) @mnajdova
- <!-- 32 --> [docs] Hardcode listed colors in /customization/color/#playground (#27446) @eps1lon
- <!-- 31 --> [docs] Bring back Select#onChange signature API (#27443) @eps1lon
- <!-- 27 --> [docs] Remove backticks in the title (#27567) @oliviertassinari
- <!-- 26 --> [docs] Fix 404 links (#27566) @oliviertassinari
- <!-- 25 --> [docs] Use the same h2 for the customization demos (#27569) @oliviertassinari
- <!-- 22 --> [docs] Fix syntax error in v5 migration `styled` api example (#27518) @kimbaudi
- <!-- 21 --> [docs] Improve SSR configuration with emotion (#27496) @frandiox
- <!-- 19 --> [docs] Change "pseudo-classes" to "state classes" (#27570) @michaldudak
- <!-- 18 --> [docs] Add StackBlitz edit demo integration (#27391) @sulco
- <!-- 12 --> [docs] Remove unnecessary generic argument (#27516) @bezpalko
- <!-- 08 --> [docs] Add customization demos (#27411) @siriwatknp
- <!-- 04 --> [docs] Restore initial descriptionRegExp logic (#27436) @oliviertassinari
- <!-- 03 --> [docs] Polish jss-to-styled docs (#27457) @oliviertassinari
- <!-- 34 --> [examples] Fix nextjs with styled-components example (#27583) @mnajdova
- <!-- 29 --> [examples] Update create-react-app examples with styled-components to use package aliases (#27591) @mnajdova
- <!-- 09 --> [examples] Improve integration examples with Next.js (#27331) @Harshita-Kanal
- <!-- 37 --> [website] Add spicefactory as gold sponsor @oliviertassinari
- <!-- 30 --> [website] Homepage rebranding (#27488) @siriwatknp
- <!-- 24 --> [website] Add Flavien to team and about pages (#27575) @flaviendelangle
- <!-- 17 --> [website] Add Ryan to Community contributors for Stack Overflow contributions (#27529) @ryancogswell
- <!-- 02 --> [website] Add references section to home (#27444) @siriwatknp
### Core
- <!-- 20 --> [core] rebaseWhen=auto does not seem to work (#27565) @oliviertassinari
- <!-- 10 --> [core] Improve instructions for the @material-ui/styles migration (#27466) @mnajdova
- <!-- 06 --> [core] Batch small changes (#27435) @oliviertassinari
- <!-- 01 --> [core] Receive patch and minor dependency updates (#27455) @eps1lon
- <!-- 16 --> [test] Update coverage to include all @material-ui packages (#27521) @eps1lon
- <!-- 15 --> [test] Lint codemod tests (#27519) @eps1lon
- <!-- 05 --> [test] Allow tests to run for 6s before timeout (#27456) @oliviertassinari
All contributors of this release in alphabetical order: @bezpalko, @eps1lon, @flaviendelangle, @frandiox, @Harshita-Kanal, @kimbaudi, @michaldudak, @mnajdova, @noviicee, @oliviertassinari, @PCOffline, @R-Bower, @ryancogswell, @siriwatknp, @sulco
## 5.0.0-beta.2
<!-- generated comparing v5.0.0-beta.1..next -->
_Jul 26, 2021_
Big thanks to the 20 contributors who made this release possible. Here are some highlights β¨:
- β¨ We introduced new codemod for converting JSS styles to emotion (#27292) @siriwatknp
It should help adoption of v5, by making possible the removal of JSS sooner.
- π The majority of other changes in this release were bug fixes, test utilities and docs.
### `@material-ui/core@5.0.0-beta.2`
- <!-- 54 --> [Autocomplete] Explain how the loading prop works (#27416) @michaldudak
- <!-- 49 --> [Autocomplete] Update input value when the input changes (#27313) @turtleseason
- <!-- 09 --> [Autocomplete] Popper is not closing when the Autocomplete is disabled (#27312) @Goodiec
- <!-- 42 --> [Checkbox] Skip default hover styles with `disableRipple` (#27314) @faan234
- <!-- 50 --> [Dialog] Fix override paper styles (#27423) @newsiberian
- <!-- 17 --> [Grid] Remove width prop for rowSpacing (#27326) @sashkopavlenko
- <!-- 33 --> [Input] Merge `componentsProps` correctly (#27371) @mnajdova
- <!-- 55 --> [Pagination] Fixed usePagination requires @emotion in development mode (#27348) @ruppysuppy
- <!-- 07 --> [Pagination] Fix :hover effect on previous/next button (#27304) @Aubrey-Li
- <!-- 03 --> [Popper] Consistent timing of popper instance creation (#27233) @eps1lon
- <!-- 45 --> [Select] Add `SelectChangeEvent` for accurate types for event in onChange prop (#27370) @eps1lon
- <!-- 18 --> [Tabs] Use theme transition duration for the Tab animation (#27303) @florianbepunkt
- <!-- 35 --> [TextField] Allow custom colors in FormLabel (#27337) @oliviertassinari
- <!-- 14 --> [TextField] Fix name of componentsProps (#27338) @oliviertassinari
- <!-- 04 --> [transitions] Make sure inline styles used for transition values if declared (#27140) @eps1lon
### `@material-ui/codemod@5.0.0-beta.2`
- <!-- 57 --> [codemod] Add `optimal-imports` for v5 (#27404) @mnajdova
- <!-- 48 --> [codemod] Add jss to emotion codemod (#27292) @siriwatknp
- <!-- 34 --> [codemod] Fix running codemod CLI on Windows (#27395) @michaldudak
- <!-- 32 --> [codemod] Fix published version (#27384) @eps1lon
- <!-- 10 --> [codemod] Improve README.md (#27257) @mnajdova
### `@material-ui/unstyled@5.0.0-alpha.41`
- <!-- 36 --> [NoSsr] Move NoSsr to the Unstyled package (#27356) @michaldudak
### `@material-ui/utils@5.0.0-beta.1`
- <!-- 43 --> [utils] Convert createChainedFunction to TypeScript (#27386) @eps1lon
### `@material-ui/system@5.0.0-beta.2`
- <!-- 39 --> [system] Compute display name of `styled` component if `name` isn't set (#27401) @eps1lon
- <!-- 08 --> [system] Adds missing type for `shouldForwardProp` (#27310) @KLubin1
### `@material-ui/lab@5.0.0-alpha.41`
- <!-- 58 --> [pickers] Only accept dates from adapters in min/max props (#27392) @eps1lon
- <!-- 15 --> [pickers] Fallback to today if all possible dates are disabled (#27294) @eps1lon
- <!-- 06 --> [pickers] Minify error when LocalizationProvider is missing (#27295) @eps1lon
- <!-- 01 --> [pickers] Fix Fade animation behavior change (#27283) @oliviertassinari
### Docs
- <!-- 56 --> [docs] Display Popper arrow correctly (#27339) @Patil2099
- <!-- 53 --> [docs] Focus pickers introduction on Material-UI (#27394) @eps1lon
- <!-- 51 --> [docs] Fix wrong import path in @material-ui/styles section (#27427) @WeldonTan
- <!-- 47 --> [docs] Update color imports (#27321) @siriwatknp
- <!-- 38 --> [docs] Sync params of callbacks between types and JSDoc description (#27366) @eps1lon
- <!-- 37 --> [docs] Add migration note for synthetic native events in onChange (#27368) @eps1lon
- <!-- 31 --> [docs] Improve unstyled docs (#27382) @oliviertassinari
- <!-- 30 --> [docs] Update `Transitions` page (#27319) @siriwatknp
- <!-- 29 --> [docs] Add Unstyled components docs page (#27158) @michaldudak
- <!-- 28 --> [docs] Fix app bar regression (#27373) @mnajdova
- <!-- 27 --> [docs] Update migration guide to have a section on nested classes (#27354) @mnajdova
- <!-- 25 --> [docs] Convert App* components to emotion (#27150) @eps1lon
- <!-- 23 --> [docs] Fix duplicate "Theme" header (#27353) @eps1lon
- <!-- 22 --> [docs] Remove horizontal scrollbar in MiniDrawer (#27055) @AlvesJorge
- <!-- 21 --> [docs] Add `makeStyles` explanation in troubleshooting (#27322) @siriwatknp
- <!-- 20 --> [docs] Fix ExpansionPanel migration notes (#27352) @eps1lon
- <!-- 19 --> [docs] Transpile markdown files (#27349) @eps1lon
- <!-- 12 --> [docs] Fix typo in the word typography (#27329) @tudi2d
- <!-- 11 --> [docs] Use actual symbol of kilogram (#27332) @getsnoopy
- <!-- 02 --> [docs] Make migration doc easier to follow (#26948) @siriwatknp
- <!-- 46 --> [examples] Cleanup `gatsby` examples (#27375) @mnajdova
- <!-- 41 --> [examples] Create nextjs example using styled-components (#27088) @hboylan
- <!-- 26 --> [examples] Update gatsby example to use custom plugin (#27357) @mnajdova
### Core
- <!-- 24 --> [core] Remove obsolete styles documentation (#27350) @eps1lon
- <!-- 13 --> [core] Fix GitHub language detection (#27298) @oliviertassinari
- <!-- 44 --> [test] Include coverage report of browser tests (#27389) @eps1lon
- <!-- 40 --> [test] Add current behavior for getDisplayName with context components (#27402) @eps1lon
- <!-- 05 --> [test] Enable skipped picker tests (#27268) @eps1lon
- <!-- 52 --> [website] Add hero section to homepage (#27364) @siriwatknp
All contributors of this release in alphabetical order: @AlvesJorge, @Aubrey-Li, @eps1lon, @faan234, @florianbepunkt, @g
etsnoopy, @Goodiec, @hboylan, @KLubin1, @michaldudak, @mnajdova, @newsiberian, @oliviertassinari, @Patil2099, @ruppysupp
y, @sashkopavlenko, @siriwatknp, @tudi2d, @turtleseason, @WeldonTan
## 5.0.0-beta.1
<!-- generated comparing v5.0.0-beta.0..next -->
_Jul 14, 2021_
Big thanks to the 17 contributors who made this release possible. Here are some highlights β¨:
- β¨ We have introduced a new unstyled component: the Switch (#26688) @michaldudak
You can find two new versions of the Switch. A component without any styles: [`SwitchUnstyled`](https://next.material-ui.com/components/switches/#unstyled-switches), and a hook: [`useSwitch`](https://next.material-ui.com/components/switches/#useswitch-hook).
<a href="https://next.material-ui.com/components/switches/#unstyled-switches"><img width="832" alt="switch" src="https://user-images.githubusercontent.com/3165635/125192249-236f8a80-e247-11eb-9df9-17d476379a32.png"></a>
You can follow our progress at https://github.com/mui-org/material-ui/issues/27170.
- π We have updated the default `info` `success` `warning` color to be more accessible (#26817) @siriwatknp.
You can find the new [default values](https://next.material-ui.com/customization/palette/#default-values) in the documentation.
<a href="https://next.material-ui.com/customization/palette/#default-values"><img width="780" alt="colors" src="https://user-images.githubusercontent.com/3165635/125192657-4864fd00-e249-11eb-9dc1-44857b25b3b8.png"></a>
### `@material-ui/core@5.0.0-beta.1`
#### Breaking changes
- [Fab] Remove no longer necessary span wrapper (#27112) @siriwatknp
- [ToggleButton] Remove no longer necessary span wrapper (#27111) @siriwatknp
#### Changes
- [Autocomplete] Add componentsProps (#27183) @michal-perlakowski
- [Avatar] Fix support for crossOrigin (#27013) @ShirasawaSama
- [ButtonBase] Correct `disableRipple` API description (#27187) @michaldudak
- [ButtonGroup] Add color palette types (#27215) @ShirasawaSama
- [SwitchBase] Bring back `checked` and mark as deprecated (#27047) @siriwatknp
- [TextField] Remove redundant useFormControl implementation (#27197) @michaldudak
- [theme] Add missing MuiRating types to components.d.ts (#27086) @rajzik
- [theme] Remove `createV4Spacing` from `adaptV4Theme` (#27072) @siriwatknp
- [theme] Update default `info` `success` `warning` color (#26817) @siriwatknp
- [ToggleButton] Add color palette types (#27046) @ShirasawaSama
- [ToggleButton] Fix the api page (#27164) @oliviertassinari
### `@material-ui/unstyled@5.0.0-alpha.40`
- [Switch] Create SwitchUnstyled and useSwitch (#26688) @michaldudak
### `@material-ui/codemod@5.0.0-beta.1`
- [codemod] Add v5 important migration (#27032) @siriwatknp
- [codemod] Fix v5 codemods on Windows (#27254) @michaldudak
### `@material-ui/system@5.0.0-beta.1`
- [Box] Add breakpoint value support to maxWidth prop (#26984) @ansh-saini
### `@material-ui/lab@5.0.0-alpha.40`
- [CalendarPicker] Fix slide transition regression (#27273) @eps1lon
- [CalendarPicker] Use transition components from core instead of a custom implementation (#27043) @eps1lon
- [pickers] Fix default value of text keys (#26990) @oliviertassinari
- [TimePicker] Change default minutes and seconds to zero (#27037) @michal-perlakowski
### Docs
- [blog] Q2 2021 Update (#27089) @oliviertassinari
- [docs] Add information that the label prop in FormControlLabel is now @michal-perlakowski
- [docs] Don't crash page if an Ad crashes (#27178) @eps1lon
- [docs] Fix alt description of movavi backer @oliviertassinari
- [docs] Fix import source of hidden component (#27116) @vimutti77
- [docs] Fix layout regression (#27272) @oliviertassinari
- [docs] Fix syntax error in /styles/api markdown (#27176) @sahil-blulabs
- [docs] Fix the link for the sx props page (#27202) @mnajdova
- [docs] Fix theme context example code (#27053) @moshfeu
- [docs] Fix typo in CONTRIBUTING.md (#27218) Ayush Dubey
- [docs] Fix typos (#27074) @michaldudak
- [docs] Improve nav semantics (#27138) @eps1lon
- [docs] Migrate Ad\* components to emotion (#27159) @mnajdova
- [docs] Migrate rest of the docs to emotion (#27184) @mnajdova
- [docs] Move versions from \_app PageContext to page-specific context (#27078) @eps1lon
- [docs] Only bundle one version of the demos in production (#27020) @eps1lon
- [docs] Reduce layout shift on landing page (#27251) @eps1lon
- [docs] Remove Ethical Ads (#27173) @mbrookes
- [docs] Remove unused fs polyfill (#27069) @eps1lon
- [docs] Remove usage of `url` package (#27151) @eps1lon
- [docs] Replace react-text-mask with react-imask in integration example (#27071) @michal-perlakowski
- [docs] Sort the size in a more logical order (#27186) @oliviertassinari
- [docs] Use actual link to paperbase (#27063) @eps1lon
- [docs] Use custom markdown loader for landing page (#27065) @eps1lon
- [docs] Use webpack 5 (#27077) @eps1lon
- [examples] Fix CDN warning (#27229) @oliviertassinari
- [examples] Remove `StyledEngineProvider` as JSS is not used (#27133) @mnajdova
- [examples] Remove forgotten StyledEngineProvider (#27163) @oliviertassinari
### Core
- [core] Batch small changes (#26970) @oliviertassinari
- [core] Configure Renovate (#27003) @renovate[bot]
- [core] Migrate remaining mentions of Dependabot to Renovate (#27118) @eps1lon
- [core] Run yarn deduplicate on Renovate updates (#27115) @eps1lon
- [test] Document broken React 18 behavior of Autocomplete (#27242) @eps1lon
- [test] Increase BS timeout to 6min (#27179) @oliviertassinari
- [test] Migrate regressions to emotion (#27010) @vicasas
- [test] Narrow down React 18 compat issues (#27134) @eps1lon
- [test] Remove StyledEngineProvider usage from regressions and e2e test @mnajdova
- [test] Run React 18 integration tests with new createRoot API (#26672) @eps1lon
- [test] Update tests with latest state of StrictMode compatibility (#27042) @eps1lon
- [test] Use DOM events instead of mocked, partial events (#27198) @eps1lon
- [website] Open 4 new roles (#27123) @oliviertassinari
- [blog] Danilo Leal joins Material-UI (#27231) @oliviertassinari
All contributors of this release in alphabetical order: @eps1lon, @mbrookes, @michal-perlakowski, @michaldudak, @mnajdova, @moshfeu, @oliviertassinari, @rajzik, @renovate[bot], @sahil-blulabs, @ShirasawaSama, @siriwatknp, @vimutti77
## 5.0.0-beta.0
<!-- generated comparing v5.0.0-alpha.38..next -->
_Jul 01, 2021_
Big thanks to the 13 contributors who made this release possible. Here are some highlights β¨:
- π This is the first beta release of v5! A huge thanks to everyone who helped to make this happen! We're targeting the 1st of September for a stable release, and will use the next two months to polish v5, and ease the migration from v4. You can follow [the v5 stable milestone](https://github.com/mui-org/material-ui/milestone/44) for more details. We now encourage any new projects to start on v5.
- π We have completed all the planned breaking changes.
- βοΈ We added the codemod CLI to simplify migration to v5 (#26941) @eps1lon. You can find it at [`@material-ui/codemod`](https://github.com/mui-org/material-ui/tree/HEAD/packages/material-ui-codemod).
- π The majority of other changes in this release were bug fixes, test utilities and docs.
### `@material-ui/core@5.0.0-beta.0`
#### Breaking changes
- [Tabs] Remove unnecessary wrapper from Tab (#26926) @siriwatknp
`span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
```diff
<button class="MuiTab-root">
- <span class="MuiTab-wrapper">
{icon}
{label}
- </span>
</button>
```
- [BottomNavigation] Remove wrapper from BottomNavigationAction (#26923) @siriwatknp
`span` element that wraps children has been removed. `wrapper` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
```diff
<button class="MuiBottomNavigationAction-root">
- <span class="MuiBottomNavigationAction-wrapper">
{icon}
<span class="MuiBottomNavigationAction-label">
{label}
</span>
- </span>
</button>
```
#### Changes
- <!-- 19 --> [Box] Fix TypeScript error on maxWidth prop (#26859) @ansh-saini
- <!-- 04 --> [Dialog] Automatically label by its DialogTitle (#26814) @eps1lon
- <!-- 32 --> [Hidden] Bring back and mark as deprecated (#26908) @siriwatknp
- <!-- 53 --> [List] Add button runtime deprecation warning (#26743) @siriwatknp
- <!-- 03 --> [Modal] Type BackdropProps according to styled version (#26836) @eps1lon
- <!-- 21 --> [Radio] Fix `defaultValue` to match the other value types (#26945) @oliviertassinari
- <!-- 48 --> [Stepper] Add completed to global pseudo-classes (#26953) @michal-perlakowski
- <!-- 25 --> [Stepper] Fix support for no connectors (#26874) @varandasi
- <!-- 20 --> [TextField] Prevent `hiddenLabel` from spreading to DOM (#26864) @siriwatknp
- <!-- 18 --> [TextField] Fix label disappearing when focusing a button (#26933) @michal-perlakowski
### `@material-ui/codemod@5.0.0-beta.0`
- <!-- 37 --> [codemod] Add CLI (#26941) @eps1lon
### @material-ui/icons@5.0.0-beta.0
- <!-- 29 --> [icons] Regenerate transpiled files (#26985) @eps1lon
### @material-ui/lab@5.0.0-alpha.39
#### Breaking changes
- [DatePicker] Remove helper text default value (#26866) @DouglasPds
Make the default rendered text field closer to the most common use cases (denser).
```diff
<DatePicker
label="Helper text example"
value={value}
onChange={onChange}
renderInput={(params) => (
- <TextField {...params} />
+ <TextField {...params} helperText={params?.inputProps?.placeholder} />
)}
>
```
#### Changes
- <!-- 12 --> [lab] Fix missing dependency on unstyled (#26937) @fishyFrogFace
- <!-- 50 --> [pickers] Consider TDate in ToolbarComponent types (#27035) @michal-perlakowski
### `@material-ui/system@5.0.0-beta.0`
- <!-- 14 --> [system] Support array overridesResolver (#26824) @siriwatknp
### Docs
- <!-- 49 --> [docs] Add notes to Table demo about stableSort (#27025) @CarlosGomez-dev
- <!-- 47 --> [docs] Add gold sponsor (#26968) @oliviertassinari
- <!-- 42 --> [docs] Update unstyled demos to not depend on `@material-ui/core` (#26869) @mnajdova
- <!-- 41 --> [docs] Fix demo paths in windows (#27004) @eps1lon
- <!-- 40 --> [docs] Export all locales (#27002) @eps1lon
- <!-- 38 --> [docs] Misc CONTRIBUTING.md changes (#26925) @eps1lon
- <!-- 35 --> [docs] Fix /components/hidden merge conflict (#26997) @eps1lon
- <!-- 26 --> [docs] Fix 404 links (#26963) @oliviertassinari
- <!-- 24 --> [docs] Remove link that points to v4 blog post (#26960) @steveafrost
- <!-- 16 --> [docs] Use custom webpack loader for markdown (#26774) @eps1lon
- <!-- 11 --> [docs] Fix 301 links (#26942) @oliviertassinari
- <!-- 01 --> [docs] Add page for the `sx` prop (#26769) @mnajdova
- <!-- 52 --> [docs] pre-fill issue when a demo crashes (#27034) @eps1lon
- <!-- 54 --> [docs] Move styled page under system (#26818)
### Core
- <!-- 46 --> [core] Inline rollup-plugin-size-snapshot (#26986) @eps1lon
- <!-- 43 --> [core] Remove unused props clone (#26992) @oliviertassinari
- <!-- 36 --> [core] Fix tests on Windows (#26931) @michaldudak
- <!-- 31 --> [core] Fix merge conflict between #26954 and #26874 @oliviertassinari
- <!-- 22 --> [core] Upgrade issues-helper to v2 (#26955) @michal-perlakowski
- <!-- 05 --> [core] Fix merge conflict (#26928) @eps1lon
- <!-- 45 --> [test] Convert HiddenCSS tests to testing-library (#27019) @eps1lon
- <!-- 44 --> [test] Convert NativeSelectInput tests to testing-library (#26952) @eps1lon
- <!-- 39 --> [test] Add a default mount implementation to conformance tests (#26949) @eps1lon
- <!-- 28 --> [test] Update tests to pass react@next (#26967) @eps1lon
- <!-- 27 --> [test] Add types to describeConformanceV5 (#26954) @eps1lon
- <!-- 17 --> [test] Use createPickerMount where appropriate (#26951) @eps1lon
- <!-- 15 --> [test] Convert SwipeableDrawer tests to testing-library (#26916) @eps1lon
- <!-- 13 --> [test] Convert Menu tests to testing-library (#26915) @eps1lon
- <!-- 10 --> [test] Convert Popover tests to testing-library (#26913) @eps1lon
- <!-- 08 --> [test] Convert Modal tests to testing-library (#26912) @eps1lon
- <!-- 07 --> [test] Make remaining testing-library tests StrictMode compatible (#26924) @eps1lon
- <!-- 51 --> [test] Only allow wrapping enzyme mount not creating (#27018) @eps1lon
- <!-- 06 --> [typescript] Disallow spreading TransitionHandlerProps (#26927) @eps1lon
All contributors of this release in alphabetical order: @ansh-saini, @BC-M, @CarlosGomez-dev, @DouglasPds, @eps1lon, @fishyFrogFace, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @siriwatknp, @steveafrost, @varandasi
## 5.0.0-alpha.38
<!-- generated comparing v5.0.0-alpha.37..next -->
_Jun 23, 2021_
Big thanks to the 18 contributors who made this release possible. Here are some highlights β¨:
- π We have only 2 left in the [breaking changes](https://github.com/mui-org/material-ui/issues/20012). The plan to release 5.0.0-beta.0 is on July 1st and will start to promote its usage over v4.
- π¨ We have updated `Slider` to match current [Material Design guidelines](https://material.io/components/sliders).
<a href="https://next.material-ui.com/components/slider/#continuous-sliders"><img width="247" alt="" src="https://user-images.githubusercontent.com/3165635/121884800-a8808600-cd13-11eb-8cdf-e25de8f1ba73.png" style="margin: auto"></a>
- π‘ `IconButton` now supports 3 sizes (`small, medium, large`). [See demo](https://next.material-ui.com/components/buttons/#sizes-2).
- βΏοΈ We have improved the default style of the `Link` to be more accessible (#26145) @ahmed-28
<a href="https://next.material-ui.com/components/links/"><img width="543" alt="" src="https://user-images.githubusercontent.com/3165635/123097983-ef1b6200-d430-11eb-97da-b491fba5df49.png"></a>
### `@material-ui/core@5.0.0-alpha.38`
#### Breaking changes
- <!-- 05 --> [Menu] Use ButtonBase in MenuItem (#26591) @siriwatknp
- Change the default value of `anchorOrigin.vertical` to follow the Material Design guidelines. The menu now displays below the anchor instead of on top of it. You can restore the previous behavior with:
```diff
<Menu
+ anchorOrigin={{
+ vertical: 'top',
+ horizontal: 'left',
+ }}
```
- The `MenuItem` component inherits the `ButtonBase` component instead of `ListItem`. The class names related to "MuiListItem-\*" are removed and theming `ListItem` is no longer affecting `MenuItem`.
```diff
-<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
+<li className="MuiButtonBase-root MuiMenuItem-root">
```
- The prop `listItemClasses` was removed, you can use `classes` instead.
```diff
-<MenuItem listItemClasses={{...}}>
+<MenuItem classes={{...}}>
```
- <!-- 09 --> [theme] Improve default breakpoints (#26746) @siriwatknp
The default breakpoints were changed to better match the common use cases. They also better match the Material Design guidelines. [Read more about the change](https://github.com/mui-org/material-ui/issues/21902).
```diff
{
xs: 0,
sm: 600,
- md: 960,
+ md: 900,
- lg: 1280,
+ lg: 1200,
- xl: 1920,
+ xl: 1536,
}
```
If you prefer the old breakpoint values, use the snippet below.
```js
import { createTheme } from '@material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
},
});
```
- <!-- 10 --> [IconButton] Add size `large` and update styles (#26748) @siriwatknp
The default size's padding is reduced to `8px` which makes the default IconButton size of `40px`. To get the old default size (`48px`), use `size="large"`. The change was done to better match Google's products when Material Design stopped documenting the icon button pattern.
```diff
- <IconButton>
+ <IconButton size="large">
```
- <!-- 08 --> [Slider] Adjust css to match the specification (#26632) @siriwatknp
Rework the CSS to match the latest [Material Design guidelines](https://material.io/components/sliders) and make custom styles more intuitive. [See documentation](https://next.material-ui.com/components/slider/).
<a href="https://next.material-ui.com/components/slider/#continuous-sliders"><img width="247" alt="" src="https://user-images.githubusercontent.com/3165635/121884800-a8808600-cd13-11eb-8cdf-e25de8f1ba73.png" style="margin: auto"></a>
You can reduce the density of the slider, closer to v4 with the [`size="small"` prop](https://next.material-ui.com/components/slider/#sizes).
<a href="https://next.material-ui.com/components/slider/#sizes"><img width="330" alt="" src="https://user-images.githubusercontent.com/3165635/123076549-8aa0d880-d419-11eb-8835-06cd2b21b2d3.png" style="margin: auto"></a>
- <!-- 14 --> [IconButton] Remove label span (#26801) @siriwatknp
`span` element that wraps children has been removed. `label` classKey is also removed. More details about [this change](https://github.com/mui-org/material-ui/pull/26666).
```diff
<button class="MuiIconButton-root">
- <span class="MuiIconButton-label">
<svg />
- </span>
</button>
```
- <!-- 19 --> [core] Remove `unstable_` prefix on the `useThemeProps` hook (#26777) @mnajdova
The following utilities were renamed to not contain the `unstable_` prefix:
- `@material-ui/sytstem`
```diff
import {
- unstable_useThemeProps,
+ useThemeProps,
} from '@material-ui/system';
```
- `@material-ui/core`
```diff
import {
- unstable_useThemeProps,
+ useThemeProps,
} from '@material-ui/core/styles';
```
#### Changes
- <!-- 33 --> [Alert] Add support for custom colors (#26831) @varandasi
- <!-- 32 --> [Button] Fix loading text invisible when disabled (#26857) @DanielBretzigheimer
- <!-- 43 --> [ButtonBase] Consider as a link with a custom component and `to` prop (#26576) @shadab14meb346
- <!-- 17 --> [ButtonBase] Derive state on render instead of in layout effects (#26762) @eps1lon
- <!-- 37 --> [Drawer] Fix incorrect z-index (#26791) @michal-perlakowski
- <!-- 28 --> [Drawer] Remove incorrect transition handler props (#26835) @eps1lon
- <!-- 01 --> [Link] Improve accessibility support (#26145) @ahmed-28
- <!-- 41 --> [Modal] Fix calculating scrollbar size when using custom scrollbar (#26816) @michal-perlakowski
- <!-- 29 --> [Rating] Make input ids less predictable (#26493) @eps1lon
- <!-- 27 --> [Stepper] Add componentsProps.label to StepLabel (#26807) @michal-perlakowski
- <!-- 36 --> [Tabs] Show error when Tab has display: none (#26783) @michal-perlakowski
- <!-- 46 --> [theme] Add base color palette type to components (#26697) @siriwatknp
### `@material-ui/system@5.0.0-alpha.38`
#### Breaking Changes
- <!-- 35 --> [system] Normalize api for `createBox` (#26820) @mnajdova
```diff
import { createBox } from '@material-ui/system';
-const styled = createBox(defaultTheme);
+const styled = createBox({ defaultTheme });
```
#### Changes
- <!-- 12 --> [system] Add ThemeProvider component (#26787) @mnajdova
### Docs
- <!-- 45 --> [docs] Fix misspelling of the word Typography (#26898) @dmrqx
- <!-- 42 --> [docs] Instruct users to install @material-ui/icons with the next tag (#26873) @michal-perlakowski
- <!-- 26 --> [docs] Sync translations (#26828) @l10nbot
- <!-- 25 --> [docs] Improve grammar of autocomplete/autofill section (#26798) @dijonkitchen
- <!-- 18 --> [docs] Explain "inherited props" better in the props table (#26778) @eps1lon
- <!-- 16 --> [docs] Fix documentation for upgrading to v5 (#26812) @tungdt-90
- <!-- 13 --> [docs] Improve notification color (#26796) @mnajdova
- <!-- 11 --> [docs] Fix various a11y issues with /customization/color (#26757) @eps1lon
- <!-- 04 --> [docs] Move custom theme to frame (#26744) @siriwatknp
- <!-- 02 --> [docs] Fix small PT typo fix: inciar -> iniciar (#26775) @brunocavalcante
- <!-- 03 --> [I10n] Add Chinese (Hong Kong) (zh-HK) locale (#26637) @kshuiroy
- <!-- 44 --> [l10n] Add sinhalese (siLK) locale (#26875) @pavinduLakshan
- <!-- 39 --> [examples] Rename nextjs typescript theme from tsx to ts (#26862) @Izhaki
### Core
- <!-- 38 --> [test] Fix Drawer test API @oliviertassinari
- <!-- 34 --> [test] Adjust expected useAutocomplete error messages for React 18 (#26858) @eps1lon
- <!-- 30 --> [test] Convert Drawer tests to testing-library (#26837) @eps1lon
- <!-- 23 --> [test] Convert remaining enzyme tests to testing-library (#26832) @eps1lon
- <!-- 22 --> [test] Ignore ReactDOM.hydrate deprecation warnings (#26815) @eps1lon
- <!-- 06 --> [test] Reduce flakiness (#26761) @eps1lon
- <!-- 07 --> [useId] Reduce likelyhood of collisions (#26758) @eps1lon
- <!-- 31 --> yarn deduplicate @oliviertassinari
- <!-- 21 --> Fix running framer's prettier under pwsh (#26819) @michaldudak
- <!-- 40 --> [core] Update babel-plugin-optimize-clsx (#26861) @oliviertassinari
- <!-- 24 --> [core] Assume no document.all at runtime (#26821) @eps1lon
- <!-- 20 --> [core] Remove dependency on `@material-ui/private-theming` (#26793) @mnajdova
- <!-- 15 --> [core] Remove dependency on `@material-ui/styled-engine` (#26792) @mnajdova
All contributors of this release in alphabetical order: @ahmed-28, @brunocavalcante, @DanielBretzigheimer, @dijonkitchen, @dmrqx, @eps1lon, @Izhaki, @kshuiroy, @l10nbot, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @pavinduLakshan, @shadab14meb346, @siriwatknp, @tungdt-90, @varandasi
## 5.0.0-alpha.37
<!-- generated comparing v5.0.0-alpha.36..next -->
_Jun 15, 2021_
Big thanks to the 11 contributors who made this release possible. Here are some highlights β¨:
- π Add support for responsive props on the Grid component (#26590) @likitarai1.
This fixes a longstanding issue. You can now specify different values for each breakpoint.
```jsx
<Grid container spacing={{ xs: 2, md: 3 }} columns={{ xs: 1, sm: 2, md: 3 }}>
<Grid item xs={2} sm={4} md={4} />
<Grid item xs={2} sm={4} md={4} />
<Grid item xs={2} sm={4} md={4} />
</Grid>
```
Head to the [documentation](https://next.material-ui.com/components/grid/#responsive-values) for more details.
- βοΈ We've introduced a new `useTheme` and `useThemeProps` hooks in the `@material-ui/system` package.
We believe that this package can be used as a standalone styling solution for building custom design systems (#26649) @mnajdova.
- π₯ Made progress with the breaking changes. We have done 105 of the 109 changes [planned](https://github.com/mui-org/material-ui/issues/20012). We are getting closer to our goal of releasing 5.0.0-beta.0 on July 1st and start to promote its usage over v4. You can also follow [our milestone](https://github.com/mui-org/material-ui/milestone/35) for more details.
- And many more π bug fixes and π improvements.
### `@material-ui/core@5.0.0-alpha.37`
#### Breaking changes
- <!-- 10 --> [Button] Remove label span (#26666) @siriwatknp
The `span` element that wraps children has been removed. `label` classKey is also removed. The nested span was required for fixing a flexbox issue with iOS < 11.0.
```diff
<button class="MuiButton-root">
- <span class="MuiButton-label">
children
- </span>
</button>
```
#### Changes
- <!-- 08 --> [Button] Add missing color type (#26593) @sakura90
- <!-- 07 --> [Grid] Add responsive direction and spacing props (#26590) @likitarai1
- <!-- 05 --> [List] Add ListItemButton export to index (#26667) @chadmuro
- <!-- 09 --> [theme] Fix missing exported Breakpoints types (#26684) @robphoenix
### `@material-ui/system@5.0.0-alpha.37`
#### Breaking changes
- <!-- 26 --> [system] Remove `theme` & `isRtl` from `useThemeProps` (#26701) @mnajdova
The `isRtl` and `theme` props are no longer added by the `useThemeProps` hook. You can use the `useTheme` hook for this.
```diff
-import { unstable_useThemeProps as useThemeProps } from '@material-ui/core/styles';
+import { unstable_useThemeProps as useThemeProps, useTheme } from '@material-ui/core/styles';
const Component = (inProps) => {
- const { isRtl, theme, ...props } = useThemeProps({ props: inProps, name: 'MuiComponent' });
+ const props = useThemeProps({ props: inProps, name: 'MuiComponent' });
+ const theme = useTheme();
+ const isRtl = theme.direction === 'rtl';
//.. rest of the code
}
```
#### Changes
- <!-- 16 --> [system] Add useThemeProps & useTheme hooks (#26649) @mnajdova
- <!-- 15 --> [system] Add color manipulators (#26668) @mnajdova
- <!-- 06 --> [system] Fix support of custom shape in createTheme (#26673) @varandasi
### `@material-ui/unstyled@5.0.0-alpha.37`
- <!-- 04 --> [Slider] Improve TS definition (#26642) @mnajdova
- <!-- 21 --> [TrapFocus] Capture nodeToRestore via relatedTarget (#26696) @eps1lon
### `@material-ui/icons@5.0.0-alpha.37`
- <!-- 03 --> Revert "[icons] Only ship ES modules (#26310)" (#26656) @eps1lon
The changes that we have tried in #26310 were breaking the integration with Next.js.
### `@material-ui/lab@5.0.0-alpha.37`
- <!-- 29 --> [core] Remove unused useKeyDown (#26765) @eps1lon
- <!-- 28 --> [DateTimePicker] Fix not visible selected tab icon (#26624) @nikitabobers
### Docs
- <!-- 20 --> [blog] MichaΕ Dudak joins Material-UI (#26700) @oliviertassinari
- <!-- 27 --> [docs] Migrate onepirate premium template to emotion part2 (#26707) @vicasas
- <!-- 24 --> [docs] Fix TextField demo layout (#26710) @vicasas
- <!-- 19 --> [docs] Improve Paperbase demo (#26711) @oliviertassinari
- <!-- 17 --> [docs] Migrate onepirate premium template to emotion part1 (#26671) @vicasas
- <!-- 14 --> [docs] Migrate paperbase premium template to emotion (#26658) @vicasas
- <!-- 25 --> [List] Fix demo to have correct semantic (#26742) @siriwatknp
### Core
- <!-- 23 --> [core] Monitore size of key system modules (#26712) @oliviertassinari
- <!-- 22 --> [core] Batch small changes (#26738) @oliviertassinari
- <!-- 18 --> [core] Batch small changes (#26628) @oliviertassinari
- <!-- 13 --> [test] Ignore ReactDOM.render deprecation warning (#26683) @eps1lon
- <!-- 12 --> [test] Run e2e test with React 18 on a schedule (#26690) @eps1lon
- <!-- 11 --> [test] Count profiler renders not passive effects (#26678) @eps1lon
- <!-- 02 --> [test] Bundling fixtures should not override source build with published build (#26657) @eps1lon
- <!-- 01 --> [test] Make tests oblivious to StrictMode (#26654) @eps1lon
All contributors of this release in alphabetical order: @chadmuro, @eps1lon, @likitarai1, @mnajdova, @nikitabobers, @oliviertassinari, @robphoenix, @sakura90, @siriwatknp, @varandasi, @vicasas
## 5.0.0-alpha.36
<!-- generated comparing v5.0.0-alpha.35..next -->
_Jun 8, 2021_
Big thanks to the 14 contributors who made this release possible. Here are some highlights β¨:
- βοΈ We've introduced a new `ListItemButton` component that should prevent common mistakes when using `<ListItem button />` and help with customization and TypeScript support (#26446) @siriwatknp.
- π©βπ€ `experimentalStyled` is now available without the `experimental` prefix.
We're confident that its API shouldn't receive any major changes until the stable release of v5 (#26558) @mnajdova.
- π¦ `@material-ui/icons` only ships ES modules and no longer CommonJS modules.
This reduces the download size of the package from 1.7 MB to 1.2 MB and install size from 15.6 MB to 6.7 MB (#26310) @eps1lon.
- π Add support for [row and column spacing](https://next.material-ui.com/components/grid/#row-amp-column-spacing) in the Grid component (#26559) @likitarai1.
<img width="549" alt="grid spacing demo" src="https://user-images.githubusercontent.com/3165635/121089288-383fa500-c7e7-11eb-8c43-53457b7430f1.png">
Note that this feature was already available for [CSS grid users](https://next.material-ui.com/components/grid/#css-grid-layout) with the `rowGap` and `columnGap` props.
### `@material-ui/core@5.0.0-alpha.36`
#### Breaking changes
- <!-- 10 --> [AppBar] Fix background color on dark mode (#26545) @siriwatknp
The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4.
```jsx
<AppBar enableColorOnDark />
```
- <!-- 13 --> [core] Rename `experimentalStyled` to `styled` (#26558) @mnajdova
Remove the experimental prefix, this module is going stable:
```diff
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
```
- <!-- 03 --> [SwitchBase] Replace IconButton with ButtonBase (#26460) @siriwatknp
- <!-- 25 --> [theme] Improve default `primary`, `secondary` and `error` theme palette (#26555) @siriwatknp
#### Changes
- <!-- 17 --> [Box] Fix module 'clsx' not found in system (#26553) @coder-freestyle
- <!-- 07 --> [Box] Fix runtime error when using styled-components without ThemeProvider (#26548) @mnajdova
- <!-- 27 --> [Radio][Checkbox] Don't forward `color` to DOM elements (#26625) @siriwatknp
- <!-- 01 --> [Dialog] Flatten DialogTitle DOM structure, remove `disableTypography` (#26323) @eps1lon
- <!-- 31 --> [Grid] Add rowSpacing and columnSpacing props (#26559) @likitarai1
- <!-- 34 --> [List] extract button from ListItem to ListItemButton (#26446) @siriwatknp
- <!-- 23 --> [Popover] Fix PaperProps.ref breaking positioning (#26560) @vedadeepta
- <!-- 19 --> [Rating] onChangeActive shouldn't be fired on blur/focus (#26584) @coder-freestyle
- <!-- 11 --> [Select] Fix custom font size centering arrow (#26570) @sarahannnicholson
- <!-- 06 --> [styled] Convert implicit styleProps to explicit (#26461) @mnajdova@siriwatknp
- <!-- 08 --> [Tabs] Fix RTL indicator (#26470) @siriwatknp
- <!-- 02 --> [Tabs] Fix arrow rotation in vertical & RTL (#26527) @siriwatknp
- <!-- 20 --> [TextField] Fix support for custom `size` prop value (#26585) @coder-freestyle
- <!-- 04 --> [Tooltip] Finish exiting once started (#26535) @eps1lon
### `@material-ui/icons@5.0.0-alpha.36`
#### Breaking changes
- <!-- 15 --> [icons] Only ship ES modules (#26310) @eps1lon
The `require()` of `@material-ui/icons` is no longer supported.
This should not affect you if you're using a bundler like `webpack` or `snowpack` or meta frameworks like `next` or `gatsby`.
### `@material-ui/lab@5.0.0-alpha.36`
#### Breaking changes
- <!-- 29 --> [pickers] Remove `openPickerIcon` prop in favor of `components.OpenPickerIcon` (#26223) @vedadeepta
```diff
<DateTimePicker
components={{
LeftArrowIcon: AlarmIcon,
RightArrowIcon: SnoozeIcon,
+ OpenPickerIcon: ClockIcon,
}}
- openPickerIcon={<ClockIcon />}
```
### `@material-ui/system@5.0.0-alpha.36`
- <!-- 18 --> [system] Add createTheme util (#26490) @mnajdova
### Docs
- <!-- 28 --> [docs] Migrate templates to emotion (#26604) @vicasas
- <!-- 26 --> [docs] Remove custom primary & secondary color (#26541) @siriwatknp
- <!-- 24 --> [docs] Don't escape prop descriptions for markdown table context (#26579) @eps1lon
- <!-- 22 --> [docs] Prepare for data grid auto-generated docs (#26477) @m4theushw
- <!-- 21 --> [docs] Fix typo sx !== xs (#26596) @onpaws
- <!-- 16 --> [docs] Multiple select demos moving when selecting values (#26539) @itsnorbertkalacska
- <!-- 14 --> [docs] Improve migration guide for `@material-ui/styles` (#26552) @mnajdova
- <!-- 12 --> [docs] `Rating` `value` is nullable in `onChange` (#26542) @sakura90
- <!-- 30 --> [example] Remove the dependency on @material-ui/styles (#26567) @garfunkelvila
### Core
- <!-- 33 --> [core] Ignore latest prettier run in git-blame @eps1lon
- <!-- 32 --> [core] Format @eps1lon
- <!-- 05 --> [test] Add bundle fixtures (#23166) @eps1lon
- <!-- 09 --> [website] Add MichaΕ to the About Us page (#26557) @michaldudak
All contributors of this release in alphabetical order: @coder-freestyle, @eps1lon, @garfunkelvila, @itsnorbertkalacska, @likitarai1, @m4theushw, @michaldudak, @mnajdova, @onpaws, @sakura90, @sarahannnicholson, @siriwatknp, @vedadeepta, @vicasas
## 5.0.0-alpha.35
<!-- generated comparing v5.0.0-alpha.34..next -->
_May 31, 2021_
Big thanks to the 14 contributors who made this release possible. Here are some highlights β¨:
- π©βπ€ We have completed the migration to emotion of all the components (`@material-ui/core` and `@material-ui/lab`) @siriwatknp, @mnajdova.
- π¦ Save [10 kB gzipped](https://bundlephobia.com/result?p=@material-ui/core@5.0.0-alpha.34) by removing the dependency on `@material-ui/styles` (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
- βοΈ Add many new [codemods](https://github.com/mui-org/material-ui/blob/HEAD/packages/material-ui-codemod/README.md) to automate the migration from v4 to v5 (#24867) @mbrookes.
- And many more π bug fixes and π improvements.
### `@material-ui/core@5.0.0-alpha.35`
#### Breaking changes
- [styles] Remove `makeStyles` from `@material-ui/core` (#26382) @mnajdova
The `makeStyles` JSS utility is no longer exported from `@material-ui/core`. You can use `@material-ui/styles` instead. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. If you are using this utility together with `@material-ui/core`, it's recommended you use the `ThemeProvider` component from `@material-ui/core` instead.
```diff
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+const theme = createTheme();
const useStyles = makeStyles((theme) => ({
background: theme.palette.primary.main,
}));
function Component() {
const classes = useStyles();
return <div className={classes.root} />
}
// In the root of your app
function App(props) {
- return <Component />;
+ return <ThemeProvider theme={theme}><Component {...props} /></ThemeProvider>;
}
```
- [styles] Remove `withStyles` from `@material-ui/core` (#26377) @mnajdova
The `withStyles` JSS utility is no longer exported from `@material-ui/core`. You can use `@material-ui/styles` instead. Make sure to add a `ThemeProvider` at the root of your application, as the `defaultTheme` is no longer available. If you are using this utility together with `@material-ui/core`, you should use the `ThemeProvider` component from `@material-ui/core` instead.
```diff
-import { withStyles } from '@material-ui/core/styles';
+import { withStyles } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+const defaultTheme = createTheme();
const MyComponent = withStyles((props) => {
const { classes, className, ...other } = props;
return <div className={clsx(className, classes.root)} {...other} />
})(({ theme }) => ({ root: { background: theme.palette.primary.main }}));
function App() {
- return <MyComponent />;
+ return <ThemeProvider theme={defaultTheme}><MyComponent /></ThemeProvider>;
}
```
- [styles] Merge options in `experimentalStyled` (#26396) @mnajdova
The options inside the `experimentalStyled` module are now merged under one object. In the coming weeks, we will rename ths module: `styled()` to signal that it's no longer experimental.
```diff
-experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something' }, { skipSx: true })(...);
+experimentalStyled(Button, { shouldForwardProp: (prop) => prop !== 'something', skipSx: true })(...);
```
- [Tabs] Update `min` & `max` width and remove `minWidth` media query (#26458) @siriwatknp
Update the implementation to better match Material Design:
- Tab `minWidth` changed from `72px` => `90px` (without media-query) according to [material-design spec](https://material.io/components/tabs#specs)
- Tab `maxWidth` changed from `264px` => `360px` according to [material-design spec