CHANGELOG.old.md
Jan 29, 2025
A big thanks to the 5 contributors who made this release possible.
@mui/[email protected]v6.x branch (#45133) @DiegoAndai/base-ui redirect and prune links (#45083) @mj12albertAll contributors of this release in alphabetical order: @DiegoAndai, @Janpot, @joshkel, @mj12albert, @ZeeshanTamboli
Jan 21, 2025
A big thanks to the 9 contributors who made this release possible.
@mui/[email protected]null (#45057) @siriwatknp@mui/[email protected]useEnhancedEffect (#44812) @siriwatknp@mui/[email protected]/base-ui to base-ui.com (#45061) @mj12albertAll contributors of this release in alphabetical order: @bharatkashyap, @DiegoAndai, @Fullchee, @Janpot, @mj12albert, @sai6855, @siriwatknp, @yash49, @zanivan
Jan 13, 2025
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
loading prop to the Button and IconButton components (#44637) @siriwatknp@mui/[email protected]slots and slotProps (#44971) @siriwatknploading prop (#44637) @siriwatknp*TypographyProps and complete slots, slotProps (#44729) @siriwatknparia-controls when closed (#44919) @siddhantantil39mergeSlotProps for extending components (#44809) @siriwatknpmergeSlotProps to merge style (#44959) @siriwatknp@mui/internal-test-utils (#45023) @LukasTyAll contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @good-jinu, @headironc, @iaziz11, @IceOfSummer, @Janpot, @LukasTy, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siddhantantil39, @siriwatknp, @yashdev16, @ZeeshanTamboli
Jan 3, 2025
A big thanks to the 8 contributors who made this release possible.
@mui/[email protected]Anatomy section in Accordion docs (#44849) @ZeeshanTamboliAll contributors of this release in alphabetical order: @adityaparab, @DiegoAndai, @komkanit, @oliviertassinari, @sai6855, @siddhantantil39, @yash49, @ZeeshanTamboli
Dec 23, 2024
A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]groupedOptions prop (#44657) @lewxdevownerState propagation for transition slots (#44401) @ZeeshanTambolislots and slotProps. (#44570) @siriwatknp@mui/[email protected]before directly without using prepend for global styles (#44648) @siriwatknptheme.applyStyles() docs (#44658) @DiegoAndai.muiName = (#44071) @JanpotoptimizeFonts Next.js option (#44802) @LukasTyAll contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @DiegoAndai, @Janpot, @lewxdev, @LukasTy, @romgrk, @sai6855, @siriwatknp, @yash49, @ZeeshanTamboli
Dec 17, 2024
A big thanks to the 10 contributors who made this release possible.
@mui/[email protected]overridesResolver return from object to array of styles (#44752) @siddhantantil39aria-current value (#44753) @jacklaurencegarayaria-required & aria-invalid on combobox instead of hidden input (#44731) @ben-pomelo@mui/[email protected]react-number-format demo to use the recommended prop (#44743) @siriwatknprawDescriptions option (#44737) @vladmorozeslint-plugin-jsx-a11y (#44701) @ZeeshanTamboliuseThemeProps, deepmerge and composeClasses functions (#44703) @JCQuintasAll contributors of this release in alphabetical order: @ben-pomelo, @ChristopherJamesL, @jacklaurencegaray, @JCQuintas, @sai6855, @siddhantantil39, @siriwatknp, @TurtIeSocks, @vladmoroz, @ZeeshanTamboli
Dec 10, 2024
A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
aria-orientation for vertical sliders. <kbd>ArrowRight</kbd> now increases the value and <kbd>ArrowLeft</kbd> decreases the value in vertical sliders; they were reversed in prior versions. (#44537) @mj12albert@mui/[email protected]component to BoxProps type (#44643) @DiegoAndaislots and slotProps (#44571) @sai6855component prop test (#44651) @DiegoAndaiAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @bharatkashyap, @DiegoAndai, @Janpot, @mj12albert, @mnajdova, @sai6855, @SuperMaxine, @vladmoroz, @ZeeshanTamboli
Dec 3, 2024
A big thanks to the 11 contributors who made this release possible.
@mui/[email protected]slotProps.img not spread to hook (#44536) @siriwatknpslotProps instead of componentsProps (#44552) @siriwatknptonalOffset from setting color channel (#44585) @siriwatknpScrollbarSize ref being overriden (#44593) @DiegoAndai&ZeroWidthSpace (#44631) @arishoham@mui/[email protected]theme changes when enabling CSS theme variables (#44588) @siriwatknpInputLabelProps in docs (#44634) @sai6855getSlotOwnerState from useSlot util (#44403) @ZeeshanTamboliAll contributors of this release in alphabetical order: @albarv340, @arishoham, @DiegoAndai, @joserodolfofreitas, @MBilalShafi, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Nov 27, 2024
A big thanks to the 8 contributors who made this release possible.
@mui/[email protected]placeholder from props (#44502) @JuneezeeGrid2Classes (#44562) @sai6855@mui/[email protected]noSsr to prevent double rendering (#44451) @siriwatknp@mui/[email protected]paragraph props (#44195) @joshkel@mui/[email protected]ownerState.className in describeConformance (#44479) @flaviendelangleAll contributors of this release in alphabetical order: @brijeshb42, @flaviendelangle, @joshkel, @Juneezee, @mesqueeb, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @StaceyD22
Nov 20, 2024
A big thanks to the 10 contributors who made this release possible.
@mui/[email protected]ul element for the listbox (#44422) @DiegoAndaiuseMediaQuery to prevent a breaking change (#44455) @siriwatknp*Component and *Props for v6 (#44350) @siriwatknp@mui/[email protected]setMode without configuring colorSchemeSelector (#43783) @siriwatknp@mui/[email protected]@mui/[email protected]useForkRef (#44410) @JCQuintas*Component and *Props codemods and deprecation messages (#44383) @DiegoAndaistylis-plugin-rtl-sc (#44447) @renovate[bot]describeConformance (#44412) @JCQuintasAll contributors of this release in alphabetical order: @DiegoAndai, @JCQuintas, @joserodolfofreitas, @mnajdova, @oliviertassinari, @prakhargupta1, @sai6855, samuelsycamore, @siriwatknp, @ZeeshanTamboli
Nov 13, 2024
A big thanks to the 13 contributors who made this release possible. This release includes fixes as well as documentation improvements.
@mui/[email protected]useMediaQuery (#44339) @siriwatknp@mui/[email protected]@types/hoist-non-react-statics causing styled returns any (#44397) @megoskey to remove noise from console (#44289) @sai6855vitest (#43625) @JCQuintasrawDescriptions option (#44390) @vladmorozclsx dependency (#43526) @JanpotAll contributors of this release in alphabetical order: @Janpot, @JCQuintas, @megos, @mnajdova, @navedqb, @oliviertassinari, @prakhargupta1, @sai6855, @samuelsycamore, @siriwatknp, @vladmoroz, @zanivan, @ZeeshanTamboli
Oct 30, 2024
A big thanks to the 13 contributors who made this release possible.
@mui/[email protected]onMouseDown type to AutocompleteRenderInputParams (#44183) @sai6855useThemeProps with useDefaultProps (#44193) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @aarongarciah, @blackcow1987, @DiegoAndai, @jimmycallin, @joshkel, @mnajdova, @navedqb, @nphmuller, @o-alexandrov, @oliviertassinari, @prakhargupta1, @sai6855, @siriwatknp
Oct 22, 2024
A big thanks to the 9 contributors who made this release possible.
@mui/[email protected]@mui/[email protected]defaultMode to InitColorSchemeScript (#44139) @siriwatknp@mui/[email protected]zeroMinWidth prop to codemod (#44178) @sai6855All contributors of this release in alphabetical order: @ChinoUkaegbu, @Janpot, @mnajdova, @oliviertassinari, @prakhargupta1, @sai6855, @samuelsycamore, @siriwatknp, @snapwich
Oct 15, 2024
A big thanks to the 9 contributors who made this release possible.
@mui/[email protected]@mui/styles in v5 migration docs (#44049) @samuelsycamoreAll contributors of this release in alphabetical order: @aarongarciah, @bharatkashyap, @Janpot, @oliviertassinari, @prakhargupta1, @sai6855, @samuelsycamore, @siriwatknp, @zanivan
Oct 9, 2024
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]item prop for size prop (#44027) @Janpot@mui/[email protected]SystemCSSProperties should not have SystemStyleObject as value (#44029) @siriwatknp@mui/[email protected]@mui/[email protected]slotProp name in the TextField deprecation note. (#43985) @Chee7ah@mui/styled-engine-sc dev dependency from @mui/styled-engine-sc (#44050) @Janpotnext dependency specifier across project (#44036) @JanpotError without new (#43963) @JanpotAll contributors of this release in alphabetical order: @aarongarciah, @Asin-Junior-Honore, @barrownicholas, @Chee7ah, @effektsvk, @hieunguyenduc696, @Janpot, @Juneezee, @k-rajat19, @mnajdova, @oliviertassinari, @romgrk, @sai6855, @siriwatknp, @wojtek35, @yonatan0
Oct 2, 2024
A big thanks to the 13 contributors who made this release possible.
@mui/[email protected]limitTags (#42494) @appleSimpledark and contrastText if not provided in the theme (#43861) @siriwatknpinherit (#43862) @siriwatknpname as prefix of input element ids (#43829) @yash49@mui/styles pages (#43833) @samuelsycamoree with event and add ESLint rule (#43866) @samuelsycamoretoBeAriaHidden matcher with toBeInaccessible in tests (#43870) @ZeeshanTambolishow parameter name with hide in modal manager (#43868) @ZeeshanTambolimanager prop handling (#43867) @ZeeshanTamboliAll contributors of this release in alphabetical order: @albarv340, @appleSimple, @BrianWoolfolk, @DanailH, @Janpot, @kdichev, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @wilhelmlofsten, @yash49, @ZeeshanTamboli
Sep 19, 2024
A big thanks to the 18 contributors who made this release possible.
@mui/[email protected]GridProps and GridTypeMap (#43717) @DiegoAndai@mui/[email protected]GlobalStyles (#43739) @siriwatknp@mui/[email protected]options of useFakeTimers function (#43729) @LukasTyindexOf with includes (#43694) @JuneezeeAll contributors of this release in alphabetical order: @aarongarciah, @binsmyth, @cherniavskii, @DiegoAndai, @Janpot, @Juneezee, @LukasTy, @mnajdova, @morozow, @Nashyn, @oliviertassinari, @sahil-ag, @sai6855, @Sergio16T, @siriwatknp, @xconverge, @yash49, @ZeeshanTamboli
Sep 10, 2024
A big thanks to the 21 contributors who made this release possible. Here are the highlights ✨:
@mui/icons-material (#43624). This change is backwards compatible with previously recommended setups. Bundlers that don't support the exports field won't be affected. If you discover any issues, please reach out by creating a GitHub issue.@mui/[email protected]@mui/[email protected]slotProps (#43613) @Michael-Hutchinson& when using applyStyles (#43633) @siriwatknpCreateSlotsAndSlotProptype (#42077) @lhilgert9@mui/[email protected]GlobalStyles (#43632) @siriwatknpdate-fns dependency (#40823) @renovate[bot]All contributors of this release in alphabetical order: @alelthomas, @cherniavskii, @Designer023, @DiegoAndai, @GoOrit-Anima, @IAluI, @Janpot, @JCQuintas, @lhilgert9, @lokendra-reco, @LuseBiswas, @Michael-Hutchinson, @michaldudak, @mnajdova, @ohmsl, @oliviertassinari, @renovate[bot], @sai6855, @samuelsycamore, @siriwatknp, @zanivan
Sep 3, 2024
A big thanks to the 11 contributors who made this release possible.
@mui/[email protected]createTheme() with just color schemes (#43518) @siriwatknp@mui/[email protected]let/const instead of var (#43468) @ishon19@mui/[email protected]ListItemButton import for unrelated files (#43532) @siriwatknp@mui/[email protected] version (#43516) @DiegoAndaiTheme generic (#43523) @siriwatknpAll contributors of this release in alphabetical order: @DiegoAndai, @iamandrewluca, @ishon19, @Janpot, @joserodolfofreitas, @MateuszGroth, @Michael-Hutchinson, @michelengelen, @oliviertassinari, @siriwatknp, @zanivan
Aug 29, 2024
A big thanks to the 12 contributors who made this release possible. It contains bug fixes and documentation improvements.
@mui/[email protected]@mui-internal/api-docs-builder (#43498) @Janpot'use client' from index files and useAutocomplete reexport (#41956) @DiegoAndailatest on all Material UI dependencies (#43494) @mnajdovaAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @DiegoAndai, @Janpot, @JCQuintas, @Michael-Hutchinson, @michelengelen, @mnajdova, @oliviertassinari, @prakhargupta1, @siriwatknp, @zanivan
Aug 27, 2024
We are excited to announce the stable release of Material-UI v6 🎉, check out the blog post to see all the updates.
@mui/[email protected]getItemAriaLabel page param type (#43399) @sydneyjodon-wkgetTabbable function return type (#42237) @KalmarLorand@mui/[email protected]^6.0.0 for @mui/ dependencies in @mui/docs (#43445) @LukasTyAll contributors of this release in alphabetical order: @ahmadnadeem6236, @bahmanworld, @DiegoAndai, @Janpot, @KalmarLorand, @LukasTy, @michelengelen, @mnajdova, @oliviertassinari, @prakhargupta1, @sai6855, @siriwatknp, @sydneyjodon-wk, @zanivan
Aug 22, 2024
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected][Box] Remove component from BoxOwnProps (#43384) @DiegoAndai
The component prop has been removed from the BoxOwnProps as it is already included in the Box type.
This might affect your code if you are using the styled function with the Box component.
If this is the case, use a div element instead of Box:
-const StyledBox = styled(Box)`
+const StyledDiv = styled('div')`
color: white;
`;
This yields the same end result.
If this doesn't work for you, you can also cast the styled returned value to typeof Box:
const StyledBox = styled(Box)`
color: white;
-`;
+` as typeof Box;
@mui/[email protected]Composition guide (#43266) @ZeeshanTamboliPaperProps with slotProps.paper in demos (#43354) @sai6855@mui/system TypeScript module augmentation tests in CI (#43386) @ZeeshanTamboliindexOf with includes (#42883) @k-rajat19composeClasses (#43363) @romgrkAll contributors of this release in alphabetical order: @aarongarciah, @DiegoAndai, @Janpot, @Jay-Karia, @k-rajat19, @oliviertassinari, @rluzists1, @romgrk, @sai6855, @siriwatknp, @Vxee, @ZeeshanTamboli
Aug 16, 2024
A big thanks to the 18 contributors who made this release possible.
@mui/[email protected]options prop description (#41591) @pluvio72getSelector prefers-color-scheme to be object (#43237) @siriwatknpdisplay="block" usage to work with Pigment CSS (#43307) @siriwatknp@mui/[email protected]@mui/[email protected]userEvent export from @mui/internal-test-utils (#43313) @LukasTyeslint-plugin-jsx-a11y version to 6.7.1 (#43292) @Janpot@mui/material/styles (#43236) @siriwatknpmatchMedia mocks (#43240) @cherniavskiiAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @anle9650, @bharatkashyap, @cherniavskii, @DiegoAndai, @Janpot, @Jay-Karia, @jlewins, @mnajdova, @oliviertassinari, @pluvio72, @renovate[bot], @romgrk, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Aug 8, 2024
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected][material-ui][ListItem] Removing deprecated props (#41566) @thathva
ListItem's props autoFocus, button, disabled, and selected, deprecated in v5, have been removed. To replace the button prop, use ListItemButton instead. The other removed props are available in the ListItemButton component as well.
-<ListItem button />
+<ListItemButton />
Use this codemod to migrate your project to the ListItemButton component:
npx @mui/codemod@next v6.0.0/list-item-button-prop <path/to/folder>
As the ListItem no longer supports these props, the class names related to these props were removed. You should use the listItemButtonClasses object instead.
-import { listItemClasses } from '@mui/material/ListItem';
+import { listItemButtonClasses } from '@mui/material/ListItemButton';
- listItemClasses.button
+ listItemButtonClasses.root
- listItemClasses.focusVisible
+ listItemButtonClasses.focusVisible
- listItemClasses.disabled
+ listItemButtonClasses.disabled
- listItemClasses.selected
+ listItemButtonClasses.selected
CssVarsProvider into ThemeProvider (#43115) @siriwatknp@mui/[email protected]@mui/[email protected]redux-form from TextField documentation (#43176) @AbdurRahman2004@mui/internal-test-utils screen export type (#43150) @LukasTyreact-router package from pigment-css-vite-app (#43201) @ZeeshanTamboli@mui/internal-babel-macros (#43193) @ZeeshanTamboliApiPage to TS (#43149) @alexfauquetteAll contributors of this release in alphabetical order: @aarongarciah, @AbdurRahman2004, @alexfauquette, @DiegoAndai, @Janpot, @joserodolfofreitas, @LukasTy, @michaldudak, @mnajdova, @oliviertassinari, @prakhargupta1, @samuelsycamore, @siriwatknp, @thathva, @Vxee, @zanivan, @ZeeshanTamboli
Jul 30, 2024
A big thanks to the 12 contributors who made this release possible.
@mui/[email protected]AccordionSummary button per W3C Accordion Pattern standards (#42914) @ZeeshanTamboli@mui/[email protected]createBreakpoints independent for stringify theme (#43048) @siriwatknp@mui/[email protected]<ListItem button/> with ListItemButton component in routing libraries list example (#43110) @aliharis99@mui/docs package (#42944) @alexfauquetteAll contributors of this release in alphabetical order: @alexfauquette, @aliharis99, @anuujj, @DiegoAndai, @KevinVandy, @markliu2013, @oliviertassinari, @sai6855, @shahzaibdev1, @siriwatknp, @zanivan, @ZeeshanTamboli
Jul 24, 2024
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]extendTheme and CssVarsProvider API (#42839) @siriwatknpparagraph prop (#42383) @walston@mui/[email protected]@mui/[email protected]Hint demo (#42990) @ManthanGajjarDemoSandbox agnostic of productId (#43042) @Janpottheme.variants (#42614) @siriwatknpreact-17 and react-next workflows on the next branch (#42690) @cherniavskiiuseReactVersion script reusable in other repos (#42828) @cherniavskiidisplay: flex from SectionTitle (#42979) @LukasTyAll contributors of this release in alphabetical order: @aarongarciah, @bharatkashyap, @brijeshb42, @cherniavskii, @DiegoAndai, @Janpot, @jeloagnasin, @LukasTy, @ManthanGajjar, @mnajdova, @navedqb, @oliviertassinari, @sai6855, @siriwatknp, @walston, @zanivan, @ZouYouShun
Jul 16, 2024
@mui/[email protected]All contributors of this release in alphabetical order: @mnajdova, @oliviertassinari
Jul 16, 2024
A big thanks to the 6 contributors who made this release possible.
@mui/[email protected]@mui/[email protected]mui-name-matches-component-name linting rule (#42773) @flaviendelangleAll contributors of this release in alphabetical order: @alexfauquette, @arminmeh, @flaviendelangle, @mnajdova, @oliviertassinari, @siriwatknp
Jul 11, 2024
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]*Components and *Props for v6 (#42466) @lhilgert9@mui/[email protected]@mui/[email protected]Demo component (#42857) @LukasTyAll contributors of this release in alphabetical order: @bharatkashyap, @brijeshb42, @DiegoAndai, @Janpot, @lhilgert9, @LukasTy, @mbrookes, @oliviertassinari, @omahs, @romgrk, @sai6855, @ZeeshanTamboli
Jul 3, 2024
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected][Grid] Update Grid props to match PigmentGrid (#42742) @DiegoAndai
Use the codemod below to migrate the props:
npx @mui/codemod@next v6.0.0/grid-v2-props /path/to/folder
CssVarsTheme in responsiveFontSizes return type (#42786) @jxdpUseTabParameters.onChange (#42749) @ohgreeuseThemeProps (#42817) @siriwatknpHighlightedCode test into @mui/docs package (#42835) @LukasTy@mui/docs usage and legacy re-exports (#42833) @LukasTyAll contributors of this release in alphabetical order: @aarongarciah, @alexey-kozlenkov, @danilo-leal, @DiegoAndai, @Janpot, @jxdp, @LukasTy, @ohgree, @oliviertassinari, @renovate[bot], @sai6855, @siriwatknp
Jun 27, 2024
A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]import/no-cycle rule (#42705) @LukasTyAll contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @appleSimple, @cjl750, @Janpot, @joetats, @LukasTy, @sai6855, @siriwatknp, @wbt
Jun 24, 2024
A big thanks to the 17 contributors who made this release possible.
@mui/[email protected]InitColorSchemeScript for Next.js App Router (#42247) @siriwatknpCssBaseline, ScopedCssBaseline and Popper (#42640) @siriwatknpDefaultPropsProvider for Pigment CSS integration (#42638) @siriwatknpsiblingsEnd calculation logic (#42667) @Mini-ghost@mui/[email protected]@mui/[email protected]mui-system package (#42637) @sai6855@mui/[email protected]@mui/[email protected]SelectAutoWidth demo menu item value (#42648) @Danielkhakbazrole attribute (#42629) @danilo-lealtsconfig/tsc target to es2022 (#42645) @LukasTyAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @alexismo, @anuujj, @arminmeh, @BartJanvanAssen, @Danielkhakbaz, @danilo-leal, @DiegoAndai, @Janpot, @LukasTy, @michaldudak, @Mini-ghost, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp
Jun 11, 2024
A big thanks to the 18 contributors who made this release possible.
@mui/[email protected]globalCss for Pigment integration (#42431) @siriwatknpany to unknown (#42473) @sai6855extendSxProp adapter (#42543) @siriwatknpiconWrapper styles from theme and update its description (#42549) @sai6855stringifyTheme for Pigment CSS integration (#42476) @siriwatknp@mui/[email protected]disableEqualOverflow by using gap (#42526) @DiegoAndai@mui/[email protected]NaN as defaultValue to useControlled (#41559) @iammminzzy@mui/[email protected]@mui/[email protected]mui-private-theming components (#42619) @sai6855theme.applyStyles() and migrate docs (#42498) @siriwatknpsx prop (#42475) @siriwatknpfor..of loops (#42600) @michaldudakAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @anle9650, @DanailH, @danilo-leal, @devnyxie, @DiegoAndai, @iammminzzy, @jacobmoshipco, @michaldudak, @necatiozmen, @oliviertassinari, @sai6855, @shrilsharma, @siriwatknp, @tonygravell, @zanivan, @ZeeshanTamboli
Jun 4, 2024
A big thanks to the 7 contributors who made this release possible.
@mui/[email protected]components and componentsProps (#42468) @DiegoAndaicomponents and componentsProps (#42469) @DiegoAndai@mui/[email protected]All contributors of this release in alphabetical order: @aarongarciah, @ChronicusUA, @danilo-leal, @DiegoAndai, @erezstmn-doit, @oliviertassinari, @sai6855
May 29, 2024
A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
CssVarsProvider and extendTheme are now stable (#42246) @siriwatknp@mui/[email protected]componentsProps for v6 (#42122) @lhilgert9wrap prop (#42363) @fedirjh*Component and *Props props deprecations (#42263) @aarongarciahCssVarsProvider and extendTheme (#42246) @siriwatknp@mui/[email protected]ownerState coming from props and ownerState (#42358) @DiegoAndai@mui/[email protected]sx prop for v6 migration (#42153) @siriwatknp@types/ packages (#42346) @DiegoAndaireact-swipeable-views-utils package from docs (#42378) @ZeeshanTamboli@testing-library/react and @testing-library/dom packages (#42349) @ZeeshanTamboli@types/prettier package (#42339) @ZeeshanTamboliWyW-in-JS from Renovate config (#42335) @ZeeshanTamboliuserAgent override in jsdom env (#42344) @cherniavskiideepmerge (#41652) @tjcouch-silAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @apedroferreira, @brijeshb42, @cherniavskii, @ChronicusUA, @danilo-leal, @DiegoAndai, @fedirjh, @j4marcos, @Janpot, @KenanYusuf, @lhilgert9, @lucasgmelo, @MatheusEli, @mihilt, @mnajdova, @nikitaa24, @oliviertassinari, @sayoubiaf, @siriwatknp, @tjcouch-sil, @ZeeshanTamboli
May 21, 2024
A big thanks to the 7 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]*Props props (#42062) @DiegoAndaipage prop API (#42220) @Mandar-PandyaAll contributors of this release in alphabetical order: @danilo-leal, @DiegoAndai, @Janpot, @Mandar-Pandya, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
May 16, 2024
A big thanks to the 14 contributors who made this release possible.
@mui/[email protected]componentsProps props (#42179) @lhilgert9*Component and *Props for v6 (#41875) @lhilgert9selected class in ToggleButtonGroupClasses type (#42243) @tarunrajput@mui/[email protected]Autocomplete component (#42099) @heath-freenomeAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @arthurbalduini, @bharatkashyap, @danilo-leal, @DiegoAndai, @heath-freenome, @lhilgert9, @noraleonte, @oliviertassinari, @sai6855, @samuelsycamore, @TahaRhidouani, @tarunrajput
May 8, 2024
A big thanks to the 10 contributors who made this release possible.
@mui/[email protected]@mui/[email protected]theme-v6 migration (#42056) @siriwatknp@mui/[email protected]All contributors of this release in alphabetical order: @aarongarciah, @danilo-leal, @harry-whorlow, @Janpot, @joserodolfofreitas, @LukasTy, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp
May 1, 2024
A big thanks to the 9 contributors who made this release possible.
@mui/[email protected]componentsProps (#41767) @sai6855@mui/[email protected]All contributors of this release in alphabetical order: @5-tom, @aarongarciah, @bricker, @danilo-leal, @mnajdova, @oliviertassinari, @ryanhartwig, @sai6855, @ZeeshanTamboli
Apr 24, 2024
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]font (#42003) @siriwatknp@mui/[email protected]getLayout on the material demo pages (#41936) @alexfauquetteAll contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @gijsbotje, @Janpot, @lhilgert9, @michaldudak, @Miguelrom, @mnajdova, @oliviertassinari, @rluzists1, @sai6855, @siriwatknp, @soler1212, @zanivan, @ZeeshanTamboli
Apr 17, 2024
A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
@mui/system package (#41674) @siriwatknp.@mui/[email protected]LinearProgress to support Pigment CSS (#41816) @siriwatknpCircularProgress to support Pigment CSS (#41776) @siriwatknpStepIconComponent, StepIconProps (#41835) @sai6855@mui/[email protected]@mui/[email protected]@mui/[email protected]@pigment-css/[email protected]onChange event handler to file upload example (#41863) @aarongarciah*Component and *Props props deprecations (#41685) @DiegoAndaiAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @bharatkashyap, @brijeshb42, @cherniavskii, @danilo-leal, @DiegoAndai, @EyaOuenniche, @gijsbotje, @iammminzzy, @Janpot, @kealjones-wk, @lhilgert9, @magnimarels, @michaldudak, @mithun522, @mnajdova, @MoazMirza-13, @MohammadShehadeh, @oliviertassinari, @ryanburr, @sai6855, @siriwatknp, @zanivan
Apr 9, 2024
A big thanks to the 5 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]muiName property TypeScript error (#41726) @EyaOuenniche@pigment-css/[email protected]muiName during eval phase (#41811) @brijeshb42@pigment-css/[email protected]All contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @brijeshb42, @EyaOuenniche, @oliviertassinari
Apr 5, 2024
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]spacing theme token (#40224) @siriwatknp@mui/[email protected]spacing theme token to be used in theme.spacing() (#40224) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]spacing theme token (#40224) @siriwatknp@pigment-css/[email protected]@pigment-css/[email protected]@pigment-css/[email protected]next -> master (#41741) @aarongarciahAll contributors of this release in alphabetical order: @aarongarciah, @adriancuadrado, @alexfauquette, @bharatkashyap, @brijeshb42, @connorshea, @danilo-leal, @DiegoAndai, @iammminzzy, @Janpot, @JCQuintas, @levigunz, @mnajdova, @oliviertassinari, @ppaskaris-plooto, @siriwatknp, @skmanoj322, @zanivan, @ZeeshanTamboli
Mar 26, 2024
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]options prop even if loading is true (#41634) @nekoyacomponentProps prop (#41321) @sai6855@pigment-css/[email protected]@mui/[email protected]extendTheme (#41446) @siriwatknpvalueLabelFormat from restricted values demo so that the tooltip thumb label displays the same as the value text (#41567) @StylesTripAll contributors of this release in alphabetical order: @aacevski, @brijeshb42, @cherniavskii, @cipherlogs, @danilo-leal, @DiegoAndai, @harry-whorlow, @Janpot, @joserodolfofreitas, @michael-land, @michaldudak, @mnajdova, @nekoya, @sai6855, @siriwatknp, @StylesTrip, @zanivan, @ZeeshanTamboli
Aug 9, 2024
A big thanks to the 3 contributors who made this release possible.
@mui/[email protected]All contributors of this release in alphabetical order: @DiegoAndai, @oliviertassinari, @zanivan
Jul 30, 2024
A big thanks to the 5 contributors who made this release possible.
@mui/[email protected]<ListItem button/> with ListItemButton component in routing libraries list example (#43114) @aliharis99reason type in demos (#43105) @sai6855All contributors of this release in alphabetical order: @aliharis99, @anuujj, @mnajdova, @sai6855, @shahzaibdev1
Jul 25, 2024
A big thanks to the 4 contributors who made this release possible.
@mui/[email protected]Hint demo (@ManthanGajjar) (#43039) @ManthanGajjarAll contributors of this release in alphabetical order: @ManthanGajjar, @mnajdova, @navedqb, @oliviertassinari
Jul 16, 2024
A big thanks to the 1 contributor who made this release possible.
@mui/[email protected]All contributors of this release in alphabetical order: @mnajdova
Jul 16, 2024
A big thanks to the 3 contributors who made this release possible.
@mui/[email protected]autosuggest-highlight dependency (#42953) @HoFa1997All contributors of this release in alphabetical order: @HoFa1997, @mnajdova, @oliviertassinari
Jul 16, 2024
A big thanks to the 2 contributors who made this release possible.
@mui/[email protected]All contributors of this release in alphabetical order: @mnajdova, @oliviertassinari
Jul 11, 2024
A big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @aarongarciah, @oliviertassinari, @omahs, @ZeeshanTamboli
Jul 5, 2024
A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
InitColorSchemeScript for Next.js App Router (#42829) @siriwatknp@mui/[email protected]InitColorSchemeScript for Next.js App Router (#42829) @siriwatknpDefaultPropsProvider (#42820) @siriwatknpCssVarsTheme in responsiveFontSizes return type (@jxdp) (#42806) @jxdpgetInitColorSchemeScript (#42838) @siriwatknpAll contributors of this release in alphabetical order: @aarongarciah, @alexey-kozlenkov, @jxdp, @oliviertassinari, @siriwatknp
Jun 28, 2024
A big thanks to the 7 contributors who made this release possible.
@mui/[email protected]nonLinear prop (@alexismo) (#42677) @alexismoSelectAutoWidth demo menu item value (@Danielkhakbaz) (#42696) @DanielkhakbazAll contributors of this release in alphabetical order: @alexfauquette, @alexismo, @arminmeh, @Danielkhakbaz, @DiegoAndai, @mnajdova, @oliviertassinari
Jun 12, 2024
A big thanks to the 9 contributors who made this release possible.
@mui/[email protected]iconWrapper styles from theme and update its description (@sai6855) (#42570) @sai6855@mui/[email protected]NaN as defaultValue to useControlled (@iammminzzy) (#42571) @iammminzzydeepmerge (#41652) (#42608) @DiegoAndaiAll contributors of this release in alphabetical order: @aarongarciah, @anle9650, @DanailH, @danilo-leal, @erezstmn-doit, @iammminzzy, @oliviertassinari, @sai6855, @ZeeshanTamboli
May 29, 2024
A big thanks to the 12 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]page prop API (@Mandar-Pandya) (#42265) @github-actions[bot]Autocomplete component (#42099) (#42241) @DiegoAndaiAll contributors of this release in alphabetical order: @aarongarciah, @brijeshb42, @danilo-leal, @DiegoAndai, @KenanYusuf, @lucasgmelo, @Mandar-Pandya, @MatheusEli, @mnajdova, @nikitaa24, @oliviertassinari, @ZeeshanTamboli
May 14, 2024
A big thanks to the 5 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]selected class in ToggleButtonGroupClasses type (@tarunrajput) (#42250) @github-actions[bot]All contributors of this release in alphabetical order: @arthurbalduini, @oliviertassinari, @samuelsycamore, @TahaRhidouani, @tarunrajput
May 8, 2024
A big thanks to the 4 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]All contributors of this release in alphabetical order: @github-actions[bot], @joserodolfofreitas, @oliviertassinari, @siriwatknp
May 1, 2024
A big thanks to the 8 contributors who made this release possible. Here are some highlights ✨: This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]muiName property TypeScript error (@EyaOuenniche) (#41786) @github-actions[bot]next -> master (#41742) @aarongarciahAll contributors of this release in alphabetical order: @aarongarciah, @alexfauquette, @DanailH, @DiegoAndai, @github-actions[bot], @JCQuintas, @mnajdova, @oliviertassinari
Apr 4, 2024
A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨: This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]options prop even if loading is true (#41677) @ZeeshanTamboli@mui/[email protected]valueLabelFormat from restricted values demo so that the tooltip thumb label displays the same as the value text (#41679) @ZeeshanTamboliAll contributors of this release in alphabetical order: @aarongarciah, @bharatkashyap, @cherniavskii, @danilo-leal, @mnajdova, @oliviertassinari, @ZeeshanTamboli
Mar 18, 2024
A big thanks to the 15 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@pigment-css/[email protected]pigment-css/[email protected]All contributors of this release in alphabetical order: @bharatkashyap, @brijeshb42, @cherniavskii, @cipherlogs, @danilo-leal, @DiegoAndai, @EyaOuenniche, @Janpot, @jherr, @michaldudak, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @zanivan
Mar 13, 2024
A big thanks to the 18 contributors who made this release possible. Here are some highights ✨
@mui/[email protected]slots and slotProps type to theme (#41324) @sai6855freeSolo mode even when there are no options, causing style problems (#41300) @rakeshmusturipaperChannel token (#41447) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]FormControlOwnerState type from index (#41287) @michaeldfoley@pigment-css/[email protected]keyframes serialize styles error (#41395) @siriwatknp<b> appearing in notifications (#41390) @peterwangscAll contributors of this release in alphabetical order: @alexfauquette, @anle9650, @brijeshb42, @CGNonofr, @cipherlogs, @danilo-leal, @jwithington, @Janpot, @michaeldfoley, @michaldudak, @mnajdova, @oliviertassinari, @peterwangsc, @rakeshmusturi, @sai6855, @siriwatknp, @zanivan, @ZeeshanTamboli
Mar 5, 2024
A big thanks to the 21 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@pigment-css/[email protected], @pigment-css/[email protected], @pigment-css/[email protected], & @pigment-css/[email protected]@mui/[email protected]large size added in type (#34909) @smoxdeleteIconColorPrimary and deleteIconColorSecondary class descriptions (#41231) @sai6855@mui/[email protected]object intersection from CSS Fallback (#41271) @siriwatknp@mui/[email protected]useLocalStorageState hook from Toolpad (#41096)" @oliviertassinariAll contributors of this release in alphabetical order: @alexfauquette, @atomiks, @brijeshb42, @DanailH, @danilo-leal, @DiegoAndai, @divyammadhok, @Janpot, @lhilgert9, @matystroia, @michaldudak, @michelengelen, @mj12albert, @oliviertassinari, @prakhargupta1, @PunitSoniME, @sai6855, @siriwatknp, @smox, @zanivan, @ZeeshanTamboli
Feb 21, 2024
A big thanks to the 26 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]useLocalStorageState hook from Toolpad (#41096) @Janpot@mui/[email protected]@mui/[email protected]/base-ui-2024-plans/ page (#41171) @oliviertassinariexperimental.cpus to control amount of export workers in Next.js (#41132) @Janpot@mui/base dev dependency from Base UI workspace (#41216) @ZeeshanTamboliOmit on types with conditional properties (#41033) @flaviendelangleextendTheme for creating a zero-runtime theme (#40897) @siriwatknpAll contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @danilo-leal, @DiegoAndai, @dpertsin, @flaviendelangle, @gitstart, @gregberge, @harrydigos, @Janpot, @justintoman, @khgiddon, @KirankumarAmbati, @LukasTy, @michaldudak, @mnajdova, @nikosgavalas, @oliviertassinari, @PaulKristoffersson, @Rishi556, @rluzists1, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli
Feb 12, 2024
A big thanks to the 8 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@mui/[email protected]disabled prop priority when inside button group (#41000) @Smileekchildren prop so docgen tools don't parse it as HTML (#40992) @millerizedcopyFiles script to reuse in MUI X repo (#40970) @cherniavskii@ignore (#41009) @cherniavskiiAll contributors of this release in alphabetical order: @cherniavskii, @danilo-leal, @joserodolfofreitas, @millerized, @oliviertassinari, @sai6855, @siriwatknp, @Smileek
Feb 8, 2024
A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
@mui/material peerDependencies.@mui/[email protected]@mui/[email protected]@mui/[email protected]ReadonlyArray for CSS related types (#40972) @siriwatknplight prop removal (#40947) @sai6855All contributors of this release in alphabetical order: @brijeshb42, @DiegoAndai, @Janpot, @oliviertassinari, @RaghavenderSingh, @sai6855, @siriwatknp
Feb 6, 2024
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]findComponentJSX util (#40855) @sai6855@mui/[email protected]theme.styleOverrides (#40690) @siriwatknpcreateUseThemeProps call (#40885) @siriwatknp@mui/[email protected]hostElementName prop to improve SSR (#40507) @mj12albertAll contributors of this release in alphabetical order: @adebiyial, @brijeshb42, @danilo-leal, @DiegoAndai, @hsmtkk, @Janpot, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @rluzists1, @romgrk, @sai6855, @siriwatknp, @Smileek, @xuhdev, @zanivan
Jan 31, 2024
A big thanks to the 21 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]displayEmpty (#40865) @ZeeshanTambolichildren is empty string or boolean (#40766) @mirus-ua@mui/[email protected]@mui/[email protected]applyStyles() to theme (#40667) @siriwatknptheme.applyStyles() in the demo app (#40787) @siriwatknpuseThemeProps processor (#40648) @siriwatknp@mui/[email protected]clearTimeout calls (#39060) @romgrk@mui/[email protected]@mui/[email protected]SupportedColorScheme (#40776) @Nikhilh26@mui/[email protected]value (#40829) @srinidhi9831missingKeyGenerator do no longer exist (#40830) @oliviertassinari@types/markdown-to-jsx package from docs (#40828) @ZeeshanTamboli@slack/web-api package (#40840) @ZeeshanTamboliPropTypes.object (#40774) @flaviendelangleAll contributors of this release in alphabetical order: @alexfauquette, @colmtuite, @danilo-leal, @DiegoAndai, @EyaOuenniche, @flaviendelangle, @Janpot, @Jaswanth-Sriram-Veturi, @joserodolfofreitas, @michaldudak, @mirus-ua, @mnajdova, @mohamedsaiedd, @Nikhilh26, @oliviertassinari, @romgrk, @sai6855, @siriwatknp, @srinidhi9831, @zanivan, @ZeeshanTamboli
Jan 22, 2024
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨: This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]rowsPerPageOptions prop (#40481) @pcorpet@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @alexfauquette, @anle9650, @ANUGLYPLUGIN, @brijeshb42, @danilo-leal, @devhik0, @DiegoAndai, @DonikaV, @joserodolfofreitas, @michaldudak, @mj12albert, @mnajdova, @mohamedsaiedd, @oliviertassinari, @pcorpet, @sai6855, @zanivan
Jan 17, 2024
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
base- (#40205) @michaldudak@mui/[email protected]iconMapping and severity props (#40551) @2metres@mui/[email protected]ButtonGroup (#40124) @lhilgert9@mui/[email protected]base- (#40205) @michaldudakThe class prefix of Base UI components have been changed from Mui- to base-. This only affects codebases that uses class names verbatim, i.e. not exposed by JS objects such as buttonClasses, but as plain strings or in CSS stylesheets (.MuiButton.root)
To adapt your code to the new pattern:
.Mui([A-Z][A-Za-z]*)- with .base-$1- (so MuiButton-root becomes base-Button-root, etc.),.Mui-([a-z]*) with .base--$1 (so Mui-disabled becomes base--disabled, etc.).@mui/[email protected]@mui/[email protected]json files to be transformed (#40536) @ZeeshanTamboli@mui/[email protected]@mui/material peer dependency version (#40528) @ZeeshanTamboli@mui/[email protected]@mui/[email protected]State interface from Consecutive Snackbars demo (#40410)
@zinoromanrun command to deploy docs (#40513) @siriwatknpAll contributors of this release in alphabetical order: @2metres, @aacevski, @brijeshb42, @danilo-leal, @DiegoAndai, @josh-feldman, @Kamino0, @lhilgert9, @maakcode, @michaldudak, @oliviertassinari, @petrovmiroslav, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli, @zinoroman
Jan 10, 2024
A big thanks to the 22 contributors who made this release possible. Here are some highlights:
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]isPlainObject to work across realm (#39981) @brijeshb42@mui/[email protected]@mui/[email protected]JoyToggleButtonGroup to extendTheme's components type export (#40407) @RiceCrispmui-x dependency resolving (#40257) @LukasTyt command (#40430) @michaldudakAll contributors of this release in alphabetical order: @aacevski, @alexfauquette, @anle9650, @brijeshb42, @danilo-leal, @DiegoAndai, @iamsaumya, @illume, @Janpot, @LukasTy, @Methuselah96, @michaldudak, @mj12albert, @nicegamer7, @oliviertassinari, @renovate[bot], @RiceCrisp, @sai6855, @samuelsycamore, @savalaram-redkar, @siriwatknp, @zanivan
Jan 3, 2024
A big thanks to the 11 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @aacevski, @anle9650, @danilo-leal, @DiegoAndai, @Kamino0, @lhilgert9, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp, @Super-Kenil
Dec 25, 2023
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @adamhylander, @anle9650, @danilo-leal, @DiegoAndai, @Kimzify, @michaldudak, @mnajdova, @muazaqdas, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Dec 19, 2023
A big thanks to the 15 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]slots and slotProps (#33797) @pratikkarad@mui/[email protected]htmlFor and id attributes not functioning properly for form labels (#40180) @ReaZzy@mui/[email protected]theme being of type any (#40200) @mnajdovamui-tiptap for rich text (#40216) @sjdemartiniAll contributors of this release in alphabetical order: @danilo-leal, @gitstart, @MBilalShafi, @mbrookes, @mnajdova, @oliviertassinari, @possibilities, @pratikkarad, @qiweiii, @ReaZzy, @s8990, @sai6855, @sjdemartini, @zanivan, @ZeeshanTamboli
Dec 11, 2023
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]ButtonGroup files to ts (#39794) @lhilgert9@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @abreel, @alexfauquette, @anle9650, @blakenetz, @danilo-leal, @EloB, @lhilgert9, @mbrookes, @mikailaread, @mj12albert, @mnajdova, @sai6855, @siriwatknp, @zanivan, @ZeeshanTamboli
Dec 5, 2023
A big thanks to the 14 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]CircularProgress (#39825) @lhilgert9sm screens (#40049) @DiegoAndaiAll contributors of this release in alphabetical order: @alexfauquette, @anle9650, @caweidmann, @danilo-leal, @DiegoAndai, @fzaninotto, @Janpot, @lhilgert9, @michaldudak, @mnajdova, @oliviertassinari, @REX500, @samuelsycamore, @zanivan
Nov 29, 2023
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
material-next package (#39807) @lhilgert9@mui/[email protected]onChange type from SelectInputProps (#39891) @ZeeshanTamboli@mui/[email protected]numberInputReducer (#38723) @mj12albert@mui/[email protected]@mui/[email protected]@mui/[email protected]PartiallyRequired type (#39939) @lhilgert9@mui/[email protected]LinearProgress (#39807) @lhilgert9Switch to material next (#39887) @lhilgert9All contributors of this release in alphabetical order: @avikalpg, @brijeshb42, @cherniavskii, @danilo-leal, @DarhkVoyd, @dhaub-exelixis, @DiegoAndai, @flaviendelangle, @islandryu, @joserodolfofreitas, @lhilgert9, @mj12albert, @mnajdova, @oliviertassinari, @sadik-malik, @sai6855, @zanivan, @ZeeshanTamboli
Nov 14, 2023
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]defaultMuiPrevented to onKeyDown type (#39820) @sai6855slotProps pattern for the actions and the select slots (#39353) @anle9650@mui/[email protected]Stepper component (#39688) @siriwatknp@mui/[email protected]ButtonGroup to material next (#39739) @lhilgert9CircularProgress files to ts (#39791) @lhilgert9LinearProgress files to ts (#39793) @lhilgert9LinearProgress to material next (#39779) @lhilgert9CircularProgress to material next (#39780) @lhilgert9CssBaseline to integration with Material UI page (#39790) @swilliancAll contributors of this release in alphabetical order: @anle9650, @axelbostrom, @danilo-leal, @joserodolfofreitas, @lhilgert9, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @swillianc, @zanivan, @ZeeshanTamboli
Nov 6, 2023
A big thanks to the 12 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]sx type to input and root slot (#39569) @sai6855@mui/[email protected]Button is not immediate children (#39571) @sai6855@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @chiahao, @danilo-leal, @hasdfa, @megos, @michaldudak, @mj12albert, @oliviertassinari, @sai6855, @samuelsycamore, @ZeeshanTamboli
Oct 31, 2023
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]MenuList demo (#39459) @sai6855multiple options (#39454) @sai6855@mui/[email protected]@mui/styles docs and discourage users from installing it (#39644) @samuelsycamorecolor="black" from Next.js App Router layout (#39577) @samuelsycamore@types/loader-utils package from zero-next-plugin (#39609) @ZeeshanTamboliAll contributors of this release in alphabetical order: @alexfauquette, @Best-Sardar, @DanailH, @danilo-leal, @DiegoAndai, @emamoah, @gitstart, @Janpot, @jcoyle37, @mj12albert, @mnajdova, @Nkzn, @oliviertassinari, @Popppins, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli
Oct 24, 2023
A big thanks to the 17 contributors who made this release possible.
@mui/[email protected]fullWidth to toggleButtonClasses and toggleButtonGroupClasses (#39536) @Semigradsky@mui/[email protected]@mui/[email protected]@mui/[email protected]userSelect: none only when it's a button (#39486) @mwskwong@mui/[email protected]@pigment-css/[email protected]@mui/[email protected]useCallback by useRef in useEventCallback (#39078) @romgrkAll contributors of this release in alphabetical order: @alexfauquette, @Best-Sardar, @brijeshb42, @danilo-leal, @DiegoAndai, @Evan151, @gitstart, @hjalti-lifekeys, @mj12albert, @mnajdova, @mwskwong, @oliviertassinari, @romgrk, @Semigradsky, @siriwatknp, @VadimZvf, @zanivan
Oct 17, 2023
A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨: This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]renderSurplus prop (#39283) @uuxxxTheme interface when applied directly (#39404) @Semigradskytype parameter of getItemAriaLabel prop (#39390) @Simer13@mui/[email protected]@mui/[email protected]@mui/[email protected]marker prop (#39313) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]kbd tag styles (#39397) @danilo-lealAll contributors of this release in alphabetical order: @adrienbrault, @alexfauquette, @Best-Sardar, @BreakBB, @brijeshb42, @chhawinder, @christophermorin, @codewithrabeeh, @danilo-leal, @DarhkVoyd, @devuser200, @michaldudak, @mnajdova, @oliviertassinari, @parikshitadhikari, @samuelsycamore, @Semigradsky, @Simer13, @siriwatknp, @TheNatkat, @uuxxx, @vineetjk, @zanivan, @ZeeshanTamboli
Oct 10, 2023
A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
styled-components v6 (#39042) @mnajdova@mui/[email protected]styleOverrides Popper type in theme (#39154) @axelbostrom@mui/[email protected]@mui/[email protected]@mui/[email protected]type=button to clear button (#39263) @brijeshb42@mui/[email protected]styled-components v6 (#39042) @mnajdovaerror prop from input validation demo (#39280) @sai6855sx prop callback (#39259) @3xp10it3rAll contributors of this release in alphabetical order: @3xp10it3r, @alexfauquette, @ARJ2160, @atharva3333, @axelbostrom, @Bestwebdesign, @brijeshb42, @chirag3003, @danilo-leal, @DarhkVoyd, @DiegoAndai, @gugudwt, @mbrookes, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @ValkonX33, @ZeeshanTamboli
Oct 3, 2023
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]button type (#39189) @sai6855@mui/[email protected]variants in the styled() util (#39073) @mnajdova@mui/[email protected]@mui/[email protected]@mui/[email protected]gap property (#39147) @siriwatknpGlobalStyles (#39278) @siriwatknpAutocomplete github label demo to actual github label dropdown (#39228) @sai6855Box with Stack in applicable demos (#39174) @sai6855All contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @DanailH, @danilo-leal, @DiegoAndai, @Erik-McKelvey, @Janpot, @mj12albert, @mnajdova, @oliviertassinari, @romgrk, @sai6855, @Semigradsky, @siriwatknp, @xulingzhihou, @zanivan, @ZeeshanTamboli
Sep 26, 2023
A big thanks to the 23 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]AutocompleteValue to make it available from path import (#38638) @vadimka123@mui/[email protected]isMuiElement util (#38129) @sai6855@mui/[email protected]@mui/[email protected]JoyDrawer in theme components (#39074) @Studio384@mui/[email protected]@mui/[email protected]use-count-up integration with the Circular Progress (#38952) @anon-phantomuseEnhancedEffect (#39035) @JanpotAll contributors of this release in alphabetical order: @alexfauquette, @alisasanib, @anle9650, @anon-phantom, @DanailH, @danilo-leal, @DiegoAndai, @flaviendelangle, @gitstart, @Janpot, @jergason, @maheshguntur, @michaldudak, @mikailaread, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @Studio384, @tebersefa, @vadimka123, @zanivan, @ZeeshanTamboli
Sep 18, 2023
A big thanks to the 16 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@mui/[email protected]@mui/[email protected]useControlled (#38757) @sai6855@mui/[email protected]TablePagination to the API components list (#38486) @MonstraGAll contributors of this release in alphabetical order: @alisasanib, @brijeshb42, @danilo-leal, @DarhkVoyd, @DiegoAndai, @Janpot, @mateuseap, @Methuselah96, @michaldudak, @mj12albert, @mnajdova, @MonstraG, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli
Sep 13, 2023
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
Drawer component to Joy UI (#38169) @mnajdovaButtonGroup component now styles button elements within it correctly (#38520) @ZeeshanTamboli@mui/[email protected]@mui/[email protected]disableEnforceFocus behavior (#38816) @mnajdova@mui/[email protected]DialogActions, DialogTitle and DialogContent (#38382) @siriwatknpvariant and color classes (#38814) @sai6855@mui/[email protected]@mui/x-tree-view dependency (#38822) @flaviendelangle@mui/[email protected]@mui/[email protected]Typography props (#38856) @sai6855All contributors of this release in alphabetical order: @brentertz, @brijeshb42, @danilo-leal, @DiegoAndai, @dvkam, @flaviendelangle, @Janpot, @LadyBluenotes, @michaldudak, @michelengelen, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli
Sep 5, 2023
A big thanks to the 25 contributors who made this release possible.
@mui/[email protected]Slider InputLabel InputBase Radio (#38401) @sai6855ref type (#38717) @ZeeshanTamboli@mui/[email protected]@mui/[email protected]ratio prop description (#38743) @sai6855@mui/[email protected]@mui/[email protected]mergeBreakpointsInOrder function (#38749) @imevancoverlay prop demo (#38702) @danilo-leal[core] Re-add nx and setup build caching (#38752) @brijeshb42
[core] Remove dead code seoTitle @oliviertassinari
[core] Use immutable refs (#38762) @oliviertassinari
[core] Rework typescript-to-proptypes to share the AST parsing with parseStyles (#38517) @flaviendelangle
[core] Fix CI @oliviertassinari
[core] Remove unnecessary @types/webpack package (#38720) @ZeeshanTamboli
[core] Remove duplicate prop @oliviertassinari
[docs-infra] Fix mobile display in CodeSandbox (#38767) @oliviertassinari
[docs-infra] Remove legacy GA (#37579) @alexfauquette
[docs-infra] Fix emotion :first-child console log (#38690) @oliviertassinari
[docs-infra] Fix leaking callout content (#38712) @danilo-leal
[docs-infra] Remove emoji from callouts (#38694) @danilo-leal
All contributors of this release in alphabetical order: @alexfauquette, @alisasanib, @amal-qb, @anle9650, @anon-phantom, @bharatkashyap, @brijeshb42, @christophermorin, @danilo-leal, @flaviendelangle, @imevanc, @jyash97, @mbrookes, @michaldudak, @mj12albert, @oliviertassinari, @omriklein, @pcorpet, @rajgop1, @ruflair, @sai6855, @siriwatknp, @szalonna, @zanivan, @ZeeshanTamboli
Aug 29, 2023
A big thanks to the 11 contributors who made this release possible. This release focuses primarily on 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
@mui/[email protected]disabled (#38611) @mj12albert@mui/[email protected]@pigment-css/[email protected]loading prop documentation (#38625) @sai6855key prop JSDoc description in Snackbar component code correctly (#38603) @jaydenseric@types/jsdom (#38657) @renovate[bot]All contributors of this release in alphabetical order: @brijeshb42, @danilo-leal, @DerTimonius, @DiegoAndai, @Janpot, @jaydenseric, @mj12albert, @oliviertassinari, @renovate[bot], @sai6855, @VishruthR
Aug 23, 2023
A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
material-next (#38319) @DiegoAndai @mj12albert@mui/[email protected]root class to SelectClasses (#38424) @sai6855@mui/[email protected]@mui/[email protected]required prop (#38167) @siriwatknp@mui/[email protected]@pigment-css/[email protected]fullWidth prop description for the Input (#38545) @0xturneronClose API docs (#38273) @johnmatthiggins@material-ui/ aliases from regression test webpack config (#38574) @ZeeshanTamboliAll contributors of this release in alphabetical order: @0xturner, @alexfauquette, @alisasanib, @brijeshb42, @codersjj, @cristianmacedo, @danilo-leal, @DiegoAndai, @GresilleSiffle, @homerchen19, @johnmatthiggins, @michaldudak, @mj12albert, @mnajdova, @mwskwong, @oliviertassinari, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli
Aug 14, 2023
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
prepareForSlot utility (#38138)@mui/[email protected]onClick on root element (#38072) @LukasTy@mui/[email protected]@mui/[email protected]FormHelperText icon color (#38387) @TheNatkatkeepMounted prop (#38293) @decadef20@mui/[email protected]useModal hook (#38187) @mnajdovaprepareForSlot util (#38138) @mnajdovaFileUpload demo (#38420) @sai6855aria-labels in extended variant examples of Floating Action Button (#37170) @ashleykolodziejAll contributors of this release in alphabetical order: @alexfauquette, @ashleykolodziej, @danilo-leal, @decadef20, @DiegoAndai, @flaviendelangle, @LukasTy, @michaldudak, @mj12albert, @mnajdova, @nithins1, @oliviertassinari, @richbustos, @sai6855, @samuelsycamore, @TheNatkat, @zanivan
Aug 8, 2023
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]component from TypeMap (#38168)" (#38356) @michaldudak@mui/[email protected][base] Ban default exports (#38200) @michaldudak
Base UI default exports were changed to named ones. Previously we had a mix of default and named ones. This was changed to improve consistency and avoid problems some bundlers have with default exports. See https://github.com/mui/material-ui/issues/21862 for more context.
- import Button, { buttonClasses } from '@mui/base/Button';
+ import { Button, buttonClasses } from '@mui/base/Button';
- import BaseMenu from '@mui/base/Menu';
+ import { Menu as BaseMenu } from '@mui/base/Menu';
Additionally, the ClassNameGenerator has been moved to the directory matching its name:
- import ClassNameGenerator from '@mui/base/className';
+ import { ClassNameGenerator } from '@mui/base/ClassNameGenerator';
A codemod is provided to help with the migration:
npx @mui/codemod@latest v5.0.0/base-use-named-exports <path>
@mui/[email protected]MenuButton (#38342) @sai6855[docs][AppBar] Fix ResponsiveAppBar demo logo href (#38346) @iownthegame
[docs][base] Add Tailwind CSS + plain CSS demo on the Button page (#38240) @alisasanib
[docs][Menu][base] Remove Unstyled prefix from demos' function names (#38270) @sai6855
[docs] Add themeable component guide (#37908) @siriwatknp
[docs] Fix Joy UI demo background color (#38307) @oliviertassinari
[docs] Update API docs for Number Input component (#38301) @ZeeshanTamboli
[docs][joy-ui] Revise the theme typography page (#38285) @danilo-leal
[docs][joy-ui] Add TS demo for Menu Bar (#38308) @sai6855
[docs][joy-ui] Updated Typography callout at getting started (#38289) @zanivan
[docs][joy-ui] Fix the Inter font installation instructions (#38284) @danilo-leal
[docs][material] Add note to Autocomplete about ref forwarding (#38305) @samuelsycamore
[docs][Skeleton] Make the demos feel more realistic (#38212) @oliviertassinari
[examples] Swap Next.js examples between App Router and Pages Router; update naming convention (#38204) @samuelsycamore
[examples][material-ui] Add Material UI + Next.js (App Router) example in JS (#38323) @samuelsycamore
[blog] Discord announcement blog (#38258) @richbustos
[blog] Fix 301 links to Toolpad @oliviertassinari
async keyword from test (#38373) @ZeeshanTamboliAll contributors of this release in alphabetical order: @alisasanib, @cherniavskii, @DanailH, @danilo-leal, @iownthegame, @michaldudak, @mj12albert, @mnajdova, @noraleonte, @oliviertassinari, @richbustos, @sai6855, @samuelsycamore, @siriwatknp, @VishruthR, @yash-thakur, @zanivan, @ZeeshanTamboli
Jul 31, 2023
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
material-next (#37850) @DiegoAndai@mui/[email protected]getOptionLabel prop in ownerState (#38100) @DSK9012component field to *Props types (#38084) @michaldudak@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]component from TypeMap (#38168) @michaldudakloading prop documentation (#38156) @sai6855Required utility type from Typography font style type (#38203) @ZeeshanTamboliAll contributors of this release in alphabetical order: @cherniavskii, @DiegoAndai, @divyammadhok, @DSK9012, @flaviendelangle, @gitstart, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @prakhargupta1, @richbustos, @rluzists1, @sai6855, @siriwatknp, @zanivan, @ZeeshanTamboli
Jul 25, 2023
A big thanks to the 23 contributors who made this release possible.
component prop to OverrideProps type (#35924)" (#38150) @michaldudakJoy- prefix with Mui- (#38086) @siriwatknpAll contributors of this release in alphabetical order: @alexfauquette, @Bestwebdesign, @bharatkashyap, @danilo-leal, @DiegoAndai, @harikrishnanp, @IgnacioUtrilla, @mbrookes, @michaldudak, @mj12albert, @mnajdova, @nikohoffren, @oliviertassinari, @onderonur, @prakhargupta1, @richbustos, @sai6855, @SaidMarar, @samuelsycamore, @siriwatknp, @Studio384, @zanivan, @ZeeshanTamboli
Jul 19, 2023
A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]labelPlacement is provided (#37831) @ZeeshanTamboliBackdropComponent and BackdropProps from tests (#38018) @sai6855@mui/[email protected]@mui/[email protected]@mui/[email protected]ToggleButton component (#37716) @siriwatknpSkeleton component (#37893) @siriwatknp@mui/[email protected]useEventCallback (#37827) @cherniavskiicomponent prop to OverrideProps type (#35924) @sai6855@types/node to v18 (#37965) @ZeeshanTamboliAll contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @cherniavskii, @DanailH, @danilo-leal, @DiegoAndai, @divyammadhok, @ericbrian, @Janpot, @joserodolfofreitas, @Methuselah96, @michaldudak, @mj12albert, @mnajdova, @officialrajdeepsingh, @oliviertassinari, @OmPr366, @OndrejHj04, @prakhargupta1, @sai6855, @samuelsycamore, @siriwatknp, @zanivan, @ZeeshanTamboli
Jul 11, 2023
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]"use client" (#37894) @mj12albertvariant and color defaults for the playground (#37817) @Studio384undefined as an option to stripe (#37816) @Studio384marked deprecation warning (#37769) @alexfauquetteAll contributors of this release in alphabetical order: @alexfauquette, @cherniavskii, @danilo-leal, @DiegoAndai, @enrique-ramirez, @gitstart, @LukasTy, @MaybePixem, @mj12albert, @mnajdova, @nicolas-ot, @oliviertassinari, @samuelsycamore, @siriwatknp, @Studio384
Jul 4, 2023
A big thanks to the 21 contributors who made this release possible. This release focuses primarily on 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
@mui/[email protected]ownerState (#37668) @vonagam@mui/[email protected]<style> children (#34966) @cmd-johnson@mui/[email protected]@mui/[email protected]Menu usage demo (#37797) @sai6855@mui/[email protected]disableSwap={true} (#35998) @sai6855@mui/[email protected]alternate-reverse generated classname (#37678) @ZeeshanTamboliAll contributors of this release in alphabetical order: @AdamSundberg, @alexfauquette, @bigteech, @cherniavskii, @cmd-johnson, @DanailH, @danilo-leal, @Dlouxgit, @gateremark, @Janpot, @michaldudak, @mnajdova, @MUK-Dev, @oliviertassinari, @sai6855, @saikathalderr, @siriwatknp, @vonagam, @zanivan, @ZeeshanTamboli, @zephyrus21
Jun 21, 2023
A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]svg as a child (#37231) @siriwatknpslotProps (#37550) @SuperKXTclearTimeout() (#37512) @romgrk@mui/[email protected]@mui/[email protected]CardActions component (#37441) @siriwatknpMenu in demos (#36917) @sai6855@mui/[email protected]areOptionsEqual prop (#37615) @michaldudak@mui/[email protected]test-dev CI (#37604) @ZeeshanTamboliAll contributors of this release in alphabetical order: @abhinavkmrru, @alexfauquette, @bencevoros, @cherniavskii, @danilo-leal, @DiegoAndai, @DIWAKARKASHYAP, @flaviendelangle, @gitstart, @hbjORbj, @ivp-dev, @Janpot, @michaldudak, @mnajdova, @oliviertassinari, @Primajin, @PunitSoniME, @richbustos, @romgrk, @sai6855, @sernstberger, @siriwatknp, @SuperKXT, @vinayr, @ZeeshanTamboli
Jun 12, 2023
A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
ButtonGroup component in Joy UI (#37407) @siriwatknp.@mui/[email protected]@mui/[email protected]detached prop with spacing. (#37562) @siriwatknpButtonGroup component (#37407) @siriwatknp:focus-within and add examples (#37385) @siriwatknpAll contributors of this release in alphabetical order: @brijeshb42, @cherniavskii, @DanailH, @DiegoAndai, @musama619, @oliviertassinari, @sernstberger, @siriwatknp, @ZeeshanTamboli
Jun 5, 2023
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]focusVisible class in AutocompleteClasses (#37502) @sai6855steps is one (#37079) @gitstart@mui/[email protected]@mui/[email protected]alt when src or srcSet are not defined (#37469) @vishalthatipamula0219component prop in docs (#37462) @sai6855examples packages updates (#37386) @ZeeshanTamboliAll contributors of this release in alphabetical order: @brijeshb42, @danielplewes, @danilo-leal, @DiegoAndai, @gitstart, @MBilalShafi, @mj12albert, @oliviertassinari, @sai6855, @siriwatknp, @vishalthatipamula0219, @ZeeshanTamboli
May 29, 2023
A big thanks to the 15 contributors who made this release possible. This release focuses primarily on 🐛 bug fixes and 📚 documentation improvements.
className from BackdropProps (#37399) @hbjORbj@mui/[email protected]@mui/[email protected]slots element type in API docs (#37329) @zignisAll contributors of this release in alphabetical order: @akash191095, @brijeshb42, @canac, @DavidCnoops, @gitstart, @hbjORbj, @JhonnK08, @LukasTy, @michaldudak, @necatiozmen, @nicolas-ot, @oliviertassinari, @sai6855, @ZeeshanTamboli, @zignis
May 22, 2023
A big thanks to the 12 contributors who made this release possible. 📚 This release focuses primarily on documentation improvements.
@babel/plugin-proposal-class-properties from Material-Express-SSR example (#37305) @ZeeshanTamboliAll contributors of this release in alphabetical order: @alexfauquette, @brijeshb42, @cherniavskii, @danilo-leal, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @PunitSoniME, @sai6855, @TinaSay, @ZeeshanTamboli
May 16, 2023
A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]filterOptions prop in Autocomplete's API docs (#37230) @ZeeshanTambolitest_static CI doc in CONTRIBUTING readme file (#36711) @kriskw1999alpha() to beta() in README (#37228) @ZeeshanTambolitoEqualDateTime chai matcher (#37073) @flaviendelangleAll contributors of this release in alphabetical order: @Bastian, @binh1298, @cccEric, @cherniavskii, @DerTimonius, @DiegoAndai, @flaviendelangle, @hbjORbj, @jguddas, @kkocdko, @kriskw1999, @mauwaz, @michaldudak, @mnajdova, @nickiaconis, @nicolas-ot, @oliviertassinari, @PunitSoniME, @richbustos, @safeamiiir, @sai6855, @siriwatknp, @uuxxx, @zanivan, @ZeeshanTamboli
May 10, 2023
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]ChipComponent type (#37112) @sai6855@mui/[email protected]@mui/[email protected]optionStringifier prop (#37118) @michaldudakTextField customization using theme style overrides (#36805) @ZeeshanTambolie2e-website related minor fixes (#37204) @ZeeshanTamboliAll contributors of this release in alphabetical order: @akash191095, @DanailH, @danilo-leal, @DerTimonius, @gerdadesign, @hbjORbj, @kriskw1999, @michaldudak, @mnajdova, @oliviertassinari, @PunitSoniME, @romgrk, @sai6855, @ulrichstark, @uuxxx, @wewakekumar, @ZeeshanTamboli, @zignis
May 2, 2023
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]component type (#37111) @sai6855text (#36967) @DavidBoyer11@mui/[email protected]@mui/[email protected]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@latest 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:
component prop (#36677) @mnajdovacomponent prop (#37028) @hbjORbj[base] Improve API consistency (#36970) @michaldudak
Brought consistency to Base UI components and hooks' parameters and return values:
<slot_name>Ref, which matches the get<slot_name>Props in the return value.React.RefCallback as using the more general React.Ref caused variance issues.React.Ref<Element>back to top (#37011) @PunitSoniMEuseFormControl return values from demos page (#37036) @ZeeshanTamboliSwitchUnstyled (#36720) @varunmulay22InputUnstyled (#36724) @varunmulay22SliderUnstyled (#36721) @varunmulay22Snackbar (#36719) @varunmulay22SelectUnstyled (#36718) @varunmulay22All 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
Apr 25, 2023
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
Unstyled suffix has been removed from Base UI component names, including names of types and other related identifiers – a codemod script is provided to assist with the change.@mui/[email protected]filled when value is set through inputProps (#36741) @sai6855onChange handler should be called only when value has changed (#36706) @gitstartSorting & Selecting tables (#36898) @oliviertassinari@mui/[email protected][base] Remove unstyled suffix from Base components + Codemod script (#36873) @hbjORbj
The Unstyled suffix has been removed from all Base UI component names, including names of types and other related identifiers.
You can use this codemod to help with the migration:
npx @mui/codemod@latest v5.0.0/base-remove-unstyled-suffix <path>
component prop codemod script (#36952) @hbjORbjcomponent prop from components (#36831) @hbjORbj@mui/[email protected]invertedColors to Menu and Alert (#36975) @siriwatknpmaster (#37016) @hbjORbjAll contributors of this release in alphabetical order: @alexfauquette, @cherniavskii, @danilo-leal, @gitstart, @hbjORbj, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @PupoSDC, @sai6855, @siriwatknp, @TakhyunKim, @tomaskebrle
Apr 17, 2023
A big thanks to the 16 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]required prop (#34207) @emlaiinputTypeSearch class for outlined and filled inputs (#36740) @sai6855@mui/[email protected][Grid2] Replace context with cloneElement (#36399) @siriwatknp
Grid2 now uses React.cloneElement instead of React context for passing the spacing and columns to the next container. The change is close to how CSS flexbox behaves.
css object (#36853) @siriwatknp@mui/[email protected]MenuUnstyledContext is replaced by MenuProvider. The value to pass to the provider is returned by the useMenu hook.onClose prop is replaced by onOpenChange. It has the open parameter and is called when a menu is opened or closedSelectUnstyledContext is replaced by SelectProvider. The value to pass to the provider is returned by the useSelect hook.SelectUnstyled's popup is permanently mounted.defaultOpen prop was added to the SelectUnstyled. The open/close state can now be controlled or uncontrolled, as a value.TabsContext is replaced by TabsProvider. The value to pass to the provider is returned by the useTabs hook.null to Tabs' value prop, instead of false. This is consistent with how Select works.value prop is still technically not mandatory on TabUnstyled and TabPanel, but when omitted, the contents of the selected tab panel will not be rendered during SSR.@mui/[email protected]*-child to *-of-type (#36839) @keyvanmBadgeUnstyled (#36723) @varunmulay22Parameters section of the API docs (#36773) @ZeeshanTamboliModalUnstyled (#36580) @gitstartTabs (#36577) @gitstartPopper (#36578) @gitstartTablePagination (#36593) @gitstartcomponent, slots, slotProps must be visible in Prop table in API docs (#36666) @hbjORbjAll contributors of this release in alphabetical order: @emlai, @flaviendelangle, @gitstart, @hbjORbj, @jesrodri, @keyvanm, @michaldudak, @mj12albert, @navedqb, @oliviertassinari, @rkdrnf, @sai6855, @samuelsycamore, @siriwatknp, @varunmulay22, @ZeeshanTamboli
Apr 11, 2023
A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]ownerState with ownerState from props (#36599) @hbjORbj@mui/[email protected]slots/slotsProps for every component (components with only root slot too) (#36540) @hbjORbjreadOnly state class in the list (#36788) @ZeeshanTamboliSliderUnstyled slots key name (#36830) @sai6855All contributors of this release in alphabetical order: @alirezahekmati, @danilo-leal, @hbjORbj, @Lioness100, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli
Apr 4, 2023
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]ownerState to enable overriding styles with it in theme (#36422) @gitstart@mui/[email protected]@mui/[email protected]ModalOverflow component (#36262) @siriwatknpCheckbox custom color prop type warning (#36691) @amal-qbuseFormControlUnstyledContext hook (#36302) @HeVictorFormControl (#36579) @gitstartMenu (#36582) @gitstartButton demos (#36590) @sai6855All contributors of this release in alphabetical order: @alexfauquette, @amal-qb, @danilo-leal, @DevinCLane, @gitstart, @hbjORbj, @HeVictor, @LadyBluenotes, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @RBerthier, @sai6855, @siriwatknp, @viclafouch, @yushanwebdev
Mar 28, 2023
A big thanks to the 10 contributors who made this release possible. We have one big highlight this week ✨:
@mui/[email protected]@mui/[email protected]useFlexGap prop (#36404) @siriwatknp@mui/[email protected]autoSelect prop description (#36280) @sai6855actions type in slotProps (#36458) @sai6855@mui/[email protected]theme.applyDarkStyles for the rest of the docs" (#36602) @mnajdovaSnackbar coming soon page (#36604) @danilo-lealtheme.applyDarkStyles (#36606) @siriwatknpSorting & Selecting table demo (#33236) @IFaniryAll contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @hbjORbj, @IFaniry, @joserodolfofreitas, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @varunmulay22
Mar 21, 2023
A big thanks to the 15 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]BreadcrumbCollapsed through slots (#33812) @pratikkarad@mui/[email protected]@mui/[email protected]@mui/[email protected]--List-decorator* vars (#36595) @siriwatknp@mui/[email protected]theme.applyDarkStyles for the rest of the docs (#36161) @siriwatknpshouldSkipGeneratingVar usage (#36581) @siriwatknpAll contributors of this release in alphabetical order: @danilo-leal, @dav1app, @gabrielnafuzi, @hbjORbj, @HediMuhamad, @michalak111, @mikailaread, @mnajdova, @oliviertassinari, @pratikkarad, @RomanHotsiy, @sai6855, @siriwatknp, @varunmulay22, @zaverden
Mar 14, 2023
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]shouldSkipGeneratingVar from Material UI (#36489) @siriwatknp@mui/[email protected]All contributors of this release in alphabetical order: @erikian, @hbjORbj, @HeVictor, @hrutik7, @joserodolfofreitas, @m4theushw, @michaldudak, @oliviertassinari, @oyar99, @rayrw, @sai6855, @siriwatknp, @skevprog
Mar 6, 2023
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
extendTheme so that it can generate CSS variables with default values. This means that the CssVarsProvider is no longer required for Joy UI when using the default theme (#35739)@mui/[email protected]Mui-expanded class (#33312) @Osman-Sodefaid prop provided to the DialogTitle component (#36353) @Kundan28@mui/[email protected]@mui/[email protected][core] Generate vars in extendTheme (#35739) @mnajdova
The shouldSkipGeneratingVar prop was moved from the createCssVarsProvider's option to the theme. If the default theme does not use extendTheme from Material UI or Joy UI, it needs to be wrapped inside unstable_createCssVarsTheme - a util exported from the MUI System. Below is an example of how the migration should look like:
import {
unstable_createCssVarsProvider as createCssVarsProvider,
+ unstable_createCssVarsTheme as createCssVarsTheme,
} from '@mui/system';
const { CssVarsProvider } = createCssVarsProvider({
- theme: {
+ theme: createCssVarsTheme({
colorSchemes: {
light: {
typography: {
htmlFontSize: '16px',
h1: {
fontSize: '1rem',
fontWeight: 500,
},
},
},
},
+ shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
- },
+ }),
defaultColorScheme: 'light',
- shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1',
});
Or you can define it directly in the theme prop:
<CssVarsProvider
+ theme={createCssVarsProvider({
+ // other theme keys
+ shouldSkipGeneratingVar: (keys) => keys[0] === 'typography' && keys[1] === 'h1'
+ })} />
This breaking change only affects experimental APIs
@mui/[email protected][Select][base] Add the multiselect functionality to SelectUnstyled (#36274) @michaldudak
The MultiSelectUnstyled was removed. The SelectUnstyled component with the multiple prop should be used instead. Additionally, the SelectUnstyledProps received a second generic parameter: Multiple extends boolean. If you deal with strictly single- or multi-select components, you can hard-code this parameter to false or true, respectively. Below is an example of how the migration should look like:
-import MultiSelectUnstyled from '@mui/base/MultiSelectUnstyled';
+import SelectUnstyled from '@mui/base/SelectUnstyled';
export default App() {
-return <MultiSelectUnstyled />
+return <SelectUnstyled multiple />
}
import type syntax (#36411) @ZeeshanTamboli@mui/[email protected][Joy] Change CSS variables naming for components (#36282) @hbjORbj
Joy UI has new naming standards of the CSS variables for its components. Below is an example of how the migration should look like:
-<List sx={{ py: 'var(--List-divider-gap)' }}>
+<List sx={{ py: 'var(--ListDivider-gap)' }}>
-<Switch sx={{ '--Switch-track-width': '40px' }}>
+<Switch sx={{ '--Switch-trackWidth': '40px' }}>
CssVarsProvider is required (#36410) @mnajdovaDivider (#36374) @sai6855buildApiUtils usage issues (#36310) @LukasTycombobox role queries in Autocomplete tests (#36394) @ZeeshanTamboliAll contributors of this release in alphabetical order: @cherniavskii, @hbjORbj, @joserodolfofreitas, @Kuba429, @Kundan28, @LukasTy, @MBilalShafi, @michaldudak, @mnajdova, @NoFr1ends, @oliviertassinari, @Osman-Sodefa, @Paatus, @sai6855, @SaidMarar, @varunmulay22, @ZeeshanTamboli
Feb 27, 2023
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]sx prop to ListboxProps type (#36243) @sai6855readOnly prop (#32822) @jrparishdata-focusvisible attribute (#36091) @ZeeshanTamboliuseSnackbar hook (#36272) @ZeeshanTamboli@mui/[email protected][base] Remove classes prop from the Base components that have it (#36157) @hbjORbj
These are the components affected by this change: ModalUnstyled, SliderUnstyled, TablePaginationUnstyled and TablePaginationActionsUnstyled.
You can replace the classes prop by providing the class name prop directly to the prop via slotProps. Below is an example of how the migration should look like:
<TablePaginationUnstyled
- classes={{ toolbar: 'toolbar-classname', menuItem: 'menuItem-classname' }}
+ slotProps={{ toolbar: { className: 'toolbar-classname' }, menuItem: { className: 'menuItem-classname'}}}
/>
[base] Move hooks to their own directories (#36235) @hbjORbj
Base hooks (e.g., useSelect) are no longer exported from {Component}Unstyled directories and instead they have their own directories.
Below is an example of how the migration should look like:
-import { useBadge } from '@mui/base/BadgeUnstyled';
+import useBadge from '@mui/base/useBadge';
You can use this codemod to help with the migration.
@mui/[email protected]@mui/[email protected]ListDivider to change semantic based on List (#36266) @siriwatknp:first-child (#36263) @siriwatknpmaterial-ui-nextjs-ts-v4-v5-migration example README (#36321) @ZeeshanTambolireadOnly state class (#36357) @ZeeshanTamboliAll contributors of this release in alphabetical order: @hbjORbj, @HeVictor, @ivp-dev, @jrparish, @Juneezee, @LukasTy, @MBilalShafi, @michaldudak, @mnajdova, @oliviertassinari, @ossan-engineer, @sai6855, @siriwatknp, @Vivek-Prajapatii, @ZeeshanTamboli
Feb 20, 2023
A big thanks to the 11 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]BadgeUnstyled with useBadge hook (#36158) @hbjORbjtype isn't checkbox or radio (#36170) @dani-mp@mui/[email protected]zIndex to theme (#36236) @siriwatknpDisabled tree items section in Tree View docs (#36217) @PunitSoniMEAnatomy section (#36210) @ZeeshanTamboliAll contributors of this release in alphabetical order: @Aleff13, @dani-mp, @danilo-leal, @hbjORbj, @mj12albert, @oliviertassinari, @PunitSoniME, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Feb 14, 2023
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]slotProps per slot (#35964) @hbjORbjuseAutocomplete disabled prop not disabling the input (#36076) @sai6855@mui/[email protected]md as a CSS var prefix (#36177) @siriwatknpv6-alpha to v6-next in navigation (#36102) @LukasTytests/utils/index.js to TypeScript (#35382) @flaviendelangleAll contributors of this release in alphabetical order: @danilo-leal, @donaldnevermore, @flaviendelangle, @hbjORbj, @LadyBluenotes, @LukasTy, @m4theushw, @michaldudak, @mj12albert, @mnajdova, @oliv37, @oliviertassinari, @petyosi, @rangoo94, @sai6855, @Shorifpatwary, @siriwatknp
Feb 7, 2023
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
Sign In template to Joy UI (#36019)@mui/[email protected]FormLabelOwnProps from FormLabel to fix type error (#36057) @yoskeoka@mui/[email protected]Table export from root (#36010) @sai6855@mui/[email protected]@mui/[email protected]document is available (#36001) @m4theushwcustomizing theme tokens (#36067) @badalsaiboAutocompleteProps type (#36039) @ArthurPedrotiAll contributors of this release in alphabetical order: @alexownejazayeri, @ArthurPedroti, @badalsaibo, @chuanyu0201, @joserodolfofreitas, @m4theushw, @michaldudak, @mj12albert, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @yoskeoka, @ZeeshanTamboli
Jan 31, 2023
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
Table component to Joy UI (#35872)@mui/[email protected]unstable_sxConfig variables (#35932) @siriwatknpcomponent type (#35852) @sai6855@mui/[email protected]@mui/[email protected][Joy] Replace Joy[Component] classname with Mui[Component] classname for all slots of components (#35718) @hbjORbj
'Joy' to 'Mui'. <Button
-sx={{ '& .JoyButton-root': { '& .JoyButton-button': {} } }}
+sx={{ '& .MuiButton-root': { '& .MuiButton-button': {} } }}
/>
You can use this codemod to help with the migration.
[Joy] Replace row prop with orientation prop in all Joy UI components (#35721) @hbjORbj
row prop to orientation prop across Card, List and RadioGroup components in Joy UI. <Card
-row
+orientation={"horizontal"}
/>
You can use this codemod to help with the migration.
Table component (#35872) @siriwatknpdefaultMode changes (#35937) @ArthurPedrotiUsing icon libraries page (#35989) @badalsaiboConfigure the sx prop page in dark mode (#35961) @ZeeshanTambolifalse in API docs (#35913) @hbjORbjAll contributors of this release in alphabetical order: @ArthurPedroti, @badalsaibo, @gorjiali, @hbjORbj, @HeVictor, @idebeijer, @joserodolfofreitas, @marktoman, @oliviertassinari, @sai6855, @SaidMarar, @samuelsycamore, @siriwatknp, @Vivek-Prajapatii, @ZeeshanTamboli
Jan 23, 2023
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
SliderUnstyled (#35805)@mui/[email protected]@mui/[email protected][SliderUnstyled] Improved logic for displaying the value label (#35805) @ZeeshanTamboli
valueLabelDisplay prop is removed from SliderUnstyled. The prop was not working as intended in SliderUnstyled (See #35398). You can instead provide a valueLabel slot with the slots prop API to show the value label:- <SliderUnstyled valueLabelDisplay="on" />
+ <SliderUnstyled slots={{ valueLabel: SliderValueLabel }} />
The following demo shows how to show a value label when it is hovered over with the thumb: https://v6.mui.com/base-ui/react-slider/#value-label
sliderUnstyledClasses since they are not needed for the value label:- valueLabel
- valueLabelOpen
- valueLabelCircle
- valueLabelLabel
In the custom value label component, you can define your own classNames and target them with CSS.
The SliderValueLabelUnstyled component is removed from SliderUnstyled. You should provide your own custom component for the value label.
To avoid using React.cloneElement API in value label, the component hierarchy structure of the value label is changed. The value label is now inside the Thumb slot - Thumb -> Input, ValueLabel.
inputRef is ignored (#35807) @sai6855@mui/[email protected]imgProps prop and add Codemod script for migration (#35859) @hbjORbjColor page (#35873) @oliv37docs-utilities migration to TypeScript and fix type (#35881) @ZeeshanTambolidocs-utilities package to TypeScript (#35846) @ZeeshanTamboliAll contributors of this release in alphabetical order: @HeVictor, @hbjORbj, @joserodolfofreitas, @mj12albert, @mnajdova, @oliv37, @oliviertassinari, @petyosi, @rosita-dmello, @sai6855, @SaidMarar, @tech-meppem, @ZeeshanTamboli
Jan 17, 2023
A big thanks to the 17 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]strictNullChecks is false (#35367) @fenghan34SliderUnstyled with useSlider hook (#35770) @ZeeshanTamboli@mui/[email protected]createBox types (#35532) @mnajdova@mui/[email protected]joy-text-field-to-input codemod (#35462) @hbjORbj@mui/[email protected]@mui/[email protected]:hover, :active styles when selected (#35750) @sai6855TextField component and replace its usage in docs with FormControl/FormLabel/Input (#35462) @hbjORbjmui-x usage (#35740) @LukasTyTypography docs (#35796) @atrefonasnext-env.d.ts from Next.js examples (#35772) @JuneezeeAll contributors of this release in alphabetical order: @alexfauquette, @atrefonas, @fenghan34, @hbjORbj, @HeVictor, @Juneezee, @LukasTy, @mnajdova, @msoyka, @nnmax, @oliviertassinari, @pupudu, @sai6855, @samuelsycamore, @siriwatknp, @volhalink, @ZeeshanTamboli
Jan 9, 2023
A big thanks to the 14 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]useAutocomplete (#35723) @hamirmahalrenderValue prop's TypeScript type (#34177)" (#35733) @michaldudakTab is hidden, not the whole Tabs (#34026) @Ryczkodata-foo attribute (#35736) @koolskateguy89@mui/[email protected]type attribute for popup indicator (#35648) @hbjORbjonKeyDown event handler for demo (#35642) @hbjORbj@mui/[email protected]MenuItem to list all valid props (#35561) @mnajdovaVite.js with TypeScript example (#35683) @miha53cevicAll contributors of this release in alphabetical order: @CowDotDev, @flaviendelangle, @hamirmahal, @hbjORbj, @koolskateguy89, @michaldudak, @miha53cevic, @mnajdova, @oliviertassinari, @Ryczko, @sai6855, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Jan 2, 2023
A big thanks to the 6 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]renderValue prop's TypeScript type (#34177) @ZeeshanTamboli@mui/[email protected]Input component (#35482) @hbjORbjAll contributors of this release in alphabetical order: @badalsaibo, @hbjORbj, @mbranch, @oliviertassinari, @rjhcnf, @ZeeshanTamboli
Dec 26, 2022
A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]faIR locale (#35587) @hootan-rockyscope prop to be not set when a data cell is rendered within a table head (#35559) @sai6855@mui/[email protected]mergedeep deeply clones source key if it's an object (#35364) @sldk-yuri@mui/[email protected]isRtl from Material UI's Slider props (#35564) @michaldudak@mui/[email protected]@mui/[email protected]sortStability() use case (#35570) @frontendlanelight theme mode when activePage is null (#35575) @LukasTyProgress docs (#35553) @jasonsturgesStack component (#35373) @hbjORbjGrid component (#35374) @hbjORbjAll contributors of this release in alphabetical order: @boutahlilsoufiane, @danhuynhdev, @danilo-leal, @EduardoSCosta, @ekusiadadus, @frontendlane, @hbjORbj, @hootan-rocky, @JagarYousef, @jasonsturges, @leventdeniz, @LukasTy, @michaldudak, @MickaelAustoni, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @sldk-yuri, @trizotti
Dec 20, 2022
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]size prop overrides via TypeScript module augmentation (#35460) @MickaelAustoniexperimental_sx back with error code (#35528) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]Select component onChange event type in the migration guide (#35509) @tzynwangProviding the colors directly section (#35507) @cassidooCardMedia example without component="img" prop (#35470) @lucasmfredmarkunstable_sxConfig typo (#35478) @siriwatknpAll contributors of this release in alphabetical order: @42tte, @cassidoo, @danilo-leal, @DimaAbr, @lucasmfredmark, @michaldudak, @MickaelAustoni, @Miigaarino, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @sydneyjodon-wk, @talgautb, @tzynwang
Dec 13, 2022
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
sx prop in the theme (#35150)@mui/[email protected]MenuProps.PopoverClasses being overriden (#35394) @vitorfrs-dev@mui/[email protected]@mui/[email protected][system] Enable configuring the sx prop in the theme (#35150) @mnajdova
The breaking change is regarding an experimental API:
-import { styled, experimental_sx } from '@mui/material/styles';
+import { styled } from '@mui/material/styles';
-const Component = styled('div)(experimental_sx({ p: 1 }});
+const Component = styled('div)(({ theme }) => theme.unstable_sx({ p: 1 }});
@mui/[email protected]@mui/[email protected]@mui/[email protected]Responsive App bar with Drawer demo (#35418) @ZeeshanTamboliToggleButtonSizes demo (#35375) @ArmanioAll contributors of this release in alphabetical order: @alexfauquette, @Armanio, @danilo-leal, @EduardoSCosta, @flaviendelangle, @jesrodri, @joserodolfofreitas, @kraftware, @michaldudak, @mnajdova, @oliviertassinari, @PratikDev, @samuelsycamore, @siriwatknp, @Spanishiwa, @timbset, @tsollbach, @vitorfrs-dev, @ZeeshanTamboli
Dec 6, 2022
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
components / componentProps to slots / slotProps prop in Joy UI to create consistency across products (#34997)@mui/[email protected]markActive theme class not getting applied (#35067) @ZeeshanTambolilabelEmptyValueActive style overrides from theme (#35315) @sai6855@mui/[email protected]@mui/[email protected][Joy] Add slots/slotProps props to the typing of all components and apply useSlot to all components (#34997) @hbjORbj
components and componentsProps props in Joy UI components to slots and slotProps, respectively.-<Autocomplete components={{listbox: CustomListbox}} componentsProps={{listbox: { className: 'custom-listbox' }}} />
+<Autocomplete slots={{listbox: CustomListbox}} slotProps={{listbox: { className: 'custom-listbox' }}} />
You can use this codemod to help with the migration.
All contributors of this release in alphabetical order: @flaviendelangle, @guotie, @happyincent, @hbjORbj, @Juneezee, @michaldudak, @mnajdova, @nomandhoni-cs, @oliviertassinari, @Pandey-utkarsh, @sai6855, @samuelsycamore, @siriwatknp, @Uzwername, @zignis
Nov 28, 2022
A big thanks to the 13 contributors who made this release possible. This release contains various 🐛 bug fixes, 📚 documentation, and ⚙️ infrastructure improvements.
@mui/[email protected]multiple prop is true (#35275) @fenghan34skipFocusWhenDisabled prop to not allow focussing deletable chip if disabled (#35065) @sai6855useFormControl (#35168) @ZeeshanTamboli@mui/[email protected]@mui/[email protected]describeConformance to TypeScript (#35193) @flaviendelangleAll contributors of this release in alphabetical order: @58bits, @alexfauquette, @fenghan34, @flaviendelangle, @iamxukai, @leventdeniz, @m4theushw, @michaldudak, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli, @Zetta56
Nov 21, 2022
A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]background.defaultChannel to CssVarsPalette (#35174) @alexfauquette@mui/[email protected]@mui/[email protected]@mui/[email protected]error prop works in the Unstyled Input (#35171) @michaldudakAll contributors of this release in alphabetical order: @alexfauquette, @danilo-leal, @iamxukai, @Janpot, @MBilalShafi, @michaldudak, @oliviertassinari, @samuelsycamore, @siriwatknp
Nov 14, 2022
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]palette.background.defaultChannel token (#35061) @siriwatknp@mui/[email protected]@mui/[email protected]FormControl, LinearProgress and ListSubheader components from @mui/joy (#35003) @Studio384Autocomplete component (#34315) @siriwatknpMarkdownElement regression from adding CSS variables (#35096) @siriwatknpAll contributors of this release in alphabetical order: @alexfauquette, @bharatkashyap, @cherniavskii, @danilo-leal, @hbjORbj, @Janpot, @kennethbigler, @kushagra010, @michaldudak, @mnajdova, @ofir5300, @oliviertassinari, @sai6855, @sfavello, @sidtohan, @siriwatknp, @Studio384
Nov 7, 2022
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @akshaya-venkatesh8, @alexfauquette, @hbjORbj, @Janpot, @jesrodri, @michaldudak, @oliviertassinari, @PetroSilenius, @samuelsycamore, @shivam1646, @siriwatknp, @trizotti
Oct 31, 2022
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]value changes (#34897) @hbjORbjLinearProgress component (#34514) @hbjORbjAll contributors of this release in alphabetical order: @cherniavskii, @DanailH, @EduardoSCosta, @emlai, @hbjORbj, @Janpot, @michaldudak, @mnajdova, @oliviertassinari, @punithnayak, @PunitSoniME, @renovate[bot], @RoodyCode, @samuelsycamore, @siriwatknp, @VinceCYLiao
Oct 25, 2022
A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
components to slots prop starting at Base UI to create consistency across products@mui/[email protected]onInvalid to use HTMLInputElement | HTMLTextAreaElement Element type (#33162) @KuShcomponents and componentsProps props to allow close action overrides (#33582) @jake-collibra@mui/[email protected][base] components -> slots API rename (#34693) @michaldudak
-<SwitchUnstyled components={{Root: CustomRoot}} componentsProps={{rail: { className: 'custom-rail' }}} />
+<SwitchUnstyled slots={{root: CustomRoot}} slotProps={{rail: { className: 'custom-rail' }}} />
[base] Make CSS class prefixes consistent (#33411) @michaldudak
This is a breaking change for anyone who depends on the class names applied to Base components.
If you use the <component>UnstyledClasses objects, you won't notice a difference. Only if you depend on the resulting class names (for example in CSS stylesheets), you'll have to adjust your code.
-.ButtonUnstyled-root { ... };
+.MuiButton-root { ... };
@mui/[email protected]size prop in components (#34805) @hbjORbjAll contributors of this release in alphabetical order: @bharatkashyap, @hbjORbj, @jake-collibra, @joserodolfofreitas, @KuSh, @marceliwac, @michaldudak, @oliviertassinari, @pixelass, @siriwatknp
Oct 18, 2022
A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]defaultProps overridable (#34643) @hbjORbj@mui/[email protected]grey color in sx (#34548) @TheUnlocked@mui/[email protected]@mui/[email protected]@mui/[email protected]react/no-unstable-nested-components (#34518) @eps1lonAll contributors of this release in alphabetical order: @AbayKinayat, @alexfauquette, @bharatkashyap, @DanailH, @eps1lon, @hayawata3626, @hbjORbj, @Janpot, @joserodolfofreitas, @m4theushw, @mbayucot, @michaldudak, @mohd-akram, @ndresx, @oliviertassinari, @pedroprado010, @rvrvrv, @samuelsycamore, @siriwatknp, @TheUnlocked, @zee-bit
Oct 10, 2022
A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected][system] Fix color-scheme implementation (#34639) @siriwatknp
The enableColorScheme prop has been removed from CssVarsProvider and getInitColorScheme (both Material UI and Joy UI).
Migration:
<CssBaseline enableColorScheme />.<CssBaseline />, see the docs.@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @HexM7, @joserodolfofreitas, @kushagra010, @michaldudak, @mnajdova, @oliviertassinari, @vanyaxk
Oct 3, 2022
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]disabled class to FAB button (#34245) @meenaramaownerState on the paper slot (#34445) @kabernardes@mui/[email protected]useSnackbar hook (#33227) @ZeeshanTamboli@mui/[email protected]variantPlain classname missing in few components (#34534) @hbjORbjnewFeature to the typing of MuiPage (#34511) @flaviendelangleAll contributors of this release in alphabetical order: @Aporim2051, @Dustin-Digitar, @flaviendelangle, @Garz4, @hbjORbj, @hghmn, @kabernardes, @kskd1804, @meenarama, @minkyngkm, @mnajdova, @ndebeiss, @oliviertassinari, @peippo, @rolule, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Sep 26, 2022
A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]:root stylesheet (#34131) @siriwatknpalternativeLabel is used (#34335) @ZeeshanTambolititle (#34289) @abhinav-22-tech@mui/[email protected]shape.borderRadius in theme (#34076) @ZeeshanTambolienableSystem with defaultMode (#33960) @siriwatknp@mui/[email protected]@mui/[email protected][FocusTrap] Rename TrapFocus to FocusTrap (#34216) @kabernardes
-import TrapFocus from '@mui/base/TrapFocus';
+import FocusTrap from '@mui/base/FocusTrap';
@mui/[email protected]value, required, and readOnly to input (#34477) @siriwatknponClick prop (#34455) @HexM7Divider component (#34403) @siriwatknpreadOnly and required to input (#34478) @siriwatknpuseMenu and useMenuItem hooks demo (#34166) @ZeeshanTamboliGrid docs (#34475) @Dustin-DigitarBack to top section in AppBar docs (#34479) @Dustin-Digitarwebpack.config.js (#34446) @CodingItWrongonChange call (#34408) @siriwatknpAll contributors of this release in alphabetical order: @abhinav-22-tech, @alexfauquette, @CodingItWrong, @Dustin-Digitar, @garronej, @HexM7, @howlettt, @Janpot, @joserodolfofreitas, @kabernardes, @MBilalShafi, @Methuselah96, @michaldudak, @mnajdova, @oliviertassinari, @prakhargupta1, @pratikkarad, @ptrfrncsmrph, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Sep 19, 2022
A big thanks to the 11 contributors who made this release possible. This release was mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]Bootstrap even when label is not defined (#34343) @ZeeshanTamboli@mui/[email protected][button][joy] Replace start/endIcon prop with start/endDecorator (#34288) @hbjORbj
BREAKING CHANGE: replace start/endIcon with start/endDecorator.
// before
<Button startIcon={...} endIcon={...} />
// after
<Button startDecorator={...} endDecorator={...} />
Input and Textarea styles (#34281) @siriwatknp@mui/[email protected][Select][base] Add event parameter to the onChange callback (#34158) @michaldudak
The SelectUnstyled and MultiSelectUnstyled onChange callbacks did not have event as the first parameter, leading to inconsistency with other components and native HTML elements.
This PR adds the event parameter as the first one and moves the newly selected value to the second position. Because of this, it's a breaking change.
This also affects Select from Joy UI.
// before
<SelectUnstyled onChange={(newValue) => { /* ... */ }} />
// after
<SelectUnstyled onChange={(event, newValue) => { /* ... */ }} />
typescript-to-proptypes, respect the value pass to the generic (#34311) @flaviendelangleAll contributors of this release in alphabetical order: @alexfauquette, @flaviendelangle, @hbjORbj, @Janpot, @michaldudak, @oliviertassinari, @renovate[bot], @samuelsycamore, @siriwatknp, @tomasz-sodzawiczny, @ZeeshanTamboli
Sep 12, 2022
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
Alert, Modal, ListSubheader, FormControl, CircularProgress components to Joy UI (#33859) @hbjORbj @siriwatknp@mui/[email protected]primaryTypography (#33880) @iamxukai@mui/[email protected]CircularProgress component (#33869) @hbjORbjFormControl component (#34187) @siriwatknpListSubheader component (#34191) @siriwatknpModal component (#34043) @siriwatknptextarea props from componentsProps (#34223) @HexM7Usage docs (#34200) @zillion504All contributors of this release in alphabetical order: @bytasv, @ChrystianDeMatos, @hbjORbj, @HexM7, @iamxukai, @kushagra010, @LukasTy, @michaldudak, @oliviertassinari, @siriwatknp, @ZeeshanTamboli, @zillion504
Sep 5, 2022
A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
Alert component to Joy UI (#33859) @hbjORbj@mui/[email protected]@mui/[email protected]Alert component (#33859) @hbjORbjcomponentsProps generic (#34140) @hbjORbjBreadcrumbs component (#33860) @hbjORbjcomponent prop (#34172) @siriwatknp@mui/[email protected]mui-color-input, mui-chips-input and mui-tel-input into the related projects page (#34123) @viclafouchtypes field to packages without index.d.ts (#33952) @michaldudakmousePress function (#34124) @cherniavskiiAll contributors of this release in alphabetical order: @cherniavskii, @DanailH, @hbjORbj, @Janpot, @michaldudak, @oliviertassinari, @paulschreiber, @ropereraLK, @samuelsycamore, @siriwatknp, @viclafouch
Aug 29, 2022
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]disableClearable is used (#34053) @mnajdova@mui/[email protected]@mui/[email protected]@mui/[email protected]role proptypes (#34119) @siriwatknpcomponentsProps for all components (#34077) @siriwatknpcomponentsProps as a function (#34022) @siriwatknpTextarea component (#33975) @siriwatknpSelect component (#34091) @HexM7OverridableComponent via module augmentation for better performance (#32735) @mnajdovaAll contributors of this release in alphabetical order: @alexfauquette, @bharatkashyap, @bicstone, @danilo-leal, @EthanStandel, @HexM7, @hoangph271, @JonathanAsbury-SPS, @michaldudak, @mnajdova, @NaveenPantra, @oliviertassinari, @pieetrus, @renovate[bot], @siriwatknp, @ZeeshanTamboli
Aug 22, 2022
A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]keepMounted Popper prop not working (#33957) @ZeeshanTamboli@mui/[email protected]@mui/[email protected]@mui/[email protected]test folder's README (#33976) @ropereraLKgetInitialProps with getStaticProps" (#33991) @mnajdovaAll contributors of this release in alphabetical order: @AjeetSingh2016, @alirezahekmati, @Cerebro92, @danilo-leal, @djohalo2, @jsakas, @michaldudak, @mnajdova, @oliviertassinari, @ropereraLK, @samuelsycamore, @TheUnlocked, @tomasz-sodzawiczny, @ZeeshanTamboli
Aug 15, 2022
A big thanks to the 18 contributors who made this release possible. This release was mostly around 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@mui/[email protected]ContainerProps export (#33923) @bugzpodder@mui/[email protected]@mui/[email protected]Link component (#32839) @TKrishnasamyAspectRatio docs (#33895) @IsaacInsoll/system/getting-started/advanced/ does not exist (#33867) @MonstraGAll contributors of this release in alphabetical order: @arjunvijayanathakurup, @bugzpodder, @cherewaty, @cherniavskii, @cmdcolin, @danilo-leal, @EthanStandel, @hayawata3626, @IsaacInsoll, @l10nbot, @michaldudak, @mmostafavi, @MonstraG, @oliviertassinari, @PunitSoniME, @samuelsycamore, @TKrishnasamy, @ZeeshanTamboli
Aug 8, 2022
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]RegularBreakpoints to fix type error (#33751) @ZeeshanTambolirounded variant (#33687) @siriwatknp@mui/[email protected]sx (#33752) @siriwatknpStack component (#33760) @mnajdova@mui/[email protected]Breadcrumbs component (#32697) @hbjORbjsize prop (#33862) @hbjORbjBasics section in Trap Focus docs (#33772) @ZeeshanTamboliNextLinkComposedProps type error (#33842) @adham618All contributors of this release in alphabetical order: @adham618, @brentertz, @cherniavskii, @Dsalazar1685, @hbjORbj, @iamxukai, @joserodolfofreitas, @michaldudak, @mnajdova, @oliviertassinari, @pawelsmigielski, @pratikkarad, @PunitSoniME, @siriwatknp, @TimoWilhelm, @ZeeshanTamboli
Aug 1, 2022
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]filled variant (#33587) @hbjORbjcolumnSpacing and rowSpacing props ignore higher breakpoints with 0 (#33480) @ZeeshanTamboli@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]Sorting & selecting Table demo (#33674) @mracetteusePagination (#33675) @fullstackzachstyled API vs sx prop docs (#33665) @ZeeshanTambolitheme.vars is used in createTheme() and mention this in the theming docs (#33619) @hbjORbjgetInitialProps with getStaticProps (#33684) @mnajdovaAll contributors of this release in alphabetical order: @cherniavskii, @danilo-leal, @fullstackzach, @garronej, @hbjORbj, @husseinsaad98, @joserodolfofreitas, @michaldudak, @mnajdova, @MonstraG, @mracette, @oliviertassinari, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Jul 25, 2022
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
OverridableComponent (#33506) @michaldudakStack component (#33548, #33588, #33549) @hbjORbj@mui/[email protected]flexDirection value with responsive prop (#33549) @hbjORbjmarginundefined doesn't occur in styling (#33548) @hbjORbjindicatorColor prop type (#33569) @ZeeshanTamboli@mui/[email protected]component overridable (#33573) @siriwatknp@mui/[email protected]palette.background.paper in dark mode docs (#33611) @ZeeshanTamboliCssBaseline import in example code (#33614) @dd-sscplacement choices typo in Tooltip docs (#33571) @MonstraGthenify to latest (#33612) @siriwatknpview option from Event in Snackbar tests (#33555) @ZeeshanTamboliAll contributors of this release in alphabetical order: @AHeiming, @bairamau, @bharatkashyap, @bytasv, @danilo-leal, @dd-ssc, @DinhBaoTran, @gerdadesign, @hbjORbj, @joserodolfofreitas, @michaldudak, @MonstraG, @oliviertassinari, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Jul 18, 2022
A big thanks to the 17 contributors who made this release possible. This release is mainly about 🐛 bug fixes and 📚 documentation improvements
@mui/[email protected]event.touches are an empty array (#32974) @lukeggchapman@mui/[email protected]createEmptyBreakpointObject method (#33482) @ZeeshanTamboli@mui/[email protected]@mui/[email protected]useTheme documentation (#33508) @rickstaainsertionPoint (#32104) @ANTARES-KORAll contributors of this release in alphabetical order: @abhinav-22-tech, @ajhenry, @ANTARES-KOR, @anthonypz, @aravindpanicker, @GabrielaLokelani, @HexM7, @lolaignatova, @lukeggchapman, @michaldudak, @mzedel, @Nikhilthadani, @oliviertassinari, @paustria, @rickstaa, @siriwatknp, @ZeeshanTamboli
Jul 12, 2022
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
Unstable_Grid2 (#33479) @siriwatknp@mui/[email protected]clsx wrapper for single className (#33398) @ZeeshanTamboliTheme (#33434) @siriwatknp@mui/[email protected]Grid implementation (#32746) @siriwatknp@mui/[email protected]⚠️ Breaking changes
[lab] Remove the pickers (#33386) @flaviendelangle
The pickers are moved to MUI X, check out the migration guide.
Changes
@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @baharalidurrani, @cherniavskii, @danilo-leal, @davidgarciab, @flaviendelangle, @hbjORbj, @ivan-ngchakming, @Janpot, @jgbae, @joebingham-wk, @joserodolfofreitas, @michaldudak, @mnajdova, @oliviertassinari, @omeraplak, @robyyo, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
Jul 4, 2022
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]useAutocomplete (#33269) @henriqueholtzcomponentsProps to include popper and popupIndicator slots (#33283) @jake-collibra@mui/[email protected]@mui/[email protected]CssVarsProvider (#33381) @siriwatknp@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @aaarichter, @aaronlademann-wf, @danilo-leal, @henriqueholtz, @jake-collibra, @joshkel, @MattiasMartens, @Methuselah96, @michaldudak, @oliviertassinari, @siriwatknp, @TimoWilhelm, @xlianghang
Jun 27, 2022
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/material@mui/[email protected][Alert] Add support for CSS vars (#32624) @haneenmahd
[Alert] Use getContrastText for filled variant font color (#29813) @SamoraMabuya
Note: The color of the text in the warning contained Alert in dark mode was changed to black in order to improve the color contrast ratio
[OutlinedInput] Fix ownerState undefined in theme style overrides (#33241) @siriwatknp
[Tabs] Fix crash when used with React 18 & Suspense (#33277) @mnajdova
[TypeScript] Add CSS vars type augmentation for Material UI (#33211) @siriwatknp
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]Sheet doc (#32820) @hbjORbjcomponentsProps.root taking precedence (#33097) @ZeeshanTamboliAll contributors of this release in alphabetical order: @davidgarciab, @Fafruch, @haneenmahd, @hbjORbj, @howlettt, @jacobweberbowery, @michaldudak, @mnajdova, @oliviertassinari, @SamoraMabuya, @siriwatknp, @WinmezzZ, @ZeeshanTamboli
Jun 20, 2022
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
Avatar component and the SpeedDialAction component respectively by @vicasas and @gin1314@mui/[email protected]maxWidth is set to false (#32987) @kmurgic@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @cherniavskii, @DanailH, @gin1314, @Harmouch101, @Janpot, @joserodolfofreitas, @kmurgic, @michaldudak, @mnajdova, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @vicasas
Jun 14, 2022
A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
Grid component by @boutahlilsoufiane@mui/[email protected]ButtonClasses type (#33040) @ZeeshanTamboligetOffsetTop & getOffsetLeft from Popover's index and add typings (#32959) @rartRTL direction specific logic (#32808) @aaarichter@mui/[email protected]@mui/[email protected]@mui/styles/makeStyles imports (#32962) @joshkel@mui/[email protected]forwardRef warning when importing from the index (#33134) @mnajdova@mui/[email protected]@mui/[email protected]Base UI docs (#33091) @ZeeshanTamboliInputUnstyled docs (#33077) @ZeeshanTamboliAll contributors of this release in alphabetical order: @aaarichter, @alansouzati, @boutahlilsoufiane, @cherniavskii, @danilo-leal, @dvlprAlamin, @frankkluijtmans, @igordanchenko, @Janpot, @joshkel, @Kai-W, @KeaghanKennedy, @l-zoy, @michaldudak, @mkrtchian, @mnajdova, @Moizsohail, @oliviertassinari, @pushys, @rart, @siriwatknp, @tech-meppem, @winderica, @ZeeshanTamboli
Jun 7, 2022
A big thanks to the 15 contributors who made this release possible. This release is mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]Slider component and demos (#32694) @hbjORbj@mui/[email protected]BadgeUnstyled docs (#32976) @ZeeshanTamboliAll contributors of this release in alphabetical order: @abhinav-22-tech, @DanailH, @danilo-leal, @flaviendelangle, @haneenmahd, @hbjORbj, @Janpot, @kevinji, @mbrookes, @michaldudak, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @ZeeshanTamboli
May 30, 2022
A big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]getColorSchemeSelector util (#32868) @siriwatknp@mui/[email protected]column prop (#32873) @hbjORbj@mui/[email protected]@mui/[email protected]textColor prop for Typography and Link (#32938) @siriwatknpChip doc (#32819) @hbjORbjAspectRatio demos (#32848) @siriwatknpsize prop for InputLabel (#32936) @romelperezAll contributors of this release in alphabetical order: @aaarichter, @hbjORbj, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @romelperez, @siriwatknp
May 23, 2022
A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]ownerState on the action slot (#32801) @mnajdovacolor prop type extendable (#31830) @paales@mui/[email protected]borderRadius errors when used inside CssVarsProvider (#32817) @mnajdova@mui/[email protected]peerDependencies (#32623) @nate-summercook@mui/[email protected]disabledSwap not being respected in onChangeCommitted (#32647) @JeanPetrov@mui/[email protected]link-underline-hover codemod (#32793) @veronikaslcuseAutocomplete demos to use Mui-focused class (#32757) @ZeeshanTamboliNextLinkComposedProps gives a TypeScript error (#32655) @ZeeshanTamboliMixins (#32798) @mnajdovaAll contributors of this release in alphabetical order: @abriginets, @alexfauquette, @alisasanib, @apedroferreira, @danilo-leal, @diggis00, @flaviendelangle, @garronej, @JeanPetrov, @mbrookes, @mnajdova, @nate-summercook, @o-dubrovskyi, @oliviertassinari, @paales, @robertwt7, @SamuelMaddox, @siriwatknp, @veronikaslc, @VibhorJaiswal, @ZeeshanTamboli
May 17, 2022
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
jss to tss-react migration is out thanks to @ryancogswell@mui/[email protected]getInputProps TypeScript return type (#32730) @ZeeshanTamboli@mui/[email protected]Container component and createContainer factory (#32263) @mnajdova@mui/[email protected]@mui/[email protected]@mui/[email protected]MuiPage interface to separate file (#32715) @cherniavskiispacing parameter from createMixins method (#32690) @ZeeshanTamboliAll contributors of this release in alphabetical order: @andrii-bodnar, @cherniavskii, @danilo-leal, @emlai, @joserodolfofreitas, @michaldudak, @mnajdova, @MrHBS, @oliviertassinari, @ryancogswell, @samuelsycamore, @shadigaafar, @siriwatknp, @ZeeshanTamboli
May 10, 2022
A big thanks to the 27 contributors who made this release possible. Here are some highlights ✨:
🛠 This release is all about supporting CSS variables in many Material UI components. Kudos to all contributors!
@mui/[email protected]endAdornment only when necessary (#32386) @g1eny0ung@mui/[email protected]@mui/[email protected]@mui/[email protected]ListItemButton in ListItem in the Drawer examples (#31987) @stefanprobstimport '<library name>' in demonstrations (#32492) @alexfauquettedocs:dev not working after upgrading next to 12.1.0 (#32552) @cherniavskiiAll contributors of this release in alphabetical order: @alexfauquette, @alisasanib, @ameetmadan, @Ariyapong, @cherniavskii, @dan-mba, @danilo-leal, @elliefoote, @flaviendelangle, @g1eny0ung, @gin1314, @haneenmahd, @ivan-ngchakming, @Jamaalwbrown, @jcvidiri, @michaldudak, @mikepricedev, @mnajdova, @nghiamvt, @oliviertassinari, @pzi, @samuelsycamore, @siriwatknp, @stefanprobst, @vicasas, @vladjerca, @ZeeshanTamboli
May 2, 2022
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]color (#32258) @hbjORbjTabIndicatorProps prop missing sx prop (#32503) @b-novikov-ipersonality@mui/[email protected]@mui/[email protected]extendSxProp to Link (#32505) @siriwatknpextendTheme (#32450) @siriwatknpOverriding nested component styles anchor link with text (#32487) @ZeeshanTamboliBasic Popper demo on the Base UI docs (#32488) @ZeeshanTamboliAll contributors of this release in alphabetical order: @b-novikov-ipersonality, @flaviendelangle, @hbjORbj, @HexM7, @m4theushw, @Martin005, @mongolyy, @oliviertassinari, @ryancogswell, @samuelsycamore, @siriwatknp, @vicasas, @ZeeshanTamboli
Apr 25, 2022
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
fill CSS property is used in MUI System (#32355) @valerii15298@mui/[email protected]padding fix (#32030) @abhinav-22-techcomponent prop is not available in DialogTitleProps (#32389) @hbjORbjTransitionComponent prop (#32314) @ZeeshanTamboli@mui/[email protected]fill CSS property is used (#32355) @valerii15298zero (#32365) @ZeeshanTamboli@mui/[email protected]multiline property should not log DOM warnings for maxRows and minRows props (#32401) @ZeeshanTamboli@mui/[email protected]Radio, RadioGroup components (#32279) @siriwatknpChip component (#31983) @hbjORbjFormControlLabelPlacement (#32322) @ainatenhiyarn prettier write @oliviertassinariAll contributors of this release in alphabetical order: @abhinav-22-tech, @ainatenhi, @DanailH, @danilo-leal, @dwjohnston, @flaviendelangle, @hbjORbj, @mnajdova, @oliviertassinari, @praveen001, @samuelsycamore, @siriwatknp, @valerii15298, @ZeeshanTamboli
Apr 18, 2022
A big thanks to the 11 contributors who made this release possible. This release is mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]Badge component (#31401) @hbjORbjInput (#32268) @siriwatknparia-label for IconButton (#32276) @SiarheiBobrykborderRadius in the docs example (#32347) @ZeeshanTambolionBackdropClick prop as deprecated in Dialog, Modal and ModalUnstyled components (#32297) @ZeeshanTamboliAll contributors of this release in alphabetical order: @abaker93, @cherniavskii, @danilo-leal, @hbjORbj, @igordanchenko, @michaldudak, @mnajdova, @oliviertassinari, @samuelsycamore, @SiarheiBobryk, @sirartemis, @siriwatknp, @ZeeshanTamboli
Apr 11, 2022
A big thanks to the 8 contributors who made this release possible. This release is mostly about 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]@mui/[email protected]ahrefs report (#32206) @siriwatknpAll contributors of this release in alphabetical order: @danilo-leal, @DouglasPds, @igordanchenko, @l10nbot, @michaldudak, @oliviertassinari, @samuelsycamore, @siriwatknp
Apr 5, 2022
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
CssVarsProvider in @mui/material for generating theme CSS variables (#31138) @mnajdova@mui/[email protected]sx color to support callback (#32123) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]Card components (#32027) @siriwatknpAll contributors of this release in alphabetical order: @apeltop, @eps1lon, @flaviendelangle, @garronej, @ivan-ngchakming, @m4theushw, @MatthijsMud, @michaldudak, @mnajdova, @oliviertassinari, @psjishnu, @raigoinabox, @samuelsycamore, @siriwatknp, @TkaczykAdam
Mar 28, 2022
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected][base] Remove BackdropUnstyled component (#31923) @mnajdova
The BackdropUnstyled component was removed from the @mui/base package, as it did not have any specific logic, except adding an aria-hidden attribute on the div it rendered. This is not enough to justify it's existence in the base package. Here is an example alternative component you can use:
const BackdropUnstyled = React.forwardRef<HTMLDivElement, { open?: boolean; className: string }>(
(props, ref) => {
const { open, className, ...other } = props;
return <div className={clsx({ 'MuiBackdrop-open': open }, className)} ref={ref} {...other} />;
},
);
[FocusTrap] Move docs to Base and drop the Unstyled prefix (#31954) @michaldudak
Removed the Unstyled_ prefix from the Base export (it remains in the Material UI export, though).
-import { Unstyled_TrapFocus } from '@mui/base';
+import { TrapFocus } from '@mui/base';
// or
-import TrapFocus from '@mui/base/Unstyled_TrapFocus';
+import TrapFocus from '@mui/base/TrapFocus';
@mui/[email protected]AvatarGroup component (#31980) @siriwatknpSplitButton demo (#31969) @mnajdovastyled() utility page (#31967) @jason1985LiveReload (#31269) @eswarclynnStandardProps and polymorphic components (#31945) @mnajdovaAll contributors of this release in alphabetical order: @bicstone, @CommanderRoot, @dimitropoulos, @eps1lon, @eswarclynn, @igordanchenko, @jannes-io, @jason1985, @m4theushw, @michaldudak, @mnajdova, @NickFoden, @oliviertassinari, @ryancogswell, @santhoshbala0178, @siriwatknp, @WilsonNet
Mar 21, 2022
A big thanks to the 7 contributors who made this release possible. This is a small release focused on some 🐛 bug fixes and 📚 documentation improvements.
@mui/[email protected]sx prop (#31833) @ivan-ngchakming@mui/[email protected]Input and ListItemButton (#31826) @siriwatknp@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @hbjORbj, @ivan-ngchakming, @michaldudak, @mnajdova, @nnmax, @oliviertassinari, @siriwatknp
Mar 14, 2022
A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
Switch examples (#31359) @siriwatknpTextField component (#31299) @siriwatknp--Icon-fontSize to components (#31360) @siriwatknpCheckbox component (#31273) @siriwatknpAll contributors of this release in alphabetical order: @aaarichter, @aaronadamsCA, @B0und, @badalsaibo, @boutahlilsoufiane, @danilo-leal, @hafley66, @hbjORbj, @issamElmohadeb098, @jontewks, @juanpc10, @klyburke, @krysia1, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @PunitSoniME, @reckter, @SalvatoreMazzullo, @samuelsycamore, @siriwatknp, @theCuriousOne
Mar 7, 2022
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
Autocomplete conform to ARIA 1.2 combobox (#30601) @EdmundMai@mui/[email protected][ClassNameGenerator] Prevent all base imports (#31297) @siriwatknp
unstable_ClassNameGenerator has been moved from utils to className folder to prevent all Base UI module imports. If you use the module, please update the import as suggested in the diff below:
-import { unstable_ClassNameGenerator } from '@mui/material/utils';
+import { unstable_ClassNameGenerator } from '@mui/material/className';
OutlinedInputProps by SelectProps (#31209) @jrozbicki@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]fontSize adaptable to its parent (#31268) @siriwatknpLink component (#31175) @hbjORbjSheet tests (#31241) @hbjORbj@mui/[email protected]@types/node to Next.js TypeScript starter (#30918) @Daggy1234All contributors of this release in alphabetical order: @Daggy1234, @danilo-leal, @EdmundMai, @eps1lon, @hbjORbj, @Janpot, @jrozbicki, @m14d3n, @michaldudak, @mnajdova, @nnecec, @oliviertassinari, @PunitSoniME, @simonecervini, @siriwatknp, @sjdemartini
Feb 28, 2022
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
Input and Sheet components were added in the experimental Joy design system by @hbjORbj (#31124, #31086) @hbjORbj@mui/[email protected]@mui/[email protected]CssVarsProvider theme mutation (#31148) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]Switch (#31137) @siriwatknpSheet component (#31124) @hbjORbjInput component (#31086) @siriwatknpmaterial-ui for product name (#31200) @siriwatknpFormControl API documentation (#31169) @bonelliaAll contributors of this release in alphabetical order: @adriancampos, @Andarist, @bonellia, @davwheat, @greengiraffe, @hbjORbj, @iclaude3, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @PunitSoniME, @RedHeadphone, @robertwt7, @samuelsycamore, @siriwatknp, @sviande
Feb 21, 2022
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]List second iteration (#31134) @siriwatknpList components (#30987) @siriwatknpAll contributors of this release in alphabetical order: @alexfauquette, @cameliaben, @danilo-leal, @frab90, @gnowland, @hbjORbj, @huyenltnguyen, @Janpot, @Jastor11, @michaldudak, @oliviertassinari, @pppp606, @siriwatknp, @ThomasTheHuman
Feb 15, 2022
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]onClick and onChange (#30883) @sydneyjodon-wk@mui/[email protected]@mui/[email protected]@mui/[email protected]sx prop work in Joy (#30955) @siriwatknpshouldForwardProp option (#30978) @mnajdovaAll contributors of this release in alphabetical order: @agauravdev, @alisasanib, @DanailH, @danilo-leal, @huyenltnguyen, @l10nbot, @liradb2000, @mbrookes, @michaldudak, @mnajdova, @prakhargupta1, @oliviertassinari, @ryohey, @samuelsycamore, @siriwatknp, @sydneyjodon-wk
Feb 8, 2022
A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]onDismiss handler in MobileDatePicker (#30768) @Ashish2097@mui/[email protected]IconButton component (#30864) @siriwatknpTrapFocus (#30912) @flaviendelangleAll contributors of this release in alphabetical order: @alisasanib, @altruity, @Ashish2097, @caioagiani, @CFarhad, @cherniavskii, @danilo-leal, @eps1lon, @flaviendelangle, @garronej, @GneyHabub, @joeframbach, @johsunds, @kjschabra, @m4theushw, @michaldudak, @mihailgaberov, @mnajdova, @mogrady88, @oliviertassinari, @paales, @pppp606, @siriwatknp, @theiliad
Feb 1, 2022
A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected][core] Do not reexport Base from Material (#30853) @michaldudak
All Base components were exported from the @mui/material package and treated as stable even though the @mui/base package is in development. It could create a lot of confusion if developers start using Base components, depend on them, and demand quality found in "proper" Material components. We admit it was a mistake to reexport these components without marking them as unstable.
Developers are still encouraged to evaluate the Base components, but they should do so by explicitly installing the @mui/base package.
This is technically a breaking change as it removes a number of components from the @mui/material package. However, we believe that removing the components now and potentially breaking the codebases will do less harm than introducing "silent" breaking changes to Base components while continuing reexporting them from @mui/material.
Note: the utility components, such as ClickAwayListener, NoSsr, Portal, and TextareaAutosize continue to be exported from both @mui/material and @mui/base.
If you're encountering build errors after upgrading @mui/material, do the following:
-import ButtonUnstyled from '@mui/material/ButtonUnstyled';
+import ButtonUnstyled from '@mui/base/ButtonUnstyled';
readOnly prop (#30706) @ZeeshanTamboliEnter is pressed (#30795) @dryrainbow@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @aefox, @alisasanib, @atakanzen, @austinewuncler, @boutahlilsoufiane, @cherniavskii, @danilo-leal, @DiegoYungh, @dryrainbow, @eps1lon, @garronej, @goncalovf, @Hubbz, @Jack-Works, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @ryancogswell, @siriwatknp, @tanyabouman, @ZeeshanTamboli
Jan 24, 2022
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]ahrefs (#30751) @siriwatknpAll contributors of this release in alphabetical order: @aaneitchik, @alexfauquette, @chaosmirage, @ddecrulle, @Evomatic, @exequielbc, @michaldudak, @mnajdova, @MrHBS, @NoahYarian, @oliviertassinari, @siriwatknp
Jan 17, 2022
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]Paper component (#30515) @ZeeshanTamboli@mui/[email protected]textTransform prop should work directly on component (#30437) @hbjORbjstyleOverrides slot (#30524) @siriwatknp@mui/[email protected]@mui/[email protected]jscodeshift to remove colors dependency (#30578) @siriwatknp@mui/[email protected]@mui/[email protected]SvgIcon component (#30570) @hbjORbj@mui/[email protected]</p> from header of README.md (#30530) @yaboidocs:api script for Windows OS (#30533) @ZeeshanTamboliAll contributors of this release in alphabetical order: @alexfauquette, @alisasanib, @Atralbus, @cherniavskii, @danilo-leal, @eps1lon, @garronej, @glaucoheitor, @hbjORbj, @kkirsche, @mnajdova, @oliviertassinari, @siriwatknp, @VicHofs, @yaboi, @ZeeshanTamboli
Jan 10, 2022
A big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]pointer-events: none property (#30493) @hbjORbjinput slot to components and componentsProps (#30362) @alexandre-lelain@mui/[email protected]Typography component (#30489) @siriwatknpSwitch component (#30487) @siriwatknpcomponentsProps API docs and PropTypes (#30502) @ZeeshanTamboliAll contributors of this release in alphabetical order: @aefox, @alexandre-lelain, @danilo-leal, @eps1lon, @garronej, @hbjORbj, @noam-honig, @oliviertassinari, @siriwatknp, @ZeeshanTamboli
Jan 3, 2022
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]classes prop TypeScript type (#30427) @ZeeshanTamboliuseMediaQuery SSR example to v5 theme API (#30454) @ValentinHtss-react (#30388) @mnajdovaAll contributors of this release in alphabetical order: @abhi45, @ahmad-reza619, @alex-dikusar, @alisasanib, @boazrymland, @Certificate, @hckhanh, @l10nbot, @michaldudak, @mnajdova, @oliviertassinari, @siriwatknp, @ValentinH, @ZeeshanTamboli
Dec 27, 2021
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
useBadge hook in the @mui/base package (#30246) @mnajdova@mui/[email protected]@mui/[email protected]@mui/[email protected]buildApi script to support new structure (#30245) @siriwatknpAll contributors of this release in alphabetical order: @cherniavskii, @chwallen, @jamesmelzer, @Janpot, @kealjones-wk, @l10nbot, @mnajdova, @oliviertassinari, @pupudu, @ryota-murakami, @ShuPink, @siriwatknp, @wogsland, @ZeeshanTamboli
Dec 20, 2021
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]Partial<> type around TabIndicatorProps type (#30254) @ZeeshanTamboli@mui/[email protected]useEnhancedEffect to prevent flicker (#30216) @hbjORbj@mui/[email protected]anchorOrigin prop (#30147) @daniel-sachsAll contributors of this release in alphabetical order: @daniel-sachs, @danilo-leal, @eps1lon, @hbjORbj, @jamesmelzer, @Janpot, @KThompso, @lemol, @michaldudak, @mikk5829, @mnajdova, @oliviertassinari, @rejetto, @ShuPink, @siriwatknp, @ZeeshanTamboli
Dec 14, 2021
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
✨ Add not operator to theme.breakpoints (#29311) @Philipp000
const styles = (theme) => ({
root: {
backgroundColor: 'blue',
// Match [xs, md) and [md + 1, ∞)
// [xs, md) and [lg, ∞)
// [0px, 900px) and [1200px, ∞)
[theme.breakpoints.not('md')]: {
backgroundColor: 'red',
},
},
});
And many more 🐛 bug fixes and 📚 improvements.
@mui/[email protected]theme type (#30072) @mnajdovaOutlinedInput's label (#29630) @alisasanibThemeOptions (#30095) @fmeum@mui/[email protected]not operator to breakpoints (#29311) @Philipp000@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @alisasanib, @bryan-hunter, @danilo-leal, @eps1lon, @fmeum, @Janpot, @kkorach, @l10nbot, @ladygo93, @michaldudak, @mnajdova, @oliviertassinari, @Philipp000, @rvsia, @TheodosiouTh, @yaboi
Dec 6, 2021
A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨:
✨ We have introduced a new unstyled component in @mui/base: TablePagination (#29759) @mnajdova
<a href="https://mui.com/components/tables/#unstyled-table"></a>
You can follow our progress with unstyled components at https://github.com/mui/base-ui/issues/10.
🎉 We have added an example of how to use MUI with Remix (#29952) @mnajdova
And many more 🐛 bug fixes and 📚 improvements.
@mui/[email protected]square prop (#29972) @daniel-sachssquare Paper prop (#30027) @ZeeshanTambolispacing prop when the value is object (#29880) @jayeclarkmultiple enabled (#29957) @Domino987@mui/[email protected]createBox (#29989) @mnajdovasx prop when used as array (#29911) @tasugi@mui/[email protected]@mui-material/styles/cssUtils (#29621) @Semigradsky@mui/[email protected]@mui/[email protected]@mui/[email protected]DateRangePickerDayProps interface (#29067) @jonathanrtuckMonthPicker component's DOM element (#30021) @ZeeshanTamboli@mui/[email protected]@mui/styled-engine-sc does not work in SSR (#30026) @mnajdovaAll contributors of this release in alphabetical order: @chao813, @daniel-sachs, @danilo-leal, @Domino987, @eduardomcv, @flaviendelangle, @fourjr, @genzyy, @hbjORbj, @huydhoang, @jayeclark, @jonathanrtuck, @kkorach, @l10nbot, @mbrookes, @MichaelDeBoey, @michaldudak, @mnajdova, @oliviertassinari, @ronwarner, @Semigradsky, @siriwatknp, @tasugi, @ThewBear, @ZeeshanTamboli
Nov 29, 2021
A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
Snackbar and TextField in @mui/material (#29782) (#29850) (#29852) @eps1lon.sx syntax inside styled() utility (#29833) @mnajdova.createCssVarsProvider in @mui/system (#29845) (#29857) @hbjORbj.@mui/[email protected]@mui/[email protected]Button - 1st iteration (#29464) @siriwatknp@mui/[email protected]@mui/[email protected]html[style] when unmounting (#29946) @eps1londisableTransitionOnChange in createCssVarsProvider (#29857) @hbjORbjenableColorScheme in createCssVarsProvider (#29845) @hbjORbj@mui/[email protected]sx prop (#29905) @siriwatknpAll contributors of this release in alphabetical order: @danilo-leal, @eps1lon, @Harshikerfuffle, @hbjORbj, @mbrookes, @oliviertassinari, @radlinskii, @sinclairity, @siriwatknp
Nov 25, 2021
A big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
This is an early release to fix export 'useId' (imported as 'React') was not found in 'react' when bundling code depending on MUI Core.
experimental_sx utility (#29833) @mnajdovaAll contributors of this release in alphabetical order: @eps1lon, @karakib2k18, @kegi, @mbrookes, @mnajdova, @prakhargupta1, @oliviertassinari
Nov 23, 2021
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]disableRipple is set (#29298) @adamfitzgibbonvariants.style to accept callbacks (#29610) @mnajdova@mui/[email protected]jss-to-styled to support multiple withStyles (#29824) @siriwatknp@mui/[email protected]@mui/[email protected]sx prop runtime issue when used as function (#29830) @mnajdovasx throw error when value is null or undefined (#29756) @siriwatknp@mui/[email protected]@mui/[email protected]focused is always false unless explicitly set to true @mwilkins91@mui/[email protected]luxon version range (#29761) @eps1lon@mui/core is an alias for @mui/base (#29762) @eps1lonnext branch (#29748) @eps1loncreateRenderer (#29684) @eps1lonAll contributors of this release in alphabetical order: @abhinav-22-tech, @adamfitzgibbon, @bharatkashyap, @chao813, @DanailH, @danilo-leal, @eps1lon, @gnowland, @Janpot, @longzheng, @michaldudak, @mmacu, @mnajdova, @mwilkins91, @NatiG100, @oliviertassinari, @scallaway, @siriwatknp
Nov 16, 2021
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@mui/core to @mui/base (#29585) @michaldudak.@mui/[email protected]multiple class (#29566) @aaronhollaSelect is not a root component (#29593) @hbjORbj@mui/[email protected][core] Rename mui/core to mui/base (#29585) @michaldudak
Based on the results of the poll and our internal discussions, we decided to rename the @mui/core package to @mui/base. The main rationale for this is the fact that we use the term "Core" to refer to the core components product family, the one that includes Material Design components, unstyled components, System utilities, etc. Therefore, @mui/core was effectively a subset of MUI Core. This was confusing.
The new name better reflects the purpose of the package: it contains unstyled components, hooks, and utilities that serve as a base to build on.
-import { useSwitch } from '@mui/core/SwitchUnstyled';
+import { useSwitch } from '@mui/base/SwitchUnstyled';
@mui/[email protected]ThemeProvider API link (#29573) @siriwatknpexperiments index page (#29582) @siriwatknpgetJsxPreview util (#29586) @ZeeshanTamboliraf helper is for (#29683) @eps1loncreateServerRender with createRenderer (#29503) @eps1lonAll contributors of this release in alphabetical order: @aaronholla, @alexfauquette, @anikcreative, @daniel-sachs, @eps1lon, @flipvrijn, @hbjORbj, @joshua-lawrence, @michaldudak, @mnajdova, @netizer, @oliviertassinari, @petermikitsh, @siriwatknp, @ZeeshanTamboli
Nov 8, 2021
A big thanks to the 33 contributors who made this release possible. Here are some highlights ✨:
ButtonGroup (#28645) @ZeeshanTambolisx prop (#29297) @siriwatknp@mui/[email protected]hiddenLabel prop of TextField variant={filled} inside Autocomplete (#29234) @jatinsandilyaenableColorScheme prop so enable using color-scheme property to deal with dark mode (#29454) @alexfauquetteopen prop in componentsProps.popper can be optional (#29370) @ZeeshanTamboliclassName not getting applied from PopperProps (#29023) @ZeeshanTamboli@mui/[email protected]mode to CssVarsProvider (#29418) @siriwatknpsx prop (#29297) @siriwatknp@mui/[email protected]@mui/[email protected]children (#29351) @hbjORbj@mui/[email protected]private to leverage CodeSandbox (#29280) @siriwatknpprocess.browser (#29438) @oliviertassinariMuiTextField's default props in the migration guide (#29174) @tm1000docs:api (#28828) @m4theushwcreateClientRender with new createRenderer API (#29471) @eps1lonAbortController on global (#29360) @eps1lonname in Rating (#29329) @eps1lonAll contributors of this release in alphabetical order: @adamfitzgibbon, @ainatenhi, @alexfauquette, @busches, @ChrisClaude, @dan-mba, @DanailH, @danilo-leal, @DASPRiD, @ElonVolo, @eps1lon, @eric-burel, @flaviendelangle, @gssakash, @hbjORbj, @IPJT, @jacklaurencegaray, @Jareechang, @jatinsandilya, @m4theushw, @mbeltramin, @mbrookes, @michaldudak, @mnajdova, @nicbarajas, @oliviertassinari, @Pablion, @robcaldecott, @siriwatknp, @tanay123456789, @tm1000, @Wimukti, @ZeeshanTamboli
Oct 27, 2021
A big thanks to the 4 contributors who made this release possible. Here are some highlights ✨:
@mui/system package because some packages were not released@mui/[email protected]clearOnBlur prop (#29208) @hbjORbj@mui/[email protected]All contributors of this release in alphabetical order: @Andarist, @hbjORbj, @oliviertassinari, @williamhaley
Oct 26, 2021
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
Masonry using Flexbox by @hbjORbj.@mui/base by @rebeccahongsf and @hbjORbj.@mui/[email protected]link-underline-hover transformer (#29214) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]img role instead of custom image role (#29172) @eps1lonfullWidth styling (#28652) @nikitabobersiconPosition prop added in Tab (#28764) @deepanshu2506@mui/[email protected]sx prop (#29198) @hbjORbjcolorScheme conflict between application (#29139) @siriwatknpunstable_createCssVarsProvider api (#28965) @siriwatknpDataGrid CSV export options page (#29220) @DanailHjustifyContent values and update box styling (#29117) @omarmosiduseEventCallback (#28910) @NMinhNguyenunstable_ClassNameGenerator API (#29051) @siriwatknpAll contributors of this release in alphabetical order: @adamfitzgibbon, @DanailH, @deepanshu2506, @Devesh21700Kumar, @eps1lon, @gnowland, @hbjORbj, @jatinsandilya, @JuliaNeumann, @LorenzHenk, @michal-perlakowski, @michaldudak, @mnajdova, @nikitabobers, @NMinhNguyen, @omarmosid, @rebeccahongsf, @siriwatknp, @waxidiotic
Oct 14, 2021
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
UnstyledInput and useInput hook in the the first component in @mui/base package @michaldudak (#28053)@mui/[email protected]... triggering onChange with page value null (#28884) @ZeeshanTambolichildren as required where nullish children would crash at runtime (#29028) @eps1lon@mui/[email protected]style function (#28744) @hbjORbj@mui/[email protected]@mui/[email protected]theme.breakpoints (#29039) @eps1lon@mui/material (#29006) @visualfanaticmui-image related project (#28621) @benmnebBox import for sx-prop example (#28873) @phudekarpeerDependencies to require latest instead of next (#29007) @eps1lonprivate Joy package (#28957) @siriwatknpAll contributors of this release in alphabetical order: @amen-souissi, @benmneb, @epodol, @eps1lon, @goncalovf, @hbjORbj, @Jareechang, @kgregory, @michaldudak, @mnajdova, @mottox2, @officialpiyush, @phudekar, @siriwatknp, @tanyabouman, @visualfanatic, @ZeeshanTamboli
Oct 7, 2021
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]addEndListener not being called with the DOM node (#28715) @eps1lon@mui/[email protected]optimal-imports to support v4 and v5-alpha, beta (#28812) @siriwatknp@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]onViewChange is set (#28765) @eps1lon@mui/[email protected]--exact from release:version (#28840) @siriwatknpstyled function (#28862) @hbjORbjAll contributors of this release in alphabetical order: @AnilSeervi, @avranju94, @cacpgomes, @danilo-leal, @epodol, @eps1lon, @hbjORbj, @iamsergo, @michaldudak, @mnajdova, @owais635, @saeedseyfi, @Sharry0, @siriwatknp, @smmoosavi, @taghi-khavari, @veerreshr, @yevheniiminin, @ZeeshanTamboli
Sep 29, 2021
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
jss-to-styled codemod to use new package names.@mui/[email protected]matchMedia option and deprecate exported interfaces (#28413) @eps1lon@mui/[email protected]jss-to-styled to match the new package names (#28667) @mnajdova@mui/[email protected]seconds views test pass in browsers (#28511) @eps1lonAll contributors of this release in alphabetical order: @adamthewebguy, @alexeagleson, @Brlaney, @chetrit, @danilo-leal, @dmitry-yudakov, @eps1lon, @fxlemire, @garronej, @kiznick, @mnajdova, @naveen-bharathi, @oliviertassinari, @praveenkumar-kalidass, @siriwatknp
Sep 22, 2021
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]@mui/[email protected]@mui/[email protected]seconds view (#25095) @breitembach<Alert icon={false} /> behaves (#28348) @nguyenkhanhnamscreen (#28507) @eps1lonAll contributors of this release in alphabetical order: @breitembach, @chetrit, @coder-freestyle, @danilo-leal, @danwoods, @eps1lon, @hbjORbj, @michaldudak, @mnajdova, @nguyenkhanhnam, @oliviertassinari, @sakura90, @siriwatknp, @valse, @xenostar
Sep 16, 2021
After over 400 days of development and over 40 canary releases, we are excited to introduce MUI Core v5.0.0!
Some statistics with the released of v5.0.0 compared to the one of v4.0.0:
A big thanks to the 600+ contributors who made the release possible!
The 5.0.0 version includes all changes done in the alpha, beta, and rc releases listed below. These are the changes done from the last release candidate version (5.0.0-rc.1):
@mui/[email protected]@mui/[email protected]@mui/[email protected]@mui/[email protected]All contributors of this release in alphabetical order: @aghArdeshir, @Aurelain, @eps1lon, @goncalovf, @jedwards1211, @m4theushw, @mbrookes, @michald udak, @mnajdova, @nikitabobers, @praveenkumar-kalidass, @siriwatknp, @sydneyjodon-wk, @tamboliasir1, @tholman, @zadeviggers, @ZeeshanTamboli
Sep 8, 2021
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@mui/[email protected]ref type from component (#28101) @eps1lonref of Select and input element (#28054) @DouglasPdsvalue (#28172) @eps1lon@mui/[email protected]@mui/[email protected]preset-safe (#28183) @mnajdova@mui/[email protected]All contributors of this release in alphabetical order: @akashshyamdev, @aleccaputo, @DouglasPds, @eps1lon, @goncalovf, @hbjORbj, @michaldudak, @mnajdova, @oliviertassinari, @outofgamut, @paullaros, @RomarQ, @siriwatknp
Sep 1, 2021
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
@mui/* as part of rebranding the company, following the strategy of expanding the library scope beyond Material Design. For more details about it, check the GitHub discussion.mui-replace codemod for migrating @material-ui/* to new packages @mui/*. Check out this codemod detail or head to migration guide<Mansory> component to the lab, check it out. It has been crafted by our first intern, @hbjORbj 👏!@mui/[email protected][core] Rename packages (#28049) @mnajdova
replace @material-ui/* prefix with @mui/*:
@material-ui/system -> @mui/system
@material-ui/styles -> @mui/styles
@material-ui/lab -> @mui/lab
@material-ui/types -> @mui/types
@material-ui/styled-engine -> @mui/styled-engine
@material-ui/styled-engine-sc ->@mui/styled-engine-sc
@material-ui/private-theming -> @mui/private-theming
@material-ui/codemod -> @mui/codemod
except these 3 packages that are renamed.
@material-ui/core => @mui/material // represents Material Design components.
@material-ui/icons => @mui/icons-material // represents Material Design icons.
@material-ui/unstyled => @mui/base // fully functional components with minimum styles.
Note:
@mui/base(previously@material-ui/unstyled) is not the same as@material-ui/core.
We encourage you to use the codemod for smooth migration.
value prop (#27977) @vedadeeptaimage role if image prop is specified but no image component is specified (#27676) @eps1lon@mui/[email protected]@mui/[email protected]@mui/[email protected]mui-replace codemod transform (#28060) @siriwatknpno-use-before-define (#27984) @eps1lonrelease:changelog script (#27941) @eps1lonAll contributors of this release in alphabetical order: @aaronlademann-wf, @bene-we, @chetas411, @eps1lon, @flaviendelangle, @hbjORbj, @iamhosseindhv, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @rajzik, @rsxdalv, @siriwatknp, @StefanBRas, @StefanTobler, @tdmiller1, @vedadeepta
Aug 24, 2021
A big thanks to the 26 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected][core] Update .browserslistrc file (#27788) @DanailH
The targets of the default bundle have changed:
[Autocomplete] Rename Value type to AutocompleteValue (#27804) @michaldudak
The useAutocomplete hook used a type called Value. It was a very generic name for a type specific to the Autocomplete control, so it was removed to AutocompleteValue.
-import { Value } from '@material-ui/core/useAutocomplete';
+import { AutocompleteValue } from '@material-ui/core/useAutocomplete';
size customization via module augmentation (#27834) @aaronlademann-wfrows from undefined to defined (#27683) @eps1lonasterisk class when required (#27738) @alexiletrack slot to SwitchUnstyled (#27916) @michaldudak@material-ui/[email protected][system] Rename styleProps to ownerState (#27830) @mnajdova
The change was done in order to better reflect what they are, not what we think they will be used for.
<SomeSlotComponent
- styleProps={propsAndState}
+ ownerState={propsAndState}
/>
overridesResolver for the variants (#27859) @mnajdovaclasses prop if no slot specified in the options (#27795) @mnajdova@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]CSS.supports in SliderUnstyled component (#27724) @DanailH@material-ui/[email protected]href for AppDrawerNavItems (#27936) @eps1londescribeConformance with describeConformanceV5 (#27817) @mnajdovaAll contributors of this release in alphabetical order: @aaronlademann-wf, @alexile, @atorenherrinton, @benny0642, @DanailH, @eps1lon, @hamidreza-nateghi, @hbjORbj, @jakeanq, @JEONGJIHUN, @LorenzHenk, @mekouar-mehdi, @michaldudak, @mnajdova, @nguyenyou, @nolastemgarden, @nomanoff, @noviicee, @oliviertassinari, @pvdstel, @qiweiii, @siriwatknp, @surajkumar016, @teachhay, @vedadeepta, @will-amaral
Aug 13, 2021
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]children if specified (#27462) @abriginetsdirect-import babel plugin over transform-import (#27335) @umidbekkAll 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
Aug 6, 2021
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
jss-to-styled codemod has been improved to support createStyles and <React.Fragment> usage (#27578) @mnajdova@material-ui/[email protected]overflowX and overflowY styles (#27487) @PCOffline@material-ui/[email protected]@material-ui/[email protected]createStyles usage in jss-to-styled (#27578) @mnajdovajss-to-styled PREFIX generation on Windows (#27491) @mnajdovajss-to-styled codemod to handle React.Fragment as root (#27495) @mnajdova@material-ui/[email protected]sx prop (#27417) @mnajdovastyled api example (#27518) @kimbaudiAll contributors of this release in alphabetical order: @bezpalko, @eps1lon, @flaviendelangle, @frandiox, @Harshita-Kanal, @kimbaudi, @michaldudak, @mnajdova, @noviicee, @oliviertassinari, @PCOffline, @R-Bower, @ryancogswell, @siriwatknp, @sulco
Jul 26, 2021
A 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/[email protected]disableRipple (#27314) @faan234componentsProps correctly (#27371) @mnajdovaSelectChangeEvent for accurate types for event in onChange prop (#27370) @eps1lon@material-ui/[email protected]optimal-imports for v5 (#27404) @mnajdova@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]styled component if name isn't set (#27401) @eps1lonshouldForwardProp (#27310) @KLubin1@material-ui/[email protected]Transitions page (#27319) @siriwatknpmakeStyles explanation in troubleshooting (#27322) @siriwatknpgatsby examples (#27375) @mnajdovaAll 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
Jul 14, 2021
A 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, and a hook: useSwitch.
<a href="https://mui.com/components/switches/#unstyled"></a>
You can follow our progress at https://github.com/mui/base-ui/issues/10.
💄 We have updated the default info success warning color to be more accessible (#26817) @siriwatknp.
You can find the new default values in the documentation.
<a href="https://mui.com/customization/palette/#default-values"></a>
@material-ui/[email protected]disableRipple API description (#27187) @michaldudakchecked and mark as deprecated (#27047) @siriwatknpcreateV4Spacing from adaptV4Theme (#27072) @siriwatknpinfo success warning color (#26817) @siriwatknp@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]url package (#27151) @eps1lonStyledEngineProvider as JSS is not used (#27133) @mnajdovaAll contributors of this release in alphabetical order: @eps1lon, @mbrookes, @michal-perlakowski, @michaldudak, @mnajdova, @moshfeu, @oliviertassinari, @rajzik, @renovate[bot], @sahil-blulabs, @ShirasawaSama, @siriwatknp, @vimutti77
Jul 01, 2021
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
@material-ui/codemod.@material-ui/[email protected][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.
<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.
<button class="MuiBottomNavigationAction-root">
- <span class="MuiBottomNavigationAction-wrapper">
{icon}
<span class="MuiBottomNavigationAction-label">
{label}
</span>
- </span>
</button>
defaultValue to match the other value types (#26945) @oliviertassinarihiddenLabel from spreading to DOM (#26864) @siriwatknp@material-ui/[email protected][DatePicker] Remove helper text default value (#26866) @DouglasPds
Make the default rendered text field closer to the most common use cases (denser).
<DatePicker
label="Helper text example"
value={value}
onChange={onChange}
renderInput={(params) => (
- <TextField {...params} />
+ <TextField {...params} helperText={params?.inputProps?.placeholder} />
)}
>
@material-ui/[email protected]@material-ui/core (#26869) @mnajdovasx prop (#26769) @mnajdovaAll contributors of this release in alphabetical order: @ansh-saini, @BC-M, @CarlosGomez-dev, @DouglasPds, @eps1lon, @fishyFrogFace, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @siriwatknp, @steveafrost, @varandasi
Jun 23, 2021
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
🚀 We have only 2 left in the breaking changes. 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.
<a href="https://mui.com/components/slider/#continuous-sliders"></a>
💡 IconButton now supports 3 sizes (small, medium, large). See demo.
♿️ We have improved the default style of the Link to be more accessible (#26145) @ahmed-28
<a href="https://mui.com/components/links/"></a>
@material-ui/[email protected][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:
<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.
-<li className="MuiButtonBase-root MuiMenuItem-root MuiListItem-root">
+<li className="MuiButtonBase-root MuiMenuItem-root">
The prop listItemClasses was removed, you can use classes instead.
-<MenuItem listItemClasses={{...}}>
+<MenuItem classes={{...}}>
[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.
{
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.
import { createTheme } from '@material-ui/core/styles';
const theme = createTheme({
breakpoints: {
values: {
xs: 0,
sm: 600,
md: 960,
lg: 1280,
xl: 1920,
},
},
});
[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.
- <IconButton>
+ <IconButton size="large">
[Slider] Adjust css to match the specification (#26632) @siriwatknp
Rework the CSS to match the latest Material Design guidelines and make custom styles more intuitive. See documentation.
<a href="https://mui.com/components/slider/#continuous-sliders"></a>
You can reduce the density of the slider, closer to v4 with the size="small" prop.
<a href="https://mui.com/components/slider/#sizes"></a>
[IconButton] Remove label span (#26801) @siriwatknp
span element that wraps children has been removed. label classKey is also removed. More details about this change.
<button class="MuiIconButton-root">
- <span class="MuiIconButton-label">
<svg />
- </span>
</button>
[core] Remove unstable_ prefix on the useThemeProps hook (#26777) @mnajdova
The following utilities were renamed to not contain the unstable_ prefix:
@material-ui/sytstem import {
- unstable_useThemeProps,
+ useThemeProps,
} from '@material-ui/system';
@material-ui/core import {
- unstable_useThemeProps,
+ useThemeProps,
} from '@material-ui/core/styles';
to prop (#26576) @shadab14meb346@material-ui/[email protected][system] Normalize api for createBox (#26820) @mnajdova
import { createBox } from '@material-ui/system';
-const styled = createBox(defaultTheme);
+const styled = createBox({ defaultTheme });
@material-ui/private-theming (#26793) @mnajdova@material-ui/styled-engine (#26792) @mnajdovaAll 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
Jun 15, 2021
A 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.
<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 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. 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 for more details.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected][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.
<button class="MuiButton-root">
- <span class="MuiButton-label">
children
- </span>
</button>
@material-ui/[email protected][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.
-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
}
@material-ui/[email protected]@material-ui/[email protected]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/[email protected]All contributors of this release in alphabetical order: @chadmuro, @eps1lon, @likitarai1, @mnajdova, @nikitabobers, @oliviertassinari, @robphoenix, @sakura90, @siriwatknp, @varandasi, @vicasas
Jun 8, 2021
A 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 in the Grid component (#26559) @likitarai1.
Note that this feature was already available for CSS grid users with the rowGap and columnGap props.
@material-ui/[email protected][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. Use enableColorOnDark to restore the behavior of v4.
<AppBar enableColorOnDark />
[core] Rename experimentalStyled to styled (#26558) @mnajdova
Remove the experimental prefix, this module is going stable:
-import { experimentalStyled as styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/core/styles';
[SwitchBase] Replace IconButton with ButtonBase (#26460) @siriwatknp
[theme] Improve default primary, secondary and error theme palette (#26555) @siriwatknp
color to DOM elements (#26625) @siriwatknpdisableTypography (#26323) @eps1lonsize prop value (#26585) @coder-freestyle@material-ui/[email protected][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/[email protected][pickers] Remove openPickerIcon prop in favor of components.OpenPickerIcon (#26223) @vedadeepta
<DateTimePicker
components={{
LeftArrowIcon: AlarmIcon,
RightArrowIcon: SnoozeIcon,
+ OpenPickerIcon: ClockIcon,
}}
- openPickerIcon={<ClockIcon />}
>
@material-ui/[email protected]@material-ui/styles (#26552) @mnajdovaRating value is nullable in onChange (#26542) @sakura90All contributors of this release in alphabetical order: @coder-freestyle, @eps1lon, @garfunkelvila, @itsnorbertkalacska, @likitarai1, @m4theushw, @michaldudak, @mnajdova, @onpaws, @sakura90, @sarahannnicholson, @siriwatknp, @vedadeepta, @vicasas
May 31, 2021
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@material-ui/core and @material-ui/lab) @siriwatknp, @mnajdova.@material-ui/styles (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.@material-ui/[email protected][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.
-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.
-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.
-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:
minWidth changed from 72px => 90px (without media-query) according to material-design specmaxWidth changed from 264px => 360px according to material-design spec@material-ui/[email protected]@material-ui/[email protected][icons] Use array children instead of React fragments (#26309) @eps1lon
Reduce a bit the size of the package.
@material-ui/[email protected]We are progressively moving all modules that are relevant to styling custom design systems in this package. It's meant to be complementary with @material-ui/unstyled.
@material-ui/[email protected]options (#26339) @pasDamola@material-ui/[email protected][pickers] Remove allowKeyboardControl (#26451) @eps1lon
[ClockPicker] Rework keyboard implementation (#26400) @eps1lon
Remove the allowKeyboardControl prop from ClockPicker (and TimePicker and variants). Keyboard navigation now works by default.
experimentalStyled() (#26361) @mnajdova@material-ui/styles dependencies from declaration files too (#26376) @mnajdovaAll contributors of this release in alphabetical order: @akshitsuri, @DanailH, @Dru89, @eps1lon, @Gautam-Arora24, @jeferson-sb, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @pasDamola, @siriwatknp, @wolfykey
May 18, 2021
<!-- generated comparing v5.0.0-alpha.33..next -->A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected][Select][nativeselect] Polish CSS classes (#26186) @m4theushw
Select, NativeSelect
Merge the selectMenu slot into select. Slot selectMenu was redundant. The root slot is no longer applied to the select, but to the root.
-<NativeSelect classes={{ root: 'class1', select: 'class2', selectMenu: 'class3' }} />
+<NativeSelect classes={{ select: 'class1 class2 class3' }} />
TablePagination
Move the custom class on input to select. The input key is being applied on another element.
<TablePagination
- classes={{ input: 'foo' }}
+ classes={{ select: 'foo' }}
/>
[core] Move StyledEngineProvider to @material-ui/core/styles (#26265) @mnajdova
Change location of StyledEngineProvider import.
-import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';
[Autocomplete] Apply .Mui-focused instead of data-focus on the focused option (#26181) @m4theushw
The data-focus attribute is not set on the focused option anymore, instead, global class names are used.
-'.MuiAutocomplete-option[data-focus="true"]': {
+'.MuiAutocomplete-option.Mui-focused': {
[Radio] Make color primary default (#26180) @vicasas
[Switch] Make color primary default (#26182) @vicasas
[pickers] Drop ResponsiveWrapper usage (#26123) @eps1lon
When a responsive picker changes from mobile to desktop, it will now clear its entire state. To keep the original behavior you can implement a controlled picker:
function ResponsiveDateTimePicker(props) {
const [open, setOpen] = React.useState(false);
return (
<DateTimePicker
open={open}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
{...props}
/>
);
}
[Autocomplete] Rename getOptionSelected to isOptionEqualToValue (#26173) @m4theushw
<Autocomplete
- getOptionSelected={(option, value) => option.title === value.title}
+ isOptionEqualToValue={(option, value) => option.title === value.title}
/>
Follow this link for full migration from v4 => v5
@material-ui/[email protected]@material-ui/[email protected][icons] Remove extraneous React.Fragment (#26308) @eps1lon
[icons] Synchronize icons (#26302) @eps1lon
New DriveFileMove icon and its variants
makeStyles from @material-ui/core/styles (#26246) @mnajdovawithStyles dependencies from @material-ui/core/styles (#26277) @mnajdovaAll contributors of this release in alphabetical order: @arpitBhalla, @atisheyJain03, @davidfdriscoll, @eps1lon, @fzaninotto, @Gautam-Arora24, @gnowland, @huyenltnguyen, @likitarai1, @m4theushw, @mnajdova, @oliviertassinari, @ruppysuppy, @siriwatknp, @smmoosavi, @vicas
May 9, 2021
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected][core] Remove deprecated innerRef prop (#26028) @m4theushw
withStyles
Replace the innerRef prop with the ref prop. Refs are now automatically forwarded to the inner component.
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
const MyComponent = withStyles({
root: {
backgroundColor: 'red',
},
})(({ classes }) => <div className={classes.root} />);
function MyOtherComponent(props) {
const ref = React.useRef();
- return <MyComponent innerRef={ref} />;
+ return <MyComponent ref={ref} />;
}
withTheme
Replace the innerRef prop with the ref prop. Refs are now automatically forwarded to the inner component.
import * as React from 'react';
import { withTheme } from '@material-ui/core/styles';
const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);
function MyOtherComponent(props) {
const ref = React.useRef();
- return <MyComponent innerRef={ref} />;
+ return <MyComponent ref={ref} />;
}
[theme] Rename createMuiTheme() to createTheme() (#25992) @m4theushw
Developers only need one theme in their application. A prefix would suggest a second theme is needed. It's not the case. createMuiTheme will be removed in v6.
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@material-ui/core/styles';
-const theme = createMuiTheme({
+const theme = createTheme({
[theme] Remove MuiThemeProvider alias (#26171) @m4theushw
The MuiThemeProvider is no longer exported. Use ThemeProvider instead. It was removed from the documentation during v4-beta, 2 years ago.
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/core/styles';
[Box] Remove the clone prop (#26031) @m4theushw
Its behavior can be obtained using the sx prop.
-<Box sx={{ border: '1px dashed grey' }} clone>
- <Button>Save</Button>
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>
[Box] Remove render prop (#26113) @m4theushw
Its behavior can be obtained using the sx prop directly on the child if it's a Material UI component. For non-Material UI components use the sx prop in conjunction with the component prop:
-<Box sx={{ border: '1px dashed grey' }}>
- {(props) => <Button {...props}>Save</Button>}
-</Box>
+<Button sx={{ border: '1px dashed grey' }}>Save</Button>
-<Box sx={{ border: '1px dashed grey' }}>
- {(props) => <button {...props}>Save</button>}
-</Box>
+<Box component="button" sx={{ border: '1px dashed grey' }}>Save</Box>
[Checkbox] Make color="primary" default (#26002) @vicasas
This better matches the Material Design guidelines.
-<Checkbox />
+<Checkbox color="secondary />
[Select] Remove labelWidth prop (#26026) @m4theushw
The label prop now fulfills the same purpose, using CSS layout instead of JavaScript measurement to render the gap in the outlined. The TextField already handles it by default.
-<Select variant="outlined" labelWidth={20} />
+<Select label="Gender" />
[core] Remove styled JSS utility from @material-ui/core/styles (#26101) @mnajdova
The styled JSS utility is no longer exported from @material-ui/core/styles. You can use @material-ui/styles/styled 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/styles instead.
-import { styled } from '@material-ui/core/styles';
+import { styled } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+const theme = createTheme();
const MyComponent = styled('div')(({ theme }) => ({ background: theme.palette.primary.main }));
function App(props) {
- return <MyComponent />;
+ return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
}
For new components, you can instead use the experimentalStyled() helper powered by emotion/sc.
import { experimentalStyled as styled } from '@material-ui/core/styles';
[Hidden] Remove component (#26135) @m4theushw
Removed in favor of using the sx prop or the useMediaQuery hook.
Use the sx prop to replace implementation="css":
-<Hidden implementation="css" xlUp><Paper /></Hidden>
-<Hidden implementation="css" xlUp><button /></Hidden>
+<Paper sx={{ display: { xl: 'none', xs: 'block' } }} />
+<Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} />
-<Hidden implementation="css" mdDown><Paper /></Hidden>
-<Hidden implementation="css" mdDown><button /></Hidden>
+<Paper sx={{ display: { xs: 'none', md: 'block' } }} />
+<Box component="button" sx={{ display: { xs: 'none', md: 'block' } }} />
Use the useMediaQuery hook to replace implementation="js":
-<Hidden implementation="js" xlUp><Paper /></Hidden>
+const hidden = useMediaQuery(theme => theme.breakpoints.up('xl'));
+return hidden ? null : <Paper />;
[withWidth] Remove API (#26136) @m4theushw
Removed in favor of the useMediaQuery hook. You can reproduce the same functionality creating a custom hook as described here.
[Autocomplete] Rename values of the reason argument (#26172) @m4theushw
Rename the values of the reason argument in onChange and onClose for consistency:
create-option to createOptionselect-option to selectOptionremove-option to removeOption[core] Remove withTheme from @material-ui/core (#26051) @mnajdova
The withTheme utility has been removed from the @material-ui/core/styles package. You can use the @material-ui/styles/withTheme 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 from @material-ui/core/styles instead.
import * as React from 'react';
-import { withTheme } from '@material-ui/core/styles';
+import { withTheme } from '@material-ui/styles';
+import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+const theme = createTheme();
const MyComponent = withTheme(({ theme }) => <div>{props.theme.direction}</div>);
function App(props) {
- return <MyComponent />;
+ return <ThemeProvider theme={theme}><MyComponent {...props} /></ThemeProvider>;
}
[core] Remove createStyles from @material-ui/core (#26018) @mnajdova
createGenerateClassName module is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.-import { createGenerateClassName } from '@material-ui/core/styles';
+import { createGenerateClassName } from '@material-ui/styles';
jssPreset object is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.-import { jssPreset } from '@material-ui/core/styles';
+import { jssPreset } from '@material-ui/styles';
ServerStyleSheets component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.-import { ServerStyleSheets } from '@material-ui/core/styles';
+import { ServerStyleSheets } from '@material-ui/styles';
The StylesProvider component is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
-import { StylesProvider } from '@material-ui/core/styles';
+import { StylesProvider } from '@material-ui/styles';
The useThemeVariants hook is no longer exported from @material-ui/core/styles. You should import it directly from @material-ui/styles.
-import { useThemeVariants } from '@material-ui/core/styles';
+import { useThemeVariants } from '@material-ui/styles';
[FormControlLabel] The label prop is now required.
standard variant classes in types (#26115) @siriwatknp@material-ui/[email protected][Timeline] Add support for position override on items (#25974) @simonecervini
Rename the align prop to position to reduce confusion.
-<Timeline align="alternate">
+<Timeline position="alternate">
-<Timeline align="left">
+<Timeline position="right">
-<Timeline align="right">
+<Timeline position="left">
[pickers] Remove customization of deep components (#26118) @eps1lon
AllSharedPickerProps and AllSharedDateRangePickerProps (#26005) @eps1lonmakeStyles from landing pages (#26130) @mnajdova@material-ui/core/styles from the styles pages (#26126) @mnajdovamakeStyles from @material-ui/styles (#26131) @mnajdovasx (#26140) @eps1lonmakeStyles dependency from core in modules (#26071) @mnajdovareact@experimental compat (#26116) @eps1lon@material-ui/styles (#26100) @mnajdovaAll contributors of this release in alphabetical order: @anish-khanna, @anshuman9999, @arpitBhalla, @DanielBretzigheimer, @eps1lon, @hubertokf, @Jack-Works, @jamesaucode, @LiKang6688, @m4theushw, @mnajdova, @mousemke, @oliviertassinari, @simonecervini, @siriwatknp, @t49tran, @vicasas
Apr 27, 2021
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
@material-ui/core. We will focus on the components in @material-ui/lab next.@material-ui/[email protected][Table] Rename padding="default" to padding="normal" (#25924) @m4theushw
-<Table padding="default" />
-<TableCell padding="default" />
+<Table padding="normal" />
+<TableCell padding="normal" />
[Button] Rename pending prop to loading in LoadingButton (#25874) @m4theushw
-<LoadingButton pending pendingIndicator="Pending…" pendingPosition="end" />
+<LoadingButton loading loadingIndicator="Pending…" loadingPosition="end" />
[ButtonBase] Remove buttonRef prop (#25896) @m4theushw
-<ButtonBase buttonRef={ref} />
+<ButtonBase ref={ref} />
-<Button buttonRef={ref} />
+<Button ref={ref} />
[Checkbox][switch] Remove checked argument from onChange (#25871) @m4theushw
function MyCheckbox() {
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const checked = event.target.checked;
};
return <Checkbox onChange={handleChange} />;
}
function MySwitch() {
- const handleChange = (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => {
+ const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+ const checked = event.target.checked;
};
return <Switch onChange={handleChange} />;
}
[theme] Remove theme.breakpoints.width helper (#25918) @m4theushw
-theme.breakpoints.width('md')
+theme.breakpoints.values.md
[theme] Remove theme.typography.round helper (#25914) @m4theushw
The theme.typography.round helper was removed because it was no longer used. If you need it, use the function below:
function round(value) {
return Math.round(value * 1e5) / 1e5;
}
classes types (AppBar, Card, Link, LoadingButton, MenuItem) (#25917) @eps1lonposition prop required in InputAdornment (#25891) @m4theushw@material-ui/[email protected]date is nullable in onChange (#25981) @eps1lon@material-ui/[email protected]@material-ui/[email protected]main entry for styleFunctionSx (#25885) @eps1lon@material-ui/[email protected]This package is just re-released since version 5.1.7 had a breaking change.
paragraph prop (#25929) @DanailHAll contributors of this release in alphabetical order: @DanailH, @dtassone, @eps1lon, @gruber76, @JanMisker, @kevinlul, @Knoxo, @m4theushw, @mnajdova, @oliviertassinari, @simonecervini, @siriwatknp, @vicasas, @Vikram710, @wellwellmissesanderson
Apr 20, 2021
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected][FormControl] Change default variant from standard to outlined (#24895) @petyosi Standard has been removed from the Material Design guidelines. This codemod will automatically update your code.
-<FormControl value="Standard" />
-<FormControl value="Outlined" variant="outlined" />
+<FormControl value="Standard" variant="standard" />
+<FormControl value="Outlined" />
[Menu] The selectedMenu variant will not vertically align the selected item with the anchor anymore. (#25691) @m4theushw
[Popover] Remove the getContentAnchorEl prop to simplify the positioning logic. (#25691) @m4theushw
[Select] Change default variant from standard to outlined (#24895) @petyosi Standard has been removed from the Material Design guidelines. This codemod will automatically update your code.
-<Select value="Standard" />
-<Select value="Outlined" variant="outlined" />
+<Select value="Standard" variant="standard" />
+<Select value="Outlined" />
@material-ui/[email protected][Pickers] Rename DayPicker to CalendarPicker (#25810) @eps1lon
-import DayPicker from '@material-ui/lab/DayPicker';
+import CalendarPicker from '@material-ui/lab/CalendarPicker';
createMuiTheme({
components: {
- MuiDayPicker: {},
+ MuiCalendarPicker: {},
}
})
[Pickers] Rename PickersCalendarSkeleton to CalendarPickerSkeleton (#25679) @eps1lon
-import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';
[Pickers] Rename date view to day (#25685) @eps1lon
-<DatePicker openTo="date" views={['date', 'month']} />
+<DatePicker openTo="day" views={['day', 'month']} />
TView generic in CalendarPicker (#25818) @eps1lon@material-ui/[email protected]@material-ui/[email protected]All contributors of this release in alphabetical order: @ahmed-28, @catchanuj, @dtassone, @eps1lon, @ifndefdeadmau5, @jqrun, @m4theushw, @MieleVL, @mnajdova, @npandrei, @oliviertassinari, @petyosi, @robphoenix, @saeedeyvazy, @shakatoday, @siriwatknp, @vicasas, @viditrv123, @Vikram710
Apr 12, 2021
A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]All contributors of this release in alphabetical order: @alcwhite, @bhairavee23, @dimitropoulos, @duganbrett, @eps1lon, @hcz, @itscharlieliu, @michal-perlakowski, @misaka3, @mnajdova, @natac13, @oliviertassinari, @RiyaNegi, @ruppysuppy, @saleebm, @StuffByLiang, @thameera, @tomasznguyen, @vicasas, @Vikram710, @xdshivani
Apr 4, 2021
A big thanks to the 26 contributors who made this release possible. Here are some highlights ✨:
🙌 Add support in the Grid for any spacing value (#25503) @ZakMiller. For instance:
<Grid container spacing={1.5}>
<Grid container spacing="30px">
This feature was made possible by the recent migration to emotion. You can find the other issues unlocked by the migration to emotion on the Grid component that are left to be solved.
👩🎤 Convert 3 components to emotion (#25541, #25516, #25521) @rajzik, @praveenkumar-kalidass, @siriwatknp.
📚 Migrate 8 component demo pages to the sx, Stack, and styled API @vicasas.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]All contributors of this release in alphabetical order: @Andarist, @ashishshuklabs, @Brlaney, @callmeberzerker, @dariusk, @eps1lon, @Harish-Karthick, @heleg, @JanKaczmarkiewicz, @kanish671, @m4theushw, @manziEric, @michael-001, @michal-perlakowski, @mnajdova, @nguyenyou, @oliviertassinari, @praveenkumar-kalidass, @rajzik, @silver-snoopy, @siriwatknp, @surajpoddar16, @tanmoyopenroot, @vedadeepta, @vicasas, @ZakMiller
Mar 22, 2021
A big thanks to the 34 contributors who made this release possible. Here are some highlights ✨:
👩🎤 Convert 9 components to emotion (#25267, #25216, #25264, #25197, #25372, #25281, #25210, #25279, #2528) @natac13 @tomasznguyen @kayuapi. 85% of the components have been migrated so far, thanks to the help of the community.
📚 Migrate 18 component demo pages to the sx, Stack, and styled API @vicasas.
This was also an importunity to breakdown the existing large demos into smaller and more focuses ones.
Add a new Stack component (#25149) @souporserious
The component allows to workaround the lack of support for the CSS flexbox gap property across browsers.
See the documentation for more details.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]tabIndex prop (#25388) @johnlovendisableFocusListener prop comment clearer (#25455) @jansedlon@material-ui/[email protected]make* HOCs (#25172) @eps1lon@material-ui/[email protected]env next config over DefinePlugin (#25373) @eps1londescribeConformance (#25297) @eps1lonAll contributors of this release in alphabetical order: @aheimlich, @AlfredoGJ, @BGehrels, @christiaan, @DanailH, @duongdev, @ee0pdt, @eps1lon, @fayzzzm, @heleg, @jansedlon, @jeferson-sb, @johnloven, @julihereu, @kayuapi, @LaneRamp, @m4theushw, @manziEric, @martinfrancois, @MikhailTSE, @natac13, @oliviertassinari, @praveenkumar-kalidass, @RTEYL, @saleebm, @silver-snoopy, @souporserious, @Tollwood, @tomasz-crozzroads, @tomasznguyen, @vedadeepta, @vicasas
Mar 5, 2021
A big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]sx prop (#25110) @niting143@material-ui/[email protected]dateAdapter prop (#25162) @eps1lonThe prop didn't solve any important problem better than any of its alternatives do.
-<DatePicker dateAdapter={x} />
+<LocalizationProvider dateAdapter={x}>
+ <DatePicker />
+</LocalizationProvider>
@material-ui/[email protected]builder:src (#25137) @eps1lonAll contributors of this release in alphabetical order: @beaudry, @eps1lon, @m4theushw, @mbrookes, @mngu, @natac13, @niting143, @oliviertassinari, @praveenkumar-kalidass, @ruppysuppy, @silver-snoopy, @vicasas
Feb 27, 2021
A big thanks to the 26 contributors who made this release possible. Here are some highlights ✨:
👩🎤 Convert 11 components to emotion (#24696, #24631, #24857, #25048, #24693, #24663, #25007, #24688, #24665, #24878, #24571) @praveenkuma @natac13 @xs9627 @povilass @m4theushw @natac13 @natac13 @DanailH @duganbrett @duganbrett @praveenkumar-kalidass @vinyldarkscratch. 75% of the components have been migrated so far, thanks to the help of the community.
🦴 Convert 4 components to the unstyled pattern (#24985, #24857, #24890, #24957) @povilass. This change doesn't introduce any breaking changes. Hence, most of the conversion effort will be done post v5-stable.
📚 Fix the generation of the API pages for the date pickers (#25101, #25100, #25086, #25089, #25085, #25084) @eps1lon.
This is a follow-up effort after we have merged material-ui-pickers. The components are written in TypeScript which required us to upgrade our infra.
👌 Improve the Slider thumb and track animation (#24968) @remyoudemans. The thumb is now moving with a light transition between different values unless it's dragged.
💅 Convert 5 components with custom colors support (#25099, #25088) @mngu. This change makes it easier to leverage custom palettes
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected][Tabs] Change the default indicatorColor and textColor prop values to "primary" (#25063) @Dripcoding
This is done to match the most common use cases with Material Design. You can restore the previous behavior with:
-<Tabs />
+<Tabs indicatorColor="secondary" textColor="inherit" />
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected][icons] Synchronize icons (#25055) @eps1lon
The icons were synchronized with https://m2.material.io/resources/icons/. This change increases the number of supported icons from 1,349 to 1,781 per theme (we support 5 themes). The breaking changes:
// AmpStories -> Download
-AmpStories
+Download
-AmpStoriesOutlined
+DownloadOutlined
-AmpStoriesRounded
+DownloadRounded
-AmpStoriesSharp
+DownloadSharp
-AmpStoriesTwoTone
+DownloadTwoTone
// Outbond -> Outbound
-Outbond
+Outbound
-OutbondOutlined
+OutboundOutlined
-OutbondRounded
+OutboundRounded
-OutbondSharp
+OutboundSharp
-OutbondTwoTone
+OutboundTwoTone
We are getting closer to the maximum number of icons our infrastructure can support. In the future, we might remove the least popular icons in favor of the most frequently used ones.
@material-ui/[email protected]@material-ui/[email protected]render required with describeConformanceV5 (#25003) @oliviertassinariAll contributors of this release in alphabetical order: @DanailH, @dborstelmann, @Dripcoding, @duganbrett, @eps1lon, @glocore, @hxqlin, @joemaffei, @jony89, @kevbarns, @klyburke, @koistya, @m4theushw, @manziEric, @mngu, @natac13, @NekoApocalypse, @oliviertassinari, @povilass, @praveenkumar-kalidass, @remyoudemans, @silver-snoopy, @vinyldarkscratch, @xs9627, @ydubinskyi
Feb 11, 2021
A big thanks to the 30 contributors who made this release possible. Here are some highlights ✨:
👩🎤 Convert 32 components to emotion. Around 64% of the components have been migrated so far, thanks to the help of the community. We aim to migrate them all before the end of Q1 2021. The podium of the most active community members in the migration 🏆:
📐 Add a subset of MUI System as flattened props on Typography (#24496) @mnajdova.
Now, you can do:
<Typography padding={2} color="text.secondary" />
📅 Focus on the date pickers, 5 fixes and 3 docs improvements.
💅 Provide a new darkScrollbar() CSS utility to improve the native scrollbar in dark mode. The documentation uses it.
@material-ui/[email protected]Increase the minimum version of TypeScript supported from v3.2 to v3.5. (#24795) @petyosi
We try to align with types released from DefinitelyTyped (i.e. packages published on npm under the @types namespace).
We will not change the minimum supported version in a major version of Material UI.
However, we generally recommend to not use a TypeScript version older than the lowest supported version of DefinitelyTyped.
children and onClickAway types (#24565) @eps1lonnone presentation to presentation (#24500) @hallzac2@material-ui/[email protected][system] Use spacing unit in gap, rowGap, and columnGap (#24794) @ruppysuppy
If you were using a number previously, you need to provide the value in px to bypass the new transformation with theme.spacing. The change was done for consistency with the Grid spacing prop and the other system spacing properties, for example <Box padding={2}>.
<Box
- gap={2}
+ gap="2px"
>
@material-ui/[email protected]@material-ui/[email protected]Omit type in @material-ui/types. (#24795) @petyosi
The module is now called DistributiveOmit. The change removes the confusion with the built-in Omit helper introduced in TypeScript v3.5. The built-in Omit, while similar, is non-distributive. This leads to differences when applied to union types. See this Stack Overflow answer for further details.-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';
@material-ui/[email protected]showTodayButton not returning the current time (#24650) @anthonyraymondeslint erroneous warning (#24644) @silviotmask prop description (#24842) @eps1lonnext using stale pages (#24635) @eps1lonAll contributors of this release in alphabetical order: @anthonyraymond, @ArnaultNouvel, @DanailH, @dborstelmann, @dtassone, @duganbrett, @EkaterinaMozheiko, @eps1lon, @fulin426, @hallzac2, @idanrozin, @KarimOurrai, @kodai3, @Lagicrus, @mbrookes, @mirefly, @mnajdova, @natac13, @oliviertassinari, @petyosi, @plug-n-play, @praveenkumar-kalidass, @ruppysuppy, @SCollinA, @silviot, @sumarlidason, @Tejaswiangotu123, @vicasas, @xiaoyu-tamu, @ydubinskyi
Jan 26, 2021
A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
👩🎤 Convert 31 components to emotion. Around 40% of the components have been migrated so far thanks to the help of the community.
🐛 Fix two long-standing issues with the Grid. Solve the horizontal scrollbar as well as dimensions when nesting (#24332) @greguintow.
📚 Fix various display issues on API documentation pages (#24526, #24503, #24504. #24517, #24417).
📐 Add a subset of MUI System as flatten props on the CSS utility components (Grid and Box so far, Typography and Stack coming later) (#24485, #24499) @mnajdova.
<Box m={2}>
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]useEventCallback args defaults to unknown[] (#24564) @eps1lonlocale prop to the Nextjs Link component (#24596) @CyanoFreshAll contributors of this release in alphabetical order: @artola, @CyanoFresh, @d3mp, @duganbrett, @eladmotola, @eps1lon, @ewldev, @greguintow, @KarimMokhtar, @kutnickclose, @lukaselmer, @mbrookes, @mnajdova, @mxsph, @natac13, @oliviertassinari, @povilass, @praveenkumar-kalidass, @TimonPllkrn, @tonysepia, @vicasas, @vinyldarkscratch, @xs9627
Jan 14, 2021
A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
📚 Only document public paths in module augmentation (#24267) @eps1lon
👩🎤 Migrate the Paper and CssBaseline to emotion (#24397, #24176) @povilass @mnajdova
We have reached a point where we feel confident that the new approach should make it to v5 stable. An issue has been created to track the progress with the migration to emotion: #24405. Your contribution to this effort and the ones from the community are welcome 🙌.
📅 Various improvements on the date picker components (#24301, #24309, #24275, #24298, #24319) @m4theushw @eps1lon @huzaima @praveenkumar-kalidass
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]/@material-ui/[email protected]@material-ui/[email protected][DateRangePicker] Remove DateRangDelimiter (#24298) @huzaima
You can migrate away from it with:
diff --git a/docs/src/pages/components/date-range-picker/BasicDateRangePicker.tsx b/docs/src/pages/components/date-range-picker/BasicDateRangePicker.tsx
index 72a89f9a11..2742fa6811 100644
--- a/docs/src/pages/components/date-range-picker/BasicDateRangePicker.tsx
+++ b/docs/src/pages/components/date-range-picker/BasicDateRangePicker.tsx
@@ -3,7 +3,7 @@ import TextField from '@material-ui/core/TextField';
import DateRangePicker, { DateRange } from '@material-ui/lab/DateRangePicker';
import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
import LocalizationProvider from '@material-ui/lab/LocalizationProvider';
-import DateRangeDelimiter from '@material-ui/lab/DateRangeDelimiter';
+import Box from '@material-ui/core/Box';
export default function BasicDateRangePicker() {
const [value, setValue] = React.useState<DateRange<Date>>([null, null]);
@@ -20,7 +20,7 @@ export default function BasicDateRangePicker() {
renderInput={(startProps, endProps) => (
<React.Fragment>
<TextField {...startProps} variant="standard" />
- <DateRangeDelimiter> to </DateRangeDelimiter>
+ <Box sx={{ mx: 2 }}>to</Box>
<TextField {...endProps} variant="standard" />
</React.Fragment>
)}
@material-ui/[email protected]/@material-ui/[email protected]GlobalStyles component (#24176) @mnajdovaJan 4, 2021
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected]/@material-ui/[email protected]sx (#24211) @mnajdova@material-ui/[email protected]ClockProps#getClockLabelText (#24193) @eps1lonDec 30, 2020
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
tabIndex={0} or customizing the getTabbable prop.@material-ui/[email protected]/@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]/@material-ui/[email protected]Dec 21, 2020
A big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
👩🎤 Migrate the Typography to emotion (#23841) @DanailH
This change allows to add typography variants in the theme and to use them directly:
const theme = createMuiTheme({
typography: {
poster: {
color: 'red',
},
},
});
<Typography variant="poster">poster</Typography>;
📚 Add a shortcut to open the Algolia search (#23959) @hmaddisb.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]/@material-ui/[email protected][CssBaseline] Change body font size to body1 (1rem) (#24018) @mbrookes
The new default matches the variant used by the Typography component. To return to the previous size, you can override it in the theme:
const theme = createMuiTheme({
typography: {
body1: {
fontSize: '0.875rem',
},
},
});
@material-ui/[email protected]/@material-ui/[email protected]@material-ui/[email protected]Dec 13, 2020
A big thanks to the 24 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected][Icon][svgicon] Change default fontSize from default to medium (#23950) @mbrookes
The default value of fontSize was changed from default to medium for consistency.
In the unlikey event that you were using the value default, the prop can be removed:
-<SvgIcon fontSize="default">{iconPath}</SvgIcon>
+<SvgIcon>{iconPath}</SvgIcon>
[TextField] Add size prop for outlined and filled input (#23832) @mayralgr
Rename marginDense and inputMarginDense classes to sizeSmall and inputSizeSmall to match the prop.
details param (#23942) @natac13@material-ui/[email protected]@material-ui/[email protected][system] Move visually hidden helper to utils (#23974) @eps1lon
Only applies if you've installed v5.0.0-alpha.1
-import { visuallyHidden } from '@material-ui/system';
+import { visuallyHidden } from '@material-ui/utils';
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]theme.components options for the v5 components (#23896) @mnajdovaDec 3, 2020
A big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected][Box] Remove deprecated props (#23716) @mnajdova
All props are now available under the sx prop. A deprecation will be landing in v4.
Thanks to @mbrookes developers can automate the migration with a codemod.
-<Box p={2} bgcolor="primary.main">
+<Box sx={{ p: 2, bgcolor: 'primary.main' }}>
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]/@material-ui/[email protected]Nov 23, 2020
A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:
📚 Improve the IntelliSense support for the sx prop (#23599) @mnajdova.
You should now get a description for each property of MUI System. For instance with mx:
💅 Migrate the first core component to the v5 styling architecture (#23308) @mnajdova. We have spent the last few months iterating on the new styling approach in the lab, and are confident enough in the new approach to move it to the core, so we have migrated the Slider. We will wait a week or two to collect feedback on it, before scaling it to the rest of the codebase.
📅 Fix the first few issues on the date picker components since the migration in the lab.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected][Slider] Migrate to emotion (#23308) @mnajdova
By default, emotion injects its style after JSS, this breaks the computed styles. In order to get the correct CSS injection order until all the components are migrated, you need to wrap the root of your application with:
import * as React from 'react';
import ReactDOM from 'react-dom';
import { StylesProvider } from '@material-ui/core';
import App from './App';
ReactDOM.render(
<StylesProvider injectFirst>
<App />
</StylesProvider>,
document.querySelector('#root'),
);
This enforces emotion being injected first. More details in the documentation.
[Autocomplete] Rename closeIcon prop with clearIcon to avoid confusion (#23617) @akhilmhdh.
-<Autocomplete closeIcon={icon} />
+<Autocomplete clearIcon={icon} />
[Dialog] Remove the disableBackdropClick prop. It's redundant with the reason argument (#23607) @eps1lon.
<Dialog
- disableBackdropClick
- onClose={handleClose}
+ onClose={(event, reason) => {
+ if (reason !== 'backdropClick') {
+ onClose(event, reason);
+ }
+ }}
/>
[Modal] Remove the disableBackdropClick prop. It's redundant with the reason argument (#23607) @eps1lon.
<Modal
- disableBackdropClick
- onClose={handleClose}
+ onClose={(event, reason) => {
+ if (reason !== 'backdropClick') {
+ onClose(event, reason);
+ }
+ }}
/>
[Modal] Remove the onEscapeKeyDown prop. It's redundant with the reason argument. (#23571) @eps1lon
<Modal
- onEscapeKeyDown={handleEscapeKeyDown}
+ onClose={(event, reason) => {
+ if (reason === "escapeKeyDown") {
+ handleEscapeKeyDown(event);
+ }
+ }}
/>;
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]sx prop IntelliSense (#23599) @mnajdova@material-ui/[email protected]@material-ui/[email protected][DatePicker] Change the import path of the date adapters (#23568) @eps1lon. It better fits with the current import convention.
-import AdapterDateFns from '@material-ui/lab/dateAdapter/date-fns';
+import AdapterDateFns from '@material-ui/lab/AdapterDateFns';
Nov 14, 2020
A big thanks to the 34 contributors who made this release possible. Here are some highlights ✨:
📅 Migrate the date picker to the lab (#22692) @dmtrKovalenko. We have integrated the components with the code infrastructure. Next we will migrate all the GitHub issues from material-ui-pickers and archive the repository. This migration will help provide first-class support for the date picker components. The component will stay in the lab as long as necessary to reach the high-quality bar we have for core components. You can find the new documentation here.
While the source code is currently hosted in the main repository, we might move it to the x repository in the future, depending on what is easier for the commercial date range picker. The date picker will stay open source no matter what.
📚 Revamp the documentation for MUI System. The System contains CSS utilities. The documentation now promotes the use of the sx prop. It's ideal for adding one-off styles, for example padding, but when pushed to its limits, it can be used to implement quickly a complete page.
👩🎨 Upgrade emotion to v11 (#23007) @mnajdova.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected][TextField] Change default variant from standard to outlined (#23503) @mbrookes Standard has been removed from the Material Design guidelines. This codemod will automatically update your code.
-<TextField value="Standard" />
-<TextField value="Outlined" variant="outlined" />
+<TextField value="Standard" variant="standard" />
+<TextField value="Outlined" />
[Autocomplete] Remove debug in favor of open and dev tools (#23377) @eps1lon
There are a couple of simpler alternatives: open={true}, Chrome devtools "Emulate focused", or React devtools props.
disablePortal (#23263) @eps1lon@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Nov 4, 2020
A big thanks to the 20 contributors who made this release possible. Here are some highlights ✨:
⚛️ Add support for React 17 (#23311) @eps1lon.
React 17 release is unusual because it doesn't add any new developer-facing features. It was released a couple of days ago. You can learn more about it in the introduction post. Material UI now supports ^16.8.0 || ^17.0.0.
🛠 Introduce a new @material-ui/unstyled package (#23270) @mnajdova.
This package will host the unstyled version of the components. In this first iteration, only the Slider is available. You can find it documented under the same page as the styled version.
Why an unstyled package?
While engineering teams are successfully building custom design systems by wrapping Material UI, we occasionally hear that Material Design or our styling solution are something they don't need. Some teams prefer SASS, others prefer to customize the components starting from a pristine state. What all these teams have in common is that they value the features coming from the components, such as accessibility.
The unstyled package goes one step down in the abstraction layer, providing more flexibility. Angular Material introduced this approach two years ago. Today their unstyled components account for 25% of the usage.
Another reason for introducing this package is to prepare the groundwork for a second theme (not Material Design based).
A note on the terminology: "unstyled" means that the components have the same API as the "styled" components but come without CSS. Material UI also contains "headless" components that exposes a hook API, for example useAutocomplete or usePagination.
This change is part of our strategy to iterate on the v5 architecture with the Slider first. In the next alpha release, we plan to replace the v4 slider with the v5 slider. Once the new approach is stress-tested and validated, we will roll it out to all the components.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected][AppBar] Fix z-index when position="static" (#23325) @sujinleeme Remove z-index when position static and relative
[theme] Fix error message for augmentColor failure (#23371) @reedanders
The signature of theme.palette.augmentColor helper has changed:
-theme.palette.augmentColor(red);
+theme.palette.augmentColor({ color: red, name: 'brand' });
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]README.md (#23329) @mtsknnOct 23, 2020
A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
💄 Introduce a new sx prop (#23053, #23205) @mnajdova
We have resumed the work on Material UI System. This is made possible by the latest progress on the new styling solution of v5.
You can read the introduction blog post that we did for MUI System two years ago.
The system is meant to solve the following problems:
styled() API.makeStyles for the first time in a component is daunting. For example, it's why https://github.com/vscodeshift/material-ui-codemorphs#add-usestyles-hook exists. What if we had less code to type, gaining velocity when writing styles?This new iteration of MUI System brings two major improvements:
It moves from the support of a subset of CSS to the support of a superset of CSS. Learning the shorthand is optional. It's no longer necessary to moving back to styled() when MUI System doesn't support a specific CSS property.
It moves from support on Box only to any core component (starting with the slider).
import Slider from '@material-ui/lab/SliderStyled';
// Set the primary color and a vertical margin of 16px on desktop.
<Slider sx={{ color: 'primary.main', my: { xs: 0, md: 2 } }} />;
✨ Upgrade Popper.js from v1 to v2 (#21761) @joshwooding The change reduces the bundle size (-1 kB gzipped) while fixing bugs at the same time.
🐛 Fix broken nested imports with the icons package (#23157) @eps1lon The revamp of the bundling strategy in #22814 has broken the nested imports. Imports such as the one below should work again with this release:
import CloseIcon from '@material-ui/icons/Close';
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected][Popper] Upgrade to popper.js to v2 (#21761) @joshwooding This third-party library has introduced a lot of changes.
You can read their migration guide or the following summary:
The CSS prefixes have changed:
popper: {
zIndex: 1,
- '&[x-placement*="bottom"] $arrow': {
+ '&[data-popper-placement*="bottom"] $arrow': {
Method names have changed.
-popperRef.current.scheduleUpdate()
+popperRef.current.update()
-popperRef.current.update()
+popperRef.current.forceUpdate()
Modifiers' API has changed a lot. There are too many changes to be covered here.
[withMobileDialog] Remove this higher-order component (#23202) @RDIL The hook API allows a simpler and more flexible solution than the HOC:
-import withMobileDialog from '@material-ui/core/withMobileDialog';
+import { useTheme, useMediaQuery } from '@material-ui/core';
function ResponsiveDialog(props) {
- const { fullScreen } = props;
+ const theme = useTheme();
+ const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
const [open, setOpen] = React.useState(false);
// ...
-export default withMobileDialog()(ResponsiveDialog);
+export default ResponsiveDialog;
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected][AvatarGroup] Move from lab to core (#23121) @mbrookes Move the component from the lab to the core. This component will become stable.
-import AvatarGroup from '@material-ui/lab/AvatarGroup';
+import AvatarGroup from '@material-ui/core/AvatarGroup';
@material-ui/[email protected]@material-ui/[email protected]extendedIcon (#23160) @MatejKastakOct 17, 2020
A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨:
📦 Ship modern bundle (#22814) @eps1lon. This is a significant update to the browsers supported by Material UI. The previous policy was defined 2 years ago, and the landscape has evolved since then. The package now includes 4 bundles:
stable (default, formerly esm) which targets a snapshot (on release) of > 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11"node (formerly default) which targets a snapshot (on release) of maintained node versionslegacy (new) which is stable + IE 11modern (formerly es) which targets the last 1 version of evergreen browsers and active node (currently that is 14The change yields a 6% reduction in bundle size 📦 (Babel only).
In the coming weeks, we will refactor the internals to take advantage of the new browser capabilities that dropping these older platforms allows. For instance, we might be able to remove the span we render inside the <Button> to work around Flexbug #9.
Check the updated Supported platforms documentation and new "minimizing bundle size" guide.
If you target IE11, you need to use the new bundle (legacy). We are treating IE11 as a second class-citizen, which is a continuation of the direction taken in #22873.
🚀 Improve the internal benchmark suite (#22923, #23058) @mnajdova.
This was a prerequisite step to improve the system. We needed to be able to measure performance. After #22945, we have measured that the Box component is x3 faster in v5-alpha compared to v4.
✏️ A new blog post: Q3 2020 Update (#23055) @oliviertassinari.
🐙 Migrate more tests to react-testing-library @deiga, @Morteza-Jenabzadeh, @nicholas-l.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]@material-ui/[email protected]alpha() color utility instead of deprecated fade() (#22978) @joshwooding@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Oct 11, 2020
A big thanks to the 45 contributors who made this release possible. Here are some highlights ✨:
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.@material-ui/[email protected][Accordion] Remove display:flex from AccordionDetails (#22809) @croraf
The style was too opinionated. Most developers expect display: 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 to disableInteractive.
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>
renderInput (#22789) @eps1lonref (#22927) @lcswillemsfollowCursor (#22876) @xtrixia@material-ui/[email protected]@material-ui/[email protected][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
Remove onLabelClick and onIconClick.
yarn mocha (#22899) @eps1lonSep 26, 2020
A big thanks to the 29 contributors who made this release possible. Here are some highlights ✨:
👩🎨 A first iteration on the new styling solution.
You can find a new version of the slider in the lab powered by Emotion.
In the event that you are already using styled-components in your application, you can swap emotion for styled-components 💅. Check this CodeSandbox for a demo. It relies on aliases to prevent any bundle size overhead.
The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components.
Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved system).
This change has been in our roadmap for more than a year. We announced it in the v4 release blog post as a direction v5 would take.
🛠 A first iteration on the unstyled components.
You can find a new version of the slider in the lab without any styles. The unstyled component weighs 6.5 kB gzipped, compared with 26 kB for the styled version when used standalone. The component is best suited for use when you want to fully customize the look of the component without reimplementing the JavaScript and accessibility logic.
⚡️ A first alpha of the DataGrid component.
It has taken 6 months of development since the initial commit (March 15th, 2020) to make the first alpha release of the grid. The component comes in two versions: @material-ui/data-grid is licensed under MIT, while @material-ui/x-grid is licensed under a commercial license.
🪓 Keep working on the breaking changes.
We aim to complete most of the breaking changes during the alpha stage of v5. We will move to beta once all the breaking changes we have anticipated are handled. As always, you should find a clear and simple upgrade path for each of them. You can learn more about the breaking changes left to be done in #22700.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected][Chip] Rename default variant to filled (#22683) @mnajdova
Rename default variant to filled for consistency.
-<Chip variant="default">
+<Chip variant="filled">
[Tabs] Add allowScrollButtonsMobile prop for mobile view (#22700) @GauravKesarwani The API that controls the scroll buttons has been split it into two props:
scrollButtons prop controls when the scroll buttons are displayed depending on the space available.allowScrollButtonsMobile prop removes the CSS media query that systematically hides the scroll buttons on mobile.-<Tabs scrollButtons="on" />
-<Tabs scrollButtons="desktop" />
-<Tabs scrollButtons="off" />
+<Tabs scrollButtons allowScrollButtonsMobile />
+<Tabs scrollButtons />
+<Tabs scrollButtons={false} />
[theme] Improve breakpoints definitions (#22695) @mnajdova
Breakpoints are now treated as values instead of ranges.
The behavior of down(key) was changed to define media query less than the value defined with the corresponding breakpoint (exclusive).
The behavior of between(start, end) was also updated to define media query for the values between the actual values of start (inclusive) and end (exclusive).
Find examples of the changes required defined below:
-theme.breakpoints.down('sm') // '@media (max-width:959.95px)' - [0, sm + 1) => [0, md)
+theme.breakpoints.down('md') // '@media (max-width:959.95px)' - [0, md)
-theme.breakpoints.between('sm', 'md') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, md + 1) => [sm, lg)
+theme.breakpoints.between('sm', 'lg') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, lg)
[theme] Rename type to mode (#22687) @mnajdova
Renames theme.palette.type to theme.palette.mode, to better follow the "dark mode" term that is usually used for describing this feature.
import { createMuiTheme } from '@material-ui/core/styles';
-const theme = createMuiTheme({palette: { type: 'dark' }}),
+const theme = createMuiTheme({palette: { mode: 'dark' }}),
The changes are supported by the adaptV4Theme() for easing the migration
@material-ui/[email protected][Alert] Move from lab to core (#22651) @mbrookes Move the component from the lab to the core. This component will become stable.
-import Alert from '@material-ui/lab/Alert';
-import AlertTitle from '@material-ui/lab/AlertTitle';
+import Alert from '@material-ui/core/Alert';
+import AlertTitle from '@material-ui/core/AlertTitle';
[Rating] Move from lab to core (#22725) @mbrookes Move the component from the lab to the core. This component will become stable.
-import Rating from '@material-ui/lab/Rating';
+import Rating from '@material-ui/core/Rating';
[Skeleton] Move from lab to core (#22740) @mbrookes Move the component from the lab to the core. This component will become stable.
-import Skeleton from '@material-ui/lab/Skeleton';
+import Skeleton from '@material-ui/core/Skeleton';
[Autocomplete] Get root elements of options via renderOption (#22591) @ImanMahmoudinasab After this change, the full DOM structure of the option is exposed. It makes customizations easier. You can recover from the change with:
<Autocomplete
- renderOption={(option, { selected }) => (
- <React.Fragment>
+ renderOption={(props, option, { selected }) => (
+ <li {...props}>
<Checkbox
icon={icon}
checkedIcon={checkedIcon}
style={{ marginRight: 8 }}
checked={selected}
/>
{option.title}
- </React.Fragment>
+ </li>
)}
/>
@material-ui/[email protected]The new default style engine leveraging emotion.
@material-ui/[email protected]Allows developer to swap emotion with styled-components. More documentation are coming.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Sep 15, 2020
A big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected][Accordion] Normalize focusVisible logic (#22567) @oliviertassinari
Rename focused to focusVisible for consistency with the other components:
<Accordion
classes={{
- focused: 'custom-focus-visible-classname',
+ focusVisible: 'custom-focus-visible-classname',
}}
/>
[Stepper] Remove Paper and built-in padding (#22564) @mbrookes
The root component (Paper) was replaced with a <div>. Stepper no longer has elevation, nor inherits Paper's props. This change is meant to encourage composition.
-<Stepper elevation={2}>
- <Step>
- <StepLabel>Hello world</StepLabel>
- </Step>
-</Stepper>
+<Paper square elevation={2}>
+ <Stepper>
+ <Step>
+ <StepLabel>Hello world</StepLabel>
+ </Step>
+ </Stepper>
+<Paper>
Remove the built-in 24px padding for consistency with the other components that avoid reserving space anytime it's possible.
-<Stepper>
- <Step>
- <StepLabel>Hello world</StepLabel>
- </Step>
-</Stepper>
+<Stepper style={{ padding: 24 }}>
+ <Step>
+ <StepLabel>Hello world</StepLabel>
+ </Step>
+</Stepper>
[theme] Always return default spacing value with px units (#22552) @mbrookes
theme.spacing now returns single values with px units by default.
This change improves the integration with styled-components & emotion (with the CSS template strings syntax).
Before:
theme.spacing(2) => 16
After:
theme.spacing(2) => '16px'
[theme] Remove palette.text.hint key (#22537) @mbrookes
The theme.palette.text.hint key was available but unused in Material UI v4 components.
You can use adaptV4Theme() to restore the previous behavior.
@material-ui/[email protected][Rating] Use different shape for empty and filled icons (#22554) @oliviertassinari
Change the default empty icon to improve accessibility (1.4.1 WCAG 2.1).
If you have a custom icon prop but no emptyIcon prop, you can restore the previous behavior with:
<Rating
icon={customIcon}
+ emptyIcon={null}
/>
Sep 6, 2020
A big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected]onRendered prop from Modal and Portal (#22464) @eps1lon
Depending on your use case either use a callback ref on the child element or an effect hook in the child component.@material-ui/[email protected]Aug 31, 2020
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
const theme = createMuiTheme({
components: {
MuiIconButton: {
defaultProps: {
size: 'small',
},
styleOverrides: {
sizeSmall: {
marginLeft: 4,
marginRight: 4,
padding: 12,
},
},
},
},
});
✨ Add text in divider support (#22285) @ShehryarShoukat96
<Divider>{'CENTER'}</Divider>
♿️ A bunch of accessibility fixes (#22366, #22374, #22377, #22340, #22376) @fakeharahman @alexmotoc @eps1lon @oliviertassinari
⚛️ Increase adoption of TypeScript in the codebase (#22389, #22367, #22282) @Luchanso, @oliviertassinari
@material-ui/[email protected][theme] Rename theme keys to defaultProps and styleOverrides (#22347) @mnajdova
[theme] Restructure component definitions (#22293) @mnajdova
The components' definition inside the theme were restructure under the components key, to allow people easier discoverability about the definitions regarding one component.
props import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
- props: {
- MuiButton: {
- disableRipple: true,
- },
- },
+ components: {
+ MuiButton: {
+ defaultProps: {
+ disableRipple: true,
+ },
+ },
+ },
});
overrides import { createMuiTheme } from '@material-ui/core/styles';
const theme = createMuiTheme({
- overrides: {
- MuiButton: {
- root: { padding: 0 },
- },
- },
+ components: {
+ MuiButton: {
+ styleOverrides: {
+ root: { padding: 0 },
+ },
+ },
+ },
});
Note that if you don't have the time to upgrade the structure of the theme, you
can use the adaptV4Theme() adapter.
[GridList] Rename to ImageList (#22311) @mbrookes
[GridList] Rename Tile to Item (#22385) @mbrookes
Rename the GridList components to ImageList to align with the current Material Design naming.
-import GridList from '@material-ui/core/GridList';
-import GridListTile from '@material-ui/core/GridListTile';
-import GridListTileBar from '@material-ui/core/GridListTileBar';
+import ImageList from '@material-ui/core/ImageList';
+import ImageListItem from '@material-ui/core/ImageListItem';
+import ImageListItemBar from '@material-ui/core/ImageListItemBar';
-<GridList>
- <GridListTile>
+<ImageList>
+ <ImageListItem>
- <GridListTileBar
+ <ImageListItemBar
title="Title"
subtitle="Subtitle"
/>
- </GridListTile>
-</GridList>
+ </ImageListItem>
+</ImageList>
@material-ui/[email protected]classes prop (#22312) @eps1lon@material-ui/[email protected]@material-ui/[email protected]classes prop (#22312) @eps1lon@types/yargs (#22339) @eps1lonAug 22, 2020
A big thanks to the 22 contributors who made this release possible. Here are some highlights ✨:
@material-ui/[email protected][Menu] Remove transition onX props (#22212) @mbrookes The onE* transition props were removed. Use TransitionProps instead.
<Menu
- onEnter={onEnter}
- onEntered={onEntered},
- onEntering={onEntered},
- onExit={onEntered},
- onExited={onEntered},
- onExiting={onEntered}
+ TransitionProps={{
+ onEnter,
+ onEntered,
+ onEntering,
+ onExit,
+ onExited,
+ onExiting,
+ }}
>
[Popover] Remove transition onX props (#22184) @mbrookes The onE* transition props were removed. Use TransitionProps instead.
<Popover
- onEnter={onEnter}
- onEntered={onEntered},
- onEntering={onEntered},
- onExit={onEntered},
- onExited={onEntered},
- onExiting={onEntered}
+ TransitionProps={{
+ onEnter,
+ onEntered,
+ onEntering,
+ onExit,
+ onExited,
+ onExiting,
+ }}
/>
[TextField] Improve line-height reset (#22149) @imnasnainaec Increase the line-height by 4px to support long descender on special alphabets. If you were overriding the input vertical padding, reduce it by 4px.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@global being considered a class (#22297) @eps1lonAug 13, 2020
A big thanks to the 26 contributors who made this release possible. Here are some highlights ✨:
💅 Introduce a new dynamic variant API (#21648) @mnajdova. This API allows developers to add new variants on the Material UI's components right from the theme, without having to wrap the components. For instance with the Button:
// Define the style that should be applied, for specific props.
const theme = createMuiTheme({
variants: {
MuiButton: [
{
props: { variant: 'dashed', color: 'secondary' },
styles: {
border: `4px dashed ${red[500]}`,
},
},
],
},
});
// Retain type safety.
declare module '@material-ui/core/Button/Button' {
interface ButtonPropsVariantOverrides {
dashed: true;
}
}
// Enjoy!
<Button variant="dashed" />;
More details in the documentation and RFC.
👮 Add documentation for the FocusTrap component (#22062) @oliviertassinari.
⚛️ Prepare support for React v17 (#22093, #22105, #22143, #22111) @eps1lon.
🚧 We have undertaken breaking changes.
@material-ui/[email protected][Avatar] Rename variant circle -> circular for consistency (#22015) @kodai3
Rename circle to circular for consistency. The possible values should be adjectives, not nouns:
-<Avatar variant="circle">
+<Avatar variant="circular">
[Badge] Rename overlap circle -> circular and rectangle -> rectangular for consistency (#22050) @kodai3
Rename circle to circular and rectangle to rectangular for consistency. The possible values should be adjectives, not nouns:
-<Badge overlap="circle">
-<Badge overlap="rectangle">
+<Badge overlap="circular">
+<Badge overlap="rectangular">
[CircularProgress] Remove static variant, simplify determinate (#22060) @mbrookes
The static variant has been merged into the determinate variant, with the latter assuming the appearance of the former.
The removed variant was rarely useful. It was an exception to Material Design, and was removed from the specification.
-<CircularProgress variant="determinate" />
-<CircularProgress variant="static" classes={{ static: 'className' }} />
+<CircularProgress variant="determinate" classes={{ determinate: 'className' }} />
[Dialog] Remove transition onX props (#22113) @mbrookes The onE* transition props were removed. Use TransitionProps instead.
<Dialog
- onEnter={onEnter}
- onEntered={onEntered},
- onEntering={onEntered},
- onExit={onEntered},
- onExited={onEntered},
- onExiting={onEntered}
+ TransitionProps={{
+ onEnter,
+ onEntered,
+ onEntering,
+ onExit,
+ onExited,
+ onExiting,
+ }}
/>
[Fab] Rename round -> circular for consistency (#21903) @kodai3
Rename round to circular for consistency. The possible values should be adjectives, not nouns:
-<Fab variant="round">
+<Fab variant="circular">
[List] Improve hover/select/focus UI display (#21930) @joshwooding
[Pagination] Rename round -> circular for consistency (#22009) @kodai3
Rename round to circular for consistency. The possible values should be adjectives, not nouns:
-<Pagination shape="round">
-<PaginationItem shape="round">
+<Pagination shape="circular">
+<PaginationItem shape="circular">
[RootRef] Remove component (#21974) @eps1lon
This component was removed. You can get a reference to the underlying DOM node of our components via ref prop.
The component relied on ReactDOM.findDOMNode which is deprecated in React.StrictMode.
-<RootRef rootRef={ref}>
- <Button />
-</RootRef>
+<Button ref={ref} />
[Snackbar] Change the default position on desktop (#21980) @kodai3 The notification now displays at the bottom left on large screens. It better matches the behavior of Gmail, Google Keep, material.io, etc. You can restore the previous behavior with:
-<Snackbar />
+<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
[Snackbar] Remove transition onX props (#22107) @mbrookes The onE* transition props were removed. Use TransitionProps instead.
<Snackbar
- onEnter={onEnter}
- onEntered={onEntered},
- onEntering={onEntered},
- onExit={onEntered},
- onExited={onEntered},
- onExiting={onEntered}
+ TransitionProps={{
+ onEnter,
+ onEntered,
+ onEntering,
+ onExit,
+ onExited,
+ onExiting,
+ }}
/>
[TextareaAutosize] Rename rowsMax->maxRows & rowsMin->minRows (#21873) @mhayk
Rename rowsMin/rowsMax prop with mi Rows/maxRows for consistency with HTML attributes.
-<TextField rowsMax={6}>
-<TextareAutosize rowsMin={1}>
-<TextareAutosize rowsMax={6}>
+<TextField maxRows={6}>
+<TextareAutosize minRows={1}>
+<TextareAutosize maxRows={6}>
[TextField] Better isolate static textarea behavior to dynamic one (#21995) @AxartInc
Better isolate the fixed textarea height behavior to the dynamic one.
You need to use the rowsMin prop in the following case:
-<TextField rows={2} rowsMax={5} />
+<TextField rowsMin={2} rowsMax={5} />
Remove the rows prop, use the rowsMin prop instead.
This change aims to clarify the behavior of the prop.
-<TextareaAutosize rows={2} />
+<TextareaAutosize rowsMin={2} />
[theme] Remove theme.mixins.gutters (#22109) @joshwooding The abstraction hasn't proven to be used frequently enough to be valuable.
-theme.mixins.gutters(),
+paddingLeft: theme.spacing(2),
+paddingRight: theme.spacing(2),
+[theme.breakpoints.up('sm')]: {
+ paddingLeft: theme.spacing(3),
+ paddingRight: theme.spacing(3),
+},
@material-ui/[email protected][Skeleton] Rename variant circle -> circular and rect -> rectangular for consistency (#22053) @kodai3
Rename circle to circular and rect to rectangular for consistency. The possible values should be adjectives, not nouns:
-<Skeleton variant="circle">
-<Skeleton variant="rect">
+<Skeleton variant="circular">
+<Skeleton variant="rectangular">
@material-ui/[email protected]import * as React from 'react'; (#22058) @mbrookesJuly 28, 2020
A big thanks to the 18 contributors who made this release possible.
@material-ui/[email protected][Grid] Rename justify prop to justifyContent (#21845) @mnajdova
Rename justify prop with justifyContent to be aligned with the CSS property name.
-<Grid justify="center">
+<Grid justifyContent="center">
index public in the ValueLabel props (#21932) @govardhan-srinivas@material-ui/[email protected]typescript-to-proptypes-ignore directives (#21867) @eps1lonJuly 19, 2020
A big thanks to the 11 contributors who made this release possible.
@material-ui/[email protected]component prop or as an immediate children has been dropped. If you were using unstable_createStrictModeTheme or didn't see any warnings related to findDOMNode in React.StrictMode then you don't need to do anything.
Otherwise check out the "Caveat with refs" section in our composition guide to find out how to migrate.
This change affects almost all components where you're using the component prop or passing children to components that require children to be elements (for example <MenuList><CustomMenuItem /></MenuList>)React.cloneElement() API.
This change makes composition easier.@material-ui/[email protected]July 12, 2020
A big thanks to the 14 contributors who made this release possible.
@material-ui/[email protected]@material-ui/[email protected]multiple (#21692, #21670) @weslenng, @eps1lon@document directive from IntelliSense (#21688) @eps1lonJuly 4, 2020
A big thanks to the 16 contributors who made this release possible.
@material-ui/[email protected][Button] Make primary the default color (#21594) @mbrookes
The button color prop is now "primary" by default, and "default" has been removed. This makes the button closer to the Material Design specification and simplifies the API.
-<Button color="default" />
-<Button color="primary" />
+<Button />
+<Button />
[ExpansionPanel] Remove component (#21630) @mnajdova This completes our effort on renaming the ExpansionPanel component Accordion
[Collapse] Add orientation and horizontal support (#20619) @darkowic
The collapsedHeight prop was renamed collapsedSize to support the horizontal direction.
-<Collapse collapsedHeight={40}>
+<Collapse collapsedSize={40}>
@material-ui/[email protected]June 27, 2020
A big thanks to the 33 contributors who made this release possible. Here are some highlights ✨:
LoadingButton component in the lab (#21389) @mnajdova.@material-ui/[email protected][Divider] Use border instead of background color (#18965) @mikejav. It prevents inconsistent height on scaled screens. For people customizing the color of the border, the change requires changing the override CSS property:
.MuiDivider-root {
- background-color: #f00;
+ border-color: #f00;
}
[Rating] Rename visuallyhidden to visuallyHidden for consistency (#21413) @mnajdova.
<Rating
classes={{
- visuallyhidden: 'custom-visually-hidden-classname',
+ visuallyHidden: 'custom-visually-hidden-classname',
}}
/>
[Typography] Replace the srOnly prop so as to not duplicate the capabilities of System (#21413) @mnajdova.
-import Typography from '@material-ui/core/Typography';
+import { visuallyHidden } from '@material-ui/utils';
+import styled from 'styled-component';
+const Span = styled('span')(visuallyHidden);
-<Typography variant="srOnly">Create a user</Typography>
+<Span>Create a user</Span>
[TablePagination] Add showFirstButton and showLastButton support (#20750) @ShahAnuj2610.
The customization of the table pagination's actions labels must be done with the getItemAriaLabel prop. This increases consistency with the Pagination component.
<TablePagination
- backIconButtonText="Avant"
- nextIconButtonText="Après
+ getItemAriaLabel={…}
[ExpansionPanel] Rename to Accordion (#21494) @mnajdova. Use a more common the naming convention:
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionActions from '@material-ui/core/AccordionActions';
-<ExpansionPanel>
+<Accordion>
- <ExpansionPanelSummary>
+ <AccordionSummary>
<Typography>Location</Typography>
<Typography>Select trip destination</Typography>
- </ExpansionPanelSummary>
+ </AccordionSummary>
- <ExpansionPanelDetails>
+ <AccordionDetails>
<Chip label="Barbados" onDelete={() => {}} />
<Typography variant="caption">Select your destination of choice</Typography>
- </ExpansionPanelDetails>
+ </AccordionDetails>
<Divider />
- <ExpansionPanelActions>
+ <AccordionActions>
<Button size="small">Cancel</Button>
<Button size="small" color="primary">Save</Button>
- </ExpansionPanelActions>
+ </AccordionActions>
-</ExpansionPanel>
+</Accordion>
[BottomNavigation] TypeScript: The event in onChange is no longer typed as a React.ChangeEvent but React.SyntheticEvent.
-<BottomNavigation onChange={(event: React.ChangeEvent<{}>) => {}} />
+<BottomNavigation onChange={(event: React.SyntheticEvent) => {}} />
[Slider] TypeScript: The event in onChange is no longer typed as a React.ChangeEvent but React.SyntheticEvent.
-<Slider onChange={(event: React.ChangeEvent<{}>, value: unknown) => {}} />
+<Slider onChange={(event: React.SyntheticEvent, value: unknown) => {}} />
[Tabs] TypeScript: The event in onChange is no longer typed as a React.ChangeEvent but React.SyntheticEvent.
-<Tabs onChange={(event: React.ChangeEvent<{}>, value: unknown) => {}} />
+<Tabs onChange={(event: React.SyntheticEvent, value: unknown) => {}} />
[Accordion] TypeScript: The event in onChange is no longer typed as a React.ChangeEvent but React.SyntheticEvent.
-<Accordion onChange={(event: React.ChangeEvent<{}>, expanded: boolean) => {}} />
+<Accordion onChange={(event: React.SyntheticEvent, expanded: boolean) => {}} />
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]onChange implementations with a generic react event (#21552) @eps1lonJul 27, 2021
@material-ui/[email protected]All contributors of this release in alphabetical order: @eps1lon, @mnajdova, @HumbertoL, @oliviertassinari, @Siv-tspab
Jul 19, 2021
@material-ui/[email protected]All contributors of this release in alphabetical order: @eps1lon, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @serenalin121
July 7, 2021
This release is released to fix the package.json generation in the previous release.
July 6, 2021
A big thanks to the 12 contributors who made this release possible. It includes deprecations that should help developers to have an easier adoption of v5.
css prop in favor of sx prop (#23480) @mnajdovaApr 27, 2021
A big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
We fixed an issue related to some packages using incompatible versions of @material-ui/types. This affected @material-ui/core, @material-ui/lab, and @material-ui/styles
`@material-ui/[email protected] accidentally included a breaking change.
All contributors of this release in alphabetical order: @DanailH, @dtassone, @eps1lon, @mbrookes, @michal-perlakowski, @oliviertassinari
This release is intended to help prepare the migration to Material UI v5 ⏫:
You can expect similar releases like this one in the coming months.
@material-ui/[email protected]fade() color utility in favor of alpha() (#22837) @mnajdovacss prop in favor of sx prop (#23480) @mnajdovaJan 24, 2021
This release fixes an important issue with Chrome 88. The usage of NaN as a CSS property with JSS throws an exception.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Dec 2, 2020
This release widens the peer dependency scope of React to accept ^17.0.0. The change makes it easier for developers to upgrade React independently from Material UI. The best support for React 17 will be found in Material UI v5.
This is a reminder that all ongoing work has moved to v5. This means a feature freeze on v4. The development of v4 is limited to important bug fixes, security patches and easing the upgrade path to v5.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Nov 24, 2020
A big thanks to the 12 contributors who made this release possible.
@material-ui/[email protected]@material-ui/[email protected]July 1, 2020
A big thanks to the 8 contributors who made this release possible.
@material-ui/[email protected][ExpansionPanel] Prepare renaming to Accordion, add warnings (#21560) @mnajdova It uses a more common naming convention:
-import ExpansionPanel from '@material-ui/core/ExpansionPanel';
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary';
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails';
-import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions';
+import Accordion from '@material-ui/core/Accordion';
+import AccordionSummary from '@material-ui/core/AccordionSummary';
+import AccordionDetails from '@material-ui/core/AccordionDetails';
+import AccordionActions from '@material-ui/core/AccordionActions';
-<ExpansionPanel>
+<Accordion>
- <ExpansionPanelSummary>
+ <AccordionSummary>
<Typography>Location</Typography>
<Typography>Select trip destination</Typography>
- </ExpansionPanelSummary>
+ </AccordionSummary>
- <ExpansionPanelDetails>
+ <AccordionDetails>
<Chip label="Barbados" onDelete={() => {}} />
<Typography variant="caption">Select your destination of choice</Typography>
- </ExpansionPanelDetails>
+ </AccordionDetails>
<Divider />
- <ExpansionPanelActions>
+ <AccordionActions>
<Button size="small">Cancel</Button>
<Button size="small">Save</Button>
- </ExpansionPanelActions>
+ </AccordionActions>
-</ExpansionPanel>
+</Accordion>
June 11, 2020
⚠️ This release marks the end of the active development on the v4.x versions, after 18 months of development.
We are moving all ongoing efforts to v5 (next branch) ✨.
This means a feature freeze on v4. The development of this version will be limited to important bug fixes, security patches, and easing the upgrade path to v5.
You can follow our progress on the v5 milestone. We will make the documentation of the v5 alpha releases available under https://next.mui.com/, starting next week (weekly releases, as usual).
A big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:
Introduce a new Timeline component (#21331) @mnajdova.
You can find the component in the lab.
Simplify the theme overrides with TypeScript for the components in the lab (#21279) @CarsonF.
In order to benefit from the CSS overrides with the theme and the lab components, TypeScript users need to import the following types. Internally, it uses module augmentation to extend the default theme structure with the extension components available in the lab.
// 1. augment the theme
import type '@material-ui/lab/themeAugmentation';
// 2. override
const theme = createMuiTheme({
overrides: {
MuiTimeline: {
root: {
backgroundColor: 'red',
},
},
},
});
Minify error messages in production (#21214) @eps1lon.
Using the React error decoder as inspiration, the exceptions thrown by Material UI in production are now minified. You will be redirected to the documentation to decode the error.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]$ExpectError to @ts-expect-error (#21308) @eps1lonJune 1, 2020
A big thanks to the 21 contributors who made this release possible.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/utils (#21240) @eps1lonMay 23, 2020
A big thanks to the 30 contributors who made this release possible.
Here are some highlights ✨:
🦴 Allow Skeleton to infer its dimensions from the children (#21097) @mikew. In the following example, the skeleton will take the size of the avatar.
<Skeleton>
<Avatar />
</Skeleton>
Follow the docs to learn more.
♿️ Add tabs accessibility docs section (#20965) @eps1lon.
The behavior of the keyboard navigation can be customized with the selectionFollowsFocus prop.
ℹ Improve tooltip arrow customizability (#21095) @sakulstra. The arrow background color and border can now be customized independently.
🔘 Add vertical support to the ToggleButton component (#21051) @xiaomaini
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]May 11, 2020
A big thanks to the 19 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]selectionFollowsFocus (#20936) @eps1lon@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]react@next (#20966) @eps1lonMay 4, 2020
A big thanks to the 27 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Apr 27, 2020
A big thanks to the 32 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/react-transition-group (#20699) @eps1lonApr 18, 2020
A big thanks to the 25 contributors who made this release possible.
@material-ui/[email protected]children type from element to Node (#20577) @alielkhateeb@material-ui/[email protected]Apr 11, 2020
A big thanks to the 20 contributors who made this release possible.
Here are some highlights ✨:
⚛️ Migrate more descriptions of the props to TypeScript (#20342) @eps1lon.
The coverage has increased from 50 to 75 components. We are working on migrating the 48 missing components.
🦋 Fix support for portals and dropped events with ClickAwayListener (#20406, #20409) @NMinhNguyen, @seare-kidane.
♿️ Fix 3 accessibility issues (#20489, #20432, #20475) @arturbien, @ShehryarShoukat96.
And many more 🐛 bug fixes and 📚 improvements.
Over the last 3 months, we have focused exclusively on making patch releases. We have done 11 so far. We have optimized for stability. In the coming weeks, we will initiate our work on the next major: v5. You can expect the following:
@material-ui/[email protected]@global override (#20454) @eps1lonchildren (#20450) @NMinhNguyenchildren (#20458) @NMinhNguyen@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]react@next (#20472) @eps1lonApr 4, 2020
A big thanks to the 20 contributors who made this release possible.
@material-ui/[email protected]direction as optional in TypeScript (#20338) @maksimgm@material-ui/[email protected]focused prop (#20276) @dmtrKovalenkoMar 28, 2020
A big thanks to the 24 contributors who made this release possible.
Here are some highlights ✨:
⚛️ Improve the DX, migrate a couple of props' descriptions to TypeScript (#20298, #20171, #20264) @eps1lon.
The coverage has increase from 17 to 50 components. We are working on migrating the 94 missing components.
⚛️ Improve the DX, add debug information when using hooks (#19515) @eps1lon.
For instance, with the useMediaQuery hook
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]@material-ui/[email protected]Mar 19, 2020
@material-ui/[email protected]Mar 18, 2020
A big thanks to the 39 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]onChange and page (#19964) @eps1lon@default over default values (#19966) @eps1lonFeb 29, 2020
A big thanks to the 15 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]Feb 23, 2020
A big thanks to the 18 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]component prop (#19790) @stevenmusumeche@material-ui/[email protected]Feb 16, 2020
A big thanks to the 18 contributors who made this release possible.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Feb 9, 2020
A big thanks to the 24 contributors who made this release possible.
@material-ui/[email protected]@material-ui/[email protected]@date-ui/ updates (#19633) @eps1lonFeb 2, 2020
A big thanks to the 39 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]fullWidth prop to FormControl context (#19369) @EsoterikStare@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@ts-ignore usage (#19504) @eps1lonJan 22, 2020
A big thanks to the 43 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]expanded (#19332) @eps1lon@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Jan 6, 2020
A big thanks to the 19 contributors who made this release possible.
Here are some highlights since 4.8.0 ✨:
@material-ui/[email protected]hidden class key to Collapse typings (#19044) @pvdstel@material-ui/[email protected]Dec 30, 2019
A big thanks to the 22 contributors who made this release possible.
@material-ui/[email protected]dividers class types (#18984) @NickCis@material-ui/[email protected]@material-ui/[email protected][Skeleton] Add wave animation support (#19014) @oliviertassinari
-<Skeleton disableAnimation />
+<Skeleton animation={false} />
Dec 24, 2019
A big thanks to the 24 contributors who made this release possible.
@material-ui/[email protected]@material-ui/[email protected]ChipProps prop (#18917) @ChrisWilesDec 14, 2019
A big thanks to the 29 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]popperArrow to TooltipClassKey (#18772) @umidbekkarimov@material-ui/[email protected]readOnly to disabled in text-fields.md example (#18792) @sterjoskiDec 7, 2019
A big thanks to the 18 contributors who made this release possible.
@material-ui/[email protected]@material-ui/[email protected]ssrMatchMedia required for client rending as well (#18680) @moshestDec 1, 2019
A big thanks to the 27 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@babel/* deps (#18552) @eps1lonNov 28, 2019
@material-ui/[email protected][Portal] Fix circular PortalProps Types (#18602)
Fix TypeScript 3.7 support
Nov 22, 2019
A big thanks to the 27 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]displayName (#18481) @NMinhNguyenarrow prop (#18323) @goleary@material-ui/[email protected]Nov 12, 2019
A big thanks to the 19 contributors who made this release possible.
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]diff --git a/docs/src/pages/components/autocomplete/FixedTags.js b/docs/src/pages/components/autocomplete/FixedTags.js
index 757d66a97..a4f36edd5 100644
--- a/docs/src/pages/components/autocomplete/FixedTags.js
+++ b/docs/src/pages/components/autocomplete/FixedTags.js
@@ -11,17 +11,9 @@ export default function FixedTags() {
options={top100Films}
getOptionLabel={option => option.title}
defaultValue={[top100Films[6], top100Films[13]]}
- renderTags={(value, { className, onDelete }) =>
+ renderTags={(value, getTagProps) =>
value.map((option, index) => (
- <Chip
- key={index}
- disabled={index === 0}
- data-tag-index={index}
- tabIndex={-1}
- label={option.title}
- className={className}
- onDelete={onDelete}
- />
+ <Chip disabled={index === 0} label={option.title} {...getTagProps({ index })} />
))
}
style={{ width: 500 }}
Nov 5, 2019
A big thanks to the 26 contributors who made this release possible.
Here are some highlights ✨:
The positive feedback we had this early version of the component is encouraging. Developers should be able to rely on it in production within a couple of weeks (from a bug perspective). We will take more time to stabilize the API, a couple of months.
By chance, it's the third year in a row we release on november 5th. The number of contributors involved, for a similar one-week period, has grown from 12 contributors (2017) to 16 contributors (2018) to 26 contributors (2019). We are proud of the community. Let's keep this trend going 🚀.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/* packages for CodeSandbox CI (#18100) @eps1lonOct 28, 2019
A big thanks to the 48 contributors who made this release possible!
Here are some highlights ✨:
🔍 Introduce a new Autocomplete component in the lab to support the autocomplete, combobox and multi-select use cases (#17037) @dreamsinspace.
This new component will replace the third-party integration examples once it graduates from the lab to the core. It was one of the most requested features (by number of 👍 on the corresponding issue).
📚 Show the JSX by default for small examples (#17831) @mbrookes.
♿️ Improve Gatsby's Modal support (#17972) @sreetej1998.
🐛 Better support Preact (#18027) @glromeo.
💅 Improve Chrome autofill dark theme support (#17863) @MAkerboom.
📚 Add new context menu demo (#17839) @SarthakC.
@material-ui/[email protected]component (#17825) @Nikhil-Pavan-Sai@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]react@next (#18008) @eps1lonOct 12, 2019
A big thanks to the 28 contributors who made this release possible!
Here are some highlights ✨:
📚 Change imports from @material-ui/styles to @material-ui/core/styles (#17447) @mnemanja
The presence of two almost identical import paths has been a source of confusion: @material-ui/styles and @material-ui/core/styles.
Starting with v4.5.1, the documentation mentions @material-ui/core/styles as much as possible.
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
This change removes the need to install the @material-ui/styles package directly.
It prevents the duplication of @material-ui/styles in bundles and avoids confusion.
You can learn more about the difference in the documentation.
♿️ Improve the accessibility of the table and select components (#17696, #17773) @adeelibr, @eps1lon.
📊 Launch a Developer Survey as a precursor to a major DatePicker enhancement effort.
💄 Add support for different slider track mode (#17714) @slipmat.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Oct 2, 2019
A big thanks to the 20 contributors who made this release possible!
Here are some highlights ✨:
💄 Add startIcon and endIcon props for the button (#17600) @mbrookes
import DeleteIcon from '@material-ui/icons/Delete';
<Button startIcon={<DeleteIcon />}>Delete</Button>;
🔐 Add support for Chrome autofill (#17436, #17552) @croraf
💅 Adjust table styles to match spec (#17388) @kybarg
💅 Adjust menu styles to match spec (#17332) @damir-sirola
💅 Adjust chip styles to match spec (#17584) @oliviertassinari
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]@material-ui/[email protected][Slider] Remove from the lab (#17528) @oliviertassinari
-import { Slider } from '@material-ui/lab';
+import { Slider } from '@material-ui/core';
@material-ui/[email protected]style function (#17534) @abukurov@material-ui/[email protected]@material-ui/[email protected]@testing-library/dom (#17573) @eps1lonSep 22, 2019
A big thanks to the 23 contributors who made this release possible! This is a stability release.
@material-ui/[email protected]@testing-library for test (#17390) @eps1lon@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Sep 11, 2019
A big thanks to the 7 contributors who made this release possible! This is a quick release after v4.4.1 to solve 3 regressions.
@material-ui/[email protected]@babel/* deps (#17363) @eps1lonSep 8, 2019
A big thanks to the 21 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Aug 31, 2019
A big thanks to the 29 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]Aug 21, 2019
A big thanks to the 22 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Aug 10, 2019
A big thanks to the 22 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]!important in borderColor prop (#16875) @rogerclotetAug 03, 2019
A big thanks to the 18 contributors who made this release possible!
@material-ui/[email protected]required prop (#16809) @pranshuchittora@material-ui/[email protected]( to withStyle docs (#16816) @SneakyFish5@material-ui/pickers (#16823) @eps1lonJuly 28, 2019
A big thanks to the 23 contributors who made this release possible!
Here are some highlights ✨:
🌳 Introduce a new Tree view component in the (#14827) @joshwooding.
This is a first step toward a feature rich tree view component. We will keep iterate on it to add customization demos, filter, drag and drop, and checkboxes. You can find the documentation under this URL.
💄 Support vertical tabs (#16628) @josephpung.
You can learn more about it following this URL.
📚 Remove the prop-types from TypeScript demos (#16521) @merceyz.
The runtime prop-types are often redundant with the static type checks. We have removed them from the TypeScript demos.
⚛️ Add two codemods to improve the imports (#16192) @jedwards1211.
If you are not familiar with codemods, check the library out. This is a tool tool to assist you with large-scale codebase refactors. We introduce two new codemods in this release:
optimal-imports: Material UI supports tree shaking for modules at 1 level depth maximum.
You shouldn't import any module at a higher level depth.-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import { createMuiTheme } from '@material-ui/core/styles';
top-level-imports: Converts all @material-ui/core submodule imports to the root module.-import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+import { createMuiTheme } from '@material-ui/core';
💄 Support small switch (#16620) @darkowic.
You can learn more about it following this URL.
And many more 🐛 bug fixes and 📚 improvements.
@material-ui/[email protected]completed class key to TypeScript definitions (#16662) @pranshuchittora@material-ui/[email protected]@material-ui/styles@@4.3.0@material-ui/[email protected]@material-ui/[email protected]July 17, 2019
A big thanks to the 25 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]inputComponent (#16399) @eps1lon@material-ui/[email protected]styled components (#16379) (#16478) @akomm@material-ui/[email protected]@material-ui/[email protected]July 6, 2019
A big thanks to the 24 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]overrides (#16420) @eps1lon@material-ui/[email protected]June 25, 2019
A big thanks to the 4 contributors who made this release possible! This is a quick release after a regression that occurred in 4.1.2.
@material-ui/[email protected]@material-ui/[email protected]June 23, 2019
A big thanks to the 30 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]autoFocus TypeScript types (#16289) @BassT@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]June 13, 2019
A big thanks to the 10 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]CSS to Material UI webpack Loader (#16175) @sabrinaluoJune 10, 2019
A A big thanks to the 26 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]June 3, 2019
A A big thanks to the 30 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]May 27, 2019
A A big thanks to the 23 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]May 23, 2019
Some statistics with v4 compared to the release of v1 one year ago:
@material-ui/[email protected]@material-ui/[email protected]May 20, 2019
A A big thanks to the 17 contributors who made this release possible!
We have done the very last breaking changes (nothing significant). The release of v4 is imminent, stay tuned!
@material-ui/[email protected][ClickAwayListener] Fix scrollbar interaction (#15743) @Umerbhat
-<ClickAwayListener />
+<ClickAwayListener mouseEvent="onMouseUp" />
We recommend the default value since mouseup will be triggered by clicks
on scrollbars.
[Tabs] Hide scrollbar buttons when possible (#15676) @whitneymarkov
-<Tabs />
+<Tabs scrollButtons="desktop" />
[Tabs] Remove deprecated fullWidth and scrollable props (#15670) @mbrookes
-<Tabs fullWidth scrollable />
+<Tabs variant="scrollable" />
@material-ui/[email protected]@material-ui/[email protected]May 13, 2019
A A big thanks to the 13 contributors who made this release possible!
This is a stability release preparing v4.
@material-ui/[email protected]component prop (#15627) @eps1lon@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]May 5, 2019
A A big thanks to the 19 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Apr 28, 2019
A A big thanks to the 21 contributors who made this release possible!
Here are some highlights ✨:
The library has entered the beta phase of v4. We are grateful to all the contributors that have helped us so far. We will focus or effort on the stability of the library for the next two weeks. We don't plan more breaking changes, at the exception of changes that are required to fix bugs or that have minor impacts. We hope we can release v4 on May 15th, one year after v1.
Please try the beta out! You can find an upgrade guide to ease the transition. You will learn more about v4 in the final release blog post and our plans for the future.
@material-ui/[email protected][styles] Generate global class names (#15140) @oliviertassinari Remove the dangerouslyUseGlobalCSS options (makes it the default behavior).
[Modal] -74% bundle size reduction when used standalone (#15466) @oliviertassinari Remove the classes customization API for the Modal component.
[core] Remove RootRef usage (#15347) @joshwooding The Modal and Dialog child needs to be able to hold a ref.
class Component extends React.Component {
render() {
return <div />
}
}
-const MyComponent = props => <div {...props} />
+const MyComponent = React.forwardRef((props, ref) => <div ref={ref} {...props} />);
<Modal><Component /></Modal>
<Modal><MyComponent /></Modal>
<Modal><div /></Modal>
[ClickAwayListener] Hide react-event-listener (#15420) @oliviertassinari
[Slide] Convert to function component (#15344) @joshwooding The child needs to be able to hold a ref.
class Component extends React.Component {
render() {
return <div />
}
}
-const MyComponent = props => <div {...props} />
+const MyComponent = React.forwardRef((props, ref) => <div ref={ref} {...props} />);
<Slide><Component /></Slide>
<Slide><MyComponent /></Slide>
<Slide><div /></Slide>
@material-ui/[email protected]Apr 17, 2019
A A big thanks to the 27 contributors who made this release possible!
Here are some highlights ✨:
We hope the next release can be 4.0.0-beta.0. Here are the last breaking changes we want to introduce:
dangerouslyUseGlobalCSS option (make it the default behavior) (#15140)We have done a lot of changes in the alpha phase. The beta phase will be used to stabilize the library, we might have introduced bugs. We will encourage people to try the beta out. We hope the migration will be smooth with the upgrade guide.
We hope 2-3 weeks of beta will be enough. We plan on releasing v4 stable in May.
@material-ui/[email protected][Paper] Reduce the default elevation (#15243) @oliviertassinari Change the default Paper elevation to match the Card and the Expansion Panel:
-<Paper />
+<Paper elevation={2} />
[List] Update to match the specification (#15339) @oliviertassinari Rework the list components to match the specification:
ListItemAvatar component is required when using an avatarListItemIcon component is required when using a left checkboxedge property should be set on the icon buttons.[actions] Rename disableActionSpacing to disableSpacing (#15355) @oliviertassinari
disableActionSpacing prop disableSpacing.disableActionSpacing CSS class.action CSS class spacing.disableActionSpacing prop disableSpacing.action CSS class spacing.action CSS class spacing.[Tooltip] Convert to function component (#15291) @joshwooding
The child of the Tooltip needs to be able to hold a ref
class Component extends React.Component {
render() {
return <div />
}
}
-const MyComponent = props => <div {...props} />
+const MyComponent = React.forwardRef((props, ref) => <div ref={ref} {...props} />);
<Tooltip><Component /></Tooltip>
<Tooltip><MyComponent /></Tooltip>
<Tooltip><div /></Tooltip>
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]strict option to createMount (#15317) @eps1lonApr 8, 2019
A A big thanks to the 24 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected][Switch][radio][Checkbox] Improve specification compliance (#15097) @oliviertassinari
Refactore the implementation to make it easier to override the styles. Rename the class names to match the specification wording:
-icon
-bar
+thumb
+track
[Snackbar] Match the new specification (#15122) @oliviertassinari
Slide to Grow.[TextField] Fix height inconsistency (#15217) @gautam-relayr
Remove the inputType class from InputBase.
@material-ui/[email protected]type type of button related components (#15158) @eps1lonMar 30, 2019
A A big thanks to the 20 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected][Typography] Better defaults (#15100) @oliviertassinari
body2 to body1.
A font size of 16px is a better default than 14px.
Bootstrap, material.io or even our documentation use 16px as a default font size.
14px like Ant Design is understandable as Chinese users have a different alphabet.
We document 12px as the default font size for Japanese.color="default" to color="initial" following the logic of #13028.
The usage of default should be avoided, it lakes semantic.[Container] Move to the core (#15062) @oliviertassinari
@material-ui/[email protected]@material-ui/[email protected]Mar 28, 2019
A big thanks to the 11 contributors who made this release possible!
This release fixes an important regression with TypeScript: https://github.com/mui/material-ui/issues/15076.
@material-ui/[email protected]type prop (#15096) @karlbohlmarkN/A
Mar 23, 2019
A A big thanks to the 23 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected][TextField] Prevent fullwidth textfield expanding the screen (#14988) @FMcIntosh
Change the default box sizing model of the InputBase. It uses the following CSS now:
box-sizing: border-box;
It solves issues with the fullWidth prop.
[Modal] Ignore event.defaultPrevented (#14991) @oliviertassinari
The new logic closes the Modal even if event.preventDefault() is called on the key down escape event.
event.preventDefault() is meant to stop default behaviors like clicking a checkbox to check it, hitting a button to submit a form, and hitting left arrow to move the cursor in a text input etc.
Only special HTML elements have these default behaviors.
You should use event.stopPropagation() if you don't want to trigger an onClose event on the modal.
@material-ui/[email protected]Mar 17, 2019
A A big thanks to the 17 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected][ButtonBase] Require host or ref forwarding components (#13664) @eps1lon
[SvgIcon] Rename nativeColor -> htmlColor (#14863) @oliviertassinari
React solved the same problem with the for HTML attribute, they have decided to call the prop htmlFor. This change follows the same reasoning.
-<AddIcon nativeColor={secondary.contrastText} />
+<AddIcon htmlColor={secondary.contrastText} />
[Divider] Remove the deprecated inset prop (#14826) @joshwooding
-<Divider inset />
+<Divider variant="inset" />
[Box] Remove the unstable prefix & import the right version (#14845) @pheuter
-import { unstable_Box as Box } from '@material-ui/core/Box';
+import Box from '@material-ui/core/Box';
anchorEl is invalid (#13468) @Andarist@material-ui/[email protected]@material-ui/[email protected]Mar 10, 2019
A A big thanks to the 14 contributors who made this release possible!
Here are some highlights ✨:
React.forwardRef() (#14714, #14737, #14738, #14775) @eps1lon.@material-ui/[email protected][useMediaQuery] Remove unstable prefix (#14593)
-import { unstable_useMediaQuery as useMediaQuery } from '@material-ui/core/useMediaQuery';
+import useMediaQuery from '@material-ui/core/useMediaQuery';
[DialogActions] action CSS class is applied to root element if disableActionSpacing={false} instead of children (#14795)
[DialogContentText] Use typography variant body1 instead of subtitle1 (#14795)
[MenuItem] Remove fixed height (#14799) @KyruCabading Remove the fixed height of the MenuItem. The padding and line-height are used by the browser to compute the height.
@material-ui/[email protected]Remove the MuiThemeProvider component:
-import { MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider } from '@material-ui/styles';
Remove the @material-ui/styles/install module.
-import { install } from '@material-ui/styles';
-install();
@material-ui/[email protected]Mar 3, 2019
A A big thanks to the 23 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected][Tabs] Simplify override (#14638) @oliviertassinari
We have removed the labelContainer, label and labelWrapped class keys.
We have removed 2 intermediary DOM elements.
You should be able to move the custom styles to the root class key.
[Table] Add dense support (#14561) @leMaik
-<TableCell numeric>{row.calories}</TableCell>
+<TableCell align="right">{row.calories}</TableCell>
dense mode was promoted to a different property:-<TableCell padding="dense" />
+<TableCell size="small" />
Every component except Dialog, MenuList, Modal, Popover and Tabs forward
their innerRef (#14536).
This is implemented by using React.forwardRef. This affects the internal component
tree and display name and therefore might break shallow or snapshot tests.
innerRef will no longer return a ref to the instance
(or nothing if the inner component is a function component) but a ref to its root component.
The corresponding API docs list the root component.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Feb 20, 2019
A A big thanks to the 16 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected][Typography] Remove deprecated Typography variants (#14562) @joshwooding
display: block default typograpghy style.
You can use the new display?: 'initial' | 'inline' | 'block'; property.headlineMapping property to better align with its purpose.-<MuiTypography headlineMapping={headlineMapping}>
+<MuiTypography variantMapping={variantMapping}>
[InputLabel] Remove FormLabelClasses in favor of asterisk class (#14504) @umairfarooq44
You should be able to override all the styles of the FormLabel component using the CSS API of the InputLabel component. We do no longer need the FormLabelClasses property.
<InputLabel
- FormLabelClasses={{ asterisk: 'bar' }}
+ classes={{ asterisk: 'bar' }}
>
Foo
</InputLabel>
The TablePagination component does no longer try to fix invalid (page, count, rowsPerPage) property combinations. It raises a warning instead.
@material-ui/[email protected]Remove the first option argument of withTheme(). The first argument was a placeholder for a potential future option. We have never found a need for it. It's time to remove this argument. It matches the Emotion and styled-components API.
-const DeepChild = withTheme()(DeepChildRaw);
+const DeepChild = withTheme(DeepChildRaw);
@material-ui/[email protected]Feb 12, 2019
This is our first unstable release toward Material UI v4.0.0. We try to release a major every 6-12 months. This gives us the opportunity to remove deprecated APIs, upgrade our peer dependencies and more importantly, keep up with the direction the community is taking.
A A big thanks to the 28 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected][core] Increase React peer dependency to v16.8.0 (#14432) @oliviertassinari
The upgrade path to React 16.8.0 should be pretty easy for our users. Introducing this breaking change in v4 enables the following:
React.memo() API.[Grid] Use a unitless spacing API (#14099) @ifndefdeadmau5
In order to support arbitrary spacing values and to remove the need to mentally count by 8, we are changing the spacing API:
/**
* Defines the space between the type `item` component.
* It can only be used on a type `container` component.
*/
- spacing: PropTypes.oneOf([0, 8, 16, 24, 32, 40]),
+ spacing: PropTypes.oneOf([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]),
Going forward, you can use the theme to implement a custom Grid spacing transformation function: https://mui.com/system/spacing/#transformation.
The theme.palette.augmentColor() method no longer performs a side effect on its input color.
In order to use it correctly, you have to use the output of this function.
-const background = { main: color };
-theme.palette.augmentColor(background);
+const background = theme.palette.augmentColor({ main: color });
console.log({ background });
[core] Change UMD output name to 'MaterialUI' (#13142) @tkrotoff
This change eases the use of Material UI with a CDN:
const {
Button,
TextField,
-} = window['material-ui'];
+} = MaterialUI;
It's consistent with the other projects:
[Button] Remove deprecated props and styles (#14383) @mbrookes
Remove the deprecated button flat, raised and fab variants:
-<Button variant="raised" />
+<Button variant="contained" />
-<Button variant="flat" />
+<Button variant="text" />
-import Button from '@material-ui/core/Button';
-<Button variant="fab" />
+import Fab from '@material-ui/core/Fab';
+<Fab />
theme.spacing.unit usage is deprecated, you can use the new API (#14099) @ifndefdeadmau5: [theme.breakpoints.up('sm')]: {
- paddingTop: theme.spacing.unit * 12,
+ paddingTop: theme.spacing(12),
},
Tip: you can provide more than one argument: theme.spacing(1, 2) // = '8px 16px'
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]-import Breadcrumbs from '@material-ui/lab/Breadcrumbs';
+import Breadcrumbs from '@material-ui/core/Breadcrumbs';
⚠️ The height has changed - it might break your layout.
/es build (#14422) @eps1lonFeb 03, 2019
A big thanks to the 16 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Jan 26, 2019
A big thanks to the 30 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]home and end key support (#14212) @dallin-christensen@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Jan 14, 2019
A big thanks to the 17 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]Jan 9, 2019
A big thanks to the 5 contributors who made this release possible!
We are making a quick release to fix an important TypeScript regression.
@material-ui/[email protected]InputBaseComponentProps type (#14082) @franklixuefeiJan 7, 2019
A big thanks to the 20 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Dec 30, 2018
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Dec 30, 2018
A big thanks to the 15 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]The Tabs fullWidth and scrollable properties can't be used at the same time. The API change prevents any awkward usage.
-<Tabs fullWidth>
+<Tabs variant="fullWidth">
@material-ui/[email protected]@material-ui/[email protected]Dec 22, 2018
A big thanks to the 15 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]Dec 17, 2018
A big thanks to the 11 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]We are allowing more align variants (left, center, right, inherit, justify). Following our API guideline, we are using an enum over a boolean. Keep in mind that monetary or generally number fields should be right aligned as that allows you to add them up quickly in your head without having to worry about decimals.
-<TableCell numeric>
+<TableCell align="right">
PaperComponent property & draggable demo (#13879) @rfbotto@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Dec 9, 2018
A big thanks to the 20 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Dec 1, 2018
A big thanks to the 15 contributors who made this release possible!
There are no fundamental changes in this version. It's a stability release after v3.6.0. It contains tons of bug fixes 🐛.
@material-ui/[email protected]@material-ui/[email protected]Nov 26, 2018
A big thanks to the 28 contributors who made this release possible!
The last release was two weeks ago. Last weekend, we have missed the release train 🚃. As a consequence, this is a dense release.
Here are some highlights ✨:
@material-ui/[email protected]The floating action button doesn't share many styles with the default button component.
We are extracting the variant into its own component.
This way, we better isolate the concerns.
We will remove the FAB styles from the button in v4, making the Button component more lightweight, a win for people overriding our styles.
-import Button from '@material-ui/core/Button';
+import Fab from '@material-ui/core/Fab';
-<Button variant="fab" color="primary">
+<Fab color="primary">
<AddIcon />
-</Button>
+</Fab>
variant prop (#13574) @joshwoodingWe are introducing a new variant to the divider component: middle. Following our API guideline, we can no longer use a boolean property, it needs to be an enum, hence the introduction of the variant property.
import Divider from '@material-ui/core/Divider';
-<Divider inset />
+<Divider variant="inset" />
SwipeAreaProps property (#13592) @SerhiiBilyk@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Nov 13, 2018
A big thanks to the 13 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/styles package 💅 (#13503).The Material UI's styling solution has pretty much stayed the same for the last 12 months. Some interesting CSS-in-JS libraries like styled-components, Emotion or linaria have emerged. This new package is a significant step forward. Some of the key features:
Here is an example: https://codesandbox.io/p/sandbox/vjzn5z4k77.
import Button from '@material-ui/core/Button';
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
// Like https://github.com/brunobertolini/styled-by
const styledBy = (property, mapping) => (props) => mapping[props[property]];
const useStyles = makeStyles({
root: {
background: styledBy('color', {
red: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
blue: 'linear-gradient(45deg, #2196F3 30%, #21CBF3 90%)',
}),
border: 0,
borderRadius: 3,
boxShadow: styledBy('color', {
red: '0 3px 5px 2px rgba(255, 105, 135, .3)',
blue: '0 3px 5px 2px rgba(33, 203, 243, .3)',
}),
color: 'white',
height: 48,
padding: '0 30px',
},
});
function MyButton(props) {
const { color, ...other } = props;
const classes = useStyles(props);
return <Button className={classes.root} {...other} />;
}
function AdaptingHook() {
return (
<div>
<MyButton color="red">Red</MyButton>
<MyButton color="blue">Blue</MyButton>
</div>
);
}
export default AdaptingHook;
Powered by JSS.
@material-ui/[email protected]@material-ui/[email protected]Nov 12, 2018
Corrupted, to not use.
Nov 5, 2018
A big thanks to the 16 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]labelPlacement property variants (#13499) @JulienMalige@material-ui/[email protected]Oct 27, 2018
A big thanks to the 17 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]Oct 24, 2018
A big thanks to the 8 contributors who made this release possible!
This is a quick patch after an important regression with the Modal component.
@material-ui/[email protected]Oct 21, 2018
A big thanks to the 26 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]listItem jss class (#13269, #13268) @G-Rathmargin jss class (#13318) @G-RathOct 16, 2018
A big thanks to the 3 contributors who made this release possible! This is a quick patch after important regressions.
@material-ui/[email protected]Oct 14, 2018
A big thanks to the 19 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]anchorOrigin.vertical=enter (#13238) @iamhosseindhv@material-ui/[email protected]filled-input link text to FilledInput (#13223) @G-RathOct 8, 2018
A big thanks to the 18 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]This is a backward compatible change. You can opt-in the usage of the new Material Design typography specification. To learn more about the upgrade path, follow https://mui.com/style/typography/#migration-to-typography-v2.
This change updates the variant wording to match the one used in the Material Design specification.
-<Button variant="flat" />
+<Button variant="text" />
-<Button variant="raised" />
+<Button variant="contained" />
<div> element to children (#13067) @izyb@material-ui/[email protected]Sep 30, 2018
A big thanks to the 16 contributors who made this release possible! It contains many bug fixes 🐛 and documentation improvements 📝.
@material-ui/[email protected]variant property to InputLabel type definition (#13009) @chrislambenotched should be boolean type (#13038) @zheeeng@material-ui/[email protected]@material-ui/[email protected]Sep 24, 2018
A big thanks to the 21 contributors who made this release possible! It contains many bug fixes 🐛 and documentation improvements 📝.
@material-ui/[email protected]@material-ui/[email protected]MuiFilledInput to 'Overrides' (#12938) @marcel-ernstSep 16, 2018
A big thanks to the 24 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]fontSize small and large (#12865) @JoshuaLicense@material-ui/[email protected]Sep 9, 2018
A big thanks to the 13 contributors who made this release possible!
@material-ui/[email protected]@material-ui/[email protected]Sep 3, 2018
A big thanks to the 16 contributors who made this release possible!
Here are some highlights ✨:
@material-ui/[email protected]ClickAwayListenerProps property (#12735) @tendermario@material-ui/[email protected]-import { ToggleButtonGroup } from '@material-ui/lab/ToggleButton';
+import ToggleButtonGroup from '@material-ui/lab/ToggleButtonGroup';
withRoot to accept props (#12712) @mattmccutchenN/A
Aug 28, 2018
A big thanks to the 10 contributors who made this release possible!
We are making a quick release after v3.0.0 to patch an incorrect peer dependency. It's also a good opportunity to upgrade to the stable release of Babel 7.
@material-ui/[email protected]@material-ui/[email protected]@material-ui/[email protected]Aug 27, 2018
A big thanks to the 27 contributors who made this release possible!
We are upgrading the major version of @material-ui/core to match the version of @material-ui/icons.
The next major release is planned for Q1, 2019.
Cut the package size by half.
It should make the npm installation twice as fast.
It's not OK to have some installation timeout.
We have removed the /es folder.
-import AccessAlarm from '@material-ui/icons/es/AccessAlarm';
+import AccessAlarm from '@material-ui/icons/AccessAlarm';
Firefox 52 is the last version supported by Windows XP. The market share of Firefox 45 is 0.03%. We use the same strategy for Chrome.
by and enum typo in api.md (#12663) @G-RathAug 19, 2018
A big thanks to the 22 contributors who made this release possible!
Here are some highlights ✨:
v7.0.0-rc.1 (#12581).N/A
Aug 12, 2018
A big thanks to the 23 contributors who made this release possible! This is a dense release!
Here are some highlights ✨:
N/A
inputRef is wired up to react-number-format's input (#12444) @NMinhNguyenAug 4, 2018
A big thanks to the 15 contributors who made this release possible! This release focuses on bug fixes 🐛.
N/A
Jul 29, 2018
A big thanks to the 22 contributors who made this release possible! I hope we will soon beat our previous record: 30 contributors in a single week.
Here are some highlights ✨:
N/A
Jul 22, 2018
A big thanks to the 15 contributors who made this release possible!
Here are some highlights ✨:
| Name | Description |
|---|---|
| <span class="prop-name">root</span> | Styles applied to the root element. |
| <span class="prop-name">label</span> | Styles applied to the span element that wraps the children. |
| … | … |
After many iterations, we are happy to announce @material-ui/icons v2.0.0 💃.
With this version, you can take advantage of all the icons recently released by Google:
https://m2.material.io/tools/icons/. There are more than 5,000 icons.
(#12016, #12036, #12170, #12111, #12225)
The 1.4.0 release of Material UI has introduced a new implementation of the Tooltip and Popper component. This release fixes a lot of issues following the rewrite (#12168, #12161, #12194, #12223, #12218). Thank you for reporting all these problems 🐛. Hopefully, it's very stable now.
Creative Tim has just completed their second Material UI theme 💅. It's an important milestone for the themability of Material UI. We are going to keep working on adding more themes to the list.
@material-ui/[email protected] allows React users to take advantage of the icons revamp the Material Design Team has been recently released. Some icons have been removed, ~150 new icons have been added, and some icons have been renamed. There are also currently some issues with the size of certain icons. Please refer to #12016 for further details.
innerRef to withWidth and withTheme (#12236) @iteloJul 14, 2018
A big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:
The component is -1kB gzipped smaller and much faster. You can render 100 of them on a page with no issue. It's also introducing a new component: Popper, an abstraction on top of Popper.js.
You can now dynamically change the theme of the whole documentation site.
N/A
isPlainObject to avoid dropping prototypes (#12100) @kivlorJul 2, 2018
A big thanks to the 13 contributors who made this release possible.
Here are some highlights ✨:
N/A
N/A
Jun 26, 2018
A big thanks to the 10 contributors who made this release possible.
Here are some highlights ✨:
N/A
auto to TypeScript definitions (#11933) @woobiancacreateStyles to import (#11975) @SylphonyN/A
Jun 20, 2018
A big thanks to the 6 contributors who made this release possible.
This release fixes some important regressions. We are making it outside of the normal schedule.
N/A
N/A
Jun 18, 2018
A big thanks to the 16 contributors who made this release possible.
Here are some highlights ✨:
N/A
allVariants key in the theme (#11802) @oliviertassinaricomponent property (#11844) @C-Rodgcomponent prop types (#11863) @jedwards1211N/A
Jun 10, 2018
A big thanks to the 15 contributors who made this release possible.
Here are some highlights ✨:
React.createRef support ⚛️ (#11757) @t49tran.withWidth() helperN/A
type property (#11728) @C-RodgJun 3, 2018
A big thanks to the 23 contributors who made this release possible.
Here are some highlights ✨:
N/A
clickable property (#11613) @vilvaathibanpbMay 26, 2018
A big thanks to the 30 contributors who made this release possible.
Here are some highlights ✨:
N/A
May 17, 2018
Our first stable v1 release! 🎉
It has taken us two years to do it, but Material UI v1 has finally arrived! We are so excited about this release, as it's setting a new course for the project. Thank you to everyone, especially to the team, and to everyone who's contributed code, issue triage, and support. Thank you.
Some statistics with v1 while it was in alpha and beta:
May 15, 2018
A big thanks to the 10 contributors who made this release possible.
Here are some highlights ✨:
N/A
May 13, 2018
A big thanks to the 14 contributors who made this release possible.
May 13, 2018
A big thanks to the 11 contributors who made this release possible.
Here are some highlights ✨:
-import { withStyles } from 'material-ui/styles';
+import { withStyles } from '@material-ui/core/styles';
import { Table, TableBody, TableCell, TableFooter, TablePagination, TableRow } from 'material-ui';
-import CircularProgress from '@material-ui/core/Progress/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';
-import { ListItem } from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
We provide a codemod to automate the migration: https://github.com/mui/material-ui/tree/master/packages/material-ui-codemod#import-path. I have used it to upgrade all the demos in the documentation :).
Split the responsibilities between the different components. Help with tree-shaking.
- <Grid item xs hidden={{ xlUp: true }}>
- <Paper>xlUp</Paper>
- </Grid>
+ <Hidden xlUp>
+ <Grid item xs>
+ <Paper>xlUp</Paper>
+ </Grid>
+ </Hidden>
The text underline color customization change:
underline: {
'&::after': {
- backgroundColor: purple[500],
+ borderBottomColor: purple[500],
},
},
May 9, 2018
A big thanks to the 4 contributors who made this release possible.
Here are some highlights ✨:
If you are using TypeScript, 2.8 or later is required.
N/A
May 8, 2018
A big thanks to the 7 contributors who made this release possible.
Here are some highlights ✨:
N/A
May 6, 2018
A big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
I couldn't find a clean way to support the render props pattern. Doing such would require to greatly reduce the usage of JSX. It would really harm source code readability.
Instead, I have been focusing on standardizing our component injection story. This way, we can go back to the render props after stable v1 is released and see if source code readability worth be sacrificed for the render prop pattern.
<Tabs
- TabScrollButton={TabScrollButtonWrapped}
+ ScrollButtonComponent={TabScrollButtonWrapped}
<TablePagination
- Actions={TablePaginationActionsWrapped}
+ ActionsComponent={TablePaginationActionsWrapped}
<Dialog
- transition={Transition}
+ TransitionComponent={Transition}
<Menu
- transition={Transition}
+ TransitionComponent={Transition}
<Snackbar
- transition={Transition}
+ TransitionComponent={Transition}
<Popover
- transition={Transition}
+ TransitionComponent={Transition}
<StepContent
- transition={Transition}
+ TransitionComponent={Transition}
This change is for consistency with the other components. No need to repeat the component name in the property.
<Snackbar
- SnackbarContentProps={{ 'aria-describedby': 'notification-message' }}
+ ContentProps={{ 'aria-describedby': 'notification-message' }}
Makes the API consistent with LinearProgress
<CircularProgress
- min={10}
- max={20}
- value={15}
+ value={(15 - 10) / (20 - 10) * 100}
/>
The rename started with #11090. I should have taken the time to complete it in the first place. This way, we are fully consistent with the spec: https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo :)
<ButtonBase
- onKeyboardFocus={this.handleVisible}
+ onFocusVisible={this.handleVisible}
Apr 29, 2018
A big thanks to the 17 contributors who made this release possible.
As long as you are providing a valid URL to <CardMedia image />, it should be working. However, previously " escaped URL will no longer work.
Apr 22, 2018
A big thanks to the 8 contributors who made this release possible.
Here are some highlights ✨:
[ButtonBase] Better keyboard focused story (#11090) @oliviertassinari
keyboardFocused feature focusVisible in order to follow the CSS specification wording:
https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudoclasses property to host the focus visible feature. The fact that the classes don't cascade was making it hard to use. Instead, we rely on a focusVisibleClassName property. This is allowing any component along the rendering chain to use the feature. For instance, a Switch component: Switch > SwitchBase > IconButton > ButtonBase.<ButtonBase
- classes={{
- keyboardFocused: 'my-class-name',
- }}
+ focusVisibleClassName="my-class-name"
/>
Apr 16, 2018
A big thanks to the 15 contributors who made this release possible.
Here are some highlights ✨:
This breaking change is important. It might be the most painful to recover from before stable v1 (May 17th 2018). We have changed the CSS specificity rule to solve #10771 at scale.
It's inspired by the Bootstrap approach to writing CSS. It follows two rules:
color and variant properties are considered a variant.
The lower the style specificity is, the simpler you can override it.:hover, :focus, etc.).
It allows much more control at the cost of more boilerplate.
Hopefully, it's more intuitive.Example:
const styles = {
- checked: {
- color: green[500],
+ root: {
+ color: green[600],
+ '&$checked': {
+ color: green[500],
+ },
},
+ checked: {},
};
<Checkbox
classes={{
+ root: classes.root,
checked: classes.checked,
}}
/>
style prop (#10994) @franklixuefeiApr 7, 2018
A big thanks to the 14 contributors who made this release possible.
Here are some highlights ✨:
material-ui-icons to @material-ui/icons (#10957) @oliviertassinari-import FormatTextdirectionRToL from 'material-ui-icons/FormatTextdirectionRToL';
+import FormatTextdirectionRToL from '@material-ui/icons/FormatTextdirectionRToL';
global is defined before trying to use it (#10933) @jolissApr 1, 2018
A big thanks to the 4 contributors who made this release possible.
Here are some highlights ✨:
We take advantage of the latest features of React 16.x.
React is allowing us to return an array of elements in the render method.
We have removed the useless root div element.
Nothing has changed for people using React 15.x.
Mar 28, 2018
A big thanks to the 25 contributors who made this release possible.
Here are some highlights ✨:
The negative margin implementation solution currently used comes with serious limitations. Material UI is the only library with a non-zero default spacing between the items. Having zero spacing by default will ease the usage of the component.
-<Grid />
+<Grid spacing={16} />
For consistency with the removeEventListener Web API and the Snackbar disableWindowBlurListener property.
<Tooltip
- disableTriggerFocus
- disableTriggerHover
- disableTriggerTouch
+ disableFocusListener
+ disableHoverListener
+ disableTouchListener
/>
I have made a mistake in #8108. The property isn't applied on a FormControl but on a FormLabel component.
-<InputLabel FormControlClasses={classes} />
+<InputLabel FormLabelClasses={classes} />
mixins.gutter signature (argument is optional) (#10814) @sebaldMar 17, 2018
A big thanks to the 19 contributors who made this release possible.
This release comes with important theme upgrades. Here are some highlights ✨:
props theme key to globally inject properties on components (#10671).N/A
Mar 11, 2018
A big thanks to the 13 contributors who made this release possible.
Here are some highlights ✨:
These properties were introduced before classes.
Exposing a single pattern makes things more predictable and easier to work with.
-<Tabs buttonClassName="foo" indicatorClassName="bar" />
+<Tabs classes={{ scrollButtons: 'foo', indicator: 'bar' }} />
-<TextField labelClassName="foo" helperTextClassName="bar" />
+<TextField InputLabelProps={{ className: 'foo' }} FormHelperTextProps={{ className: 'bar' }} />
The new wording should clarify the purpose of the component. For instance, it's not about adding JavaScript polyfills.
-<Reboot />
+<CssBaseline />
Mar 5, 2018
A big thanks to the 14 contributors who made this release possible.
Here are some highlights ✨:
Remove the fontSize property. The SvgIcon behavior is closer to the Icon behavior.
-<Icon fontSize />
-<SvgIcon fontSize />
+<Icon />
+<SvgIcon />
Now, you can use the font-size style property to changr the size of the icon.
This is an effort in order to harmonize the classes API. The best way to recover from this breaking change is to check the warnings in the console and to check the added documentation around the design rules around this API.
Feb 24, 2018
A big thanks to the 20 contributors who made this release possible.
Here are some highlights ✨:
N/A
SelectDisplayProps prop (#10408) @noah-potterFeb 17, 2018
A big thanks to the 21 contributors who made this release possible.
Here are some highlights ✨:
For consistency between the Input and the Checkbox, Switch, Radio the following small breaking changes have been done:
The usage of the inputProps property is no longer needed to apply an id to the input. The id is applied to the input instead of the root.
-<Checkbox inputProps={{ id: 'id' }} />
+<Checkbox id="id" />
The inputType property was renamed type.
-<Checkbox inputType="text" />
+<Checkbox type="text" />
The Material Design specification says that selection controls elements should use the application's secondary color.
-<Checkbox />
-<Switch />
-<Radio />
+<Checkbox color="primary" />
+<Switch color="primary" />
+<Radio color="primary" />
Feb 10, 2018
A big thanks to the 16 contributors who made this release possible.
Here are some highlights ✨:
component property (#10128) @sebald.N/A
Selet to Select (#10207) @JustkantFeb 4, 2018
A big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
type property to variant (#10088, #10086, #10084, #10101) @mbrookes.position="sticky" with the AppBar (#10090) @scottastrophic.These breaking changes aim at providing a systematic solution to the boolean vs enum naming problem.
We have documented our approach to solving the problem in #10023. Basically, we enforce the following rule:
This is what motivated the button breaking change. Unfortunately type has its own meaning in the HTML specification. You can use it on the following elements: <button>, <input>, <command>, <embed>, <object>, <script>, <source>, <style>, <menu>.
We are using a more generic name to avoid the confusion: variant.
Umbrella pull request for: #10084, #10086, #10088.
<Button
- raised
+ variant="raised"
<Button
- fab
+ variant="fab"
<Typography
- type="title"
+ variant="title"
<MobileStepper
- type="dots"
+ variant="dots"
<Drawer
- type="persistent"
+ variant="persistent"
<LinearProgress
- mode="determinate"
+ variant="determinate"
<CircularProgress
- mode="determinate"
+ variant="determinate"
<Zoom
in={in}
- enterDelay={transitionDuration.exit}
+ style={{
+ transitionDelay: in ? transitionDuration.exit : 0,
+ }}
position="sticky" (#10090) @scottastrophicJan 21, 2018
A big thanks to the 14 contributors who made this release possible.
Here are some highlights ✨:
Fun facts:
We have removed the "magic" <Icon> wrapping logic. It should be done explicitly now.
It's making our components less biased around the svg icon vs font icon choice.
+import Icon from 'material-ui/Icon';
- <IconButton>comment</IconButton>
+ <IconButton>
+ <Icon>comment</Icon>
+ </IconButton>
[theme] Further simplification & standardization (#10015) @mbrookes
theme.palette.background colors have been removed. The affected components use theme.palette.grey instead. Shift the values of theme.palette.grey if you wish to lighten or darken these as a whole; this will maintain the contrast relationship between them. (Paper remains in the theme, as it is used across multiple components.)theme.palette.common.fullBlack and fullWhite have been removed. Components that used these values now use theme.palette.common.black and white instead.theme.palette.common.transparent has been removed. Components that used this value now use 'transparent' directly.theme.palette.grey. If you customize the values of grey, the appearance of Chip in your app may change.[core] Remove the rootRef properties as unneeded (#10025)
-import ReactDOM from 'react-dom';
<IconButton
- rootRef={node => {
- this.button = ReactDOM.findDOMNode(node);
+ buttonRef={node => {
+ this.button = node;
}}
>
-<Button dense>
+<Button size="small">
In order to keep the palette simple to understand. I have removed the types from the palette object.
The motivation is the following. The theme & palette should only store
the information needed to display one UI context.
Having the types object in the palette encourage people to rely on it.
No, we want people to do it the other way around.
For instance, instead of doing:
const theme = createMuiTheme({
palette: {
type: 'dark',
types: {
dark: {
background: {
default: '#000',
},
},
light: {
background: {
default: '#fff',
},
},
},
},
});
We would rather see people doing:
const types = {
dark: {
background: {
default: '#000',
},
},
light: {
background: {
default: '#fff',
},
},
};
const theme = createMuiTheme({
palette: {
type: 'dark',
...types.dark,
},
});
Jan 21, 2018
A big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
[palette] Keep simplifying the solution (#9876) @oliviertassinari
-<Button color="contrast" />
+<Button />
Instead, you can use the color="inherit" property or use the theme.palette.XXX.contrastText value.
accent to secondary. We have removed the accent indirection to be closer to the object people are providing to customize the palette.-<Button color="accent" />
+<Button color="secondary" />
<Tabs
- indicatorColor="accent"
- textColor="accent"
+ indicatorColor="secondary"
+ textColor="secondary"
>
secondary to textSecondary. secondary and textSecondary are two valid color value.-<Typography color="secondary" />
+<Typography color="textSecondary" />
[palette] Standardize the secondary color (#9918) @oliviertassinari
The secondary color now behaves the same way than the other colors (primary, error). We always use the main tone by default instead of the light tone.
It's unclear if this change is making the implementation follow the specification more closely. The direct win is simplicity and predictability.
theme.palette.input object.theme.palette.text.icon color.theme.palette.background.contentFrame, it was only used in the documentation.theme.palette.text.divider to theme.palette.divider, it's not a text color.theme.palette.text.lightDivider, there is no reference to is in the specification, better keep things simple.N/A
Jan 16, 2018
A big thanks to the 9 contributors who made this release possible.
We are making a release earlier than expected. The release schedule norm has been so far: one every weekend. 1.0.0-beta.28 has introduced important pain points we want to address quickly:
N/A
Jan 14, 2018
A big thanks to the 22 contributors who made this release possible.
Here are some highlights ✨:
It's an important simplification of the palette system. You can now directly use the "official" Color Tool](https://m2.material.io/color/).
light, main, dark and contrastText.main value.import { createMuiTheme } from 'material-ui/styles';
import blue from 'material-ui/colors/blue';
import pink from 'material-ui/colors/pink';
const theme = createMuiTheme({
palette: {
- primary: blue,
- secondary: pink,
+ primary: {
+ light: blue[300],
+ main: blue[500],
+ dark: blue[700],
+ },
+ secondary: {
+ light: pink[300],
+ main: pink[500],
+ dark: pink[700],
+ }
type: theme.paletteType,
},
});
<ListItem
classes={{
- text: 'my-class',
+ textPrimary: 'my-class',
}}
/>
Rename ListItemText classes for consitancy with the CardHeader component:
-- `textPrimary`
-- `textSecondary`
+- `primary`
+- `secondary`
TableHead, TableBody and TableFooter no longer offer a CSS API, which means their root classes are no longer available.
To style the root element in these components, a className prop can be passed, as all non-API props will be spread to the root element.
Jan 6, 2018
A big thanks to the 19 contributors who made this release possible.
Here are some highlights ✨:
Remove the rootRef property from the Grow and List component.
Instead, you can use the ref property in combination with findDOMNode() or a RootRef helper.
transition property (#9682) @oliviertassinariRemove the transitionClasses property of the Popover component. Instead, you can provide a transition component.
-import BottomNavigation, { BottomNavigationButton } from 'material-ui/BottomNavigation';
+import BottomNavigation, { BottomNavigationAction } from 'material-ui/BottomNavigation';
You might be relying on the transitive dependency of Material UI: jss-preset-default.
If you do, you need to declare the dependency in your package.json. Material UI will no longer install it for you.
Alternatively, you can use our preset to save bundle size.
-import preset from 'jss-preset-default';
+import { jssPreset } from 'material-ui/styles';
Dec 30, 2017
A big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
Reboot (#9661).Portal and Modal components have been revamped to solve the core issues raised by the community (#9613). Those components are now documented.Some properties have been renamed:
<Dialog
- ignoreBackdropClick
- ignoreEscapeKeyUp
+ disableBackdropClick
+ disableEscapeKeyDown
<Modal
- show
- disableBackdrop
- ignoreBackdropClick
- ignoreEscapeKeyUp
- modalManager
+ open
+ hideBackdrop
+ disableBackdropClick
+ disableEscapeKeyDown
+ manager
The zIndex object has been updated to match the usage.
const zIndex = {
- mobileStepper: 900,
- menu: 1000,
+ mobileStepper: 1000,
appBar: 1100,
- drawerOverlay: 1200,
- navDrawer: 1300,
- dialogOverlay: 1400,
- dialog: 1500,
- layer: 2000,
- popover: 2100,
- snackbar: 2900,
- tooltip: 3000,
+ drawer: 1200,
+ modal: 1300,
+ snackbar: 1400,
+ tooltip: 1500,
};
createBreakpoints.down() is now inclusive of the specified breakpointisWidthDown() is now inclusive of the specified breakpoint by default<Hidden /> will include the breakpoints associated with its Down properties regardless of whether CSS or JS is used.isMuiElement and isMuiComponent as typeguard (#9630) @SSW-SCIENTIFICDec 22, 2017
A big thanks to the 16 contributors who made this release possible.
Here are some highlights ✨:
dangerouslyUseGlobalCSS option to the class name generator (#9558).
We discourage people from using this option in production.
However, it can be a quick escape hatch when prototyping.
It's making the class names predictable, for instance:-c291
+MuiButton-raised
None, merry christmas 🎄.
masterial-ui to material-ui (#9544) @GinkoidDec 17, 2017
A big thanks to the 16 contributors who made this release possible.
Here are some highlights ✨:
This change is making the js and css breakpoint utils behaving the same way.
The default parameter of withWidth.isWidthDown(breakpoint, width, inclusive) changed:
-inclusive = true
+inclusive = false
You might want to update the usage of the API by increasing the breakpoing used on the Hidden component:
-<Hidden implementation="js" mdDown>
+<Hidden implementation="js" lgDown>
Or by going back to the previous behavior:
-isWidthDown(breakpoint, width)
+isWidthDown(breakpoint, width, true)
Most of our components are stateless by default. It wasn't the case with v0.x. Let's translate this default behavior in the property names of v1.
-onRequestClose
-onRequestOpen
-onRequestDelete
+onClose
+onOpen
+onDelete
The existing InputProps property can be used to set the className on the input element, making inputClassName redundant. Issue #9508 exposed some conflicting behavior between the two properties and it was decided that removing inputClassName would result in a cleaner API.
- /**
- * The CSS class name of the `input` element.
- */
- inputClassName: PropTypes.string,
The configuration of the wrapped Input component and its input element should be done through InputProps. To specify a className on the input element:
<TextField InputProps={{ inputProps: { className: 'foo' } }} />
There is no logic attached to the optional boolean property. So, we can reduce the abstraction cost. The property is provided closer to where it's needed, and people have full control over how it should be displayed. By chance, it matches the specification.
-<Step optional>
- <StepLabel>
+<Step>
+ <StepLabel optional={<Typography type="caption">Optional Text</Typography>}>
Label
</StepLabel>
</Step>
only array support in the CSS implementation (#9457) @ChopinskyDec 9, 2017
A big thanks to the 26 contributors who made this release possible.
Here are some highlights ✨:
inputProps | InputClassName). For advanced configuration any Input through TextField, use TextField.InputProps to pass any property accepted by the Input.<svg>. Instead, it's used to apply normalized color.tslint.json "member-ordering" definition (#9359) @seivanNov 28, 2017
A big thanks to the 26 contributors who made this release possible.
Here are some highlights ✨:
ExpansionPanel component with the help of the community. Big thanks to him!mui-org @hai-ceaIt's a revert. I have made the unwise call of adding the InputClasses property in an unrelated refactorization pull request #8942. It was not taking the input classes property into account. It was a breaking change and not needed.
Nov 13, 2017
A big thanks to the 18 contributors who made this release possible.
Here are some highlights ✨:
v1-beta branch (#8291). Thank you!In the following diff SwitchBase can be a Checkbox a Radio or a Switch.
-<SwitchBase disabled disabledClassName={disabledClassName} />;
+<SwitchBase disabled classes={{ disabled: disabledClassName }} />;
Nov 5, 2017
A big thanks to the 12 contributors who made this release possible.
Here are some highlights ✨:
ClickAwayListener component was made public (#8967).Input and FormLabel component do no longer inherit the font-size. You might have to override them explicitly.-Menu.classes.root
+Menu.classes.paper
-import { withResponsiveFullScreen } from 'material-ui/Dialog';
+import { withMobileDialog } from 'material-ui/Dialog';
disabled from FormControl (#8917) @nllarsonOct 30, 2017
A big thanks to the 17 contributors who made this release possible.
Here are some highlights ✨:
withStyles() with react-hot-loader.
Thanks a lot @rrousselGit for the support (#8897). <Grow
- transitionDuration={{
+ timeout={{
enter: enterDuration,
exit: leaveDuration,
}}
/>
- <Dialog transition={<Slide direction="left" />} />;
+ const Transition = props => <Slide direction="left" {...props} />
+ <Dialog transition={Transition} />;
- <Snackbar transition={<Slide direction="left" />} />;
+ const Transition = props => <Slide direction="left" {...props} />
+ <Snackbar transition={Transition} />;
jss-rtl needs to be installed and added to jss by the users. We do no longer do it by default.Oct 24, 2017
A big thanks to the 14 contributors who made this release possible.
Here are some highlights ✨:
I have noticed one inconsistency with the className property.
The value should have been applied on the root of the component.
We enforce this behavior now.
rows property (#8740) @fathybOct 16, 2017
A big thanks to the 14 contributors who made this release possible.
This release is mostly about stability. We have merged many bug fixes PRs and documentation improvement PRs. We are garbage collecting all the features we have been adding lately. As this garbage collection stabilize, we will be able to add new features, like a stepper, extension panel or date/time pickers. But we are not here yet. For instance, we need to upgrade all our dev dependencies to react@16 first.
- <Grid container xs={6} align="flex-end">
+ <Grid container xs={6} alignItems="flex-end">
<Grid item>
Oct 8, 2017
A big thanks to the 18 contributors who made this release possible.
Here are some highlights ✨:
withStyles() Higher-order Component (#8561) @pelotom and @sebald <TableFooter>
- <TablePagination
- count={data.length}
- rowsPerPage={rowsPerPage}
- page={page}
- onChangePage={this.handleChangePage}
- onChangeRowsPerPage={this.handleChangeRowsPerPage}
- />
+ <TableRow>
+ <TablePagination
+ count={data.length}
+ rowsPerPage={rowsPerPage}
+ page={page}
+ onChangePage={this.handleChangePage}
+ onChangeRowsPerPage={this.handleChangeRowsPerPage}
+ />
+ </TableRow>
</TableFooter>
Oct 4, 2017
Oct 1, 2017
A big thanks to the 18 contributors who made this release possible.
- <TableCell checkbox>
+ <TableCell padding="checkbox">
- withTheme,
+ withTheme(),
<Dialog
- enterTransitionDuration={100}
- leaveTransitionDuration={100}
+ transitionDuration={100}
</Dialog>
<Dialog
- enterTransitionDuration={100}
- leaveTransitionDuration={200}
+ transitionDuration={{
+ enter: 100,
+ exit: 200,
+ }}
</Dialog>
getWidth as width with a spec (#8387) @rosskevincomponent property (#8376) @AndriusBilBreakpointsOptions in createBreakpoints (#8374) @peterpricecreateShallow typings (#8415) @sebaldwithStyle use cases (#8399) @sebaldSep 24, 2017
A big thanks to the 25 contributors who made this release possible.
Wait, what?! We have been merging 52 pull requests from 25 different people in just 6 days (and closed 60 issues).
This is a new record for the project.
The v1-beta version is definitely getting traction.
Thanks for the support!
Here are some highlights ✨:
v0.x -> v1.x migration as well as a documentation page. @vividh (#8311, #8333, #8314)material-ui@next has just crossed react-toolbox in terms of downloads on npm.const muiTheme = createMuiTheme({
breakpoints: {
- breakpointsMap: {
+ values: {
xs: 360,
sm: 768,
md: 992,
lg: 1200,
xl: 1440,
},
},
});
paperWidthXs: {
- maxWidth: theme.breakpoints.getWidth('xs'),
+ maxWidth: theme.breakpoints.values.xs,
},
@pelotom did a great job improving the withStyles typings, such that less generics are required to be written! Most notably, you no longer have to pass a map of class names to withStyles:
- withStyles<{ root: string; }>(...)
+ withStyles(...)
Also, props can now be set when applying the HOC:
- const StyledComponent = withStyles<
- StyledComponentProps,
- StyledComponentClassNames
- >(styles)(Component);
+ const StyledComponent = withStyles(styles)<StyledComponentProps>(
+ ({ classes, text }) => (
+ <div className={classes.root}>
+ {text}
+ </div>
+ )
+ );
When withStyles() is used as a decorator and strictNullChecks is enabled, one has to use the ! operator to access classes from within the class.
resumeHideDuration property (#8272) @AndriusBilfullWidth property (#8329) @AndriusBilGrid to accept HTMLAttributes props (#8317) @michaelgruberSep 18, 2017
A big thanks to the 12 contributors who made this release possible.
- <Tooltip label="Add">
+ <Tooltip title="Add">
withResponsiveFullScreen, Input + Select (#8214) @sebaldSep 14, 2017
This is an early release as we have been breaking the TypeScript typings with 1.0.0-beta.9. Hopefully, we are in a better state now. Here are some highlights:
A big thanks to the 13 contributors who made this release possible.
+import KeyboardArrowLeft from 'material-ui-icons/KeyboardArrowLeft';
+import KeyboardArrowRight from 'material-ui-icons/KeyboardArrowRight';
<MobileStepper
- onBack={this.handleBack}
- onNext={this.handleNext}
- disableBack={this.state.activeStep === 0}
- disableNext={this.state.activeStep === 5}
+ nextButton={
+ <Button dense onClick={this.handleNext} disabled={this.state.activeStep === 5}>
+ Next
+ <KeyboardArrowRight />
+ </Button>
+ }
+ backButton={
+ <Button dense onClick={this.handleBack} disabled={this.state.activeStep === 0}>
+ <KeyboardArrowLeft />
+ Back
+ </Button>
+ }
/>
button and a behavior the same (#8130) @oliviertassinaribackgroundPosition: 'center' to CardMedia (#8148) @kripodButtonBase (#8175) @sebaldwithStyles usable as decorator (#8178) @sebaldSep 10, 2017
Again, this release is particularly dense! Here are some highlights:
A big thanks to the 13 contributors who made this release possible.
N/A
image to CardMediaProps (#8033) @sebaldBottomNavigations onChange type (#8067) @sebaldfocusable (#8102) @NLincolnSep 2, 2017
A big thanks to the 8 contributors who made this release possible.
N/A
styles (#7975) @sebaldtype property, remove docked property in TypeScript definition (#7998) @jaredklewisAug 30, 2017
This release is particularly dense! Here are some highlights:
A big thanks to the 12 contributors who made this release possible.
const theme = createMuiTheme({
- palette: createPalette({ primary: deepOrange, accent: green }),
+ palette: createPalette({ primary: deepOrange, secondary: green }),
});
flatAccent: {
- color: theme.palette.accent.A200,
+ color: theme.palette.secondary.A200,
-<Drawer docked />
+<Drawer type="persistent" />
[theme] Simplification of the API (#7934) @oliviertassinari
material-ui/styles/theme, the path changed:-import createMuiTheme from 'material-ui/styles/theme';
+import createMuiTheme from 'material-ui/styles/createMuiTheme';
createMuiTheme(). Notice that you can still change the output object before providing it to the <MuiThemeProvider />. const theme = createMuiTheme({
- palette: createPalette({
+ palette: {
primary: blue,
secondary: pink,
}),
- typography: createTypography(palette, {
+ typography: {
// System font
fontFamily:
'-apple-system,system-ui,BlinkMacSystemFont,' +
'"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif',
- }),
+ },
-},
+});
[Input] Better support required field (#7955) @oliviertassinari
Following Bootstrap, we are now forwarding the required property down to the input component. We used to only apply aria-required. This move makes us less opinionated and should help with native form handling.
If you want to avoid the default browser required property handling, you can add a noValidate property to the parent form.
Aug 20, 2017
A big shout-out to @sebald for our first TypeScript coverage. Another notable change is the migration of the documentation to Next.js, it's twice as fast as before 🚀.
A big thanks to the 9 contributors who made this release possible.
Push #7741 initiative forward (use value and onChange as controlling properties)
-<RadioGroup selectedValue="foo">
+<RadioGroup value="foo">
// ...
Aug 15, 2017
A big thanks to the 11 contributors who made this release possible.
This is an effort in the prolongation of #2957 where value/onChange is the idiomatic interface to control a component.
-<Tabs index={0}>
+<Tabs value={0}>
// ...
The primary motivation for this change is simplicity, it's also making our interface closer to
react-jss.
-import { withStyles, createStyleSheet } from 'material-ui/styles';
+import { withStyles } from 'material-ui/styles';
-const styleSheet = createStyleSheet('Button', {
+const styles = {
root: {
background: 'red',
},
-});
+};
// ...
-export default withStyles(styleSheet)(AppContent);
+export default withStyles(styles, { name: 'Button' })(Button);
Aug 5, 2017
A big thanks to the 7 contributors who made this release possible.
Jul 29, 2017
A big thanks to the 8 contributors who made this release possible.
This release is full of bug fixes and documentation improvements following the major styling update of the previous release.
Jul 23, 2017
Publish a new version as v1.0.0-beta.1 was already used.
Jul 23, 2017
A big thanks to the 12 contributors who made this release possible.
This is the first beta release. We are proud to move to the next step after 7 months of dogfooding with the alpha releases. We have been fixing many bugs and implemented new features. The styling solution has also been greatly improved:
c1yMuiThemeProvidercreateStyleSheet API with an optional namereact-jssPlease keep in mind that semver won't be respected between pre-releases. In other words, the API will change if we need to.
The styleManager is gone. The server-side rendering configuration changed, use the sheetManager instead. The documentation was updated, you can refer to it if needed.
Jul 18, 2017
<RadioGroup>
- <LabelRadio label="Male" value="male" />
+ <FormControlLabel value="male" control={<Radio />} label="Male" />
</RadioGroup>
This change provides more flexibility.
- <BottomNavigation index={index} onChange={this.handleChange}>
+ <BottomNavigation value={value} onChange={this.handleChange}>
Also plan to do the same for the Tabs in order to have a consistent API
where we always use value/onChange for controlled components.
Jul 4, 2017
-import { blue, fullWhite } from 'material-ui/styles/colors'
+import blue from 'material-ui/colors/blue'
+import common from 'material-ui/colors/common'
+const { fullWhite } = common
Jun 25, 2017
Do you like playing with bleeding-edge tech? We do, we have extended the support of React to the 16.0.0-alpha.13 release (aka Fiber).
Jun 19, 2017
The previous v1.0.0-alpha.18 release is corrupted.
Jun 19, 2017
classes property over the removed xxxClassName.Jun 12, 2017
A big thanks to the 8 contributors who made this release possible.
-<Button contrast primary>Login</Button>
+<Button color="contrast">Login</Button>
Jun 1, 2017
This release is mainly about bug fixes and improving the documentation.
Shout out to @kybarg for the update of the TextField in order to better follow the spec (#6566).
false as a valid index value (#6945) @oliviertassinariMay 23, 2017
This release introduces an important change in the API and the implementation.
Each exposed component is wrapped with a withStyles Higher-order component.
This HOC has different responsibilities, the one you're going to be interested in is
regarding the classes property. Now, we consider the CSS as a public API.
You now have two way to customize absolutely all the CSS injected by Material UI.
Either the instance level with the classes property or the class level with the
overrides theme property.
To learn more about it, have a look at the documentation.
If you were using the ref to access the internals of the component or native elements,
you're going to have to change your strategy. Either use innerRef or inputRef.
withResponsiveFullScreen (#6898) @rosskevinMay 14, 2017
May 8, 2017
-import { List, ListItem, ListItemText } from 'material-ui/List';
+import List, { ListItem, ListItemText } from 'material-ui/List';
-import Layout from 'material-ui/Layout';
+import Grid from 'material-ui/Grid';
only functionality (#6782) @rosskevinApr 30, 2017
A big thanks to the 11 contributors who are pushing the next branch forward.
handleEntered() (#6616) @agamrafaelihandleEntering() (#6615) @agamrafaelihandleInputChange() (#6613) @agamrafaelimuiThemeable as withTheme (#6610) @sxnshouldComponentUpdate() (#6680) @agamrafaeliApr 14, 2017
handleExiting() (#6589) @agamrafaelihandleDocumentKeyUp() (#6588) @agamrafaelihandleRequestTimeout() (#6599) @agamrafaeliApr 6, 2017
We are continuing investing in the documentation and the test suite.
Visual regression tests are now sent to argos-ci. Thanks @agamrafaeli for increasing the test coverage of 1% since the last release (95.23%). Thanks @mbrookes for fixing the inconsistency of the API and improving the API.
// Paper
-rounded
+square
// BottomNavigation
-showLabel
+showLabels
// Button, IconButton, Switch
-ripple
+disableRipple
// Modal, Dialog
-backdropVisible
+backdropInvisible
-backdrop
+disableBackdrop
-hideOnBackdropClick
+ignoreBackdropClick
-hideOnEscapeKeyUp
+ignoreEscapeKeyUp
// Backdrop
-visible
+invisible
// ListItem
-gutters
+disableGutters
// InputLabel, TextFieldLabel
-animated
+disableAnimation
// TableCell, List
-padding
+disablePadding
// Inputn
-underline
+disableUnderline
// CardAction
-actionSpacing
+disableActionSpacing
// CardHeader
-subhead
+subheader
only() calling 'xl' (#6475) @agamrafaeliApr 1, 2017
Mar 25, 2017
A big thanks to @agamrafaeli for increasing the test coverage by 4%. We are now at 93.53%. That's pretty great.
getSlideDirection (#6388) @agamrafaeliMar 12, 2017
Feb 26, 2017
Feb 26, 2017
Feb 26, 2017
Feb 12, 2017
Feb 7, 2017
One year ago, we were struggling with removing all the mixins from the project. Now, it's about rewriting all the components. We're going to try doing frequent alpha releases to keep some intertia. At least once per week would be good. As always, we are keeping the documentation up to date.
Jan 28, 2017
This is the first public alpha release. It's still work in progress. You will be able to start giving us feedback with this release. Please keep in mind that semver won't be respected between pre-releases. In other words, the API will change if we need to.
Jan 15, 2017
A A big thanks to the 20 contributors who are making this release possible.
Dec 25, 2016
We are releasing sooner than we use to for this special day :christmas_tree::gift:. 17 contributors are making that last release of the year possible.
2016 has been an exceptional year for Material UI.
That wouldn't have been possible without this awesome community. Thank you!
But this's just the beginning, some exciting stuff is coming in 2017 :sparkles:.
You can preview a very early version of the next branch following this link.
svg-icons sub module (#5774)Dec 9, 2016
This is another release improving the stability of v0.16.x.
Nov 17, 2016
v15.0.0 (417913e41fbc3366c6997258263270c6d7465c1a)Nov 17, 2016
This release is intended to solve an issue with react-tap-event-plugin following the release of React v15.4.0.
react-tap-event-plugin@^2.0.0 for react@^15.4.0 (#5572)Nov 13, 2016
This is another release improving the stability of v0.16.x while we are working on get next out of the door.
anchorEl (#5444)autoOk closing the dialog too early (#5511)string to node (#5474)Oct 18, 2016
This is a small release improving the stability of v0.16.x.
selected initial value check to account for falsy value (#5342)Oct 3, 2016
This release contains a ton of bug fixes and small improvements :boom:.
We have shifted goals for v0.16.0.
Across a number of issues over the last ~5 months we have been telling people that certain improvements are coming in v0.16.0 ranging from performance to component API issues and more.
Those improvements are coming with the next branch :sparkles:.
We are switching in goal so we can release changes more often.
Regarding going forward, this is likely to be the last minor release using the inline-style approach.
We are migrating all the components to a CSS-in-JS approach on the next branch.
For more details, you can have a look a the next milestone as well as the next project
:warning: New features based on the master branch (inline-style) have low priority and will most likely not be reviewed nor merged.
Sep 24, 2016
Sep 8, 2016
size attribute now means the outer diameter in pixels. Line thickness is variable and should be defined via the thickness attribute. Default margins are eliminated. If you'd like to upgrade your existing app without changing the actual sizes of your CircularProgress components, here are the formulas:newSize = 59.5 * oldSize;
thickness = 3.5 * oldSize;
margin = oldSize < 0.71 ? (50 - 59.5 * oldSize) / 2 : 5.25 * oldSize;
Examples:
// Before:
<CircularProgress />
<CircularProgress size={2} />
// After:
<CircularProgress size={59.5} style={{margin: 5.25}} /> // Thickness is 3.5 by default
<CircularProgress size={119} thickness={7} style={{margin: 10.5}} />
(#4705)
propTypes definitions so they can be removed in production (#4872)Aug 11, 2016
stage-1 dependencies of the examples (#4877)Jul 31, 2016
This release is mostly about bug fixes. All the new warnings introduced by React v15.2.1 and v15.3.0 should be addressed in this version.
labelColor being passed (#4766)Jul 7, 2016
During the release of 0.15.1 something went teribly wrong :sweat_smile: and some commits were left out even though they were mentioned in the changelog. This release includes the missing commits and some extra.
v15.2.0 (#4603, #4605, #4607)cursor:not-allowed style when disabled (#4170)Our support for IE and Safari improved in this release. Thanks @vizath, @hhaida, @nathanmarks and @aahan96 for their effort.
fullWidth regression (#4479)Jun 16, 2016
img instead of div (#4365)className prop is now set on the root element instead of being passed down (#4250)copy-webpack-plugin for dev (#4201)iconStyleLeft prop (#4266)weekTitleDayStyle (#4464)color property (#4025)floatingLabelFixed prop (#4392)StepButton event handlers (#4203)floatingLabelText intercepting click events (#4418)May 5, 2016
Please read through the alpha and beta releases of 0.15.0 too as their changes are not listed here.
withWidth HOC (#4126)jsx-first-prop-new-line (#4112)react/prefer-es6-class (#4126)containerStyle prop (#4085)padding and paddingTop (#4082)floatingLabelFocusStyle property (#4043)withWidth HOC (#4126)Apr 21, 2016
jsconfig.json - VS Code config file (#4011)error, hint, floatingLabel property validators to PropTypes.node (#4019)valueLink property (#3936)Apr 13, 2016
This release also ensures compatibility with React 15. You should update to this version if you need it.
This release changes how components are imported. You will need to update every import statement, Like:
import RaisedButton from 'material-ui/lib/raised-button';
import Tabs from 'material-ui/tabs/tabs';
import Tab from 'material-ui/tabs/tab';
to:
import RaisedButton from 'material-ui/RaisedButton';
import { Tabs, Tab } from 'material-ui/Tabs';
The exact import statements for each component can be found in their respective documentation page.
Have a ton of imports? almost had a heart attack? worry not, we also made a tool to ease your pain. checkout the readme.
As of now you will need to provide theme on context, see: https://v0.mui.com/#/customization/themes
index.js.You will probably need to turn
import Mui from 'material-ui';
into
import * as Mui from 'material-ui';
Although we discourage you to use this library like that.
rootClass with containerElement (#3783) (rootClass was broken before this change)material-ui-codemod package (#3782)jsx-handler-names (#3408)spaced-comment (#3910)onKeyDown property (#3853)grey400 to grey600 (#3938)TypeError when tabbing onto button (#3897)Mar 18, 2016
.default to your requires (#3648):- const MaterialUI = require('material-ui');
+ const MaterialUI = require('material-ui').default;
If you used ES modules, you're already all good:
import MaterialUI from 'material-ui'; // no changes here :D
valueLink (#3699)package.json to prevent building the lib after install (#3632)MenuItem, Table and Tabs in docs (#3589)Card subcomponent properties (#3621)EnhancedButton unit test and tweak karma config (#3512)FlatButton unit test (#3541)Divider unit test (#3527)Paper unit tests (#3528)Slider unit tests (#3688)operator-linebreak (#3516)no-multiple-empty-lines (#3516)@ignore before comment (#3611)dataSource (#3662)openOnFocus and item click (#3669)canAutoPosition to false for Popover (#3620)title from injected node attributes (to avoid native tooltip) (#3534)onKeyboardFocus being called with nullified event object (#3616)disableTouchRipple (#3659)anchorEl when using prop 'open' (#3666)<noscript/> (#3647)backgroundColor prop which was previously ignored (#3515)style prop being ignored (#3608)floatingLabelFixed property (#3646)shouldComponentUpdate function (#3673)defaultValue overlays floatingLabelText on mount (#3450)wordings with cancelLabel and okLabel (#3412)Feb 27, 2016
This release includes huge improvements to the implementation of components and utility modules. The most important improvement is the removal of mixins from the library, thanks to the great efforts of @newoga :+1:
There are also improvements to the unit testing infrastructure. We own this great improvement to @nathanmarks, thanks a lot :+1:.
Please note that raw-themes are deprecated with no warning! they will be removed
from the code with the 0.16.0 release.
[Cleanup] Remove the deprecated API of 0.14.x. (#3108)
[Styles] Removed all getStyles functions from the components (#3351)
[Core] Remove the window-listenable mixin (#3334)
[Core] Remove context-pure mixin (#3331)
[Core] Remove click-awayable mixin (#3360)
[Core] Utilize keycode library and remove key-code util (#3371)
[FloatingActionButton] className is now set on the root element (#2310)
[RaisedButton] className is now set on the root element (#3122)
[LeftNav] className and style are now set on the root element (#3322)
[Colors] Removed default export in favor of singular exports (#2825)
Note This can be temporarily worked around by changing
import Colors from 'material-ui/lib/styles/colors';
to
import * as Colors from 'material-ui/lib/styles/colors';.
[DatePicker] Standardize for ISO8601. (#3417)
window-listenable mixin from components (#3305) (Thanks to @newoga)isMounted() (#3437)arrow-parens (#3207)prefer-template (#3208, #3242)no-unneeded-ternary (#3320)prefer-const (#3315)jsx-space-before-closing (#3397)id-blacklist and blacklist e (#3398)padded-blocks: never (#3493)maxSearchResults property (#3262)firstDayOfWeek (#3417)openImmediately regression (#3384)multiple property of Menu (#3223)useLayerForClickAway (#3400) (#3283)secondaryTextColor (#3288)_isChildSelected child not recognising first child (#3165)onMouseEnter and onMouseLeave (#3481)React.createClass (#3326)animated (#3216)style-propable mixin and utils/styles (#3351)ThemeDecorator in favor of MuiThemeProvider (#3267)theme-manager and raw-themes (#3267)Feb 02, 2016
Related Projects section (#3102)FlatButtons for tabs (#3051)disabled property (#3060)labelPosition (#3115)labelPosition (#3115)Jan 26, 2016
Note that these are not essentially breaking changes. Unless you have used these implementation details in your code.
controllable.js mixin (#2889)mergeAndPrefix() (#2886)utils/extend.js (#2933)utils/immutability-helper.js (#2907)DateTimeFormat polyfill to the example (#3024)eslint:recommended (#2854)one-var (#2855)brace-style (#2855)react/jsx-pascal-case (#2953)react/jsx-max-props-per-line (#2953)react/jsx-closing-bracket-location (#2953)jsx-equals-spacing (#3035)arguments (#2876)for...of on table children (#2904)firstDayOfWeek and days abbreviations (#2899)className is ignored (#2723)disableKeyboardFocus (#3000)0.15.0 (#2994)Jan 08, 2016
react/jsx-indent (#2808)Jan 05, 2016
<a> element (#2708)errorText when using multiLine (#2742)Dec 25, 2015
The chagnes in 0.14.0-rc1 and o.14.0-rc2 are also included as part of this release.
Have a look at them as well.
menuItems, these components are now composable. (#2565)Dec 15, 2015
Popover animation from the component to increase flexibility (#2367)react-addons-test-utils package (#2401)preventDefault() when handling expansion (#2495)avatar property optional (#2397)checked property changes (#2464)overlayStyle property (#2431)width property (#2387)menuStyle property (#2389)Popover (#2150)open and onRequestChange properties (#2383)material-ui/lib/menu folder (#2443)actions property of Dialog accepting a JSON is deprecated (#2483)menuItems of LeftNav and all the related properties are now deprecated in favor of composibility (#2507)Dec 4, 2015
Nov 24, 2015
Nov 17, 2015
Nov 9, 2015
Oct 29, 2015
Oct 21, 2015
Oct 21, 2015
v0.12.4 should have really been v0.13.0 as it breaks compatibility with React 0.13.3. This version fixes that. We reverted some commits (related to React 0.14.0 support) from v0.12.4 to bring to you v0.12.5 that works as expected.
Oct 19, 2015
This version is not compatible with React 0.13.x. If you're on React 0.13.x, use Material UI v0.12.5 instead.
Oct 7, 2015
Oct 6, 2015
Sep 28, 2015
Sep 25, 2015
mui theme and raw theme, mui theme is produced from raw themeThemeManager has been changed, no longer needs new in callThemeManager produces mui theme from raw theme. Raw themes may be user-defined.ThemeManager allow to modify theme variables. Component-level styles may bemui theme.getContextProps() has been changed to getRelevantContextKeys()react-tap-event-plugin (#1714)actions now has id propertySep 15, 2015
Aug 24, 2015
onChange event to: onChange(value, e, tab). Where value is the value of the tab that it was changed
to, e is the event, and tab is the actual tab component. (#1232, #1235)static flag to the ThemeManager that defaults to true. If you're mutating your theme variables
after the app initializes, set this flag to false. This will allow us to perform some optimizations to
components that require theme variables. (#1397)nestedItems prop instead.open prop has been renamed to initiallyOpen.classnames
dependency. If you were using this mixin in your own projects, you'll need to pull the source and manually
include it.CardAction and CardExpandable styles. (#1376)CardExpandable. To use this, set isRtl to true in the theme. (#1408)disabled prop (#1406)labelPosition prop. (#1286)floatingLabelStyle prop (#1463 #1450)underlineFocusStyle prop (#1422, #1419)hintText can now be a string or element (#1424, #1202)setContentFontFamily (#1405)Aug 8, 2015
Aug 8, 2015
Jul 29, 2015
date-picker/index.js to expose DatePicker and DatePickerDialog.
Hence require('material-ui/lib/date-picker') no longer works. Use
require('material-ui/lib/date-picker/date-picker') instead.Jul 13, 2015
contentClassName is now being passed down to the appropriate child (#1122)closeOnItemTouchTap prop (#1156)errorText is now being passed down to underlying textField (#1131)inkBarStyle prop (#1154)errorStyle prop is now being properly merged (#1116)Jul 9, 2015
input.jsx file. This component was deprecated long ago, but was never removed from the project.button instead of the browser's default of submit. We found that
most of the buttons in our apps were not submit buttons and it was more intuitive to default to button.
If you need a submit button, be sure to pass in a type of submit. (#1017)DialogWindow component was refactored into Dialog. DialogWindow was never documented and was just
a lower level component that was used by Dialog. It was, however, exposed on the main index.js and has
since been removed. If you were using DialogWindow before, you should be able to safely use
Dialog instead./lib/svg-icons directory and were not added to the main index.js
file. To use these icons, require them directly: require('material-ui/lib/svg-icons/action/face').
These icons were created using a script that crawls the icon repo and generates the
appropriate js and jsx files and can be found in the /icon-builder directory.require('material-ui/lib/menus/menu').DropDownIcon and has all of the new menu features mentioned above.size prop (#945)mediaStyle prop (#1004)color and innerStyle prop (#928)FontIcon and SvgIcon as children (#967, #894)material-icon ligatures (#952, #1007)tooltipPosition prop (#921)tooltipStyles prop (#1010, #1005)material-icon ligatures (#1024, #1013)zDepth prop.primaryText prop (#1073)index.js (#955)backgroundColor, labelColor, disabledBackgroundColor, disabledLabelColor props (#965)fullWidth prop (#989)floatingLabelText is set (#976)className can now be set (#938, #713)autoHideDuration prop (#1050, #958)displayRowCheckbox prop (#935)contentContainerStyle prop (#953)input. (#959)errorStyle prop (#1079)DropDownMenu, DropDownIcon, RaisedButton, FontIcon (#965)Jun 20, 2015
Jun 14, 2015
The following components have been modified to allow for style overrides: Radio Button Group, Radio Button, Enhanced Switch Label, Text Field, Toggle, Checkbox (#807)
Jun 9, 2015
We've cleaned up some of our click/tap events. (#771) Upgrade should be straight forward, please see below:
May 24, 2015
style prop. These
changes are applied to the root element of the component. If you are
overriding a nested element of the component, check the component's
documentation and see if there is a style prop available for that nested
element. If a style prop does not exist for the component's nested element
that you are trying to override, submit an issue
requesting to have it added.var FILENAME = require('material-ui').Styles.FILENAME;.
Material UI has moved away from being a CSS Framework to being simply a
set of React components.var SvgIcon = require('material-ui/lib/svg-icon);/lib folder in Material UI contains the file structure needed when referencing individual components.Apr 27, 2015
General
this.getDOMNode() with React.findDOMNode() (#558)process.NODE_ENV with process.env.NODE_ENV (#573)props is not defined error when onChange is invoked (#556)Apr 21, 2015
Apr 1, 2015
DOMIdable with UniqueId (#490)title prop to accept node types instead of just strings (#474)Mar 25, 2015
onShow and onDismiss props (#399)onShow is now called when opened immediately (#453)disabled prop changes (#390)js/menu/* (#402)disable prop (#402)innerStyle prop (#418)initialSelectedIndex prop (#389)Mar 4, 2015
Feb. 13, 2015
Jan. 26, 2015
Jan. 26, 2015
Jan. 3, 2015
Dec. 25, 2014
Dec. 15, 2014
Dec. 7, 2014
Nov. 30, 2014
Nov. 28, 2014
Nov. 17, 2014
Nov. 11, 2014
Nov. 8, 2014
Nov. 7, 2014
Nov. 5, 2014