material-ui

MaterialΒ UI: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.

MIT License

Downloads
174M
Stars
91.4K
Committers
3.2K
View Code on GitHub Visit Website View on X
Ecosystems: React, Next, styled-components
material-ui - v5.0.0-alpha.38

Published by siriwatknp over 3 years ago

Jun 23, 2021

Big thanks to the 18 contributors who made this release possible. Here are some highlights ✨:

  • πŸš€ We have only 2 left in the breaking changes. 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.

  • πŸ’‘ 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

@material-ui/[email protected]

Breaking changes

    • 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={{...}}>

  • 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,
    },
  },
});

  • 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">

  • Rework the CSS to match the latest Material Design guidelines and make custom styles more intuitive. See documentation.

    You can reduce the density of the slider, closer to v4 with the size="small" prop.

  • 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>

  • 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';

Changes

@material-ui/[email protected]

Breaking Changes

  •  import { createBox } from '@material-ui/system';

-const styled = createBox(defaultTheme);
+const styled = createBox({ defaultTheme });

Changes

Docs

Core

All contributors of this release in alphabetical order: @ahmed-28, @brunocavalcante, @DanielBretzigheimer, @dijonkitchen, @dmrqx, @eps1lon, @Izhaki, @kshuiroy, @l10nbot, @michal-perlakowski, @michaldudak, @mnajdova, @oliviertassinari, @pavinduLakshan, @shadab14meb346, @siriwatknp, @tungdt-90, @varandasi

material-ui - v5.0.0-alpha.37

Published by mnajdova over 3 years ago

Jun 15, 2021

Big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

  • πŸ’„ Add support for responsive props on the Grid component (#26590) @likitarai1.
    This fixes a longstanding issue. You can now specify different values for each breakpoint.

    <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]

Breaking changes

  • 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>

Changes

@material-ui/[email protected]

Breaking changes

  • 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
}

Changes

@material-ui/[email protected]

@material-ui/[email protected]

  • The changes that we have tried in #26310 were breaking the integration with Next.js.

@material-ui/[email protected]

Docs

Core

All contributors of this release in alphabetical order: @chadmuro, @eps1lon, @likitarai1, @mnajdova, @nikitabobers, @oliviertassinari, @robphoenix, @sakura90, @siriwatknp, @varandasi, @vicasas

material-ui - v5.0.0-alpha.36

Published by eps1lon over 3 years ago

Jun 8, 2021

Big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:

  • βš’οΈ We've introduced a new ListItemButton component that should prevent common mistakes when using <ListItem button /> and help with customization and TypeScript support (#26446) @siriwatknp.

  • πŸ‘©β€πŸŽ€ experimentalStyled is now available without the experimental prefix.
    We're confident that its API shouldn't receive any major changes until the stable release of v5 (#26558) @mnajdova.

  • πŸ“¦ @material-ui/icons only ships ES modules and no longer CommonJS modules.
    This reduces the download size of the package from 1.7 MB to 1.2 MB and install size from 15.6 MB to 6.7 MB (#26310) @eps1lon.

  • πŸ’„ Add support for row and column spacing 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]

Breaking changes

  • 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 />

  • 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';

Changes

@material-ui/[email protected]

Breaking changes

  • 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]

Breaking changes

  • <DateTimePicker
  components={{
    LeftArrowIcon: AlarmIcon,
    RightArrowIcon: SnoozeIcon,
+   OpenPickerIcon: ClockIcon,
  }}
- openPickerIcon={<ClockIcon />}

@material-ui/[email protected]

Docs

Core

All contributors of this release in alphabetical order: @coder-freestyle, @eps1lon, @garfunkelvila, @itsnorbertkalacska, @likitarai1, @m4theushw, @michaldudak, @mnajdova, @onpaws, @sakura90, @sarahannnicholson, @siriwatknp, @vedadeepta, @vicasas

material-ui -

Published by oliviertassinari over 3 years ago

May 31, 2021

