-
-
Notifications
You must be signed in to change notification settings - Fork 32.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'master' into docs/base-select-tailwind-plain-css-demo
- Loading branch information
Showing
338 changed files
with
1,115 additions
and
715 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,5 +1,86 @@ | ||
| # [Versions](https://mui.com/versions/) | ||
|
|
||
| ## 5.13.6 | ||
|
|
||
| _Jun 21, 2023_ | ||
|
|
||
| A big thanks to the 25 contributors who made this release possible. Here are some highlights ✨: | ||
|
|
||
| - 💫 Added [Slider](https://mui.com/material-ui/react-slider/#material-you-version) component using the new Material You design language (#37520) @DiegoAndai. | ||
| - 📚 Added [examples](https://github.com/mui/material-ui/tree/master/examples/material-next-app-router-ts) showcasing how you can use Material UI with next.js's app directory (#37315) @smo043 | ||
|
|
||
| ### `@mui/[email protected]` | ||
|
|
||
| - ​<!-- 45 -->[Autocomplete] Fixed autocomplete's existing option selection (#37012) @bencevoros | ||
| - ​<!-- 44 -->[Autocomplete] Add hint demos to Material UI and Joy UI docs (#37496) @sai6855 | ||
| - ​<!-- 13 -->[Masonry] Fix ResizeObserver loop limit exceeded error (#37208) @hbjORbj | ||
| - ​<!-- 11 -->[Tooltip][material] Improve warning when Tooltip receives string child (#37530) @DiegoAndai | ||
| - ​<!-- 10 -->[Modal] Add missing members to ModalOwnProps (#37568) @ivp-dev | ||
| - ​<!-- 09 -->[Slider] Arrow keys control does not work with float numbers (#37071) @gitstart | ||
| - ​<!-- 08 -->[SvgIcon] allow `svg` as a child (#37231) @siriwatknp | ||
| - ​<!-- 07 -->[Timeline] Add alternate reverse position (#37311) @abhinavkmrru | ||
| - ​<!-- 06 -->[Tooltip] Fix type of sx prop in `slotProps` (#37550) @SuperKXT | ||
| - ​<!-- 05 -->[TouchRipple] perf: avoid calling `clearTimeout()` (#37512) @romgrk | ||
|
|
||
| ### `@mui/[email protected]` | ||
|
|
||
| - ​<!-- 12 -->[Material You] Add Slider component with Material You design (#37520) @DiegoAndai | ||
|
|
||
| ### `@mui/[email protected]` | ||
|
|
||
| - ​<!-- 37 -->[ButtonGroup][joy] Missing border when spacing is more than zero (#37577) @siriwatknp | ||
| - ​<!-- 36 -->[CardActions][joy] Add `CardActions` component (#37441) @siriwatknp | ||
| - ​<!-- 14 -->[Menu][joy] Fix closing of `Menu` in demos (#36917) @sai6855 | ||
|
|
||
| ### `@mui/[email protected]` | ||
|
|
||
| - ​<!-- 39 -->[Menu][base] Add the resetHighlight action (#37392) @michaldudak | ||
| - ​<!-- 38 -->[Select][base] Expose the `areOptionsEqual` prop (#37615) @michaldudak | ||
|
|
||
| ### `@mui/[email protected]` | ||
|
|
||
| - ​<!-- 04 -->[utils] Allow nested imports in @mui/utils to speed up build (#37586) @flaviendelangle | ||
|
|
||
| ### Docs | ||
|
|
||
| - ​<!-- 43 -->[docs][base] Improve Base UI all components images (#37590) @danilo-leal | ||
| - ​<!-- 42 -->[docs][base] Add pages for coming soon components (#37575) @danilo-leal | ||
| - ​<!-- 41 -->[docs][base] Add a Snackbar introduction demo (#37602) @danilo-leal | ||
| - ​<!-- 40 -->[docs][base] Add page for all Base UI components (#37536) @danilo-leal | ||
| - ​<!-- 33 -->[docs] Fix scrollbar on snackbar page (#37657) @oliviertassinari | ||
| - ​<!-- 32 -->[docs] Switch order of snackbar buttons in demos (#37389) @Primajin | ||
| - ​<!-- 31 -->[docs] Add support for Tailwind CSS and plain CSS demos (#37319) @mnajdova | ||
| - ​<!-- 30 -->[docs] Tree view color fix for dark mode in Gmail example (#37051) @PunitSoniME | ||
| - ​<!-- 29 -->[docs] Inline the Base UI demo (#37603) @oliviertassinari | ||
| - ​<!-- 28 -->[docs] Fix typo in themed components page (#37598) @vinayr | ||
| - ​<!-- 27 -->[docs] Fix render inline code in CSS description generation (#37448) @alexfauquette | ||
| - ​<!-- 26 -->[docs] Add styles to styled argument list (#37558) @DiegoAndai | ||
| - ​<!-- 25 -->[docs] Improve awkward wording in READMEs of example projects (#37110) @DIWAKARKASHYAP | ||
| - ​<!-- 24 -->[docs] Fix small base -> base-ui migration issue (#37594) @oliviertassinari | ||
| - ​<!-- 23 -->[docs] Fix GitHub typo (#37578) @oliviertassinari | ||
| - ​<!-- 22 -->[docs] Improve release guide (#37547) @DiegoAndai | ||
| - ​<!-- 21 -->[docs] Review fixes to the Material UI's "Example projects" page (#37444) @danilo-leal | ||
| - ​<!-- 17 -->[docs][joy] Add a messages template (#37546) @sernstberger | ||
| - ​<!-- 16 -->[docs][joy] Add pages for coming soon Joy UI components (#36920) @danilo-leal | ||
| - ​<!-- 15 -->[docs][joy] Add design and consistency tweaks to the Playground (#37580) @danilo-leal | ||
| - ​<!-- 37 -->[docs] Add and revise Base UI + Create React App examples (#36825) @samuelsycamore | ||
| - ​<!-- 20 -->[docs-infra] Fix demos border radius (#37658) @oliviertassinari | ||
| - ​<!-- 19 -->[docs-infra] Add analyticsTags to Algolia (#37600) @Janpot | ||
| - ​<!-- 18 -->[docs-infra] Simplify product id handling (#37593) @oliviertassinari | ||
| - ​<!-- 35 -->[CHANGELOG] Add missing release date for v5.13.5 @oliviertassinari | ||
| - ​<!-- 16 -->[examples] Shell command fix in the readme file of material-next-app-router-ts example (#37675) @bablukpik | ||
| - ​<!-- 15 -->[examples] Next.js v13 app router with Material UI (#37315) @smo043 | ||
|
|
||
| ### Core | ||
|
|
||
| - ​<!-- 34 -->[core] Update to Node.js v18 for `test-dev` CI (#37604) @ZeeshanTamboli | ||
| - ​<!-- 39 -->[core] Add priority support issue template (#37671) @DanailH | ||
| - ​<!-- 03 -->[website] Update roadmap page (#37587) @cherniavskii | ||
| - ​<!-- 02 -->[website] Add CSP to limit iframes to self @oliviertassinari | ||
| - ​<!-- 01 -->[website] Link mui-x Stack Overflow in footer link (#37509) @richbustos | ||
|
|
||
| All contributors of this release in alphabetical order: @abhinavkmrru, @alexfauquette, @bencevoros, @cherniavskii, @danilo-leal, @DiegoAndai, @DIWAKARKASHYAP, @flaviendelangle, @gitstart, @hbjORbj, @ivp-dev, @Janpot, @michaldudak, @mnajdova, @oliviertassinari, @Primajin, @PunitSoniME, @richbustos, @romgrk, @sai6855, @sernstberger, @siriwatknp, @SuperKXT, @vinayr, @ZeeshanTamboli | ||
|
|
||
| ## 5.13.5 | ||
|
|
||
| _Jun 12, 2023_ | ||
|
|
@@ -9777,7 +9858,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som | |
|
|
||
| While the source code is currently hosted in the [main repository](https://github.com/mui/material-ui), we might move it to the [x repository](https://github.com/mui/mui-x) in the future, depending on what is easier for the commercial date range picker. The date picker will stay open source no matter what. | ||
|
|
||
| - 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/overview/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page. | ||
| - 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page. | ||
| - 👩🎨 Upgrade emotion to v11 (#23007) @mnajdova. | ||
| - And many more 🐛 bug fixes and 📚 improvements. | ||
|
|
||
|
|
@@ -10179,7 +10260,7 @@ Here are some highlights ✨: | |
| 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://mui.com/system/getting-started/overview/). 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. | ||
| This was a prerequisite step to improve the [system](https://mui.com/system/getting-started/). 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://mui.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. | ||
|
|
@@ -10520,7 +10601,7 @@ Here are some highlights ✨: | |
|
|
||
| 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://mui.com/system/getting-started/overview/)). | ||
| 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://mui.com/system/getting-started/)). | ||
|
|
||
| This change has been in our roadmap for more than a year. | ||
| We announced it in the [v4 release blog post](https://mui.com/blog/material-ui-v4-is-out/) as a direction v5 would take. | ||
|
|
@@ -11773,7 +11854,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som | |
| /> | ||
| ``` | ||
|
|
||
| - [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/getting-started/overview/) (#21413) @mnajdova. | ||
| - [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/getting-started/) (#21413) @mnajdova. | ||
|
|
||
| ```diff | ||
| -import Typography from '@material-ui/core/Typography'; | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 85 additions & 0 deletions
85
docs/data/base/components/input/UnstyledInputBasic/css/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| import * as React from 'react'; | ||
| import Input from '@mui/base/Input'; | ||
| import { useTheme } from '@mui/system'; | ||
|
|
||
| export default function UnstyledInputBasic() { | ||
| return ( | ||
| <React.Fragment> | ||
| <Input | ||
| slotProps={{ input: { className: 'CustomInput' } }} | ||
| aria-label="Demo input" | ||
| placeholder="Type something…" | ||
| /> | ||
| <Styles /> | ||
| </React.Fragment> | ||
| ); | ||
| } | ||
|
|
||
| const cyan = { | ||
| 50: '#E9F8FC', | ||
| 100: '#BDEBF4', | ||
| 200: '#99D8E5', | ||
| 300: '#66BACC', | ||
| 400: '#1F94AD', | ||
| 500: '#0D5463', | ||
| 600: '#094855', | ||
| 700: '#063C47', | ||
| 800: '#043039', | ||
| 900: '#022127', | ||
| }; | ||
|
|
||
| const grey = { | ||
| 50: '#F3F6F9', | ||
| 100: '#E7EBF0', | ||
| 200: '#E0E3E7', | ||
| 300: '#CDD2D7', | ||
| 400: '#B2BAC2', | ||
| 500: '#A0AAB4', | ||
| 600: '#6F7E8C', | ||
| 700: '#3E5060', | ||
| 800: '#2D3843', | ||
| 900: '#1A2027', | ||
| }; | ||
|
|
||
| function useIsDarkMode() { | ||
| const theme = useTheme(); | ||
| return theme.palette.mode === 'dark'; | ||
| } | ||
|
|
||
| function Styles() { | ||
| // Replace this with your app logic for determining dark mode | ||
| const isDarkMode = useIsDarkMode(); | ||
|
|
||
| return ( | ||
| <style> | ||
| {` | ||
| .CustomInput { | ||
| width: 320px; | ||
| font-family: IBM Plex Sans, sans-serif; | ||
| font-size: 0.875rem; | ||
| font-weight: 400; | ||
| line-height: 1.5; | ||
| padding: 12px; | ||
| border-radius: 12px; | ||
| color: ${isDarkMode ? grey[300] : grey[900]}; | ||
| background: ${isDarkMode ? grey[900] : '#fff'}; | ||
| border: 1px solid ${isDarkMode ? grey[700] : grey[200]}; | ||
| box-shadow: 0px 2px 2px ${isDarkMode ? grey[900] : grey[50]}; | ||
| &:hover { | ||
| border-color: ${cyan[400]}; | ||
| } | ||
| &:focus { | ||
| border-color: ${cyan[400]}; | ||
| box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]}; | ||
| } | ||
| &:focus-visible { | ||
| outline: 0; | ||
| } | ||
| } | ||
| `} | ||
| </style> | ||
| ); | ||
| } |
Oops, something went wrong.