UNPKG

@material-ui/lab

Version:

Material-UI Lab - Incubator for Material-UI React components.

1,035 lines (791 loc) β€’ 665 kB
### [Versions](https://material-ui.com/versions/) ## 5.0.0-alpha.16 ###### _Nov 14 2020_ Big thanks to the 34 contributors who made this release possible. Here are some highlights ✨: - πŸ“… Migrate to the date picker in the lab (#22692) @dmtrKovalenko. We have integrated the components inside our code infrastructure. In the coming days, we will migrate all the issues from [material-ui-pickers](https://github.com/mui-org/material-ui-pickers) and archive this 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 expectations bar we have for core components. While the sources are currently hosted in the [main repository](https://github.com/mui-org/material-ui), we might move them to the [x repository](https://github.com/mui-org/material-ui-x), 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 [the system](https://next.material-ui.com/system/basics/). The System contains CSS utilities for rapidly implementing custom design. It now puts the emphasis on the `sx` prop. It's ideal for adding one-off styles, e.g. padding. When pushed to its limits, it can be used to implement a whole marketing page. - πŸ‘©β€πŸŽ¨ Upgrade emotion to v11 (#23007) @mnajdova. - And many more πŸ› bug fixes and πŸ“š improvements. ### `@material-ui/core@v5.0.0-alpha.16` #### Breaking changes - [TextField] Change default variant from standard to outlined (#23503) @mbrookes Standard has been removed from the Material Design guidelines. [This codemod](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod#textfield-variant-prop) will automatically update your code. ```diff -<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"](https://twitter.com/sulco/status/1305841873945272321), or React devtools props. #### Changes - [Autocomplete] Use Popper with when disablePortal (#23263) @eps1lon - [Box] Better DX for deprecated props (#23285) @eps1lon - [codemod] Add a codemod for the Box sx prop (#23465) @mbrookes - [CssBaseline] Add dark mode scrollbar support (#23407) @mmmols - [Slider] Extract slots as standalone components (#22893) @mnajdova - [Stepper] Fix the icon prop support in StepLabel (#23408) @randyshoopman - [theme] Add htmlFontSize to Typography interface (#23412) @fergusmcdonald - [Tooltip] Fix PopperProps popper modifiers not being merged properly (#23421) @dominique-mueller - [Tooltip] Long press select text on iOS (#23466) @hmaddisb - [Tooltip] Unexpected behaviour onOpen/onClose (#23482) @brorlarsnicklas ### `@material-ui/lab@v5.0.0-alpha.16` - [DatePicker] Migrate to the lab #22692 @dmtrKovalenko ### `@material-ui/system@v5.0.0-alpha.16` - [system] Add typography prop that will pull from theme.typography (#23451) @mnajdova - [system] Create separate margin and padding functions (#23452) @mnajdova - [system] Export styleFunctionSx and improve signature (#23397) @mnajdova - [system] Merge breakpoints in correct order (#23380) @mnajdova - [system] Remove css utility in favor of sx (#23454) @mnajdova - [system] Warn for spacing when non integer value is used with theme.spacing array (#23460) @mnajdova ### `@material-ui/styled-engine@v5.0.0-alpha.16` - [styled-engine] Upgrade emotion to 11 RC (#23007) @mnajdova ### `@material-ui/unstyled@v5.0.0-alpha.16` - [Slider] Extract slots as standalone components (#22893) @mnajdova ### `@material-ui/codemod@v5.0.0-alpha.16` - [TextField] Change default variant from standard to outlined (#23503) @mbrookes ### Docs - [docs] Allow to host code in a different repo (#23390) @oliviertassinari - [docs] Avoid confusing nav items with disabled items (#23283) @eps1lon - [docs] CHANGELOG for v5.0.0-alpha.15 (#23383) @oliviertassinari - [docs] Fix examples download URLs to match the correct branch name (#23467) @matchatype - [docs] Fix links being opened when dismissing context menus (#23491) @eps1lon - [docs] Fix the Netlify proxy for localization of X (#23387) @oliviertassinari - [docs] Fix usage of palette.type instead of palette.mode in docs (#23414) @hubgit - [docs] Improve documentation of the system (#23294) @mnajdova - [docs] Improve feedback a11y (#23459) @eps1lon - [docs] Improve formatting of the system (#23509) @oliviertassinari - [docs] Improve migration guide for theme.palette (#23416) @hubgit - [docs] Mention delay instead of transition twice (#23393) @benmneb - [docs] Prepare Material-UI X (#1893) @oliviertassinari - [docs] Redirect legacy GridList pages to ImageList (#23456) @eps1lon - [docs] Remove redundant aria-label when wrapped in Tooltip (#23455) @eps1lon - [docs] Sync translations (#23316) @l10nbot - [docs] Update buildAPI script to handle the "styled" components (#23370) @mnajdova - [docs] Update new components in the roadmap (#23507) @mbrookes - [docs] Update translations (#23501) @l10nbot ### Core - [core] Batch small changes (#23422) @oliviertassinari - [core] Fix skipped ignore patterns (#23474) @eps1lon - [core] Switch to globby and fast-glob (#23382) @eps1lon - [test] Increase timeout threshold for slow Firefox tests (#23463) @eps1lon - [test] Make sure system properties are in the same order when generating CSS (#23388) @mnajdova - [test] Prefer longhand properties (#23445) @eps1lon - [test] Remove data-mui-test from tests (#23498) @eps1lon - [test] Remove keyDown#force (#23488) @eps1lon - [test] Use adapter instead of native Date (#23475) @eps1lon - [test] Use fake timers in visual regression tests (#23464) @eps1lon ## 5.0.0-alpha.15 ###### _Nov 4 2020_ 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](https://reactjs.org/blog/2020/10/20/react-v17.html). 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](https://next.material-ui.com/components/slider-styled/#unstyled-slider) as the styled version. **Why an unstyled package?** While engineering teams are successfully building custom design systems by wrapping Material-UI, we [occasionally hear](https://github.com/mui-org/material-ui/issues/6218) 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](https://npm-stat.com/charts.html?package=%40angular%2Fmaterial&package=%40angular%2Fcdk&from=2017-11-03&to=2020-11-03). Another reason for introducing this package is to prepare the groundwork for a [second theme](https://github.com/mui-org/material-ui/issues/22485) (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, e.g. [useAutocomplete](https://next.material-ui.com/components/autocomplete/#useautocomplete) or [usePagination](https://next.material-ui.com/components/pagination/#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/core@v5.0.0-alpha.15` #### Breaking changes - [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: ```diff -theme.palette.augmentColor(red); +theme.palette.augmentColor({ color: red, name: 'brand' }); ``` #### Changes - [Autocomplete] Fix unclickable area between text input and endAdornment (#23229) @sujinleeme - [Autocomplete] Follow Material Design State spec (#23323) @sujinleeme - [Avatar] Fix usage of srcset property (#23286) @matheuspiment - [ClickAwayListener] Fix mounting behavior in Portals in React 17 (#23315) @eps1lon - [core] Allow React 17 (#23311) @eps1lon - [Icon] Fix translation, e.g Google Translate (#23237) @cbeltrangomez84 - [LinearProgress] Fix Safari's bug during composition of different paint (#23293) @montogeek - [Radio] Fix dot misalignment in Safari (#23239) @anasufana - [styled-engine] Fix tagged template syntax with multiple expressions (#23269) @eps1lon - [Table] Fix empty row logic when displaying all (#23280) @JoaoJesus94 - [Table] Fix handling of rowsPerPage={-1} (#23299) @JoaoJesus94 - [TextareaAutosize] Fix container with no intrinsic height (#23273) @sujinleeme - [TextField] Fix disabled color in Safari (#23375) @Morteza-Jenabzadeh - [theme] Fix spacing string arguments (#23224) @GuilleDF - [Tooltip] Fix excess spacing (#23233) @benneq ### `@material-ui/unstyled@v5.0.0-alpha.15` - [unstyled] Create package and move SliderUnstyled there (#23270) @mnajdova - [core] Allow React 17 (#23311) @eps1lon ### `@material-ui/lab@v5.0.0-alpha.15` - [lab] Migrate Timeline to TypeScript (#23242) @oliviertassinari - [core] Allow React 17 (#23311) @eps1lon ### `@material-ui/icons@v5.0.0-alpha.15` - [core] Allow React 17 (#23311) @eps1lon ### `@material-ui/styles@v5.0.0-alpha.15` - [core] Allow React 17 (#23311) @eps1lon ### `@material-ui/system@v5.0.0-alpha.15` - [core] Allow React 17 (#23311) @eps1lon - [theme] Fix spacing string arguments (#23224) @GuilleDF ### Docs - [Transition]Β Document default appear value (#23221) @GuilleDF - [blog] Danail Hadjiatanasov joins Material-UI (#23223) @oliviertassinari - [docs] Add Material-UI Builder to in-house ads (#23342) @mbrookes - [docs] Fix a few typos and add comma (#23284) @reedanders - [docs] Fix few propTypes in Inputs (#23331) @youknowhat - [docs] Fix language cookie (#23324) @mbrookes - [docs] Fix typo in `README.md` (#23329) @mtsknn - [docs] Guard against unknown value in userLanguage cookie (#23336) @mbrookes - [docs] Make it clearer that custom router is supported (#23304) @Maxgit3 - [docs] Sync translations (#23080) @l10nbot - [docs] Update homepage quotes (#23326) @mbrookes - [docs] Update nav translations (#23234) @mbrookes - [docs] Update system pages to use sx prop instead of deprecated Box props (#23368) @mnajdova - [docs] Use present tense for bool prop descriptions (#23274) @mbrookes ### Core - [utils] Add all @material-ui/core/utils to @material-ui/utils (#23264) @mnajdova - [core] Batch small changes (#23327) @oliviertassinari - [core] Fix implicit transitive 'csstype' dependency (#23301) @quinnturner - [core] Move material-ui-benchmark into benchmark/server (#23271) @eps1lon - [core] Replace temp package with node built-ins (#23262) @eps1lon - [core] Restrict top level imports that target CJS modules (#23159) @eps1lon - [test] Fix unexpected console warn/error spy swallowing unrelated messages (#23312) @eps1lon - [test] Fix various issues with the new cli on windows (#23381) @eps1lon - [test] Improve test debugging (#23372) @eps1lon - [test] Introduce experimental CLI (#23369) @eps1lon - [test] Prevent growing call stack in custom keyDown/keyUp (#23321) @eps1lon - [test] Run with Safari 13 (#23292) @eps1lon ## 5.0.0-alpha.14 ###### _Oct 23 2020_ 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](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df) that we did for the system two years ago. The system is meant to solve the following problems: 1. Naming things is hard. How should a class name, JSS style rule, or styled component be named? 2. Jumping between JS and CSS in the editor wastes time. This is particularly true as the complexity (LOCs/# of elements) of a component increases. It's still true when using the `styled()` API. 3. Introducing a `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? 4. Pulling values out from the theme can be cumbersome. How can we make it less painful to increase the usage of design tokens? This new iteration of the 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 the system doesn't support a specific CSS property. - It moves from support on Box only to any core component (starting with the slider). ```jsx 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: ```jsx import CloseIcon from '@material-ui/icons/Close'; ``` - And many more πŸ› bug fixes and πŸ“š improvements. ### `@material-ui/core@v5.0.0-alpha.14` #### Breaking changes - [Popper] Upgrade to popper.js to v2 (#21761) @joshwooding This third-party library has introduced a lot of changes.<br /> You can read [their migration guide](https://popper.js.org/docs/v2/migration-guide/) or the following summary: - The CSS prefixes have changed: ```diff popper: { zIndex: 1, - '&[x-placement*="bottom"] $arrow': { + '&[data-popper-placement*="bottom"] $arrow': { ``` - Method names have changed. ```diff -popperRef.current.scheduleUpdate() +popperRef.current.update() ``` ```diff -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: ```diff -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; ``` #### Changes - [Box] Add sx prop (#23053) @mnajdova - [Box] Deprecate system props (#23206) @mnajdova - [Card] Use flex display for CardHeader.avatar (#23169) @mordechaim - [Container] Fix support of custom breakpoint units (#23191) @espipj - [Container] Revert max-width change for xs @oliviertassinari - [InputBase] Use ref prop instead of inputRef prop on input component (#23174) @GuilleDF - [l10n] Add Kazakh (kz-KZ) locale (#23195) @abdulgafur24 - [Rating] Ensure hover and click are in sync (#23117) @redbmk - [Select] Fix SelectDisplayProps className concat (#23211) @reedanders ### `@material-ui/styled-engine@v5.0.0-alpha.14` - [styled] Add @babel/runtime dependency (#23175) @koistya ### `@material-ui/system@v5.0.0-alpha.14` - [Box] Add sx prop (#23053) @mnajdova - [core] Fix bundles for packages without subpackages (#23157) @eps1lon ### `@material-ui/icons@v5.0.0-alpha.14` - [core] Fix bundles for packages without subpackages (#23157) @eps1lon ### `@material-ui/lab@v5.0.0-alpha.14` #### Breaking changes - [AvatarGroup] Move from lab to core (#23121) @mbrookes Move the component from the lab to the core. This component will become stable. ```diff -import AvatarGroup from '@material-ui/lab/AvatarGroup'; +import AvatarGroup from '@material-ui/core/AvatarGroup'; ``` #### Changes - [Slider] Add sx prop in SliderStyled (#23205) @mnajdova ### `@material-ui/utils@v5.0.0-alpha.14` - [utils] Fix types of chainPropTypes (#23123) @oliviertassinari - [core] Fix bundles for packages without subpackages (#23157) @eps1lon ### `@material-ui/types@v5.2.0-alpha.14` - [types] Add LICENSE files (#23162) @lielfr ### Docs - [examples] Remove reason example project (#23158) @mnajdova - [examples] Update cdn example to use @material-ui/core@next (#23153) @mnajdova - [examples] Update preact to use the @material-ui/core@next (#23154) @mnajdova - [examples] Update ssr example to use @material-ui/core@next (#23155) @mnajdova - [examples] Updated nextjs-typescript example to use @material-ui/core@next (#23119) @numToStr - [docs] Add Menu component example with explicit positioning prop values (#23167) @jaebradley - [docs] Add page feedback (#22885) @mbrookes - [docs] Add Performance section for Modal (#23168) @jaebradley - [docs] Better document CardActionArea (#23196) @el1f - [docs] Cleaner image of font-size equation (#23189) @CamDavidsonPilon - [docs] Fix casing typo (#23148) @piperchester - [docs] Fix typo in steppers (#23163) @AGDholo - [docs] Fix typo on interoperability page (#23177) @SassNinja - [docs] Improve migration v5 guide @oliviertassinari - [docs] Lazy load demo toolbar (#23108) @eps1lon - [docs] Remove unused style selectors `extendedIcon` (#23160) @MatejKastak - [docs] Use Box sx prop on all Slider examples #23217 @mnajdova ### Core - [benchmark] Add theme-ui and chakra-ui Box scenarios (#23180) @mnajdova - [benchmark] Create separate workspace (#23209) @eps1lon - [benchmark] Extracted Profiler & added output in readme (#23178) @mnajdova - [core] Batch small changes (#23116) @oliviertassinari - [core] Improve bundle size comment (#23110) @eps1lon - [core] Prevent unstable chunks in size snapshot (#23181) @eps1lon ## 5.0.0-alpha.13 ###### _Oct 17 2020_ 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](https://next.material-ui.com/getting-started/supported-platforms/) by Material-UI. The previous policy was defined 2 years ago, and the landscape has evolved since then. The package now includes 4 bundles: 1. `stable` (default, formerly `esm`) which targets a snapshot (on release) of `> 0.5%, last 2 versions, Firefox ESR, not dead, not IE 11"` 2. `node` (formerly default) which targets a snapshot (on release) of `maintained node versions` 3. `legacy` (new) which is `stable` + IE11 4. `modern` (formerly `es`) which targets the last 1 version of evergreen browsers and active node (currently that is 14 The 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](https://github.com/philipwalton/flexbugs/blob/master/README.md#flexbug-9). Check the updated [Supported platforms documentation](https://next.material-ui.com/getting-started/supported-platforms/) and [new "minimizing bundle size" guide](https://next.material-ui.com/guides/minimizing-bundle-size/). 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](https://next.material-ui.com/system/basics/). 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](https://material-ui.com/blog/2020-q3-update/) (#23055) @oliviertassinari. - πŸ™ Migrate more tests to react-testing-library @deiga, @Morteza-Jenabzadeh, @nicholas-l. - And many more πŸ› bug fixes and πŸ“š improvements. ### `@material-ui/core@v5.0.0-alpha.13` #### Breaking changes - [core] Ship modern bundle (#22814) @eps1lon #### Change - [Autocomplete] Fix autoHighlight synchronization (#23025) @Tubaleviao - [Autocomplete] Ignore keydown event until IME is confirmed (#23050) @jiggum - [Card] Fix action area hover style on touch devices (#23079) @giulianovarriale - [Slider] Align value label text center (#23075) @LorenzHenk - [SwipeableDrawer] Decorrelate swipeAreaWidth and initial jumping amount (#23042) @omidtajik - [Tooltip] Fix followCursor preventing onMouseMove on children (#23104) @eps1lon - [Tooltip] Refactor event handling (#23092) @eps1lon - [theme] Add missing types for theme overrides (#23028) @povilass - [l10n] Add Arabic (ar_EG) locale (#23006) @GoldenWings ### `@material-ui/lab@v5.0.0-alpha.13` - [TreeView] Fix bundle size link and refactor array spreads (#22992) @joshwooding - [TreeView] Fix `alpha` color utility instead of deprecated `fade` (#22978) @joshwooding - [core] Ship modern bundle (#22814) @eps1lon ### `@material-ui/utils@v5.0.0-alpha.13` - [core] Ship modern bundle (#22814) @eps1lon ### `@material-ui/system@v5.0.0-alpha.13` - [core] Ship modern bundle (#22814) @eps1lon ### `@material-ui/styles@v5.0.0-alpha.13` - [core] Ship modern bundle (#22814) @eps1lon ### `@material-ui/styled-engine@v5.0.0-alpha.13` - [core] Ship modern bundle (#22814) @eps1lon ### `@material-ui/styled-engine-sc@v5.0.0-alpha.13` - [core] Ship modern bundle (#22814) @eps1lon ### `@material-ui/icons@v5.0.0-alpha.13` - [core] Ship modern bundle (#22814) @eps1lon ### Docs - [blog] Allow to support card preview (#23087) @oliviertassinari - [blog] Q3 2020 Update (#23055) @oliviertassinari - [docs] Add a new demo to the showcase (#22949) @adonig - [docs] Add demo for Link underline (#23074) @LorenzHenk - [docs] Add logarithmic slider demo (#23076) @LorenzHenk - [docs] Add react-admin in related projects page (#23097) @fzaninotto - [docs] Change color to palette (#23046) @mockingjet - [docs] Don't suggest putting a Switch inside a ListItemSecondaryAction (#23018) @sirlantis - [docs] Fix docs:dev (#23023) @eps1lon - [docs] Fix vertical alignment of Slider demo (#23059) @r0zar - [docs] Fix wrong variable characters (#23066) @AGDholo - [docs] Improve docs for Table sticky column grouping (#23100) @andre-silva-14 - [docs] Improve icon preview color contrast (#22974) @oliviertassinari - [docs] Interoperability guide updates (#23030) @mnajdova - [docs] Move outdated versions into a collapsible section (#23029) @NoNamePro0 - [docs] Point to material-ui-x/next instead of master @oliviertassinari - [docs] Restore ButtonBases images (#23083) @eps1lon - [docs] Slider demos clean up (#22964) @mnajdova - [docs] Sync translations (#22888) @l10nbot - [examples] Update gatsby example to use @material-ui/\* next (#23089) @mnajdova - [examples] Update gatsby-theme example to use @material-ui/\* next #23093 @mnajdova - [examples] Update nextjs example project to use @material-ui/\* next (#23094) @mnajdova ### Core - [benchmark] Add browser benchmark (#22923) @mnajdova - [benchmark] Fix benchmark scripts & moved scenarios to correct benchmark project (#23058) @mnajdova - [test] Enable failing unexpected console warn|error in browser tests (#23063) @eps1lon - [test] Fail each test on unexpected console logs in test:unit (#23064) @eps1lon - [test] Introduce toHaveInlineStyle and toHaveComputedStyle matcher (#23054) @eps1lon - [test] Migrate ButtonBase to react-testing-library (#23011) @deiga - [test] Migrate IconButton to react-testing-library (#22972) @Morteza-Jenabzadeh - [test] Migrate InputBase to react-testing-library (#23014) @deiga - [test] Migrate SpeedDial to react-testing-library (#23021) @nicholas-l - [test] Migrate TableCell to react-testing-library (#23095) @nicholas-l - [test] Migrate TableRow to react-testing-library (#23105) @deiga - [test] Move some work out of evaluation phase (#23112) @eps1lon - [test] Supress 404 img warnings in browser tests (#23106) @eps1lon - [test] Throw on console.(error|warn) outside of test (#22907) @eps1lon - [test] Use dot reporter in CI (#23026) @eps1lon - [core] Add support for iOS Safari 12 (#23068) @eps1lon - [core] Also format dot files & folders (#22975) @oliviertassinari - [core] Extend yarn size:why (#22979) @eps1lon - [core] Fix react-next test (#23027) @oliviertassinari - [core] Lint CSS (#22976) @oliviertassinari - [core] Misc modules/\* cleanup (#22983) @eps1lon ## 5.0.0-alpha.12 ###### _Oct 11, 2020_ Big thanks to the 45 contributors who made this release possible. Here are some highlights ✨: - πŸ§ͺ The promotion of 4 components from the lab to core: Autocomplete, Pagination, SpeedDial, and ToggleButton. These components have been in the lab for more than 10 months @mbrookes. - πŸ“¦ Switch the style engine of the `Box` component from JSS to _@material-ui/styled-engine_ (use emotion by default) (#22945) @mnajdova. The early benchmark we have run shows that performance has improved. We will share more detailed results in #21657. - πŸ™ Migrate a large portion of the tests from enzyme to react-testing-library @eladmotola, @baterson, @bewong89, @devrasec, @guillermaster, @itamar244, @jeferson-sb, @The24thDS. Last month, react-testing-library had [more downloads](https://npm-stat.com/charts.html?package=enzyme&package=%40testing-library%2Freact&from=2019-10-10&to=2020-10-10) than enzyme in the ecosystem! - 🏷 Add support for tooltips [following the cursor](https://next.material-ui.com/components/tooltips/#follow-cursor) (#22876) @xtrixia. - And many more πŸ› bug fixes and πŸ“š improvements. ### `@material-ui/core@v5.0.0-alpha.12` #### Breaking changes - [Accordion] Remove `display:flex` from AccordionDetails (#22809) @croraf The style was too opinionated. Most developers 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. ```diff <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. ```diff - 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](https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus). 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: ```diff -<Tooltip> +<Tooltip disableInteractive> # Interactive tooltips no longer need the `interactive` prop. -<Tooltip interactive> +<Tooltip> ``` #### Changes - [Accordion] Remove incorrect demo which nests input in button (#22898) @croraf - [Autocomplete] Fix filtering when value is already selected (#22935) @montelius - [Autocomplete] Fix virtualization example in IE11 (#22940) @bearfromtheabyss - [Autocomplete] Restrict component props in `renderInput` (#22789) @eps1lon - [Box] Add types for `ref` (#22927) @lcswillems - [Button] Fix invalid type value (#22883) @oliviertassinari - [Button] Improve loading transition (#22884) @oliviertassinari - [Grid] Clarify document about direction column limitation (#22871) @ThewBear - [IconButton] Improve warning against non root onClick listeners (#22821) @pranjanpr - [Popper] Use placement viewport instead of window (#22748) @maksimgm - [Select] Add generic support for value (#22839) @AntoineGrandchamp - [Skeleton] Fix importing with named export (#22879) @0prodigy - [SpeedDial] Fix keyboard navigation when uncontrolled (#22826) @akharkhonov - [styled] Specify emotion & styled-components as optional peer dependencies (#22808) @mnajdova - [styled] Support default theme when none is available (#22791) @mnajdova - [Tabs] Fix RTL scrollbar with Chrome 85 (#22830) @ankit - [TextField] Pass minRows to InputComponent (#22831) @suliskh - [ToggleButton] Fix vertical double border (#22825) @Avi98 - [ToggleButton] Match ToggleButtonGroup name and render function name (#22790) @jjoselv - [Tooltip] Add placement `followCursor` (#22876) @xtrixia - [Tooltip] Improve docs and warning for custom children (#22775) @brorlarsnicklas - [Tooltip] Use label semantics (#22729) @eps1lon - [useAutocomplete] Fix getXProps functions type (#22749) @kentaro84207 ### `@material-ui/styled-engine@v5.0.0-alpha.12` - [styled] Support default theme when none is available (#22791) @mnajdova ### `@material-ui/lab@v5.0.0-alpha.12` #### Breaking changes - [Autocomplete] Move from lab to core (#22715) @mbrookes Move the component from the lab to the core. This component will become stable. ```diff -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. ```diff -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. ```diff -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. ```diff -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`. #### Changes - [AvatarGroup] Add variant prop (#22832) @hjades - [SliderStyled] Fix mark label alignment on coarse pointer devices (#22849) @joshwooding ### Docs - [docs] Add example for using styled-components as styled-engine (#22788) @mnajdova - [docs] Add longhand system API props to docs (#22796) @possibilities - [docs] Box & system cleanup (#22962) @mnajdova - [docs] CONTRIBUTING.md only yarn is supported (#22754) @Yashvirani - [docs] Document createSvgIcon() (#22843) @mbrookes - [docs] Document inherited props (#22318) @oliviertassinari - [docs] Document LoadingButton behavior (#22878) @eps1lon - [docs] Fix dark theme for input field on autocomplete (#22711) @GauravKesarwani - [docs] Fix material icon search details view (#22793) @skr571999 - [docs] Fix type vs. mode and capitalization of createMuiTheme (#22844) @joshwooding - [docs] Fix typo in guides/typescript (#22806) @croraf - [docs] Fix various typos (#22842) @kkirsche - [docs] For non-SSR language, internal search fall back to English (#22902) @bicstone - [docs] Improve CRA example (#22967) @spursbyte - [docs] Improve FormControl duplication warning (#22823) @talgautb - [docs] Improve perf when opening the drawer (#22781) @eps1lon - [docs] Improve SEO on titles (#22742) @oliviertassinari - [docs] Improve the left side-nav (#22780) @oliviertassinari - [docs] Include peer deps in installation steps (#22889) @numToStr - [docs] Link all the examples in docs (#22891) @Avi98 - [docs] More robust description matcher (#22836) @eps1lon - [docs] Reduce risk of 404 when changing the default branch (#22801) @eps1lon - [docs] Resolve .tsx first (#22315) @oliviertassinari - [docs] Simplify locales example (#22747) @mbrookes - [docs] Sync translations (#22752, #22851) @l10nbot - [docs] Update installation guide to contain peer dependencies (#22787) @mnajdova - [docs] Update ToggleButton import (#22971) @mbrookes - [docs] Use demo name as codesandbox name (#22926) @eps1lon ### Core - [benchmark] Add cross-env to fix window run issue (#22895) @mnajdova - [core] Batch small changes (#22746) @oliviertassinari - [core] Batch small changes (#22847) @oliviertassinari - [core] Drop babel-plugin-transform-dev-warning (#22802) @eps1lon - [core] Misc dependency fixes (#22909) @eps1lon - [test] Apply lazy forwardRef fix (#22904) @eps1lon - [test] Autocomplete drop "defaultProps" pattern (#22896) @eps1lon - [test] Fix react-next patch (#22800) @eps1lon - [test] Migrate Accordion to react-testing-library (#22952) @bewong89 - [test] Migrate Backdrop to react-testing-library (#22931) @itamar244 - [test] Migrate Container to react-testing-library (#22919) @eladmotola - [test] Migrate CssBaseline to react-testing-library (#22920) @eladmotola - [test] Migrate Fab to react-testing-library (#22959) @The24thDS - [test] Migrate Fade to react-testing-library (#22918) @eladmotola - [test] Migrate Grow to react-testing-library (#22917) @eladmotola - [test] Migrate List to react-testing-library (#22929) @eladmotola - [test] Migrate MenuList and ImageListItem to react-testing-library (#22958) @eladmotola - [test] Migrate MobileStepper to react-testing-library (#22963) @devrasec - [test] Migrate more components to react-testing-library (#22872) @baterson - [test] Migrate more components to react-testing-library (#22874) @baterson - [test] Migrate more components to react-testing-library (#22892) @baterson - [test] Migrate NativeSelect to react-testing-library (#22970) @guillermaster - [test] Migrate NativeSelectInput to react-testing-library (#22910) @baterson - [test] Migrate RadioGroup to react-testing-library (#22953) @eladmotola - [test] Migrate Slide to react-testing-library (#22913) @eladmotola - [test] Migrate SpeedDialIcon to react-testing-library (#22965) @jeferson-sb - [test] Migrate TabIndicator to react-testing-library (#22906) @eladmotola - [test] Migrate TextField to react-testing-library (#22944) @The24thDS - [test] Migrate useTheme,withTheme to react-testing-library (#22928) @eladmotola - [test] Migrate Zoom to react-testing-library (#22914) @eladmotola - [test] Prevent nextjs build cache to grow indefinitely (#22948) @eps1lon - [test] Simplify usage of `yarn mocha` (#22899) @eps1lon - [test] Solve 2000ms timeout (#22778) @oliviertassinari - [test] Update react next patch (#22890) @eps1lon - [test] Use appropriate templates for csb CI (#22943) @eps1lon - [test] Verbose reporter in CI (#22924) @eps1lon ## 5.0.0-alpha.11 ###### _Sep 26, 2020_ 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](https://next.material-ui.com/components/slider-styled/) of the slider in the lab powered by [emotion](https://emotion.sh/). In the event that you are already using styled-components in your application, you can swap emotion for styled-components πŸ’…. Check [this CodeSandbox](https://codesandbox.io/s/sliderstyled-with-styled-components-forked-olc27?file=/package.json) 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](https://material-ui.com/system/basics/)). This change has been in our roadmap for more than a year. We announced it in the [v4 release blog post](https://medium.com/material-ui/material-ui-v4-is-out-4b7587d1e701) as a direction v5 would take. - πŸ›  A first iteration on the unstyled components. You can find a [new version](https://next.material-ui.com/components/slider-styled/#UnstyledSlider.tsx) 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](https://material-ui.com/components/data-grid/) 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/core@v5.0.0-alpha.11` #### Breaking changes - [Chip] Rename `default` variant to `filled` (#22683) @mnajdova Rename `default` variant to `filled` for consistency. ```diff -<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: - The `scrollButtons` prop controls when the scroll buttons are displayed depending on the space available. - The `allowScrollButtonsMobile` prop removes the CSS media query that systematically hides the scroll buttons on mobile. ```diff -<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: ```diff -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) ``` ```diff -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. ```diff 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 #### Changes - [Checkbox] Improve indeterminate UI (#22635) @oliviertassinari - [Chip] Fix prop-type support for custom variants (#22603) @cansin - [icons] Expose a data-test-id attribute on all svg icons (#22634) @jaebradley - [Rating] Add form integration test suite (#22573) @eps1lon - [Rating] Simpler customization of active "no value" styles (#22613) @eps1lon - [Rating] Treat as input when readOnly (#22606) @eps1lon - [Rating] Treat read-only as image (#22639) @eps1lon - [Select] Improve docs for displayEmpty prop (#22601) @mihaipanait - [Slider] Better tracking of mouse events (#22557, #22638) @chrisinajar, @oliviertassinari - [Slider] Create unstyled version and migrate to emotion & styled-components (#22435) @mnajdova - [Slider] Export components from lab and renamed to fit file names (#22723) @mnajdova - [Slider] Fix value label display for custom value component (#22614) @NoNonsense126 - [Stepper] Add slight transition (#22654) @xtrixia - [Tabs] Fix TabScrollButton using absolute path (#22690) @4vanger - [Tabs] Only scroll the visible tabs (#22600) @quochuy - [theme] convertLength does not work for fromUnit !== 'px' (#22739) @brorlarsnicklas - [theme] Fix createSpacing.d.ts definition (#22645) @dabretin - [theme] Fix Hidden breakpoints issues and updates the migration guide (#22702) @mnajdova ### `@material-ui/lab@v5.0.0-alpha.11` #### Breaking changes - [Alert] Move from lab to core (#22651) @mbrookes Move the component from the lab to the core. This component will become stable. ```diff -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. ```diff -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. ```diff -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: ```diff <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> )} /> ``` #### Changes - [lab] Fix transitive dependencies in @material-ui/lab (#22671) @koistya - [Autocomplete] Add "remove-option" to AutocompleteCloseReason type (#22672) @iansjk - [Autocomplete] Don't close popup when Ctrl/Meta is pressed (#22696) @montelius - [Autocomplete] Fix accessibility issue with empty option set (#22712) @tylerjlawson - [Autocomplete] Update GitHub customization example (#22735) @hmaddisb ### `@material-ui/styled-engine@v5.0.0-alpha.11` The new default style engine leveraging emotion. ### `@material-ui/styled-engine-sc@v5.0.0-alpha.11` Allows developer to swap emotion with styled-components. More documentation are coming. ### `@material-ui/icons@v5.0.0-alpha.11` - [icons] Synchronize with Google (#22680) @delewis13 ### `@material-ui/styles@v5.0.0-alpha.11` - [Slider] Create unstyled version and migrate to emotion & styled-components (#22435) @mnajdova ### `@material-ui/system@v5.0.0-alpha.11` - [core] Port createSpacing to TypeScript (#22720) @eps1lon ### Docs - [blog] New posts (#22607) @oliviertassinari - [docs] Add additional context to Autocomplete asynchronous documentation (#22621) @jaebradley - [docs] Add emotion dependencies in codesandbox examples (#22736) @mnajdova - [docs] Add props from Unstyled component to Styled API page (#22733) @mnajdova - [docs] Add ui-schema in related projects (#22644) @elbakerino - [docs] Avoid confusion between layout grid and data grid (#22681) @oliviertassinari - [docs] Batch small changes (#22646) @oliviertassinari - [docs] Configuring redirects for MUI X (#22632) @dtassone - [docs] Customized hook at Autocomplete issue in dark mode (#22605) @hmaddisb - [docs] Encourage DataGrid in /components/tables/ over alternatives (#22637) @oliviertassinari - [docs] Fix emotion broken in SSR (#22731) @mnajdova - [docs] Fix markdown metadata yaml (#22629) @oliviertassinari - [docs] Fix static asset loading with X @oliviertassinari - [docs] Improve Dashboard template (#22647) @pak1989 - [docs] Improve DX for docs generation (#22619) @eps1lon - [docs] Migrate templates to TypeScript (#22650) @oliviertassinari - [docs] New Crowdin updates (#22620) @mbrookes - [docs] Prevent toolbar tooltips overlapping demos (#22732) @eps1lon - [docs] Reduce indirections (#22642) @Arsikod - [docs] Reference experimental slider demos correctly (#22738) @eps1lon - [docs] Remove minimum-scale from meta viewport in docs (#22724) @barik - [docs] Remove wrong migration instruction (#22710) @oliviertassinari - [docs] Use codesandbox deploy for demos created from deploy previews (#22616) @eps1lon ### Core - [core] Port createSpacing to TypeScript (#22720) @eps1lon - [core] Replace ChangeEvent<{}> with SyntheticEvent (#22716) @eps1lon - [core] Use ttp sources directly (#22706) @eps1lon - [test] Add skip ci to Crowdin commit message (#22685) @mbrookes - [test] Only run on push for master/next (#22624) @eps1lon - [test] Run CircleCI anytime (#22676) @eps1lon ## 5.0.0-alpha.10 ###### _Sep 15, 2020_ Big thanks to the 16 contributors who made this release possible. Here are some highlights ✨: - Keep working on the breaking changes before v5-beta. As always, you should find a clear and simple upgrade path for each of them. - And many more πŸ› bug fixes and πŸ“š improvements. ### `@material-ui/core@v5.0.0-alpha.10` #### Breaking changes - [Accordion] Normalize focusVisible logic (#22567) @oliviertassinari Rename `focused` to `focusVisible` for consistency with the other components: ```diff <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. ```diff -<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. ```diff -<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