Big thanks to the 14 contributors who made this release possible. Here are some highlights ✨:

  • πŸ‘©β€πŸŽ€ We have completed the migration to emotion/sc of all the components (@material-ui/core and @material-ui/lab) @siriwatknp, @mnajdova.
  • πŸ“¦ Save 12 kB gzipped by removing the dependency on @material-ui/styles (JSS) from the core and the lab (#26377, #26382, #26376) @mnajdova.
  • πŸ“¦ Reduce a bit the size of the icons package. We go from 16.8MB to 15.1MB (#26309) @eps1lon
  • πŸ‘©β€πŸŽ€ We are progressively moving all modules that are relevant to styling custom design systems in @material-ui/system. It's meant to be complementary with @material-ui/unstyled (#26379, #26485) @mnajdova.
  • βš’οΈ Add many new codemods to automate the migration from v4 to v5 (#24867) @mbrookes.
  • And many more πŸ› bug fixes and πŸ“š improvements.

@material-ui/[email protected]

Breaking changes

  • [styles] Remove makeStyles from @material-ui/core (#26382) @mnajdova

    The makeStyles JSS utility is no longer exported from @material-ui/core. You can use @material-ui/styles instead. Make sure to add a ThemeProvider at the root of your application, as the defaultTheme is no longer available. If you are using this utility together with @material-ui/core, it's recommended you use the ThemeProvider component from @material-ui/core instead.

    -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:

Changes

  • [ButtonBase] Fix role="button" attribute (#26271) @Gautam-Arora24
  • [Dialog] Fix support for custom breakpoints (#26331) @jeferson-sb
  • [Select] Open popup below button (#26200) @oliviertassinari
  • [TextField] Add variants support, e.g. custom sizes (#26468) @siriwatknp
  • [Tooltip] Improve handling of small vs. touch screens (#26097) @oliviertassinari

@material-ui/[email protected]

  • [codemod] Add multiple codemods to migrate components from v4 to v5 (#24867) @mbrookes
  • [codemod] Correct path and add target placeholder (#26414) @mbrookes

@material-ui/[email protected]

  • [icons] Use array children instead of React fragments (#26309) @eps1lon

@material-ui/[email protected]

  • [system] Add Box to system (#26379) @mnajdova
  • [system] Add createStyled utility (#26485) @mnajdova

@material-ui/[email protected]

  • [styled-engine] Fix styled() util to respect options (#26339) @pasDamola

@material-ui/[email protected]

Breaking changes

  • [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.

Changes

  • [Button] Migrate LoadingButton to emotion (#26370) @siriwatknp
  • [ClockPicker] Selected option is the active descendant (#26411) @eps1lon
  • [DatePicker] Migrate CalendarPicker to emotion (#26390) @siriwatknp
  • [DatePicker] Migrate CalendarPickerSkeleton to emotion (#26335) @siriwatknp
  • [DateRangePicker] Migrate DateRangePickerDay to emotion (#26368) @siriwatknp
  • [DateRangePicker] Migrate internal components to emotion (#26326) @siriwatknp
  • [pickers] Migrate PickersCalendarHeader to emotion (#26354) @siriwatknp
  • [pickers] Migrate PickersModalDialog to emotion (#26355) @siriwatknp
  • [pickers] Migrate PickersPopper to emotion (#26391) @siriwatknp
  • [pickers] Migrate PickersTransition to emotion (#26353) @siriwatknp
  • [TimePicker] Migrate ClockPicker to emotion (#26389) @siriwatknp
  • [TreeView] Correctly select items in deeply nested trees (#26413) @Dru89

Docs

  • [docs] Add page for experimentalStyled() (#26361) @mnajdova
  • [docs] Add TypeScript convention (#26259) @siriwatknp
  • [docs] Add warning about git-blame-ignore-revs (#26487) @eps1lon
  • [docs] Clarify migration from Hidden (#26348) @m4theushw
  • [docs] Fix grammar for style library page (#26325) @mbrookes
  • [docs] Persist copied state indefinitely or until the user moves their cursor (#26336) @eps1lon
  • [docs] Typo in MultipleSelect (#26466) @wolfykey
  • [docs] Update system installation for v5 (#26481) @mnajdova
  • [template] Demo how to retreive form value (#26393) @akshitsuri

Core

  • [core] Batch small changes (#26434) @oliviertassinari
  • [core] Fix peer dependencies declaration with yarn v2 (#26433) @oliviertassinari
  • [core] Remove @material-ui/styles dependencies from declaration files too (#26376) @mnajdova
  • [core] Revert Leverage CircleCI workspaces for jobs after checkout (#26444) @eps1lon
  • [test] Don't hoist constant elements (#26448) @eps1lon
  • [test] Fix prop-type warning (#26432) @oliviertassinari
  • [test] Flush scheduled effects before user event returns (#26447) @eps1lon
  • [test] Move ClockPicker tests to ClockPicker.test (#26407) @eps1lon
  • [test] setProps from createPickerRender should set props on the rendered element (#26405) @eps1lon
  • [utils] Convert useId to TypeScript (#26491) @eps1lon
  • [website] Add Material-UI X page (#25794) @DanailH
  • [website] Add open application section (#26501) @oliviertassinari
  • [website] Add Siriwat to team page (#26406) @siriwatknp

All contributors of this release in alphabetical order: @akshitsuri, @DanailH, @Dru89, @eps1lon, @Gautam-Arora24, @jeferson-sb, @m4theushw, @mbrookes, @mnajdova, @oliviertassinari, @pasDamola, @siriwatknp, @wolfykey

material-ui - v5.0.0-alpha.34

Published by siriwatknp over 3 years ago

May 18, 2021

Big thanks to the 16 contributors who made this release possible. Here are some highlights ✨:

  • πŸ’₯ Make progress with the breaking changes. We have done 89 of the 109 changes planned. We will release 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.
  • πŸš€ Make progress with components migration to emotion. We have done 153 of the 168 components (almost there!)
  • And many more πŸ› bug fixes and πŸ“š improvements.

@material-ui/[email protected]

Breaking change

  • 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' }}
/>

  • Change location of StyledEngineProvider import.

    -import StyledEngineProvider from '@material-ui/core/StyledEngineProvider';
+import { StyledEngineProvider } from '@material-ui/core/styles';

  • 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': {

  • 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
-  getOptionSelected={(option, value) => option.title === value.title}
+  isOptionEqualToValue={(option, value) => option.title === value.title}
/>

Follow this link for full migration from v4 => v5

Changes

@material-ui/[email protected]

@material-ui/[email protected]

  • New DriveFileMove icon and its variants

Docs

Core

All contributors of this release in alphabetical order: @arpitBhalla, @atisheyJain03, @davidfdriscoll, @eps1lon, @fzaninotto, @Gautam-Arora24, @gnowland, @huyenltnguyen, @likitarai1, @m4theushw, @mnajdova, @oliviertassinari, @ruppysuppy, @siriwatknp, @smmoosavi, @vicas

material-ui -

Published by oliviertassinari over 3 years ago

May 9, 2021

Big thanks to the 17 contributors who made this release possible. Here are some highlights ✨:

  • πŸ’₯ Make progress with the breaking changes. We have done 81 of the 109 changes planned. We will release 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]

Breaking changes

  • 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} />;
}

  • 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({

  • 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';

  • 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>

  • 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>

  • This better matches the material design guidelines.

    -<Checkbox />
+<Checkbox color="secondary />

  • 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" />

  • 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';

  • 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' } }} />

    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 />;

  • Removed in favor of the useMediaQuery hook. You can reproduce the same functionality creating a custom hook as described here.

  • Rename the values of the reason argument in onChange and onClose for consistency:

    1. create-option to createOption
    2. select-option to selectOption
    3. remove-option to removeOption

  • 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>;
 }
    • The 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';
    • The jssPreset objeect 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';
    • The 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';

Changes

@material-ui/[email protected]

Breaking changes

  • 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">

Changes

Docs

Core

All 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

material-ui - 4.11.4

Published by eps1lon over 3 years ago

Apr 27, 2021

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.

@material-ui/[email protected]

Docs

Core

All contributors of this release in alphabetical order: @DanailH, @dtassone, @eps1lon, @mbrookes, @michal-perlakowski, @oliviertassinari

material-ui - v5.0.0-alpha.32

Published by mnajdova over 3 years ago

Apr 27, 2021

Big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:

  • πŸ‘©β€πŸŽ€ We have completed the migration to emotion of all components in @material-ui/core. We will focus on the components in @material-ui/lab next.
  • πŸ’₯ Make progress with the breaking changes plan. We have done 38 out of 41 breaking changes that can be deprecated. We have done 21 out of the 39 that can't have deprecations. Once done, we will focus on updating the components for better following material design, and to improve the aesthetic.
  • πŸ’„ Support extending the theme for custom color and size values in all components.
  • And many more πŸ› bug fixes and πŸ“š improvements.

@material-ui/[email protected]

Breaking changes

  • -<Table padding="default" />
-<TableCell padding="default" />
+<Table padding="normal" />
+<TableCell padding="normal" />

  • -<LoadingButton pending pendingIndicator="Pending..." pendingPosition="end" />
+<LoadingButton loading loadingIndicator="Pending..." loadingPosition="end" />

  • -<ButtonBase buttonRef={ref} />
+<ButtonBase ref={ref} />

    -<Button buttonRef={ref} />
+<Button ref={ref} />

  • 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.breakpoints.width('md')
+theme.breakpoints.values.md

  • 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;
}

Changes

@material-ui/[email protected]

@material-ui/[email protected]

@material-ui/[email protected]

@material-ui/[email protected]

This package is just re-released since version 5.1.7 had a breaking change.

Docs

Core

All contributors of this release in alphabetical order: @DanailH, @dtassone, @eps1lon, @gruber76, @JanMisker, @kevinlul, @Knoxo, @m4theushw, @mnajdova, @oliviertassinari, @simonecervini, @siriwatknp, @vicasas, @Vikram710, @wellwellmissesanderson

material-ui - v5.0.0-alpha.31

Published by mnajdova over 3 years ago

Apr 20, 2021

Big thanks to the 19 contributors who made this release possible. Here are some highlights ✨:

  • πŸ‘©β€πŸŽ€ Migrate 4 components to emotion.
  • πŸ’₯ Resume work on the breaking changes, aim for v5.0.0-beta.0 in the next coming months.
  • And many more πŸ› bug fixes and πŸ“š improvements.

@material-ui/[email protected]

Breaking changes

  • [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" />

Changes

@material-ui/[email protected]

Breaking changes

  • -import DayPicker from '@material-ui/lab/DayPicker';
+import CalendarPicker from '@material-ui/lab/CalendarPicker';

createMuiTheme({
  components: {
-   MuiDayPicker: {},
+   MuiCalendarPicker: {},
  }
})

  • -import PickersCalendarSkeleton from '@material-ui/lab/PickersCalendarSkeleton';
+import CalendarPickerSkeleton from '@material-ui/lab/CalendarPickerSkeleton';

  • -<DatePicker openTo="date" views={['date', 'month']} />
+<DatePicker openTo="day" views={['day', 'month']} />

Changes

@material-ui/[email protected]

@material-ui/[email protected]

Docs

Core

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

material-ui - 5.0.0-alpha.30

Published by eps1lon over 3 years ago

Apr 12, 2021

Big thanks to the 21 contributors who made this release possible. Here are some highlights ✨:

  • πŸ‘©β€πŸŽ€ Migrate 9 components to emotion.
  • πŸ’„ Support different numbers of columns with the Grid component (#25636) @Avi98.
  • And many more πŸ› bug fixes and πŸ“š improvements.

@material-ui/[email protected]

@material-ui/[email protected]

Docs

Core

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

material-ui -

Published by oliviertassinari over 3 years ago

Apr 4, 2021

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 other issues on the Grid component unlocked by the migration to emotion. They are ready to be worked on.

  • πŸ‘©β€πŸŽ€ Convert 3 components to emotion (#25541, #25516, #25521) @rajzik, @praveenkumar-kalidass, @siriwatknp.
    @material-ui/core has been migrated at 94% (7 components lefts we will handle in the next release), @material-ui/lab has been migrated at 3% (39 components left).

  • πŸ“š 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]

Docs

Core

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

material-ui -

Published by oliviertassinari over 3 years ago

Mar 24, 2021

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. We keep track of the progress in https://github.com/mui-org/material-ui/issues/24405.

  • 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.

  • πŸ“š Migrate 18 component demo pages to the sx, Stack, and styled API @vicasas.
    57% of the documentation pages have been migrated. This was also an importunity to breakdown the existing large demos into smaller and more focused ones. We keep track of the progress in https://github.com/mui-org/material-ui/issues/16947.

  • And many more πŸ› bug fixes and πŸ“š improvements.

@material-ui/[email protected]

Breaking changes

  • [core] Drop support for React 16 (#25464) @eps1lon

Changes

@material-ui/[email protected]

  • [Pickers] Unify ref behavior (#25425) @eps1lon
  • [Pickers] Sort properties (#25473) @eps1lon

@material-ui/[email protected]

Docs

Core

All 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

material-ui -

Published by mnajdova over 3 years ago

Mar 5, 2021

Big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:

  • πŸ‘©β€πŸŽ€ Convert 8 components to emotion (#25091, #25158, #25146, #25142, #25166) @natac13, @mngu, @m4theushw, @praveenkumar-kalidass.
  • πŸ“š Convert 5 components demos to emotion (#25164, #25183, #25180, #25145, #25138) @vicasas
  • And many more πŸ› bug fixes and πŸ“š improvements.

@material-ui/[email protected]

@material-ui/[email protected]

@material-ui/[email protected]

Breaking changes

The prop didn't solve any important problem better than any of its alternatives do.

-<DatePicker dateAdapter={x} />
+<LocalizationProvider dateAdapter={x}>
+  <DatePicker />
+</LocalizationProvider>

Changes

@material-ui/[email protected]

Docs

Core

All contributors of this release in alphabetical order: @beaudry, @eps1lon, @m4theushw, @mbrookes, @mngu, @natac13, @niting143, @oliviertassinari, @praveenkumar-kalidass, @ruppysuppy, @silver-snoopy, @vicasas

material-ui -

Published by oliviertassinari over 3 years ago

Feb 27, 2021

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]

Breaking changes

  • This is done to match the most common use cases with Material Design. You can restore the previous behavior with:

    -<Tabs />
+<Tabs indicatorColor="primary" textColor="inherit" />

Changes

@material-ui/[email protected]

@material-ui/[email protected]

@material-ui/[email protected]

  • The icons were synchronized with https://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]

Docs

Core

All 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

material-ui -

Published by oliviertassinari over 3 years ago

Feb 11, 2021

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 πŸ†:

    1. @natac13 x17
    2. @vicasas x5
    3. @kodai3 x4

  • πŸ“ Add a subset of the 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]

Breaking changes

  • 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.

Changes

@material-ui/[email protected]

Breaking changes

  • 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, e.g. <Box padding={2}>.

    <Box
- gap={2}
+ gap="2px"
>

@material-ui/[email protected]

@material-ui/[email protected]

Breaking changes

  • 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 StackOverflow answer for further details.
-import { Omit } from '@material-ui/types';
+import { DistributiveOmit } from '@material-ui/types';

Changes

@material-ui/[email protected]

Docs

Core

All 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

material-ui - 5.0.0-alpha.24

Published by eps1lon over 3 years ago

Jan 26, 2021

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. See https://github.com/mui-org/material-ui/issues/24405 for more details.

  • πŸ› 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 the 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]

Docs

Core

All 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

material-ui -

Published by oliviertassinari over 3 years ago

Jan 26, 2021

Fix a version resolution issue reported in https://github.com/mui-org/material-ui/issues/24620.

You can install this release with the npm tag:

  "@material-ui/core": "deprecations"

or the pre-release semver:

  "@material-ui/core": "^4.11.3-deprecations.1"
material-ui -

Published by oliviertassinari over 3 years ago

Jan 24, 2021

This release fixes an important issue with Chrome 88. The usage of NaN as a CSS property's value with JSS throws an exception.

Those wanting to anticipate the breaking changes coming in v5, on top of benefiting from this release, can install 4.11.3-deprecations.0. This pre-release includes deprecations with an upgrade path.

@material-ui/[email protected]

  • [styles] Upgrade jss to 10.5.1 (#24570) @oliviertassinari

@material-ui/[email protected]

  • [styles] Upgrade jss to 10.5.1 (#24570) @oliviertassinari

@material-ui/[email protected]

  • [system] Fix handling of null-ish values (#24527) @oliviertassinari"

Docs

  • [blog] 2020 in review and beyond (#24130) @oliviertassinari
  • [docs] Add ELEVATOR to backers (#23977) @mbrookes
  • [docs] Add eslint rule to docs (#23843) @jens-ox
  • [docs] Add notification for Adobe XD design assets (#23979) @mbrookes
  • [docs] Allow codesandbox deploy for demos in X (#23644) @oliviertassinari
  • [docs] Fix codesandbox datagrid demo (#24218) @brno32
  • [docs] Improve displayed versions (#24051) @oliviertassinari
  • [docs] Mention Adobe XD (#23978) @oliviertassinari
  • [docs] Sync tranlations (#23981) @l10nbot
  • [docs] Sync translation (#23719) @l10nbot
  • [docs] Sync translations (#23836) @l10nbot
  • [docs] Sync translations (#24039) @l10nbot
  • [docs] Update Divjoy URL (#24447) @mbrookes
  • [docs] Update in-house ads (#24410) @mbrookes

Core

  • [core] Batch small changes (#24224) @oliviertassinari
material-ui -

Published by oliviertassinari over 3 years ago

Jan 24, 2021

This release is intended to help prepare the migration to Material-UI v5. ⏫.

We have started to add deprecations in anticipation of v5. We plan to add a deprecation for any breaking change in v5 that allows it. Each warning comes with a simple message that explains how to handle the deprecation. If no warnings are reported in the console, you are set for this first batch.
Please report issues with the deprecations on #22074 (wrong instructions, false-positives, floods in the console, etc.).

You can expect similar pre-releases like this one in the coming months. Once v5 reaches the beta phase (no more breaking changes), the below deprecations will be included in the v4 stable release.

You can install this release with the npm tag:

  "@material-ui/core": "deprecations"

or the pre-release semver:

  "@material-ui/core": "^4.11.3-deprecations.1"

Deprecations

  • [Accordion] Deprecate classes.focused (#24083) @oliviertassinari
  • [Badge] Add overlap circular and rectangular (#22076) @eps1lon
  • [Box] Deprecate css prop in favor of sx (#23480) @mnajdova
  • [Collapse] Deprecate classes.container (#24084) @oliviertassinari
  • [Collapse] Deprecate collapsedHeight (#24079) @oliviertassinari
  • [Dialog] Add deprecation warning for withMobileDialog (#23570) @RDIL
  • [Dialog] Deprecate the transition onX props (#22114) @mbrookes
  • [Fab] Deprecate variant="round" (#24080) @oliviertassinari
  • [Grid] Add deprecation for justify prop rename (#24078) @oliviertassinari
  • [GridList] Rename to ImageList & add deprecation warnings (#22363) @mbrookes
  • [Icons] Deprecate fontSize value of default, add medium (#23971) @mbrookes
  • [Menu] Deprecate transition onX props (#22213) @mbrookes
  • [Modal][Dialog] Deprecate duplicate props with onChange (#24081) @oliviertassinari
  • [Modal][Portal] Deprecate onRendered (#24082) @oliviertassinari
  • [Popover] Deprecate transition onX props (#22202) @mbrookes
  • [RootRef] Deprecate component (#24075) @oliviertassinari
  • [Snackbar] Deprecate transition onX props (#22206) @mbrookes
  • [Table] Add deprecation for renamed TablePagination props (#23789) @mnajdova
  • [test] Deprecate test-utils (#24099) @eps1lon
  • [TextareaAutosize] Deprecate rowsMax->maxRows & rowsMin->minRows (#23530) @mhayk
  • [theme] Deprecate fade color utility in favor of alpha (#22837) @mnajdova
  • [theme] Deprecate theme.mixins.gutters (#22245) @joshwooding
material-ui -

Published by mnajdova almost 4 years ago

Jan 14, 2021

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]

  • [Container] Fix disableGutters style not applied (#24284) @povilass
  • [Paper] Migrate to emotion (#24397) @povilass
  • [Slider] Allow mobile VO users to interact with Sliders (#23902) @CodySchaaf
  • [SwipeableDrawer] Add bleeding demo (#24268) @vicasas
  • [SwipeableDrawer] Fix overflow scroll computation logic (#24225) @yann120
  • [Table] Fix "more than" translation in es-ES (#24356) @vicasas
  • [TextField] Fix error color for form input with secondary color (#24290) @praveenkumar-kalidass
  • [Button] Fix resolution of default props (#24253) @oliviertassinari

@material-ui/[email protected]

Breaking changes

  • [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>
        )}

Changes

  • [DatePicker] Fix out of range month selection (#24301) @m4theushw
  • [DatePicker] Replace withDefaultProps with useThemeProps (#24309) @m4theushw
  • [DatePicker] Simplify ExtendWrapper type (#24275) @eps1lon
  • [DatePicker] Reduce coupling of parsing picker input value and props (#24319) @eps1lon
  • [TimePicker] Add pointer cursor for clock in desktop (#24276) @praveenkumar-kalidass
  • [lab] Drop usage of createStyles (#24158) @eps1lon
  • [lab] Fix import paths in generated declaration files (#24380) @eps1lon
  • [lab] Prevent possible null pointer in useValidation (#24318) @eps1lon

@material-ui/[email protected]/@material-ui/[email protected]

  • [styled-engine] Add GlobalStyles component (#24176) @mnajdova

Docs

  • [docs] Add example perfomance Stepper vertical (#24292) @vicasas
  • [docs] Change Link example from JS to TS (#24291) @vicasas
  • [docs] Do not show 'Add' if user input matches existing option (#24333) @ramdog
  • [docs] Focus docs search input when the shortcut is clicked (#24296) @eps1lon
  • [docs] Further template the CSS API descriptions (#24360) @mbrookes
  • [docs] Improve Next.js Link integration (#24258) @oliviertassinari
  • [docs] Misc API fixes (#24357) @mbrookes
  • [docs] Prevent kbd to wrap (#24269) @oliviertassinari
  • [docs] Simplify icon button docs (#24317) @baharalidurrani
  • [docs] Standardize some API descriptions (#24274) @mbrookes
  • [docs] Sync AppSearch.tsx with AppSearch.js (#24363) @Lagicrus
  • [docs] Update CONTRIBUTING being accepted (#24306) @vicasas
  • [docs] Update right to left compatibility plugin version (#24370) @mnajdova
  • [docs] Widen example datetime-local picker so it's not clipped (#24324) @ramdog
  • [website] Add BrandingFooter (#24095) @mnajdova
  • [website] Add Discover more (#24327) @oliviertassinari
  • [website] Add newsletter (#24322) @oliviertassinari
  • [website] Fix regressions @oliviertassinari
  • [website] Improve typography theme (#24386) @oliviertassinari

Core

  • [core] Create issue labeled (#24283) @xrkffgg
  • [core] Fix eslint @oliviertassinari
  • [core] Skip downloading browser binaries when building docs (#24393) @eps1lon
  • [core] Small changes (#24329) @oliviertassinari
  • [core] Support public paths in module augmentation (#24267) @eps1lon
  • [core] Update classes generation logic (#24371) @mnajdova
  • [core] Update issue mark duplicate (#24311) @xrkffgg
  • [core] Update issues helper version (#24379) @xrkffgg
  • [test] Add pipeline task for performance monitoring (#24289) @eps1lon
  • [test] Compensate for Circle CI's low performance (#24358) @oliviertassinari
  • [test] Debug expensive GH actions still runing for l10nbot (#24392) @eps1lon
  • [test] Move callback args to right side of assertion (#24366) @eps1lon
  • [test] Persist new declaration files in CI cache (#24313) @eps1lon
  • [test] Reduce download times of playwright binaries (#24364) @eps1lon
  • [test] Skip expensive GitHub actions on l10nbot commits (#24303) @eps1lon
  • [test] Test declaration files in TS nightly (#24391) @eps1lon
  • [styles] Define useThemeProps as unstable and fix TS issues (#24383) @mnajdova
Package Rankings
Top 0.08% on Npmjs.org
Top 11.43% on Repo1.maven.org
Top 3.26% on Proxy.golang.org
Related Projects
themeless-ui

⬜️ A React component library harnessing the power of CSS.

04 Apr 2023 2
next-mui-helper

a high order component package for making a project with nextjs and material-ui easier. With layo...

24 Feb 2018 13