Skip to content

Commit

Permalink
Merge branch 'next' of https://github.com/mui-org/material-ui into ca…
Browse files Browse the repository at this point in the history
…lendar-picker-skeleton-emotion
  • Loading branch information
siriwatknp committed May 19, 2021
2 parents a176431 + 9bf937a commit a4ef31b
Show file tree
Hide file tree
Showing 106 changed files with 1,296 additions and 1,086 deletions.
172 changes: 172 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,5 +1,170 @@
### [Versions](https://material-ui.com/versions/)

## 5.0.0-alpha.34

_May 18, 2021_

<!-- generated comparing v5.0.0-alpha.33..next -->

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](https://github.com/mui-org/material-ui/issues/20012). 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](https://github.com/mui-org/material-ui/milestone/35) 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

- <!-- 47 --> [Select][NativeSelect] Polish CSS classes (#26186) @m4theushw

**Select, NativeSelect**

Merge the `selectMenu` slot into `select`. Slot `selectMenu` was redundant. The `root` slot is no longer applied to the select, but to the root.

```diff
-<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.

```diff
<TablePagination
- classes={{ input: 'foo' }}
+ classes={{ select: 'foo' }}
/>
```

- <!-- 45 --> [core] Move `StyledEngineProvider` to `@material-ui/core/styles` (#26265) @mnajdova

Change location of `StyledEngineProvider` import.

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

- <!-- 39 --> [Autocomplete] Apply .Mui-focused instead of data-focus on the focused option (#26181) @m4theushw

The `data-focus` attribute is not set on the focused option anymore, instead, global class names are used.

```diff
-'.MuiAutocomplete-option[data-focus="true"]': {
+'.MuiAutocomplete-option.Mui-focused': {
```

- <!-- 31 --> [Radio] Make color primary default (#26180) @vicasas
- <!-- 03 --> [Switch] Make color primary default (#26182) @vicasas
- <!-- 10 --> [pickers] Drop ResponsiveWrapper usage (#26123) @eps1lon

When a responsive picker changes from mobile to desktop, it will now clear its entire state. To keep the original behavior you can implement a controlled picker:

```js
function ResponsiveDateTimePicker(props) {
const [open, setOpen] = React.useState(false);

return (
<DateTimePicker
open={open}
onClose={() => setOpen(false)}
onOpen={() => setOpen(true)}
{...props}
/>
);
}
```

- <!-- 63 --> [Autocomplete] Rename getOptionSelected to isOptionEqualToValue (#26173) @m4theushw
```diff
<Autocomplete
- getOptionSelected={(option, value) => option.title === value.title}
+ isOptionEqualToValue={(option, value) => option.title === value.title}
/>
```

> Follow [this link](https://next.material-ui.com/guides/migration-v4/#main-content) for full migration from v4 => v5

#### Changes

- <!-- 61 --> [TextField] Fix hiddenLabel type of FilledInput (#26290) @siriwatknp
- <!-- 54 --> [TextField] Fix classes forward to InputBase (#26231) @arpitBhalla
- <!-- 17 --> [Autocomplete] Fix missing 'createOption' in AutocompleteCloseReason type (#26197) @Gautam-Arora24
- <!-- 30 --> [Autocomplete] Reduce CSS specificity by 1 (#26238) @Gautam-Arora24
- <!-- 07 --> [ButtonBase] Omit aria-disabled if not disabled (#26189) @Gautam-Arora24
- <!-- 18 --> [colors] Fix A inconsistencies (#26196) @oliviertassinari
- <!-- 08 --> [examples] Fix dynamic global styles & global styles leak in the ssr examples (#26177) @mnajdova
- <!-- 57 --> [Slider] Fix support for non primary colors (#26285) @davidfdriscoll
- <!-- 56 --> [Slider] Center value label for disabled slider (#26257) @davidfdriscoll
- <!-- 19 --> [styled-engine] Fix styled-components not supporting empty style (#26098) @ruppysuppy
- <!-- 21 --> [styles] Fix overrides type issues (#26228) @mnajdova
- <!-- 64 --> [Container] Fix support for custom breakpoints (#26328) @alanszp

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

- <!-- 68 --> [pickers] Migrate TimePickerToolbar to emotion (#26274) @siriwatknp
- <!-- 67 --> [pickers] Migrate DatePickerToolbar to emotion (#26292) @siriwatknp
- <!-- 66 --> [DateTimePicker] Migrate DateTimePickerTabs and Toolbar to emotion (#26327) @siriwatknp
- <!-- 33 --> [DatePicker] Migrate PickersYear to emotion (#25949) @siriwatknp
- <!-- 35 --> [DateRangePicker] Migrate PickersToolbarText to emotion (#25983) @siriwatknp
- <!-- 46 --> [pickers] Migrate StaticWrapper to emotion (#26275) @siriwatknp
- <!-- 58 --> [pickers] Migrate Clock to emotion (#26278) @siriwatknp
- <!-- 43 --> [pickers] Migrate PickersToolbar to emotion (#26273) @siriwatknp
- <!-- 42 --> [pickers] Migrate ClockNumber to emotion (#26058) @siriwatknp
- <!-- 41 --> [pickers] Migrate ClockPointer to emotion (#26057) @siriwatknp
- <!-- 32 --> [pickers] Migrate PickersMonth to emotion (#26021) @siriwatknp
- <!-- 26 --> [pickers] Migrate MonthPicker to emotion (#26025) @siriwatknp
- <!-- 25 --> [pickers] Migrate PickersDay to emotion (#25995) @siriwatknp
- <!-- 06 --> [pickers] Migrate PickersToolbarButton to emotion (#25989) @siriwatknp

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

- <!-- 52 --> [icons] Remove extraneous React.Fragment (#26308) @eps1lon
- <!-- 50 --> [icons] Synchronize icons (#26302) @eps1lon

New DriveFileMove icon and its variants

### Docs

- <!-- 16 --> [NProgressBar] Fix invalid ARIA and HTML (#26234) @eps1lon
- <!-- 65 --> [docs] Simplify demos slider (#26324) @oliviertassinari
- <!-- 48 --> [docs] Use transpiled icons directly (#26268) @eps1lon
- <!-- 44 --> [docs] Remove dependency on withStyles from @material-ui/core/styles (#26269) @mnajdova
- <!-- 40 --> [docs] Add Jalali date picker demo (#26243) @smmoosavi
- <!-- 37 --> [docs] Remove last dependencies on `makeStyles` from `@material-ui/core/styles` (#26246) @mnajdova
- <!-- 29 --> [docs] Polish the pickers demo (#26094) @oliviertassinari
- <!-- 28 --> [docs] Fix broken overrides link on API pages (#26244) @mnajdova
- <!-- 27 --> [docs] Improve documentation for Buttons (#26184) @arpitBhalla
- <!-- 24 --> [docs] Emphasize on props for screen readers (#26222) @atisheyJain03
- <!-- 23 --> [docs] Link third-party routing in Bottom Navigation (#26190) @arpitBhalla
- <!-- 22 --> [docs] Migrate Select, Progress demos to emotion (#26178) @mnajdova
- <!-- 20 --> [docs] Add accessibility section to Badges (#26009) @likitarai1
- <!-- 15 --> [docs] Migrate Popper, Drawer demos to emotion (#26183) @mnajdova
- <!-- 12 --> [docs] Use public next/router events API (#26233) @eps1lon
- <!-- 11 --> [docs] Remove remnants Hidden component (#26191) @vicasas
- <!-- 09 --> [docs] Ensure TreeView demos don't overflow demo container (#26161) @eps1lon
- <!-- 05 --> [docs] Fix a typo in the import statement of LocalizationProvider (#26226) @huyenltnguyen
- <!-- 04 --> [docs] Improve react-admin coverage in the showcase (#26169) @fzaninotto
- <!-- 02 --> [docs] Fix Workbox that are causing infinite loading of site (#26193) @arpitBhalla

### Core

- <!-- 60 --> [core] Skip sx prop in internal components (#26235) @mnajdova
- <!-- 59 --> [core] Remove `withStyles` dependencies from `@material-ui/core/styles` (#26277) @mnajdova
- <!-- 55 --> [core] Include human readable target in the browserstack build (#26322) @eps1lon
- <!-- 53 --> [core] Fix NotchedOutlineProps type (#26305) @gnowland
- <!-- 51 --> [core] Add file for git-blame --ignore-revs-file (#26295) @eps1lon
- <!-- 49 --> [core] Ensure component class keys aren't missing (#25754) @eps1lon
- <!-- 38 --> [core] Drop support for blocking mode (#26262) @eps1lon
- <!-- 36 --> [core] Don't download monorepo packages (#26261) @eps1lon
- <!-- 14 --> [core] Batch small changes (#26199) @oliviertassinari
- <!-- 13 --> [core] Extract classes descriptions from TypeScript (#25933) @eps1lon
- <!-- 34 --> [styled-engine] Fix test script (#26258) @ruppysuppy

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

## 5.0.0-alpha.33

_May 9, 2021_
Expand Down Expand Up @@ -154,6 +319,13 @@ Big thanks to the 17 contributors who made this release possible. Here are some
+<Box component="button" sx={{ display: { xl: 'none', xs: 'block' } }} />
```

```diff
-<Hidden implementation="css" mdDown><Paper /></Hidden>
-<Hidden implementation="css" mdDown><button /></Hidden>
+<Paper sx={{ display: { xs: 'none', md: 'block' } }} />
+<Box component="button" sx={{ display: { xs: 'none', md: 'block' } }} />
```

Use the `useMediaQuery` hook to replace `implementation="js"`:

```diff
Expand Down
6 changes: 3 additions & 3 deletions benchmark/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "benchmark",
"version": "5.0.0-alpha.33",
"version": "5.0.0-alpha.34",
"private": "true",
"scripts": {
"browser": "yarn webpack --config browser/webpack.config.js && node browser/scripts/benchmark.js",
Expand All @@ -14,9 +14,9 @@
"@chakra-ui/system": "^1.0.0",
"@emotion/react": "^11.0.0",
"@emotion/styled": "^11.0.0",
"@material-ui/core": "^5.0.0-alpha.32",
"@material-ui/core": "5.0.0-alpha.34",
"@material-ui/styles": "^5.0.0-alpha.33",
"@material-ui/system": "^5.0.0-alpha.33",
"@material-ui/system": "5.0.0-alpha.34",
"@styled-system/css": "^5.1.5",
"benchmark": "^2.1.4",
"playwright": "^1.6.1",
Expand Down
18 changes: 9 additions & 9 deletions docs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "docs",
"version": "5.0.0-alpha.33",
"version": "5.0.0-alpha.34",
"private": true,
"author": "Material-UI Team",
"license": "MIT",
Expand Down Expand Up @@ -30,17 +30,17 @@
"@fortawesome/fontawesome-svg-core": "^1.2.30",
"@fortawesome/free-solid-svg-icons": "^5.14.0",
"@fortawesome/react-fontawesome": "^0.1.11",
"@material-ui/core": "^5.0.0-alpha.32",
"@material-ui/core": "5.0.0-alpha.34",
"@material-ui/data-grid": "^4.0.0-alpha.21",
"@material-ui/docs": "^5.0.0-alpha.33",
"@material-ui/icons": "^5.0.0-alpha.29",
"@material-ui/lab": "^5.0.0-alpha.33",
"@material-ui/styled-engine": "^5.0.0-alpha.26",
"@material-ui/styled-engine-sc": "^5.0.0-alpha.26",
"@material-ui/docs": "5.0.0-alpha.34",
"@material-ui/icons": "5.0.0-alpha.34",
"@material-ui/lab": "5.0.0-alpha.34",
"@material-ui/styled-engine": "5.0.0-alpha.34",
"@material-ui/styled-engine-sc": "5.0.0-alpha.34",
"@material-ui/styles": "^5.0.0-alpha.33",
"@material-ui/system": "^5.0.0-alpha.33",
"@material-ui/system": "5.0.0-alpha.34",
"@material-ui/types": "^6.0.0",
"@material-ui/unstyled": "^5.0.0-alpha.33",
"@material-ui/unstyled": "5.0.0-alpha.34",
"@trendmicro/react-interpolate": "^0.5.5",
"@types/autosuggest-highlight": "^3.1.0",
"@types/css-mediaquery": "^0.1.0",
Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/autocomplete.json
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,12 @@
"type": { "name": "func" },
"default": "(option) => option.label ?? option"
},
"getOptionSelected": { "type": { "name": "func" } },
"groupBy": { "type": { "name": "func" } },
"handleHomeEndKeys": { "type": { "name": "bool" }, "default": "!props.freeSolo" },
"id": { "type": { "name": "string" } },
"includeInputInList": { "type": { "name": "bool" } },
"inputValue": { "type": { "name": "string" } },
"isOptionEqualToValue": { "type": { "name": "func" } },
"limitTags": { "type": { "name": "custom", "description": "integer" }, "default": "-1" },
"ListboxComponent": { "type": { "name": "elementType" }, "default": "'ul'" },
"ListboxProps": { "type": { "name": "object" } },
Expand Down
4 changes: 2 additions & 2 deletions docs/pages/api-docs/container.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"fixed": { "type": { "name": "bool" } },
"maxWidth": {
"type": {
"name": "enum",
"description": "'lg'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;'xs'<br>&#124;&nbsp;false"
"name": "union",
"description": "'xs'<br>&#124;&nbsp;'sm'<br>&#124;&nbsp;'md'<br>&#124;&nbsp;'lg'<br>&#124;&nbsp;'xl'<br>&#124;&nbsp;false<br>&#124;&nbsp;string"
},
"default": "'lg'"
},
Expand Down
1 change: 1 addition & 0 deletions docs/pages/api-docs/filled-input.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
"endAdornment": { "type": { "name": "node" } },
"error": { "type": { "name": "bool" } },
"fullWidth": { "type": { "name": "bool" } },
"hiddenLabel": { "type": { "name": "bool" } },
"id": { "type": { "name": "string" } },
"inputComponent": { "type": { "name": "elementType" }, "default": "'input'" },
"inputProps": { "type": { "name": "object" }, "default": "{}" },
Expand Down
15 changes: 15 additions & 0 deletions docs/pages/blog/siriwat-kunaporn-joining.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import * as React from 'react';
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog';
import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';

const pageFilename = 'blog/siriwat-kunaporn-joining';
const requireRaw = require.context('!raw-loader!./', false, /siriwat-kunaporn-joining\.md$/);

export default function Page({ docs }) {
return <TopLayoutBlog docs={docs} />;
}

Page.getInitialProps = () => {
const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
return { demos, docs };
};
27 changes: 27 additions & 0 deletions docs/pages/blog/siriwat-kunaporn-joining.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
---
title: Siriwat Kunaporn joins Material-UI
description: We are excited to share that Siriwat Kunaporn has joined Material-UI.
date: 2021-05-17T00:00:00.000Z
authors: ['oliviertassinari']
card: true
---

We are excited to share that [Siriwat Kunaporn](https://twitter.com/siriwatknp) (Jun) has joined Material-UI.
He started a couple of days ago full-time and is part of the core components team.

Before joining Material-UI, Jun worked as a software engineer at ThoughtWorks.
He has spent the last three years as a full-stack engineer, focusing more on React and the implementation of great-looking UIs. Jun is passionate about creating UIs that feel amazing.

We were impressed by his previous work on exploring the customization potential of Material-UI in [MUI Treasury](https://mui-treasury.com/).
He's has demonstrated his care of the details and interest in design.

While we can't predict the future, Jun will initially help us get Material-UI v5 down the finish line.
Then, he will be focusing almost exclusively on pushing Material-UI further in the design realm.
We might start with a [second theme](https://github.com/mui-org/material-ui/issues/22485), a rebranding, a revamp of the documentation or the implementation of ["blocks"](https://deploy-preview-16--material-ui-blocks.netlify.app/).

Jun is the second of a series of 5 new positions we have recently opened and filled.
We will cross the 10 person milestone in the coming weeks.
We have opened these positions as our revenue growth allows.
These new roles will help accelerate our mission, strengthen our existing offering, and initiate a new vertical.

We couldn’t be more excited to have Jun on the team!
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion docs/src/pages/components/autocomplete/Asynchronous.js
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export default function Asynchronous() {
onClose={() => {
setOpen(false);
}}
getOptionSelected={(option, value) => option.title === value.title}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
loading={loading}
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/autocomplete/Asynchronous.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default function Asynchronous() {
onClose={() => {
setOpen(false);
}}
getOptionSelected={(option, value) => option.title === value.title}
isOptionEqualToValue={(option, value) => option.title === value.title}
getOptionLabel={(option) => option.title}
options={options}
loading={loading}
Expand Down
20 changes: 20 additions & 0 deletions docs/src/pages/components/slider/ColorSlider.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from 'react';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';

function valuetext(value) {
return `${value}°C`;
}

export default function ColorSlider() {
return (
<Box sx={{ width: 300 }}>
<Slider
aria-label="Temperature"
defaultValue={30}
getAriaValueText={valuetext}
color="secondary"
/>
</Box>
);
}
20 changes: 20 additions & 0 deletions docs/src/pages/components/slider/ColorSlider.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import * as React from 'react';
import Box from '@material-ui/core/Box';
import Slider from '@material-ui/core/Slider';

function valuetext(value: number) {
return `${value}°C`;
}

export default function ColorSlider() {
return (
<Box sx={{ width: 300 }}>
<Slider
aria-label="Temperature"
defaultValue={30}
getAriaValueText={valuetext}
color="secondary"
/>
</Box>
);
}
Loading

0 comments on commit a4ef31b

Please sign in to comment.