v5.12.3
May 2, 2023
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
- all planned breaking changes for Base UI are done. The first beta release should come next week 🎉
- 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]
- [Accordion] Add missing
component
type (#37111) @sai6855 - [ButtonGroup] Should not retain divider color when it is disabled and variant is
text
(#36967) @DavidBoyer11 - [Divider] Fix styles on dividers with text (#35072) @maxdestors
- [TextField] Improve IntelliSense support for props (#36737) @sai6855
- [TextField] Fix running click event on disabled (#36892) @sai6855
@mui/[email protected]
- [Joy] Miscellaneous fixes and docs improvement (#37026) @siriwatknp
@mui/[email protected]
Breaking changes
-
The
component
prop is no longer supported because it can be replaced with the slots API. This is how the transformation will look like:<Button - component="span" + slots={{ root: "span" }} />
If using TypeScript, the custom component type should be added as a generic on the
Button
component.-<Button +<Button<typeof CustomComponent> slots={{ root: CustomComponent }} customProp="foo" />
There is codemod that you can run in your project to do the transformation:
npx @mui/codemod v5.0.0/base-remove-component-prop <path>
The full documentation about the codemod can be found here.
This is the list of PR related to this change:
- [Button][base] Drop
component
prop (#36677) @mnajdova - [Badge][base] Drop
component
prop (#37028) @hbjORbj - [FormControl][base] Drop component prop (#37031) @hbjORbj
- [Input][base] Drop component prop (#37057) @hbjORbj
- [Menu][base] Drop component prop (#37033) @hbjORbj
- [MenuItem][base] Drop component prop (#37032) @hbjORbj
- [Modal][base] Drop component prop (#37058) @hbjORbj
- [Option][base] Drop component prop (#37052) @hbjORbj
- [OptionGroup][base] Drop component prop (#37055) @hbjORbj
- [Popper][base] Drop component prop (#37084) @hbjORbj
- [Select][base] Drop component prop (#37035) @hbjORbj
- [Slider][base] Drop component prop (#37056) @hbjORbj
- [Snackbar][base] Drop component prop (#37041) @nicolas-ot
- [Switch][base] Drop component prop (#37053) @hbjORbj
- [Tab][base] Drop component prop (#36768) @sai6855
- [Tabs][base] Drop component prop (#36770) @sai6855
- [TablePagination][base] Drop component prop (#37059) @sai6855
- [TabPanel][base] Drop component prop (#37054) @sai6855
- [TabsList][base] Drop component prop (#37042) @sai6855
- [Button][base] Drop
-
[base] Improve API consistency (#36970) @michaldudak
Brought consistency to Base UI components and hooks' parameters and return values:
- Whenever a hook needs a ref, it's now called
<slot_name>Ref
, which matches theget<slot_name>Props
in the return value. - All hooks that accept external refs now return merged refs, making combining multiple hooks on one element easier. This was proven necessary in several compound components (like menuItem being both a button and a list item). The type of this value is
React.RefCallback
as using the more generalReact.Ref
caused variance issues. - Type of accepted refs is standardized to
React.Ref<Element>
- Naming and typing of the forwarded ref in unstyled components were standardized - it's forwardedRef: React.ForwardedRef (unless a more specific type is needed).
- The shape of the definition of unstyled components was standardized - it's React.forwardRef(function Component(props: Props, forwardedRef: React.Ref) { ... });. Specifically, the generic parameters of forwardRef were removed as they are specified in function arguments.
- Whenever a hook needs a ref, it's now called
Changes
- [FormControl][base] Do not use optional fields in useFormControlContext's return value (#37037) @michaldudak
Docs
- [base][docs] Add Base UI Quickstart Guide (#36717) @mj12albert
- [docs] Fix Material UI's API linking to Base UI (#37121) @mnajdova
- [docs] Fix pagination in the DataGrid demo (#37114) @cherniavskii
- [docs] Add notification to the release of the new Time Picker UI (#37065) @joserodolfofreitas
- [docs] Specify "Material UI" (not "MUI") where appropriate throughout the docs (#37066) @samuelsycamore
- [docs] Use focus-visible instead of focus for Menu demos (#36847) @michaldudak
- [docs] Fix small regressions API pages (#36972) @oliviertassinari
- [docs] Handle a few docs-feedback (#36977) @oliviertassinari
- [docs] Fix anchor link in customization (#37004) @oliviertassinari
- [docs] Add a note about minimal required version for theme merging to the guides (#36973) @jakub-stastny
- [docs] smooth scrolling added for
back to top
(#37011) @PunitSoniME - [docs] Remove
useFormControl
return values from demos page (#37036) @ZeeshanTamboli - [docs][base] Move styles to the bottom of demos code for
SwitchUnstyled
(#36720) @varunmulay22 - [docs][base] Move styles to the bottom of demos code for
InputUnstyled
(#36724) @varunmulay22 - [docs][base] Move styles to the bottom of demos code for
SliderUnstyled
(#36721) @varunmulay22 - [docs][base] Move styles to the bottom of demos code for
Snackbar
(#36719) @varunmulay22 - [docs][base] Move styles to the bottom of demos code for
SelectUnstyled
(#36718) @varunmulay22 - [templates] Image not displayed in blog layout of React template. (#36991) @navedqb
- [website] Take the design role offline @oliviertassinari
- [website] Fix URL convention @oliviertassinari
- [docs] Turn off job banner on docs (#36080) @joserodolfofreitas
Core
- [core] Allow type alias as well in hooks API docs generation (#37034) @ZeeshanTamboli
All contributors of this release in alphabetical order: @cherniavskii, @DavidBoyer11, @hbjORbj, @jakub-stastny, @joserodolfofreitas, @maxdestors, @michaldudak, @mj12albert, @mnajdova, @navedqb, @nicolas-ot, @oliviertassinari, @PunitSoniME, @sai6855, @samuelsycamore, @siriwatknp, @varunmulay22, @ZeeshanTamboli